/* ==========================================================
   variables.css — 디자인 토큰 (T-001)
   ========================================================== */

:root {
  /* ---- 표면 / 배경 ---- */
  --bg: #f5f6f8;
  --bg-soft: #eceef2;
  --surface: #ffffff;
  --surface-alt: #fafbfc;
  --dark: #101014;
  --dark-2: #17171d;
  --dark-3: #22222b;

  /* ---- 텍스트 ---- */
  --text: #111111;
  --text-sub: #767b85;
  --text-faint: #a2a7b0;
  --text-on-dark: #ffffff;
  --text-on-dark-sub: rgba(255, 255, 255, 0.68);
  --text-on-dark-faint: rgba(255, 255, 255, 0.45);

  /* ---- 포인트 컬러 ---- */
  --lime: #c6f22e;
  --lime-strong: #b3e01a;
  --lime-soft: rgba(198, 242, 46, 0.16);
  --purple: #7c3aed;
  --purple-strong: #6d28d9;
  --purple-soft: #a78bfa;
  --red: #f43f5e;
  --red-strong: #e11d48;

  /* ---- 라인 / 오버레이 ---- */
  --line: #e8eaee;
  --line-strong: #dcdfe5;
  --line-on-dark: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.14);
  --glass-strong: rgba(255, 255, 255, 0.22);

  /* ---- 반경 ---- */
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ---- 그림자 ---- */
  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.05);
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.12);

  /* ---- 레이아웃 ---- */
  --container: 1280px;
  --gutter: 24px;
  --gap: 16px;
  --header-h: 76px;
  --chipbar-h: 56px;

  /* ---- 타이포 ---- */
  --font-sans: Pretendard, "Pretendard Variable", "Noto Sans KR",
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --fs-section: 22px;
  --fs-body: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;

  /* ---- 모션 ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.18s;

  /* ---- 카드 폭 (캐러셀) ---- */
  --hero-promo-w: 320px;
  --hero-card-w: 212px;

  /* 캐러셀 행 높이 = 쇼츠 카드(9:16)의 높이.
     --hero-card-w 가 미디어쿼리에서 바뀌면 자동으로 따라 계산된다. (T-005) */
  --hero-card-h: calc(var(--hero-card-w) * 16 / 9);
}