/* ============================================================
   디자인 토큰 (SSOT) — 빌드 브리프 §1.4 :root 그대로 적용
   ============================================================ */
:root {
  /* ---- font ----
     라틴 문자는 Plus Jakarta Sans(AbleDx CI 영문 지정서체), 한글은 Pretendard로 자동 폴백.
     Jakarta에 한글 글리프가 없어 브라우저가 글자 단위로 Pretendard를 사용함. */
  --kr: 'Plus Jakarta Sans', 'Pretendard', system-ui, -apple-system, sans-serif;
  --fw-md: 500;          /* Medium: 본문/UI/라벨/수치 */
  --fw-bd: 700;          /* Bold: 헤딩/강조 */
  --ls: -0.02em;         /* 전 타이포 공통 자간 */
  --lh: 1.4;             /* 전 타이포 공통 행간 (140%) */

  /* ---- type scale ---- */
  --text-display: clamp(42px, 8.4vw, 80px);  /* 히어로 */
  --text-h1: 48px;
  --text-h2: clamp(28px, 4.2vw, 40px);
  --text-h3: clamp(26px, 3.2vw, 32px);
  --text-h4: 24px;
  --text-h5: 20px;
  --text-body-1: 18px;   /* 리드 */
  --text-body-2: 16px;   /* base */
  --text-body-3: 14px;   /* 보조 */
  --text-caption: 13px;
  --text-overline: 12px;

  /* ---- neutral ramp ---- */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f6;
  --gray-200: #e5e8eb;
  --gray-300: #d1d6db;
  --gray-400: #b0b8c1;
  --gray-500: #8b95a1;
  --gray-600: #6b7684;
  --gray-700: #4e5968;
  --gray-800: #333d4b;
  --gray-900: #191f28;

  /* ---- semantic text ---- */
  --t-strong: #191f28;      /* 900 */
  --t-normal: #333d4b;      /* 800 */
  --t-secondary: #6b7684;   /* 600 */
  --t-tertiary: #8b95a1;    /* 500 */

  /* ---- surfaces / borders ---- */
  --bg: #ffffff;
  --bg-subtle: #f9fafb;
  --bg-muted: #f2f4f6;
  --border: #e5e8eb;
  --border-strong: #d1d6db;

  /* ---- dark section ---- */
  --dark: #191f28;
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-dark-2: rgba(255, 255, 255, 0.18);

  /* ---- brand point ---- */
  --brand: #293f74;
  --brand-hover: #36508f;
  --brand-light: #9aabd6;   /* 다크 배경용 */

  /* ---- radius ---- */
  --r-btn: 8px;
  --r-card: 16px;
  --r-panel: 20px;
  --r-pill: 40px;

  /* ---- layout ---- */
  --container-max: 1440px;
  --container-pad: 60px;          /* 40 → 60 (3번째 섹션 이후 양옆 여유) */
  --section-pad: 128px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 600ms;
  --dur-slow: 1000ms;
}

/* ============================================================
   글로벌 베이스
   ============================================================ */
* { letter-spacing: var(--ls); }

body {
  font-family: var(--kr);
  font-weight: var(--fw-md);
  line-height: var(--lh);
  color: var(--t-normal);
  background: var(--bg);
}

h1, h2, h3, h4, h5 {
  font-weight: var(--fw-bd);
  color: var(--t-strong);
}

/* ============================================================
   타입 유틸리티 클래스
   Display·H1~H5 = Bold 700 / Body1~3·Caption·Overline = Medium 500
   ============================================================ */
.text-display  { font-size: var(--text-display);  font-weight: var(--fw-bd); }
.text-h1       { font-size: var(--text-h1);       font-weight: var(--fw-bd); }
.text-h2       { font-size: var(--text-h2);       font-weight: var(--fw-bd); }
.text-h3       { font-size: var(--text-h3);       font-weight: var(--fw-bd); }
.text-h4       { font-size: var(--text-h4);       font-weight: var(--fw-bd); }
.text-h5       { font-size: var(--text-h5);       font-weight: var(--fw-bd); }
.text-body-1   { font-size: var(--text-body-1);   font-weight: var(--fw-md); }
.text-body-2   { font-size: var(--text-body-2);   font-weight: var(--fw-md); }
.text-body-3   { font-size: var(--text-body-3);   font-weight: var(--fw-md); }
.text-caption  { font-size: var(--text-caption);  font-weight: var(--fw-md); }
.text-overline {
  font-size: var(--text-overline);
  font-weight: var(--fw-md);
  text-transform: uppercase;
}

/* 통계 수치 변형 — Display/H1 크기 + Medium 500 (헤딩보다 가벼운 인상) */
.text-stat { font-size: var(--text-h1); font-weight: var(--fw-md); }

/* 다크 섹션 텍스트 컬러 매핑 (브리프 §1.2) */
.is-dark {
  background: var(--dark);
  color: var(--gray-200);
}
.is-dark h1, .is-dark h2, .is-dark h3, .is-dark h4, .is-dark h5 { color: var(--white); }
.is-dark .t-secondary { color: var(--gray-400); }
.is-dark .t-tertiary  { color: var(--gray-500); }

/* 브랜드 강조 — 라이트/다크 자동 매핑 */
.brand-accent      { color: var(--brand); }
.is-dark .brand-accent { color: var(--brand-light); }

/* 키커 — 앞에 짧은 라인 + 대문자 라벨 (브리프 §1.7) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-overline);
  font-weight: var(--fw-md);
  text-transform: uppercase;
  color: var(--brand);
}
.kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
}
.is-dark .kicker { color: var(--brand-light); }

/* 키커 modifier — 앞 라인 제거 */
.kicker--plain { gap: 0; }
.kicker--plain::before { display: none; }