/* ============================================================================
   GenAI AEO 디자인 토큰 (정본. 제품에 체계는 하나뿐이고 색만 두 벌이다).

   이 파일이 간격·모서리·글자 크기와 굵기·그림자·모션·중첩 순서·화면 폭 기준,
   그리고 뜻을 가진 색(표면·테두리·글자·강조·성공·주의·위험·안내·점수 네 구간)을
   모두 가진다. **다른 CSS 파일은 16진수 색도 모서리 px 도 적지 않는다.**
   없으면 여기에 먼저 더한다(tests/test_design_tokens_d5.py 가 확인한다).

   색은 두 벌이고 나머지는 한 벌이다.
     :root                        어두운 색(공개·회원 화면). 브랜드·랜딩과 같은 바탕.
     body.admin, [data-theme=light]  밝은 색(관리자 화면). 빽빽한 표를 오래 읽는 자리.
   두 벌은 **같은 이름에 다른 값을 넣을 뿐**이다. 모서리·간격·글자 크기·단추 모양은
   두 화면이 같은 값을 쓴다. 그래서 부품 하나가 두 화면에서 같은 코드로 동작한다.

   화면 폭 기준(S·M·L·XL)은 관리자 화면 꼬리의 폭 표시와 같은 이름을 쓴다.
     S   ~ 767px      휴대폰
     M   768 ~ 1279   태블릿·좁은 노트북
     L   1280 ~ 1679  데스크톱
     XL  1680px ~     넓은 모니터
   CSS 는 미디어 쿼리에 이 숫자를 직접 적는다(미디어 쿼리는 var() 를 읽지 못한다).
   숫자를 바꿀 때는 이 파일의 --bp-* 값과 각 CSS 의 @media, admin.css 의 폭 표시
   규칙을 함께 고친다.
   ============================================================================ */

:root {
  /* ── 화면 폭 기준(문서용. 미디어 쿼리에는 같은 숫자를 직접 적는다) ────────── */
  --bp-m: 768px;
  --bp-l: 1280px;
  --bp-xl: 1680px;

  /* ══ 1. 색 원본 ramp ═══════════════════════════════════════════════════
     여기부터는 "원본"이다. 화면 CSS 는 원본이 아니라 아래쪽 의미 이름을 읽는다. */

  /* 중립(밝은 바탕 계열) */
  --n-0: #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f6f7f9;
  --n-100: #eef0f3;
  --n-200: #e3e6ea;
  --n-300: #cbd1d9;
  --n-400: #98a2b3;
  --n-500: #667085;
  --n-600: #475467;
  --n-700: #344054;
  --n-800: #1b1f24;
  --n-900: #12203e;
  --n-950: #0b1020;

  /* 중립(어두운 바탕 계열). 어두운 셸의 면과 글자는 이 ramp 에서 고른다. */
  --d-950: #070b15;
  --d-900: #090e1a;
  --d-850: #0a0f1c;
  --d-800: #0b1020;
  --d-700: #0d1526;
  --d-600: #111a2c;
  --d-500: #141c2e;
  --d-400: #171e2e;
  --d-300: #313b52;
  --d-200: #5e6b82;
  --d-150: #7b879b;
  --d-100: #8290a6;
  --d-80: #9aa7bd;
  --d-60: #b9c3d4;
  --d-50: #cbd5e1;
  --d-40: #dbe3ee;
  --d-30: #e2e8f0;
  --d-20: #e8edf6;
  --d-10: #f5f7fc;

  /* 브랜드(로고 그라데이션 안에서 고른다) */
  --brand-50: #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #7c83ff;
  --brand-450: #a78bfa;
  --brand-500: #4f6ef2;
  --brand-600: #1a56db;
  --brand-700: #1e40af;
  --brand-ink: #12203e;
  --brand-tint-1: #6366f1;
  --brand-tint-2: #8b5cf6;
  /* 브랜드 글리프 그러데이션(랜딩 SVG <linearGradient id="vic-grad">). 화면 템플릿에 색을
     적지 않게 여기에 둔다. */
  --vic-grad-1: #8b93ff;
  --vic-grad-2: #a06bd8;
  --vic-grad-3: #e0669e;
  --brand-lilac: #c4b5fd;
  --brand-lilac-2: #ddd6fe;
  --brand-grad: linear-gradient(135deg, #6366f1, #8b5cf6);

  /* 의미 색. 밝은 바탕 기준으로 글자 대비 AA 이상이 되게 -ink 를 따로 둔다. */
  --success-soft: #dcfce7;
  --success-line: #a7e8bf;
  --success-ink: #166534;
  --success: #16a34a;
  --success-deep: #065f46;
  --warning-soft: #fef3c7;
  --warning-line: #fde68a;
  --warning-ink: #92400e;
  --warning: #d97706;
  --warning-deep: #b54708;
  --warning-deeper: #93370d;
  --danger-soft: #fee2e2;
  --danger-line: #fecaca;
  --danger-ink: #991b1b;
  --danger: #dc2626;
  --danger-deep: #b91c1c;
  --danger-deeper: #b42318;
  --info-soft: #eef2ff;
  --info-line: #c7d2fe;
  --info-ink: #3730a3;
  --info: #4f6ef2;
  --neutral-soft: #eef0f3;
  --neutral-line: #e3e6ea;
  --neutral-ink: #344054;
  /* 어두운 바탕 위에서 같은 뜻을 나르는 밝은 글자색(어두운 면 위 대비 8:1 이상). */
  --success-on-dark: #86efac;
  --warning-on-dark: #fcd34d;
  --danger-on-dark: #fecdd3;
  --info-on-dark: #bdf3fb;
  --accent-on-dark: #c7cbff;
  --mint-on-dark: #6ee7b7;
  --sky-on-dark: #8ab4ff;
  --rose-on-dark: #fbcfe8;

  /* 관리자 모드 표시(주황). #fbbf24 는 #0b1020 위 약 11:1, 띠(#f59e0b) 위 #1c1402 글자는 약 9:1. */
  --admin: #fbbf24;
  --admin-strong: #f59e0b;
  --admin-ink: #1c1402;
  --admin-hover: #fde68a;
  --admin-soft: rgba(251, 191, 36, 0.14);
  --admin-line: rgba(251, 191, 36, 0.45);

  /* ── 점수 구간 색(정본) ──────────────────────────────────────────────────
     점수는 어느 화면에서나 같은 색으로 읽힌다: 낮은 구간이 위험(빨강), 높은 구간이
     성공(초록)이다. 구간 경계는 config/criteria.yaml 의 grades 한 곳에서 정하고
     (0-39 개선 필요 / 40-59 보통 / 60-79 양호 / 80-100 우수), 색 이름은 그 key 를 쓴다.
     아래 값은 어두운 셸 기준이고, 밝은 관리자 바탕은 body.admin 에서 덮는다.
     새 화면에서 점수 색을 직접 적지 않는다 — 이 네 개만 쓴다. */
  --band-poor: #f87171;       /* 0-39   위험 */
  --band-fair: #fbbf24;       /* 40-59  주의 */
  --band-good: #a3e635;       /* 60-79  조금 더 */
  --band-excellent: #4ade80;  /* 80-100 성공 */

  /* 그래프 계열(순서대로 쓴다. 색만으로 구분하지 않게 라벨·숫자를 함께 적는다). */
  --chart-1: #1a56db;
  --chart-2: #0e8fa3;
  --chart-3: #7c3aed;
  --chart-4: #be185d;
  --chart-5: #b45309;
  --chart-6: #15803d;
  --chart-grid: #e3e6ea;
  --chart-ink: #475467;

  /* 대기열 화면의 작업 상태(색만으로 구분하지 않게 숫자·이름을 함께 쓴다). */
  --queue-queued: #e0a100;
  --queue-running: #2f6fe4;
  --queue-running-ink: #1d4ed8;
  --queue-running-soft: #e8f0fe;
  --queue-failed: #e0544a;
  --queue-failed-soft: #fdecea;
  --queue-failed-line: #f4b4ae;
  --queue-failed-bg: #fff8f7;
  --queue-dead: #9b3fb5;
  --queue-late-soft: #fff4e0;
  --queue-p95: #b9cff7;

  /* 코드 상자(밝은 화면·어두운 화면 모두 어두운 코드 바탕을 쓴다). */
  --code-bg: #0a0f1c;
  --code-bg-admin: #0f172a;
  --code-line: #1e293b;
  --code-ink: #d7e2ff;
  --code-ink-admin: #e2e8f0;
  --tk-punct: #8792a8;
  --tk-tag: #8fb2ff;
  --tk-attr: #e5a8f2;
  --tk-str: #8fe0c6;
  --tk-key: #b6bcff;
  --tk-comment: #7a869b;
  --tk-diff-add: #bbf7d0;
  --tk-diff-del: #fecaca;
  --tk-diff-hunk: #93c5fd;
  --tk-diff-head: #94a3b8;

  /* 구글 로그인 단추. 브랜드 지침이 정한 값이라 바꾸지 않는다. */
  --google-bg: #131314;
  --google-bg-hover: #1e1f20;
  --google-line: #8e918f;
  --google-line-hover: #c4c7c5;
  --google-ink: #e3e3e3;

  /* 종이(인쇄·PDF). 화면 색을 그대로 쓰면 잉크를 먹고 읽히지 않는다. */
  --print-bg: #ffffff;
  --print-ink: #111111;
  --print-ink-2: #444444;
  --print-ink-3: #555555;
  --print-line: #d4d4d8;
  --print-line-2: #e4e4e7;
  --print-line-3: #cccccc;
  --print-surface: #fafafa;
  --print-surface-2: #f4f4f5;
  --print-accent: #3730a3;
  --print-accent-soft: #eef2ff;
  --print-muted-line: #a1a1aa;
  --print-band-excellent: #16a34a;
  --print-band-good: #65a30d;
  --print-band-fair: #b45309;
  --print-band-poor: #b91c1c;
  --print-high-soft: #fde7f1;
  --print-high-ink: #9d174d;
  --print-high-line: #f5b5d2;
  --print-mid-soft: #f1e8ff;
  --print-mid-ink: #5b21b6;
  --print-mid-line: #d4bdfa;
  --print-low-soft: #f1f5f9;
  --print-low-ink: #334155;
  --print-low-line: #cbd5e1;
  --print-teal-soft: #ecfeff;
  --print-teal-ink: #155e75;
  --print-teal-line: #cffafe;
  --print-violet-soft: #f5f3ff;
  --print-violet-line: #ede9fe;
  --print-amber-soft: #fff7ed;
  --print-amber-line: #fed7aa;
  --print-pink-soft: #fdf2f8;
  --print-slate-line: #e2e8f0;

  /* 그림 가리개(mask-image)에 쓰는 완전 불투명 색. 화면에 보이는 색이 아니다. */
  --mask-opaque: #000000;

  /* ══ 2. 치수 (한 벌뿐이다. 두 화면이 같은 값을 쓴다) ═════════════════════ */

  /* ── 간격 ─────────────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  /* 패널 안쪽 여백. 회원 32·36 과 관리자 16 으로 갈라져 있던 것을 24 한 값으로 합쳤다.
     좁은 카드 한 장만 놓는 화면(인증·구독·수신 거부)은 한 단계 넓은 --card-pad 를 쓴다. */
  --panel-pad: var(--sp-6);
  --card-pad: var(--sp-7);
  /* 폼 한 벌의 최대 폭. 넓은 화면에서 입력 칸이 1100px 까지 늘어나면 한 줄짜리 주소·
     라디오 둘이 화면 폭을 다 쓴다. 읽기 좋은 길이에서 묶는다. */
  --form-max: 640px;
  /* 표 열 폭(ui.table 의 열 종류). 식별자(도메인·주소·메일)는 표 폭의 일정 비율을 쓰되 최소 폭 아래로는
     줄지 않고 넘치는 글자는 말줄임한다. 긴 글(사유·메모·오류)은 최소 폭 아래로 좁아져 한 글자씩 줄바꿈되지
     않게 묶는다. 칸 안 보조 글(거절 사유 한 줄 등)은 최대 폭에서 말줄임한다. */
  --table-col-id: 16%;
  --table-col-id-min: 7rem;
  --table-col-text-min: 12rem;
  --table-cell-note-max: 7rem;
  /* 두 열을 한 칸에 합친 요약의 보조 글(해지 방법·사유 등) 최대 폭. */
  --table-cell-note-wide: 16rem;
  /* 표 아래쪽 행에서 [더 보기] 메뉴를 열 때 표 틀 아래에 잠깐 더하는 자리(메뉴 항목 네 줄 남짓). */
  --table-menu-room: 8rem;

  /* ── 모서리 ───────────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --r-round: 50%;
  /* 자리마다 쓰는 모서리 하나씩. 회원 화면 20px / 관리자 10px 로 갈라져 있던 것을
     14px 한 값으로 합쳤다(빽빽한 표에 20 은 물렁하고, 넓은 어두운 면에 10 은 딱딱하다). */
  --r-panel: var(--r-lg);
  --r-inner: var(--r-md);
  --r-field: var(--r-md);
  /* 랜딩 그림 안 휴대폰 모형. 기기 모양이라 화면 부품의 모서리와 따로 둔다. */
  --r-device: 34px;
  --r-device-screen: 26px;

  /* ── 단추 (제품 전체에 모양 하나) ────────────────────────────────────────
     알약+그러데이션(회원)과 사각+단색(관리자)을 하나로 합친 값이다. 이유는
     docs/4.design-system.md 4-4-2 에 적었다. 부품은 components.css 의 .u-btn 이다. */
  --btn-radius: var(--r-md);
  --btn-pad-y: 9px;
  --btn-pad-x: 16px;
  --btn-pad-y-sm: 5px;
  --btn-pad-x-sm: 11px;
  --btn-pad-y-lg: 13px;
  --btn-pad-x-lg: 22px;
  --btn-fs: var(--fs-14);
  --btn-fs-sm: var(--fs-12);
  --btn-fs-lg: var(--fs-16);
  --btn-fw: var(--fw-bold);
  --btn-min-h: 40px;

  /* ── 그림자(층 하나만 쓴다) ───────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-2: 0 2px 8px rgba(16, 24, 40, 0.07);
  --sh-3: 0 12px 28px rgba(16, 24, 40, 0.12);
  --sh-dark-1: 0 8px 24px rgba(99, 102, 241, 0.28);
  --sh-dark-2: 0 18px 44px rgba(0, 0, 0, 0.45);
  --sh-dark-3: 0 24px 60px rgba(0, 0, 0, 0.35);
  --sh-ring: 0 0 0 3px var(--brand-50);

  /* ── 글자 ─────────────────────────────────────────────────────────────── */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-34: 34px;
  /* 제목 계단. 회원 화면 H1 30.4px/700 과 관리자 H1 22px/800 로 갈라져 있던 것을
     한 값으로 합쳤다. 화면은 크기를 적지 않고 이 이름만 읽는다. */
  --h1-size: var(--fs-28);
  --h1-weight: var(--fw-black);
  --h2-size: var(--fs-18);
  --h2-weight: var(--fw-bold);
  --h3-size: var(--fs-14);
  --h3-weight: var(--fw-bold);
  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --font: "Noto Sans KR", "Poppins", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "D2Coding", Menlo, Consolas, "Liberation Mono", monospace;

  /* ── 글줄 폭(한글 기준) ─────────────────────────────────────────────────
     글줄 최대 폭은 ch 로 적지 않는다. ch 는 숫자 "0" 의 너비(약 0.55em)라 라틴 글자 기준이고, 한글 한 글자는
     거의 1em 이다. 62ch 가 한글로는 약 34자, 화면 폭의 절반이 되어 넓은 화면에서도 문단이 3~4줄로 꺾였다
     (2026-09-18). 그래서 em 으로 적는다. em 은 그 요소의 글자 크기를 따르므로 글자가 작은 주석도 같은 글자 수에서
     꺾인다. 띄어쓰기·영문·숫자가 섞이면 한 줄에 들어가는 글자는 em 수보다 10% 쯤 많다.
     값은 1280·1440·1920·390px 갈무리로 정했다(docs/4.design-system.md 4-3-1).
       title  섹션 제목. 약 20자에서 꺾이고 text-wrap: balance 로 두 줄 길이를 맞춘다(41.6px 에서 832px)
       lead   섹션 첫 문단(한두 문장). 넓은 화면에서 두 줄 안(16.8px 에서 874px, 한 줄 약 55자)
       body   설명 문단·목록. 한 줄 약 45~50자(16px 에서 704px)
       note   작은 글자의 출처·방법 주석·안내. 한 줄 약 65~70자(12px 에서 768px, 13px 에서 832px)
     390px 처럼 좁은 화면에서는 부모 폭이 먼저 닿으므로 따로 풀지 않는다(max-width 는 넘치지 않는다). */
  --measure-title: 20em;
  --measure-lead: 52em;
  --measure-body: 44em;
  --measure-note: 64em;

  /* ── 모션 ─────────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 중첩 순서 ────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-skip: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ── 셸 치수 ──────────────────────────────────────────────────────────── */
  --header-h: 64px;

  /* ══ 3. 어두운 색 한 벌(기본: 공개·회원 화면) ═════════════════════════════
     components.css 와 화면 CSS 는 색을 직접 쓰지 않고 이 이름만 본다. */
  --surface-bg: var(--d-800);
  --surface-bg-deep: var(--d-900);
  --surface-panel: var(--d-600);
  --surface-panel-2: var(--d-500);
  --surface-panel-glass: rgba(22, 30, 48, 0.72);
  --surface-sunken: var(--d-700);
  --surface-code: var(--code-bg);
  --surface-line: rgba(255, 255, 255, 0.08);
  --surface-line-strong: rgba(255, 255, 255, 0.16);
  --surface-ink: var(--d-20);
  --surface-ink-strong: var(--d-10);
  --surface-ink-2: var(--d-50);
  --surface-muted: var(--d-80);
  --surface-dim: var(--d-100);
  --surface-accent: var(--brand-400);
  --surface-accent-2: var(--brand-450);
  --surface-accent-soft: rgba(124, 131, 255, 0.14);
  --surface-accent-ink: var(--d-10);
  --surface-accent-text: var(--brand-lilac);
  --accent-on: var(--d-800);           /* 강조 바탕 위 글자(어두운 잉크) */
  --focus-ring: var(--brand-450);

  /* ── AEO 관측소(/observatory·/admin/observatory·랜딩 예고, static/globe.css·globe.js) ────
     어두운 우주 무대라 관리자 화면(밝은 색)에서도 같은 값을 쓴다. 그래서 점수 구간 색도 어두운 셸 값을
     여기서 한 번 받아 둔다(--globe-band-*). body.admin 이 --band-* 를 진하게 바꿔도 무대 안 색은 그대로다.
     globe.js 는 WebGL 색을 이 이름에서 읽는다(getComputedStyle). */
  --globe-space-0: #01030a;
  --globe-space-1: #050b1c;
  --globe-space-2: #0b1a3f;
  --globe-nebula-1: rgba(99, 102, 241, 0.16);
  --globe-nebula-2: rgba(14, 165, 233, 0.10);
  --globe-glow: #4f8dff;
  --globe-arc: #8fd3ff;
  --globe-ring: #7cf3ff;
  --globe-sat: #e6f3ff;
  --globe-orbit: rgba(143, 211, 255, 0.16);
  --globe-border: rgba(143, 211, 255, 0.24);
  --globe-country-on: rgba(124, 243, 255, 0.07);
  --globe-country-hover: rgba(124, 243, 255, 0.22);
  --globe-hud-bg: rgba(5, 11, 28, 0.66);
  --globe-hud-line: rgba(143, 211, 255, 0.20);
  --globe-hud-ink: #dbe8ff;
  --globe-hud-strong: #f4f8ff;
  --globe-hud-dim: #8ea3c7;
  --globe-hud-accent: #7cf3ff;
  --globe-hud-glow: rgba(124, 243, 255, 0.45);
  --globe-scanline: rgba(124, 243, 255, 0.035);
  --globe-src-hall: #fbbf24;
  --globe-src-public: #7cf3ff;
  --globe-src-panel_kr: #a78bfa;
  --globe-src-panel_global: #f472b6;
  --globe-src-internal: #94a3b8;
  --globe-band-poor: var(--band-poor);
  --globe-band-fair: var(--band-fair);
  --globe-band-good: var(--band-good);
  --globe-band-excellent: var(--band-excellent);
  --globe-band-none: #cfe3ff;
}

/* ══ 4. 밝은 색 한 벌(관리자 화면) ════════════════════════════════════════
   이름은 위와 똑같고 값만 다르다. 모서리·간격·글자 크기·단추 모양은 건드리지 않는다. */
body.admin,
[data-theme="light"] {
  --surface-bg: var(--n-50);
  --surface-bg-deep: var(--n-100);
  --surface-panel: var(--n-0);
  --surface-panel-2: var(--n-25);
  --surface-sunken: var(--n-25);
  --surface-code: var(--code-bg-admin);
  --surface-line: var(--n-200);
  --surface-line-strong: var(--n-300);
  --surface-ink: var(--n-800);
  --surface-ink-strong: var(--n-900);
  --surface-ink-2: var(--n-700);
  --surface-muted: var(--n-500);
  --surface-dim: var(--n-500);
  --surface-accent: var(--brand-600);
  --surface-accent-2: var(--brand-700);
  --surface-accent-soft: var(--brand-50);
  --surface-accent-ink: var(--brand-ink);
  --surface-accent-text: var(--brand-600);
  --accent-on: var(--n-0);             /* 강조 바탕 위 글자(흰 잉크) */
  --focus-ring: var(--brand-600);
  /* 밝은 바탕에서는 같은 뜻을 진한 값으로 쓴다(면 색으로만 쓰고 글자에는 -ink 계열을 쓴다). */
  --band-poor: var(--danger);
  --band-fair: var(--warning);
  --band-good: #65a30d;
  --band-excellent: var(--success);
  /* 어두운 면 위 글자로 쓰던 밝은 값도 밝은 바탕에서는 진하게 바꾼다. */
  --success-on-dark: var(--success-ink);
  --warning-on-dark: var(--warning-ink);
  --danger-on-dark: var(--danger-ink);
  --info-on-dark: var(--info-ink);
  --accent-on-dark: var(--brand-600);
  --grad: var(--brand-600);
}

/* 밝은 표면 안에서 다시 어두운 자리(관리자 위 막대 안에 부품을 둘 때)에 붙인다. */
.on-dark {
  --surface-bg: var(--d-800);
  --surface-panel: #131a2e;
  --surface-panel-2: var(--d-500);
  --surface-sunken: var(--d-700);
  --surface-line: rgba(255, 255, 255, 0.10);
  --surface-line-strong: rgba(255, 255, 255, 0.20);
  --surface-ink: var(--d-20);
  --surface-ink-strong: var(--d-10);
  --surface-ink-2: var(--d-50);
  --surface-muted: var(--d-80);
  --surface-dim: var(--d-100);
  --surface-accent: var(--brand-300);
  --surface-accent-soft: rgba(124, 131, 255, 0.16);
  --surface-accent-ink: var(--d-10);
  --accent-on: var(--d-800);
  --focus-ring: var(--brand-300);
}

/* ══ 예전 이름(별칭) ═══════════════════════════════════════════════════════
   shell.css·app.css·landing.css·pricing.css·auth.css·reports.css 가 쓰던 이름. 새 규칙에는 --surface-* 를 쓴다.
   **색을 바꾸는 모든 자리에서 다시 선언한다.** var() 를 담은 사용자 속성은 선언된 요소에서 값이 정해져 그대로
   물려 내려간다. 예전에는 :root 에만 두어 --text·--muted 가 어두운 셸 값(밝은 글자)으로 굳었고, 관리자 화면
   (body.admin, 밝은 바탕)에서 월간 리포트 미리보기의 글자가 거의 보이지 않았다(2026-09-20). */
:root,
body.admin,
[data-theme="light"],
.on-dark {
  --bg: var(--surface-bg);
  --panel: var(--surface-panel);
  --panel-2: var(--surface-sunken);
  --line: var(--surface-line);
  --line-strong: var(--surface-line-strong);
  --text: var(--surface-ink);
  --text-strong: var(--surface-ink-strong);
  --muted: var(--surface-muted);
  --accent: var(--surface-accent);
  --accent-2: var(--surface-accent-2);
  --accent-soft: var(--surface-accent-soft);
  --grad: var(--brand-grad);
  --radius-panel: var(--r-panel);
  --radius-inner: var(--r-inner);
}