/* Original lesson-specific/demo styles extracted from grid/grid-lecture.html; consolidate after visual QA. */

/* ===== 리셋 & 기본 ===== */

:root{
  --bg: var(--page);
  --card: var(--panel);
  --primary: var(--primary-ui);
  --primary-light: var(--primary-ui-pale);
  --primary-dark: var(--primary-ui-hover);
  --accent: #f72585;
  --text: var(--ink);
  --sub: var(--ink-sub);
  --muted: var(--ink-muted);
  --border: var(--line);
  --code-bg: #1e1e2e;
  --radius: 12px;
  --green: #10b981;
  --amber: #f59e0b;
}
body {
  font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* ===== 사이드바 네비 ===== */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 220px;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.3s ease;
}
.sidebar.collapsed { transform: translateX(-220px); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark);
  letter-spacing: 0.05em;
}
.sidebar-toggle {
  display: none;
  background: none; border: none;
  cursor: pointer; font-size: 18px;
  color: var(--sub); padding: 2px;
  line-height: 1;
}

.nav-home {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  transition: all 0.15s;
}
.nav-home:hover { background: var(--primary-light); }
.nav-home-icon { font-size: 14px; }

.nav-item {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--sub);
  text-decoration: none;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.nav-item:hover { color: var(--primary); background: var(--primary-light); }
.nav-item.active { color: var(--primary); border-left-color: var(--primary); background: var(--primary-light); font-weight: 600; }
.nav-num { font-family: monospace; font-size: 11px; color: var(--muted); margin-right: 6px; }

/* 모바일 햄버거 버튼 */
.menu-btn {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  background: var(--primary);
  color: #fff;
  border: none; border-radius: 8px;
  width: 40px; height: 40px;
  font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.menu-btn:hover { opacity: 0.85; }

/* 모바일 오버레이 */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ===== 메인 콘텐츠 ===== */
.main { margin-left: 220px; padding: 40px 40px 100px; max-width: 960px; transition: margin 0.3s; }

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-220px); }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: flex; }
  .sidebar-toggle { display: block; }
  .main { margin-left: 0; padding: 60px 16px 80px; }
}

/* ===== 히어로 ===== */
.hero {
  text-align: center;
  padding: 60px 20px 48px;
  background: var(--panel);
  border-radius: var(--radius);
  color: var(--ink);
  border: 1px solid var(--line);
  margin-bottom: 48px;
}
.hero h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; letter-spacing: -1px; }
.hero p { font-size: 16px; opacity: 0.85; }
.hero-badges { display: flex; gap: 8px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.hero-badge {
  background: var(--primary-ui-pale);
  border: 1px solid var(--line);
  color: var(--primary-ui-hover);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
}

/* ===== 섹션 ===== */
.section { margin-bottom: 64px; scroll-margin-top: 24px; }
.section-header { margin-bottom: 24px; }
.section-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.section-title { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -0.5px; }
.section-desc { font-size: 14px; color: var(--sub); line-height: 1.7; }

/* ===== 카드 ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sub);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.dot-blue { background: var(--primary); }
.dot-green { background: var(--green); }
.dot-amber { background: var(--amber); }

/* ===== 코드 블록 ===== */
.code-block {
  background: var(--code-bg);
  padding: 20px;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 13px;
  color: #cdd6f4;
  line-height: 2;
  overflow-x: auto;
}
.code-block .cm   { color: #6c7086; }
.code-block .sel  { color: #cba6f7; }
.code-block .prop { color: #89b4fa; }
.code-block .val  { color: #a6e3a1; }
.code-block .str  { color: #f38ba8; }
.code-block .num  { color: #fab387; }

/* ===== 라이브 프리뷰 ===== */
.preview {
  padding: 20px;
  background: #f1f5f9;
  min-height: 80px;
}
.preview-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* 프리뷰용 그리드 아이템 */
.pi {
  background: var(--primary-light);
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--primary-dark);
  min-height: 48px;
  transition: all 0.3s;
}
.pi.green { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.pi.amber { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.pi.ghost { background: transparent; border: 2px dashed var(--border); color: var(--muted); font-size: 11px; }

/* ===== 컨트롤 ===== */
.controls { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--card); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ctrl-group { display: flex; align-items: center; gap: 10px; width: 50%; }
.ctrl-label { font-size: 12px; color: var(--sub); font-weight: 500; min-width: 80px; }
.ctrl-group input[type=range] { width: 120px; accent-color: var(--primary); }
.ctrl-val { font-size: 12px; font-family: monospace; font-weight: 600; color: var(--primary); min-width: 36px; }
.ctrl-group select {
  font-size: 12px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text); font-family: inherit;
}
.tab-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.tab-btn {
  font-size: 12px; padding: 5px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--sub); cursor: pointer; transition: all 0.15s; font-weight: 500;
}
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== 팁 박스 ===== */
.tip {
  border-left: 3px solid var(--primary);
  background: var(--primary-light);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--primary-dark);
  margin-top: 16px;
  line-height: 1.7;
}
.tip.green { border-color: var(--green); background: #d1fae5; color: #065f46; }
.tip.amber { border-color: var(--amber); background: #fef3c7; color: #92400e; }

/* ===== 비교 그리드 ===== */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.compare-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare-title { font-size: 12px; font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }

/* ===== 실습 예제 ===== */
.demo-hince {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 0.5fr 1fr;
  gap: 4px;
}
.demo-hince .hi {
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #3730a3;
  min-height: 80px;
}

.demo-nh {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  grid-template-areas:
    ". . . a"
    ". . b c"
    ". d e f"
    "g h i .";
}
.demo-nh .ni {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #065f46;
  min-height: 50px;
}

/* 파트너 로고 */
.demo-partner-row1 { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 8px; }
.demo-partner-row2 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 0 calc(100% / 10); }
.demo-partner .lc {
  background: #f7f5f1;
  border: 1px solid #e5e1da;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #555;
  height: 56px;
}

/* divider */
.divider { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* 배지 */
.badge {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 20px; font-weight: 600; margin-left: 6px;
}
.badge-blue { background: var(--primary-light); color: var(--primary-dark); }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-amber { background: #fef3c7; color: #92400e; }