@font-face {
  font-family: "Kartrider";
  src: url("../fonts/KartriderKor-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Kartrider";
  src: url("../fonts/KartriderKor-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-display: swap;
}

:root {

  --c-blue-900: #0044a9;
  --c-blue-800: #0074db;
  --c-blue-700: #0086ef;
  --c-blue-600: #0094fd;
  --c-blue-500: #2ea5fe;
  --c-blue-400: #5ab4fd;
  --c-sky: #3ed2ff;
  --c-blue-200: #b9defe;
  --c-blue-100: #e6f4ff;
  --c-blue-050: #e2f2fe;

  --c-ink: #161618;
  --c-ink-2: #262626;
  --c-ink-3: #363638;
  --c-gray-600: #676769;
  --c-gray-500: #8f8f91;
  --c-gray-400: #9e9e9f;
  --c-gray-300: #afafb2;
  --c-gray-200: #b4b4b4;
  --c-gray-100: #d9d9d9;
  --c-white: #ffffff;

  --c-white-90: rgba(255, 255, 255, 0.9);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-glass: rgba(230, 244, 255, 0.9);
  --c-glass-25: rgba(230, 244, 255, 0.25);
  --c-blue-200-70: rgba(185, 222, 254, 0.7);

  --font-display: "Kartrider", "Pretendard", system-ui, sans-serif;
  --font-body: "Pretendard", system-ui, -apple-system, sans-serif;

  --fs-hero-lead: clamp(17px, 1.25vw, 24px);
  --fs-section: clamp(32px, 3.125vw, 60px);
  --fs-challenge: clamp(36px, 3.75vw, 72px);
  --fs-card-title: clamp(22px, 1.875vw, 36px);
  --fs-lead: clamp(15px, 1.25vw, 24px);
  --fs-body: clamp(14px, 0.94vw, 18px);
  --fs-sm: clamp(13px, 0.84vw, 16px);
  --fs-btn: clamp(16px, 1.35vw, 26px);
  --fs-btn-sm: clamp(14px, 1.05vw, 20px);

  --r-pill: 69px;
  --r-card: 8px;
  --r-chip: 6px;
  --shadow-card: 2px 4px 8px 0 rgba(0, 0, 0, 0.25);
  --shadow-float: 4px 6px 8px 0 rgba(0, 0, 0, 0.25);
  --shadow-deep: 0 8px 15px 0 rgba(0, 0, 0, 0.25);

  --header-h: 106px;
  --wrap: 1155px;
  --wrap-wide: 1440px;
  --col: 592px;
  --gutter: clamp(20px, 4vw, 100px);
}
