/**
 * [우문현답] 디자인 토큰 (tokens.css)
 * 
 * - 낮 테마: 종이와 초록 (Paper & Sage Green)
 * - 밤 테마: 달빛 서재 (Moonlit Study)
 * 명세: specs/SPEC_디자인_대개편.md 5.2
 */

:root {
  /* 5.2 낮 (기본): 종이와 초록 */
  --paper: #f8f5ee;        /* 배경 */
  --surface: #fffdf8;      /* 카드 및 패널 표면 */
  --ink: #293d33;          /* 본문 텍스트 */
  --muted: #657064;        /* 보조 텍스트 */
  --green: #365b46;        /* 주요 버튼, 핵심 강조 */
  --sage: #e9eee3;         /* 옅은 배경, 활성 칩 */
  --clay: #92523d;         /* 숫자, 초점 테두리, 움직이는 효 */
  --line: #dddccf;         /* 구분선 */
  --serif: "Noto Serif KR", "Batang", "Songti SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Microsoft YaHei", sans-serif;

  /* 그림자 */
  --shadow-soft: 0 4px 20px rgba(41, 61, 51, 0.06);
  --shadow-float: 0 10px 30px rgba(41, 61, 51, 0.12);
}

/* 🌙 밤의 성찰을 위한 '달빛 서재' 테마 */
body.theme-moonlit {
  --paper: #181d1a;
  --surface: #222924;
  --ink: #eae5d9;
  --muted: #9aa89b;
  --green: #598668;
  --sage: #2a352d;
  --clay: #c77d64;
  --line: #344037;
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.5);
}

/* 공통 기초 스타일 */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font: 16px/1.8 var(--sans);
  word-break: keep-all;
  overflow-wrap: break-word;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

/* 📜 한지/종이 미세 질감 노이즈 오버레이 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

body.theme-moonlit::before {
  opacity: 0.045;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  body, * {
    transition: none !important;
    animation: none !important;
  }
}