/* =========================================================
   메달왕 — 컬러 & 타이포그래피 토큰
   화이트 배경 + 딥네이비 + 절제된 골드 포인트
   ========================================================= */

:root {
  /* ---- 브랜드 코어 ---- */
  --navy-900: #0f1a33;      /* 헤드라인, 최고 명도 대비 텍스트 */
  --navy-800: #1a2a4a;      /* 기본 딥네이비 (CTA 배경, 하단바) */
  --navy-700: #2a3a5c;      /* 서브 네이비 (호버 등) */
  --navy-50:  #f2f4f8;      /* 네이비 톤 배경 */

  --gold-600: #a07a3f;      /* 골드 진한 톤 (테두리, 아이콘) */
  --gold-500: #b8935a;      /* 기본 골드 (보조 CTA, 포인트) */
  --gold-400: #c9a877;      /* 라이트 골드 (호버, 하단바) */
  --gold-100: #f5ecd9;      /* 골드 톤 배경 */

  /* ---- 뉴트럴 ---- */
  --bg:        #ffffff;         /* 페이지 기본 배경 */
  --bg-soft:   #fafaf7;         /* 섹션 대비 배경 (오프화이트, 살짝 웜톤) */
  --bg-mute:   #f4f2ec;         /* 카드/입력 배경 */
  --line:      #e6e3db;         /* 기본 경계선 */
  --line-soft: #efece5;         /* 옅은 구분선 */

  --fg-1: #14192a;             /* 본문 최우선 */
  --fg-2: #3a4055;             /* 본문 기본 */
  --fg-3: #6b7185;             /* 서브 텍스트 */
  --fg-4: #9aa0b0;             /* placeholder, 캡션 */

  /* ---- 시멘틱 ---- */
  --danger: #c0392b;            /* 필수 표시 (*) */

  /* ---- 타이포 스케일 (모바일 뷰포트 기준) ---- */
  --f-display: 30px;   /* 메인 헤드라인 */
  --f-h1:      22px;   /* 섹션 제목 */
  --f-h2:      18px;   /* 서브 제목 */
  --f-body:    15px;   /* 본문 */
  --f-sm:      13px;   /* 캡션/보조 */
  --f-xs:      12px;   /* 라벨 */

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --ls-tight:  -0.02em;
  --ls-normal: -0.01em;

  /* ---- 여백 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- 라디우스 ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- 그림자 ---- */
  --shadow-sm: 0 1px 2px rgba(15, 26, 51, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 26, 51, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 26, 51, 0.12);

  /* ---- 모바일 랜딩 컬럼 폭 ---- */
  --col-width: 420px;
}

/* Pretendard 로컬 폴백 → 시스템 → 산세리프 */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

html, body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--f-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- 시멘틱 클래스 ---- */
.t-display {
  font-size: var(--f-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--navy-900);
}
.t-h1 {
  font-size: var(--f-h1);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: var(--ls-tight);
  color: var(--navy-900);
}
.t-h2 {
  font-size: var(--f-h2);
  font-weight: 700;
  color: var(--navy-900);
  line-height: 1.4;
}
.t-body {
  font-size: var(--f-body);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
.t-sm {
  font-size: var(--f-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.t-xs {
  font-size: var(--f-xs);
  color: var(--fg-3);
  letter-spacing: 0;
}
.t-gold {
  color: var(--gold-500);
}