:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-bright: #fffdf8;
  --ink: #211f1c;
  --ink-soft: #56514a;
  --ink-faint: #625d56;
  --line: #c9c2b7;
  --line-strong: #8a8379;
  --blue: #2147e7;
  --blue-dark: #1533ac;
  --blue-soft: #8ea5ff;
  --blue-pale: #dce4ff;
  --steel: #d9dcda;
  --cheese: #ffc642;
  --danger: #b33124;
  --success: #17683b;
  --focus: #2147e7;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --wrap: 1180px;
  /* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
  --hero-wide: 2160px;
  --stage-wide: 1680px;
  --workbench-wide: 1480px;
  --copy-wide: 900px;
  --media-wide: 1120px;
  --gutter: clamp(18px, 4vw, 52px);
  --section: clamp(76px, 10vw, 144px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 18px 50px rgb(33 31 28 / 10%);
  --header-height: 78px;
}

@media (max-width: 720px) {
  :root {
    --header-height: 64px;
    --section: 72px;
  }
}

@media (min-width: 120rem) {
  :root {
    --wrap: 1320px;
  }
}

@media (min-width: 150rem) {
  :root {
    --wrap: 1400px;
  }
}