/* ==========================================================
   Base : jetons de design, reset, typographie
   Concept : une journée de soleil à Séoul. La page suit la
   course du soleil, de l'aube (hero) au coucher (pied de page).
   Papier hanji, soleil rouge-orangé de l'Il-wol-o-bong-do,
   miel et pêche pour la chaleur, vert dancheong en touche.
   ========================================================== */
:root {
  /* Couleurs : jour */
  --hanji: #fff7ec;        /* papier coréen, fond de page */
  --hanji-2: #fdecd6;      /* papier plus chaud, sections alternées */
  --card: #fffdf9;         /* cartes */
  --ink: #3b2416;          /* texte, brun chaud */
  --ink-soft: #7d5b45;     /* texte secondaire */
  --sun: #ef5a2f;          /* soleil rouge-orangé */
  --honey: #f6b23a;        /* miel, lumière */
  --peach: #ffb98f;        /* pêche */
  --rose: #e46c80;         /* rose chaud */
  --jade: #1f7a6c;         /* vert dancheong, touche coréenne */
  --line: rgba(59, 36, 22, .14);
  --glow: rgba(246, 178, 58, .45);
  --sky: #ffe1c2;          /* ciel de l'aube */
  --shadow: 0 24px 50px -28px rgba(110, 54, 20, .45);
  --pol-bg: #fffdf8;       /* papier des polaroïds */
  --pol-ink: #3b2416;
  --on-photo: #fff8ef;     /* texte posé sur une photo */

  /* Typographie */
  --f-display: "Hahmlet", "Noto Serif KR", Georgia, serif;
  --f-body: "Gowun Dodum", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-hand: "Nanum Pen Script", "Segoe Print", cursive;

  --step--1: .84rem;
  --step-0: 1.06rem;
  --step-1: 1.28rem;
  --step-2: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --step-4: clamp(3.6rem, 1.8rem + 8vw, 8.8rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  --radius: 22px;
  --beat: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hanji: #22120d; --hanji-2: #2d1811; --card: #331d15;
    --ink: #fbe9d6; --ink-soft: #d4ad91;
    --sun: #ff6a3c; --honey: #ffc25a; --peach: #ff9f72; --rose: #f2879a; --jade: #4fb6a3;
    --line: rgba(251, 233, 214, .14); --glow: rgba(255, 170, 70, .4);
    --sky: #4a1f1a;
    --shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
    --pol-bg: #fbf3e6; --pol-ink: #3b2416;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --hanji: #22120d; --hanji-2: #2d1811; --card: #331d15;
  --ink: #fbe9d6; --ink-soft: #d4ad91;
  --sun: #ff6a3c; --honey: #ffc25a; --peach: #ff9f72; --rose: #f2879a; --jade: #4fb6a3;
  --line: rgba(251, 233, 214, .14); --glow: rgba(255, 170, 70, .4);
  --sky: #4a1f1a;
  --shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
  --pol-bg: #fbf3e6; --pol-ink: #3b2416;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hanji);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s, color .6s;
}
/* grain de papier hanji */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(160, 110, 60, .05) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(160, 110, 60, .05) 0 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px;
}
img { max-width: 100%; display: block; }
a { color: var(--sun); }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
strong { font-weight: 700; color: var(--ink); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 6px; }

.label {
  font-family: var(--f-body);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hand { font-family: var(--f-hand); font-size: 1.5em; line-height: 1; color: var(--sun); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

@keyframes spin { to { transform: rotate(360deg); } }