/* ══════════════════════════════════════════════════════════════
   tokens.css — 색 · 간격 · 반경 · 그림자
   값의 출처는 SPEC.md 「디자인 토큰」. 여기 없는 색을 새로 만들지 말 것.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 인터랙션 — 진행 · 정답 · 선택에만 쓴다. 장식 금지 */
  /* 인터랙션 색 = 골드. 면을 채우지 않고 검은 바탕 위의 글자와 테두리로만 쓴다.
     ※ CLAUDE.md 확정값은 #0066FF 였으나 사용자 요청으로 변경.
        여러 색을 늘리지 않고 여전히 "하나"다 — 진행·정답·선택에만. */
  --act:#c9a13f;          /* 글자·아이콘·포커스 링 — 노란기를 뺀 진한 금 */
  --act-lit:#e6c56d;      /* 빛이 지나가는 밝은 지점 (하이라이트) */
  --act-sink:#8f6a1e;     /* 그라디언트 아래쪽 — 그늘진 금 */
  --act-dim:#6b4f16;      /* 테두리의 가장 어두운 끝 */
  --btn-bg:#141210;       /* 버튼 바탕(거의 검정) */
  --act-glow:rgba(201,161,63,.24);    /* 테두리 바깥으로 새는 빛 */
  --act-rgb:201,161,63;               /* 빛 번짐에 알파를 섞어 쓰기 위한 성분값 */
  --ok:#2ecc71;
  --ok-a18:rgba(46,204,113,.18);
  /* 오답 표시 전용. 정보를 담은 자리라 빨강을 쓰되, 팔레트에 맞춰 채도를 낮췄다.
     ※ 삭제·액션 버튼에는 쓰지 않는다 */
  --no:#d05a45;
  --no-a18:rgba(208,90,69,.18);

  /* 종이 · 잉크 */
  --paper:#f7f3e9;
  --card:#ffffff;          /* 낱말·문장 카드 바탕 */
  --ink:#1b1c21;
  --ink-mute:#5c5e68;

  /* 본문 패널 폭 — 배경을 얼마나 가릴지가 여기서 결정된다.
     가로: 우측 열의 폭. 세로: 가운데 놓이는 유리판의 최대 폭.
     CLAUDE.md의 확정값은 46%였으나 사용자 요청으로 25%(화면의 약 1/4)까지 좁혔다.
     너무 좁히면 한 줄에 담기는 글자가 줄어 18px 바닥에 먼저 닿는다.
     바꾼 뒤에는 ?dev=1&audit=1 로 16쪽 조판을 다시 확인할 것. */
  /* 위 본문 상자와 아래 버튼 바의 폭.
     ※ vw(화면 폭)가 아니라 vh(화면 높이)를 쓴다.
        본문 크기도 화면 높이에서 나오므로(js/fit.js), 폭이 높이와 함께 커져야
        "한 줄에 담기는 글자 수"가 해상도와 무관하게 일정해진다.
        폭만 고정하면 큰 화면에서 글자만 커져 줄 수가 늘고, 오히려 내용이 덜 보인다. */
  --read-w:clamp(320px, 46vh, 520px);
  /* 컨트롤 바가 한 줄로 들어가는 데 필요한 폭. js/app.js 가 재서 넣는다.
     위 본문 상자와 아래 바가 이 값을 함께 써서 좌우 끝을 맞춘다.
     즉 실제 폭은 max(--read-w, --bar-w) 이고, 바의 내용이 바닥을 만든다. */
  --bar-w:0px;
  --read-max:560px;

  /* 여백 · 반경 */
  --pad:18px;
  --r-panel:12px;
  --r-modal:20px;
  --r-opt:11px;
  --r-pill:99px;

  /* 그림자 */
  --sh-modal:0 18px 50px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.16);
  --sh-sim:0 0 0 8px #2a2c33, 0 30px 80px rgba(0,0,0,.6);

  /* 모션 */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fold:.45s;
  --t-quiz:.42s;
  --t-modal:.28s;

  /* 본문 크기는 CSS가 정하지 않는다. js/fit.js 가 본문 상자 폭에서 역산해
     "한 줄 약 36자"가 되도록 맞춘다(18~34px). 해상도가 커지면 함께 커지고,
     같은 해상도에서는 모든 쪽이 같은 크기다. 여기 값은 참고용 하한이다. */
  --fs-floor:18px;
}

/* ── 본문 서체 ──
   Andika 400이 확정값. lexend/atkinson은 검증 패널 비교용으로만 남긴다. */
[data-f="andika"]  {--read:'Andika SIL','Andika',sans-serif;    --tk:.005em; --lh:1.52}
[data-f="atkinson"]{--read:'Atkinson Hyperlegible',sans-serif;  --tk:0;      --lh:1.60}
[data-f="lexend"]  {--read:'Lexend',sans-serif;                 --tk:0;      --lh:1.58}
[data-w="400"]{--wt:400}
[data-w="700"]{--wt:700}

/* ── 패널 명암 ──
   기본은 dark(반투명 유리). light는 검증 패널에서 비교용으로 남겨 둔다.
   Andika는 획이 가늘어 어두운 바탕에서 흐려지므로, dark에서는 본문 굵기를
   400 → 500(Andika Medium)으로 올려 받는다. 아래 --wt 규칙 참조. */
[data-panel="light"]{
  --pnl:var(--paper);
  --pln:rgba(27,28,33,.12);
  --txt:var(--ink);
  --soft:rgba(27,28,33,.05);
  --softer:rgba(27,28,33,.15);
  --dimA:.5;
  --glass:none;
}
[data-panel="dark"]{
  --pnl:rgba(16,18,24,.56);
  --pln:rgba(255,255,255,.13);
  --txt:rgba(255,255,255,.95);
  --soft:rgba(255,255,255,.07);
  --softer:rgba(255,255,255,.18);
  --dimA:.42;
  --glass:blur(22px) saturate(120%);
}

/* 어두운 유리 위에서는 Andika를 한 단 굵게 (Medium 500) */
[data-panel="dark"][data-w="400"]{--wt:500}

/* ── 배경 위 UI(topbar·게이트) 전용 ── */
:root{
  --on-bg:rgba(255,255,255,.62);
  --on-bg-strong:rgba(255,255,255,.9);
}