/* ═══════════════════════════════════════════════════════════════════
   USE 광고 대시보드 — Design Tokens v2 (2026-08-03)
   Source: AD.DASH 디자인 시스템 이식 (Apple Design System 기반)
   - Action Blue = 링크·CTA·활성 내비 전용
   - 시맨틱 상태 색 = 신호등·델타 칩 전용 (시리즈 색 재사용 금지)
   - 그림자 최소 (카드 flat + hairline, hover만 elevation)
   - 컴포넌트/탭 코드에서 하드코딩 금지 — var(--*)만 사용
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── 시맨틱 핵심 ─────────────────────────────────────────────── */
  --primary: #0066cc;          /* Action Blue — 링크·CTA·활성 상태 */
  --primary-focus: #0071e3;
  --primary-bg: #eff6ff;

  /* ── 표면·잉크 ───────────────────────────────────────────────── */
  --bg: #f5f5f7;               /* 페이지 배경 (parchment) */
  --surface: #ffffff;          /* 카드 */
  --surface-sub: #fafafc;      /* 카드 내 서브 표면 */
  --border: #e0e0e0;           /* hairline */
  --border-soft: #f0f0f0;
  --ink: #1d1d1f;
  --ink-2: #55606e;            /* 보조·해석 */
  --ink-3: #8a93a0;            /* 각주·캡션 */

  /* ── 브랜드 ──────────────────────────────────────────────────── */
  --brand: #65A30D;            /* 올리브영 그린 — 로고·강조 포인트 */
  --brand-strong: #4D7C0F;
  --brand-soft: #ecf4df;

  /* ── 신호등·상태 (상태 전용 — 차트 시리즈 재사용 금지) ───────── */
  --sig-green: #16A34A;   --sig-green-bg: #f0fdf4;
  --sig-yellow: #B45309;  --sig-yellow-bg: #fffbeb;
  --sig-red: #DC2626;     --sig-red-bg: #fef2f2;
  --sig-na: #8a93a0;      --sig-na-bg: #eef0f3;
  --info: #0066cc;        --info-bg: #eff6ff;

  /* ── 섹션 악센트 (카드 상단 보더·아이콘 배지 — AD.DASH 관례) ── */
  --acc-daily: #2563EB;        /* 일일 성과 리포트 */
  --acc-kpi: #7C3AED;          /* 핵심 KPI */
  --acc-channel: #EA580C;      /* 매체 성과 */
  --acc-revenue: #16A34A;      /* 매출 목표 */
  --acc-creative: #DB2777;     /* 소재 성과 */
  --acc-customer: #0891B2;     /* 고객 분석 */

  /* ── Tier — 분류 전용 램프 (2026-09-22 CR-23 B-3) ──────────────────
     순서형(S>A>B>C>D)이라 단일 색상(teal) 램프. 신호등(경보)·매체 시리즈·브랜드 색 재사용 금지.
     C의 "정리 대상" 강조는 색이 아니라 🚩 아이콘 + 점선 테두리(.tier-c)로 한다. */
  --tier-s: #0E7C86;  --tier-s-ink: #ffffff;
  --tier-a: #3C9AA6;  --tier-a-ink: #ffffff;
  --tier-b: #7FBAC2;  --tier-b-ink: #1d1d1f;   /* 2026-09-22 B·C 대비 강화 — 흰 카드 위에서 층이 안 보이던 것 */
  --tier-c: #BFDDE1;  --tier-c-ink: #1d1d1f;
  --tier-d: #e5e8ec;  --tier-d-ink: #8a93a0;

  /* ── 차트 시리즈 — 매체 엔티티 고정 색 ──────────────────────── */
  --ch-google: #2563EB;
  --ch-meta: #7C3AED;
  --ch-tiktok: #8a93a0;        /* 추적 불능 — 회색 고정 */
  --ch-criteo: #EA580C;
  --ch-snapchat: #CA8A04;
  --ch-reddit: #DB2777;
  --series-plan: #9aa3ae;      /* 계획선 (중립 회색 파선) */
  --series-actual: #4D7C0F;    /* 실적선 */
  --series-prev: #1E3A8A;      /* 전주 비교선 (남색) — 📆 주간 리포트 2026-10-01 */
  --series-cur: #2563EB;       /* 당주 실적 막대 (파랑) — 📆 주간 리포트 */

  /* ── 타이포 (Apple ladder — 한글은 Pretendard Variable 웹폰트, 맑은고딕 폴백 방지) ── */
  --font: 'Pretendard Variable', Pretendard, 'SF Pro Text', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Pretendard Variable', Pretendard, 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --fs-hero: 30px;
  --fs-h1: 21px;
  --fs-h2: 17px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-caption: 11.5px;
  --fs-table: 11px;
  --ls-tight: -0.374px;

  /* ── 간격 (8pt grid) ─────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* ── 모양 ────────────────────────────────────────────────────── */
  --radius: 14px;              /* 카드 */
  --radius-sm: 8px;
  --radius-pill: 9999px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 4px 14px rgba(0,0,0,.08);

  /* ── 레이아웃 ────────────────────────────────────────────────── */
  --sidebar-w: 208px;
  --layout-max: 1440px;
}

/* ════════════════════════════════════════════════════════════════════
   다크 모드 — <html data-theme="dark"> 로 전환 (헤더 토글)
   차트는 렌더 시점에 토큰을 읽으므로 토글 시 재렌더 필요 (data.js 처리)
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --primary: #2997ff;
  --primary-bg: #0c1f3d;

  --bg: #0f0f12;
  --surface: #1a1a21;
  --surface-sub: #131318;
  --border: #2a2a35;
  --border-soft: #22222c;
  --ink: #f0f0f5;
  --ink-2: #b9c0cb;
  --ink-3: #7c8494;

  --brand-soft: #1d2a10;

  --sig-green: #4ADE80;   --sig-green-bg: #052e16;
  --sig-yellow: #FBBF24;  --sig-yellow-bg: #312006;
  --sig-red: #F87171;     --sig-red-bg: #2c0b0e;
  --sig-na: #7c8494;      --sig-na-bg: #22222c;
  --info: #2997ff;        --info-bg: #0c1f3d;

  --tier-s: #2FB3BF; --tier-s-ink: #0f0f12;
  --tier-a: #4FA9B5; --tier-a-ink: #0f0f12;
  --tier-b: #3E7F87; --tier-b-ink: #eceef2;
  --tier-c: #2A4A4E; --tier-c-ink: #a8afba;
  --tier-d: #2a2e35; --tier-d-ink: #7b828d;

  --series-plan: #6b7280;
  --series-actual: #84CC16;
  --series-prev: #93C5FD;
  --series-cur: #3B82F6;

  --shadow: 0 1px 3px rgba(0,0,0,.3);
  --shadow-hover: 0 4px 14px rgba(0,0,0,.4);
}

/* 기획전 탭 Tier 램프 — 어필(teal)과 한눈에 구분되게 보라 계열 (2026-09-22 사용자 지시). 신호등·매체·브랜드 색과 겹치지 않음 */
#panel-promo {
  --tier-s: #5B21B6;  --tier-s-ink: #ffffff;
  --tier-a: #7C3AED;  --tier-a-ink: #ffffff;
  --tier-b: #A78BFA;  --tier-b-ink: #1d1d1f;
  --tier-c: #DDD6FE;  --tier-c-ink: #1d1d1f;
  --tier-d: #ECEBF3;  --tier-d-ink: #8a93a0;
}
[data-theme="dark"] #panel-promo {
  --tier-s: #A78BFA;  --tier-s-ink: #0f0f12;
  --tier-a: #8B6CF0;  --tier-a-ink: #0f0f12;
  --tier-b: #6D4FC4;  --tier-b-ink: #eceef2;
  --tier-c: #3F3563;  --tier-c-ink: #c9c3e6;
  --tier-d: #2a2e35;  --tier-d-ink: #7b828d;
}