/* ============================================================
   PAGE: 작품 미리듣기 (/{locale}/tours/{museum}/preview/{work}/)
   본문 조판은 blog.css 의 .prose 와 같은 규칙을 쓰고, 여기서는 이 페이지
   고유의 머리·챕터 목록·가이드 화면 사진만 정의한다.
   ============================================================ */

.preview-page {
  background: var(--paper);
  padding: 32px 0 96px;
}

.preview-header { margin-bottom: 28px; }

.preview-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 12px 0 0;
  text-wrap: balance;
}

.preview-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: var(--text-base);
  color: var(--stone);
}
.preview-artist { font-weight: 600; color: var(--slate); }
.preview-dot { color: var(--stone-3); }

/* 세로로 긴 작품(모나리자는 800×1192)이 화면을 통째로 먹지 않게 높이를
   묶는다. 가로 작품은 지금처럼 폭에 맞춰 들어간다. */
.preview-figure {
  margin: 0 0 32px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--forest-tint);
  display: flex;
  justify-content: center;
}
.preview-figure img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
}

/* 대본은 본문 조판(blog.css 의 .prose)을 그대로 쓰되 문단 간격만 좁힌다.
   내레이션 대본이라 한 줄이 한 호흡이고(영어 내보내기는 아예 문장 단위로
   줄이 나뉘어 온다) 기사 간격을 그대로 두면 페이지가 띄엄띄엄해진다.
   원본에 줄바꿈이 들어 있는 문단은 pre-line 으로 그 줄을 살린다 — 가이드가
   "(만들어진 이유)" 처럼 소제목을 줄로 끊어 둔 곳이 있다. */
.preview-script p {
  white-space: pre-line;
  margin: 10px 0;
}

.preview-chapters {
  margin-top: 40px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--paper-2);
}
.preview-chapters-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 12px;
}
.preview-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.preview-chapter-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: var(--text-base);
  color: var(--ink);
}
.preview-chapter-time {
  flex: 0 0 auto;
  min-width: 48px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--forest);
}

.preview-cta { margin-top: 40px; }

.preview-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}
.preview-pager-link {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  color: inherit;
  font-weight: 600;
  line-height: 1.35;
  transition: border-color var(--t-base);
}
.preview-pager-link:hover { border-color: var(--forest); }
.preview-pager-next { justify-content: flex-end; text-align: right; }
.preview-pager-arrow { color: var(--stone); }

@media (max-width: 640px) {
  .preview-page { padding: 20px 0 64px; }
  .preview-figure { border-radius: 14px; margin-bottom: 24px; }
  .preview-chapters { padding: 16px 16px; border-radius: 14px; }
  .preview-pager-next { justify-content: flex-start; text-align: left; }
}