/* MLS tokens.css — 3층 토큰 · 규격 락
   ① primitive → ② semantic → ③ component
   화면 CSS 는 ②·③ 만 참조한다. ① 을 직접 쓰면 다음 라운드에 또 하드코딩이 생긴다.
   근거: docs/pipeline/03-codemap.md §2 · docs/project-design-brief.md */

/* ─────────────────────────── ① primitive ─────────────────────────── */
:root{
  /* 학생앱 판타지 */
  --navy-900:#141033; --navy-800:#1B1640; --navy-700:#231C4A; --navy-600:#2E2560;
  --violet-500:#8A5CF0; --violet-400:#A57DFF; --violet-200:#C9B4FF;
  --gold-500:#F2C75C;  --gold-400:#FFD887;  --gold-700:#C79A34;
  --green-500:#2E9E6B; --amber-500:#F0A81E; --red-500:#E05A5A;
  --white:#FFFFFF; --dim-300:#A79FC8; --dim-500:#6B6288;

  /* 운영앱 라이트 */
  --l-bg:#F5F6F8; --l-surface:#FFFFFF; --l-line:#E8E9EE;
  --l-primary:#7A5AE5; --l-track:#EEEFF2;
  --l-ink:#1B1A22; --l-ink-2:#6B6580;

  /* 공용 원시 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-8:8px; --r-12:12px; --r-16:16px; --r-20:20px; --r-pill:999px;
  --fs-24:24px; --fs-20:20px; --fs-17:17px; --fs-15:15px; --fs-13:13px; --fs-12:12px;
  --t-press:120ms; --t-state:320ms; --t-nav:220ms; --t-celebrate:420ms; --t-levelup:1200ms;
  --ease-out:cubic-bezier(.2,.9,.3,1);
  --ease-spring:cubic-bezier(.2,1.3,.4,1);
}

/* ─────────────────────────── ② semantic ─────────────────────────── */
/* 학생앱 = 다크 판타지 (기본) */
:root,[data-theme="student"]{
  --bg-deep:var(--navy-900);
  --bg-surface:var(--navy-700);
  --bg-glass:rgba(255,255,255,.08);      /* ⚠ opacity 로 글자를 죽이지 말 것 — 배경만 투명 */
  --bg-glass-2:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.12);
  --accent:var(--violet-500);
  --accent-soft:rgba(138,92,240,.28);
  --highlight:var(--gold-500);
  --success:var(--green-500);
  --warn:var(--amber-500);
  --danger:var(--red-500);
  --text:var(--white);
  --text-dim:var(--dim-300);
  --locked:var(--dim-500);
  --track:rgba(255,255,255,.12);
}
/* 선생님·학부모앱 = 라이트 운영 */
[data-theme="staff"]{
  --bg-deep:var(--l-bg);
  --bg-surface:var(--l-surface);
  --bg-glass:var(--l-surface);
  --bg-glass-2:#F1F0F7;
  --line:var(--l-line);
  --accent:var(--l-primary);
  --accent-soft:#EDE8FD;
  --highlight:var(--l-primary);
  --success:var(--green-500);
  --warn:var(--amber-500);
  --danger:var(--red-500);
  --text:var(--l-ink);
  --text-dim:var(--l-ink-2);        /* 구 --ink-3(#9A9AAC)는 대비 2.77:1 AA 미달 → 폐기 */
  --locked:#B7B4C4;
  --track:var(--l-track);
}

/* ─────────────────────────── ③ component (규격 락) ─────────────────────────── */
:root{
  --tap-min:44px;        /* 모든 조작 요소가 이 변수를 참조. 숫자 직접 사용 금지 */
  --frame-min:320px;     /* 판정 기준폭 = 폴드2 커버 */
  --frame-base:360px;    /* 목업 프레임 = 갤럭시 S26 */
  --btn-h:40px;          /* 보조 버튼 */
  --btn-h-lg:48px;       /* 주요/전폭 CTA */
  --row-h:56px;          /* 목록 행 */
  --bar-h:8px;           /* 진행바 */
  --gut:16px;            /* 화면 좌우 여백 */
  --tabbar-h:64px;
}

/* ─────────────────────────── 리셋·기본 ─────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
[hidden]{display:none !important}

html,body{height:100%}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Malgun Gothic",sans-serif;
  background:var(--bg-deep); color:var(--text);
  font-size:var(--fs-15); line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
/* ⚠ height:auto 를 빼면 <img> 의 height 속성(원본 픽셀)이 그대로 적용돼 세로로 늘어난다.
   원본 치수 속성은 레이아웃 점프 방지용이라 반드시 넣는데, 그 짝이 이 한 줄이다. */
img{max-width:100%;height:auto;display:block}

/* 조작 요소는 예외 없이 44px */
button,a[role="button"],.tap{min-height:var(--tap-min)}
.tap-icon{min-width:var(--tap-min);min-height:var(--tap-min);display:inline-flex;align-items:center;justify-content:center}

/* 눌림 반응 — 폰에는 hover 가 없다. 이게 유일한 확인 신호다 */
.press{transition:transform var(--t-press) var(--ease-out),background-color var(--t-press) var(--ease-out)}
.press:active{transform:scale(.97)}
.press-lg:active{transform:scale(.985)}
.press-row:active{background:var(--bg-glass-2)}

:focus-visible{outline:2px solid var(--highlight);outline-offset:2px;border-radius:var(--r-8)}

/* 진행바 — 스케일은 JS barScale() 하나만 쓴다 */
.bar{height:var(--bar-h);border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:inherit;background:var(--accent);
  transition:width var(--t-state) var(--ease-out)}

/* 완료 체크 정본 — 화면 CSS 가 다시 정의하지 않는다 */
.chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none}
.chk.on{background:var(--success);border-color:var(--success);
  display:grid;place-items:center}
.chk.on::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important}
}

/* ── 앱 좌우 여백 (설정에서 원장님이 정한다) ───────────────────────────────
   ⚠⚠ 이 규칙은 원래 deck.css 에만 있었다. 그런데 js/app-pad.js 를 싣는 화면 54개 중
      28개(아이 화면 a01~a14 · 게임 g1/g5 · 온보딩 c02/c03 …)는 deck.css 를 안 싣는다
      — 스크립트가 --app-pad 를 세팅해도 **받아 쓰는 규칙이 없어 설정이 통째로 무효**였다
      (재민 2026-09-01 «앱폭 줄면 연동이 안되네»). tokens.css 는 전 화면이 싣는다.
   ⚠⚠ **deck.css 에도 똑같은 규칙이 있다. 한쪽으로 «모으지» 마라** — 두 파일은 서로 안 섞는
      별개 집안이고(선생님 26화면 vs 아이 화면) 공유 파일이 없다. 모으면 반대편이 통째로 무효다.
   ⚠ 화면에 붙어 있는 띠(position:fixed)는 여기서 안 밀린다 — js/app-pad.js 가 따로 좁힌다. */
:root{ --app-pad:0px }
html.has-app-pad body{ padding-left:var(--app-pad); padding-right:var(--app-pad);
  box-sizing:border-box }