/* ==========================================================
   Mise en page commune : conteneur, sections, titres, boutons
   ========================================================== */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.block { position: relative; padding-block: clamp(72px, 10vw, 128px); scroll-margin-top: 80px; }
.block.warm { background: var(--hanji-2); }

.sec-head { display: grid; gap: 6px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 760px; }
.sec-head .ko {
  font-family: var(--f-display); font-weight: 300; font-size: var(--step-1);
  color: var(--sun); letter-spacing: .3em;
  display: inline-flex; align-items: center; gap: 12px;
}
.sec-head .ko::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--honey), var(--sun));
  box-shadow: 0 0 0 4px var(--glow);
}
.sec-head h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.01em; }
.sec-head p { color: var(--ink-soft); max-width: 58ch; }

.lede { font-size: var(--step-1); line-height: 1.6; max-width: 58ch; }
.prose { display: grid; gap: 1.05em; max-width: 64ch; }
.prose p { color: var(--ink); }

.btn {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--sun); background: var(--sun); color: #fff8ef;
  font-size: .95rem; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 10px 24px -12px var(--sun);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--sun); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--sun); color: var(--sun); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Apparition douce : contenu visible au repos, simple glissement */
.reveal { transform: translateY(28px); transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } }