/* ============================================================
   한눈에 보는 한국의 미디어 — 언론통계 자료 사이트 예시시안
   기반: WEBDOT 예시시안 템플릿 STABLE (기관형)
   톤: 재단 딥블루 + 민트 액센트 (기획안 v1.0 표지·본문 톤 기준)
   ⚠ 색은 이 --wd-* 변수만 참조한다.
   ============================================================ */
:root {
  /* ---- brand ---- */
  --wd-primary: #14458f;        /* 재단 딥블루 */
  --wd-primary-light: #9db6de;
  --wd-primary-hover: #0f3572;
  --wd-primary-50: #eef3fb;
  --wd-primary-100: #dbe6f6;
  --wd-secondary: #2fb99a;       /* 민트 액센트 — 기획안 표지/구분선 */
  --wd-accent: #2fb99a;

  /* ---- data viz palette (범주형 6색 · 명도 대비 확보) ---- */
  --wd-dv-1: #14458f;
  --wd-dv-2: #2fb99a;
  --wd-dv-3: #f0a33c;
  --wd-dv-4: #6a8cc7;
  --wd-dv-5: #8f5fb5;
  --wd-dv-6: #c8563c;
  --wd-dv-grid: #e4e9f2;
  --wd-dv-axis: #8c95a4;
  --wd-dv-muted: #b9c4d6;        /* 비강조 시리즈 */
  --wd-dv-highlight: #f5b431;    /* '역대 최저' 등 포인트 */

  /* ---- pop accent (재단 전달 인터랙티브 예시 톤 흡수 · 2026-08-14) ----
     기관이 보낸 '팝 데이터저널리즘' 예시(theme5)의 코랄. 골격은 딥블루 정형을 유지하고,
     이 색은 수치·강조·인터랙션 자리에서만 쓴다. 1차 회의 "유행 안 타는 깔끔한 스타일"과
     기관 "재밌게" 요구의 절충점. */
  --wd-pop: #ff5a3c;
  --wd-pop-soft: #fff0ec;
  --wd-pop-line: #ffd0c5;

  /* 수치 전용 서체 — 자릿수 정렬이 맞아야 표·차트가 읽힌다 */
  --wd-font-num: 'IBM Plex Mono', 'Pretendard Variable', ui-monospace, monospace;

  /* ---- text ---- */
  --wd-text-primary: #14181f;
  --wd-text-secondary: #444b57;
  --wd-text-tertiary: #6a7280;
  --wd-text-muted: #9aa1ac;
  --wd-text-disabled: #c2c8d0;
  --wd-text-inverse: #ffffff;

  /* ---- surface ---- */
  --wd-surface-white: #ffffff;
  --wd-surface-light: #f4f7fb;
  --wd-surface-subtle: #e9eef6;
  --wd-surface-dark: #0a1a3a;
  --wd-surface-darkest: #050d1e;   /* 푸터 하단 바 (시안 기준) */
  --wd-surface-dark-section: #0f2a5c;
  --wd-surface-dark-hover: #17376f;

  /* ---- border ---- */
  --wd-border-default: #d8e0ec;
  --wd-border-light: #e8edf5;
  --wd-border-strong: #c3cddd;
  --wd-border-dark: #16223f;
  --wd-border-on-dark: #2a3a60;

  /* ---- fonts ---- */
  --wd-font-primary: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;
  --wd-font-secondary: 'Pretendard Variable', 'Pretendard', -apple-system, system-ui, sans-serif;

  /* ---- radius (공공기관 = 정형) ---- */
  --wd-radius-none: 0px;
  --wd-radius-sm: 2px;
  --wd-radius-md: 4px;
  --wd-radius-default: 4px;
  --wd-radius-full: 999px;

  /* ---- shadow ---- */
  --wd-shadow-subtle: 0 0 0 1px var(--wd-border-light);
  --wd-shadow-card: 0 8px 28px rgba(10, 26, 58, 0.10);
  --wd-shadow-float: 0 14px 38px rgba(10, 26, 58, 0.14);
  --wd-shadow-dropdown: 0 16px 40px rgba(10, 26, 58, 0.16);

  /* ---- layout ---- */
  --wd-maxw: 1240px;
  --wd-maxw-wide: 1440px;
  --wd-pad: 24px;
  --wd-header-h: 78px;

  /* ---- motion ---- */
  --wd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wd-dur: 0.3s;
  --wd-dur-fast: 0.2s;

  /* ---- section rhythm ---- */
  --wd-sec-y: 96px;
}

@media (max-width: 1080px) {
  :root { --wd-sec-y: 72px; --wd-header-h: 66px; }
}
@media (max-width: 640px) {
  :root { --wd-sec-y: 52px; --wd-pad: 18px; }
}

/* ============================================================
   메인 시안 반영 (2026-08-18) — 카드형 레이아웃 토큰
   히어로·지표 카드·주제 카드가 라운드 카드로 바뀌면서 필요해진 값들.
   본문·표·버튼의 정형 radius(2·4px)는 그대로 둔다.
   ============================================================ */
:root {
  --wd-radius-lg: 16px;   /* 지표·자료 카드 */
  --wd-radius-xl: 24px;   /* 히어로 박스 */

  /* 지표 카드 4색 로테이션 — 값은 dv 팔레트/pop 과 같다.
     chart.js 는 SVG 속성에 var() 를 못 쓰므로 같은 hex 를 PHP(nrm_kpi_accents)에도 둔다. */
  --wd-kpi-1: #ff5a3c;  --wd-kpi-1-soft: #fff3f0;  --wd-kpi-1-line: #ffdcd3;
  --wd-kpi-2: #14458f;  --wd-kpi-2-soft: #eef3fb;  --wd-kpi-2-line: #d7e3f5;
  --wd-kpi-3: #2fb99a;  --wd-kpi-3-soft: #ecfaf6;  --wd-kpi-3-line: #cbeee4;
  --wd-kpi-4: #f0a33c;  --wd-kpi-4-soft: #fff7ea;  --wd-kpi-4-line: #fae2bd;

  /* 분류 배지·주제 카드 틴트 */
  --wd-tint-mint: #e9f8f3;    --wd-tint-mint-ink: #1c8f77;
  --wd-tint-blue: #e9f0fb;    --wd-tint-blue-ink: #14458f;
  --wd-tint-amber: #fef4e4;   --wd-tint-amber-ink: #b5762a;
  --wd-tint-violet: #f0edfb;  --wd-tint-violet-ink: #6a4fb5;
  --wd-tint-sky: #e7f4fb;     --wd-tint-sky-ink: #1f6d99;
  --wd-tint-rose: #fdeeea;    --wd-tint-rose-ink: #c0472c;
}