/* ============ 청크 영어사고 혁명 — Design System ============ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Batang:wght@400;700&display=swap');

:root{
  --font:'Pretendard',-apple-system,'Segoe UI',sans-serif;
  --bg:#0b0e1a; --bg2:#121730; --card:#1a2040; --card2:#222a52;
  --tx:#eef1ff; --tx2:#9aa3c7; --line:rgba(255,255,255,.08);
  --acc:#6c8cff; --acc2:#a06bff; --gold:#ffd166; --ok:#3ddc97; --no:#ff6b8b;
  /* ── [2026-08-19 3차] 텍스트 전용 파생색 ───────────────────────────────────
     --acc/--ok/--no 원색은 "배경·테두리·그래디언트"용이다. 밝은 테마(유치원/초등)에서
     이 원색을 글자색으로 쓰면 명암비가 2.0~3.5:1 로 WCAG AA(4.5:1) 미달이 된다.
     → 글자로 쓸 때는 반드시 아래 *-tx 토큰을 쓴다. 테마마다 값이 따로 정의돼 있고
       전부 해당 테마의 bg/bg2/card/card2 네 표면 모두에서 4.5:1 이상을 보장한다. */
  --acc-tx:#8aa4ff; --ok-tx:#3ddc97; --no-tx:#ff6b8b; --gold-tx:#ffd166;
  --grad:linear-gradient(128deg,#6c8cff 6%,#a06bff 56%,#ff6bd5 108%);
  --grad2:linear-gradient(205deg,#a06bff 0%,#6c8cff 58%,#ffd166 122%);
  /* ── 글자를 얹는 "솔리드 채움" 전용 그래디언트 + 그 위의 잉크색 ──────────────
     장식용 --grad 는 화사함이 생명이라 그대로 두고(막대·프로그레스·텍스트클리핑),
     흰 글자가 올라가는 버튼/뱃지/탭에는 --grad-btn + --grad-ink 조합만 쓴다.
     금색 계열(고등·일반)과 주황 계열(유치원)은 흰 글자로는 절대 4.5:1 이 안 나오므로
     밝기를 유지한 채 잉크를 짙은 색으로 뒤집었다. */
  --grad-btn:linear-gradient(128deg,#4258d6 6%,#7038d6 56%,#bd3596 108%);
  --grad-ink:#fff;
  /* ── [2026-08-19 4차] 글자 자체를 그라데이션으로 "채우는" 전용 토큰 ──────────────
     background-clip:text 로 채운 글자는 그 그라데이션의 모든 색이 곧 글자색이다.
     장식용 --grad/--grad2 를 그대로 채우면 밝은 테마에서 1.59~2.29:1 까지 떨어진다
     (유치원 #ffb703 on #fff = 1.75:1). → 수치·제목 채움에는 --grad-num 만 쓴다.
     각 테마의 카드/카드2/추천요금제카드/시네마라인 네 표면 전부에서 4.5:1 이상을
     그라데이션 전 구간(101점 샘플링) 기준으로 검증했다. 측정치는
     _docs/명암비_잔여수정_2026-08-19.md 참조. */
  --grad-num:linear-gradient(205deg,#af82ff 0%,#7593ff 58%,#ffd166 122%);
  /* ── [2026-08-19 4차] 드래그 선택(::selection) ────────────────────────────────
     기존 background:var(--acc);color:#fff 은 일반/고등/유치원에서 2.02~2.31:1 로
     선택된 글자가 사실상 안 읽혔다. 어두운 테마는 "밝은 칩 + 어두운 잉크",
     밝은 테마는 "어두운 칩 + 흰 잉크"로 뒤집어 글자 4.5:1 이상, 칩 자체도
     bg/bg2/card/card2 전 표면에서 3:1(UI 컴포넌트 기준) 이상을 확보했다. */
  --sel-bg:#8aa4ff; --sel-ink:#0b0e1a;
  --r:18px;
  --fs:1;

  /* ── [2026-08-18 프리미엄 2차] 8pt 스페이싱 스케일 ────────────────────────
     카드 padding · 섹션 margin · 그리드 gap 을 이 하나의 눈금으로만 찍는다.
     숫자 = 4px 단위 스텝(예: --sp-6 = 6×4 = 24px). 새 규칙은 반드시 여기서 고른다. */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-14:56px; --sp-16:64px; --sp-20:80px; --sp-22:88px; --sp-24:96px;
  --sp-58:232px;                          /* 시네마 착지영역 오프셋(4의 배수 정렬) */

  /* ── [2026-08-19 3차] 반경(radius) 눈금 — 9·10·11·13·15·18·22px 난립을 5단으로 통일.
     카드 반경은 테마별 --r 이 따로 있으므로 여기서는 "카드 안쪽 요소"만 담당한다. */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:20px; --r-5:24px; --r-pill:999px;

  /* ── 타이포 스케일 (1.25 배수) ──────────────────────────────────────────────
     헤딩/수치 계열은 고정 rem(레이아웃이 깨지지 않도록), 본문 계열은 body 에서
     var(--fs) 를 곱해 레벨 테마의 글자 확대(유치원 1.18배)를 다시 살린다. */
  --fz-display:clamp(2.4rem,6vw,4.6rem); /* 히어로 H1 */
  --fz-hero-ic:4rem;                      /* 레벨 히어로 이모지 64px */
  --fz-h1:clamp(1.9rem,3.4vw,2.4rem);    /* 페이지 제목 */
  --fz-h1s:2rem;                          /* 큰 수치·아이콘 32px */
  --fz-h2:1.75rem;                        /* 섹션 제목 28px */
  --fz-h2s:1.5rem;                        /* 화면 제목 24px */
  --fz-h3:1.3125rem;                      /* 카드 제목 21px */
  --fz-num:2.125rem;                      /* 가격·수치 강조 34px */
  --fz-num-lg:2.5rem;                     /* 프리미엄 가격·큰 이모지 40px */
  --lh-tight:1.12; --lh-snug:1.32; --lh-normal:1.5; --lh-body:1.65; --lh-loose:1.8;
  --ls-tight:-.024em; --ls-h:-.015em; --ls-caps:.12em;

  /* ── 모션: 이징·지속시간을 토큰화(제각각인 transition:.2s 를 한 곡선으로 통일) ── */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.66,0,.34,1);
  --ease-spring:cubic-bezier(.34,1.28,.52,1);
  --ease-drop:cubic-bezier(.3,.8,.4,1.15);
  --dur-1:.14s; --dur-2:.24s; --dur-3:.36s; --dur-4:.56s; --dur-5:.8s;

  /* ── 깊이(elevation) 기준색: 레벨 테마는 이 두 값만 바꾸면 그림자 전체가 따라온다 ── */
  --sh-c:6 8 26; --sh-a:1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--tx);min-height:100vh;font-size:calc(16px * var(--fs));overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
/* 깊이 4단계 — 1:붙어있는 요소 / 2:기본 카드 / 3:떠 있는 패널·강조카드 / 4:모달.
   body 에 선언해야 body[data-theme] 이 바꾼 --sh-c/--sh-a 를 다시 읽는다(:root 에 두면 못 읽음). */
body{
  --sh-1:0 1px 2px rgb(var(--sh-c)/calc(.22*var(--sh-a))),0 2px 6px rgb(var(--sh-c)/calc(.16*var(--sh-a)));
  --sh-2:0 2px 6px rgb(var(--sh-c)/calc(.22*var(--sh-a))),0 10px 28px rgb(var(--sh-c)/calc(.26*var(--sh-a)));
  --sh-3:0 4px 12px rgb(var(--sh-c)/calc(.26*var(--sh-a))),0 20px 48px rgb(var(--sh-c)/calc(.34*var(--sh-a)));
  --sh-4:0 8px 20px rgb(var(--sh-c)/calc(.30*var(--sh-a))),0 34px 76px rgb(var(--sh-c)/calc(.44*var(--sh-a)));
  --sh-hair:inset 0 1px 0 rgba(255,255,255,.055);          /* 상단 1px 하이라이트(유리질감) */
  --sh-glow:0 18px 46px color-mix(in srgb,var(--acc) 26%,transparent);
  --sh:var(--sh-2);
  /* ── [2026-08-19 3차] 본문 계열 타이포는 여기(body)에서 --fs 를 곱한다 ────────────
     2차 라운드의 rem 고정 토큰은 body{font-size:calc(16px*var(--fs))} 를 무시해서
     "유치원은 글자를 1.18배 크게"라는 설계가 무효화돼 있었다(펀치리스트 M-10).
     body 에 선언하면 body[data-theme] 이 바꾼 --fs 를 다시 읽으므로 원래 의도가 살아난다.
     헤딩·수치 토큰은 :root 에 고정으로 남겨둔다(원래도 명시 font-size 라 --fs 를 안 탔고,
     확대하면 좁은 폭에서 제목이 넘칠 위험이 있다). */
  --fz-lead:calc(1.125rem * var(--fs));   /* 리드·CTA 18px */
  --fz-h4:calc(1.0625rem * var(--fs));    /* 소제목 17px */
  --fz-body:calc(1rem * var(--fs));       /* 본문 16px */
  --fz-sm:calc(.875rem * var(--fs));      /* 보조 14px */
  --fz-xs:calc(.75rem * var(--fs));       /* 캡션 12px */
  --fz-2xs:calc(.75rem * var(--fs));      /* 마이크로 라벨 — 12px 아래로는 내리지 않는다(모바일 최소 권장, 펀치리스트 L-12) */
  /* UI 전이 묶음 — 색·그림자·이동만 애니메이트(레이아웃 속성은 제외해 버벅임 방지) */
  --tr-ui:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),
          border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),
          color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);
  --tr-fast:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),
          border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),
          color var(--dur-1) var(--ease-out);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:var(--fz-body)}
::selection{background:var(--sel-bg);color:var(--sel-ink)}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--card2);border-radius:6px}

/* ---------- 레벨 테마 ----------
   [2026-08-19 3차] 각 테마마다 --tx2 / --acc-tx / --ok-tx / --no-tx / --gold-tx 를
   해당 테마의 bg·bg2·card·card2 네 표면 전부에서 WCAG AA(4.5:1) 이상이 되도록 검증해 넣었다.
   측정치는 _docs/디자인_프리미엄고도화_3차_2026-08-19.md 참조. */
body[data-theme="kinder"]{--bg:#fff8ec;--bg2:#fff1d6;--card:#ffffff;--card2:#fff4de;--tx:#4a3320;--line:rgba(160,120,60,.15);
  /* --tx2 는 #a08362(최저 3.18:1, AA 미달) → #7d6343(최저 5.03:1). 같은 웜브라운 계열에서 명도만 낮췄다. */
  --tx2:#7d6343;
  --acc:#ff8c42;--acc2:#ffb703;--gold:#ffb703;--ok:#52b788;--no:#ef6351;
  --acc-tx:#ad4610;--ok-tx:#25714d;--no-tx:#b23524;--gold-tx:#8a6200;
  --grad:linear-gradient(122deg,#ff8c42,#ffb703);--grad2:linear-gradient(206deg,#ffb703,#ff8c42 55%,#ef6351 120%);
  /* 유치원은 "밝은 주황"이 브랜드라 채움색을 어둡게 하지 않고 잉크를 짙은 갈색으로 뒤집었다(최저 5.79:1) */
  --grad-btn:linear-gradient(122deg,#ff8c42,#ffb703);--grad-ink:#4a2600;
  /* 채움글자용: 밝은 주황 그대로는 흰 카드 위 1.75:1 → 같은 색상환에서 명도만 낮춘 진주황·벽돌색(최저 4.65:1) */
  --grad-num:linear-gradient(206deg,#946500,#ae4f16 55%,#ad3222 120%);
  --sel-bg:#ad4610;--sel-ink:#ffffff;
  --sh-c:184 108 46;--sh-a:.62;--r:26px;--fs:1.18}
body[data-theme="kinder"] .display{font-family:'Jua',var(--font)}
body[data-theme="elem"]{--bg:#eef7ff;--bg2:#dcefff;--card:#ffffff;--card2:#eaf4ff;--tx:#16324f;--line:rgba(30,90,160,.12);
  /* --tx2 는 #5f7d9c(최저 3.64:1) → #4a6179(최저 5.44:1) */
  --tx2:#4a6179;
  --acc:#2f80ed;--acc2:#27ae60;--gold:#f2c94c;--ok:#27ae60;--no:#eb5757;
  --acc-tx:#1a5cb4;--ok-tx:#146e3b;--no-tx:#ad2f2f;--gold-tx:#7d6000;
  --grad:linear-gradient(138deg,#2f80ed,#56ccf2);--grad2:linear-gradient(206deg,#27ae60,#2f80ed 55%,#56ccf2 120%);
  /* 밝은 쪽 정지점 #1a7ba8 → #17708f: 흰 글자 4.72:1(여유 0.22) 밖에 없어 .ck.lit .ko 같은
     반투명 흰 글자가 4.5:1 을 못 넘겼다. 한 단계 어둡게 내려 5.57:1 로 여유 확보. */
  --grad-btn:linear-gradient(138deg,#1f66c4,#17708f);--grad-ink:#fff;
  --grad-num:linear-gradient(206deg,#146e3b,#1a5cb4 55%,#17738f 120%);
  --sel-bg:#1a5cb4;--sel-ink:#ffffff;
  --sh-c:38 92 168;--sh-a:.58;--r:20px;--fs:1.06}
body[data-theme="middle"]{--bg:#0e1224;--bg2:#161c3a;--card:#1c2348;--card2:#252e5e;--tx:#e9ecff;--tx2:#8f99c9;--line:rgba(150,160,255,.12);
  --acc:#7c5cff;--acc2:#00d4ff;--gold:#ffd166;--ok:#2ee6a8;--no:#ff5d8f;
  --acc-tx:#a892ff;--ok-tx:#2ee6a8;--no-tx:#ff7ba3;--gold-tx:#ffd166;
  --grad:linear-gradient(148deg,#7c5cff,#00d4ff);--grad2:linear-gradient(206deg,#00d4ff,#7c5cff 55%,#ffd166 120%);
  --grad-btn:linear-gradient(148deg,#5636d9,#0a7096);--grad-ink:#fff;
  --grad-num:linear-gradient(206deg,#4fdcff,#a892ff 55%,#ffd166 120%);
  --sel-bg:#a892ff;--sel-ink:#0e1224;
  --sh-c:8 12 40;--r:16px}
body[data-theme="high"]{--bg:#0a0f1e;--bg2:#101830;--card:#151f3c;--card2:#1c2950;--tx:#e8ecf8;--tx2:#8b97b8;--line:rgba(200,180,120,.14);
  --acc:#c9a84c;--acc2:#3b6fd4;--gold:#e7c873;--ok:#37c08e;--no:#e25c7a;
  --acc-tx:#c9a84c;--ok-tx:#37c08e;--no-tx:#e97e93;--gold-tx:#e7c873;
  --grad:linear-gradient(118deg,#c9a84c,#e7c873);--grad2:linear-gradient(206deg,#3b6fd4,#c9a84c 55%,#e7c873 120%);
  /* 금색 채움 위의 흰 글자는 1.63:1 로 사실상 안 보인다 → 잉크를 짙은 먹색으로(최저 8.00:1) */
  --grad-btn:linear-gradient(118deg,#c9a84c,#e7c873);--grad-ink:#1b1405;
  /* 파란 정지점 #3b6fd4 는 남색 카드 위 2.84:1 → 같은 파랑을 흰색쪽으로 올려 #8badea(최저 5.95:1) */
  --grad-num:linear-gradient(206deg,#8badea,#d4b46a 55%,#e7c873 120%);
  --sel-bg:#c9a84c;--sel-ink:#1b1405;
  --sh-c:4 8 22;--r:12px;--fs:.98}
body[data-theme="high"] .display{font-family:'Gowun Batang',serif}
body[data-theme="adult"]{--bg:#0d0d0f;--bg2:#161618;--card:#1c1c20;--card2:#26262c;--tx:#f2f0ea;--tx2:#9b968a;--line:rgba(220,200,160,.12);
  --acc:#d4b26a;--acc2:#8c7851;--gold:#e6c987;--ok:#58b98a;--no:#d96a7f;
  --acc-tx:#d4b26a;--ok-tx:#58b98a;--no-tx:#d96a7f;--gold-tx:#e6c987;
  --grad:linear-gradient(154deg,#d4b26a,#f0dba8);--grad2:linear-gradient(206deg,#8c7851,#d4b26a 55%,#e6c987 120%);
  --grad-btn:linear-gradient(154deg,#d4b26a,#f0dba8);--grad-ink:#241a06;
  /* 어두운 카키 #8c7851 은 먹색 카드 위 3.21:1 → 같은 카키를 올려 #b0a184(최저 5.40:1) */
  --grad-num:linear-gradient(206deg,#b0a184,#d4b26a 55%,#e6c987 120%);
  --sel-bg:#d4b26a;--sel-ink:#241a06;
  --sh-c:6 5 4;--sh-a:1.1;--r:14px}

/* ---------- 레이아웃 ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-6);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:var(--sp-2);font-weight:800;font-size:var(--fz-h4);letter-spacing:var(--ls-h);cursor:pointer;white-space:nowrap;flex:none}
.logo .mark{width:34px;height:34px;border-radius:var(--r-2);background:var(--grad-btn);display:grid;place-items:center;font-size:var(--fz-lead);color:var(--grad-ink);
  box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.28);transition:transform var(--dur-2) var(--ease-spring)}
.logo:hover .mark{transform:rotate(-6deg) scale(1.06)}
.nav{display:flex;gap:var(--sp-1);margin-left:auto;flex-wrap:wrap}
.nav button{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);color:var(--tx2);font-weight:600;font-size:var(--fz-sm);transition:var(--tr-fast);white-space:nowrap;line-height:var(--lh-snug)}
.nav button:hover{color:var(--tx);background:var(--card)}
.nav button.on{color:var(--grad-ink);background:var(--grad-btn);box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.langsel{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3)}

/* ---------- 상단 초중고 퀵탭 + 진행률 (2026-07-11) ---------- */
/* top:58px 은 topbar 실제 높이(12+34+12)에 맞춘 기하값이라 4의 배수 정렬 대상에서 제외한다 */
#topLevelStrip{position:sticky;top:58px;z-index:49;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-6);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tls-levels{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tls-lv{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);background:var(--card2);border:1px solid var(--line);font-size:var(--fz-sm);font-weight:700;color:var(--tx2);white-space:nowrap;transition:var(--tr-fast)}
.tls-lv:hover{color:var(--tx);background:var(--card);border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.tls-lv.on{color:var(--grad-ink);background:var(--grad-btn);border-color:transparent;box-shadow:0 3px 10px color-mix(in srgb,var(--acc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.tls-prog{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--card2);border:1px solid var(--line);white-space:nowrap;flex:none}
.tls-prog .tls-bar{width:64px;height:8px;border-radius:var(--sp-1);background:var(--bg2);overflow:hidden;display:inline-block}
.tls-prog .tls-bar i{display:block;height:100%;background:var(--grad);border-radius:var(--sp-1);transition:width var(--dur-4) var(--ease-out);width:0}
.tls-prog span:last-child{font-size:var(--fz-sm);font-weight:700;color:var(--tx2)}
@media(max-width:640px){
  #topLevelStrip{position:static;top:auto;padding:var(--sp-2) var(--sp-4);flex-wrap:wrap}
  .tls-lv{padding:var(--sp-1) var(--sp-3);font-size:var(--fz-xs)}
  .tls-prog .tls-bar{width:44px}
}
.main{max-width:1180px;margin:0 auto;padding:var(--sp-6) var(--sp-6) var(--sp-20)}

/* ---------- 히어로 ---------- */
.hero{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;overflow:hidden;border-radius:var(--r-5);margin-top:var(--sp-2)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;padding:var(--sp-16) var(--sp-5);perspective:900px}
.hero h1{font-size:var(--fz-display);font-weight:900;letter-spacing:var(--ls-tight);line-height:var(--lh-tight);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(108,140,255,.35))}
.hero p{margin:var(--sp-5) auto var(--sp-8);max-width:620px;color:var(--tx2);font-size:clamp(var(--fz-body),2vw,var(--fz-h3));line-height:var(--lh-body)}
.float-chunks{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-8);transform-style:preserve-3d}
.fchunk{padding:var(--sp-3) var(--sp-5);border-radius:var(--r-3);background:color-mix(in srgb,var(--card) 75%,transparent);border:1px solid var(--line);
  font-weight:700;backdrop-filter:blur(8px);animation:floaty 4.2s ease-in-out infinite;box-shadow:var(--sh-2),var(--sh-hair);transform-style:preserve-3d}
.fchunk em{display:block;font-style:normal;font-size:var(--fz-xs);color:var(--tx2);font-weight:500;margin-top:var(--sp-1)}
.fchunk:nth-child(2){animation-delay:.7s}.fchunk:nth-child(3){animation-delay:1.4s}.fchunk:nth-child(4){animation-delay:2.1s}
@keyframes floaty{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-14px) rotateX(8deg)}}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-3);background:var(--grad-btn);color:var(--grad-ink);
  font-weight:800;font-size:var(--fz-lead);line-height:var(--lh-snug);
  box-shadow:0 12px 36px color-mix(in srgb,var(--acc2) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),filter var(--dur-2) var(--ease-out)}
.cta:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 48px color-mix(in srgb,var(--acc2) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.cta:active{transform:translateY(-1px) scale(.995);transition-duration:var(--dur-1)}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.hero-secondary{min-height:56px;padding:0 var(--sp-6);border-radius:var(--r-3)}

/* ---------- 섹션/카드 ---------- */
.sec{margin-top:var(--sp-16)}
.sec>h2{font-size:var(--fz-h2);font-weight:800;letter-spacing:var(--ls-h);line-height:var(--lh-snug);margin-bottom:var(--sp-1)}
.sec>.sub{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-body);margin-bottom:var(--sp-6)}
.grid{display:grid;gap:var(--sp-5)}
.g5{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6);box-shadow:var(--sh-2),var(--sh-hair);
  transition:var(--tr-ui);position:relative;overflow:hidden}
/* 호버 = 한 단계 위로(깊이 2→3) + 브랜드 링. 곡선을 --ease-out 로 통일해 "툭" 끊기지 않게.
   (cursor 는 건드리지 않는다 — .hov 가 붙었지만 클릭 불가인 소개 카드가 있다) */
.card.hov:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  box-shadow:var(--sh-3),0 18px 44px color-mix(in srgb,var(--acc) 20%,transparent),var(--sh-hair)}
.card.hov:active{transform:translateY(-2px);transition-duration:var(--dur-1)}
.card.guide-acc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 40%,transparent);box-shadow:var(--sh-3),var(--sh-hair)}
.stat{transition:var(--tr-ui)}
.stat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:var(--sh-2)}

/* ---------- 벤토(bento) 카드 위계 — 균일 그리드에 강약 부여 ----------
   기본은 CSS만으로(:nth-child) 자동 강조. 특정 카드를 수동으로 강조하고 싶으면
   해당 카드 엘리먼트에 class="card-featured" 를 추가하면 된다(마크업 변경은 별도 작업).
   #planGrid(멤버십 요금제)는 이미 .plan-card.best로 강조 로직이 있어 대상에서 제외. */
@media (min-width:700px){
  .grid.g5,.gamegrid,.grid.g3:not(#planGrid){grid-auto-flow:dense}
  .grid.g5>*:first-child{grid-column:span 2}
  .grid.g3:not(#planGrid)>*:nth-child(3){grid-column:span 2}
  .gamegrid>*:first-child{grid-column:span 2}
}
.card-featured{border-color:color-mix(in srgb,var(--acc) 55%,var(--line));
  box-shadow:var(--sh-3),var(--sh-glow),var(--sh-hair)}
.card-featured.hov:hover{box-shadow:var(--sh-4),var(--sh-glow),var(--sh-hair)}
.card-featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad);
  -webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.75}
.card-featured h3,.card-featured>b{font-size:1.1em}

/* 레벨 카드 (3D tilt) */
.lvcard{cursor:pointer;text-align:left;transform-style:preserve-3d;will-change:transform}
.lvcard .emoji{font-size:var(--fz-num-lg);display:block;margin-bottom:var(--sp-2);transform:translateZ(30px)}
.lvcard h3{font-size:var(--fz-h3);font-weight:800;line-height:var(--lh-snug);letter-spacing:var(--ls-h);margin-bottom:var(--sp-1)}
.lvcard .en{color:var(--acc-tx);font-size:var(--fz-xs);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase}
.lvcard p{color:var(--tx2);font-size:var(--fz-sm);margin-top:var(--sp-2);line-height:var(--lh-body)}
.lvcard .bar{height:4px;border-radius:var(--sp-1);background:var(--grad);margin-top:var(--sp-4);opacity:.85;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-out);transform-origin:left center}
.lvcard:hover .bar{opacity:1;transform:scaleX(1.02)}

/* 방법론 스텝 */
.steps{counter-reset:s}
.step{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5) 0;border-bottom:1px dashed var(--line)}
.step:last-child{border:none}
.step .n{width:44px;height:44px;flex:none;border-radius:var(--r-2);background:var(--grad-btn);display:grid;place-items:center;font-weight:900;color:var(--grad-ink);font-size:var(--fz-lead);
  box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.step h4{font-size:var(--fz-h4);line-height:var(--lh-snug);margin-bottom:var(--sp-1)}
.step h4 span{color:var(--acc-tx);font-size:var(--fz-xs);font-weight:700;letter-spacing:.03em;margin-left:var(--sp-2)}
.step p{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-body)}

/* ---------- 레벨 홈 ---------- */
.lv-hero{display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap;padding:var(--sp-8);border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3),var(--sh-hair)}
.lv-hero .big{font-size:var(--fz-hero-ic);line-height:1}
.lv-hero h2{font-size:var(--fz-h1);font-weight:900;letter-spacing:var(--ls-h);line-height:var(--lh-snug)}
.lv-hero .tag{color:var(--acc-tx);font-weight:700;font-size:var(--fz-sm);letter-spacing:.02em;margin-top:var(--sp-1)}
.lv-hero p{color:var(--tx2);font-size:var(--fz-sm);margin-top:var(--sp-3);max-width:640px;line-height:var(--lh-body)}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
.chip{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);background:var(--card2);border:1px solid var(--line);font-size:var(--fz-xs);font-weight:700;color:var(--tx2);letter-spacing:.01em}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.mode{padding:var(--sp-5);border-radius:var(--r);background:var(--card);border:1px solid var(--line);cursor:pointer;text-align:center;transition:var(--tr-ui);box-shadow:var(--sh-2),var(--sh-hair)}
.mode:hover{transform:translateY(-5px);border-color:var(--acc);box-shadow:var(--sh-3),0 14px 34px color-mix(in srgb,var(--acc) 18%,transparent)}
.mode:active{transform:translateY(-1px);transition-duration:var(--dur-1)}
.mode .ic{font-size:var(--fz-h1s);line-height:1}
.mode b{display:block;margin-top:var(--sp-2);font-size:var(--fz-h4);line-height:var(--lh-snug)}
.mode span{color:var(--tx2);font-size:var(--fz-xs);display:block;margin-top:var(--sp-1);line-height:var(--lh-normal)}

/* 커리큘럼 맵 */
.curri{margin-top:var(--sp-8)}
.stage{display:flex;gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r);background:var(--card);border:1px solid var(--line);margin-bottom:var(--sp-3);align-items:center;flex-wrap:wrap;box-shadow:var(--sh-1)}
.stage .wk{flex:none;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);background:var(--grad-btn);color:var(--grad-ink);font-weight:800;font-size:var(--fz-xs);letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.stage b{font-size:var(--fz-h4)}.stage p{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-normal);flex:1 1 200px}
.daychips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.daychip{width:44px;height:44px;border-radius:var(--r-2);background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;
  font-weight:800;font-size:var(--fz-sm);cursor:pointer;transition:var(--tr-fast);position:relative}
.daychip:hover{background:var(--acc);color:var(--grad-ink);border-color:transparent;transform:scale(1.1);box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 45%,transparent)}
/* 흰 글자는 --ok(밝은 초록) 위에서 1.6~2.9:1 밖에 안 나온다 → 짙은 초록 잉크로 뒤집음(5.0~9.0:1) */
.daychip.done{background:var(--ok);color:#06301c;border-color:transparent}
.daychip.done::after{content:"✓";position:absolute;top:-8px;right:-4px;font-size:var(--fz-2xs);background:var(--gold);color:#4a3600;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;line-height:1}

/* ---------- 학습 화면 ---------- */
.learn-head{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
/* 페이지 제목은 섹션 제목(1.75rem)보다 한 단 아래 24px — 기존 1.45rem 위계를 8pt 눈금으로 정렬 */
.learn-head h2{font-size:var(--fz-h2s);font-weight:800;letter-spacing:var(--ls-h);line-height:var(--lh-snug);flex:1}
.back{padding:var(--sp-2) var(--sp-4);border-radius:var(--r-2);background:var(--card);border:1px solid var(--line);font-weight:700;font-size:var(--fz-sm);color:var(--tx2);transition:var(--tr-fast)}
.back:hover{color:var(--tx);border-color:var(--acc);background:var(--card2)}
.tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.tabs button{padding:var(--sp-3) var(--sp-5);border-radius:var(--r-2);background:var(--card);border:1px solid var(--line);font-weight:700;font-size:var(--fz-sm);color:var(--tx2);transition:var(--tr-fast)}
.tabs button:hover{color:var(--tx);border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.tabs button.on{background:var(--grad-btn);color:var(--grad-ink);border-color:transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}

/* 청크 카드 라인 */
.dialog-line{padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--card);border:1px solid var(--line);margin-bottom:var(--sp-3);box-shadow:var(--sh-1)}
/* 화자 라벨: 이름(Mom/Mia…)이므로 대문자 변환은 하지 않는다 — 표기가 바뀌면 콘텐츠 훼손 */
.dialog-line .sp{font-size:var(--fz-xs);font-weight:800;color:var(--acc-tx);letter-spacing:.04em;margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}
.chunkrow{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.ck{display:inline-block;vertical-align:middle;max-width:100%;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);background:var(--card2);border:1.5px solid var(--line);font-weight:700;cursor:pointer;
  transition:var(--tr-fast);position:relative;transform-style:preserve-3d}
.ck:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--acc) 22%,transparent)}
.ck:active{transform:translateY(0)}
.ck.lit{background:var(--grad-btn);color:var(--grad-ink);border-color:transparent;transform:translateY(-3px) scale(1.04);box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.ck .ko{display:block;font-size:var(--fz-xs);font-weight:500;color:var(--tx2);margin-top:var(--sp-1)}
/* 84% → 90%: 84% 는 잉크가 배경 그라데이션 쪽으로 너무 섞여 유치원 4.31 / 초등 3.82:1 이었다.
   90% + 초등 --grad-btn 정지점 보정으로 전 테마 최저 4.67:1. */
.ck.lit .ko{color:color-mix(in srgb,var(--grad-ink) 90%,transparent)}
.linectl{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.mini{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);background:var(--card2);border:1px solid var(--line);font-size:var(--fz-xs);font-weight:700;color:var(--tx2);transition:var(--tr-fast)}
.mini:hover{color:var(--tx);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--card2))}
/* .mini.busy 는 아래 "v6" 구획(--ok 배경 + #06301c 잉크, 최저 5.05:1)에서 최종 정의된다.
   여기 있던 background:var(--acc);color:var(--grad-ink) 선언은 그 규칙에 완전히 덮여
   한 번도 적용된 적이 없는 죽은 코드였고, 문서(§2-4)가 이 죽은 쪽을 설명해 혼선을 만들었다 → 삭제. */

/* 훈련 공통 */
.train-stage{padding:var(--sp-8);border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3),var(--sh-hair);text-align:center}
.train-stage .prompt{font-size:var(--fz-body);color:var(--tx2);line-height:var(--lh-body);margin-bottom:var(--sp-5)}
.bigline{font-size:var(--fz-h2s);font-weight:800;line-height:var(--lh-normal);letter-spacing:var(--ls-h);margin:var(--sp-4) 0}
.pool{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center;margin:var(--sp-5) 0;min-height:56px}
.slotline{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;min-height:56px;padding:var(--sp-3);border-radius:var(--r-3);background:var(--bg2);border:2px dashed var(--line);margin-bottom:var(--sp-4);transition:border-color var(--dur-2) var(--ease-out)}
.ck.in-slot{background:var(--grad-btn);color:var(--grad-ink);border-color:transparent}
.ck.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.ck.pop{animation:pop .35s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.feedback{min-height:36px;font-weight:800;font-size:var(--fz-h4);margin-top:var(--sp-2)}
.feedback.ok{color:var(--ok-tx)}.feedback.no{color:var(--no-tx)}
.blank-input{padding:var(--sp-3) var(--sp-3);border-radius:var(--r-2);border:2px solid var(--line);background:var(--bg2);color:var(--tx);font-weight:700;width:152px;max-width:100%;text-align:center;vertical-align:middle;
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.blank-input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.blank-input.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--bg2))}
.blank-input.no{border-color:var(--no)}
.progressbar{height:8px;border-radius:var(--sp-1);background:var(--bg2);overflow:hidden;margin:var(--sp-5) 0}
.progressbar i{display:block;height:100%;background:var(--grad);border-radius:var(--sp-1);transition:width var(--dur-4) var(--ease-out);width:0}
.btnrow{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}
/* 버튼: 눌림(active)까지 있는 3상태 — "누르면 반응한다"는 감각이 유료 체감의 절반이다 */
.btn{padding:var(--sp-3) var(--sp-6);border-radius:var(--r-2);font-weight:800;font-size:var(--fz-body);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.btn.pri{background:var(--grad-btn);color:var(--grad-ink);box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.pri:hover{transform:translateY(-2px);box-shadow:0 14px 32px color-mix(in srgb,var(--acc) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.38)}
.btn.sec{background:var(--card2);border:1px solid var(--line);color:var(--tx)}
.btn.sec:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line));background:color-mix(in srgb,var(--acc) 9%,var(--card2));transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.985);transition-duration:var(--dur-1)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* 키보드 포커스 링 — 브랜드 컬러로 통일(마우스 클릭에는 안 나온다) */
.btn:focus-visible,.cta:focus-visible,.mini:focus-visible,.back:focus-visible,.tabs button:focus-visible,
.nav button:focus-visible,.tls-lv:focus-visible,.mode:focus-visible,.card.hov:focus-visible,.daychip:focus-visible,
.gen-tabs button:focus-visible,.foot-links button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--acc) 88%,#fff);outline-offset:3px}

/* 말하기 */
.mic-orb{width:112px;height:112px;border-radius:50%;background:var(--grad-btn);display:grid;place-items:center;margin:var(--sp-5) auto;
  font-size:var(--fz-num-lg);cursor:pointer;transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease-out);
  box-shadow:0 10px 34px color-mix(in srgb,var(--acc2) 46%,transparent);color:var(--grad-ink)}
.mic-orb:hover{transform:scale(1.07)}
.mic-orb.rec{animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--no) 56%,transparent)}50%{box-shadow:0 0 0 24px transparent}}
.simring{font-size:var(--fz-num);font-weight:900;background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 게임 ---------- */
.gamegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-5)}
.gboard{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.memory{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mcard{height:96px;perspective:700px;cursor:pointer}
.mcard .inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--dur-4) var(--ease-out)}
.mcard.flip .inner{transform:rotateY(180deg)}
.mcard .face{position:absolute;inset:0;border-radius:var(--r-3);display:grid;place-items:center;padding:var(--sp-2);text-align:center;
  font-weight:800;font-size:var(--fz-sm);backface-visibility:hidden;border:1.5px solid var(--line);line-height:1.35}
.mcard .front{background:var(--grad-btn);color:var(--grad-ink);font-size:var(--fz-h2s)}
.mcard .backf{background:var(--card);transform:rotateY(180deg);color:var(--tx)}
.mcard.matched .inner{transform:rotateY(180deg)}
.mcard.matched .backf{background:color-mix(in srgb,var(--ok) 18%,var(--card));border-color:var(--ok);color:var(--ok-tx)}
.gamestats{display:flex;gap:var(--sp-5);justify-content:center;font-weight:800;margin-top:var(--sp-4);flex-wrap:wrap}
.gamestats span{color:var(--tx2);font-size:var(--fz-sm);font-weight:600}
.split-line{font-size:var(--fz-h2s);font-weight:700;line-height:2.3;text-align:center;margin:var(--sp-6) 0;word-spacing:.1em}
.gap{display:inline-block;width:14px;height:1.3em;vertical-align:middle;cursor:pointer;border-radius:var(--sp-1);transition:var(--tr-fast);margin:0 1px}
.gap:hover{background:color-mix(in srgb,var(--acc) 35%,transparent)}
.gap.cut{background:var(--acc);width:5px;box-shadow:0 0 10px var(--acc)}
.gap.hit{background:var(--ok);width:5px}
.gap.miss{background:var(--no);width:5px}
.timerbar{height:8px;background:var(--bg2);border-radius:var(--sp-1);overflow:hidden;margin:var(--sp-4) 0}
.timerbar i{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--gold),var(--no));width:100%}

/* ---------- AI 스튜디오 ---------- */
.studio-grid{display:grid;grid-template-columns:340px 1fr;gap:var(--sp-5)}
@media(max-width:880px){.studio-grid{grid-template-columns:1fr}}
.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:var(--sp-6);text-align:center;color:var(--tx2);cursor:pointer;transition:var(--tr-ui);background:var(--card)}
.dropzone:hover,.dropzone.over{border-color:var(--acc);color:var(--tx);background:var(--card2);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 14%,transparent)}
.studio-ta{width:100%;min-height:172px;margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-3);background:var(--card);border:1px solid var(--line);color:var(--tx);resize:vertical;line-height:var(--lh-body);
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.studio-ta:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.gen-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.gen-tabs button{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-2);background:var(--card);border:1px solid var(--line);font-weight:700;font-size:var(--fz-sm);color:var(--tx2);transition:var(--tr-fast)}
.gen-tabs button:hover{color:var(--tx);border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
.gen-tabs button.on{background:var(--grad-btn);color:var(--grad-ink);border-color:transparent;box-shadow:0 4px 14px color-mix(in srgb,var(--acc) 32%,transparent)}
.gen-out{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-6);min-height:340px;line-height:var(--lh-loose);font-size:var(--fz-body);box-shadow:var(--sh-2),var(--sh-hair)}
.gen-out h3{margin:var(--sp-5) 0 var(--sp-2);color:var(--acc-tx);font-size:var(--fz-h4);letter-spacing:var(--ls-h)}.gen-out h3:first-child{margin-top:0}
.gen-out .qa{padding:var(--sp-4);border-radius:var(--r-2);background:var(--card2);margin:var(--sp-3) 0;border:1px solid var(--line)}
.gen-out .ans{color:var(--ok-tx);font-weight:700}
.gen-out .expl{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-body);margin-top:var(--sp-2)}
.gen-out .chunk-render .ck{cursor:default;margin:var(--sp-1)}
.spin{display:inline-block;width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:rot 1s linear infinite;vertical-align:middle;margin-right:var(--sp-2)}
@keyframes rot{to{transform:rotate(360deg)}}
.aitag{display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-1);font-size:var(--fz-xs);font-weight:800;margin-left:var(--sp-2);vertical-align:middle}
.aitag.on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-tx)}
.aitag.off{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-tx)}

/* ---------- 진행도/설정/기타 ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-4)}
.stat{padding:var(--sp-6) var(--sp-5);text-align:center;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.stat .v{font-size:var(--fz-h1s);font-weight:900;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--tx2);font-size:var(--fz-xs);line-height:var(--lh-normal);margin-top:var(--sp-1);font-weight:600}
.settings-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.settings-row label{font-weight:700;font-size:var(--fz-sm);min-width:160px}
.settings-row input[type=password],.settings-row input[type=text]{flex:1;min-width:220px;padding:var(--sp-3) var(--sp-3);border-radius:var(--r-2);border:1px solid var(--line);background:var(--card2);color:var(--tx);
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.settings-row input[type=password]:focus,.settings-row input[type=text]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
#xpToast{position:fixed;top:72px;right:var(--sp-6);z-index:99;padding:var(--sp-3) var(--sp-6);border-radius:var(--r-2);background:var(--grad-btn);color:var(--grad-ink);
  font-weight:900;opacity:0;transform:translateY(-14px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-spring);pointer-events:none;
  box-shadow:0 10px 30px color-mix(in srgb,var(--acc2) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
#xpToast.show{opacity:1;transform:translateY(0)}
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden}
.confetti-layer i{position:absolute;top:-20px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.fade-in{animation:fadein var(--dur-4) var(--ease-out)}
@keyframes fadein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.note{font-size:var(--fz-sm);color:var(--tx2);line-height:var(--lh-body);margin-top:var(--sp-3)}
.kbd{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-1);background:var(--card2);border:1px solid var(--line);font-size:var(--fz-xs)}
@media(max-width:640px){.main{padding:var(--sp-5) var(--sp-4) var(--sp-20)}.hero{min-height:64vh}.nav button{padding:var(--sp-2) var(--sp-3);font-size:var(--fz-xs)}}

/* ---------- v2: 실사진 디자인 ---------- */
.hero-photo::before{content:"";position:absolute;inset:0;background:
  linear-gradient(160deg,color-mix(in srgb,var(--bg) 86%,transparent) 18%,color-mix(in srgb,var(--bg) 55%,transparent) 60%,color-mix(in srgb,var(--bg) 88%,transparent)),
  url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1800&q=72&auto=format') center/cover no-repeat;z-index:0}
.hero-photo #heroCanvas{z-index:1;opacity:.65}
.photo-card{padding:0;overflow:hidden}
.photo-card .pc-img{position:relative;height:130px;overflow:hidden;background:var(--grad)}
.photo-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease-out),filter var(--dur-3) var(--ease-out);display:block;filter:saturate(.92)}
.photo-card:hover .pc-img img{transform:scale(1.08);filter:saturate(1.02)}
.photo-card .pc-img.noimg img{display:none}
/* 브랜드 그라데이션 톤 오버레이 — 스톡사진이 브랜드 팔레트에 녹아들도록 색상 블렌드 후 하단 페이드 */
.photo-card .pc-img::before{content:"";position:absolute;inset:0;z-index:1;background:var(--grad);mix-blend-mode:color;opacity:.6}
.photo-card .pc-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--card) 92%,transparent))}
.photo-card .pc-emoji{position:absolute;right:var(--sp-3);bottom:var(--sp-2);font-size:var(--fz-h1s);z-index:2;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
  transition:transform var(--dur-3) var(--ease-spring)}
.photo-card:hover .pc-emoji{transform:translateY(-3px) scale(1.08)}
.photo-card .pc-body{padding:var(--sp-5) var(--sp-5) var(--sp-6)}
.lv-thumb{width:120px;height:120px;border-radius:var(--r-3);object-fit:cover;flex:none;box-shadow:var(--sh-2);
  filter:saturate(.9);border:2px solid transparent;background-origin:border-box;
  background-clip:padding-box,border-box;background-image:linear-gradient(var(--card),var(--card)),var(--grad)}
.photo-hero{background-size:cover;background-position:center right;background-blend-mode:multiply,normal}
.photo-banner{border-radius:var(--r);padding:var(--sp-10) var(--sp-8);background-size:cover;background-position:center;color:#fff;box-shadow:var(--sh-3);position:relative;overflow:hidden}
.photo-banner::after{content:"";position:absolute;inset:0;background:var(--grad);mix-blend-mode:color;opacity:.5;pointer-events:none}
.photo-banner>*{position:relative;z-index:1}
@media(max-width:640px){.lv-thumb{width:76px;height:76px}.photo-card .pc-img{height:104px}}

/* ---------- v2: 미션/복습/노트 ---------- */
.mission-card{padding:var(--sp-5) var(--sp-6)}
.mission-rows{margin-top:var(--sp-3);display:grid;gap:var(--sp-2)}
.mission-row{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fz-sm);line-height:var(--lh-normal);color:var(--tx2);transition:color var(--dur-2) var(--ease-out)}
.mission-row.ok{color:var(--ok-tx)}
.mission-row.ok span::after{content:" ✓"}
/* 흰 글자는 --no(밝은 코럴/핑크) 위에서 2.7~3.5:1 → 짙은 자주 잉크로 뒤집음 */
.navdot{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:var(--r-pill);background:var(--no);color:#2b0610;font-size:var(--fz-2xs);font-weight:800;font-style:normal;margin-left:var(--sp-1);vertical-align:top;padding:0 var(--sp-1)}
@media(max-width:760px){.navlbl{display:none}}
.review-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.rep-chart{display:flex;gap:var(--sp-1);align-items:flex-end;height:132px;margin-top:var(--sp-4)}
.rep-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:var(--sp-1)}
.rep-col i{display:block;width:100%;max-width:32px;background:var(--grad);border-radius:var(--sp-1) var(--sp-1) 0 0;transition:height var(--dur-4) var(--ease-out)}
.rep-col span{font-size:var(--fz-2xs);color:var(--tx2)}

/* ---------- v2: 멤버십 ----------
   [2026-08-18] 프리미엄(.best) 카드가 "그냥 테두리 색만 다른 카드"였다.
   결제 전환의 핵심 화면이므로 ① 그라데이션 링 ② 상단 광채 ③ 한 단계 큰 깊이(sh-3)
   ④ 데스크톱에서 살짝 앞으로 나온 배치(translateY+scale) 로 위계를 확실히 준다.
   ⚠ 클래스명(.plan-card/.best/.plan-badge/.plan-price/.plan-feats)은 membership.js 가
     그대로 생성하므로 절대 바꾸지 않았다 — 스타일만 강화. */
.plan-card{text-align:center;display:flex;flex-direction:column;gap:var(--sp-3);position:relative;
  padding:var(--sp-7) var(--sp-6) var(--sp-6);transition:var(--tr-ui)}
.plan-card h3{font-size:var(--fz-h3);letter-spacing:var(--ls-h);line-height:var(--lh-snug)}
.plan-card .btn{margin-top:auto}
.plan-card.best{
  border-color:transparent;padding-top:var(--sp-10);
  background:
    radial-gradient(118% 58% at 50% -10%,color-mix(in srgb,var(--acc2) 30%,transparent) 0%,transparent 68%),
    linear-gradient(168deg,color-mix(in srgb,var(--acc) 11%,var(--card)) 0%,var(--card) 52%);
  box-shadow:var(--sh-3),0 22px 60px color-mix(in srgb,var(--acc) 26%,transparent),var(--sh-hair)}
/* ── [2026-08-19 3차] 회전 그라데이션 링 ─────────────────────────────────────
   1.5px 마스크 링(.card-featured 와 동일 기법)에 conic-gradient 를 얹고 각도를 돌린다.
   @property 미지원 브라우저에서는 var(--ring-a,0deg) 폴백이 걸려 "정지된 링"으로만 보인다
   (선언이 무효가 되어 링이 통째로 사라지는 일이 없도록 폴백을 반드시 넣었다). */
@property --ring-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.plan-card.best::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--ring-a,0deg),
    color-mix(in srgb,var(--acc) 92%,transparent),var(--acc2),var(--gold),var(--acc2),color-mix(in srgb,var(--acc) 92%,transparent));
  -webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.95;animation:planRing 7s linear infinite}
@keyframes planRing{to{--ring-a:360deg}}
/* 카드 위를 천천히 지나가는 광택 — 7초에 한 번, 0.6초만 스친다(과하면 싸구려가 된다) */
.plan-card.best::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,color-mix(in srgb,#fff 26%,transparent) 48%,transparent 57%);
  transform:translateX(-130%);animation:planSheen 7s var(--ease-out) infinite}
@keyframes planSheen{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.plan-card.best .plan-feats{color:var(--tx)}
.plan-card.best .plan-price{font-size:var(--fz-num-lg)}
/* 데스크톱에서만 앞으로 — 좁은 화면에선 겹칠 수 있어 적용하지 않는다 */
@media (min-width:760px){
  .plan-card.best{transform:translateY(-10px) scale(1.035);z-index:2}
  .card.hov.plan-card.best:hover{transform:translateY(-18px) scale(1.05);
    box-shadow:var(--sh-4),0 30px 76px color-mix(in srgb,var(--acc) 34%,transparent)}
}
.plan-badge{position:absolute;top:var(--sp-3);right:var(--sp-3);background:var(--grad-btn);color:var(--grad-ink);font-size:var(--fz-2xs);font-weight:800;
  letter-spacing:var(--ls-caps);text-indent:var(--ls-caps);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);z-index:2;
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.32)}
.plan-price{font-size:var(--fz-num);font-weight:900;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.plan-feats{list-style:none;text-align:left;color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-normal);display:grid;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3);flex:1}

/* ---------- v2: 푸터/법적 ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:var(--sp-20);background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.foot-inner{max-width:1180px;margin:0 auto;padding:var(--sp-8) var(--sp-6);display:grid;gap:var(--sp-5)}
.foot-brand p{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-body);margin-top:var(--sp-1)}
.foot-links{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.foot-links button{color:var(--tx2);font-size:var(--fz-sm);padding:var(--sp-1) 0;transition:color var(--dur-1) var(--ease-out)}
.foot-links button:hover{color:var(--tx)}
.foot-biz{font-size:var(--fz-xs);color:var(--tx2);line-height:var(--lh-loose);opacity:.85}
.legal-doc h3{margin-top:var(--sp-6)}
.legal-doc .qa{line-height:var(--lh-loose)}

/* ---------- v3: 청크 시네마 ---------- */
.cin-ctl{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.cin-group{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.cin-group b{font-size:var(--fz-sm);color:var(--tx2);margin-right:var(--sp-1)}
.cin-ctl .mini.on{background:var(--grad-btn);color:var(--grad-ink);border-color:transparent}
.cin-stage{position:relative;min-height:420px;max-height:62vh;overflow-y:auto;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--bg2) 92%,transparent),color-mix(in srgb,var(--bg) 96%,transparent)),
  url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=1400&q=55&auto=format') center/cover no-repeat;
  padding:var(--sp-6) var(--sp-6) var(--sp-10);box-shadow:var(--sh-3),var(--sh-hair)}
.cin-stack{display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;min-height:300px;justify-content:flex-end}
.cin-line{max-width:680px;width:100%;text-align:center;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-3);cursor:pointer;
  background:color-mix(in srgb,var(--card) 72%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px);
  opacity:.42;transform:scale(.92);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out),border-color var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease-out);
  animation:cinFall .55s cubic-bezier(.2,.9,.3,1.2)}
.cin-line b{display:block;font-size:var(--fz-h3);letter-spacing:var(--ls-h)}
.cin-line .cin-sp{display:block;font-size:var(--fz-2xs);font-weight:800;color:var(--acc-tx);letter-spacing:var(--ls-caps);text-transform:uppercase;margin-bottom:var(--sp-1)}
.cin-line .cin-ko{display:block;font-size:var(--fz-sm);color:var(--tx2);margin-top:var(--sp-1)}
.cin-line.cur{opacity:1;transform:scale(1.04);border-color:var(--acc);box-shadow:0 12px 38px color-mix(in srgb,var(--acc) 30%,transparent),var(--sh-hair)}
.cin-line.cur b{background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--fz-h2s)}
@keyframes cinFall{0%{opacity:0;transform:translateY(-90px) scale(.85)}70%{opacity:1;transform:translateY(8px) scale(1.05)}100%{transform:translateY(0) scale(1.04)}}
.cin-drop{position:absolute;left:50%;top:0;transform:translate(-50%,-110%);max-width:560px;text-align:center;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-4);background:var(--grad-btn);color:var(--grad-ink);font-size:var(--fz-h3);font-weight:800;
  box-shadow:0 16px 44px color-mix(in srgb,var(--acc) 45%,transparent);transition:transform var(--dur-5) var(--ease-drop);z-index:3}
.cin-drop b{display:block}
.cin-drop .cin-ko{display:block;font-size:var(--fz-sm);font-weight:500;opacity:.9;margin-top:var(--sp-1)}
.cin-drop.land{transform:translate(-50%,140px)}
.cin-landed{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;align-content:flex-start;margin-top:var(--sp-58);max-height:300px;overflow-y:auto;padding:var(--sp-2)}
.cin-landed hr{width:100%;border:none;border-top:1px dashed var(--line);margin:var(--sp-1) 0}
.cin-progress{position:sticky;bottom:0;left:0;right:0;height:8px;border-radius:var(--sp-1);background:color-mix(in srgb,var(--bg) 60%,transparent);overflow:hidden;margin-top:var(--sp-5)}
.cin-progress i{display:block;height:100%;background:var(--grad);width:0;transition:width var(--dur-4) var(--ease-out)}
.hide-ko .cin-ko,.hide-ko .ko{display:none!important}

/* ---------- v3: 오늘의 한 청크 ---------- */
/* ---------- v6: 온보딩 / 신뢰 블록 / 광고 슬롯 ---------- */
.ob-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,7,18,.78);backdrop-filter:blur(8px);display:grid;place-items:center;padding:var(--sp-5)}
.ob-card{max-width:480px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-5);padding:var(--sp-8) var(--sp-7);text-align:center;box-shadow:var(--sh-4),var(--sh-hair);
  animation:obRise var(--dur-3) var(--ease-spring)}
@keyframes obRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.ob-emoji{width:64px;height:64px;border-radius:var(--r-4);background:var(--grad-btn);display:grid;place-items:center;font-size:var(--fz-h1s);color:var(--grad-ink);margin:0 auto var(--sp-4);
  box-shadow:0 10px 30px color-mix(in srgb,var(--acc2) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.ob-card h3{font-size:var(--fz-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-h);margin-bottom:var(--sp-3)}
.ob-card p{color:var(--tx2);line-height:var(--lh-body);font-size:var(--fz-sm);margin-bottom:var(--sp-5)}
.ob-steps{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.ob-steps div{font-size:var(--fz-xs);color:var(--tx2);background:var(--card2);border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-3)}
.ob-steps b{color:var(--acc-tx);margin-right:var(--sp-1)}
.ob-card .btnrow{margin-top:var(--sp-3)}
.trust-card{padding:var(--sp-8)}
.trust-who{display:flex;gap:var(--sp-4);align-items:center;margin-bottom:var(--sp-4)}
.trust-avatar{width:56px;height:56px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:var(--fz-h2);flex:none;
  box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
.trust-who b{font-size:var(--fz-h4);line-height:var(--lh-snug);display:block}
.trust-who span{color:var(--tx2);font-size:var(--fz-sm);line-height:var(--lh-normal)}
.trust-card p{line-height:var(--lh-loose);color:var(--tx);font-size:var(--fz-body)}
.trust-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--sp-3);margin-top:var(--sp-6);text-align:center}
.trust-nums b{display:block;font-size:var(--fz-h2s);font-weight:900;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-nums span{font-size:var(--fz-xs);color:var(--tx2);line-height:var(--lh-normal)}
.ad-slot{margin:var(--sp-8) auto 0;max-width:760px;min-height:100px;border:1px dashed var(--line);border-radius:var(--r-3);position:relative;overflow:hidden;background:var(--card)}
.ad-label{position:absolute;top:var(--sp-2);left:var(--sp-3);font-size:var(--fz-2xs);color:var(--tx2);letter-spacing:var(--ls-caps);opacity:.75}

/* ---------- v5: 프리미엄 모션 히어로 (3D 오빗 + 오로라 + 스타필드) ---------- */
.hero-v2{background:radial-gradient(120% 90% at 50% 0%,#141a3a 0%,#0a0d20 55%,#070912 100%);perspective:1100px}
body[data-theme=""] .hero-v2,body:not([data-theme]) .hero-v2{}
.aurora{position:absolute;inset:-20%;z-index:0;filter:blur(70px);opacity:.55;pointer-events:none}
.aurora i{position:absolute;width:55vw;height:55vw;max-width:780px;max-height:780px;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){background:radial-gradient(circle,#5b6cff 0%,transparent 62%);top:-8%;left:-6%;animation:aur1 16s ease-in-out infinite}
.aurora i:nth-child(2){background:radial-gradient(circle,#b44dff 0%,transparent 62%);bottom:-14%;right:-4%;animation:aur2 19s ease-in-out infinite}
.aurora i:nth-child(3){background:radial-gradient(circle,#ff5fb2 0%,transparent 64%);top:24%;left:38%;width:38vw;height:38vw;animation:aur3 23s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,14%) scale(1.18)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-12%,-10%) scale(.92)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(-8%,12%) scale(1.22)}}
.hero-v2 #heroCanvas{z-index:1}
.orbit-wrap{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;transition:transform var(--dur-3) var(--ease-out)}
.orbit3d{position:relative;width:0;height:0;transform-style:preserve-3d;animation:orbitSpin 36s linear infinite}
@keyframes orbitSpin{from{transform:rotateX(-9deg) rotateY(0)}to{transform:rotateX(-9deg) rotateY(360deg)}}
/* left:-105px 은 width(210px)의 절반 — 궤도 중심 정렬용 기하값이라 4의 배수 정렬 예외 */
.ocard{position:absolute;left:-105px;top:-44px;width:210px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);text-align:center;
  background:linear-gradient(150deg,rgba(124,140,255,.16),rgba(180,77,255,.10));
  border:1px solid rgba(160,170,255,.30);backdrop-filter:blur(7px);
  box-shadow:0 14px 44px rgba(60,70,180,.35), inset 0 1px 0 rgba(255,255,255,.18);
  backface-visibility:hidden;color:#eef1ff}
.ocard b{display:block;font-size:var(--fz-h4);letter-spacing:-.01em}
.ocard span{display:block;font-size:var(--fz-xs);color:#aab4e8;margin-top:var(--sp-1)}
.hero-v2 .hero-inner{z-index:3;transform-style:preserve-3d;transition:transform var(--dur-3) var(--ease-out);will-change:transform}
.hero-eyebrow{display:inline-block;padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-5);border-radius:var(--r-pill);font-size:var(--fz-xs);font-weight:800;letter-spacing:.2em;text-indent:.2em;white-space:nowrap;
  color:#cdd5ff;border:1px solid rgba(160,170,255,.35);background:rgba(110,125,255,.10);backdrop-filter:blur(6px);margin-bottom:var(--sp-6)}
.hero-v2 h1.shimmer{background:linear-gradient(110deg,#8fa2ff 15%,#e6ebff 38%,#c89bff 52%,#ff8fd0 68%,#8fa2ff 85%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-240% 0}}
.hero-v2 p{color:#b9c2ec}
.hero-v2 .cta{box-shadow:0 16px 50px rgba(124,100,255,.55), inset 0 1px 0 rgba(255,255,255,.35);animation:ctaPulse 3.4s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 16px 50px rgba(124,100,255,.5), inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 18px 64px rgba(180,90,255,.75), inset 0 1px 0 rgba(255,255,255,.35)}}
.hero-stats{display:flex;gap:var(--sp-8);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-10)}
.hero-stats div{text-align:center}
.hero-stats b{display:block;font-size:var(--fz-h2s);font-weight:900;background:linear-gradient(135deg,#9fb0ff,#e3b8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats span{font-size:var(--fz-xs);color:#a3adda;letter-spacing:.04em}
@media(max-width:760px){.ocard{width:150px;left:-75px;padding:var(--sp-2) var(--sp-3)}.ocard b{font-size:var(--fz-sm)}
  .orbit3d{animation-duration:30s}.hero-stats{gap:var(--sp-5)}
  .orbit3d .ocard{transform:none!important;position:static;display:none}
  .orbit-wrap{display:none}}
@media (prefers-reduced-motion: reduce){.orbit3d,.aurora i,.hero-v2 h1.shimmer,.hero-v2 .cta{animation:none}}

/* ---------- v4: 어법 코너 / 수능 구문 / 스토리 삽화 ---------- */
.gram-deco{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.gram-deco img{height:112px;border-radius:var(--r-2);border:1px solid var(--line);box-shadow:var(--sh-2);object-fit:cover;background:#fff}
.atoz-card{text-align:center;padding:var(--sp-5) var(--sp-4)}
.atoz-n{display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);background:var(--grad-btn);color:var(--grad-ink);font-weight:800;font-size:var(--fz-xs);letter-spacing:.02em;margin-bottom:var(--sp-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.atoz-card h3{font-size:var(--fz-h4);line-height:var(--lh-snug)}
.gram-block .gram-body{margin-top:var(--sp-3);line-height:var(--lh-loose);font-size:var(--fz-sm);color:var(--tx)}
.gram-block.hl{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--card));box-shadow:var(--sh-2),0 0 0 3px color-mix(in srgb,var(--acc) 12%,transparent)}
.sat-build{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--line)}
.story-img{display:block;max-width:430px;width:100%;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-2);margin:0 0 var(--sp-4)}

.today-chunk .tc-body{margin:var(--sp-3) 0 var(--sp-2);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-3);background:var(--card2);border:1px solid var(--line);text-align:center}
.today-chunk h3{font-size:var(--fz-h2s);line-height:var(--lh-snug);letter-spacing:var(--ls-h);background:var(--grad-num);-webkit-background-clip:text;background-clip:text;color:transparent}
.today-chunk p{color:var(--tx2);font-size:var(--fz-sm);margin-top:var(--sp-1)}
/* .mini.busy 최종 정의(위쪽 .mini 구획의 선언을 대체). #06301c 잉크는 6개 테마 --ok 전부에서 5.05:1 이상. */
.mini.busy{background:var(--ok);color:#06301c;border-color:transparent}

/* ---------- v7: 히어로 체험 데모 + 스트릭 잔디 ---------- */
.hero-demo{max-width:680px;margin:var(--sp-8) auto 0;padding:var(--sp-6);border-radius:var(--r-4);text-align:center;
  background:rgba(14,17,40,.74);border:1px solid rgba(150,160,255,.28);backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(20,25,80,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.hd-title{font-size:var(--fz-sm);color:#cdd5ff;margin-bottom:var(--sp-2)}
.hd-line{font-size:var(--fz-h3);margin:var(--sp-4) 0 var(--sp-1);color:#eef1ff;line-height:2.1}
.hd-line .gap{background:rgba(150,160,255,.22)}
.hd-line .gap:hover{background:rgba(150,160,255,.5)}
.hd-cards{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin:var(--sp-4) 0}
.hd-cards .ck{background:linear-gradient(150deg,rgba(124,140,255,.22),rgba(180,77,255,.14));border-color:rgba(160,170,255,.4);color:#eef1ff;cursor:pointer}
.hd-cards .ck .ko{color:#aab4e8}
.cl-stars{color:#ffb86b;font-weight:800;letter-spacing:1px}
.cl-card .cl-stars{font-size:var(--fz-h4)}
.cl-line .cl-chunks{justify-content:flex-start;text-align:left}
.cl-card:hover{transform:translateY(-3px)}
.ck.starred{outline:2px solid var(--acc)}

/* ===== v8 가독성·반응형 하이브리드 보강 ===== */
/* 읽기 편의: 줄간격·청크 가독성 */
.cin-line,.bigline{line-height:1.6}
.ck{line-height:1.45}
.ck .ko{line-height:1.4}
.note,.sub,.prompt{line-height:1.6}
/* 태블릿(패드) — 2~3열 그리드 자연 축소 */
@media (max-width:1024px){
  .main{padding:var(--sp-6) var(--sp-5) var(--sp-24)}
  .grid.g5{grid-template-columns:repeat(3,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .grid.g5,.grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g3,.grid.g2{grid-template-columns:1fr}
  .modes{grid-template-columns:1fr 1fr}
  .lv-hero,.photo-hero{flex-direction:column;text-align:center}
  .lv-hero .big,.photo-hero .big{margin:0 auto}
}
/* 모바일 — 손가락 터치 타깃·글자 크기 확보 */
@media (max-width:560px){
  .main{padding:var(--sp-4) var(--sp-3) var(--sp-22)}
  .ck{padding:var(--sp-3) var(--sp-4);font-size:var(--fz-body)}   /* 청크 탭 영역 확대 */
  .btn,.mini{min-height:44px}                     /* 권장 터치 최소 44px */
  .daychip{min-width:44px;min-height:44px;font-size:var(--fz-body)}
  .modes{grid-template-columns:1fr}
  .learn-head h2{font-size:var(--fz-h3)}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tabs button{flex:0 0 auto}
  h2.display,.hero h1{font-size:clamp(1.4rem,6vw,2rem)}
}
/* 가로 스크롤 방지(하이브리드 안정) */
img,video,iframe{max-width:100%}
.chunkrow,.hd-cards,.pool{max-width:100%}

/* ===== PC/모바일 하이브리드 보기 토글 + 모바일 단순화 ===== */
.vt-cluster{display:none;position:fixed;right:var(--sp-3);bottom:var(--sp-4);z-index:9000;flex-direction:column;gap:var(--sp-2)}
.vt-cluster button{background:var(--grad-btn);color:var(--grad-ink);border:none;border-radius:var(--r-5);padding:var(--sp-3) var(--sp-4);font-size:var(--fz-sm);font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.32);cursor:pointer}
.vt-cluster .vt-help{background:rgba(20,24,48,.92);color:#fff;border:1px solid var(--line)}
/* 브레이크포인트 정리(펀치리스트 L-9): 760 과 768 이 공존하던 것을 760 으로 통일 */
@media (max-width:760px){.vt-cluster{display:flex}}
html.force-pc .vt-cluster{display:flex}
/* 모바일 단순화 — 장식 최소화, 핵심만 (PC 화면 보기로 전환 시 force-pc 로 자동 해제) */
@media (max-width:560px){
  .photo-banner{min-height:120px;padding:var(--sp-6) var(--sp-5)}
  .gram-deco,.aurora,.orbit3d{display:none}
  .hero-demo{padding:var(--sp-4) var(--sp-3)}
  .card{padding:var(--sp-4)}
  /* ⚠ 위 .card 축약이 "이미지가 카드 끝까지 차야 하는" 사진 카드까지 잡아먹던 버그 —
     .photo-card 는 padding:0 을 유지해야 pc-img 가 카드 상단을 꽉 채운다. (2026-08-18 수정) */
  .card.photo-card{padding:0}
  .lv-hero,.photo-hero{padding:var(--sp-4)}
}
.hd-score{font-size:var(--fz-h4);color:#cdd5ff;margin:var(--sp-2) 0 var(--sp-1)}
.hd-score b{font-size:var(--fz-h2);background:linear-gradient(135deg,#9fb0ff,#ff9fd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.streak-card .streak-cells{display:flex;gap:var(--sp-2);margin:var(--sp-3) 0;flex-wrap:wrap}
.streak-cells i{width:24px;height:24px;border-radius:var(--r-1);background:var(--card2);border:1px solid var(--line);transition:var(--tr-fast)}
.streak-cells i.on1{background:color-mix(in srgb,var(--acc) 38%,var(--card2));border-color:transparent}
.streak-cells i.on2{background:color-mix(in srgb,var(--acc) 70%,var(--card2));border-color:transparent}
.streak-cells i.on3{background:var(--grad);border-color:transparent;box-shadow:0 3px 10px color-mix(in srgb,var(--acc) 45%,transparent)}
@media(max-width:640px){.hero-demo{padding:var(--sp-4) var(--sp-3)}.hd-line{font-size:var(--fz-h4)}}

/* ===== v9: 글자 밀림(넘침·어색한 줄바꿈) 수정 ===== */
/* 그리드/플렉스 자식이 긴 텍스트 때문에 칸을 밀어내지 않도록 */
.grid>*,.modes>*,.statgrid>*,.gamegrid>*{min-width:0}
.topbar{flex-wrap:wrap;row-gap:8px}
.nav{min-width:0}
/* 짧은 라벨(이모지+텍스트)은 한 줄 유지 — 중간 줄바꿈 방지 */
.chip,.wk,.mini,.back,.tabs button,.ob-steps div,.aitag,.plan-badge,.atoz-n{white-space:nowrap}
.btn,.mini,.tabs button,.back{line-height:1.25}
.btn{white-space:nowrap}
/* 긴 청크·해석·생성 텍스트는 컨테이너 안에서 자연스럽게 줄바꿈 */
.ck,.bigline,.cin-line b,.cin-line .cin-ko,.gen-out,.dialog-line,.lvcard p,.mode span,.step p,.trust-card p,.today-chunk h3{overflow-wrap:break-word}
.bigline .ck{margin:var(--sp-1)}
.dialog-line .sp{flex-wrap:wrap}
.step h4 span{display:inline-block}
.stat .v{font-variant-numeric:tabular-nums}
/* 시네마 낙하 카드가 좁은 화면에서 무대 밖으로 밀리지 않도록 */
.cin-drop{max-width:min(560px,calc(100% - 24px))}
/* 메모리 카드: 고정높이 안에서 텍스트가 눌리지 않게 */
.mcard .face{overflow:hidden;padding:var(--sp-2) var(--sp-3)}
/* 좁은 화면 보정 */
@media (max-width:560px){
  .topbar{padding:var(--sp-3) var(--sp-3);gap:var(--sp-3)}
  .logo{font-size:var(--fz-body)}
  .nav{gap:var(--sp-1)}
  .nav button{padding:var(--sp-2) var(--sp-2)}
  .mcard .face{font-size:var(--fz-sm)}
  .bigline{font-size:var(--fz-h3)}
  .stat .v{font-size:var(--fz-h2)}
  .settings-row label{min-width:0;flex:1 1 100%}
}

/* ============================================================================
   ===== v10 (2026-08-18): 프리미엄 2차 고도화 — 모바일 380~420px 정밀 보정 =====
   ----------------------------------------------------------------------------
   ■ 왜 필요했나 (실측)
     index.html 은 main.css 다음에 /assets/onae-responsive.css 를 로드한다.
     그 파일의 `html.onae-rwd .grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}`
     는 특이도가 (클래스2·타입1) 이라, main.css 의 `.grid.g3,.grid.g2{...:1fr}`(클래스2·타입0)
     보다 세다. 결과적으로 640px 이하에서 **1열이어야 할 g2/g3 가 2열로 눌려**
     380~420px 구간에서 카드 한 칸이 ~165px 까지 좁아지고 글자가 세로로 쌓였다.
     → onae 파일을 건드리지 않고(공용 모듈이라 수정 금지) `html body` 로 타입선택자를
       하나 더 얹어 특이도만 이겨서 되돌린다. !important 는 쓰지 않는다.
   ========================================================================== */
@media (max-width:760px){
  html body .grid.g3,html body .grid.g2{grid-template-columns:1fr}
  html body .grid.g5,html body .grid.g4{grid-template-columns:repeat(2,1fr)}
  html body .modes{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  html body .modes{grid-template-columns:1fr}
  /* 요금제는 좁은 화면에서 무조건 1열 — 3개가 2열로 갈라지면 "인기" 카드가 아래로 밀린다 */
  #planGrid{grid-template-columns:1fr}
  .card.plan-card{padding:var(--sp-5) var(--sp-4)}
  /* 데스크톱의 앞으로 튀어나온 배치는 여기선 해제(겹침 방지). 위 축약보다 뒤에 와야 padding-top 이 산다 */
  .card.plan-card.best{transform:none;padding-top:var(--sp-8)}
  .card.mission-card{padding:var(--sp-4)}
  .card.trust-card{padding:var(--sp-5)}
  .train-stage{padding:var(--sp-5) var(--sp-4)}
  .gen-out{padding:var(--sp-4);min-height:240px}
  .ob-card{padding:var(--sp-6) var(--sp-5)}
  .lv-hero .big,.photo-hero .big{font-size:var(--fz-num-lg)}
  .lv-hero h2{font-size:var(--fz-h2s)}
  .cin-stage{padding:var(--sp-4) var(--sp-3) var(--sp-8);min-height:340px}
  .cin-line b{font-size:var(--fz-h4)}
  .cin-line.cur b{font-size:var(--fz-h3)}
  .stat{padding:var(--sp-4) var(--sp-3)}
  .statgrid{gap:var(--sp-3)}
  .grid{gap:var(--sp-3)}
  .sec{margin-top:var(--sp-10)}
  .foot-inner{padding:var(--sp-6) var(--sp-4)}
}
/* 아주 좁은 폰(≤420px) — 버튼이 가로로 붙어 글자가 잘리던 구간 */
@media (max-width:420px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .cta,.hero-actions .hero-secondary{width:100%}
  .cta{padding:var(--sp-4) var(--sp-5);font-size:var(--fz-h4)}
  .btn{padding:var(--sp-3) var(--sp-4)}
  .btnrow{gap:var(--sp-2)}
  .btnrow>.btn{flex:1 1 140px;min-width:0}
  .daychips{gap:var(--sp-1)}
  .learn-head h2{font-size:var(--fz-h3)}
  .plan-price{font-size:var(--fz-h1s)}
  .plan-card.best .plan-price{font-size:var(--fz-num)}
  .trust-nums{grid-template-columns:1fr 1fr}
  .hero-stats{gap:var(--sp-4)}
  /* 상단 진행률 알약이 레벨탭과 겹쳐 두 줄이 되던 지점 */
  #topLevelStrip{gap:var(--sp-2)}
  .tls-prog{padding:var(--sp-1) var(--sp-2)}
  .tls-prog .tls-bar{width:36px}
}
/* 동작 줄이기 — 방금 추가한 마이크로 인터랙션도 함께 끈다(WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  .card.hov:hover,.mode:hover,.cta:hover,.btn.pri:hover,.btn.sec:hover,.stat:hover,
  .ck:hover,.daychip:hover,.logo:hover .mark,.photo-card:hover .pc-emoji,.lvcard:hover .bar{transform:none}
  .ob-card{animation:none}
  /* 프리미엄 카드의 회전 링·광택도 끈다(정지 상태에서도 위계는 그대로 유지된다) */
  .plan-card.best::before{animation:none}
  .plan-card.best::after{animation:none;opacity:0}
}