@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url("/assets/fonts/PretendardVariable.subset.woff2")
    format("woff2-variations");
}

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

:root {

  --navy-900: #0a1e3c;
  --navy-700: #12356b;

  --teal-500: #0f6e96;
  --teal-300: #4fb4d8;
  --teal-050: #ecf5f9;

  --white: #ffffff;
  --gray-100: #f4f6f8;
  --gray-300: #d8dee5;
  --gray-600: #5a6673;

  --gray-450: #9aa4b0;
  --black-900: #111417;

  --accent: #e8433a;

  --color-text: var(--black-900);
  --color-text-muted: var(--gray-600);
  --color-text-invert: var(--white);
  --color-heading: var(--navy-700);

  --color-bg: var(--white);
  --color-bg-subtle: var(--teal-050);
  --color-bg-card: var(--gray-100);
  --color-bg-dark: var(--navy-900);

  --color-border: var(--gray-300);
  --color-border-strong: var(--navy-700);
  --color-border-dark: rgba(255, 255, 255, 0.16);

  --color-link: var(--teal-500);
  --color-link-hover: var(--navy-700);
  --color-focus: var(--teal-500);

  --overlay-hero: linear-gradient(
    100deg,
    rgba(10, 30, 60, 0.92) 0%,
    rgba(10, 30, 60, 0.86) 45%,
    rgba(18, 53, 107, 0.72) 100%
  );

  --overlay-solid: rgba(10, 30, 60, 0.8);

  --font-ko: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
    Arial, sans-serif;

  --font-body: var(--font-ko);

  --font-mono-num: var(--font-en);

  --fs-h1: clamp(2.2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-body: 1.7;

  --ls-heading-ko: -0.02em;
  --ls-heading-en: 0em;
  --ls-body: 0em;
  --ls-eyebrow: 0.14em;

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

  --section-y: var(--space-5);

  --container-max: 1200px;
  --container-pad: 16px;
  --grid-columns: 12;
  --grid-gap: var(--space-3);
  --measure: 68ch;

  --header-h: 64px;
  --mobilebar-h: 60px;

  --topbar-h: 0px;

  --header-total-h: calc(
    var(--header-h) + var(--topbar-h) + var(--border-w)
  );

  --radius: 4px;
  --radius-sm: 2px;
  --border-w: 1px;
  --border: var(--border-w) solid var(--color-border);
  --border-dark: var(--border-w) solid var(--color-border-dark);

  --shadow-header: 0 1px 0 0 var(--gray-300);
  --shadow-overlay: 0 8px 24px rgba(10, 30, 60, 0.12);

  --shadow-header-lift: 0 10px 30px -14px rgba(10, 30, 60, 0.3);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
  --transition: color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);

  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-header: 420ms;

  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-mobilebar: 300;
  --z-drawer: 400;

  --z-toast: 450;
  --z-skiplink: 500;
}

@media (min-width: 768px) {
  :root {
    --container-pad: 24px;
    --section-y: var(--space-6);
    --header-h: 80px;
  }
}

@media (min-width: 900px) {
  :root {
    --topbar-h: 36px;
  }
}

html[lang="en"] {
  --font-body: var(--font-en);
  --ls-heading: var(--ls-heading-en);
}
html[lang="ko"] {
  --font-body: var(--font-ko);
  --ls-heading: var(--ls-heading-ko);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-header: 1ms;
  }
}