@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("assets/font/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f1f4f9;
  --bg-soft: #e9eef5;
  --surface: #ffffff;
  --line: rgba(11, 30, 51, 0.1);
  --line-strong: rgba(11, 30, 51, 0.18);

  --ink: #0b1e33;
  --ink-mid: #3d5876;
  --ink-low: #7189a6;

  --navy-990: #060f1b;
  --navy-950: #081422;
  --navy-900: #0b1e33;
  --navy-800: #122a45;
  --navy-700: #1a3557;

  --blue-700: #1e40af;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --cyan-400: #38bdf8;
  --blue-bg: rgba(37, 99, 235, 0.08);
  --blue-line: rgba(37, 99, 235, 0.25);
  --blue-line-strong: rgba(37, 99, 235, 0.35);
  --blue-glow: rgba(37, 99, 235, 0.28);

  --amber-500: #d97706;
  --red-500: #dc2626;
  --amber-bg: rgba(217, 119, 6, 0.09);
  --red-bg: rgba(220, 38, 38, 0.07);

  --green-700: #047857;
  --green-600: #059669;
  --green-bg: rgba(5, 150, 105, 0.08);
  --green-line-strong: rgba(5, 150, 105, 0.35);

  --on-dark-hi: #f1f6fc;
  --on-dark-mid: #a9bed6;
  --on-dark-low: #6b84a3;

  --red-on-dark: #ef4444;
  --amber-on-dark: #f59e0b;
  --green-on-dark: #34d399;
  --line-on-dark: rgba(148, 184, 222, 0.14);
  --line-on-dark-strong: rgba(148, 184, 222, 0.28);
  --cyan-bg: rgba(56, 189, 248, 0.12);
  --cyan-line: rgba(56, 189, 248, 0.3);
  --cyan-glow: rgba(56, 189, 248, 0.35);

  --shadow-card:
    0 2px 8px rgba(11, 30, 51, 0.05), 0 12px 32px rgba(11, 30, 51, 0.08);
  --shadow-float:
    0 8px 20px rgba(11, 30, 51, 0.1), 0 28px 64px rgba(11, 30, 51, 0.14);

  --accent: var(--blue-600);
  --accent-2: var(--blue-500);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  --w-narrow: 760px;
  --w-content: 1120px;
  --w-page: 1200px;
  --w-wide: 1360px;

  --curve-h: clamp(40px, 6vw, 80px);

  --sec-s: clamp(96px, 10vw, 140px);
  --sec-m: clamp(140px, 14vw, 190px);
  --sec-l: clamp(180px, 18vw, 240px);

  --page: 1200px;
  --gutter: 32px;
  --gutter-m: 20px;
  --measure: 680px;

  --font-sans:
    Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
    sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
  --t-micro: 16px;
  --t-small: 18px;
  --t-body: 20px;
  --t-lead: clamp(21px, 1.8vw, 24px);
  --t-h3: clamp(26px, 2.3vw, 31px);
  --t-h2-mf: clamp(31px, 3vw, 39px);
  --t-h2-f: clamp(38px, 3.8vw, 49px);
  --t-display: clamp(44px, 4.6vw, 61px);

  --t-hero: clamp(44px, 5.4vw, 76px);
  --t-num: clamp(31px, 3vw, 39px);
  --t-num-xl: clamp(38px, 3.8vw, 49px);
  --t-deco-max: 96px;
}

.dark-scope {
  --line: var(--line-on-dark);
  --line-strong: var(--line-on-dark-strong);
  --ink: var(--on-dark-hi);
  --ink-mid: var(--on-dark-mid);
  --ink-low: var(--on-dark-low);
  --surface: var(--navy-700);
  --accent: var(--cyan-400);
  --red-500: var(--red-on-dark);
  --amber-500: var(--amber-on-dark);
  --amber-bg: rgba(245, 158, 11, 0.1);
  --red-bg: rgba(239, 68, 68, 0.1);
  --shadow-card: none;
  color: var(--on-dark-hi);
}

.light-scope {
  --line: rgba(11, 30, 51, 0.1);
  --line-strong: rgba(11, 30, 51, 0.18);
  --ink: #0b1e33;
  --ink-mid: #3d5876;
  --ink-low: #7189a6;
  --surface: #ffffff;
  --accent: var(--blue-600);
  --shadow-card:
    0 2px 8px rgba(11, 30, 51, 0.05), 0 12px 32px rgba(11, 30, 51, 0.08);
  color: var(--ink);
}