/* ============================================================
   frame.css — 월드북 지물(紙物) 프레임 · 책띠 · 디바이더 · 카드 장식
   기존 lorebook.css 위에 얹는 증축 레이어. 클래스 재정의 최소, 대부분 겹침.
   색은 --zone-accent 계열을 상속(zones.css) → 구역별로 물든다.
   ============================================================ */

/* ── 1. 지물 이중 괘선 프레임 (책 테두리) ───────────────────── */
.page {
  position: relative;
}

/* 안쪽 이중 괘선 + 종이 그림자 */
.page::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  z-index: 0;
  pointer-events: none;
  border: 1px solid var(--gild-soft);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 248, 231, 0.55),
    inset 0 0 22px rgba(120, 96, 60, 0.05);
}

/* 4모서리 코너 브래킷 (구역색) */
.page::after {
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  z-index: 0;
  pointer-events: none;
  --c: var(--zone-accent);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-repeat: no-repeat;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-size:
    var(--corner) 2px, 2px var(--corner),
    var(--corner) 2px, 2px var(--corner),
    var(--corner) 2px, 2px var(--corner),
    var(--corner) 2px, 2px var(--corner);
  opacity: 0.82;
}

/* 본문/헤더는 프레임 위로 */
.article-header,
.content,
.hero,
.toc-panel,
.related,
.pager,
.contents-panel,
.language-panel {
  position: relative;
  z-index: 1;
}

/* 제본(gutter) 그림자 — 책 펼침감 (데스크톱에서 또렷) */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(90, 72, 45, 0.14), transparent);
  opacity: 0.6;
}

/* ── 2. 책띠(obi) — 페이지 상단 구역 띠 ─────────────────────── */
.article-header::before {
  content: "";
  display: block;
  height: 6px;
  margin: 2px 0 13px;
  border-radius: var(--band-r);
  background: linear-gradient(90deg, var(--zone-accent), var(--zone-accent-2));
  box-shadow: 0 2px 10px -3px var(--zone-accent);
}

/* 표지는 띠를 굵고 짧게(엠블럼처럼) */
.cover .article-header::before {
  height: 8px;
  width: 60%;
  margin: 4px 0 16px;
}

/* 장 서문(챕터 띠) — 더 두툼하게 */
.section-index .article-header::before {
  height: 10px;
  margin: 2px 0 16px;
}

/* ── 3. 진행 띠 — 빛이 번지는 띠(회색→구역색) ───────────────── */
.reading-progress {
  background: rgba(120, 96, 60, 0.12);
}
[data-zone] .reading-progress-bar,
[data-variant] .reading-progress-bar {
  background: linear-gradient(90deg, var(--zone-accent), var(--zone-accent-2), #fff);
}

/* ── 4. 드롭캡 (article 첫 문단 첫 글자) ───────────────────── */
.page.article .content > .paragraph:first-of-type::first-letter {
  float: left;
  margin: 4px 9px 0 0;
  font-size: 3.05em;
  line-height: 0.8;
  font-weight: 800;
  color: var(--zone-accent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── 5. 인용(여운) — 좌측 라이트바 + 은은한 글로우 ──────────── */
.quote {
  border-left-color: var(--zone-accent);
  background: linear-gradient(90deg, var(--zone-soft), rgba(255, 250, 235, 0.55) 55%);
}
[data-zone] .quote {
  box-shadow: -3px 0 14px -8px var(--zone-accent);
}

/* ── 6. 소제목 브러시 밑줄 ─────────────────────────────────── */
.content-heading {
  position: relative;
}
.content-heading::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 7px;
  border-radius: var(--band-r);
  background: var(--zone-accent);
  opacity: 0.72;
}

/* ── 7. 카드/패널 — 골드 라인 + 구역 강조 ─────────────────── */
[data-zone] .data-box,
[data-zone] .codex-grid-panel,
[data-zone] .timeline-panel,
[data-zone] .image-pair {
  border-color: var(--gild-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
[data-zone] .box-title {
  color: var(--zone-ink);
}

/* data_box 도그이어(접힌 모서리) */
.data-box {
  overflow: hidden;
}
.data-box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent var(--zone-soft) transparent transparent;
}

/* 도감 카드 — 홀로그램 포토카드 기반(획득/잠금) */
.codex-card {
  position: relative;
  overflow: hidden;
}
[data-zone] .codex-card.is-featured {
  border-color: var(--zone-accent);
  background: color-mix(in srgb, var(--zone-accent) 14%, rgba(255, 250, 235, 0.6));
}
[data-zone] .codex-mark {
  border-color: var(--zone-accent);
  background:
    linear-gradient(135deg, var(--zone-soft), color-mix(in srgb, var(--zone-accent-2) 24%, transparent)),
    rgba(255, 255, 255, 0.4);
}

/* 타임라인 — 노드 구역색 + 연결선 */
[data-zone] .timeline-dot {
  border-color: var(--zone-accent);
  box-shadow: 0 0 0 4px var(--zone-soft);
}
.timeline-list li {
  position: relative;
}
.timeline-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(var(--zone-accent), transparent);
  opacity: 0.42;
}
.timeline-list li:last-child::after {
  display: none;
}

/* image_pair — 전(회색)/후(반짝) 대비: 첫 카드 그레이스케일 */
[data-zone] .image-pair-card:first-child img {
  filter: grayscale(0.82) brightness(0.99) contrast(0.97);
}
[data-zone] .image-pair-card:last-child {
  border-color: var(--zone-accent);
}

/* ── 8. 관련·페이저 — 구역 강조 테두리 ────────────────────── */
[data-zone] .status-pill {
  border-color: var(--zone-soft);
}

/* ── 9. 접근성: 투명도 축소 시 프레임 단순화 ───────────────── */
@media (prefers-reduced-transparency: reduce) {
  .top-nav {
    background: var(--paper);
    backdrop-filter: none;
  }
  .page::before {
    box-shadow: inset 0 0 0 3px var(--paper-soft);
  }
}