@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 {

  --ink: #1c1830;
  --ink-2: #4a4463;
  --ink-3: #645e7d;
  --paper: #faf8f5;

  --paper-cool: #f3f0f8;

  --paper-warm: #f4ede4;
  --card: #fffefc;
  --surface-2: #efebf5;
  --line: rgba(28, 24, 48, 0.1);
  --line-strong: rgba(28, 24, 48, 0.18);

  --night-900: #1a1530;
  --night-800: #241d3f;
  --night-700: #2f2752;
  --on-dark-hi: #f7f4ff;
  --on-dark-mid: rgba(247, 244, 255, 0.78);
  --on-dark-low: rgba(247, 244, 255, 0.56);
  --line-on-dark: rgba(185, 164, 255, 0.16);

  --brand-700: #5527d6;
  --brand-600: #6c3cf0;
  --brand-500: #8b66f5;
  --brand-on-dark: #bba6ff;
  --brand-bg: rgba(108, 60, 240, 0.08);

  --brand-mark: rgba(108, 60, 240, 0.22);
  --brand-glow: rgba(108, 60, 240, 0.32);

  --ring-700: #9a3412;
  --ring-600: #c2410c;
  --ring-500: #f97316;
  --ring-on-dark: #fdba74;
  --ring-bg: rgba(249, 115, 22, 0.1);

  --ring-mark: rgba(249, 115, 22, 0.24);
  --ring-glow: rgba(249, 115, 22, 0.3);

  --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;
  /* 숫자도 Pretendard 로 통일한다. 자릿수 정렬은 .num 의 tabular-nums 가 맡는다 */
  --font-num: var(--font-sans);

  --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.01em;
  --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(28, 24, 48, 0.13),
    0 4px 10px rgba(28, 24, 48, 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(28, 24, 48, 0.16),
    0 1px 3px rgba(28, 24, 48, 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);
  }
}