/* v2site.css — Haeyo Korean v2 theme layer (2026-10-23, branch v2-apply). Loaded AFTER app.css + okul.css.
   Source of the design: site3/mock/v2/v2.css (palette B · Inter + Noto Sans KR · Gaegu / Nanum Pen).
   Part 1 re-points every old variable (--ok-*, --sky*, --coral*, --honey*, --ink*, --disp, --body …) to v2, so the whole site turns v2 at once.
   Part 2 restyles the old shared classes (.oknav .okmb .okpanel .okbrand .btn-* .okfoot .okfc .fab .tabbar, cards, headings).
   Part 3 = the mock's header / tab bar / CTA bar / WhatsApp / footer rules, copied verbatim (.v2-*).
   Part 4 = the mock's primitives. Names the old site never used are global; names the old site already uses for something else
   (.btn default, .chip .lv .plate .sec .card .grid .stat .rule .hair — e.g. slide .chip/.sec/.rule, the reader's .lv, l2h's table.grid)
   only apply inside a v2 scope: .v2 (generic opt-in wrapper) · .v2home · .v2map · .v2-nav · .v2-sheet · .v2-foot · .v2-bar.
   Phone first: base rules are for 375px; 720px and 1024px add on. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+KR:wght@400;500;700;900&family=Gaegu:wght@700&family=Nanum+Pen+Script&display=swap");

/* ================= 1 · tokens ================= */
:root{
  /* v2 (verbatim from the mock) */
  --ink:#0b0b0c; --ink2:#2e3440; --mute:#6b7280; --mute2:#767d8b; --paper:#fff; --cream:#fbf8f1; --cream2:#f4efe3; --line:#e8e6df; --line2:#d9d6cc;
  --sky:#7cc8ff; --sky-d:#0b6fbd; --sky-l:#eef7ff; --butter:#ffe9a8; --butter-d:#8a6400; --butter-l:#fff8e3; --mint:#d9f2e6; --mint-d:#2f6b4f; --mint-l:#f0f9f4;
  --green:#1f8a4c; --green-l:#e9f5ee; --red:#e05252; --red-l:#fdeeee; --hl:#d2f7b4; --navy:#0f172a; --cat:#f6bb5c;
  --ui:"Inter","Noto Sans KR",system-ui,sans-serif; --kr:"Noto Sans KR","Inter",sans-serif; --hand:"Gaegu","Noto Sans KR",sans-serif; --pen:"Nanum Pen Script","Noto Sans KR",cursive;
  --ac:var(--sky); --ac-d:var(--sky-d); --ac-l:var(--sky-l);
  --wrap:1200px; --gut:16px; --r:18px; --sh:0 10px 30px -18px rgba(11,11,12,.25);

  /* okul.css tokens → v2. Saturated colour stays on small things; the soft/bg tokens (big fills) are the -l tints. */
  --ok-sky:var(--sky); --ok-sky-hover:#63bdfb; --ok-sky-deep:var(--sky-d); --ok-sky-ink:#075288; --ok-sky-soft:var(--sky-l); --ok-sky-line:#d6ebfb;
  --ok-yellow:var(--butter); --ok-yellow-soft:var(--butter-l); --ok-green:var(--hl); --ok-green-soft:var(--green-l); --ok-cream:var(--cream);
  --ok-navy:var(--ink); --ok-text:var(--ink2); --ok-muted:var(--mute); --ok-line:var(--line); --ok-bg:var(--cream);
  --ok-sh:var(--sh); --ok-sh-lg:0 30px 50px -36px rgba(11,11,12,.4); --ok-ui:var(--ui);

  /* app.css tokens → v2 */
  --coral:var(--sky); --coral-deep:var(--sky-d); --coral-soft:var(--sky-l);
  --honey:var(--butter); --honey-deep:var(--butter-d); --honey-soft:var(--butter-l);
  --leaf:var(--green); --leaf-deep:#17693a; --leaf-soft:var(--green-l);
  --sky-deep:var(--sky-d); --sky-soft:var(--sky-l);
  --butter-soft:var(--butter-l); --mint-soft:var(--mint-l);
  --navy-2:#1e293b;
  --ink-2:var(--ink2); --muted:var(--mute); --faint:var(--mute2);
  --card:#fff; --alt:var(--cream); --alt2:var(--cream2); --line-2:var(--line2);
  --r-lg:20px; --r-xl:24px; --r-pill:9999px;
  --sh-lift:0 2px 6px rgba(11,11,12,.05),0 20px 40px -22px rgba(11,11,12,.3);
  --h-btn:48px; --h-btn-sm:40px; --h-input:48px;
  --disp:var(--ui); --body:var(--ui); --kr-disp:var(--kr);
}
[data-menu="learn"]{--ac:var(--sky);--ac-d:var(--sky-d);--ac-l:var(--sky-l)}
[data-menu="read"]{--ac:var(--butter);--ac-d:var(--butter-d);--ac-l:var(--butter-l)}
[data-menu="culture"]{--ac:var(--mint);--ac-d:var(--mint-d);--ac-l:var(--mint-l)}
[data-menu="live"]{--ac:#cdeedd;--ac-d:var(--green);--ac-l:var(--green-l)}

/* ================= 2 · base + old shared classes ================= */
body{background:var(--paper);color:var(--ink2);font-family:var(--ui);font-weight:400;line-height:1.6;overflow-wrap:break-word;overflow-x:hidden}
html:not([lang^="zh"]):not([lang^="ja"]) body{word-break:keep-all}   /* v213: zh/ja have no word spaces, keep-all made them one unbreakable line (course page overflowed at 375) */
h1,h2,h3,h4{font-family:var(--ui);color:var(--ink);letter-spacing:-.03em;line-height:1.12}
h1{font-size:clamp(30px,7.4vw,56px);font-weight:900}
h2{font-size:clamp(26px,5.6vw,44px);font-weight:800}
h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
h1 .kr,h2 .kr,h3 .kr,[lang=ko],.ko{font-family:var(--kr)}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--wrap);padding-inline:var(--gut)}
@media (min-width:720px){:root{--gut:24px}}
@media (min-width:1024px){:root{--gut:32px}}
section.alt{background:var(--cream)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type primitives the old site already had — v2 look everywhere */
.eyebrow{margin:0 0 10px;font:700 12px/1.2 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ac-d)}
.lead{font-size:17px;line-height:1.55;color:var(--ink2)}
.hand{font-family:var(--hand);font-weight:700;letter-spacing:0;color:var(--ink)}
.hl{background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 92%,transparent 92%);padding:0 .08em;border-radius:2px}
.hl.y,.hl.c{background:linear-gradient(transparent 55%,var(--butter) 55%,var(--butter) 92%,transparent 92%)}
.hl.b{background:linear-gradient(transparent 55%,var(--sky-l) 55%,var(--sky-l) 92%,transparent 92%)}
.tag{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--ac-l);color:var(--ac-d);font:700 12px/1.3 var(--ui);letter-spacing:.04em}
.tag.free,.tag.ok{background:var(--green-l);color:var(--green)}
.tag.soon{background:var(--cream2);color:var(--mute)}
.tag.wait{background:var(--butter-l);color:var(--butter-d)}
.tag.no{background:var(--red-l);color:#b33a3a}

/* buttons: black pill primary · white outlined secondary */
.btn{border-radius:9999px;border-width:1.5px;font:700 15px/1 var(--ui);letter-spacing:0;box-shadow:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:none}
.btn-c,.btn-k{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.btn-c:hover,.btn-k:hover{background:var(--ink2);border-color:var(--ink2);color:#fff}
.quiz .btn-c,.quiz .btn-k{color:#fff}
.btn-o{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-o:hover{background:var(--cream);border-color:var(--ink);color:var(--ink)}
.btn-h{background:var(--butter);border-color:var(--butter);color:var(--ink)}
.btn-sm{font-size:14px;padding:0 16px}
.nbeta{background:var(--sky-l);color:var(--sky-d)}
.okcta{height:44px;padding:0 20px;font-size:14px}

/* header (old markup) */
.oknav{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.oknav .wrap{min-height:68px}
.okmb{border-radius:9999px;font:700 14px/1 var(--ui);color:var(--ink);gap:8px;padding:0 14px 0 8px}
.okmb:hover,.okmega.open .okmb{background:var(--cream)}
.okmega:first-child .okmb{background:transparent}
.okmega.open .okmb,.okmb[aria-expanded=true]{background:var(--ink);color:#fff}
.okmega.open .okmb .okdot svg{stroke:var(--ink)}
.okdot{width:28px;height:28px;border-radius:50%;background:var(--sky-l)}
.okdot.y{background:var(--butter-l)}.okdot.g{background:var(--green-l)}
.okdot svg{width:16px;height:16px;stroke:var(--ink)}
.okpanel{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--ok-sh-lg)}
.okmg>small{font:700 12px/1.2 var(--ui);letter-spacing:.14em;color:var(--ac-d)}
.okmrow a{color:var(--ink)}.okmrow a:hover{color:var(--ink);text-decoration:underline}
.oklv{background:#fff;border:1px solid var(--line2);color:var(--ink)!important;font:800 13px/1 var(--ui)}
.okmfoot{border-top-color:var(--line2)}.okmfoot a{color:var(--ink);font-weight:700}
.okmi{border-radius:12px;color:var(--ink)}
.okmi:hover{background:#fff}
.okmi b{font:700 15px/1.3 var(--ui);color:var(--ink)}
.okmi span{font:400 12.5px/1.4 var(--ui);color:var(--mute)}
.okbdg{background:var(--butter);color:var(--ink)}
.okbrand{color:var(--ink);gap:8px}
.okbrand svg{width:36px;height:36px}
.okbrand b{font:800 22px/1 var(--ui);letter-spacing:-.04em;color:var(--ink)}
.okbrand small{font:600 12px/1.3 var(--kr);color:var(--mute);letter-spacing:0}
.oklink{font:600 14.5px/1 var(--ui);color:var(--ink);text-decoration:none}
.oknav .langbtn{border:0;border-radius:12px;background:transparent;color:var(--ink);font:600 14px/1 var(--ui)}
.oknav .langbtn:hover{background:var(--cream);border-color:transparent}
@media (min-width:1024px){.oknav .wrap{min-height:72px}.okbrand svg{width:42px;height:42px}.okbrand b{font-size:25px}}
@media (max-width:900px){
  .okmegas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .okmegas::-webkit-scrollbar{display:none}
  .okmb{width:auto;height:40px;background:#fff;border:1px solid var(--line2);padding:0 12px 0 6px;font-size:13.5px}
  .okmb .okchev{margin-left:0}
  .okmega.open .okmb{border-color:var(--ink)}
  .okpanel{border-radius:var(--r)}
}
@media (max-width:640px){.okdot{width:26px;height:26px;border-radius:50%}.okbrand b{font-size:22px}}

/* cards — hairline, no heavy shadow; info cards cream */
.tcard,.pcard,.lcard,.ppnote,.pillar,.ccard,.course,.card,.deckwrap,.termcard,.flow5 div,.pillars > div,.online > div,.how > div{border-color:var(--line);border-radius:var(--r)}
.pillar,.pillars > div,.how > div,.online > div,.ppnote{background:var(--cream)}
.tcard .pf{background:var(--sky-l);color:var(--ink)}

/* old footer */
.okfoot{background:#fff;border-top:1px solid var(--ink);padding:40px 0 48px}
.okfcols{gap:22px}
.okfc b{font:700 12px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-d);margin-bottom:8px}
.okfc a{font:500 14.5px/1.3 var(--ui);color:var(--ink);text-decoration:none;padding:5px 0}
.okfc a:hover{color:var(--ink);text-decoration:underline}
.okfbase{border-top:1px solid var(--line);font:500 13px/1.5 var(--ui);color:var(--mute);margin-top:28px;padding-top:18px}
.okfbase .okbrand b{font-size:20px}

/* WhatsApp FAB = .v2-wa */
.fab{height:44px;padding:0 14px;gap:8px;border-radius:9999px;background:#25d366;color:#083b1f;font:700 14px/1 var(--ui);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.fab:hover{color:#083b1f}
.fab svg{width:20px;height:20px}
@media (max-width:620px){.fab{width:48px;height:48px;padding:0;justify-content:center;right:16px;bottom:16px}}

/* member tab bar = .v2-tab (same breakpoint as before: app.css shows it ≤640px and pads the body for it) */
@media (max-width:640px){
  .tabbar{z-index:60;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{place-items:center;gap:3px;min-height:52px;padding:0;font:600 12px/1 var(--ui);color:var(--mute);border-radius:12px}
  .tabbar a svg{width:24px;height:24px;stroke-width:1.9}
  .tabbar a.on{color:var(--ink)}
  .tabbar a.on svg{stroke:currentColor;stroke-width:2.4}
  body{padding-bottom:72px}
  .fab{bottom:88px}
}

body.app{padding-bottom:72px} /* from the mock base: room for .v2-tab (members) */

/* ================= 3 · v2 chrome (verbatim from mock v2.css) ================= */
/* ---------- header (web) ---------- */
.v2-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.v2-navin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;min-height:56px}
.v2-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none}
.v2-brand svg{width:36px;height:36px;display:block}
.v2-brand b{font:800 22px/1 var(--ui);letter-spacing:-.04em}.v2-brand small{display:none;font:600 12px/1 var(--kr);color:var(--mute);margin-top:3px}
.v2-right{display:flex;align-items:center;gap:6px}
.v2-lang{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--ink);text-decoration:none}
.v2-lang svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v2-lang b{display:none}
.v2-login{display:none}
.v2-menus{order:3;flex-basis:100%;display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v2-menus::-webkit-scrollbar{display:none}
.v2-mb{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 11px 0 9px;border-radius:9999px;border:1px solid var(--line2);background:#fff;font:700 13.5px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer}
.v2-mb .dot{width:10px;height:10px;border-radius:50%;background:var(--ac)}
.v2-mb[aria-expanded=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.v2-mb[aria-current=page]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.v2-mb .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:none}
.v2-sheet{display:none;border-top:1px solid var(--line);background:var(--cream)}
.v2-sheet.on{display:block}
.v2-sheet .in{padding:14px var(--gut) 18px;display:grid;gap:4px}
.v2-sheet .hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.v2-sheet .hd b{font:900 22px/1 var(--kr);letter-spacing:-.03em}.v2-sheet .hd a{display:inline-flex;align-items:center;min-height:44px;font:700 14px/1 var(--ui);color:var(--ac-d);text-decoration:none}
.v2-mi{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.v2-mi b{display:block;font:700 15px/1.25 var(--ui)}.v2-mi span{display:block;font:400 12.5px/1.35 var(--ui);color:var(--mute);margin-top:2px}
@media (min-width:1024px){
  .v2-navin{min-height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .v2-brand{justify-self:center;grid-column:2}.v2-brand svg{width:42px;height:42px}.v2-brand b{font-size:25px}.v2-brand small{display:block}
  .v2-menus{order:0;flex-basis:auto;grid-column:1;grid-row:1;padding:0;overflow:visible}
  .v2-right{grid-column:3;justify-self:end}
  .v2-mb{border-color:transparent;min-height:48px;padding:0 14px 0 10px;font-size:14px;gap:8px}.v2-mb:hover{background:var(--cream)}.v2-mb .chev{display:block}
  .v2-login{display:inline-flex;min-height:44px;align-items:center;padding:0 12px;font:600 14.5px/1 var(--ui);color:var(--ink);text-decoration:none}
  .v2-lang b{display:block;font:600 14px/1 var(--ui)}.v2-lang{width:auto;padding:0 10px;gap:6px;display:inline-flex}
  .v2-sheet{position:absolute;left:0;right:0;top:100%;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -40px rgba(0,0,0,.4)}
  .v2-sheet .in{max-width:var(--wrap);margin:0 auto;grid-template-columns:220px 1fr;gap:20px;padding:24px var(--gut) 28px}
  .v2-sheet .hd{flex-direction:column;align-items:flex-start;gap:10px}.v2-sheet .hd b{font-size:40px}
  .v2-sheet .list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}

/* ---------- bottom tab bar (app · members) ---------- */
.v2-tab{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.v2-tab a{display:grid;place-items:center;gap:3px;min-height:52px;font:600 12px/1 var(--ui);color:var(--mute);text-decoration:none;border-radius:12px}
.v2-tab a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.v2-tab a.on{color:var(--ink)}
.v2-tab a.on svg{stroke-width:2.4}
@media (min-width:1024px){.v2-tab{display:none}body.app{padding-bottom:0}}
/* guest CTA bar — shows when the hero buttons scroll away (phones) */
.v2-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;gap:8px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
body.bar-on .v2-bar{display:grid}
@media (min-width:1024px){body.bar-on .v2-bar{display:none}}
.v2-wa{position:fixed;right:16px;bottom:16px;z-index:55;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:9999px;background:#25d366;color:#083b1f;font:700 14px/1 var(--ui);text-decoration:none;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.v2-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
body.bar-on .v2-wa,body.app .v2-wa{bottom:88px}
@media (min-width:1024px){.v2-wa,body.bar-on .v2-wa,body.app .v2-wa{bottom:24px}}

/* ---------- footer ---------- */
.v2-foot{border-top:1px solid var(--ink);padding:40px 0 48px;background:#fff}
.v2-fgrid{display:grid;gap:22px}
.v2-fcol>small{display:block;font:700 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ac-d);margin-bottom:10px}
.v2-fcol>a:not(.v2-brand){display:block;padding:5px 0;font:500 14.5px/1.3 var(--ui);color:var(--ink);text-decoration:none}
.v2-fbot{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font:500 13px/1.5 var(--ui);color:var(--mute)}
.v2-fbot .hand{font-size:20px;color:var(--ink)}
@media (min-width:720px){.v2-fgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.v2-fgrid{grid-template-columns:1.2fr repeat(4,1fr)}}
/* app.css styles every `footer .wrap` as a 2-column grid; the v2 footer lays itself out with .v2-fgrid */
.v2-foot .wrap{display:block}
/* integrated footer extras (app.js footerHtml: brand column) */
.v2-fabout{margin:12px 0 0;max-width:30em;font:400 14px/1.55 var(--ui);color:var(--mute)}
.v2-fhelp{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:10px}
.v2-fhelp a{display:inline-flex;align-items:center;min-height:36px;font:600 13.5px/1.3 var(--ui);color:var(--ink);text-decoration:none}
.v2-fhelp a:hover{text-decoration:underline}

/* the integrated .v2-nav reuses the old language button, log-in link and sign-up button inside .v2-right */
.v2-nav .langbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);font:600 14px/1 var(--ui)}
.v2-nav .langbtn:hover{background:var(--cream)}
.v2-nav .langbtn svg{width:20px;height:20px;color:var(--ink)}
.v2-nav .langbtn b,.v2-nav .langbtn .cv{display:none}
.v2-nav .langbox{right:0;left:auto}
.v2-nav .oklink{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;font:600 13.5px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap}
.v2-nav .okcta{height:40px;min-height:40px;padding:0 14px;font-size:13.5px}
.v2-nav .bagbtn{color:var(--ink)}
@media (max-width:359px){.v2-nav .oklink{display:none}}
.okcta .cta-s{display:none}
/* 2026-10-30 mobile audit: the phone header is two rows (brand + log in / sign up, then the menu chips), about 100px instead of 145px */
@media (max-width:640px){
  .v2-navin{min-height:52px;gap:0 6px;flex-wrap:wrap}
  .v2-brand{gap:6px;min-width:0}.v2-brand svg{width:30px;height:30px;flex:none}
  .v2-nav .v2-brand{flex:1 1 0}.v2-nav .v2-brand b{display:block;white-space:normal}   /* the brand takes the room that is left and folds onto two lines, so the buttons never drop to a third row */
  .v2-right{flex:none}
  .v2-right{gap:2px;margin-left:auto}
  .v2-nav .oklink{padding:0 8px;font-size:13px;font-weight:600;color:var(--mute)}
  .okcta .cta-l{display:none}.okcta .cta-s{display:inline}
  .v2-menus{padding:0 0 8px}
}
/* below 375px the name sits on two lines (Haeyo / Korean) so log in and sign up still fit beside it */
@media (max-width:374px){.v2-nav .v2-brand b{display:block;font-size:16px;line-height:1.02;max-width:4.6em;white-space:normal}}
/* 1024–1199px: the menus and the buttons leave the brand about 170px — "Haeyo Korean" folds onto two lines, so the Korean name under it is left out to keep the bar 68px */
@media (min-width:1024px) and (max-width:1199px){.v2-nav .v2-brand small{display:none}.v2-nav .v2-brand b{font-size:22px}}
@media (min-width:1024px){
  .v2-nav .langbtn{width:auto;padding:0 10px}.v2-nav .langbtn b{display:block;color:var(--ink);font-weight:600}
  .v2-nav .oklink{padding:0 12px;font-size:14.5px}.v2-nav .okcta{height:44px;padding:0 20px;font-size:14px}
}

/* ================= 4 · primitives (from the mock) ================= */
/* 4a · names the old site never used — global, verbatim */
.poster{font:900 clamp(34px,9vw,92px)/1.02 var(--kr);letter-spacing:-.04em;color:var(--ink)}
.poster .en{font-family:var(--ui);font-weight:800;letter-spacing:-.035em}
.glyph{font:900 clamp(96px,32vw,240px)/.9 var(--kr);letter-spacing:-.06em;color:var(--ink);line-height:.9}
.glyph.ac{color:var(--ac-d)}
.cap{font:600 12px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pen{font-family:var(--pen);font-weight:400;letter-spacing:0;color:var(--red);line-height:1.1}
.circ{position:relative;display:inline-block;padding:0 .12em}
.circ:after{content:"";position:absolute;inset:-.1em -.2em -.08em -.22em;border:2.5px solid var(--red);border-radius:48% 52% 50% 50%/55% 45% 55% 45%;transform:rotate(-2deg);pointer-events:none}
.ul-hand{position:relative;display:inline-block}
.ul-hand svg{position:absolute;left:-2%;right:-2%;bottom:-.12em;width:104%;height:.3em;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.serial{font:500 13px/1 var(--ui);letter-spacing:.06em;color:var(--mute2);font-variant-numeric:tabular-nums}
.sec-h{margin-bottom:24px}
.sec-h h2{font-size:clamp(26px,5.6vw,44px)}
.sec-h p{margin-top:10px;color:var(--ink2);max-width:40em}
.sticky-note{background:var(--butter-l);border:1px solid #f1dc9a;border-radius:4px 4px 14px 4px;padding:12px 14px;font-family:var(--hand);font-size:17px;line-height:1.3;color:var(--ink);box-shadow:0 8px 18px -12px rgba(0,0,0,.3);transform:rotate(-1deg)}
details.faq{border-bottom:1px solid var(--line2)}
details.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:56px;font:700 16.5px/1.35 var(--ui);color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";margin-left:auto;padding-left:12px;font:400 24px/1 var(--ui);color:var(--mute)}
details.faq[open] summary:after{content:"–"}
details.faq p{padding:0 0 18px;font-size:15.5px}

/* 4b · names the old site uses elsewhere — same rules, only inside a v2 scope (:where() adds no specificity) */
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) p{margin:0}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) img{max-width:100%;display:block}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .lead{max-width:36em}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .hand{font-size:inherit;line-height:inherit}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .tag{text-transform:none}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;min-height:48px;padding:0 22px;border-radius:9999px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:700 15px/1 var(--ui);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn:hover{transform:translateY(-1px)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn.o{background:#fff;color:var(--ink)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn.ac{background:var(--ac);border-color:var(--ac);color:var(--ink)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn.sm{min-height:40px;padding:0 16px;font-size:14px}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn.wide{width:100%}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .btn small{font-weight:500;opacity:.75;margin-left:4px}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:9999px;border:1px solid var(--line2);background:#fff;font:600 13.5px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ac)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv,.nv .lv{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sky-d);color:#fff;font:800 13px/1 var(--ui);flex:none;padding:0;letter-spacing:0;text-transform:none}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv[data-g="2"],.nv .lv[data-g="2"]{background:var(--mint-d)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv[data-g="3"],.nv .lv[data-g="3"]{background:var(--butter-d)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv[data-g="4"],.nv .lv[data-g="4"]{background:#b4476a}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv[data-g="5"],.nv .lv[data-g="5"]{background:#5b4a9e}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .lv[data-g="6"],.nv .lv[data-g="6"]{background:#b35b1e}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .plate{display:inline-flex;max-width:100%;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 8px;border:2px solid var(--ink);border-radius:9999px;background:#fff}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .plate b{font:800 17px/1 var(--ui);color:var(--ink)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar,.v2lh) .plate small{font:600 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .sec{padding:56px 0}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .sec.cream{background:var(--cream)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .sec.ac{background:var(--ac-l);display:block;position:static;color:inherit}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .card.cream{background:var(--cream)}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .card.flat{box-shadow:none}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .card h3{font-size:19px}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .grid{display:grid;gap:14px}
@media (min-width:720px){
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .sec{padding:80px 0}
}
@media (min-width:1024px){
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
  :where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .sec{padding:96px 0}
}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .stat{display:grid;gap:2px;text-align:left;justify-items:start}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .stat b{font:800 clamp(34px,9vw,60px)/1 var(--ui);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .stat span{font:600 12px/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);max-width:none}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .rule{height:1px;background:var(--line);border:0;margin:0}
:where(.v2,.v2home,.v2map,.v2-nav,.v2-sheet,.v2-foot,.v2-bar) .hair{border-top:1px solid var(--ink)}

/* typographic novel cover — verbatim; usable anywhere (its .lv is covered above) */
.nv{container-type:inline-size;position:relative;display:flex;flex-direction:column;aspect-ratio:5/7;padding:12% 9% 9% 17%;border-radius:3px 9px 9px 3px;background:var(--t,var(--sky-l));border:1px solid rgba(11,11,12,.12);box-shadow:0 12px 18px -12px rgba(11,11,12,.5);overflow:hidden;color:var(--ink);text-decoration:none}
.nv:before{content:"";position:absolute;left:8%;top:0;bottom:0;width:1.5px;background:rgba(11,11,12,.32)}
.nv:after{content:"";position:absolute;left:0;top:0;bottom:0;width:8%;background:rgba(11,11,12,.06)}
.nv[data-g="1"]{--t:var(--sky-l)}.nv[data-g="2"]{--t:var(--mint)}.nv[data-g="3"]{--t:var(--butter)}
.nv .k{font:900 19cqw/1.12 var(--kr);letter-spacing:-.05em;word-break:keep-all;overflow-wrap:anywhere}
.nv .e{margin-top:auto;padding-right:30cqw;font:600 8.6cqw/1.25 var(--ui);color:var(--ink2)}
.nv .lv{position:absolute;right:9cqw;bottom:9cqw;width:24cqw;height:24cqw;font-size:11cqw}

/* v210: long languages (fr, es, ru) — on narrow phones hide the Log in link (the sign-up page links to it) and tighten the button so the brand row stays one row */
@media (max-width:480px){.v2-right .oklink,.v2-right .v2-login{display:none}.v2-right .btn{padding:0 12px;font-size:13px;white-space:nowrap}.v2-navin{flex-wrap:wrap}.v2-brand b{font-size:20px}
  .v2-right{min-width:0;flex-shrink:1;gap:2px}.v2-right .btn{flex-shrink:1;min-width:0}.v2-right .langbtn,.v2-right .bagbtn{flex-shrink:0}
  html:is([lang=ru],[lang=fr],[lang=es],[lang=vi]) .v2-right .btn{padding:0 10px;font-size:12px}}