/* 디자인 토큰 — **이 파일이 모든 값의 유일한 출처다.**
 *
 * `app.css` 는 색·간격·서체를 절대 직접 쓰지 않고 여기 변수만 참조한다.
 * 따라서 Figma 시안이 확정되면 **이 파일의 값만 교체**하면 전 화면이 바뀐다.
 *
 * 지금 값은 CLAUDE.md 방향(다크 / Trophy Gold · Track Green)으로 잡은 임시값이다.
 * 교체 대상 절: [브랜드] [표면] [텍스트] [상태] [승식] [배당농도] [타이포]
 * 구조 값(간격·반경·z·모션)은 시안이 바뀌어도 웬만하면 그대로 쓴다.
 *
 * 다크 단일 테마다. 라이트 테마는 만들지 않는다(`docs/70_디자인시스템.md`).
 */

:root {
  /* ── 브랜드 ─────────────────────────────────────────────── */
  --gold: #d4af37;
  --gold-dim: #a98a2c;
  --gold-deep: #7a6220;
  --gold-tint: rgb(212 175 55 / 12%);     /* 골드 배경 틴트 */
  --gold-tint-2: rgb(212 175 55 / 6%);
  --track-green: #1f6f43;
  --track-green-dim: #17512f;
  --track-green-tint: rgb(31 111 67 / 14%);
  --track-green-tint-2: rgb(31 111 67 / 10%);
  --track-green-text: #6ee7a8;      /* 어두운 배경 위에서 읽히는 밝은 초록 */

  /* ── 표면 · 텍스트 ──────────────────────────────────────────
   * ⚠️ **이 두 절만 테마로 갈아 끼운다.** 브랜드·상태·승식·배당 색은 근거가
   *    따로 있어(전광판·접근성) 테마와 무관하게 공유한다.
   *
   * 기본(graphite) = VS Code Dark+ 계열의 무채색 회색. 순검정에 가까우면
   * 골드가 혼자 튀어 화면 전체가 노랗게 읽힌다 — 바탕을 한 단 올려 그 대비를 낮춘다.
   * 원본(ink) 은 `:root[data-theme='ink']` 로 그대로 살려 뒀다(아래).
   *   전환: 주소에 `?theme=ink` / `?theme=graphite` (선택은 브라우저에 남는다)
   *         또는 개발 툴바의 [테마] 버튼.
   */
  --bg: #1e1e1e;
  --surface: #252526;
  --surface-2: #2d2d30;
  /* 화면 틀(고정 상단바·하단탭) — **본문보다 한 단 밝다.**
     어디까지가 스크롤하는 본문이고 어디부터가 늘 붙어 있는 틀인지,
     검은 화면에서는 이 밝기 차이 말고 알려 줄 방법이 없다.
     카드(surface)보다도 밝게 둔다 — 틀은 본문 **위에** 얹히는 층이다. */
  --chrome: #313136;
  /* surface-3 은 '마감'·'미적중' 배지의 바탕이다. VS Code 입력창 색(#3c3c3c)
     그대로 쓰면 그 위 12px 배지 글자가 4.5:1 밑으로 떨어져 한 단 낮췄다. */
  --surface-3: #35353a;
  --line: #3a3a3c;
  --line-strong: #4d4d50;
  --overlay: rgb(0 0 0 / 60%);

  --text: #d4d4d4;
  --text-muted: #a3a3a3;
  --text-dim: #7e7e7e;
  --text-on-gold: #1a1500;
  --text-on-color: #ffffff;
  --text-on-color-dim: rgb(255 255 255 / 80%);   /* 색 채운 버튼 위의 보조 글자 */

  /* ── 상태 ───────────────────────────────────────────────── */
  --win: #4ade80;                          /* 적중·성공 */
  --win-tint: rgb(74 222 128 / 12%);
  --warn: #fbbf24;                         /* 환불·주의 */
  --warn-tint: rgb(251 191 36 / 12%);
  --danger: #f87171;                       /* 초과·오류 */
  --danger-tint: rgb(248 113 113 / 12%);

  /* ── 승식 색 (청색 계열) ────────────────────────────────────
   * 지금은 단승·복승 2종이지만 **2종이 더 붙는다**(쌍승·삼복승). 그때 가서 색을
   * 하나씩 고르면 계열이 흐트러지므로, 청색 190°~255° 를 **네 칸으로 미리** 나눈다.
   * 늘릴 때 `--pool-3/4` 에 이름만 연결하면 된다.
   *
   * 색만으로 구분하지 않는다 — 화면에서 항상 '단승'/'복승' 글자를 함께 쓴다.
   */
  --pool-1: #2fb3d9;                       /* 단승 — 시안 */
  --pool-2: #3d8ee6;                       /* 복승 — 블루 */
  --pool-3: #6a7de8;                       /* (예정) 인디고 */
  --pool-4: #8f74e0;                       /* (예정) 보라블루 */
  --pool-text: #04203a;                    /* 승식 색을 **채웠을 때**의 글자 */

  --pool-win: var(--pool-1);
  --pool-win-tint: rgb(47 179 217 / 14%);
  --pool-qnl: var(--pool-2);
  --pool-qnl-tint: rgb(61 142 230 / 14%);

  /* ── 액션 색 (버튼) ─────────────────────────────────────────
   * 세 가지가 서로 다른 일을 한다. 섞이면 안 된다.
   *   골드 = 서비스 단계 전용(브랜드·섹션 제목·활성 내비/탭). **버튼에 쓰지 않는다.**
   *   buy  = 적색. **잔액이 줄어드는 버튼 하나**(구매하기)만 갖는다.
   *   fn   = 복승 블루. 서비스에 붙은 기능 이동(예상하기·배당보기·경주목록·링크).
   * 골드가 브랜드·버튼·링크를 전부 겸하면 화면이 통째로 노랗게 읽힌다.
   *
   * ⚠️ buy 적색과 마감 적색(`--danger`)은 **역할이 다르다** — buy 는 채움,
   *    마감은 글자색이다. 같은 붉은 계열이되 진하기로 갈라 둔다.
   */
  /* ── 유료상품 3종 ───────────────────────────────────────────
   * 혼합상품(HD영상+경주자료집+AI예상)이 **무엇으로 이뤄졌는지 색만 보고**
   * 알 수 있어야 한다(2026-09-04 지시). 그래서 유형마다 색을 준다.
   *
   * 자리 선정 — 이미 뜻이 박힌 색을 피했다:
   *   골드=서비스 단계 · 초록=체험 · 적색=구매 버튼 · 청색 계열=승식(pool-*)
   * 남은 세 자리(청록 · 자홍 · 보라)를 쓴다. 셋은 색상환에서 멀어서
   * **색각 이상에서도 밝기와 색조가 함께 갈린다.**
   *
   * ⚠️ 색만으로 구분하지 않는다 — 칩에는 언제나 이름을 함께 쓴다(승식과 같은 규칙).
   */
  --pt-book: #35b5aa;                      /* 경주자료집 — 청록 */
  --pt-book-tint: rgb(53 181 170 / 14%);
  --pt-ai: #e86a9c;                        /* AI예상 — 자홍 */
  --pt-ai-tint: rgb(232 106 156 / 14%);
  --pt-hd: #a986f5;                        /* HD영상 — 보라 */
  --pt-hd-tint: rgb(169 134 245 / 14%);

  --action-buy: #c9372c;
  --action-buy-dim: #ad2c22;
  --action-buy-text: #ffffff;              /* 채운 buy 버튼 위의 글자 (5.2:1) */
  --action-fn: var(--pool-2);
  --action-fn-dim: #2f78c8;
  --action-fn-tint: var(--pool-qnl-tint);
  --action-fn-text: var(--pool-text);      /* 채운 fn 버튼 위의 글자 (5.2:1) */

  /* ── 외부 브랜드 · 고정색 ───────────────────────────────── */
  /* 카카오는 브랜드 규격이라 시안이 바뀌어도 이 값을 바꾸지 않는다. */
  --kakao: #fee500;
  --kakao-hover: #f0d800;
  --text-on-kakao: #191600;
  /* 동영상 레터박스 — 영상 밖은 순검정이어야 한다 */
  --video-bg: #000000;

  /* ── 배당판 색 (실물 전광판 기준) ───────────────────────── */
  /* `개발요청/참고자료/배당판예시1.jpg` 를 확대해 뽑은 값이다.
     마번은 밝은 노랑, 배당은 낮을수록(인기일수록) 뜨겁게 간다. */
  --num-yellow: #ffd400;                   /* 마번 — 밝은 노랑 */
  --odds-top: #ff4b3e;                     /* **가장 인기** 배당 하나 — 붉은색 */
  --odds-1: #f5941f;                       /* < 10배  — 진한 오렌지 */
  --odds-2: #c8762a;                       /* < 50배  — 어두운 오렌지 */
  --odds-3: #9aa3ab;                       /* < 200배 */
  --odds-4: #6b747c;                       /* 그 이상 */

  /* 배당 구간 **칸 배경** — 복승 매트릭스는 칸 자체를 색으로 칠하고 숫자는
     흰 고딕으로 얹는다(해외 배당판 방식). 그래서 글자색이 아니라 배경색이고,
     흰 글자가 읽히도록 위 글자색 계열보다 어둡게 잡았다(대비 5:1 이상). */
  --odds-bg-top: #b3261e;                  /* 최저 지급율 하나 — 붉은색 */
  --odds-bg-1:   #a85b12;                  /* < 10  — 진한 주황 */
  --odds-bg-2:   #7a6220;                  /* < 50  — 골드 딥 */
  --odds-bg-3:   #4d5560;                  /* < 200 — 슬레이트 */
  --odds-bg-4:   #343a42;                  /* 그 이상 — 어두운 슬레이트 */

  /* 배당판 숫자용 서체.
     실물 전광판 숫자는 x-높이가 크고 굵은 그로테스크(Arial/Helvetica Bold 계열)다.
     이미 싣고 있는 **Pretendard** 가 그 계열(Inter 파생)이라 가장 가깝다 —
     폰트를 더 받지 않고 굵기(800)와 고정폭 숫자(tnum)로 맞춘다. */
  --font-board: var(--font-body);
  --fw-board: 800;

  /* ── 타이포 ─────────────────────────────────────────────── */
  /* Sora·Inter 는 한글 글리프가 없어 본문이 시스템 폰트로 떨어진다.
     한글 본문은 Pretendard 로 통일하고, Sora 는 라틴 표기(로고)에만 쓴다. */
  --font-body: Pretendard, 'Pretendard Variable', system-ui, -apple-system,
               'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-display: Pretendard, 'Pretendard Variable', 'Sora', system-ui,
                  'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-latin: 'Sora', var(--font-display);
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'D2Coding', monospace;

  --fs-display: 1.75rem;   /* 28 */
  --fs-h1: 1.375rem;       /* 22 */
  --fs-h2: 1.125rem;       /* 18 */
  --fs-h3: 1rem;           /* 16 */
  --fs-body: 0.9375rem;    /* 15 */
  /* 본문은 그대로 두고 **부가 안내만** 키웠다 — 13/11 은 40~60대에게 작다. */
  --fs-sm: 0.875rem;       /* 14 (구 13) */
  --fs-xs: 0.75rem;        /* 12 (구 11) */
  --fs-mono-xl: 1.75rem;   /* 28 — 잔액·환급 등 주인공 숫자 */
  --fs-mono-l: 1.25rem;    /* 20 */
  --fs-mono: 0.9375rem;    /* 15 */
  --fs-mono-s: 0.8125rem;  /* 13 */

  --lh-tight: 1.25;
  --lh-body: 1.6;

  /* ── 간격 ───────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --gap: var(--sp-4);                      /* 기본 간격(구버전 별칭) */

  /* ── 모양 ───────────────────────────────────────────────── */
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 2px 12px rgb(0 0 0 / 40%);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 55%);
  --ring: 0 0 0 3px rgb(212 175 55 / 35%); /* 포커스 링 */

  /* ── 레이아웃 ───────────────────────────────────────────── */
  --wrap: 960px;
  --header-h: 56px;
  --nav-h: 60px;                           /* 모바일 하단 탭 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 개발 툴바 높이. 줄바꿈 때문에 높이가 들쭉날쭉해서 dev-bar.js 가 실측해 넣는다.
     툴바가 없으면 0 이라 아래 계산식들이 그대로 성립한다. */
  --dev-h: 0px;

  /* ── 모션 ───────────────────────────────────────────────── */
  --dur-fast: .12s;
  --dur: .2s;
  --ease: cubic-bezier(.2, .8, .3, 1);

  /* ── z-index ────────────────────────────────────────────── */
  --z-sticky: 20;
  --z-header: 30;
  --z-nav: 40;
  --z-sheet: 60;
  --z-toast: 80;
  --z-dev: 100;
}

/* ── 원본 테마(ink) ─────────────────────────────────────────
 * 2026-08 까지 쓰던 값. 지우지 않고 남겨 두 안을 화면에서 바로 비교한다.
 * 표면·텍스트 **말고는 아무것도 바꾸지 않는다** — 여기서 브랜드색을 손대기
 * 시작하면 테마가 두 벌의 디자인이 되어 되돌리기 어려워진다.
 */
:root[data-theme='ink'] {
  --bg: #0f1113;
  --surface: #171a1d;
  --surface-2: #1f2327;
  --surface-3: #282d32;
  --line: #2c3237;
  --line-strong: #3b434a;
  --chrome: #242a30;
  --overlay: rgb(0 0 0 / 66%);

  --text: #e8eaec;
  --text-muted: #9aa3ab;
  --text-dim: #6b747c;
}