/* konglish-tokens.css — 2026-08-30
   콩글리시 완전정복 6개 HTML 페이지(escape/my/guide/settings/level-test/stats)가 공유하는
   디자인 토큰 파일. 그동안 페이지마다 <style> 안에 :root를 따로 복붙해서 값 자체는 같았지만
   (색상은 이미 100% 일치 확인됨) 파일마다 변수 이름이 3가지 방언으로 갈라져 있었음
   (--navy vs --color-text vs --ink 등). 이 파일 하나로 통일하고, 각 페이지의 로컬 :root에는
   그 페이지에서만 쓰던 이름을 이 파일의 진짜 값으로 위임하는 별칭(alias) 한 줄만 남긴다
   (기존 클래스 수백 곳을 일일이 바꾸는 대신 별칭으로 안전하게 흡수 — 리스크 관리).

   값은 escape.html(가장 크고 최근까지 관리된 파일)의 :root를 그대로 기준으로 삼았다.
   나중에 브랜드 색을 바꿀 땐 이 파일 하나만 고치면 6개 페이지 전부에 반영된다. */
:root {
  /* Brand */
  --brand-yellow:      oklch(89% 0.18 95);
  --brand-yellow-soft: oklch(96% 0.08 95);
  --brand-yellow-deep: oklch(75% 0.17 80);
  /* 2026-09-13(4단계, PMO 최종 결정 — 1단계 승인 토큰문서 값 기준 B안) — 이 3개가 원래
     네이비(hue 255)였던 원본 토큰. 그린 리브랜딩의 실제 스위치는 여기 하나뿐이고, 이
     값을 참조하는 모든 곳(다른 6개 페이지의 로컬 별칭 포함)이 이 커밋 하나로 같이
     바뀐다 — "--navy 별칭만 바꾸면 my/stats/notice 등 원본을 직접 쓰는 파일이 누락된다"
     (QA 발견)는 것도 이 원본 자체를 바꿔서 근본 해결. 명도(L) 구조(22/28/34%)는 유지,
     색상각(hue)만 255→157로 교체 — 앱값(45/51/40%) 그대로 가져오는 A안은 이 어두운
     히어로 배경 위 흰 텍스트 대비가 무너져 기각(1단계 승인 시 이미 검토), 그 결정과
     같은 방향으로 24/30/36%(+6%p 간격 유지, 22→24%만 승인 문서값에 맞춰 보정). */
  --brand-navy:        oklch(24% 0.06 157);
  --brand-navy-2:      oklch(30% 0.07 157);
  --brand-navy-3:      oklch(36% 0.07 157);
  /* 1단계 토큰문서(design_tokens_v2.html)가 쓰던 이름 --brand/--accent를 실제 토큰으로
     신설 — 문서 안에서만 존재하던 이름이 실제 코드에도 있게 맞춘다. */
  --brand:  var(--brand-navy);
  --accent: var(--brand-yellow);
  /* 2026-09-12(웹 그린 리브랜딩 2단계, UX/UI팀 감사 결과 반영) — 본문 텍스트 전용 토큰.
     그동안 --navy(=--brand-navy 별칭)를 배경 강조색과 본문 글자색에 같이 써왔는데,
     3단계에서 --brand-navy 자체가 그린 계열로 바뀌면 본문 글씨까지 초록으로 변해버린다.
     그래서 본문/라벨 텍스트(ink) 용도는 이 독립 토큰으로 분리 — --brand-navy를 참조하지
     않고 현재 navy 값을 그대로 고정해서, 3단계 이후에도 검정에 가까운 색을 유지한다.
     7파일 전수감사(navy 계열 231건) 중 ink로 분류된 126건을 이 토큰으로 이관. */
  --ink:               oklch(22% 0.04 255);

  /* Neutral */
  --n0:   oklch(100% 0 0);
  --n50:  oklch(98.4% 0.002 250);
  --n100: oklch(96.5% 0.004 250);
  --n200: oklch(92.5% 0.006 250);
  --n300: oklch(86%   0.008 250);
  --n400: oklch(72%   0.01  250);
  --n500: oklch(58%   0.012 250);
  --n600: oklch(46%   0.014 250);
  --n700: oklch(36%   0.016 250);
  --n800: oklch(26%   0.018 250);
  --n900: oklch(17%   0.02  250);

  /* Semantic */
  --color-bg:        var(--n0);
  --color-surface:   var(--n50);
  --color-border:    var(--n200);
  --color-text:      var(--n900);
  --color-text-mute: var(--n600);
  --color-text-soft: var(--n500);

  /* Category (OKLCH — L·C 통일) */
  --cat-work:   oklch(68% 0.14 250);
  --cat-food:   oklch(72% 0.16 45);
  --cat-travel: oklch(70% 0.13 200);
  --cat-shop:   oklch(68% 0.16 305);
  --cat-talk:   oklch(72% 0.13 175);
  --cat-edu:    oklch(76% 0.15 75);
  --cat-health: oklch(68% 0.18 25);
  --cat-sport:  oklch(74% 0.15 145);
  --cat-love:   oklch(70% 0.18 0);
  --cat-life:   oklch(62% 0.05 60);
  /* 2026-09-02: 신규 카테고리 2개(사장님 지시) — 기존 10개와 같은 L·C 톤으로,
     비어있는 hue 구간에 배치해서 시각적으로 겹치지 않게 함. */
  --cat-finance: oklch(70% 0.15 230); /* 은행/금융 — travel(200)과 work(250) 사이 인디고 */
  --cat-it:      oklch(70% 0.16 280); /* IT/디지털 생활 — work(250)과 shop(305) 사이 보라 */

  /* Typography */
  --font-display: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', -apple-system, sans-serif;
  --font-sans:    'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  /* 간격(spacing) 스케일 — 4px 배수. 1~3px(배지 촘촘한 패딩·미세정렬)과 40px 초과
     (구조적 여백)는 스케일 밖 — 그대로 raw px를 쓴다. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;

  /* Shadow */
  --shadow-sm:     0 2px 6px oklch(20% 0.02 250 / 0.08);
  --shadow-md:     0 8px 20px oklch(20% 0.02 250 / 0.10);
  --shadow-yellow: 0 8px 24px oklch(89% 0.18 95 / 0.35);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur:         220ms;

  /* 기존(escape.html) 짧은 별칭 — 여러 파일이 이미 이 이름들로 쓰고 있어 그대로 유지 */
  --yellow:       var(--brand-yellow);
  --yellow-light: var(--brand-yellow-soft);
  --navy:         var(--brand-navy);
  --navy-mid:     var(--brand-navy-2);
  --navy-light:   var(--brand-navy-3);
  --white:        var(--n0);
  --gray:         var(--n500);
  --red:          oklch(64% 0.20 27);
  --green:        oklch(70% 0.14 155);
  --radius:       var(--radius-md);
}

/* 2026-09-14(사장님 지시, 기술리뷰 대응) — 다크 모드. 처음엔 OS 설정(prefers-color-scheme)에
   자동 반응하게 넣었다가, 실제 스크린샷 검증에서 실제 문제를 발견해 "수동 토글(옵트인)만"으로
   범위를 좁혔다 — 아래 실측 참고.
   ⚠️ 실측 결과(2026-09-14): --ink만 뒤집으면 하드코딩 `#fff` 카드(escape.html에 74회,
   guide.html의 .gstep 카드 등)의 배경은 그대로 흰색인데 그 위에 놓인 텍스트(--ink 사용)만
   밝은 색으로 바뀌어 **흰 배경에 밝은 회색 글자**가 되는 저대비 사고가 실제로 재현됨
   (guide.html PART1 카드 제목에서 스크린샷으로 확인). 이 카드 패턴이 사이트 전반에
   널리 쓰여서, OS가 다크모드인 방문자 전원에게 자동 적용하면 이 저대비 사고가 광범위하게
   퍼진다 — 그래서 자동(prefers-color-scheme) 활성화는 넣지 않고, 아래 `[data-theme="dark"]`
   수동 토글(사용자가 직접 눌러야만 켜짐, 노출 범위가 훨씬 좁음)만 남긴다. 하드코딩 카드
   배경을 전부 토큰화한 뒤에 자동 활성화를 다시 켜는 걸 후속 작업으로 남긴다. */
:root[data-theme="dark"] {
  --n0:   oklch(19% 0.014 255); --n50:  oklch(22% 0.015 255); --n100: oklch(25% 0.017 255);
  --n200: oklch(31% 0.019 255); --n300: oklch(39% 0.019 255); --n400: oklch(51% 0.018 255);
  --n500: oklch(63% 0.015 255); --n600: oklch(73% 0.012 255); --n700: oklch(83% 0.009 255);
  --n800: oklch(91% 0.006 255); --n900: oklch(96% 0.004 255);
  --ink: oklch(94% 0.006 255);
}