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

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

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

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

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

:root {
  --r-card: 16px;
  --r-panel: clamp(24px, 3vw, 40px);
  --r-carve: clamp(64px, 9vw, 128px);
  --r-pill: 999px;

  --page-bg: #EEF1F6;
  --panel-deep: #132441;
  --panel-deep-2: #1B3763;
  --blue-tint: #E8F0FE;
  --amber-tint: #FDF3E2;
  --green-tint: #E7F7EF;

  --white: #FFFFFF;
  --surface: #F4F7FB;
  --surface-2: #E4EAF3;
  --line: #DEE5EF;
  --line-2: #C6D1E1;

  --on-dark: #FFFFFF;
  --on-dark-78: rgba(255, 255, 255, .78);
  --on-dark-56: rgba(255, 255, 255, .56);
  --on-dark-14: rgba(255, 255, 255, .14);
  --on-dark-08: rgba(255, 255, 255, .08);
  --blue-on-dark: #8FC1FF;

  --ink: #101B2B;
  --ink-2: #3A4A5E;
  --ink-3: #7C8CA1;

  --blue: #2E7CF0;
  --blue-2: #1D6FE0;
  --blue-ink: #0F4EAA;
  --blue-soft: rgba(46, 124, 240, .10);
  --blue-glow: rgba(46, 124, 240, .28);
  --amber: #E8930C;
  --amber-on-dark: #F7B54A;
  --red: #D93F45;
  --green: #0E8F4E;
  --green-on-dark: #4ADE80;

  --amber-ink: #A8690A;
  --red-ink: #B3272D;
  --green-ink: #0A6E3C;

  --sh-1: 0 6px 18px rgba(20, 38, 63, .08);
  --sh-2: 0 14px 34px rgba(20, 38, 63, .16);
  --sh-2-up: 0 20px 44px rgba(20, 38, 63, .2);
  --sh-hard: 3px 3px 0 var(--blue-ink);
  --sh-hard-up: 5px 5px 0 var(--blue-ink);

  --line-soft: #E3E9F2;

  --font-body: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

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

  --t-micro: 16px;
  --t-num: clamp(31px, 3vw, 39px);

  --t-deco-max: 96px;

  --lh-display: 1.24;
  --lh-h2-f: 1.32;
  --lh-h2-mf: 1.3;
  --lh-h3: 1.4;
  --lh-lead: 1.6;
  --lh-body: 1.72;

  --ls-display: -.026em;
  --ls-h2-f: -.022em;
  --ls-h2-mf: -.025em;
  --ls-h3: -.02em;
  --ls-lead: -.01em;
  --ls-micro: -.01em;

  --ls-mono: .05em;

  --shadow-header: 0 6px 20px rgba(19, 36, 65, .07);
  --ease: cubic-bezier(.4, 0, .2, 1);

  --page: 1280px;
  --gutter: 24px;
  --band-y: clamp(66px, 7vw, 108px);
  --band-y-row: clamp(46px, 4.8vw, 76px);
  --bleed: max(var(--gutter), calc((100vw - var(--page)) / 2));
  --header-h: 68px;
}

@media (max-width: 720px) {
  :root { --header-h: 60px; --r-carve: clamp(36px, 8vw, 64px); --r-panel: 20px; --gutter: 16px; }
}