/* ============================================================
   KOREAN LADDER — Website Design System (web, editorial)
   Evolved from the lesson-card identity: navy / blue / coral,
   Noto Sans KR + Inter Tight. Lighter, calmer, document-first.
   ============================================================ */
@font-face {
  font-family: "Noto Sans KR";
  src: url("./assets/fonts/noto-sans-kr-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("./assets/fonts/noto-sans-kr-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("./assets/fonts/noto-sans-kr-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("./assets/fonts/noto-sans-kr-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("./assets/fonts/noto-sans-kr-900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/inter-tight-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/inter-tight-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/inter-tight-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/inter-tight-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/fonts/inter-tight-800.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space-grotesk-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space-grotesk-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space-grotesk-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/fonts/jetbrains-mono-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/fonts/jetbrains-mono-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --navy:#16245E;  --navy-2:#26397C;  --ink:#1A2547;
  --blue:#2563EB;  --blue-2:#5B8DEF;  --blue-soft:#EAF1FE;  --blue-border:#C3D6F8;
  --coral:#E11D6B; --coral-2:#F25C94; --coral-soft:#FCE6F0; --coral-border:#F4C2D7;
  --slate:#566388; --slate-2:#8A95B2;
  /* levels */
  --beg:#109564;   --beg-soft:#E7F5EE; --beg-border:#A9DCC4;
  --int:#2563EB;   --int-soft:#EAF1FE; --int-border:#C3D6F8;
  --adv:#16245E;   --adv-soft:#E7EAF4; --adv-border:#BBC4DD;
  --amber:#B4690E; --amber-soft:#FBF0DD;
  /* surfaces */
  --paper:#FFFFFF; --bg:#F3F6FC; --bg-2:#E9EFF8; --bg-3:#DEE7F4;
  --line:#E3E9F3; --line-soft:#EDF1F8; --line-strong:#CBD6E8;
  /* type */
  --kr:'Noto Sans KR','Inter Tight',sans-serif;
  --en:'Inter Tight','Noto Sans KR',sans-serif;
  --display:'Space Grotesk','Inter Tight',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* radii */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --pill:999px;
  /* shadow (web, soft) */
  --sh-sm:0 2px 8px rgba(22,36,94,.06);
  --sh:0 10px 28px rgba(22,36,94,.09);
  --sh-lg:0 24px 60px rgba(22,36,94,.16);
  --sh-raised:0 30px 80px rgba(12,20,50,.28);
  /* layout */
  --maxw:1240px; --gut:clamp(20px,5vw,56px);
  --nav-h:72px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--en); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }
.container { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- type helpers ---------- */
.eyebrow { font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.kr { font-family:var(--kr); }
.en-gloss { color:var(--slate); }

/* =====================================================================
   TOP NAV
   ===================================================================== */
.nav {
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); height:100%; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:13px; flex:none; }
.brand-mark { width:42px; height:42px; border-radius:12px; flex:none; background:linear-gradient(150deg,var(--navy),#33478f); position:relative; box-shadow:var(--sh-sm); }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; left:10px; right:10px; height:3.5px; border-radius:2px; background:rgba(255,255,255,.92); }
.brand-mark::before { top:14px; } .brand-mark::after { top:25px; }
.brand-mark i { position:absolute; top:10px; bottom:10px; width:3.5px; border-radius:2px; background:var(--coral); }
.brand-mark i.l { left:15px; } .brand-mark i.r { right:15px; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text .ko { font-family:var(--kr); font-weight:900; font-size:19px; color:var(--navy); }
.brand-text .en { font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--slate-2); }
.nav-links { display:flex; align-items:center; gap:6px; margin-left:8px; }
.nav-links a { font-weight:600; font-size:15.5px; color:var(--slate); padding:9px 15px; border-radius:var(--r-sm); transition:background .15s, color .15s; }
.nav-links a:hover { background:var(--bg-2); color:var(--navy); }
.nav-links a.active { color:var(--navy); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-search { display:flex; align-items:center; gap:9px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--pill); padding:9px 16px; min-width:230px; transition:border-color .15s, box-shadow .15s; }
.nav-search:focus-within { border-color:var(--blue-border); box-shadow:0 0 0 3px var(--blue-soft); background:#fff; }
.nav-search svg { width:18px; height:18px; color:var(--slate-2); flex:none; }
.nav-search input { border:none; background:none; outline:none; font-size:15px; color:var(--ink); width:100%; font-family:var(--en); }
.nav-toggle { display:none; width:44px; height:44px; border-radius:var(--r-sm); align-items:center; justify-content:center; color:var(--navy); }
.nav-toggle svg { width:26px; height:26px; }

/* mobile drawer */
.mnav { display:none; }
@media (max-width:880px){
  .nav-links, .nav-search { display:none; }
  .nav-toggle { display:flex; }
  .mnav { display:block; position:fixed; inset:var(--nav-h) 0 0; z-index:55; background:rgba(12,19,48,.36); opacity:0; pointer-events:none; transition:opacity .2s; }
  .mnav.open { opacity:1; pointer-events:auto; }
  .mnav-panel { background:#fff; border-bottom:1px solid var(--line); padding:18px var(--gut) 26px; transform:translateY(-12px); transition:transform .22s var(--ease,ease); box-shadow:var(--sh); }
  .mnav.open .mnav-panel { transform:none; }
  .mnav .nav-search { display:flex; width:100%; margin-bottom:14px; }
  .mnav-links { display:flex; flex-direction:column; gap:4px; }
  .mnav-links a { font-weight:700; font-size:18px; color:var(--navy); padding:14px 12px; border-radius:var(--r-sm); }
  .mnav-links a:hover { background:var(--bg-2); }
}

/* =====================================================================
   BUTTONS / CHIPS / BADGES
   ===================================================================== */
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--en); font-weight:700; font-size:15.5px; padding:12px 22px; border-radius:var(--pill); transition:transform .14s var(--ease,ease), background .14s, box-shadow .14s, border-color .14s; border:1.5px solid transparent; }
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--navy); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover { background:#1d3070; transform:translateY(-1px); box-shadow:var(--sh); }
.btn-coral { background:var(--coral); color:#fff; box-shadow:0 6px 18px rgba(225,29,107,.28); }
.btn-coral:hover { background:#c8175e; transform:translateY(-1px); }
.btn-ghost { background:#fff; color:var(--navy); border-color:var(--line-strong); }
.btn-ghost:hover { background:var(--bg-2); border-color:var(--slate-2); transform:translateY(-1px); }
.btn-sm { padding:9px 16px; font-size:14px; }
.btn-block { width:100%; justify-content:center; }

.badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--en); font-weight:700; font-size:13px; padding:5px 12px; border-radius:var(--pill); letter-spacing:.02em; }
.lv { color:#fff; }
.lv-a { background:var(--beg); } .lv-b { background:var(--int); } .lv-c { background:var(--adv); }
.lv-soft.lv-a { background:var(--beg-soft); color:var(--beg); }
.lv-soft.lv-b { background:var(--int-soft); color:var(--int); }
.lv-soft.lv-c { background:var(--adv-soft); color:var(--adv); }
.topic-tag { font-family:var(--en); font-weight:600; font-size:13px; color:var(--slate); background:var(--bg-2); border:1px solid var(--line); padding:5px 12px; border-radius:var(--pill); }

/* =====================================================================
   SECTION HEADER
   ===================================================================== */
.section { padding-block:clamp(48px,7vw,88px); }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head h2 { font-family:var(--display); font-weight:700; font-size:clamp(28px,3.6vw,40px); color:var(--navy); margin:.35em 0 0; letter-spacing:-.01em; line-height:1.1; }
.section-head .sub { color:var(--slate); font-size:17px; margin-top:8px; max-width:560px; }
.section-head .link { font-weight:700; color:var(--blue); display:inline-flex; align-items:center; gap:6px; }
.section-head .link svg { width:18px; height:18px; }

/* =====================================================================
   HERO + LEVEL LADDER
   ===================================================================== */
.hero { position:relative; overflow:hidden; background:
   radial-gradient(1100px 620px at 88% -10%,#E2ECFB 0,rgba(226,236,251,0) 60%),
   linear-gradient(180deg,#fff 0%,var(--bg) 100%); border-bottom:1px solid var(--line); }
.hero-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; padding-block:clamp(48px,7vw,86px); }
.hero h1 { font-family:var(--display); font-weight:700; font-size:clamp(40px,5.4vw,68px); line-height:1.04; letter-spacing:-.025em; color:var(--navy); margin:0; }
.hero h1 .ko { display:block; font-family:var(--kr); font-weight:900; font-size:.62em; color:var(--coral); margin-bottom:.18em; letter-spacing:-.02em; }
.hero p.lede { font-size:clamp(17px,1.5vw,20px); color:var(--slate); margin:22px 0 30px; max-width:520px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:28px; margin-top:34px; }
.hero-stats .s { } .hero-stats .n { font-family:var(--display); font-weight:700; font-size:30px; color:var(--navy); }
.hero-stats .l { font-size:14px; color:var(--slate); }

/* ladder */
.ladder { display:flex; flex-direction:column; gap:12px; }
.ladder-cap { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-2); margin-bottom:4px; }
.rung { display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--sh-sm); transition:transform .16s var(--ease,ease), box-shadow .16s, border-color .16s; cursor:pointer; }
.rung:hover { transform:translateX(6px); box-shadow:var(--sh); border-color:var(--line-strong); }
.rung .code { font-family:var(--display); font-weight:700; font-size:26px; width:62px; height:62px; border-radius:16px; display:grid; place-items:center; color:#fff; flex:none; }
.rung .tx { flex:1; }
.rung .tx .t { display:block; font-weight:700; font-size:18px; color:var(--navy); line-height:1.2; }
.rung .tx .d { display:block; margin-top:3px; font-size:14.5px; color:var(--slate); line-height:1.35; }
.rung .arrow { color:var(--slate-2); transition:transform .16s, color .16s; } .rung:hover .arrow { transform:translateX(4px); color:var(--navy); }
.rung .arrow svg { width:22px; height:22px; }
.rung.l1 { margin-right:48px; } .rung.l1 .code { background:var(--beg); }
.rung.l2 { margin-right:24px; } .rung.l2 .code { background:var(--int); }
.rung.l3 { margin-right:0;  } .rung.l3 .code { background:var(--adv); }

/* =====================================================================
   FILTER BAR
   ===================================================================== */
.filterbar { position:sticky; top:var(--nav-h); z-index:40; background:rgba(243,246,252,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding-block:16px; }
.filterbar-inner { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.filter-group { display:flex; align-items:center; gap:8px; }
.filter-group .gl { font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-2); margin-right:2px; }
.chip { font-family:var(--en); font-weight:600; font-size:14px; color:var(--slate); background:#fff; border:1.5px solid var(--line); padding:8px 15px; border-radius:var(--pill); transition:all .14s; white-space:nowrap; }
.chip:hover { border-color:var(--slate-2); color:var(--navy); }
.chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip.lv-a.active { background:var(--beg); border-color:var(--beg); }
.chip.lv-b.active { background:var(--int); border-color:var(--int); }
.chip.lv-c.active { background:var(--adv); border-color:var(--adv); }
.filter-count { margin-left:auto; font-size:14.5px; color:var(--slate); font-weight:600; }
.filter-count b { color:var(--navy); }
.m-filter-toggle { display:none; }

/* =====================================================================
   LESSON GRID + CARD
   ===================================================================== */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-sm); transition:transform .18s var(--ease,ease), box-shadow .18s, border-color .18s; }
.card:hover { transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--line-strong); }
.card-thumb { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.card-thumb .thumb-media { position:absolute; inset:0; background-position:center; background-size:cover; transform:scale(1.02); filter:saturate(1.02) contrast(1.02); }
.card-thumb .thumb-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,28,66,.18),rgba(18,28,66,.58)); }
.card-thumb .glyph { position:relative; z-index:1; font-family:var(--kr); font-weight:900; font-size:96px; color:rgba(255,255,255,.92); line-height:1; text-shadow:0 8px 24px rgba(12,19,48,.24); }
.card-thumb .play { position:absolute; right:14px; bottom:14px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:var(--sh-sm); }
.card-thumb .play svg { width:20px; height:20px; color:var(--navy); margin-left:2px; }
.card-thumb .dur { position:absolute; left:14px; bottom:14px; font-family:var(--mono); font-weight:600; font-size:12.5px; color:#fff; background:rgba(16,24,48,.6); padding:4px 9px; border-radius:7px; }
.card-thumb .lv-pin { position:absolute; left:14px; top:14px; z-index:1; }
.card-thumb .doc-pin { position:absolute; right:14px; top:14px; z-index:1; display:inline-flex; align-items:center; gap:5px; font-weight:700; font-size:12px; color:var(--navy); background:rgba(255,255,255,.92); padding:5px 10px; border-radius:var(--pill); box-shadow:var(--sh-sm); }
.card-thumb .doc-pin svg { width:14px; height:14px; }
.card-body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-series { font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
.card-title { margin:0; }
.card-title .ko { display:block; font-family:var(--kr); font-weight:700; font-size:21px; color:var(--navy); line-height:1.25; }
.card-title .en { display:block; font-size:15px; color:var(--slate); margin-top:3px; }
.card-meta { margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; }
.card-meta .ava { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--kr); font-weight:700; font-size:13px; color:#fff; }
.card-meta .who { font-size:13.5px; color:var(--slate); font-weight:600; }
.card-meta .tags { margin-left:auto; display:flex; gap:6px; }
.cast-stack { display:inline-flex; align-items:center; }
.cast-stack img { width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:var(--sh-sm); margin-right:-10px; background:var(--bg-2); }
.cast-stack-sm img { width:28px; height:28px; }

/* card thumbnail level gradients */
.th-a { background:linear-gradient(150deg,#1aa974,#0c7c52); }
.th-b { background:linear-gradient(150deg,#3f7bef,#1d4fc4); }
.th-c { background:linear-gradient(150deg,#26397c,#141f4a); }

.empty { text-align:center; padding:80px 20px; color:var(--slate); }
.empty-icon svg,
.empty svg { width:54px; height:54px; color:var(--slate-2); margin-bottom:14px; }
.empty h3 { font-family:var(--display); color:var(--navy); font-size:22px; margin:0 0 6px; }

/* =====================================================================
   TEACHERS
   ===================================================================== */
.teachers { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; }
.teacher { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; text-align:center; box-shadow:var(--sh-sm); }
.teacher-photo { width:96px; height:96px; border-radius:50%; margin:0 auto 16px; object-fit:cover; border:4px solid #fff; box-shadow:var(--sh); }
.teacher .nm { font-family:var(--kr); font-weight:700; font-size:20px; color:var(--navy); }
.teacher .ro { font-size:14px; color:var(--coral); font-weight:700; margin-top:3px; }
.teacher.learner .ro { color:var(--blue); }
.teacher-blurb { color:var(--slate); font-size:14.5px; margin:10px 0 0; line-height:1.5; }

/* =====================================================================
   STUDY PATHS
   ===================================================================== */
.paths { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:24px; }
.path { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; transition:transform .16s, box-shadow .16s; }
.path:hover { transform:translateY(-4px); box-shadow:var(--sh); }
.path-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.path-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff; }
.path-icon svg { width:26px; height:26px; }
.path h3 { font-family:var(--display); font-weight:700; font-size:24px; color:var(--navy); margin:0 0 6px; }
.path .desc { color:var(--slate); font-size:15.5px; margin-bottom:20px; }
.path-steps { display:flex; flex-direction:column; gap:0; margin-bottom:22px; }
.path-step { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); position:relative; }
.path-step:last-child { border-bottom:none; }
.path-step .dot { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13px; background:var(--bg-2); color:var(--slate); border:1.5px solid var(--line); }
.path-step.done .dot { background:var(--beg); color:#fff; border-color:var(--beg); }
.path-step .st-t { font-weight:600; font-size:16px; color:var(--ink); }
.path-step .st-t .ko { font-family:var(--kr); }
.path-step .st-m { margin-left:auto; font-size:13px; color:var(--slate-2); font-family:var(--mono); }
.path-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.path-prog { font-size:13.5px; color:var(--slate); font-weight:600; }

/* =====================================================================
   LESSON PAGE
   ===================================================================== */
.breadcrumb { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--slate); padding-block:20px; flex-wrap:wrap; }
.breadcrumb a:hover { color:var(--navy); }
.breadcrumb .sep { color:var(--slate-2); }
.breadcrumb .cur { color:var(--navy); font-weight:600; }

.lesson-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start; padding-bottom:80px; }
@media (max-width:1040px){ .lesson-layout { grid-template-columns:1fr; } }

.player { background:#0c1330; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); position:relative; aspect-ratio:16/9; display:grid; place-items:center; }
.player.real-player { background:#fff; }
.player-mount { width:100%; height:100%; background:linear-gradient(180deg,#dfe8fa,#f9fbff); }
.player-mount iframe { width:100%; height:100%; border:0; }
.player .bg { position:absolute; inset:0; }
.player .glyph { font-family:var(--kr); font-weight:900; font-size:clamp(80px,12vw,150px); color:rgba(255,255,255,.16); line-height:1; }
.player .playbtn { position:relative; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.95); display:grid; place-items:center; box-shadow:var(--sh-lg); transition:transform .16s; }
.player .playbtn:hover { transform:scale(1.06); }
.player .playbtn svg { width:34px; height:34px; color:var(--navy); margin-left:4px; }
.player .pbar { position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(0deg,rgba(8,13,32,.85),rgba(8,13,32,0)); display:flex; align-items:center; gap:14px; padding:0 18px; }
.player .pbar .track { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.25); position:relative; }
.player .pbar .track::after { content:""; position:absolute; left:0; top:0; bottom:0; width:34%; background:var(--coral); border-radius:3px; }
.player .pbar .tt { font-family:var(--mono); font-size:12.5px; color:rgba(255,255,255,.85); }

.lesson-head { margin:26px 0 8px; }
.lesson-head .series { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.lesson-head h1 { font-family:var(--kr); font-weight:900; font-size:clamp(28px,3.4vw,40px); color:var(--navy); margin:8px 0 6px; line-height:1.2; }
.lesson-head .sub { font-size:18px; color:var(--slate); }
.lesson-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.lesson-meta .who { display:flex; align-items:center; gap:9px; }
.lesson-meta .who .ava { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--kr); font-weight:700; font-size:14px; color:#fff; }
.lesson-meta .who .nm { font-weight:600; font-size:14.5px; color:var(--ink); }
.lesson-meta .dotsep { width:4px; height:4px; border-radius:50%; background:var(--slate-2); }
.lesson-meta .mi { font-size:14.5px; color:var(--slate); display:inline-flex; align-items:center; gap:6px; }
.lesson-meta .mi svg { width:16px; height:16px; }
.lesson-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.lesson-rights { color:var(--slate); font-size:14px; margin:16px 0 0; line-height:1.55; }

/* doc tabs */
.docwrap { margin-top:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.doc-tabs { display:flex; gap:2px; padding:8px 8px 0; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--bg); scrollbar-width:thin; }
.doc-tab { font-family:var(--en); font-weight:700; font-size:14.5px; color:var(--slate); padding:13px 18px; border-radius:10px 10px 0 0; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; border-bottom:3px solid transparent; transition:color .14s, background .14s; }
.doc-tab svg { width:17px; height:17px; }
.doc-tab:hover { color:var(--navy); background:rgba(255,255,255,.6); }
.doc-tab.active { color:var(--navy); background:#fff; border-bottom-color:var(--coral); }
.doc-panel { display:none; padding:clamp(22px,3.4vw,36px); }
.doc-panel.active { display:block; animation:fade .25s ease; }
@keyframes fade { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes wavePulse {
  0%, 100% { transform:scaleY(.55); }
  50% { transform:scaleY(1); }
}

.panel-lead { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
.panel-lead h2 { font-family:var(--display); font-weight:700; font-size:24px; color:var(--navy); margin:0; }
.panel-lead p { color:var(--slate); font-size:15px; margin:6px 0 0; }

/* transcript */
.transcript { display:flex; flex-direction:column; gap:2px; }
.tline { display:grid; grid-template-columns:74px 1fr; gap:18px; padding:13px 14px; border-radius:12px; transition:background .14s; cursor:pointer; width:100%; text-align:left; }
.tline:hover { background:var(--bg); }
.tline .ts { font-family:var(--mono); font-weight:600; font-size:13.5px; color:var(--blue); padding-top:3px; }
.tline .ko { font-family:var(--kr); font-weight:500; font-size:18px; color:var(--ink); line-height:1.5; }
.tline .en { color:var(--slate); font-size:15px; margin-top:3px; }

/* dialogue */
.dlg { display:flex; flex-direction:column; gap:14px; }
.dturn { display:flex; gap:14px; align-items:flex-start; }
.dturn .who { flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-family:var(--kr); font-weight:700; font-size:18px; color:#fff; }
.dturn.a .who { background:var(--navy); } .dturn.b .who { background:var(--coral); }
.dbubble { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:15px 20px; flex:1; }
.dturn.b .dbubble { background:var(--coral-soft); border-color:var(--coral-border); }
.dbubble .ko { font-family:var(--kr); font-weight:600; font-size:19px; color:var(--ink); line-height:1.4; }
.dbubble .rom { font-style:italic; color:var(--slate-2); font-size:14px; margin-top:5px; }
.dbubble .en { color:var(--slate); font-size:15px; margin-top:4px; }

/* vocab table */
.vocab { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.vocab th { font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); background:var(--bg); text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); }
.vocab td { padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.vocab tr:last-child td { border-bottom:none; }
.vocab tr:hover td { background:var(--bg); }
.vocab .w { font-family:var(--kr); font-weight:700; font-size:21px; color:var(--navy); }
.vocab .rom { font-style:italic; color:var(--slate-2); font-size:14px; }
.vocab .mean { font-size:15.5px; color:var(--ink); }
.vocab .ex { font-family:var(--kr); font-size:15px; color:var(--slate); }
.vocab .sp { width:190px; text-align:right; }

/* grammar / pattern */
.gram { display:flex; flex-direction:column; gap:24px; }
.gcard { border:1px solid var(--line); border-radius:var(--r); padding:24px; }
.gformula { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--navy); color:#fff; border-radius:14px; padding:14px 20px; font-family:var(--kr); font-weight:700; font-size:22px; margin-bottom:16px; }
.gformula .slot { background:rgba(255,255,255,.16); border:1.5px dashed rgba(255,255,255,.5); border-radius:9px; padding:2px 12px; }
.gformula .op { color:var(--coral-2); } .gformula .gloss { font-family:var(--en); font-weight:500; font-size:15px; color:rgba(255,255,255,.72); }
.gcard h3 { font-family:var(--kr); font-weight:700; font-size:20px; color:var(--navy); margin:0 0 10px; }
.gex { display:flex; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.gex:last-child { border-bottom:none; }
.gex .ko { font-family:var(--kr); font-weight:600; font-size:17px; color:var(--ink); flex:1; }
.gex .ko em { font-style:normal; color:var(--coral); font-weight:700; }
.gex .en { color:var(--slate); font-size:14.5px; text-align:right; max-width:44%; }

/* quiz */
.quiz { display:flex; flex-direction:column; gap:26px; }
.qblock .qs { font-family:var(--kr); font-weight:700; font-size:21px; color:var(--navy); margin-bottom:4px; }
.qblock .qs-en { color:var(--slate); font-size:15px; margin-bottom:16px; }
.qopts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .qopts { grid-template-columns:1fr; } }
.qopt { display:flex; align-items:center; gap:14px; background:var(--bg); border:1.5px solid var(--line); border-radius:14px; padding:14px 18px; transition:all .14s; cursor:pointer; }
.qopt:hover { border-color:var(--slate-2); }
.qopt .k { width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:17px; background:#fff; border:1.5px solid var(--line-strong); color:var(--navy); }
.qopt .ko { font-family:var(--kr); font-weight:600; font-size:18px; color:var(--ink); }
.qopt.correct { background:var(--beg-soft); border-color:var(--beg-border); }
.qopt.correct .k { background:var(--beg); color:#fff; border-color:var(--beg); }
.qopt.correct .ko { color:var(--beg); }
.qopt .tick { margin-left:auto; color:var(--beg); display:none; } .qopt.correct .tick { display:block; }
.qopt .tick svg { width:22px; height:22px; }
.qopt.wrong { background:var(--coral-soft); border-color:var(--coral-border); }
.qopt.wrong .k { background:var(--coral); border-color:var(--coral); color:#fff; }
.qopt.dimmed { opacity:.5; }
.qopt:disabled { cursor:default; }
.qreveal { margin-top:14px; background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:12px; padding:16px 20px; font-size:15.5px; color:var(--ink); display:none; }
.qreveal.show { display:block; } .qreveal b { color:var(--navy); }
.quiz-actions { display:flex; gap:12px; }

/* takeaways */
.takeaways { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.tk { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:22px; }
.tk .n { font-family:var(--display); font-weight:700; font-size:18px; color:var(--blue); }
.tk .ko { font-family:var(--kr); font-weight:700; font-size:20px; color:var(--navy); margin:8px 0 4px; }
.tk .en { color:var(--slate); font-size:14.5px; }

/* pronunciation */
.pron-audio { width:min(100%, 280px); height:40px; accent-color:var(--coral); }
.pron-audio-sm { width:180px; height:34px; }
.audio-missing { display:inline-flex; align-items:center; justify-content:center; min-width:140px; padding:8px 12px; border-radius:999px; background:var(--bg); color:var(--slate); font-size:13px; font-weight:700; border:1px solid var(--line); }
.pron { display:flex; flex-direction:column; gap:14px; }
.pron-row { display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:16px 20px; }
.pron-copy { min-width:0; }
.pron-player { display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin-left:auto; }
.pron-voices { font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-2); }
.pron-row .w { font-family:var(--kr); font-weight:700; font-size:22px; color:var(--navy); }
.pron-row .rom { font-style:italic; color:var(--slate-2); font-size:15px; }

/* =====================================================================
   SIDEBAR (lesson) + PDF
   ===================================================================== */
.lesson-side { display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(var(--nav-h) + 20px); }
@media (max-width:1040px){ .lesson-side { position:static; } }
.side-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.side-card .hd { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.side-card .hd svg { width:19px; height:19px; color:var(--coral); }
.side-card .hd h3 { font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy); margin:0; }
.side-card .bd { padding:20px; }

/* PDF preview */
.pdf-preview { position:relative; cursor:pointer; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
.pdf-preview .page { aspect-ratio:1/1.294; background:#fff; }
.pdf-preview .overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,19,48,.55),rgba(12,19,48,0) 50%); display:flex; align-items:flex-end; justify-content:center; padding:18px; opacity:0; transition:opacity .18s; }
.pdf-preview:hover .overlay { opacity:1; }
.pdf-preview .overlay .expand { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.95); color:var(--navy); font-weight:700; font-size:14px; padding:10px 18px; border-radius:var(--pill); box-shadow:var(--sh); }
.pdf-preview .overlay .expand svg { width:17px; height:17px; }
.pdf-badge { position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:6px; background:var(--coral); color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.04em; padding:5px 11px; border-radius:var(--pill); }
.pdf-meta { display:flex; align-items:center; justify-content:space-between; margin:16px 0 14px; font-size:13.5px; color:var(--slate); }
.pdf-meta .pages { font-family:var(--mono); font-weight:600; }
.pdf-actions { display:flex; flex-direction:column; gap:10px; }
.sheet-note { color:var(--slate); font-size:13.5px; margin:12px 0 0; line-height:1.5; }

/* mini lesson page (used in preview + viewer) */
.sheet { background:#fff; color:var(--ink); position:relative; container-type:inline-size; }
.sheet .topbar { height:1.1%; min-height:5px; background:linear-gradient(90deg,var(--navy),var(--blue) 55%,var(--coral)); }
.sheet-in { padding:7%; }
.sheet .sh-eyebrow { font-family:var(--display); font-weight:700; font-size:3.4cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.sheet h4 { font-family:var(--kr); font-weight:900; font-size:7.6cqw; color:var(--navy); margin:2% 0 4%; line-height:1.15; }
.sheet .sh-q { font-family:var(--kr); font-weight:700; font-size:5cqw; color:var(--ink); margin-bottom:4%; line-height:1.3; }
.sheet .sh-opt { display:flex; align-items:center; gap:3.6%; border:1px solid var(--line); border-radius:3cqw; padding:3.4% 4%; margin-bottom:2.6%; }
.sheet .sh-opt .k { width:9cqw; height:9cqw; border-radius:2.4cqw; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:4.6cqw; background:#fff; border:1px solid var(--line-strong); color:var(--navy); }
.sheet .sh-opt.ok { background:var(--beg-soft); border-color:var(--beg-border); }
.sheet .sh-opt.ok .k { background:var(--beg); color:#fff; border-color:var(--beg); }
.sheet .sh-opt .ko { font-family:var(--kr); font-weight:600; font-size:4.6cqw; color:var(--ink); }
.sheet .sh-foot { position:absolute; left:7%; right:7%; bottom:5%; display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:2.8cqw; color:var(--slate-2); border-top:1px solid var(--line-soft); padding-top:3%; }

/* =====================================================================
   PDF MODAL VIEWER
   ===================================================================== */
.modal { position:fixed; inset:0; z-index:90; background:rgba(10,16,40,.62); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:clamp(12px,3vw,40px); }
.modal.open { display:flex; animation:fade .2s ease; }
.viewer { background:var(--bg-2); border-radius:var(--r-lg); width:min(1080px,100%); height:min(92vh,1000px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sh-raised); }
.viewer-bar { display:flex; align-items:center; gap:16px; padding:14px 18px; background:#fff; border-bottom:1px solid var(--line); }
.viewer-bar .ti { font-family:var(--display); font-weight:700; font-size:16px; color:var(--navy); }
.viewer-bar .ti .ko { font-family:var(--kr); }
.viewer-bar .pg { font-family:var(--mono); font-size:13.5px; color:var(--slate); display:flex; align-items:center; gap:10px; }
.viewer-bar .pg button { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--navy); transition:background .14s; }
.viewer-bar .pg button:hover { background:var(--bg-2); }
.viewer-bar .sp { margin-left:auto; display:flex; gap:10px; }
.viewer-stage { flex:1; overflow:auto; padding:clamp(16px,3vw,40px); display:flex; flex-direction:column; align-items:center; gap:24px; }
.viewer-stage .sheet { width:min(620px,100%); border-radius:8px; box-shadow:var(--sh-lg); scroll-margin-top:20px; }
.viewer-close { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--navy); transition:background .14s; }
.viewer-close:hover { background:var(--bg-2); }
.viewer-close svg { width:22px; height:22px; }

.fact-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.fact-row:last-child { border-bottom:none; }
.fact-key { color:var(--slate); font-size:14px; }
.fact-value { color:var(--ink); font-size:14.5px; font-weight:600; text-align:right; }

.upnext-link { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.upnext-link:last-child { border-bottom:none; padding-bottom:0; }
.upnext-thumb { width:60px; height:44px; border-radius:10px; flex:none; display:grid; place-items:center; font-family:var(--kr); font-weight:900; color:#fff; font-size:22px; box-shadow:var(--sh-sm); }
.upnext-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.upnext-ko { font-family:var(--kr); font-weight:700; font-size:15px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upnext-en { font-size:12.8px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upnext-meta { font-size:12px; color:var(--slate-2); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background:var(--navy); color:rgba(255,255,255,.78); padding-block:54px 40px; margin-top:40px; }
.footer-top { display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand-text .ko { color:#fff; } .footer .brand-text .en { color:rgba(255,255,255,.6); }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h4 { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 14px; }
.footer-col a { display:block; color:rgba(255,255,255,.82); font-size:15px; padding:5px 0; transition:color .14s; }
.footer-col a:hover { color:#fff; }
.footer-bot { padding-top:24px; font-size:13.5px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:920px){
  .hero-inner { grid-template-columns:1fr; }
  .ladder { max-width:520px; }
  .rung.l1,.rung.l2,.rung.l3 { margin-right:0; }
}
@media (max-width:680px){
  body { font-size:16px; }
  .filterbar .filter-group.scroll { display:none; }
  .m-filter-toggle { display:inline-flex; align-items:center; gap:8px; }
  .filter-count { margin-left:0; }
  .grid { grid-template-columns:1fr; }
  .hero-stats { gap:20px; flex-wrap:wrap; }
  .lesson-layout { gap:28px; }
  .tline { grid-template-columns:60px 1fr; gap:12px; }
  .vocab .hide-sm { display:none; }
  .qopts { grid-template-columns:1fr; }
}
@media print {
  .nav,.filterbar,.footer,.lesson-side,.doc-tabs,.mnav,.breadcrumb { display:none !important; }
}