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

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

:root {
  font-size: 62.5%;

  --krds-color-primary-50: #246beb;
  --krds-color-secondary-50: #346fb2;
  --krds-color-secondary-10: #d6e0eb;
  --krds-color-gray-90: #1e2124;
  --krds-color-white: #fff;

  --color-text: var(--krds-color-gray-90);
  --color-text-muted: color-mix(
    in srgb,
    var(--krds-color-gray-90) 72%,
    var(--krds-color-white)
  );
  --color-surface: var(--krds-color-white);
  --color-surface-muted: color-mix(
    in srgb,
    var(--krds-color-gray-90) 4%,
    var(--krds-color-white)
  );
  --color-surface-strong: var(--krds-color-secondary-10);
  --color-border: color-mix(
    in srgb,
    var(--krds-color-gray-90) 24%,
    var(--krds-color-white)
  );
  --color-border-strong: color-mix(
    in srgb,
    var(--krds-color-gray-90) 58%,
    var(--krds-color-white)
  );
  --color-primary: var(--krds-color-primary-50);
  --color-primary-hover: color-mix(
    in srgb,
    var(--krds-color-primary-50) 82%,
    var(--krds-color-gray-90)
  );
  --color-focus: var(--krds-color-gray-90);
  --color-dim: color-mix(
    in srgb,
    var(--krds-color-gray-90) 72%,
    transparent
  );

  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4rem;
  --space-8: 6.4rem;

  --radius-indicator: 0.2rem;
  --radius-chip: 0.4rem;
  --radius-control: 0.6rem;
  --radius-card: 1rem;
  --radius-layer: 1.2rem;

  --font-body-medium: 1.7rem;
  --font-body-small: 1.5rem;
  --font-label-medium: 1.7rem;
  --font-heading-small: 1.9rem;
  --font-heading-medium: 2.4rem;
  --font-heading-large: 3.2rem;
  --font-display-small: 3.6rem;

  --line-height: 1.5;
  --content-max: 120rem;
  --control-min: 4.4rem;
  --header-height: 7.2rem;
}

html[data-contrast="high"] {
  --color-text: #fff;
  --color-text-muted: #fff;
  --color-surface: #000;
  --color-surface-muted: #000;
  --color-surface-strong: #000;
  --color-border: #fff;
  --color-border-strong: #fff;
  --color-primary: #d6e0eb;
  --color-primary-hover: #fff;
  --color-focus: #fff;
  --color-dim: color-mix(in srgb, #000 82%, transparent);
}

@media (max-width: 767px) {
  :root {
    --font-heading-large: 2.4rem;
    --font-display-small: 2.8rem;
  }
}