/* ═══════════════════════════ 디자인 토큰 (docs/DESIGN.md 2절) ═══════════════════════════
   색 · 글자 크기 · 굵기 · 모서리 · 모션 값은 이 파일에서만 정의한다.
   지금은 "새 디자인 미리보기"(애플식 PC 화면, ADR-029) 전용 토큰만 있다 —
   <html data-ui="apple"> 일 때만 정의되므로 플래그가 꺼져 있으면 아무 영향이 없다.
   쓰는 곳: apple-ui.css (기존 style.css 의 변수를 이 토큰으로 다시 묶는다)
   ============================================================================ */
:root {
  /* 트리맵 타일 글꼴 (PC · 모바일 공통, DESIGN.md 황금비 타이포). 아이폰 · 맥은 시스템 글꼴(SF), 그 밖은 직접 호스팅한
     Inter · Pretendard (static/fonts, SIL OFL — SF Pro 파일은 올리지 않는다). 크기 · 굵기 · 자간은 tile-typo.js 가 황금비로 정한다 */
  --tile-font: -apple-system, BlinkMacSystemFont, "Inter", "Pretendard", sans-serif;
  /* 간격 (4px 격자, DESIGN.md 0절) — 테마 · 플래그와 무관한 공통 값. 지금은 설정 화면 급등 알림 카드(style.css)가 쓴다 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  /* 실적 발표 띠 (earnings.js · style.css 의 .earn-strip) — 색은 기존 공시 강조색 · 떠 있는 층 색을 재사용 */
  --earn-accent: var(--filing-strong);
  --earn-bg: var(--float-bg);
  --earn-h: 28px;
  --earn-gap: var(--s-4);
  /* 비교 뷰(/compare) — 같은 종목을 4개 트리맵에서 잇는 테두리 색 8개 (다크 · 라이트 모두에서 구분되는 중간 채도) */
  --cmp-link-1: #4f9dff;
  --cmp-link-2: #ffb020;
  --cmp-link-3: #c06bff;
  --cmp-link-4: #2fd1c5;
  --cmp-link-5: #ff6b9a;
  --cmp-link-6: #a3d83a;
  --cmp-link-7: #ff7a45;
  --cmp-link-8: #8fa0ff;
}

:root[data-ui="apple"] {
  /* 색 — 배경 3단계 · 글자 3단계 · 강조 1개 (다크 기본). 순수 검정/흰색은 쓰지 않는다 */
  --c-bg-1: #111214;          /* 화면 바탕 · 트리맵 캔버스 */
  --c-bg-2: #18191c;          /* 패널 · 사이드바 · 카드 · 떠 있는 층 */
  --c-bg-3: #232428;          /* 버튼 · 칩 · 선택된 항목 · 호버 */
  --c-text-1: #ececf0;        /* 본문 (bg-2 대비 14.9) */
  --c-text-2: #a4a5ad;        /* 보조 (7.2) */
  --c-text-3: #8b8c95;        /* 흐린 글자 (bg-3 위에서도 4.6) */
  --c-accent: #5ea0ff;        /* 강조 하나 — 포커스 · 체크 · 주 버튼 */
  --c-accent-on: #0e1116;     /* 강조색 위 글자 (7.2) */
  --c-line: rgba(255, 255, 255, .06);   /* 꼭 필요한 곳의 아주 옅은 선 */
  --c-veil: rgba(8, 9, 11, .72);        /* 상세 팝업 뒤 가림막 */
  --c-float: rgba(24, 25, 28, .96);     /* 툴팁 · 검색 결과 · 알림 */
  --c-shadow: 0 8px 28px rgba(0, 0, 0, .28);   /* 떠 있는 층에만, 아주 옅게 */

  /* 글꼴 — 시스템 글꼴 하나 (숫자는 같은 글꼴의 tabular-nums) */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif;

  /* 글자 크기 6단계 · 굵기 */
  --fs-32: 32px;
  --fs-24: 24px;
  --fs-18: 18px;
  --fs-15: 15px;
  --fs-13: 13px;
  --fs-11: 11px;
  --fw-regular: 400;
  --fw-num: 500;
  --fw-strong: 600;

  /* 모서리 — 카드 12 · 버튼/칩 8 · 타일 10 */
  --r-card: 12px;
  --r-ctl: 8px;
  --r-tile: 10px;

  /* 모션 — 반응만, transform · opacity */
  --dur-fast: 150ms;
  --dur: 200ms;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --press: .97;
  --focus-ring: 0 0 0 2px var(--c-bg-1), 0 0 0 4px var(--c-accent);
}

:root[data-ui="apple"][data-theme="light"] {
  --c-bg-1: #f5f5f7;
  --c-bg-2: #fbfbfd;
  --c-bg-3: #e8e8ed;
  --c-text-1: #1d1d1f;
  --c-text-2: #4d4d52;
  --c-text-3: #67676d;
  --c-accent: #0066cc;
  --c-accent-on: #fbfbfd;
  --c-line: rgba(0, 0, 0, .07);
  --c-veil: rgba(40, 40, 45, .38);
  --c-float: rgba(251, 251, 253, .97);
  --c-shadow: 0 8px 28px rgba(20, 20, 30, .12);
}

/* ── 지도 리디자인 v2 (?ff=v2, 2026-10-19 사용자 지시) — <html data-v2="on"> 일 때만. 쓰는 곳: v2.css ──
   강조색은 골드(평소보다 많음) · 블루(평소보다 적음) 두 개뿐 — 언급량 배수 색(--mention-up/down)과 같은 값. 초록/빨강은 쓰지 않는다 */
:root[data-v2="on"] {
  --v2-gold: var(--mention-up);
  --v2-blue: var(--mention-down);
  --v2-bg: var(--panel);
  --v2-bg-2: var(--panel-2);
  --v2-bg-3: var(--panel-3);
  --v2-line: var(--line);
  --v2-text: var(--text);
  --v2-text-2: var(--text-dim);
  --v2-text-3: var(--text-faint);
  --v2-veil: rgba(4, 6, 10, .62);
  --v2-spark: rgba(255, 255, 255, .13);
  --v2-ring: rgba(255, 255, 255, .92);
  --v2-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  --v2-fs-24: 24px;
  --v2-fs-18: 18px;
  --v2-fs-15: 15px;
  --v2-fs-13: 13px;
  --v2-fs-11: 11px;
  --v2-r: 12px;
  --v2-r-ctl: 8px;
  --v2-dur: 200ms;
  --v2-ease: cubic-bezier(.2, .7, .2, 1);
  --v2-panel-w: 400px;
}
:root[data-v2="on"][data-theme="light"] {
  --v2-veil: rgba(20, 24, 32, .35);
  --v2-spark: rgba(0, 0, 0, .10);
  --v2-ring: rgba(20, 24, 32, .85);
  --v2-shadow: 0 18px 48px rgba(20, 24, 32, .18);
}