/* ============================================================
   zones.css — 15구역 테마 + 화풍 변주 4프리셋
   [data-zone="NN"] / [data-variant="night|water|fog|stage"] 를
   #app(phone-frame) 또는 .page 에 부여하면 전체가 그 색으로 물든다.
   accent / accent-2 / ink 3개만 지정, --zone-soft 는 color-mix 자동.
   HEX는 각 구역 시그니처 색명 기반 제안값(월드북_디자인_크래프트_계획서_v1).
   ============================================================ */

[data-zone] {
  --zone-soft: color-mix(in srgb, var(--zone-accent) 15%, transparent);
}

/* 01 꿈꾸는 등대 — 남청 + 호박 불빛 */
[data-zone="01"] { --zone-accent: #2b3a67; --zone-accent-2: #e6a94d; --zone-ink: #21304f; }
/* 02 감정의 파도 항구 — 바다청록 + 석양주황 */
[data-zone="02"] { --zone-accent: #2f8f9d; --zone-accent-2: #f0894e; --zone-ink: #1e5a63; }
/* 03 기억의 숲 — 이끼초록 + 호박갈색 */
[data-zone="03"] { --zone-accent: #6f8f4f; --zone-accent-2: #b07d3c; --zone-ink: #47602f; }
/* 04 고민 해결 동굴 — 보라남 + 청록형광 */
[data-zone="04"] { --zone-accent: #4b3b7a; --zone-accent-2: #2fa58f; --zone-ink: #3a2d63; }
/* 05 자신감 폭포 — 물보라흰 + 무지개(물빛 강조) */
[data-zone="05"] { --zone-accent: #3ea3c7; --zone-accent-2: #d98cc0; --zone-ink: #2f6f8a; }
/* 06 휴식의 오아시스 — 연두 + 물빛 */
[data-zone="06"] { --zone-accent: #8cb85f; --zone-accent-2: #7bc4bf; --zone-ink: #55793a; }
/* 07 시간의 모래 광장 — 모래금 + 하늘하양 */
[data-zone="07"] { --zone-accent: #d6a94e; --zone-accent-2: #8fb8d6; --zone-ink: #9a7526; }
/* 08 성찰의 등산로 — 안개회청 + 이른햇살 */
[data-zone="08"] { --zone-accent: #7d94a3; --zone-accent-2: #e6c46b; --zone-ink: #4f606c; }
/* 09 목표의 반짝 산 — 황금 + 자홍 + 별빛 */
[data-zone="09"] { --zone-accent: #e0a52f; --zone-accent-2: #c0397e; --zone-ink: #9a5a1a; }
/* 10 우정의 다리 — 노을분홍 + 목재갈색 */
[data-zone="10"] { --zone-accent: #e28aa6; --zone-accent-2: #a9784f; --zone-ink: #a85874; }
/* 11 창의의 샘 — 무지개 + 물빛 */
[data-zone="11"] { --zone-accent: #57b0c9; --zone-accent-2: #cf7fb8; --zone-ink: #2f7d92; }
/* 12 도전의 절벽 — 절벽회청 + 노을주홍 */
[data-zone="12"] { --zone-accent: #6d8899; --zone-accent-2: #e2683f; --zone-ink: #445561; }
/* 13 꿈 조각 하우스 — 등불주황 + 밤남색 */
[data-zone="13"] { --zone-accent: #e3944a; --zone-accent-2: #2a3557; --zone-ink: #b06a24; }
/* 14 성장의 정원 — 새싹연두 + 흙갈색 */
[data-zone="14"] { --zone-accent: #86c559; --zone-accent-2: #7a5a3a; --zone-ink: #4f7d2f; }
/* 15 반성의 호수 — 호수은청 + 저녁보라 */
[data-zone="15"] { --zone-accent: #7cadc4; --zone-accent-2: #6b5a8c; --zone-ink: #4a6b7d; }

/* ============================================================
   화풍 변주 4프리셋 — 이미지 화풍(야경/물/안개/무대)의 웹 번역
   본문 가독성을 해치지 않는 장식 오버레이만. 애니는 reduced-motion에서 정지.
   ============================================================ */

/* 공통: 변주 오버레이가 앉을 자리 */
.phone-frame { position: relative; }

/* ── 야경/등불(night): 상단 따뜻한 글로우 + 밴드 램프 ───────── */
[data-variant="night"] .article-header::before {
  box-shadow: 0 0 16px -2px var(--zone-accent-2);
}
[data-variant="night"] .hero-image {
  filter: saturate(1.06) brightness(0.97);
}
[data-variant="night"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius);
  background: radial-gradient(60% 40% at 70% 20%, color-mix(in srgb, var(--zone-accent-2) 26%, transparent), transparent 70%);
}
.hero { position: relative; }

/* ── 물/반사(water): 하단 젖은 광택 + 잔물결 ──────────────── */
[data-variant="water"] .hero-image {
  filter: saturate(1.08);
}
[data-variant="water"] .hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background:
    linear-gradient(transparent, color-mix(in srgb, var(--zone-accent) 22%, transparent)),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.12) 6px 7px);
}

/* ── 안개/고지(fog): 상단 옅은 안개 + 채도 소폭↓ ──────────── */
[data-variant="fog"] .page > .content {
  --_fade: color-mix(in srgb, var(--paper-soft) 82%, transparent);
}
[data-variant="fog"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 46%);
}
[data-variant="fog"] .hero-image {
  filter: saturate(0.92) contrast(0.97);
}

/* ── 무대/축하(stage): 제목 스포트라이트 + 골드 밴드 ───────── */
[data-variant="stage"] .article-header {
  position: relative;
}
[data-variant="stage"] .article-header::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 78%;
  height: 120%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(50% 60% at 50% 0%,
    color-mix(in srgb, var(--zone-accent) 28%, transparent),
    color-mix(in srgb, var(--zone-accent-2) 12%, transparent) 45%,
    transparent 72%);
}
[data-variant="stage"] .article-header::before {
  height: 8px;
  background: linear-gradient(90deg, var(--zone-accent), var(--zone-accent-2), var(--zone-accent));
  box-shadow: 0 2px 14px -2px var(--zone-accent-2);
}