/* 예고픽 디자인 토큰 — 유일한 색·간격·서체 정의처 (docs/07_uiux/design_system.md)
   기본 = 다크(기기 설정과 무관). 라이트는 사용자가 고른 경우만 [data-theme="light"].
   대비 값(WCAG 2.1)은 design_system.md §2 표 참조. */

:root {
  color-scheme: dark;

  /* ── 색: 표면 ── */
  --c-bg: #0F1014;              /* Night */
  --c-bg-spot: rgba(255, 200, 61, 0.07); /* 상단 스포트라이트 */
  --c-surface: #1A1C22;         /* Charcoal — 카드 */
  --c-surface-2: #22252D;       /* 입력·칩 배경 */
  --c-surface-3: #2B2F38;       /* hover */
  --c-overlay: rgba(6, 7, 10, 0.72);
  --c-line: rgba(255, 255, 255, 0.08);
  --c-line-strong: rgba(255, 255, 255, 0.16);

  /* ── 색: 텍스트 ── */
  --c-text: #F4F2EE;
  --c-text-muted: #9AA0AA;      /* Slate 7.23:1 on Night */
  --c-text-faint: #8A909A;      /* 5.30:1 on Charcoal, 4.77:1 on surface-2 — 보조 캡션 */

  /* ── 색: 브랜드 ── */
  --c-primary: #FF5A3C;         /* Pick Coral — 재생·투표 CTA */
  --c-primary-hover: #FF7458;
  --c-primary-text: #FF5A3C;    /* 코랄을 '글자색'으로 쓸 때 (5.50:1 on Charcoal) */
  --c-on-primary: #0F1014;      /* 6.14:1 */
  --c-primary-soft: rgba(255, 90, 60, 0.14);
  --c-on-primary-logo: var(--c-bg); /* 로고 체크 획(배경색으로 뚫린 느낌) */
  --c-gold: #FFC83D;            /* Marquee Gold — 1위·급상승 */
  --c-gold-text: #FFC83D;       /* 11.0:1 on Charcoal */
  --c-gold-soft: rgba(255, 200, 61, 0.12);
  --c-gold-line: rgba(255, 200, 61, 0.55);
  --c-on-gold: #1A1300;
  --c-silver-text: #D7DDE6;     /* 2위 은색(사용자 지시 2026-10-06) */
  --c-bronze-text: #C46B32;     /* 3위 동색 — 구리색(사용자 지시 2026-10-06, 살색처럼 보이던 #E39A5E 에서 진하게) */
  --c-violet: #8B7BFF;          /* Spotlight Violet — 데이터 */
  --c-violet-soft: rgba(139, 123, 255, 0.14);

  /* ── 색: 의미 ── */
  --c-up: #F2453D;              /* ▲ 상승(한국식 빨강) — 기호 필수 */
  --c-down: #4D8DFF;            /* ▼ 하락 — 기호 필수 */
  --c-new: #8B7BFF;
  --c-success: #3CCB7F;
  --c-danger: #FF6B5E;
  --c-focus: #FFC83D;

  /* ── 색: 차트(순위 추이) — 단일 시리즈 = 코랄, 최고 순위 = 금, 이벤트 = 텍스트 톤 ── */
  --c-chart-line: var(--c-primary);
  --c-chart-glow: rgba(255, 90, 60, 0.55);
  --c-chart-area-top: rgba(255, 90, 60, 0.26);
  --c-chart-area-bottom: rgba(255, 90, 60, 0);
  --c-chart-grid: rgba(255, 255, 255, 0.06);
  --c-chart-cross: rgba(255, 255, 255, 0.32);
  --c-chart-best: #FFC83D;
  --c-chart-best-ring: var(--c-surface); /* 2px 표면 링 */
  --c-chart-best-glow: rgba(255, 200, 61, 0.7);
  --c-chart-card-spot: rgba(255, 90, 60, 0.08);
  /* ── 색: 광고·라벨 ── */
  --c-ad-bg: #1E2129;           /* 광고 카드 배경 톤 차이 */
  --c-ad-stripe: rgba(255, 255, 255, 0.025);
  --c-ad-line: #9AA0AA;         /* "광고" 칩 테두리 = Slate */
  --c-ad-text: #C9CDD4;
  --c-editor: #8B7BFF;

  /* ── 서체 ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-rank: var(--font-sans);
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* 타입 스케일 (size / line-height) */
  --fs-display: 40px; --lh-display: 48px;
  --fs-h1: 28px;      --lh-h1: 36px;
  --fs-h2: 22px;      --lh-h2: 30px;
  --fs-h3: 18px;      --lh-h3: 26px;
  --fs-body: 16px;    --lh-body: 24px;
  --fs-sm: 14px;      --lh-sm: 20px;
  --fs-caption: 13px; --lh-caption: 18px;
  --fs-micro: 11px;   --lh-micro: 14px;   /* "광고" 칩 최소 크기 */
  --fs-rank-xl: 72px; /* 1위 */
  --fs-rank-lg: 64px; /* 2~3위 */
  --fs-rank: 56px;    /* 4위~ */
  --ls-tight: -0.02em;
  --ls-rank: -0.05em;

  /* ── 간격 (4px 그리드) ── */
  --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ── 모서리 ── */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* ── 레이아웃 ── */
  --content-w: 1320px; /* 데스크톱 콘텐츠 폭(좌우 여백 제외) */
  --container: calc(var(--content-w) + var(--gutter) * 2);
  --gutter: 16px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --touch: 44px;
  --hero-max-vh: 40vh;
  --bp-desktop: 900px; /* 참고값(미디어쿼리는 리터럴 사용) */

  /* ── 그림자·효과 ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.5);
  --glow-gold: 0 0 0 1px var(--c-gold-line), 0 10px 40px -12px rgba(255, 200, 61, 0.45);
  --blur: saturate(140%) blur(14px);

  /* ── 모션 ── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-marquee: 2.4s;

  /* ── z-index ── */
  --z-topbar: 40; --z-tabbar: 40; --z-sheet: 80; --z-toast: 90;
}

/* 라이트 모드 (사용자 선택) */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #F6F4EF; --c-bg-spot: rgba(217, 58, 43, 0.05);
  --c-surface: #FFFFFF; --c-surface-2: #EFECE5; --c-surface-3: #E6E2D9;
  --c-overlay: rgba(21, 22, 26, 0.5);
  --c-line: rgba(21, 22, 26, 0.09); --c-line-strong: rgba(21, 22, 26, 0.18);
  --c-text: #15161A; --c-text-muted: #5F646D; --c-text-faint: #5F646D;
  --c-primary: #D93A2B; --c-primary-hover: #C2301F; --c-primary-text: #BF2E1E; --c-on-primary: #FFFFFF; --c-primary-soft: rgba(217, 58, 43, 0.1);
  --c-on-primary-logo: #F6F4EF;
  --c-silver-text: #66707D; --c-bronze-text: #8E4A1C;
  --c-gold-text: #8A5A00; --c-gold-soft: rgba(255, 200, 61, 0.22); --c-gold-line: rgba(176, 120, 0, 0.55);
  --c-violet: #5B44E8; --c-violet-soft: rgba(91, 68, 232, 0.1);
  --c-up: #C8261F; --c-down: #2563D9; --c-new: #5B44E8; --c-success: #157A45; --c-danger: #C8261F; --c-focus: #5B44E8;
  --c-chart-glow: rgba(217, 58, 43, 0.3); --c-chart-area-top: rgba(217, 58, 43, 0.16); --c-chart-area-bottom: rgba(217, 58, 43, 0);
  --c-chart-grid: rgba(21, 22, 26, 0.07); --c-chart-cross: rgba(21, 22, 26, 0.32);
  --c-chart-best-ring: #8A5A00; /* 흰 바탕에서 금(1.6:1)을 3:1 이상으로 보이게 하는 테두리 */ --c-chart-best-glow: rgba(176, 120, 0, 0.4); --c-chart-card-spot: rgba(217, 58, 43, 0.05);
  --c-ad-bg: #EFECE5; --c-ad-stripe: rgba(21, 22, 26, 0.03); --c-ad-line: #6B7079; --c-ad-text: #3D4047; --c-editor: #5B44E8;
  --shadow-1: 0 1px 2px rgba(21, 22, 26, 0.08); --shadow-2: 0 8px 24px rgba(21, 22, 26, 0.12);
  --shadow-sheet: 0 -12px 40px rgba(21, 22, 26, 0.18);
  --glow-gold: 0 0 0 1px var(--c-gold-line), 0 10px 32px -14px rgba(176, 120, 0, 0.45);
}
/* 다크 모드 (사용자 선택) — :root 기본값과 동일, 명시용 */
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-marquee: 0s; }
}