:root {
  --bg: #f8f7f1;
  --bg-alt: #efede2;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-ink: #0f2440;
  --line: rgba(15, 36, 64, 0.12);
  --line-strong: rgba(15, 36, 64, 0.24);
  --accent: #154c8a;
  --accent-soft: #d8e6f7;
  --danger: #b13a26;
  --danger-soft: #fbe5df;
  --text: #162231;
  --text-muted: #5f6f83;
  --shadow: 0 18px 50px rgba(17, 35, 58, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --page-width: 1180px;
  --font-sans: "IBM Plex Sans KR", "Pretendard", "Noto Sans KR", sans-serif;
  --font-serif: "Noto Serif KR", "KoPub Batang", serif;
}

body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top right, rgba(21, 76, 138, 0.1), transparent 26%),
    radial-gradient(circle at 10% 20%, rgba(177, 58, 38, 0.08), transparent 18%),
    linear-gradient(180deg, #f7f4ed 0%, #f4f1e9 50%, #f9f8f3 100%);
}

body::before {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(21, 76, 138, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 76, 138, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  opacity: 0.32;
  pointer-events: none;
  z-index: -1;
}