/* =====================================================================
   1타강사클래스 · 공통 디자인 토큰  (shell/tokens.css)
   ---------------------------------------------------------------------
   방침 (Phase 2-b 확정):
     · 값(Value)의 정본 = 문법 엔진에서 실사용 검증된 웜 듀얼 팔레트 (r3)
     · 이름(Naming)의 정본 = 셸 semantic 규칙 (--*-pos / --*-neg / --*-surface …)
     · 학생 스테이지 = --s-*  (다크 시네마)
     · 교사 콘솔/셸  = --t-*  (밝은 종이)
   금지: 좌측 컬러 띠 · 퍼플 그라디언트 · 글래스/네온 · 크림+테라코타+세리프
   ===================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root{
  /* ---- 서체 ---- */
  --font: "Pretendard","Pretendard Variable",system-ui,sans-serif;

  /* ---- 학생 스테이지 (다크 시네마) ---- */
  --s-bg:#1a1a1e;
  --s-surface:#242428;
  --s-highlight:#3d3520;
  --s-text:#e8e6e1;
  --s-text-dim:#8a8880;
  --s-text-ko:#b0aea5;
  --s-accent:#c9956b;          /* 웜 탄  */
  --s-accent-strong:#e8b88a;   /* 골드   */
  --s-pos:#5a9a6a;
  --s-neg:#c45a5a;
  --s-pos-wash:#2d4a2f;
  --s-neg-wash:#4a2d2d;
  --s-plum:#9B6BAE;            /* 어휘·계열 강조 (다크) */
  --s-plum-wash:#3D2D4A;
  --s-plum-rgb:155,107,174;
  --s-accent-rgb:201,149,107;
  --s-accent-strong-rgb:232,184,138;

  /* ---- 교사 콘솔 / 셸 (밝은 종이) ---- */
  --t-bg:#f5f4f0;
  --t-surface:#ffffff;
  --t-surface-2:#faf8f2;       /* 옅은 파생 배경(런처 등) */
  --t-ink:#1a1a1e;
  --t-ink-dim:#777777;
  --t-ink-faint:#a09d94;
  --t-line:#e5e2d9;            /* 옅은 라인(구분선) */
  --t-line-strong:#d4d2cc;     /* 진한 라인(테두리) */
  --t-accent:#b07840;          /* 웜 브라운 */
  --t-accent-strong:#d49a5a;
  --t-accent-wash:#f2e5d6;     /* 브라운 옅은 톤(런처 카드 아이콘 배경 등) */
  --t-pos:#3a8a4a;
  --t-pos-wash:#e4eee5;
  --t-neg:#c04040;
  --t-neg-wash:#f6e5df;
  --t-plum:#7A4E8C;            /* 어휘·계열 강조 (라이트) */
  --t-plum-wash:#F0E5F5;
  --t-plum-rgb:122,78,140;
  --t-hover:#fdf6ee;           /* hover 상태 */
  --t-done:#f0f7f0;            /* 완료 상태 */
  --t-accent-rgb:176,120,64;
  --t-accent-strong-rgb:212,154,90;
  --t-neg-rgb:192,64,64;

  /* ---- 다이어그램/노드 팔레트 (마인드맵·구조도 공용, r3 확정) ---- */
  --d-sage:#5A7A5A;   --d-sage-wash:#E4EBE1;
  --d-terra:#8B4A3F;  --d-terra-wash:#EFE0DA;
  --d-amber:#B5771F;  --d-amber-wash:#FBEFD9;
  --d-paper:#F4F1EA;  --d-stroke:0.8;

  /* ---- 간격·모서리·그림자 (스케일) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px;
  --r-1:8px; --r-2:12px; --r-3:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(26,26,30,.04), 0 10px 30px rgba(26,26,30,.06);
  --shadow-stage:0 20px 60px rgba(0,0,0,.55);

  /* ---- 셸이 실제로 읽는 활성 토큰 (역할에 따라 아래 body 규칙이 덮어씀) ---- */
  --bg:var(--t-bg);
  --surface:var(--t-surface);
  --ink:var(--t-ink);
  --ink-dim:var(--t-ink-dim);
  --line:var(--t-line);
  --accent:var(--t-accent);
  --accent-strong:var(--t-accent-strong);
}

/* 학생 화면(#screen)일 때: 다크 토큰으로 전환 */
body.role-screen{
  --bg:var(--s-bg);
  --surface:var(--s-surface);
  --ink:var(--s-text);
  --ink-dim:var(--s-text-dim);
  --line:#39352F;
  --accent:var(--s-accent);
  --accent-strong:var(--s-accent-strong);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); line-height:1.6;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 브랜드 마크: "1타"만 브라운 강조 (학생 화면에선 탄) · 링크로 써도 밑줄 없음, 줄바꿈 금지 */
.brand{font-weight:800; letter-spacing:-.02em; font-size:1.02rem; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand .one{color:var(--accent)}

/* 학생 화면 전용 미니바 — 학원명(좌) + 글씨 확대(우) */
.s-topbar{position:fixed;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:60;pointer-events:none}
.s-academy{font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--s-accent);opacity:.92}
.s-zoom{display:flex;align-items:center;gap:6px;background:var(--s-surface);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 6px;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.s-zoom button{width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--s-text);font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer}
.s-zoom button:hover{background:rgba(255,255,255,.10)}
.s-zoom .pct{min-width:54px;text-align:center;font-weight:700;font-size:.86rem;color:var(--s-text-dim);font-variant-numeric:tabular-nums}