@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;
}

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

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

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

:root {

  --ink: #0b1e33;
  --ink-2: #3d5876;
  --ink-3: #526986;
  --paper: #f7f9fc;

  --paper-cool: #eef2f7;

  --paper-warm: #efebe1;
  --card: #fcfdfe;
  --surface-2: #e9eef5;
  --line: rgba(11, 30, 51, 0.1);
  --line-strong: rgba(11, 30, 51, 0.18);

  --navy-900: #0b1e33;
  --navy-800: #122a45;
  --navy-700: #1a3557;
  --on-dark-hi: #f1f6fc;
  --on-dark-mid: rgba(241, 246, 252, 0.78);
  --on-dark-low: rgba(241, 246, 252, 0.56);
  --line-on-dark: rgba(148, 184, 222, 0.14);

  --blue-700: #1e40af;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-on-dark: #8fc1ff;
  --blue-bg: rgba(37, 99, 235, 0.08);

  --blue-mark: rgba(37, 99, 235, 0.22);
  --blue-glow: rgba(37, 99, 235, 0.28);

  --air-700: #0a6e3c;
  --air-600: #0e8f4e;
  --air-500: #14a06e;
  --air-on-dark: #4ade80;
  --air-bg: rgba(14, 143, 78, 0.08);

  --air-mark: rgba(14, 143, 78, 0.22);
  --air-glow: rgba(14, 143, 78, 0.28);

  --link-500: #1a9a9e;

  --amber-500: #d97706;
  --amber-on-dark: #f59e0b;
  --red-500: #dc2626;
  --red-on-dark: #ef4444;

  --font-sans: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui,
    sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --t-fine: 14px;
  --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(56px, 6.7vw, 96px);
  --t-num: clamp(31px, 3vw, 39px);
  --t-num-xl: clamp(38px, 3.8vw, 49px);

  --lh-display: 1.16;
  --lh-h2-f: 1.24;
  --lh-h2-mf: 1.3;
  --lh-h3: 1.4;
  --lh-lead: 1.6;
  --lh-small: 1.66;
  --lh-body: 1.72;
  --lh-micro: 1.6;
  --lh-num-xl: 1.16;

  --ls-display: -0.035em;
  --ls-h2-f: -0.03em;
  --ls-h2-mf: -0.025em;
  --ls-h3: -0.02em;
  --ls-lead: -0.01em;
  --ls-small: -0.01em;
  --ls-body: -0.01em;
  --ls-micro: -0.01em;
  --ls-num: 0.02em;
  --ls-pill: 0.04em;
  --ls-plain: 0.1em;

  --page: 1280px;
  --gutter: 24px;
  --sec-y: clamp(112px, 13vw, 184px);

  --sec-y-mezzo: calc(var(--sec-y) * 0.72);

  --sec-y-wide: calc(var(--sec-y) * 1.35);

  --r-paper: 6px;
  --r-ui: 12px;
  --r-pill: 999px;

  --tab-h: 20px;
  --tab-w: clamp(168px, 16vw, 232px);

  --sh-paper: 0 28px 64px rgba(11, 30, 51, 0.13),
    0 4px 10px rgba(11, 30, 51, 0.07);
  --sh-ui: 0 6px 18px rgba(20, 38, 63, 0.08);
  --sh-ui-up: 0 14px 34px rgba(20, 38, 63, 0.16);

  --sh-paper-near: 0 6px 14px rgba(11, 30, 51, 0.16),
    0 1px 3px rgba(11, 30, 51, 0.1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --drive-dur: 1.4s;
  --ease-drive-in: cubic-bezier(0.33, 1, 0.68, 1);

  --atmos-a: 0.32;
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
    /* 모바일: 리드는 small 로, 디스플레이는 한 단계 아래(h2-f)로 내린다 */
    --t-lead: var(--t-small);
    --t-display: var(--t-h2-f);
  }
}