/* ================================================================
   v03-modes.css — maker preview용 v0.3 모드별 기본형 룰
   ─────────────────────────────────────────────────────────────
   ⚠ TODO: 이 파일과 viewer.css 끝부분의 v0.3 섹션은 같은 룰이다.
   maker preview에서 viewer와 같은 외양을 받기 위해 사본을 둔다.
   다음 정리 단계에서 단일 source of truth로 통일 가능.
   ================================================================ */

   ║  v0.3 모드별 기본형 레이아웃 — 2단계 (감상 화면 구조)      ║
   ╠═══════════════════════════════════════════════════════════╣
   ║  text  / picturebook / movie 3개 모드의 기본형 구조.       ║
   ║  기존 .scene-screen 룰 위에 cascading으로 덮어씀.          ║
   ║                                                            ║
   ║  새 클래스(viewer-render._renderScene*에서 부여):          ║
   ║  · .scene-screen--text      → 텍스트형 (중앙 카드)         ║
   ║  · .scene-screen--pb        → 그림책형 (TB/LR 분할)        ║
   ║    .pb--tb / .pb--lr                                       ║
   ║  · .scene-screen--movie     → 무비형 (미디어 + 결정 패널)  ║
   ║                                                            ║
   ║  테마 슬롯 (CSS 변수) — 다음 단계에서 본격 활용:            ║
   ║  --v03-card-bg, --v03-card-fg, --v03-divider 등            ║
   ║  지금은 기존 viewer.css 변수(--text 등)와 합리적 톤만 사용. ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ── 테마 슬롯 변수 (v0.3 기본형 — light 톤 자체 정의) ──
   기존 viewer.css 변수와 충돌 안 하도록 v03- 접두사 사용 */
.scene-screen--text,
.scene-screen--pb,
.scene-screen--movie {
  /* W8 Warm Paper: 종이톤 player.
     원칙(사용자 확정): 구조 안전 — 마크업/JS/클래스 0% 건드림. 변수만 종이톤으로.
     --v03-media-bg/fg는 무비형 미디어 정체성 (다크 허용)이라 어두운 톤 유지. */
  --v03-bg:           #fbf6ea;
  --v03-bg-soft:      #f4ecd8;
  --v03-card-bg:      #fffaee;
  --v03-card-border:  rgba(80,50,20,0.10);
  --v03-card-shadow:  0 1px 2px rgba(120,90,50,0.06), 0 8px 24px rgba(120,90,50,0.08);
  --v03-fg:           #2b1f10;
  --v03-fg-soft:      #4a3820;
  --v03-fg-muted:     #9a8868;
  --v03-divider:      rgba(80,50,20,0.10);
  --v03-accent:       #c66f4a;
  --v03-btn-bg:       #fffaee;
  --v03-btn-fg:       #2b1f10;
  --v03-btn-border:   rgba(80,50,20,0.18);
  --v03-btn-hover-bg: #f4ecd8;
  --v03-btn-hover-bd: #c66f4a;
  --v03-illust-bg:    #f4ecd8;
  --v03-illust-mark:  #9a8868;
  --v03-media-bg:     #1a1d24;   /* 무비형 정체성 — 어두운 톤 유지 */
  --v03-media-fg:     #ffffff;   /* 미디어 위 흰 글씨 유지 */
  --v03-r-sm:         4px;
  --v03-r-md:         6px;
  --v03-r-lg:         10px;
}

/* ╭─────────────────────────────────────────╮
   │  공통: v0.3 버튼 (모드별 색만 변주)     │
   ╰─────────────────────────────────────────╯ */
.choice-v03 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--v03-btn-border);
  background: var(--v03-btn-bg);
  color: var(--v03-btn-fg);
  border-radius: var(--v03-r-md);
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  /* W4-D 안전망: 라벨이 maxlength를 우회해 들어와도 화면 깨짐 방지.
     · 한 줄 표시 + 넘으면 ellipsis(...)
     · button 자체는 단일 텍스트 자식 + ::after 화살표 구조라
       overflow를 button 단계에서 처리. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
/* button 안 텍스트가 길면 ellipsis 동작 위해 — text 자식이 따로 없는 경우
   button 자체에 white-space:nowrap이 적용되어 ::after와 함께 자동 처리 */
/* W7-A 정정 v6: 무비형 선택지 — 어두운 overlay 위 반투명 흰 버튼 (가독성 + 영상 위 자연스러움) */
.scene-screen--movie .choice-v03 {
  background: rgba(255, 255, 255, 0.92);
  color: #181a1f;
  border-color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-align: center;
  justify-content: center;
}
.scene-screen--movie .choice-v03:hover:not(:disabled) {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-1px);
}

.choice-v03:hover:not(:disabled) {
  background: var(--v03-btn-hover-bg);
  border-color: var(--v03-btn-hover-bd);
}
.choice-v03:active:not(:disabled) {
  transform: scale(0.99);
}
.choice-v03:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.choice-v03::after {
  content: '→';
  color: var(--v03-fg-muted);
  margin-left: 12px;
  flex-shrink: 0;
}
/* LEVELS-FEEDBACK-2(2026-07-20): 빈 라벨 기본 문구('다음 장면으로' 등)는 실제 입력한 글처럼.
   viewer.css의 동일 셀렉터 수정(2026-07-19)이 로드 순서(viewer.css → v03-modes.css)상
   여기 흐림 규칙에 덮여 무력했음 — 이 파일 쪽을 정본으로 동기. */
.choice-v03--empty {
  color: inherit;
  font-style: normal;
}

/* ╭─────────────────────────────────────────╮
   │  모드 1: 텍스트형 (text)                │
   │  배경 + 중앙 카드 + 카드 안 (제목→본문→버튼) │
   ╰─────────────────────────────────────────╯ */
.scene-screen--text {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--v03-bg);
}
.scene-screen--text .scene-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.scene-screen--text .scene-bg-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.25);
}
.scene-screen--text .scene-bg-solid {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2c3245 0%, #3a4258 100%);
}
.scene-screen--text .scene-content--text {
  position: absolute; inset: 0;
  pointer-events: none;  /* 카드만 events 받음 */
}
.scene-screen--text .text-card {
  position: absolute;
  /* JS가 inline style로 left/top/width/(height) 설정. transform으로 center 기준 */
  transform: translate(-50%, -50%);
  background: var(--v03-card-bg);
  color: var(--v03-fg);
  border: 1px solid var(--v03-card-border);
  border-radius: var(--v03-r-lg);
  box-shadow: var(--v03-card-shadow);
  padding: 28px 32px 22px;
  pointer-events: auto;
  /* 가시성 보장 — 최소 크기 (내용이 너무 작아져 사라지지 않게) */
  min-width: 240px;
  min-height: 120px;
  /* 화면 안 유지 — 너무 커져 부모 밖으로 안 나가게 */
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  /* 내부 스크롤 — 콘텐츠가 넘쳐도 카드 자체는 화면 안에 */
  overflow: auto;
  /* 콘텐츠 분포: 본문이 늘어나도 버튼이 항상 보이게 */
  display: flex;
  flex-direction: column;
}
.scene-screen--text .text-card__title {
  /* W5: font-size는 아래 본문 위계 정정 룰에서 본문 × 0.78로 결정 (보조 위계).
     여기선 line-height/letter-spacing/margin 등만 정의. */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--v03-fg);
  margin: 0 0 14px;
}
.scene-screen--text .text-card__body {
  /* W5: font-size는 아래 W5 본문 위계 룰에서 var(--text-fs-body, 18px)로 결정.
     여기선 line-height/margin/flex 등 박스 동작만 정의. */
  line-height: 1.7;
  color: var(--v03-fg);
  margin: 0 0 18px;
  flex: 1;  /* 본문이 영역 차지, 버튼은 아래로 밀림 */
  /* HOTFIX-LAYOUT: 긴 본문에서 행동버튼(.text-card__actions)이 카드 밖으로 밀리거나
     본문 뒤로 이어지지 않도록 — 본문은 카드 flex 공간 안에서만 스크롤한다.
     min-height:0 이 없으면 flex 자식이 콘텐츠 높이만큼 커져 카드를 넘겨 actions를 밀어냄.
     (textLength==='long' 여부와 무관하게 항상 본문 영역 내부 스크롤 → 버튼 아래 고정.) */
  min-height: 0;
  overflow-y: auto;
  /* 줄바꿈 정책: 한국어 단어 단위 + 영문/숫자 강제 줄바꿈 */
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.scene-screen--text .text-card__body--scroll {
  /* 매우 긴 본문 — 카드 내부에서 자체 스크롤 */
  overflow-y: auto;
  max-height: 50vh;
}
.scene-screen--text .text-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--v03-divider);
  /* 버튼 영역 가시성 보장 (v0.3 명세) — 카드 안 항상 맨 아래 */
  flex-shrink: 0;
}

/* ╭─────────────────────────────────────────╮
   │  모드 2: 그림책형 (picturebook)         │
   │  4단계 갱신:                              │
   │  · 분할형(split):       TB 60:40         │
   │  · 그림 중심형(imageCenter): TB 80:20    │
   │  · A4 페이지 컨테이너 가운데 (좌우 여백) │
   │  · LR 폐기 (legacy 데이터 호환만 유지)   │
   ╰─────────────────────────────────────────╯ */
.scene-screen--pb {
  position: absolute;
  inset: 0;
  background: var(--v03-bg);
  /* A4 컨테이너가 가운데 들어가도록 화면을 안 꽉 채움.
     VIEWER-PLAY-LAYOUT-1: 카드 둘레 여백을 12→6으로 축소해 페이지 카드를 살짝 키움(저위험).
     ※ 와이드 화면(노트북16:9·태블릿 가로)의 주 여백은 .pb-page의 A4 비율(297/210) letterbox이며,
        이는 의도된 작품 비율이라 본 단계에서 변경하지 않음(→ 별도 VIEWER-PLAY-ASPECT 결정 사안). */
  padding: 6px;
  display: grid;
  place-items: center;
  /* 컨테이너 쿼리 활성화 — 자식 .pb-page가 viewer-frame 모양에 따라 fit */
  container-type: size;
  container-name: pbstage;
  box-sizing: border-box;
}

/* A4 페이지 컨테이너 — 가운데, 좌우 또는 상하 여백 유지.
   기본은 가로 A4 비율 (297:210). container query가 viewer-frame 모양에 따라
   어느 차원을 100% 차지할지 결정.
   · 부모가 A4보다 가로 길음(>1.414) → height: 100% 기준 (좌우 여백)
   · 부모가 A4보다 세로 길음(≤1.414) → width: 100% 기준 (상하 여백) */
.scene-screen--pb .pb-page {
  display: flex;
  flex-direction: column;
  aspect-ratio: 297 / 210;
  /* fallback: container query 미지원 환경 */
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  /* v36: 자식(.pb-frame > .pb-text)이 콘텐츠 크기로 페이지 비율을 깨지 못하게.
     4+개 버튼 wrap 시 박스 늘어나는 문제 root fix. */
  overflow: hidden;
  min-height: 0;
  /* W8 따뜻한 디자인 — 책 페이지처럼 떠 있는 종이결 그림자 + 미세 보더 */
  background: var(--v03-card-bg);
  border-radius: 12px;
  border: 1px solid rgba(80,50,20,0.06);
  box-shadow:
    0 1px 2px rgba(120,90,50,0.06),
    0 8px 28px rgba(120,90,50,0.14),
    0 24px 48px rgba(120,90,50,0.10);
}
@container pbstage (aspect-ratio > 297/210) {
  .scene-screen--pb .pb-page {
    width: auto;
    height: 100%;
  }
}
@container pbstage (aspect-ratio <= 297/210) {
  .scene-screen--pb .pb-page {
    width: 100%;
    height: auto;
  }
}

/* ── VIEWER-PLAY-ASPECT-1A: 감상 모드 가로 작품 페이지 비율 완화 (A4 1.414 → 3:2 1.5) ──
   와이드/태블릿 가로에서 A4 letterbox 좌우 여백을 줄여 화면을 더 씀. 그림은 contain fit이라 안 잘림.
   적용 조건(전부 만족): 편집/다듬기 아님(body:not(.edit-mode-active)) · 세로작품 아님
   (:not([data-page-orientation="portrait"])) · 가로 화면(@media min-width:601px and min-aspect-ratio:1/1).
   → 편집 A4 / 세로작품 / 모바일(≤600 block) / 세로화면(≤1 portrait A4)은 미적용(기존 정책 유지).
   특이도가 기존 규칙보다 높아 cascade로 이김. @container 안에서도 body:not(...) 셀렉터 정상 동작. */
@media (min-width: 601px) and (min-aspect-ratio: 1/1) {
  body:not(.edit-mode-active):not([data-page-orientation="portrait"]) .scene-screen--pb .pb-page {
    aspect-ratio: 3 / 2;
  }
  @container pbstage (aspect-ratio > 3/2) {
    body:not(.edit-mode-active):not([data-page-orientation="portrait"]) .scene-screen--pb .pb-page {
      width: auto;
      height: 100%;
    }
  }
  @container pbstage (aspect-ratio <= 3/2) {
    body:not(.edit-mode-active):not([data-page-orientation="portrait"]) .scene-screen--pb .pb-page {
      width: 100%;
      height: auto;
    }
  }
}

/* 좁은 환경 (모바일 세로) — 세로 A4 비율 자동 전환 */
@media (max-aspect-ratio: 1/1) {
  .scene-screen--pb .pb-page {
    aspect-ratio: 210 / 297;
  }
}

/* ── W9: portrait 작품 — 페이지 비율 세로 A4 (210:297) ──
   body[data-page-orientation="portrait"]면 .pb-page 비율 뒤집고
   container query 분기점도 0.707 기준으로 다시 잡음. */
body[data-page-orientation="portrait"] .scene-screen--pb .pb-page {
  aspect-ratio: 210 / 297;
}
@container pbstage (aspect-ratio > 210/297) {
  body[data-page-orientation="portrait"] .scene-screen--pb .pb-page {
    width: auto;
    height: 100%;
  }
}
@container pbstage (aspect-ratio <= 210/297) {
  body[data-page-orientation="portrait"] .scene-screen--pb .pb-page {
    width: 100%;
    height: auto;
  }
}

.scene-screen--pb .pb-frame {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 10px;
  background: var(--v03-bg-soft);
  border-radius: var(--v03-r-md);
  padding: 8px;
  box-sizing: border-box;
  /* v36: 자식(텍스트 영역) 콘텐츠가 grid row를 넘지 못하게 — 4+개 버튼 wrap 시
     박스(.pb-page 큰 네모) 깨지는 문제 방지. 자식은 overflow auto로 자체 스크롤. */
  overflow: hidden;
  min-height: 0;
}

/* v36: grid item(.pb-text, .pb-illust)의 min-height auto가 자식 콘텐츠로 row를 늘림.
   둘 다 0으로 강제 — grid-template-rows fr 비율 정확히 유지. */
.scene-screen--pb.pb--split .pb-text,
.scene-screen--pb.pb--imagecenter .pb-stage,
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only {
  min-height: 0;
}

/* 분할형 (split)
   W9: landscape (기본) = 위 그림 80 / 아래 텍스트+선택지 20 — 그림이 큰 구조.
   v36: 사용자 결정 — 가로분할형 8:2 → 7:3. 제목 카드 좌상단 + 본문 + 4개까지 버튼이
   다른 모드(2×2 grid)와 같은 규칙으로 들어가도록 텍스트 영역 50% 확보.
   portrait는 아래 별도 룰에서 60:40으로 오버라이드. */
.scene-screen--pb.pb--split .pb-frame {
  grid-template-rows: minmax(0, 7fr) minmax(0, 3fr);
  grid-template-columns: 1fr;
}
body[data-page-orientation="portrait"] .scene-screen--pb.pb--split .pb-frame {
  /* portrait 작품에선 본문 영역 충분히 (페이지가 세로라 6:4여도 본문 적정) */
  grid-template-rows: minmax(0, 6fr) minmax(0, 4fr);
}

/* 그림 중심형 (imageCenter) — 상단 장면(그림+제목+본문) 80 / 하단 선택지 20.
   상단은 .pb-stage가 이미지 위에 제목/본문 올림 (overlay 형태). */
.scene-screen--pb.pb--imagecenter .pb-frame {
  grid-template-rows: minmax(0, 8fr) minmax(0, 2fr);
  grid-template-columns: 1fr;
}

/* VIEWER-FILL-MAX-1: 감상(play) 전용 — 그림(일러스트)을 무대에 더 가득 채운다.
   그림을 가장자리에서 밀어내던 '고정 px 여백 띠'만 회수(6→3, 8→4, gap 10→6).
   ⚠️불변: 무대·페이지 3:2 비율 / 그림 background-size:contain(안 잘림) / 말풍선 %좌표 /
   grid 8fr:2fr 비율은 그대로. 편집(edit-mode-active)은 기존 6/8/10px 유지=다듬기 레이아웃 불변. */
body:not(.edit-mode-active) .scene-screen--pb {
  padding: 3px;   /* 카드 둘레 여백 6 → 3 */
}
body:not(.edit-mode-active) .scene-screen--pb.pb--imagecenter .pb-frame {
  padding: 4px;   /* 그림 그릇 사방 8 → 4 */
  gap: 6px;       /* 그림 ↔ 하단 선택지 간격 10 → 6 */
}

/* 그림 중심형 stage — 그림 + 그 위 제목 / 본문 글상자 (overlay) */
.scene-screen--pb.pb--imagecenter .pb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--v03-r-md);
  overflow: hidden;
}
/* 그림 중심형 illust — 강한 우선순위로 inline background-image가 안 잘리게.
   기본 .pb-illust 룰의 background shorthand가 inline image를 reset하는 경우 방어.
   W8: cover → contain. 학생 그림 잘림 절대 방지 (사용자 핵심 원칙). */
.scene-screen--pb.pb--imagecenter .pb-stage .pb-illust {
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 0;
  /* W9: 그림 영역 = 페이지 색(흰). 학생 흰 종이 그림과 자연스럽게 연결. */
  background-color: #fffefa;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* 그림 없음 placeholder — empty 상태에서만 베이지 (그림 슬롯 비었음 표시) */
.scene-screen--pb.pb--imagecenter .pb-stage .pb-illust--empty {
  background-color: var(--v03-illust-bg, #eef2f8);
  display: grid;
  place-items: center;
}

.scene-screen--pb.pb--imagecenter .pb-stage__title-overlay {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  font-family: var(--v03-font-h, var(--font-h, sans-serif));
  font-size: 18px;
  font-weight: 700;
  color: var(--v03-card-fg, #1a1a1a);
  text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}
.scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  position: absolute;
  /* W4: 기본값 — viewer-render의 inline style이 left/top/width/height/background를 덮어쓰지만
     null/legacy 작품 대비 fallback 값 둠. PB_BODY_BOX_DEFAULTS와 일관 (15/25/55/0.85). */
  top: 25%;
  left: 15%;
  width: 55%;
  /* height: 명시값 있으면 inline style이 적용됨, 없으면 콘텐츠 자동 (auto) */
  padding: 10px 14px;
  background: rgba(255,255,255,0.85);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  /* 사용자 명시 height일 때 콘텐츠 넘치면 내부 스크롤 */
  overflow: auto;
  box-sizing: border-box;
  /* 위치/크기 변경 시 부드러운 전환 (다듬기 슬라이더 input 이벤트와 시너지) — 단 드래그 중엔 끔 */
  transition: left 80ms, top 80ms, width 80ms, height 80ms, background 80ms;
}
.scene-screen--pb.pb--imagecenter .pb-stage__body-overlay.pb-body-overlay--moving,
.scene-screen--pb.pb--imagecenter .pb-stage__body-overlay.pb-body-overlay--resizing {
  /* 드래그/리사이즈 중에는 transition 끄기 — 즉시 반응 */
  transition: none;
}
.scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  margin: 0;
  /* W8: textStyle 반영 — 분할형과 동일 CSS 변수. 폰트/크기/색/굵기 다듬기에서 조정 */
  font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  font-size: var(--pb-fs-body, 13px);
  font-weight: var(--pb-fw-body, 400);
  color: var(--pb-color-override, var(--v03-card-fg, #1a1a1a));
  line-height: 1.5;
}

/* ── W4: 다듬기 모드 핸들 (드래그 ✥ + 리사이즈 4 모서리) ──
   감상 모드(data-edit-mode 없음)에선 이 핸들들이 HTML로도 안 그려지지만,
   안전 위해 CSS에서도 숨김 보장.
   ─────────────────────────────────────────────────────────────
   ⚠ 수정: 이전엔 모서리 핸들이 글상자 밖 -7px 위치였는데 .pb-stage의
   overflow: hidden에 의해 잘려서 안 보이고 클릭도 안 됨. 이번 수정에서
   핸들을 글상자 안쪽 +2px로 옮겨 항상 visible + clickable. */
.scene-screen--pb.pb--imagecenter .pb-body-handle {
  position: absolute;
  display: none;
  user-select: none;
  pointer-events: auto;
  /* v36 태블릿: 터치 시 브라우저 scroll/zoom 가로채지 못하게.
     pointer 이벤트가 핸들러로 그대로 전달됨. */
  touch-action: none;
}
.scene-screen--pb.pb--imagecenter[data-edit-mode="true"] .pb-body-handle {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 가운데 이동 핸들 ✥ — mockup 부합: 글상자 가운데 큰 그립 (사용자가 본문 위 박스 자체를 잡음).
   본문이 길면 시각 방해될 수 있어 약간 반투명. */
.scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: #fff;
  background: rgba(74, 144, 217, 0.85);
  border-radius: 50%;
  cursor: move;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 3;
  font-weight: 700;
  /* 본문 가독성 — 편집 중에만 보이지만 너무 무겁지 않게 */
  opacity: 0.9;
}
.scene-screen--pb.pb--imagecenter .pb-body-handle--move:hover,
.scene-screen--pb.pb--imagecenter .pb-body-handle--move:active {
  background: rgba(74, 144, 217, 1);
  opacity: 1;
}
/* 4 모서리 리사이즈 핸들 — 글상자 안쪽 모서리에 배치 (overflow hidden 회피 + 더 큼 + 시각 명확) */
.scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid rgba(74, 144, 217, 1);
  border-radius: 4px;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.scene-screen--pb.pb--imagecenter .pb-body-handle--resize-nw {
  top: 2px; left: 2px;
  cursor: nwse-resize;
}
.scene-screen--pb.pb--imagecenter .pb-body-handle--resize-ne {
  top: 2px; right: 2px;
  cursor: nesw-resize;
}
.scene-screen--pb.pb--imagecenter .pb-body-handle--resize-sw {
  bottom: 2px; left: 2px;
  cursor: nesw-resize;
}
.scene-screen--pb.pb--imagecenter .pb-body-handle--resize-se {
  bottom: 2px; right: 2px;
  cursor: nwse-resize;
}
/* 다듬기 모드일 때 본문 글상자 외곽 점선 강조 — 편집 가능 표시.
   2px 두께 + 진한 색 + offset 0으로 글상자 자체 외곽선처럼 */
.scene-screen--pb.pb--imagecenter[data-edit-mode="true"] .pb-stage__body-overlay {
  outline: 2px dashed rgba(74, 144, 217, 0.7);
  outline-offset: 0;
}
.scene-screen--pb.pb--imagecenter[data-edit-mode="true"] .pb-stage__body-overlay.pb-body-overlay--moving,
.scene-screen--pb.pb--imagecenter[data-edit-mode="true"] .pb-stage__body-overlay.pb-body-overlay--resizing {
  outline: 2px solid rgba(74, 144, 217, 1);
}
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only {
  /* 그림 중심형의 하단 — 선택지만 들어감.
     20% 영역에 1~6개 선택지가 fit하도록 가로 flex + wrap.
     mockup 부합: 그림 중심형 mockup의 선택지는 가로 나란히. */
  padding: 6px 10px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only .pb-text__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
  /* W8: 기본 center — 1행만 있을 땐 박스 가운데. 2행 이상은 아래에서 stretch로 오버라이드 */
  align-content: center;
  /* CHOICE-OVERFLOW-CLIP-FIX(#62): 버튼 줄 총높이가 박스보다 크면(낮은 창·라벨 두 줄 wrap)
     center가 첫 줄 위쪽을 컨테이너 밖으로 밀어 overflow-y:auto로도 위쪽에 못 닿던 것 방지.
     safe center = 넘칠 때만 start로 폴백(안 잘리고 아래로 스크롤 가능). 미지원 브라우저는 위 center 유지. */
  align-content: safe center;
  /* v36: 4+개 버튼 wrap 시 자식이 부모 늘리지 못하게 — overflow auto로 자체 스크롤. */
  overflow-y: auto;
  overflow-x: hidden;
}
/* CHOICE-4-HEIGHT(2026-07-16): (구)4·5·6개 align-content:stretch — 행을 박스 전체로 늘려
   4개(2x2)면 버튼 높이가 1행(1~3개) 대비 크게 부풀던 원인(5번 장면15 관측). 사용자 결정
   "4개여도 높이 커지지 않게" → 룰 제거 = 기본 align-content:center(자연 높이 행, 세로 중앙).
   행이 박스보다 길면 기존 overflow-y:auto가 받음. 가로 매트릭스(2x2/2+3/3x2)는 불변. */
/* 그림 중심형 선택지 버튼 — 작고 가로 분배.
   1개: 풀폭 / 2~3개: 한 줄 / 4~6개: 자동 wrap */
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only .choice-v03 {
  flex: 1 1 calc(33% - 6px);
  min-width: 100px;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* LR (legacy) — 사용자 원칙: 폐기. 데이터 호환을 위해 룰만 유지하되 split과 동일 동작.
   향후 정리 단계에서 이 룰 제거 가능. */
.scene-screen--pb.pb--lr .pb-frame {
  grid-template-rows: minmax(0, 6fr) minmax(0, 4fr);
  grid-template-columns: 1fr;
}
/* 구 .pb--tb 룰도 동일 fallback (legacy 진입 안 깨지게) */
.scene-screen--pb.pb--tb .pb-frame {
  grid-template-rows: minmax(0, 6fr) minmax(0, 4fr);
  grid-template-columns: 1fr;
}

/* 그림 슬롯 — 학생 그림 비율 다양 (가로/세로/정사각) → contain으로 안 잘림.
   잘림이 사용자 핵심 원칙. W9: 그림 영역 배경을 페이지 색(흰)으로 — 학생 그림이
   흰 종이에 그려져 있으면 베이지 배경과 부조화 → 회색처럼 보임.
   placeholder만 별도 베이지 유지 (그림 없음 표시용). */
.scene-screen--pb .pb-illust {
  background: #fffefa;
  /* W9 (v8): 사진 transform 위해 inner 컨테이너 분리.
     .pb-illust는 viewport 역할 (overflow hidden), .pb-illust__inner이 사진 표시. */
  position: relative;
  overflow: hidden;
  border-radius: var(--v03-r-md);
  border: 1px solid var(--v03-card-border);
  min-width: 0;
  min-height: 0;
}
.scene-screen--pb .pb-illust__photo {
  /* W9 (v13): wrapper 사이즈 = 사진 contained 영역. JS가 width/height %로 정확히 설정.
     fallback: load 전 또는 ResizeObserver 미작동 환경 — height 100% + aspect-ratio 1로 작게라도 보이게. */
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  transform-origin: center;
  transform:
    translate(var(--pb-img-x, 0%), var(--pb-img-y, 0%))
    scale(var(--pb-img-sx, 1), var(--pb-img-sy, 1));
  transition: transform 80ms;
}
.scene-screen--pb .pb-illust__inner {
  /* W9 (v12): img가 wrapper 100% 채움 (wrapper는 자연 비율이라 사진 그대로).
     crop은 clip-path로 일부분만 가시 → 영역 사이즈 변경 안 됨. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  clip-path: inset(
    calc(var(--pb-crop-y, 0) * 1%)
    calc((100 - var(--pb-crop-x, 0) - var(--pb-crop-w, 100)) * 1%)
    calc((100 - var(--pb-crop-y, 0) - var(--pb-crop-h, 100)) * 1%)
    calc(var(--pb-crop-x, 0) * 1%)
  );
}
/* .pb-illust는 wrapper가 가운데 정렬 */
.scene-screen--pb .pb-illust {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-screen--pb .pb-illust--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,
    var(--v03-illust-bg) 0%,
    color-mix(in srgb, var(--v03-illust-bg) 70%, white) 100%);
}
.scene-screen--pb .pb-empty-mark {
  font-size: 36px;
  line-height: 1;
  color: var(--v03-illust-mark);
  opacity: 0.3;
  font-weight: 300;
  /* 의도적으로 짧고 중성적 — v0.3 명세: 감성 문구 금지 */
}

/* v36: 가로분할형 — 제목을 그림 좌상단 오버레이로.
   하단 텍스트 영역(20%)에 제목·본문·버튼 다 들어가면 본문/버튼 잘려서
   사용자 보고: "버튼이 안 보임". 가로분할형은 그림 영역이 큰 만큼
   제목을 그림 위 모서리에 작은 카드로 띄움. portrait split·imageCenter는 영향 없음. */
.scene-screen--pb.pb--split .pb-illust__title-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 12px;
  background: rgba(255, 250, 238, 0.92);
  border: 1px solid var(--v03-card-border);
  border-radius: 10px;
  font-size: clamp(13px, 2.2cqi, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pb-color-override, #2b1f10);
  font-family: var(--pb-font-family, inherit);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  z-index: 5;
  max-width: calc(100% - 24px);
  /* contenteditable 다듬기 시 outline */
}
.scene-screen--pb.pb--split .pb-illust__title-overlay[contenteditable="true"] {
  cursor: text;
}
.scene-screen--pb.pb--split .pb-illust__title-overlay[contenteditable="true"]:focus {
  outline: 2px solid #c66f4a;
  outline-offset: 2px;
}
/* 빈 상태 placeholder 표시 (다듬기 모드에서만 의미 있음) */
.scene-screen--pb.pb--split .pb-illust__title-overlay:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
  font-weight: 400;
}

/* 텍스트 영역 — 좁은 환경에서 효율적으로 */
.scene-screen--pb .pb-text {
  background: var(--v03-card-bg);
  border: 1px solid var(--v03-card-border);
  border-radius: var(--v03-r-md);
  /* 패딩 줄임: 22px 28px 18px → 16px 20px 14px (좁은 영역 효율) */
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-width: 0;   /* grid item shrink 허용 */
  min-height: 0;
}
.scene-screen--pb .pb-text__title {
  /* W8 따뜻한 디자인: 본문과 같은 따뜻한 종이책 폰트, bold */
  font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  /* v44: 폰트 단위를 cqi(페이지 가로 1%)로 — 디바이스 무관 한 줄 글자수 동일 */
  font-size: clamp(16px, 3.2cqi, 28px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--v03-fg);
  margin: 0 0 10px;
}
.scene-screen--pb .pb-text__body {
  /* W8: 그림책 글자 스타일 — CSS 변수로 폰트/크기/색/굵기 오버라이드.
     W8 따뜻한 디자인: 기본 fallback을 시안의 종이책 폰트(Gowun Batang)로.
     사용자가 다듬기에서 다른 폰트 고르면 _patchPbStyle이 --pb-font-family 덮음. */
  font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  font-size: var(--pb-fs-body, clamp(14px, 2.3cqi, 20px));
  font-weight: var(--pb-fw-body, 400);
  line-height: 1.85;  /* 시안의 여백 있는 따뜻한 행간 */
  color: var(--pb-color-override, var(--v03-fg));
  margin: 0 0 12px;
  white-space: pre-wrap; /* v127: 사용자가 입력한 \n\n 등 줄바꿈/빈 줄 시각 반영 */
  flex: 1;
  /* 줄바꿈 정책: 한국어 단어 단위 + 영문/숫자 강제 줄바꿈 */
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.scene-screen--pb .pb-text__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* VIEWER-PLAY-CHOICE-COMPACT-1: 선택지 패널 상단 여백 살짝 축소(10→8). */
  padding-top: 8px;
  border-top: 1px solid var(--v03-divider);
  flex-shrink: 0;
  /* 버튼은 텍스트 영역 안에만, 그림 영역 침범 금지 (v0.3 명세) */
}

/* ── 분할형(split) 전용 — 아래 40% 영역 안에 제목+본문+선택지 모두 fit ──
   원칙:
   · 제목  : 위에 고정 (1줄)
   · 본문  : 가운데 늘어남 + 자체 overflow:auto (길어도 스크롤만, 잘림 없음)
   · 선택지: 아래 고정 + 가로 flex + wrap (mockup TB 부합 + 자리 절약)
   사용자 보고 케이스: 풀 폭 세로 stack 선택지 3개+ 본문 → 영역 초과 후 잘림. */
.scene-screen--pb.pb--split .pb-text {
  /* 부모 grid 영역 안에 fit */
  overflow: hidden;
  /* VIEWER-PLAY-CHOICE-COMPACT-1: 텍스트/선택지 영역 패딩 살짝 축소(12 16 → 10 14). */
  padding: 10px 14px;
  /* W9 본문 빔 fix 2단계: 콘텐츠 가운데 정렬.
     본문 짧으면 위아래 균등 여백 (책 페이지 자연스러운 흰 여백 느낌),
     본문 길면 영역 다 채우며 자연스럽게 시작점 위로. */
  justify-content: center;
}
.scene-screen--pb.pb--split .pb-text__title {
  flex: 0 0 auto;
  font-size: clamp(15px, 2.6cqi, 22px);
  margin: 0 0 6px;
}
.scene-screen--pb.pb--split .pb-text__body {
  /* W8 분할형 본문 빔 fix: 1 1 auto → 0 1 auto.
     본문 짧을 때 본문 영역이 4fr 영역을 안 채우고 본문 양만큼만 차지 →
     선택지가 본문 바로 아래 자연스럽게. 본문 길어지면 shrink + overflow-y: auto로 스크롤.
     W9 글자 크기 fix: 슬라이더가 --pb-fs-body 변수 설정하는데 여기서 직접 clamp 지정돼 있어 무시됨 → var fallback. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 0 8px;
  font-size: var(--pb-fs-body, clamp(12px, 1.9cqi, 17px));
  line-height: 1.55;
}
.scene-screen--pb.pb--split .pb-text__actions {
  /* v36: 가로분할형(landscape) 기본 — 본문 짧음 의도, 행동 영역.
     세로분할형은 아래 portrait 룰에서 35%로 오버라이드 (본문 비중 ↑).
     VIEWER-PLAY-CHOICE-COMPACT-1: 감상 선택지 패널이 두껍게 보여 60→52%로 살짝 축소(버튼 stretch 완화).
     버튼 자체 min-height(아래)로 터치 영역은 유지. portrait/모바일은 별도 룰이라 무영향. */
  flex: 0 0 52%;
  min-height: 0;
  margin-top: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  align-items: stretch;
  justify-content: center;
  align-content: stretch;
  /* CHOICE-COUNT-CAP(#65): 기존 7개+ 버튼 작품은 매트릭스가 없어 3줄+로 넘쳤는데 overflow:hidden이라
     셋째 줄이 잘렸다 → overflow-y:auto로 스크롤 가능하게(1~6개 정상은 넘치지 않아 무영향). */
  overflow-x: hidden;
  overflow-y: auto;
}

/* v53: 라벨 "행동 N개 ↓" — 기본 숨김. 모바일에서만 표시. */
.pb-text__actions-label {
  display: none;
}

/* v59: 모바일 그림책 정밀 재설계 — v44~v58 누적 변경 정리.
   ─────────────────────────────────────────────────────────────────────
   ROOT 분석 결과:
   - base의 scene-screen `display: grid + place-items: center`,
     pb-frame `display: grid + grid-template-rows: 6fr/4fr + background 회색`이
     v52~v58에서 안 풀려 모든 fix 무효화.
   - pb-illust/pb-text가 grid item이라 flex 룰 무효.
   - pb-text padding 16px 좌우로 박스가 그림 우측 끝 안 닿음.
   - actions-label이 actions sibling이라 행동 영역 위 차지 (사용자: 본문 우측 아래 원함).
   ─────────────────────────────────────────────────────────────────────
   사용자 의도:
   - 다듬기 ↔ 뷰어 동일 디바이스 일치 (WYSIWYG)
   - 박스 가로 = 그림 우측 끝까지
   - 라벨 wrap 허용 (잘림 없음)
   - "행동 N개 ↓" = 본문 영역 우측 아래 (행동 영역 침범 X)
   - 콘텐츠 양 많으면 viewport(stage-wrap) 스크롤 */
@media (max-width: 600px) {
  /* === 1. body·player 흐름 — stage-wrap 자체 스크롤 === */
  #stage-wrap {
    overflow-y: auto;
    align-items: flex-start;
  }
  #stage-wrap.letterbox-h #viewer-frame,
  #stage-wrap.letterbox-v #viewer-frame {
    height: auto;
    min-height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }

  /* === 2. scene-screen GRID → BLOCK ===
     base의 display:grid + place-items:center가 pb-page를 가운데 정렬해서
     콘텐츠 적을 때 위·아래 빈 영역 발생. block으로 풀어 normal flow. */
  .scene-screen--pb {
    display: block;
    place-items: initial;
    position: relative;
    inset: auto;
    height: auto;
    min-height: auto;
    padding: 0;
  }

  /* === 3. pb-page 비율 강제 폐기 ===
     base 210:297 + overflow:hidden이 자유 흐름을 막음. height/overflow 풀기.
     단 background(warm paper) + 그림자 + border-radius는 유지 — 카드 정체성. */
  .scene-screen--pb .pb-page,
  body[data-page-orientation="portrait"] .scene-screen--pb .pb-page {
    aspect-ratio: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    width: 100%;
  }

  /* === 4. pb-frame GRID → FLEX COLUMN (root fix) ===
     base의 display:grid + grid-template-rows:6fr/4fr이 자식을 비율 분할 +
     자체 background:#f4ecd8 회색이 그림·본문 사이 노출. 둘 다 풀어야. */
  .scene-screen--pb.pb--split .pb-frame,
  body[data-page-orientation="portrait"] .scene-screen--pb.pb--split .pb-frame {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    grid-template-columns: none;
    height: auto;
    overflow: visible;
    gap: 0;
    padding: 0;
    background: transparent;
  }

  /* === 5. pb-illust — height 명시 (자식 photo가 height:100%라 부모 명시 필수) ===
     v59에서 max-height만 지정했는데 base의 pb-illust__photo가 height:100%라
     부모 의존 → circular → 둘 다 0 → 그림 사라짐. height 명시로 해결. */
  .scene-screen--pb.pb--split .pb-illust {
    height: 40vh;
    flex: 0 0 auto;
    width: 100%;
  }

  /* === 6. pb-text — padding 좌우 0 (박스가 그림 우측 끝까지 가야 함) ===
     본문 텍스트 들여쓰기는 자식 title/body에 별도 padding으로. */
  .scene-screen--pb.pb--split .pb-text {
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
    padding: 12px 0 0;
    min-height: auto;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
  }

  /* === 6-b. 본문 텍스트 자식만 padding 좌우 16 (가독성 들여쓰기) === */
  .scene-screen--pb.pb--split .pb-text__title,
  .scene-screen--pb.pb--split .pb-text__body-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* === 7. 본문 body-wrap — actions-label position absolute 기준 === */
  .scene-screen--pb.pb--split .pb-text__body-wrap {
    position: relative;
  }

  /* === 8. actions-label — 본문 영역 우측 아래 (사용자 의도 정정) === */
  .scene-screen--pb.pb--split .pb-text__actions-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    right: 16px;
    bottom: 0;
    font-family: var(--font-ui, 'Jua', sans-serif);
    font-size: 11px;
    color: var(--text-muted, #8a7560);
    background: var(--v03-card-bg, rgba(255,250,238,0.92));
    padding: 2px 6px;
    border-radius: 8px;
    opacity: 0.78;
    pointer-events: none;
  }
  .pb-text__actions-label-arrow {
    font-size: 12px;
    opacity: 0.7;
    animation: pb-actions-arrow-bounce 1.8s ease-in-out infinite;
  }
  @keyframes pb-actions-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
  }

  /* === 9. actions — padding/margin 0 → 박스가 pb-text 전체 폭 차지 ===
     pb-text padding 좌우 0이라 actions는 부모 그대로 폭 차지. 박스 = 그림 우측 끝까지. */
  .scene-screen--pb.pb--split .pb-text__actions {
    margin: 12px 0 0;
    padding: 10px 0 4px;
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: visible;
    align-items: stretch;
    border-top: 1px solid var(--v03-divider, rgba(80,50,20,0.10));
  }

  /* === 10. 박스 — width 100% + wrap 허용 + height auto.
     v61: base line 899의 동일 selector(flex 1 1 calc(33%-6px) + min-width 100px)와
     specificity 같아 cascade 순서로 base가 이김. !important로 강제 override. */
  .scene-screen--pb.pb--split .pb-text__actions .choice-v03 {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* === 11. 라벨 — wrap 허용 (한국어 단어 단위 + 영문 강제 wrap) === */
  .scene-screen--pb.pb--split .pb-text__actions .pb-choice-label {
    flex: 1 1 0%;
    min-width: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }

  /* v56: 엔딩 모바일 — CSS Grid 6 row 명시적 분할.
     본문만 minmax(0, 1fr) + overflow-y auto, 나머지는 auto row.
     flex보다 명시적이라 콘텐츠 양 변화에 덜 흔들림. */
  .ending-as-pb .pb-text--ending {
    display: grid;
    grid-template-rows:
      auto                 /* 1: 작품 제목 */
      minmax(0, 1fr)       /* 2: 본문 (스크롤) */
      auto                 /* 3: 스탬프 */
      auto                 /* 4: 경로 요약 */
      auto                 /* 5: 결말 메시지 */
      auto;                /* 6: 두 버튼 */
    gap: 6px;
    padding: 10px 14px;
    justify-content: stretch;
    align-content: stretch;
    min-height: 0;
    overflow: hidden;
    height: 100%;
  }
  .ending-as-pb .pb-text--ending .ending-user-title { grid-row: 1; margin: 0; }
  .ending-as-pb .pb-text--ending .ending-user-body {
    grid-row: 2;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent 100%);
  }
  .ending-as-pb .ending-stamps-row {
    grid-row: 3;
    margin: 0;
    flex-shrink: 0;
  }
  .ending-as-pb .ending-end-stamp {
    font-size: 11px;
    padding: 3px 10px;
  }
  .ending-as-pb .pb-text--ending .ending-path-summary {
    grid-row: 4;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
  }
  .ending-as-pb .pb-text--ending .ending-mood {
    grid-row: 5;
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
  }
  .ending-as-pb .ending-actions {
    grid-row: 6;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 0;
    flex-shrink: 0;
  }
  .ending-as-pb .ending-actions .terminal-btn {
    width: 100%;
    min-width: 0;
    padding: 9px 18px;
    font-size: 13px;
  }
}

/* v49: 엔딩 그림 없을 때 — illust placeholder 영역 작게, text 비중 ↑.
   사용자 보고: "엔딩 그림 없으면 빈 영역이 너무 큼". */
.ending-as-pb--no-image .pb-illust--empty {
  flex: 0 0 20%;
  min-height: 80px;
  max-height: 180px;
}
.ending-as-pb--no-image .pb-illust--empty .pb-empty-mark {
  font-size: clamp(36px, 8cqi, 64px);
  opacity: 0.35;
}
.ending-as-pb--no-image .pb-text--ending {
  flex: 1 1 auto;
  /* 엔딩 본문·스탬프·결말 메시지가 넉넉히 차지 */
}

/* v36: 세로분할형 — 본문 비중 ↑. 행동 영역 35% (가로분할형 60%와 분리).
   사용자 보고: "뭉툭하고 본문이 안 보임" — 가로분할형 비율이 세로에 그대로 적용된 문제.
   align-content: center = imageCenter처럼 자식이 자연 높이로 박스 가운데 정렬 (stretch X).
   사용자 보고: "세로 그림중심형처럼 보이면 좋은데 아직 뭉뚝" — 행 stretch가 버튼을 늘리던 문제. */
body[data-page-orientation="portrait"] .scene-screen--pb.pb--split .pb-text__actions {
  flex: 0 0 35%;
  align-content: center;
}
.scene-screen--pb.pb--split .pb-text__actions .choice-v03 {
  flex: 1 1 calc(33% - 6px);
  min-width: 100px;
  max-width: 100%;
  padding: 6px 10px;
  /* v48: 폰트 cqi 변환 — 페이지 비례. 작은 페이지에서 한 줄 글자수 일정 */
  font-size: clamp(11px, 2cqi, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ════════════════════════════════════════════════════
   W8 그림책 따뜻한 디자인 (시안 기준)
   ─────────────────────────────────────────────────────
   기존 배치(flex 1·2·3·4+개)는 그대로 유지.
   내부 시각만 시안 따라: 번호 원 + 라벨 + 화살표 + 선택지마다 색 구별.
   ════════════════════════════════════════════════════ */
.choice-v03--picturebook {
  /* 기본 모양 — 둥근 카드 + 부드러운 보더 + 종이 그림자 */
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;  /* 시안: 좌측 정렬 (번호→라벨→화살표) */
  gap: 10px;
  /* v89: 사용자 보고 "가로 화면 행동 버튼 글자 작음, 더 키워". font 14~22 → 17~28. */
  padding: 8px 14px !important;
  border-radius: 10px;
  border: 1.5px solid;
  background: var(--v03-card-bg);
  cursor: pointer;
  text-align: left !important;
  /* v62: 입체 음영 — 기본 상태에 그림자 */
  box-shadow:
    0 1px 1px rgba(120,90,50,0.06),
    0 2px 4px rgba(120,90,50,0.10),
    0 4px 10px rgba(120,90,50,0.08);
  transition: background 0.15s, transform 0.08s ease-out, box-shadow 0.15s;
  font-family: var(--font-b);
  font-size: clamp(17px, 3.2cqi, 28px);
  line-height: 1.35;
  color: var(--v03-fg);
}
.choice-v03--picturebook:hover:not(:disabled) {
  background: var(--v03-btn-hover-bg);
  /* v62: hover 시 살짝 위로 + 그림자 강조 */
  transform: translateY(-1px);
  box-shadow:
    0 2px 3px rgba(120,90,50,0.10),
    0 4px 8px rgba(120,90,50,0.14),
    0 8px 18px rgba(120,90,50,0.12);
}
.choice-v03--picturebook:active:not(:disabled) {
  /* v62: 타격감 — 빠르게 내려가며 그림자 줄어들고 안쪽 음영 */
  transform: translateY(2px) scale(0.985);
  box-shadow:
    inset 0 2px 4px rgba(120,90,50,0.14),
    0 1px 2px rgba(120,90,50,0.06);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background 0.05s;
}
/* W8: disabled 시각 — 감상 모드에서만 옅게. 다듬기 모드는 작품 만드는 중이라
   미연결 선택지도 정상 시각 (사용자가 라벨·번호 진하게 보여야 작업 가능).
   다듬기 진입점: stage에 .edit-mode-on 클래스 추가됨 (viewer-render.js). */
.choice-v03--picturebook:disabled {
  opacity: 0.65;  /* 50% → 65% — 너무 옅지 않게 */
  cursor: not-allowed;
}
.edit-mode-on .choice-v03--picturebook:disabled,
.edit-mode-on .choice-v03--picturebook[disabled] {
  /* 다듬기 모드: disabled 시각 무효 — 모두 진하게 */
  opacity: 1 !important;
  cursor: pointer !important;
}

/* 번호 원 배지 — 좌측 고정, viewport 작아도 항상 보임 (v85: 26→22) */
.choice-v03--picturebook .pb-choice-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #fff;
  flex: 0 0 22px;
  background: var(--v03-fg);  /* 색은 data-pb-color로 오버라이드 */
}

/* 라벨 — 가운데, 줄바꿈 허용 (한국어 단어 단위) */
.choice-v03--picturebook .pb-choice-label {
  flex: 1 1 auto;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 화살표 — 우측 끝, 작게 */
.choice-v03--picturebook .pb-choice-arrow {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: currentColor;
  opacity: 0.55;
  margin-left: auto;
}

/* W8: 그림책 시안에선 자체 .pb-choice-arrow(›) 자식 있음 → ::after 잔재 제거 */
.choice-v03--picturebook::after {
  content: none !important;
}

/* 색 구별 — data-pb-color 1·2·3 순환 (4번째 = 다시 1번 색)
   원칙: 보더 + 배경 연하게 + 번호 배지만 색. 라벨 색은 잉크색으로 통일(채도 차이 방지) */
.choice-v03--picturebook[data-pb-color="1"] {
  background: rgba(90,138,74,0.06);
  border-color: rgba(90,138,74,0.32);
}
.choice-v03--picturebook[data-pb-color="1"] .pb-choice-num { background: #5a8a4a; }
.choice-v03--picturebook[data-pb-color="2"] {
  background: rgba(90,146,194,0.06);
  border-color: rgba(90,146,194,0.32);
}
.choice-v03--picturebook[data-pb-color="2"] .pb-choice-num { background: #5a92c2; }
.choice-v03--picturebook[data-pb-color="3"] {
  background: rgba(198,111,74,0.06);
  border-color: rgba(198,111,74,0.32);
}
.choice-v03--picturebook[data-pb-color="3"] .pb-choice-num { background: #c66f4a; }

/* 라벨 색 — 잉크색 통일. 보더 색이 라벨에 영향 안 가게 */
.choice-v03--picturebook .pb-choice-label {
  color: var(--v03-fg);
}
/* 화살표 색 — 잉크 옅은 톤 통일 */
.choice-v03--picturebook .pb-choice-arrow {
  color: var(--v03-fg-muted);
}

/* ── 배치 규칙 보존: 분할형(split) 안에서 ──
   부모 flex 룰(line 585 .pb-text__actions)이 row + wrap + flex:1 1 33%.
   1개 = 100% / 2개 = 50%·50% / 3개 = 33% / 4개+ = wrap 2줄.
   시안 정렬(좌측)이지만 칸 폭이 좁을 땐 라벨 줄바꿈 처리. */
.scene-screen--pb.pb--split .pb-text__actions .choice-v03--picturebook {
  /* split 영역 안 fit 보존 */
  padding: 9px 12px !important;
  font-size: 13px;
  min-width: 110px;
  max-width: 100%;
  /* VIEWER-PLAY-CHOICE-COMPACT-1: 패널을 살짝 줄여도 버튼 터치 영역은 44px 이상 보장. */
  min-height: 44px;
  justify-content: flex-start !important;
  text-align: left !important;
}
.scene-screen--pb.pb--split .pb-text__actions .choice-v03--picturebook .pb-choice-num {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  font-size: 11px;
}
.scene-screen--pb.pb--split .pb-text__actions .choice-v03--picturebook .pb-choice-arrow {
  font-size: 16px;
}

/* ── 그림 중심형(imageCenter) 영역 — 본문 글상자 위 자리, 배치는 부모에서 결정 ──
   부모 .pb-text--bottom-only .pb-text__actions가 row+wrap, flex:1
   좁은 영역이라 padding 더 축소.
   W8: 기본은 6개 기준 작은 값. data-count별로 1·2·3개일 때 키움. */
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only .pb-text__actions .choice-v03--picturebook {
  /* 기본 = 6개 기준. data-count="N" 규칙이 padding/font 모두 오버라이드 */
  font-size: 12px;
}
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only .pb-text__actions .choice-v03--picturebook .pb-choice-num {
  /* 기본 = 6개 기준 작은 번호. data-count="N" 규칙이 오버라이드 */
  width: 20px; height: 20px;
  flex: 0 0 20px;
  font-size: 10px;
}
.scene-screen--pb.pb--imagecenter .pb-text--bottom-only .pb-text__actions .choice-v03--picturebook .pb-choice-arrow {
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════
   W8: 행동 버튼 개수별 layout 매트릭스 (사용자 요청)
   ─────────────────────────────────────────────────────
   사용자 핵심: "상자가 꽉 차는 느낌"
   data-count로 개수 분기. flex-basis 정밀 계산해 빈 공간 없음.
   gap 6px 고려: 2개=calc((100% - 6px)/2), 3개=calc((100% - 12px)/3)

   매트릭스 (분할형/그림 중심형 동일 규칙):
   · 1개: 100% (한 줄)
   · 2개: 50/50  (한 줄, gap만 제외)
   · 3개: 33/33/33 (한 줄)
   · 4개: 50/50 + 50/50 (두 줄 = 2x2)
   · 5개: 50/50 + 3등분 (위 2 + 아래 3)
   · 6개: 3등분 + 3등분 (3x2)

   W8 fix: !important 추가 — 기존 .pb--split / .pb--imagecenter 규칙과의
   specificity 충돌 방어. 박스 폭에 자연 fit.
   ══════════════════════════════════════════════════════ */
.scene-screen--pb .pb-text__actions[data-count="1"] .choice-v03--picturebook {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 18px 18px !important;
  font-size: 15px !important;
}
.scene-screen--pb .pb-text__actions[data-count="2"] .choice-v03--picturebook {
  flex: 1 1 calc((100% - 6px) / 2) !important;
  max-width: calc((100% - 6px) / 2) !important;
  min-width: 0 !important;
  padding: 16px 16px !important;
  font-size: 14px !important;
}
.scene-screen--pb .pb-text__actions[data-count="3"] .choice-v03--picturebook {
  flex: 1 1 calc((100% - 12px) / 3) !important;
  max-width: calc((100% - 12px) / 3) !important;
  min-width: 0 !important;
  padding: 13px 13px !important;
  font-size: 13px !important;
}
/* 4개: 2x2 — 모두 50%. 2줄 다 채우니 padding 중간 */
.scene-screen--pb .pb-text__actions[data-count="4"] .choice-v03--picturebook {
  flex: 1 1 calc((100% - 6px) / 2) !important;
  max-width: calc((100% - 6px) / 2) !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
}
/* 5개: 위 2개 50/50 + 아래 3개 33/33/33 */
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook:nth-child(1),
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook:nth-child(2) {
  flex: 1 1 calc((100% - 6px) / 2) !important;
  max-width: calc((100% - 6px) / 2) !important;
  min-width: 0 !important;
  padding: 11px 13px !important;
  font-size: 12.5px !important;
}
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook:nth-child(3),
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook:nth-child(4),
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook:nth-child(5) {
  flex: 1 1 calc((100% - 12px) / 3) !important;
  max-width: calc((100% - 12px) / 3) !important;
  min-width: 0 !important;
  padding: 11px 13px !important;
  font-size: 12.5px !important;
}
/* 6개: 3x2 — 작고 알참 (사용자 OK 기준) */
.scene-screen--pb .pb-text__actions[data-count="6"] .choice-v03--picturebook {
  flex: 1 1 calc((100% - 12px) / 3) !important;
  max-width: calc((100% - 12px) / 3) !important;
  min-width: 0 !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
}

/* ──────────────────────────────────────────────────
   W8: 번호 배지 + 화살표도 개수별 비율 조정
   적은 개수일수록 큰 배지/화살표 → 박스에 맞는 시각 균형.
   사용자 보고: "1~3은 박스만 커지고 글씨는 안 커져서 어색" → 통합 비례 적용.
   ────────────────────────────────────────────────── */
.scene-screen--pb .pb-text__actions[data-count="1"] .choice-v03--picturebook .pb-choice-num,
.scene-screen--pb .pb-text__actions[data-count="2"] .choice-v03--picturebook .pb-choice-num {
  width: 30px !important; height: 30px !important;
  flex: 0 0 30px !important;
  font-size: 14px !important;
}
.scene-screen--pb .pb-text__actions[data-count="3"] .choice-v03--picturebook .pb-choice-num {
  width: 26px !important; height: 26px !important;
  flex: 0 0 26px !important;
  font-size: 12px !important;
}
.scene-screen--pb .pb-text__actions[data-count="4"] .choice-v03--picturebook .pb-choice-num {
  width: 24px !important; height: 24px !important;
  flex: 0 0 24px !important;
  font-size: 12px !important;
}
.scene-screen--pb .pb-text__actions[data-count="5"] .choice-v03--picturebook .pb-choice-num {
  width: 22px !important; height: 22px !important;
  flex: 0 0 22px !important;
  font-size: 11px !important;
}
/* 6개는 기본 20px 유지 */

/* 화살표도 개수에 따라 */
.scene-screen--pb .pb-text__actions[data-count="1"] .choice-v03--picturebook .pb-choice-arrow,
.scene-screen--pb .pb-text__actions[data-count="2"] .choice-v03--picturebook .pb-choice-arrow {
  font-size: 22px !important;
}
.scene-screen--pb .pb-text__actions[data-count="3"] .choice-v03--picturebook .pb-choice-arrow {
  font-size: 18px !important;
}

/* 좁은 viewport에서는 자연 wrap 허용 — 한국어 단어 단위 줄바꿈 */
@media (max-width: 480px) {
  .scene-screen--pb .pb-text__actions[data-count] .choice-v03--picturebook {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .scene-screen--pb .pb-text__actions[data-count="2"] .choice-v03--picturebook,
  .scene-screen--pb .pb-text__actions[data-count="4"] .choice-v03--picturebook,
  .scene-screen--pb .pb-text__actions[data-count="6"] .choice-v03--picturebook {
    flex: 1 1 calc((100% - 6px) / 2) !important;
    max-width: calc((100% - 6px) / 2) !important;
  }
}

/* ── 빈 버튼 (라벨 없음) — 색 약화 폐지 ──
   LEVELS-FEEDBACK-2(2026-07-20): opacity 0.5 + italic이 그림책 빈 라벨을 감상·다듬기
   양쪽에서 흐리게 만들던 실제 원인(1·2단계 base10 버튼은 choiceA=''라 상시 empty).
   기본 문구도 입력한 글과 똑같이 보이게 — 흐림 규칙 제거(사용자 결정).
   입력 중에도 버튼의 choice-v03--empty가 재렌더까지 남아 타이핑한 글까지 흐려지던
   문제도 이 제거로 함께 해소(클래스가 남아도 시각 효과 0). */

/* ╭─────────────────────────────────────────╮
   │  모드 3: 무비형 (movie)                 │
   │  위 미디어(어두움) + 아래 결정 패널(light) │
   │  결정 패널 자연 높이 + 최대 40%          │
   ╰─────────────────────────────────────────╯ */
.scene-screen--movie {
  /* W7-A 정정 v7: overlay 구조 유지 + 명시적 가두기.
     이전 fix9: 선택지 6개가 viewer-frame 폭 넘어 viewport 끝까지 흘러나옴.
     원인:
       1) overflow: hidden 없어서 자식이 viewer-frame 밖으로 나감
       2) flex-wrap: wrap으로 6개 줄바꿈 → 여러 줄 → max-height 60% 넘김
       3) .choice-v03 본체 width: 100% + flex 충돌
     해결:
       1) overflow: hidden 강제 → 자식 절대 viewer-frame 못 넘어감
       2) flex-wrap: nowrap → 6개 한 줄
       3) min-width: 0 + width: auto로 flex 분배 정확히 */
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  /* 2026-05-31 Movie-B-1: 안쪽 .movie-stage(자체 비율)를 가운데 정렬. 공유 #viewer-frame은
     안 건드리고, movie는 stage 비율로 가로/세로를 자체 결정(text .text-page / 그림책 .pb-page 패턴). */
  display: grid;
  place-items: center;
  container-type: size;
  container-name: moviestage;
}
/* 2026-05-31 Movie-B-1: movie 전용 안쪽 비율 stage.
   · 가로(기본): stage가 프레임을 그대로 채움 — 원래 무비 동작 유지(회귀 0).
     감상은 프레임이 이미 16:9라 꽉 참 / 편집은 프레임을 채우고 영상은 object-fit:contain로 letterbox.
   · 세로(pageOrientation=portrait): 편집 프레임이 세로가 안 되는 문제를 우회 —
     stage를 안쪽 210:297 박스로 고정(그림책 세로모드와 동일 비율) + 컨테이너에 맞춰 contain.
   · 영상·decision은 stage 안에서만 배치 → 프레임 밖 안 나감, 잘림 없음(object-fit:contain). */
.scene-screen--movie .movie-stage {
  position: relative;
  background: #000;
  overflow: hidden;
  /* 가로(기본) = 프레임 채움 */
  width: 100%;
  height: 100%;
}
/* 세로 = 안쪽 210:297 박스 (컨테이너 비율에 맞춰 contain — text-page 패턴) */
body[data-page-orientation="portrait"] .scene-screen--movie .movie-stage {
  width: auto;
  height: auto;
  aspect-ratio: 210 / 297;
  max-width: 100%;
  max-height: 100%;
}
@container moviestage (aspect-ratio > 210/297) {
  body[data-page-orientation="portrait"] .scene-screen--movie .movie-stage { height: 100%; width: auto; }
}
@container moviestage (aspect-ratio <= 210/297) {
  body[data-page-orientation="portrait"] .scene-screen--movie .movie-stage { width: 100%; height: auto; }
}
/* 영상/포스터 전체 영역 — 이제 .movie-stage 기준으로 가득 채움 */
.scene-screen--movie .movie-media {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}
/* ════════ Movie decision — 토큰 기반 (card/panel × 가로/세로) ════════
   2026-06-02 Movie-H: 위치/크기는 4조합 분기, 타이포/버튼은 공통 토큰 + 필요 조합만 override.
   값은 실화면 튜너로 잡은 뒤 체계화(1:1 아님, card 세로 본문16/버튼14 하한).
   normal·ending(.movie-ending-decision)은 .movie-decision 레이아웃 토큰을 공유한다. */

/* 공통 타이포/버튼 토큰 (기본값) */
.scene-screen--movie {
  --md-body-font: 20px;
  --md-btn-font: 16px;
  --md-btn-py: 11px;
  --md-btn-px: 12px;
  --md-btn-gap: 16px;
  --md-btn-minw: 0px;
}

/* panel(B, 하단) — 가로 기본. 배경은 위로 투명해지는 gradient 유지(영상 비침). */
.scene-screen--movie[data-movie-deco="panel"] {
  --md-left: 0;
  --md-right: 0;
  --md-anchor-top: auto;
  --md-anchor-bottom: 0px;
  --md-translate-x: 0%;
  --md-translate-y: 0%;
  --md-width: 100%;
  --md-max-width: 100%;
  --md-max-height: 42%;
  --md-pad: 22px 32px;
  --md-radius: 0px;
  --md-blur: 2px;
  --md-bg: linear-gradient(to top, rgba(8,10,16,0.92) 55%, rgba(8,10,16,0.38) 100%);
  --md-border: none;
  --md-shadow: none;
  --md-gap: 16px;
  --md-body-font: 22px;
  /* MOVIE-TYPO-1(2026-07-10): 행동버튼 16→18px — 그림책 선택지(25~28px) 대비 작다는 조사 확정.
     panel 한정(공통 토큰·portrait·card는 유지). 버튼은 flex 균등분배+wrap이라 깨짐 없음. */
  --md-btn-font: 18px;
  --md-btn-py: 13px;
  --md-btn-gap: 18px;
}
body[data-page-orientation="portrait"] .scene-screen--movie[data-movie-deco="panel"] {
  --md-max-height: 44%;
  --md-blur: 3px;
  --md-bg: linear-gradient(to top, rgba(8,10,16,0.85) 55%, rgba(8,10,16,0.32) 100%);
  --md-body-font: 19px;
}

/* card(A, 중앙) — 가로 기본. 배경은 solid 반투명 유지. */
.scene-screen--movie[data-movie-deco="card"] {
  --md-left: 50%;
  --md-right: auto;
  --md-anchor-top: 82%;
  --md-anchor-bottom: auto;
  --md-translate-x: -50%;
  --md-translate-y: -41%;
  --md-width: min(96%, 960px);
  --md-max-width: calc(100% - 24px);
  --md-max-height: 70%;
  --md-pad: 30px 34px;
  --md-radius: 20px;
  --md-blur: 10px;
  --md-bg: rgba(26, 30, 40, 0.75);
  --md-border: 1px solid rgba(255, 255, 255, 0.08);
  --md-shadow: 0 14px 44px rgba(0, 0, 0, 0.42);
  --md-gap: 16px;
  --md-btn-font: 18px;
  --md-btn-gap: 12px;
}
body[data-page-orientation="portrait"] .scene-screen--movie[data-movie-deco="card"] {
  --md-anchor-top: 80%;
  --md-translate-y: -46%;
  --md-width: min(93%, 920px);
  --md-max-height: 74%;
  --md-pad: 24px 28px;
  --md-blur: 12px;
  --md-gap: 14px;
  --md-body-font: 16px;
  --md-btn-font: 14px;
  --md-btn-px: 9px;
  --md-btn-gap: 10px;
}

/* 토큰 소비 — 레이아웃 (card/panel 공통, 값은 위 토큰에서). */
.scene-screen--movie .movie-decision {
  position: absolute;
  left: var(--md-left, 0);
  right: var(--md-right, 0);
  top: var(--md-anchor-top, auto);
  bottom: var(--md-anchor-bottom, 0px);
  transform: translate(var(--md-translate-x, 0%), var(--md-translate-y, 0%));
  width: var(--md-width, 100%);
  max-width: var(--md-max-width, 100%);
  max-height: var(--md-max-height, 42%);
  background: var(--md-bg, linear-gradient(to top, rgba(8,10,16,0.92) 55%, rgba(8,10,16,0.38) 100%));
  padding: var(--md-pad, 22px 32px);
  border: var(--md-border, none);
  border-radius: var(--md-radius, 0px);
  box-shadow: var(--md-shadow, none);
  -webkit-backdrop-filter: blur(var(--md-blur, 0px));
  backdrop-filter: blur(var(--md-blur, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--md-gap, 16px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  z-index: 2;
}
.scene-screen--movie .movie-poster {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.scene-screen--movie .movie-poster--empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: var(--v03-media-bg);
}
.scene-screen--movie .movie-empty-mark {
  font-size: 56px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  font-weight: 300;
  /* 중성적 placeholder — v0.3 명세 */
}
/* MOVIE-EMPTY-GUIDE: 영상 없는 장면 안내 한 줄 (편집=업로드 안내 / 감상=준비 중) */
.scene-screen--movie .movie-empty-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 0 16px;
  line-height: 1.5;
  word-break: keep-all;
}
.scene-screen--movie .movie-controls {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px 18px;
  color: white;
  pointer-events: none;
}
.scene-screen--movie .movie-controls__play {
  font-size: 12px;
}

/* ── 영상 후 노출 흐름 (4단계 보강) ──
   재생 전/중: data-played="false" → 결정 패널(.movie-decision) 통째 숨김.
   재생 후/영상 없음: data-played="true" → 정상 노출.
   영상 없는 케이스는 viewer-render에서 즉시 "true"로 설정돼 영향 없음.

   본문 ON/OFF 시각 분기 (data-body-enabled):
   · "on" : .movie-decision__desc 표시 (이미 _renderSceneMovie에서 body 있을 때만 HTML 생성)
   · "off": .movie-decision__desc 숨김 (혹시 잔여 본문 HTML 있어도 안 보이게 안전)
   ※ HTML 생성 단계에서 이미 분기되지만, CSS도 같이 막아 사용자가 토글 시
     재렌더 사이의 짧은 깜빡임 방지. */
.scene-screen--movie[data-played="false"] .movie-decision {
  visibility: hidden;
  pointer-events: none;
}
/* W7-A: 선택지 노출 시점 = always — 영상 재생 중에도 결정 패널 보임.
   data-played="false"여도 위 룰을 무력화 (특이도 = data-* 두 개) */
.scene-screen--movie[data-played="false"][data-movie-reveal="always"] .movie-decision {
  visibility: visible;
  pointer-events: auto;
}
/* 2026-05-31 Movie-1: 다듬기 모드는 영상 종료(data-played) 여부와 무관하게 결정 패널 표시 —
   제작자가 영상 끝까지 안 봐도 본문/행동 버튼을 확인·편집할 수 있게. 감상 모드는 영향 없음.
   감상 테스트(.viewer-test-active)는 실제 감상과 동일해야 하므로 제외(숨김 유지).
   movie 모드 전용 — text/picturebook/experience 무관. (특이도 body+3class > data-played 룰) */
body.edit-mode-active:not(.viewer-test-active) .scene-screen--movie[data-played="false"] .movie-decision {
  visibility: visible;
  pointer-events: auto;
}
.scene-screen--movie[data-body-enabled="off"] .movie-decision__desc {
  display: none;
}

/* W7-A: 자막 표시 방식 — caption-bar는 본문을 자막 띠 톤으로 (어두운 배경 + 흰 글씨).
   overlay(기본)는 결정 패널과 자연스럽게 어우러지는 톤. */
.scene-screen--movie[data-movie-caption="caption-bar"] .movie-decision__desc {
  background: rgba(20, 24, 33, 0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  /* MOVIE-TYPO-1(2026-07-10): 14→16px — 자막 컨벤션상 overlay(22px)보다 작게 두되 초등 최소선까지.
     자막띠 높이 소폭 증가는 .movie-decision max-height+스크롤로 흡수. */
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.01em;
}

/* 2026-05-31 Movie-E: 무비형 엔딩 decision — 일반 무비 decision(.movie-decision overlay)을
   그대로 쓰되 마감 표시/버튼만. 영상 종료(data-played) 게이트로 노출(기존 룰 재사용). */
.scene-screen--movie .movie-ending-decision {
  align-items: center;
  text-align: center;
}
/* ════════════════════════════════════════════════════════════════
   PB-EMPTY-GUIDE(2026-07-10): 그림 없는 장면의 "그림 자리" 안내 — 편집 모드 전용.
   처음 쓰는 학생이 어디가 그림 공간인지 몰라서, 그리기 캔버스와 같은 3:2 흰 캔버스를
   시각적으로만 표시(pointer-events:none). 감상·감상테스트에선 숨김(기존 ⌘ 그대로).
   그림 업로드/그리기 시 empty 분기 자체가 사라져 자연 소멸 — 그림 표시를 구속하지 않음. */
.pb-illust-guide { display: none; }
body.edit-mode-active:not(.viewer-test-active) .pb-illust--empty .pb-illust-guide {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.pb-illust-guide__canvas {
  /* 높이 기준 3:2 — imageCenter(3:2 무대)·split(더 넓은 영역) 양쪽에서 안전하게 수납 */
  height: 76%;
  aspect-ratio: 3 / 2;
  max-width: 90%;
  background: #ffffff;
  border: 2px dashed rgba(198, 111, 74, 0.45);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(80, 50, 20, 0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-family: var(--font-ui, 'Jua', sans-serif);
  color: #8a7350;
  padding: 12px;
}
.pb-illust-guide__icon { font-size: clamp(22px, 4vw, 34px); opacity: 0.85; }
.pb-illust-guide__canvas b { font-size: clamp(14px, 1.8vw, 18px); color: #6b5638; font-weight: 700; }
.pb-illust-guide__canvas small { font-size: clamp(11px, 1.3vw, 13px); opacity: 0.8; }

/* MOVIE-ENDING-DARKTEXT(2026-07-10): 엔딩 decision은 이제 종이 톤 패널(.movie-decision 토큰 공유)이라
   흰 글씨는 밝은 배경 위에서 안 보인다. 본문 정본 글색(#3a2c14 진갈색)으로 통일. */
.scene-screen--movie .movie-ending-mark {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.04em;
  color: #3a2c14;
  opacity: 0.82;
}
.scene-screen--movie .movie-ending-mark--true {
  opacity: 1;
  font-weight: 700;
}
.scene-screen--movie .movie-ending-title {
  color: #3a2c14;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
}
.scene-screen--movie .movie-ending-body {
  color: #3a2c14;
  /* MOVIE-TYPO-1(2026-07-10): 14→16px — 모드 내 최저값·초등 본문 기준 미달 조사 확정.
     엔딩 decision은 max-height+내부 스크롤이라 길어져도 레이아웃 안 밀림. */
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.scene-screen--movie .movie-ending-route {
  color: #3a2c14;
  opacity: 0.6;
  font-size: 12px;
}
.scene-screen--movie .movie-ending-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.scene-screen--movie .movie-ending-actions .terminal-btn {
  width: auto;
  min-width: 130px;
  padding: 8px 18px;
  font-size: clamp(12px, 1.3vw, 14px);
}

/* 2026-05-31 Movie-G: 무비형 본문/행동버튼 라벨 직접입력 (edit 모드).
   decision은 어두운 영상 overlay라 흰 글씨 + 반투명 placeholder. */
.scene-screen--movie [contenteditable="true"] {
  outline: none;
  cursor: text;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
}
.scene-screen--movie .movie-decision__desc[contenteditable="true"] {
  min-height: 1.4em;
}
.scene-screen--movie [contenteditable="true"]:hover {
  background: rgba(255, 255, 255, 0.08);
}
.scene-screen--movie [contenteditable="true"]:focus,
.scene-screen--movie [contenteditable="true"].is-focused {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.scene-screen--movie [contenteditable="true"].is-empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  pointer-events: none;
}
/* 행동버튼 라벨 span — 빈 라벨도 클릭 영역 확보 (Text-2C와 동일 .text-choice-label 마커) */
.scene-screen--movie .text-choice-label {
  display: inline-block;
  min-width: 1.5em;
}

/* 정식 video 태그 — movie-media 영역 안 꽉 채우되 절대 안 넘어감 */
.scene-screen--movie .movie-video {
  width: 100%;
  height: 100%;
  /* W7-A 정정 v3: max-* 명시 — video 자체가 자연 크기를 가지면 부모 grid row를
     밀어낼 수 있어 부모 영역 강제 제한 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* 결정 패널 — flex 0 0 40% 절대 비율. 자체 스크롤로 본문/선택지 길어도 OK */
/* W7-A 정정 v6: 옛 flex 60/40 룰 폐기 — 위에서 absolute overlay 룰 사용 */
.scene-screen--movie .movie-decision__desc {
  font-size: var(--md-body-font, 20px);
  line-height: 1.55;
  color: #fff;          /* W7-A 정정 v6: 어두운 overlay 위에 흰 글씨 */
  margin: 0;
  /* 줄바꿈 정책: 한국어 단어 단위 + 영문/숫자 강제 줄바꿈 */
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.scene-screen--movie .movie-decision__actions {
  /* 2026-06-01 Movie-H: 패널/카드 둘 다 가운데 정렬 + 줄바꿈 허용. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--md-btn-gap, 16px);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
/* legacy data-btn-layout="pair"도 동일 룰 적용 (변별 의미 사라짐) */
.scene-screen--movie .movie-decision__actions[data-btn-layout="pair"] {
  flex-direction: row;
  flex-wrap: nowrap;
}
.scene-screen--movie .movie-decision__actions .choice-v03 {
  /* flex 1 1 0: 부모 폭을 N개 선택지가 1/N씩 균등 분배.
     min-width: 0: flex 자식이 부모 폭 안 넘게 (text 내용에 의한 강제 늘어남 차단).
     width: auto: 본체 룰의 width: 100% 무력화 (flex 분배 우선). */
  flex: 1 1 0;
  width: auto;
  min-width: var(--md-btn-minw, 0px);   /* 0 유지 — 많은 버튼도 flex 균등 분배/축소 */
  padding: var(--md-btn-py, 11px) var(--md-btn-px, 12px);
  font-size: var(--md-btn-font, 16px);
  text-align: center;
  justify-content: center;
}
.scene-screen--movie .movie-decision__actions .choice-v03::after {
  display: none;       /* 화살표 숨김 (가로 분배 시 공간 부족) */
}

/* ╭─────────────────────────────────────────╮
   │  반응형 — 좁은 화면 보정                │
   ╰─────────────────────────────────────────╯ */
@media (max-width: 720px) {
  /* 그림책 LR은 좁은 화면에서 자동으로 TB로 전환.
     16:9 viewer-frame 안에서 좌우 50:50은 720px 미만에서 너무 좁아짐
     (각 영역 ~360px → 패딩/gap 빼면 본문 영역 ~280px → 한글 가독성 한계).
     720px 임계점은 viewer-frame이 그 폭 미만이면 LR 포기하고 TB로. */
  .scene-screen--pb.pb--lr .pb-frame {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ╭─────────────────────────────────────────╮
   │  v0.3 모드 클래스가 있으면 기존 룰 무력 │
   ╰─────────────────────────────────────────╯ */
/* 기존 .text-box, .choices-bottom 등 legacy 클래스는 v0.3 모드 stage 안에선
   생성되지 않음 (renderScene 분기). 따라서 별도 무력화 룰 불필요. */

/* end of v0.3 mode layouts */

/* edit-section-tag — maker도 미래에 v0.3 패널 보일 가능성 대비. 현재 maker는 안 씀. */
.edit-section-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a93a3;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  vertical-align: middle;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .scene-screen--pb.pb--lr .pb-frame {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ╭─────────────────────────────────────────╮
   │  모드 4: 체험전시형 (experience) — 4단계 │
   │  배경 이미지 전체 + 상단 제목 + 하단     │
   │  안내문 + 임시 연결 메뉴                 │
   ╰─────────────────────────────────────────╯ */
.scene-screen--experience {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--v03-bg, #f4f5f7);
  overflow: hidden;
}

/* 배경 이미지 — 화면 전체 */
.scene-screen--experience .exp-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.scene-screen--experience .exp-bg--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef2f8 0%, #dde5ef 100%);
}
.scene-screen--experience .exp-empty-mark {
  font-size: 64px;
  opacity: 0.3;
}
.scene-screen--experience .exp-empty-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--v03-card-fg, #6a7280);
  opacity: 0.7;
}

/* 상단 제목 — 슬라이드형 헤더 톤 (mockup 기준: 깃발 형태가 아닌 단순 헤더) */
.scene-screen--experience .exp-title-overlay {
  position: absolute;
  top: 16px;
  left: 20px;
  padding: 8px 16px;
  font-family: var(--v03-font-h, var(--font-h, sans-serif));
  font-size: 18px;
  font-weight: 700;
  color: var(--v03-card-fg, #1a1a1a);
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  max-width: calc(100% - 40px);
}

/* 하단 안내문 패널 — 본문 있을 때만 표시 (지시문/안내문) */
.scene-screen--experience .exp-body-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 80px;  /* 임시 연결 메뉴 위 — 메뉴 없으면 .exp-connect-menu 없음 */
  padding: 10px 16px;
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  max-height: 30%;
  overflow-y: auto;
}
.scene-screen--experience .exp-body-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v03-card-fg, #1a1a1a);
}
/* (W6 정식 connectObjects 적용 — 기존 .exp-body-panel 위치 단순화) */
.scene-screen--experience .exp-body-panel {
  /* 기본 위치는 위 룰의 bottom: 20px 사용 (임시 connect-menu 폐기) */
}

/* ── W6: 정식 connectObjects 모델 — 배경 위에 절대 위치로 떠 있는 오브젝트 ──
   .exp-objects-layer는 배경 이미지 영역과 동일 100%×100%.
   각 .connect-object는 그 안에서 left/top/width/height % 좌표.
   타입별 시각 (.connect-object--button / --arrow / --flag / --next / --back / --home / --invisible). */
.scene-screen--experience .exp-objects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* layer는 통과 — 자식 .connect-object만 잡음 */
  z-index: 2;
}
.scene-screen--experience .connect-object {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: auto;   /* 자식은 클릭 잡음 */
  cursor: pointer;
  user-select: none;
  font-family: var(--v03-font-h, var(--font-h, sans-serif));
  transition: transform 80ms, box-shadow 120ms;
  box-sizing: border-box;
  /* W6-2: 박스 크기 ↔ 내용 크기 정합성 — container query 활성화.
     자식(.co-label/.co-icon)이 cqh/cqw 단위로 자동 스케일.
     기존 vw 단위는 viewport 기준이라 박스 크기 변해도 폰트/아이콘은 안 변하는 문제. */
  container-type: size;
  container-name: cobj;
}
.scene-screen--experience .connect-object:hover {
  transform: scale(1.03);
}
/* 라벨 — 박스 높이의 약 35% 폰트. 작아지지도 너무 커지지도 않게 clamp. */
.scene-screen--experience .connect-object .co-label {
  font-size: clamp(10px, 35cqh, 28px);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* 아이콘 — 박스 짧은 변(cqmin)의 60% 정도. 작은 박스에서도 또렷, 큰 박스에서도 시원하게. */
.scene-screen--experience .connect-object .co-icon {
  font-size: clamp(14px, 60cqmin, 64px);
  flex-shrink: 0;
  line-height: 1;
}

/* 타입별 시각 + 패딩도 박스에 비례 (cq* 사용) */
.scene-screen--experience .connect-object--button {
  background: #fff;
  border: 1.5px solid var(--v03-accent, #4a90d9);
  border-radius: clamp(6px, 12cqmin, 16px);
  color: var(--v03-card-fg, #1a1a1a);
  padding: clamp(2px, 8cqmin, 12px) clamp(6px, 12cqmin, 18px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.scene-screen--experience .connect-object--button .co-label {
  /* 버튼은 라벨이 메인 — 박스 높이 50% 정도 */
  font-size: clamp(10px, 45cqh, 28px);
}
.scene-screen--experience .connect-object--arrow {
  background: rgba(74, 144, 217, 0.92);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.scene-screen--experience .connect-object--arrow .co-icon {
  /* 화살표는 아이콘 메인 — 박스 짧은 변의 70% */
  font-size: clamp(16px, 70cqmin, 72px);
}
.scene-screen--experience .connect-object--flag {
  background: transparent;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-start;
}
.scene-screen--experience .connect-object--flag .co-icon {
  /* 깃발은 박스 높이의 65% 차지 — 큰 깃발 + 작은 라벨 비율 */
  font-size: clamp(18px, 65cqh, 80px);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  line-height: 1;
}
.scene-screen--experience .connect-object--flag .co-label {
  background: rgba(255,255,255,0.92);
  padding: 1px 5px;
  border-radius: 4px;
  /* 깃발 라벨은 작게 — 박스 높이 18% */
  font-size: clamp(8px, 18cqh, 16px);
}
.scene-screen--experience .connect-object--next,
.scene-screen--experience .connect-object--back,
.scene-screen--experience .connect-object--home {
  background: rgba(33, 41, 51, 0.88);
  color: #fff;
  border-radius: clamp(4px, 10cqmin, 12px);
  padding: clamp(2px, 8cqmin, 10px) clamp(4px, 10cqmin, 14px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.scene-screen--experience .connect-object--next .co-icon,
.scene-screen--experience .connect-object--back .co-icon,
.scene-screen--experience .connect-object--home .co-icon {
  /* 시스템 액션은 라벨 + 아이콘 균형 — 아이콘 작게 */
  font-size: clamp(12px, 50cqh, 32px);
}
.scene-screen--experience .connect-object--next .co-label,
.scene-screen--experience .connect-object--back .co-label,
.scene-screen--experience .connect-object--home .co-label {
  font-size: clamp(10px, 40cqh, 24px);
}
.scene-screen--experience .connect-object--invisible {
  background: transparent;
  border: 0;
  /* 투명 영역은 박스 크기만 영향, 내용 스케일 무관 (사용자 명시 예외) */
}
/* 다듬기 모드에서 invisible은 점선 외곽 표시 (감상 모드에선 진짜 안 보임) */
.scene-screen--experience[data-edit-mode="true"] .connect-object--invisible {
  background: rgba(74, 144, 217, 0.08);
  border: 2px dashed rgba(74, 144, 217, 0.6);
  border-radius: 6px;
}
.scene-screen--experience[data-edit-mode="true"] .connect-object--invisible .co-label--invisible-hint {
  font-size: 11px;
  color: rgba(74, 144, 217, 0.9);
  font-style: italic;
  background: rgba(255,255,255,0.85);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 다듬기 모드 — 모든 오브젝트에 점선 외곽 + 핸들 노출 */
.scene-screen--experience[data-edit-mode="true"] .connect-object {
  outline: 1px dashed rgba(74, 144, 217, 0.5);
  outline-offset: 1px;
}
.scene-screen--experience[data-edit-mode="true"] .connect-object--moving,
.scene-screen--experience[data-edit-mode="true"] .connect-object--resizing {
  outline: 2px solid rgba(74, 144, 217, 1);
  z-index: 100;
}

/* 핸들 (W4 패턴) — 다듬기 모드만 */
.scene-screen--experience .co-handle {
  position: absolute;
  display: none;
  user-select: none;
  pointer-events: auto;
}
.scene-screen--experience[data-edit-mode="true"] .co-handle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene-screen--experience .co-handle--move {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  font-size: 16px;
  color: #fff;
  background: rgba(74, 144, 217, 0.9);
  border-radius: 50%;
  cursor: move;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 3;
  font-weight: 700;
}
.scene-screen--experience .co-handle--move:hover,
.scene-screen--experience .co-handle--move:active {
  background: rgba(74, 144, 217, 1);
}
.scene-screen--experience [class*="co-handle--resize-"] {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid rgba(74, 144, 217, 1);
  border-radius: 3px;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.scene-screen--experience .co-handle--resize-nw {
  top: 2px; left: 2px; cursor: nwse-resize;
}
.scene-screen--experience .co-handle--resize-ne {
  top: 2px; right: 2px; cursor: nesw-resize;
}
.scene-screen--experience .co-handle--resize-sw {
  bottom: 2px; left: 2px; cursor: nesw-resize;
}
.scene-screen--experience .co-handle--resize-se {
  bottom: 2px; right: 2px; cursor: nwse-resize;
}

/* 체험전시형 표준 네비 (4단계 보강) — 뒤로가기 / 처음으로.
   배경 이미지 위에 떠있는 작은 둥근 버튼. mockup의 학교 지도 화면 톤 따라.
   다음(next) 버튼은 사용자가 만든 연결 오브젝트(buttons[])가 담당하므로 표준 X. */
.scene-screen--experience .exp-nav {
  position: absolute;
  z-index: 10;
}
.scene-screen--experience .exp-nav--top-left {
  top: 16px;
  left: 16px;
}
.scene-screen--experience .exp-nav--top-right {
  top: 16px;
  right: 16px;
}
.exp-nav-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--v03-font-h, var(--font-h, sans-serif));
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  color: var(--v03-card-fg, #1a1a1a);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 120ms;
}
.exp-nav-btn:hover {
  background: #fff;
}
.exp-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 제목 overlay가 좌상단 네비와 겹치지 않도록 — 뒤로가기 버튼 위 또는 우측으로 */
.scene-screen--experience .exp-title-overlay {
  /* 뒤로가기 버튼이 좌상단 16px에 있으므로 제목은 더 아래로 */
  top: 64px;
}

/* ================================================================
   W5: 텍스트형 본격 보강 — 폰트 변수 / 8종 테마 / 효과
   ─────────────────────────────────────────────────────────────
   · 폰트: --font-* 변수 8종. text-card에 inline CSS 변수로 흘려넣음.
   · 테마: data-text-theme="..." 분기 (8종)
   · 효과: data-text-entrance / data-text-body 분기
   · 사용자 직접 스타일(폰트/크기/색/굵기)이 테마 기본값 위에 덮어씀.
   ================================================================ */

/* 폰트 변수 — 사용자 메모리 기반 + W9 확장 (총 18종) */
/* T-THEME-1 텍스트 테마 기본 글씨체 정본(--text-ff 미세팅 시 .text-card font-family로 적용):
   classic→gothic · paperbook→hahmlet · note→gaegu · handwriting→pen · retro→galmuri · dark→diphylleia.
   값 변경 시 viewer.html/maker.html 폰트 로드와 함께 유지. */
:root {
  --font-gothic:     'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-batang:     'Gowun Batang', 'Apple SD Gothic Neo', 'Batang', '바탕', serif;
  --font-jua:        'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-hanna:      'Black Han Sans', 'Jua', sans-serif;
  --font-pen:        'Nanum Pen Script', 'Gaegu', cursive;
  --font-gaegu:      'Gaegu', 'Nanum Pen Script', cursive;
  --font-galmuri:    'Galmuri7', 'Galmuri', monospace;
  --font-cormorant:  'Cormorant Garamond', 'Gowun Batang', serif;
  /* W9 추가 10종 (구글 폰트 OFL) */
  --font-notosans:   'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-notoserif:  'Noto Serif KR', 'Apple SD Gothic Neo', 'Batang', '바탕', serif;
  --font-dohyeon:    'Do Hyeon', 'Jua', sans-serif;
  --font-dodum:      'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-himelody:   'Hi Melody', 'Gaegu', cursive;
  --font-yeonsung:   'Yeon Sung', 'Gaegu', cursive;
  --font-dokdo:      'East Sea Dokdo', 'Nanum Pen Script', cursive;
  --font-diphylleia: 'Diphylleia', 'Cormorant Garamond', serif;
  --font-hahmlet:    'Hahmlet', 'Gowun Batang', serif;
  --font-stylish:    'Stylish', 'Gowun Batang', serif;
}

/* 사용자 스타일 적용 (CSS 변수로 inline 적용) */
.scene-screen--text .text-card {
  font-family: var(--text-ff, var(--font-gothic));
  font-weight: var(--text-weight, normal);
}
.scene-screen--text .text-card__body {
  font-size: var(--text-fs-body, 15px);
  font-weight: inherit;
}
.scene-screen--text .text-card__title {
  /* W5 본문 위계 정정: 텍스트형은 "본문이 주인공" — 제목은 보조.
     기존엔 제목이 본문 × 1.4로 더 컸으나, 사용자 원칙(본문 > 제목)에 맞춰
     제목을 본문 × 0.78 (약 18px 본문일 때 14px 제목)로 보조 위계로 변경.
     색상도 muted 톤으로 약화. */
  font-size: calc(var(--text-fs-body, 18px) * 0.78);
  font-weight: 700;
  opacity: 0.72;
  letter-spacing: 0.02em;
}
/* T-THEME-2: 본문/제목 색은 카드 color 상속(테마별 .text-card color가 정본) — 사용자 명시색만 override.
   기존 var(--v03-fg)는 전 테마 어두운 값이라 dark/retro 카드에서 본문이 안 보였음. (scoped: 텍스트 모드만) */
.scene-screen--text .text-card__body,
.scene-screen--text .text-card__title {
  color: var(--text-color-override, inherit);
}

/* W5: 본문 위계 강화 — 본문이 가장 크고 시각적으로 메인.
   · 본문 기본 크기 15px → 18px로 키움 (사용자 슬라이더로 12~28 조절 가능)
   · line-height 여유 + letter-spacing 미세 조정으로 가독성 ↑
   · 제목과의 시각 격차 명확 (제목 0.78배 + opacity 0.72) */
.scene-screen--text .text-card__body {
  font-size: var(--text-fs-body, 18px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  font-weight: inherit;
}

/* ─── 테마 8종 ─── */

/* classic — 기본 (현재 톤) */
.scene-screen--text[data-text-theme="classic"] .text-card {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #e0e0e0;
}

/* novel — 베이지 + 명조 */
.scene-screen--text[data-text-theme="novel"] .text-card {
  background: #f7f1e3;
  color: #3d2914;
  border: 1px solid #d4c4a0;
  font-family: var(--text-ff, var(--font-batang));
}
.scene-screen--text[data-text-theme="novel"] .text-card__title {
  color: #5c2c2c;
}

/* paperbook — 오래된 종이 */
.scene-screen--text[data-text-theme="paperbook"] .text-card {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(120, 90, 50, 0.03) 2px 3px),
    #f4ead5;
  color: #3d2914;
  border: 1px solid #c8b896;
  box-shadow: 0 4px 12px rgba(120, 90, 50, 0.15);
  /* T-THEME-1: 고전 기록 기본폰트 = Hahmlet (--text-ff 미세팅 시). */
  font-family: var(--text-ff, var(--font-hahmlet));
}
.scene-screen--text[data-text-theme="paperbook"] .text-card__title {
  color: #6b3f1a;
  border-bottom: 1px dashed #c8b896;
  padding-bottom: 8px;
}

/* note — 격자 + 손글씨 */
.scene-screen--text[data-text-theme="note"] .text-card {
  background:
    linear-gradient(#dceaf5 1px, transparent 1px) 0 0/100% 28px,
    #fafdff;
  color: #2c4060;
  border: 1px solid #c8d8e8;
  font-family: var(--text-ff, var(--font-gaegu));
}
.scene-screen--text[data-text-theme="note"] .text-card__title {
  color: #1c4070;
}

/* magazine — 굵은 헤드라인 */
.scene-screen--text[data-text-theme="magazine"] .text-card {
  background: #ffffff;
  color: #1a1a1a;
  border: none;
  border-left: 6px solid #d62c1a;
  border-radius: 4px;
  padding-left: 28px;
}
.scene-screen--text[data-text-theme="magazine"] .text-card__title {
  font-family: var(--font-hanna);
  font-size: calc(var(--text-fs-body, 15px) * 2);
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

/* handwriting — 편지지 */
.scene-screen--text[data-text-theme="handwriting"] .text-card {
  background: #fffaf0;
  color: #2a2418;
  border: 1px solid #e8d4a8;
  border-radius: 4px;
  font-family: var(--text-ff, var(--font-pen));
  /* 본문은 펜 글씨라 line-height 더 여유 */
}
.scene-screen--text[data-text-theme="handwriting"] .text-card__body {
  font-size: calc(var(--text-fs-body, 15px) * 1.3); /* 펜 폰트는 작아보여 보정 */
  line-height: 1.6;
}
.scene-screen--text[data-text-theme="handwriting"] .text-card__title {
  color: #4a2c1a;
}

/* retro — 검은 배경 + 픽셀 */
.scene-screen--text[data-text-theme="retro"] .text-card {
  background: #1a1a1a;
  color: #4af09a;
  border: 2px solid #4af09a;
  border-radius: 0;
  font-family: var(--text-ff, var(--font-galmuri));
  box-shadow: 0 0 20px rgba(74, 240, 154, 0.15);
}
.scene-screen--text[data-text-theme="retro"] .text-card__title {
  color: #ffea4a;
  text-shadow: 2px 2px 0 rgba(255, 234, 74, 0.3);
}

/* dark — 어두운 톤 */
.scene-screen--text[data-text-theme="dark"] .text-card {
  background: #161d2f;
  color: #e8edf5;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  /* T-THEME-1: 밤의 미스터리 기본폰트 = Diphylleia (--text-ff 미세팅 시). */
  font-family: var(--text-ff, var(--font-diphylleia));
}
.scene-screen--text[data-text-theme="dark"] .text-card__title {
  color: #ffffff;
}

/* ─── 효과: 진입 ─── */
@keyframes textFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes textSlideIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.scene-screen--text[data-text-entrance="fade"] .text-card {
  animation: textFadeIn 0.45s ease-out both;
}
.scene-screen--text[data-text-entrance="slide"] .text-card {
  animation: textSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── 효과: 본문 타자기 ─── */
@keyframes typewriterReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.scene-screen--text[data-text-body="typewriter"] .text-card__body {
  animation: typewriterReveal 1.6s steps(40, end) both;
  /* 텍스트 길이에 비례한 자연스러운 진행감. 길이 무관 일정한 시간이라 짧은 글은 빠르게,
     긴 글은 천천히 보이는 시각적 효과 부여. */
}

/* ─── Text-2B (2026-05-31): 텍스트 본문 직접 입력 (edit 모드 전용) ───
   그림책 본문 contenteditable과 동일 UX를 텍스트 모드에도. placeholder/포커스
   스타일은 .scene-screen--pb에만 있던 룰을 .scene-screen--text용으로 별도 추가.
   색은 테마 8종(밝은/어두운: retro·dark) 모두 대응 위해 currentColor + opacity. */
.scene-screen--text [contenteditable="true"] {
  outline: none;
  cursor: text;
  min-height: 1.6em;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
}
.scene-screen--text [contenteditable="true"]:hover {
  background: rgba(127, 127, 127, 0.10);
}
.scene-screen--text [contenteditable="true"]:focus,
.scene-screen--text [contenteditable="true"].is-focused {
  background: rgba(127, 127, 127, 0.12);
  box-shadow: 0 0 0 2px rgba(127, 127, 127, 0.40);
}
.scene-screen--text [contenteditable="true"].is-empty::before {
  content: attr(data-placeholder);
  color: currentColor;
  opacity: 0.45;
  font-style: italic;
  pointer-events: none;
}
/* Text-2C: 행동 버튼 라벨 직접편집 span — 빈 라벨도 클릭 영역 확보(inline은 min-height 무시).
   inline-block + min-width로 빈 상태에서도 placeholder(::before) 폭 + 클릭 가능. */
.scene-screen--text .text-choice-label {
  display: inline-block;
  min-width: 1.5em;
}
/* edit 모드에선 텍스트 효과(entrance/typewriter clip-path) 끔 — contenteditable 입력 깨짐 차단.
   감상(.viewer-test-active 포함 X) 에서는 효과 유지. .text-card 중앙정렬 transform은 건드리지 않음. */
body.edit-mode-active:not(.viewer-test-active) .scene-screen--text .text-card,
body.edit-mode-active:not(.viewer-test-active) .scene-screen--text .text-card__body {
  animation: none !important;
}

/* ════════════════════════════════════════════════════
   Text-4 (2026-05-31): 텍스트 엔딩 = 일반 텍스트 장면과 같은 판형의 "마지막 장면"
   ─────────────────────────────────────────────────────
   · 컨테이너/페이지/카드/제목/본문은 일반 장면(scene-screen--text-paged + .text-card
     + .text-card__title/__body)을 그대로 사용 → 테마 8종·textStyle·세로 페이지 100% 동일.
   · 엔딩 차이는 카드 하단의 작은 마감 표시(.text-ending-foot)뿐. 별도 대형 카드/스탬프 없음.
   ════════════════════════════════════════════════════ */
.scene-screen--text .text-ending-foot {
  /* .text-card__body(flex:1)가 위를 채우므로 자연히 하단. 작고 보조적인 마감 영역. */
  flex-shrink: 0;
  margin-top: clamp(14px, 2.4vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scene-screen--text .text-ending-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: currentColor;
  opacity: 0.5;        /* 본문보다 약하게 — 튀지 않는 마감 표시 */
  font-family: var(--font-ui, 'Jua', sans-serif);
}
.scene-screen--text .text-ending-mark-label {
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: 0.04em;
}
.scene-screen--text .text-ending-path {
  font-size: clamp(10px, 1.1vw, 12px);
  opacity: 0.8;
}
.scene-screen--text .text-ending-actions {
  /* 작은 버튼 가로 한 줄(좁으면 줄바꿈). 전체 폭으로 뻗지 않음. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.scene-screen--text .text-ending-actions .terminal-btn {
  width: auto;
  min-width: 130px;
  padding: 8px 18px;
  font-size: clamp(12px, 1.3vw, 14px);
}
/* 버튼 등장 전 클릭 차단(살짝 흐리게). 다듬기 모드는 즉시 클릭 가능. */
.scene-screen--text .text-ending-actions.is-locked { pointer-events: none; opacity: 0.5; }
.scene-screen--text .text-ending-actions.is-ready  { pointer-events: auto; opacity: 1; transition: opacity 0.3s; }
body.edit-mode-active:not(.viewer-test-active) .scene-screen--text .text-ending-actions {
  pointer-events: auto;
  opacity: 1;
}

/* ════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D2 (2026-06-19): 텍스트 8테마 통합 (배경/버튼/엔딩)
   ─────────────────────────────────────────────────────
   · 위 .text-card 테마 룰(카드 색/폰트)은 보존. 여기선 무대 배경(surface)·버튼·
     divider·엔딩을 테마 변수 재정의 + 최소 텍스처로 통일 → "흰 슬라이드 + 따로 노는
     버튼"(PPT 느낌) 제거.
   · --v03-bg/btn/divider만 재정의하므로 컴포넌트 CSS는 무수정(.choice-v03 등은
     이미 var() 소비). card 색은 기존 직접 룰이 우선(의도적 보존).
   · data-pb-theme(그림책)·movie·experience는 건드리지 않음.
   ════════════════════════════════════════════════════ */

/* classic — 오프화이트 무대 + 중립 버튼 */
.scene-screen--text[data-text-theme="classic"] {
  --v03-bg: #f3f3f1; --v03-divider: #ececea;
  --v03-btn-bg: #ffffff; --v03-btn-fg: #333330; --v03-btn-border: #dcdcd8;
  --v03-btn-hover-bg: #f1f1ef; --v03-btn-hover-bd: #bdbdb8;
}

/* novel — 세피아 지면 + 세피아 버튼 + 챕터 끝 느낌 */
.scene-screen--text[data-text-theme="novel"] {
  --v03-bg: #ece2cc; --v03-divider: #d8c7a4;
  --v03-btn-bg: #f3ead6; --v03-btn-fg: #4a3420; --v03-btn-border: #cdb88f;
  --v03-btn-hover-bg: #ead9b8; --v03-btn-hover-bd: #a9824f;
}
.scene-screen--text[data-text-theme="novel"] .text-ending-mark { font-style: italic; }

/* paperbook — 종이 무대(종이결) + 종이 버튼 + 스탬프 마감 */
.scene-screen--text[data-text-theme="paperbook"] {
  --v03-bg: #e9ddc3; --v03-divider: #cdbb96;
  --v03-btn-bg: #efe3c9; --v03-btn-fg: #43321c; --v03-btn-border: #c2ab82;
  --v03-btn-hover-bg: #e4d4b3; --v03-btn-hover-bd: #9a6b3f;
  background-image: repeating-linear-gradient(45deg, rgba(120,90,50,.04) 0 1px, transparent 1px 6px);
}
.scene-screen--text[data-text-theme="paperbook"] .text-ending-mark-label {
  border: 1px dashed currentColor; border-radius: 999px; padding: 3px 12px;
}

/* note — 줄지 무대 + 노트 라벨 버튼 */
.scene-screen--text[data-text-theme="note"] {
  --v03-bg: #eef5fb; --v03-divider: #cfe0ee;
  --v03-btn-bg: #ffffff; --v03-btn-fg: #2c4060; --v03-btn-border: #c4d6e6;
  --v03-btn-hover-bg: #e6f0f8; --v03-btn-hover-bd: #7ba3c8;
  background-image: linear-gradient(#d6e6f2 1px, transparent 1px);
  background-size: 100% 28px;
}
.scene-screen--text[data-text-theme="note"] .choice-v03 { border-radius: 4px; }

/* magazine — 강한 여백 무대 + 각진 액센트 버튼 */
.scene-screen--text[data-text-theme="magazine"] {
  --v03-bg: #f0efec; --v03-divider: #dededa;
  --v03-btn-bg: #ffffff; --v03-btn-fg: #1a1a1a; --v03-btn-border: #1a1a1a;
  --v03-btn-hover-bg: #1a1a1a; --v03-btn-hover-bd: #1a1a1a;
}
.scene-screen--text[data-text-theme="magazine"] .choice-v03 { border-radius: 2px; font-weight: 700; }
.scene-screen--text[data-text-theme="magazine"] .choice-v03:hover:not(:disabled) { color: #ffffff; }
.scene-screen--text[data-text-theme="magazine"] .text-ending-mark-label {
  border-top: 3px solid #d62c1a; padding-top: 6px;
}

/* handwriting — 편지지 무대 + 둥근 손글씨 라벨 버튼 */
.scene-screen--text[data-text-theme="handwriting"] {
  --v03-bg: #f6edda; --v03-divider: #e6d3a8;
  --v03-btn-bg: #fffaf0; --v03-btn-fg: #3a2c1a; --v03-btn-border: #e0c890;
  --v03-btn-hover-bg: #f7eccf; --v03-btn-hover-bd: #c69a52;
}
.scene-screen--text[data-text-theme="handwriting"] .choice-v03 { border-radius: 999px; }

/* retro — 어두운 무대(픽셀 줄) + 게임 UI 버튼 */
.scene-screen--text[data-text-theme="retro"] {
  --v03-bg: #0e0e0e; --v03-divider: rgba(74,240,154,.25);
  --v03-btn-bg: #141414; --v03-btn-fg: #4af09a; --v03-btn-border: #4af09a;
  --v03-btn-hover-bg: #1c1c1c; --v03-btn-hover-bd: #7af0b5;
  background-image: repeating-linear-gradient(0deg, rgba(74,240,154,.04) 0 2px, transparent 2px 4px);
}
.scene-screen--text[data-text-theme="retro"] .choice-v03 {
  border-radius: 0; border-width: 2px; box-shadow: 0 0 8px rgba(74,240,154,.12);
}

/* dark — 짙은 중성 무대 + 은은한 테두리 버튼 + 발광 마감 */
.scene-screen--text[data-text-theme="dark"] {
  --v03-bg: #0e1320; --v03-divider: rgba(255,255,255,.08);
  --v03-btn-bg: rgba(255,255,255,.05); --v03-btn-fg: #e8edf5; --v03-btn-border: rgba(255,255,255,.16);
  --v03-btn-hover-bg: rgba(255,255,255,.1); --v03-btn-hover-bd: rgba(255,255,255,.32);
}
.scene-screen--text[data-text-theme="dark"] .text-ending-mark-label {
  text-shadow: 0 0 8px rgba(180,200,255,.4);
}

/* 텍스트 엔딩 버튼: 8테마 모두 무대 버튼 톤(--v03-btn)에 종속 → 엔딩도 테마가 책임.
   터미널 버튼은 시스템 버튼이지만 텍스트 모드에 한해 테마색을 따른다(그림책/무비 무관). */
.scene-screen--text[data-text-theme] .text-ending-actions .terminal-btn {
  background: var(--v03-btn-bg);
  color: var(--v03-btn-fg);
  border: 1px solid var(--v03-btn-border);
}
.scene-screen--text[data-text-theme] .text-ending-actions .terminal-btn:hover:not(:disabled) {
  background: var(--v03-btn-hover-bg);
  border-color: var(--v03-btn-hover-bd);
}

/* ════════════════════════════════════════════════════
   T-THEME-2: 텍스트 테마 6종 정밀 강화 (2026-06-22)
   ─────────────────────────────────────────────────────
   · 모두 .scene-screen--text[data-text-theme="X"] 스코프 → 그림책/무비 무영향.
   · 카드 배경/프레임/장식은 background 레이어 + box-shadow + data-uri SVG (CSS/SVG 우선,
     이미지 에셋 0). background는 overflow 스크롤과 무관(요소 고정)이라 긴 본문도 안전.
   · 폰트/카드 color는 baseline(위 룰)·T-THEME-1 정본 유지 — 여기선 미지정.
   · 말풍선·기승전결 변형 없음. 장식은 본문 보조 수준.
   ════════════════════════════════════════════════════ */

/* R2: 텍스트 모드 선택지는 긴 라벨이 잘리지 않고 줄바꿈(공통 .choice-v03의 nowrap/ellipsis 해제).
   텍스트 스코프 한정 → 그림책(.scene-screen--pb)·무비 무영향. */
.scene-screen--text .choice-v03 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-height: 44px;       /* R4: 태블릿 터치 영역 보장 */
  box-sizing: border-box;
}

/* ── 1. classic 담백한 글 — 가장 깨끗한 독서형. 장식 0, 부드러운 그림자, 넉넉한 여백. ── */
.scene-screen--text[data-text-theme="classic"] .text-card {
  background: #ffffff;
  border: 1px solid #ececec;
  box-shadow: 0 1px 2px rgba(40,40,40,.035), 0 8px 24px rgba(40,40,40,.05);  /* R5: 그림자 소폭↓ */
  padding: 28px 34px 20px;   /* R1/R5: 과여백 완화(크기 유지) */
}
.scene-screen--text[data-text-theme="classic"] .text-card__body { line-height: 1.72; margin-bottom: 14px; }  /* R5: 본문 하단 여백↓ */
.scene-screen--text[data-text-theme="classic"] .choice-v03 { border-radius: 10px; }

/* ── 2. paperbook 고전 기록 — 따뜻한 종이 + 얇은 이중 고전 테두리 + 작은 인장. ── */
.scene-screen--text[data-text-theme="paperbook"] .text-card {
  background-color: #eaddb6;   /* R3: 더 누런 고문서 톤 → 편지(밝은 크림)와 명확 분리 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='4' y='4' width='32' height='32' rx='3' fill='none' stroke='%23b0492f' stroke-width='1.5' opacity='0.4'/%3E%3Ctext x='20' y='26' font-size='17' text-anchor='middle' fill='%23b0492f' opacity='0.42' font-family='serif'%3E記%3C/text%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(120,90,50,.03) 2px 3px);
  background-repeat: no-repeat, repeat;
  background-position: right 16px top 14px, 0 0;   /* R6: 인장을 우상단으로 — 하단 선택지와 겹침 회피 + 투명도↓ */
  background-size: 34px 34px, auto;
  border: none;
  box-shadow:
    0 4px 14px rgba(120,90,50,.16),
    inset 0 0 0 1px #c2a878,
    inset 0 0 0 4px #eaddb6,
    inset 0 0 0 5px rgba(160,120,70,.35);
  padding: 32px 34px 22px;   /* R5: 이중프레임 안쪽선 .45→.35(과밀 완화) + 4px층 배경색 정합 */
}
.scene-screen--text[data-text-theme="paperbook"] .text-card__actions { border-top-style: double; border-top-width: 3px; }
.scene-screen--text[data-text-theme="paperbook"] .choice-v03 { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(160,120,70,.25); }

/* ── 3. note 이야기 노트 — 파란 줄 + 빨간 마진선 + 손그림 테두리 + 작은 별 낙서. 밝고 활기. ── */
.scene-screen--text[data-text-theme="note"] .text-card {
  background-color: #fafdff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 3l2.6 6.3 6.4.5-5 4.2 1.6 6.2L13 17.2 7.4 20.4 9 14.2 4 10l6.4-.5z' fill='none' stroke='%23f0a83a' stroke-width='1.4'/%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent 0 30px, rgba(225,120,120,.5) 30px 31px, transparent 31px),
    linear-gradient(rgba(170,205,232,.5) 1px, transparent 1px);  /* R4: 노트선 연하게(본문 우선) */
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: right 16px top 14px, 0 0, 0 32px;   /* R6: 줄 시작 오프셋 정합 */
  background-size: 18px 18px, 100% 100%, 100% 34px;   /* R6: 줄 주기 34px = 본문 행간과 정합 */
  border: 1.5px solid #bcd3e6;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(70,110,150,.10);
  padding: 30px 30px 22px 40px;
}
.scene-screen--text[data-text-theme="note"] .text-card__body { font-size: calc(var(--text-fs-body, 18px) * 1.06); line-height: 1.78; }  /* R4/R6: Gaegu 보정 + 행간 34px=노트 줄주기 정합 */
/* R3: 손그림 느낌 — 선택지 미세 회전(유아 스티커化 아님, 절제). */
.scene-screen--text[data-text-theme="note"] .choice-v03 { border-radius: 6px; border-color: #9cc0de; transform: rotate(-0.3deg); }
.scene-screen--text[data-text-theme="note"] .choice-v03:nth-child(even) { transform: rotate(0.3deg); }

/* ── 4. handwriting 편지와 일기 — 따뜻한 편지지 + 넉넉한 여백 + 작은 식물. 차분. ── */
.scene-screen--text[data-text-theme="handwriting"] .text-card {
  background-color: #fffaf0;  /* R3: 밝은 편지지 유지 → 고문서(누런)와 명도 대비로 분리 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='34'%3E%3Cg transform='rotate(-4 48 17)'%3E%3Crect x='12' y='9' width='72' height='16' rx='1' fill='%23d7c7a2' opacity='0.5'/%3E%3Cline x1='12' y1='17' x2='84' y2='17' stroke='%23c6b48c' stroke-width='0.6' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 50 Q26 28 27 8' stroke='%239fb37e' stroke-width='1.4' fill='none'/%3E%3Cpath d='M27 20 Q16 16 13 7 Q24 11 27 20' fill='%23b7c99a' opacity='0.85'/%3E%3Cpath d='M27 30 Q38 26 41 17 Q30 21 27 30' fill='%23b7c99a' opacity='0.85'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center top, right 18px bottom 14px;
  background-size: 96px 34px, 50px 50px;
  border: 1px solid #ecdcb4;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(150,120,70,.12);
  padding: 38px 32px 24px;   /* R3: 상단 테이프 공간 위해 top 패딩 복원 */
}
/* R1/R5: Nanum Pen 획이 얇아 흐려 보임 → 본문 더 진하게·크게·행간 여유(가독성 우선). */
.scene-screen--text[data-text-theme="handwriting"] .text-card__body { color: #241c10; line-height: 1.7; font-size: calc(var(--text-fs-body, 18px) * 1.4); }
/* R6: 선택지 글자를 본문(펜·큰 글씨)과 지나치게 차이나지 않게 소폭↑ */
.scene-screen--text[data-text-theme="handwriting"] .choice-v03 { border-radius: 999px; font-size: 16px; }

/* ── 5. retro 레트로 게임 — 어두운 화면 + 녹색 픽셀 + 픽셀 프레임 + ▶️ 커서 + 약한 스캔라인. ── */
.scene-screen--text[data-text-theme="retro"] .text-card {
  background-color: #0d130d;
  color: #93dca8;            /* R1/R5: 네온→차분한 녹색, 채도 더 낮춰 장시간 피로↓ */
  border: 2px solid #43c486; /* R1: 네온 테두리 톤다운 */
  border-radius: 0;
  /* R3: 계단식 픽셀 프레임(blur 0 = 또렷한 픽셀 엣지) + 코너 픽셀 악센트(배경 SVG). */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M0 0h6v2h-4v4h-2z' fill='%2343c486'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M14 14h-6v-2h4v-4h2z' fill='%2343c486'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(74,240,154,.03) 0 1px, transparent 1px 3px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: left 5px top 5px, right 5px bottom 5px, 0 0;
  background-size: 14px 14px, 14px 14px, auto;
  box-shadow: 0 0 0 2px #0d130d, 0 0 0 4px #43c486, 0 0 10px rgba(74,240,154,.05);  /* R5: glow↓ */
  padding: 28px 30px 22px;
}
.scene-screen--text[data-text-theme="retro"] .text-card__body {
  font-size: calc(var(--text-fs-body, 18px) * 0.94);
  line-height: 1.65; letter-spacing: 0.02em;
  /* R6: 본문 기본색을 밝은 민트로 명시(어두운 배경 가독성). 사용자 명시색은 override 유지. */
  color: var(--text-color-override, #aef0c6);
  text-shadow: 0 0 1px rgba(0,0,0,.35);   /* 매우 약한 그림자로 스캔라인 위 또렷함 */
}
.scene-screen--text[data-text-theme="retro"] .choice-v03 {
  border-radius: 0; border-width: 2px; position: relative; padding-left: 30px;
  box-shadow: 0 0 8px rgba(74,240,154,.12);
}
.scene-screen--text[data-text-theme="retro"] .choice-v03::before {
  content: '\25B6'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.7em; color: #4af09a; opacity: 0.35; transition: opacity .12s;
}
.scene-screen--text[data-text-theme="retro"] .choice-v03:hover:not(:disabled)::before,
.scene-screen--text[data-text-theme="retro"] .choice-v03:focus-visible::before { opacity: 1; }

/* ── 6. dark 밤의 미스터리 — 짙은 남색 + 얇은 금테 + 달·별 + 희미한 빛. 절제된 금색. ── */
.scene-screen--text[data-text-theme="dark"] .text-card {
  background-color: #131a2b;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M30 8 a13 13 0 1 0 5 21 a10.5 10.5 0 0 1 -5 -21z' fill='none' stroke='%23c9a86a' stroke-width='1.3' opacity='0.7'/%3E%3Ccircle cx='12' cy='13' r='1' fill='%23c9a86a' opacity='0.8'/%3E%3Ccircle cx='15' cy='30' r='1.3' fill='%23c9a86a' opacity='0.7'/%3E%3C/svg%3E"),
    radial-gradient(130% 70% at 78% -5%, rgba(150,170,220,.13), transparent 55%),
    radial-gradient(120% 55% at 50% 115%, rgba(44,60,102,.6), transparent 72%);  /* R5: 하단 안개 소폭↑(밤 분위기) */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 16px top 14px, 0 0, 0 0;
  background-size: 42px 42px, 100% 100%, 100% 100%;
  border: none;
  /* R1: retro와 정체성 분리 — 금테 이중선으로 고전 미스터리 강화(절제). */
  box-shadow: 0 8px 32px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(201,168,106,.55),
    inset 0 0 0 4px rgba(19,26,43,1),
    inset 0 0 0 5px rgba(201,168,106,.22);
  border-radius: 8px;
  padding: 30px 32px 22px;
}
.scene-screen--text[data-text-theme="dark"] .text-card { color: #eef2f8; }
/* R6: 밤 배경 본문 기본색을 따뜻한 회백색으로 명시(검게 보이는 문제 해결). 사용자 명시색은 override 유지. */
.scene-screen--text[data-text-theme="dark"] .text-card__body { color: var(--text-color-override, #edf0f6); }
.scene-screen--text[data-text-theme="dark"] .text-card__actions { border-top-color: rgba(201,168,106,.3); }
.scene-screen--text[data-text-theme="dark"] .choice-v03 { border-color: rgba(201,168,106,.55); }  /* T3: 버튼 대비 소폭↑(조작성) */
.scene-screen--text[data-text-theme="dark"] .choice-v03:hover:not(:disabled) { border-color: rgba(201,168,106,.78); }

/* R4: 좁은 모바일 — 장식/프레임이 본문 폭을 잠식하지 않게 카드 패딩 축소(텍스트 스코프). */
@media (max-width: 480px) {
  .scene-screen--text[data-text-theme] .text-card { padding: 22px 20px 18px; }
  .scene-screen--text[data-text-theme="note"] .text-card { padding-left: 28px; }
  .scene-screen--text[data-text-theme="handwriting"] .text-card { padding: 26px 22px 18px; }
}

/* ════════════════════════════════════════════════════
   T-THEME-3: 감상 무대(stage) 배경 통합 (2026-06-22)
   ─────────────────────────────────────────────────────
   · 무대 = .scene-screen--text (viewer-frame·stage-wrap을 가득 채움 = 화면 전체 무대).
   · 문제: viewer.css `.scene-screen[data-presentation-mode="text"]{background-color:#faf6ec}`(0,2,0)가
     `.scene-screen--text{background:var(--v03-bg)}`(0,1,0)를 덮어 전 테마 무대가 크림 → 테마 무력화.
   · 해결: `.scene-screen--text[data-text-theme=X]`(0,2,0)에 background 직접 지정
     (v03-modes가 viewer.css 뒤 로드 → 동일 specificity서 승리). 텍스트+테마 스코프 → 그림책/무비/HUD 무영향.
   · 카드 내부(T-THEME-2)·본문색(R6)·--v03-* 변수 무수정. CSS gradient만(신규 에셋 0).
   · 상단 도구바/장면이동바(#hud·#scene-navigator 등)는 scene-screen 밖 → 영향 없음.
   ════════════════════════════════════════════════════ */

/* classic — 깨끗한 웜아이보리 무대(카드가 자연스럽게 뜸). 장식 0. */
.scene-screen--text[data-text-theme="classic"] {
  background: radial-gradient(125% 95% at 50% 30%, #f6f4ef 0%, #ece9e1 100%);
}
/* paperbook — 누런 종이 워시 + 미세 비네팅(책상 위 종이). */
.scene-screen--text[data-text-theme="paperbook"] {
  background:
    radial-gradient(140% 110% at 50% 38%, rgba(0,0,0,0) 55%, rgba(90,60,25,.17) 100%),
    radial-gradient(120% 100% at 50% 32%, #e9dab2 0%, #ddc99f 100%);
}
/* note — 웜아이보리 + 무대 가로선(카드 안보다 옅게). 빨간 마진선은 카드 내부만. */
.scene-screen--text[data-text-theme="note"] {
  background:
    repeating-linear-gradient(rgba(150,180,210,.16) 0 1px, transparent 1px 34px),
    #f3ecdb;
}
/* handwriting — 따뜻한 살구빛 편지지(중앙 밝고 가장자리만 미세히 어둡게).
   T3: paperbook(누런 종이)와 분리 위해 살짝 복숭아·핑크 쪽 웜톤으로(노랑 회피). */
.scene-screen--text[data-text-theme="handwriting"] {
  background: radial-gradient(125% 100% at 50% 35%, #fdf0e6 0%, #f6e3d0 66%, #efd6c2 100%);
  background-color: #efd6c2;
}
/* retro — 검녹색 터미널 무대 + 카드 둘레 약한 녹색 glow + 비네팅 + 약한 스캔라인(카드보다 옅게). */
.scene-screen--text[data-text-theme="retro"] {
  background:
    radial-gradient(85% 65% at 50% 42%, rgba(74,240,154,.07) 0%, transparent 46%),
    radial-gradient(145% 120% at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(74,240,154,.022) 0 1px, transparent 1px 3px),
    #0c130f;
}
/* dark — 짙은 남색→검푸른 그라디언트 + 우상단 달빛 + 비네팅 + 하단 옅은 안개. */
.scene-screen--text[data-text-theme="dark"] {
  background:
    radial-gradient(48% 34% at 78% 8%, rgba(150,170,220,.14) 0%, transparent 55%),
    radial-gradient(145% 120% at 50% 45%, transparent 50%, rgba(0,0,0,.5) 100%),
    radial-gradient(120% 60% at 50% 118%, rgba(44,60,102,.42) 0%, transparent 70%),
    linear-gradient(180deg, #131a2b 0%, #0c1018 100%);
  background-color: #0c1018;   /* solid base — 전환 중 크림 letterbox 비침 방지 */
}

/* ════════════════════════════════════════════════════
   W5 다듬기 패널 — 폰트/색/테마 카드 스타일
   ════════════════════════════════════════════════════ */
.edit-font-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.edit-font-btn {
  padding: 10px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.edit-font-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.edit-font-btn.active {
  background: rgba(74,144,217,0.2);
  border-color: rgba(74,144,217,0.7);
  color: #c8dcf2;
}

/* W9: 폰트 select dropdown — 한컴/구글 docs 스타일.
   18종 폰트를 grid 버튼 대신 한 줄 select로 표시 → 인스펙터 세로 절약. */
.edit-font-select {
  /* v36: warm paper 인스펙터 톤 — 검은 글씨 + 흰 배경. 회색 톤 폐기. */
  width: 100%;
  padding: 9px 10px;
  background-color: rgba(255,255,255,0.65);
  border: 1px solid rgba(120,90,50,0.20);
  border-radius: 6px;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a1a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.edit-font-select:hover {
  background-color: rgba(255,255,255,0.85);
  border-color: rgba(120,90,50,0.35);
}
.edit-font-select:focus {
  outline: none;
  border-color: rgba(74,144,217,0.7);
  box-shadow: 0 0 0 2px rgba(74,144,217,0.25);
}
/* option 항목 자체 색 — 시스템 드롭다운 (light bg 위에 dark text 가 일반) */
.edit-font-select option {
  background: #fff;
  color: #1a1a1a;
  padding: 6px 8px;
  font-size: 14px;
}

/* W9 (v4): 5×2 grid (10색). 통일성. */
.edit-color-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  justify-items: center;
  margin-bottom: 6px;
}
.edit-color-btn {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(120,90,50,0.2);
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  color: #8a6c4a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 80ms, border-color 120ms;
}
.edit-color-btn:hover {
  transform: scale(1.08);
}
.edit-color-btn.active {
  border-color: var(--accent, #c66f4a);
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(198,111,74,0.3);
}
/* v36: grid 안 (살색 옆) 배치 — 다른 색 버튼과 동일 32×32 동그라미 + 점선(자유 색 표시). */
.edit-color-picker {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px dashed rgba(120,90,50,0.45);
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  transition: transform 80ms, border-color 120ms;
}
.edit-color-picker:hover { transform: scale(1.08); }
.edit-color-picker::-webkit-color-swatch { border-radius: 50%; border: none; }
.edit-color-picker::-moz-color-swatch { border-radius: 50%; border: none; }

.edit-slider {
  width: 100%;
  margin: 4px 0;
  accent-color: #4a90d9;
}

.edit-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.edit-theme-card {
  padding: 12px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.edit-theme-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.edit-theme-card.active {
  background: rgba(74,144,217,0.15);
  border-color: rgba(74,144,217,0.7);
  box-shadow: 0 0 0 1px rgba(74,144,217,0.4);
}
.edit-theme-card-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #e8edf5;
}
.edit-theme-card-desc {
  font-size: 11px;
  color: #8394ad;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════
   W8: contenteditable 본문/제목 — viewer에서 직접 수정
   ─────────────────────────────────────────────────────
   placeholder는 :empty + data-placeholder 패턴.
   다듬기 모드(data-edit-mode="true")에서만 활성.
   ════════════════════════════════════════════════════ */
.scene-screen--pb [contenteditable="true"] {
  outline: none;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
  cursor: text;
  min-height: 1.5em;
}
.scene-screen--pb [contenteditable="true"]:hover {
  background: rgba(80,50,20,0.04);
}
.scene-screen--pb [contenteditable="true"]:focus,
.scene-screen--pb [contenteditable="true"].is-focused {
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 2px rgba(198,111,74,0.32);
}
.scene-screen--pb [contenteditable="true"].is-empty::before {
  content: attr(data-placeholder);
  color: rgba(80,50,20,0.42);
  font-style: italic;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   W9: 그림책 양옆 마감 테마 (6종)
   ─────────────────────────────────────────────────────────────
   body[data-pb-theme]로 분기. .scene-screen--pb 배경 변경 ±
   .pb-page 외곽 살짝. 작품 단위 — viewer-meta.pbTheme.
   기본값(없거나 잘못된 값) = 'classic-book' (viewer-data.js fallback).
   ════════════════════════════════════════════════════════════ */

/* 1. classic-book — 클래식 책 두께·제본 (v36 강화: spine 그림자 + 페이지 모서리 굽힘) */
body[data-pb-theme="classic-book"] .scene-screen--pb {
  background-color: #e8dcc0;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 28px,
    rgba(120,90,50,0.10) 28px 29px,
    transparent 29px 30px,
    rgba(120,90,50,0.06) 30px 31px);
}
body[data-pb-theme="classic-book"] .scene-screen--pb .pb-page {
  border-left: 3px solid #4a3825;
  border-right: 3px solid #4a3825;
  border-radius: 2px;
  /* v36: 책 두께감 — 양 측면에 그림자 + 페이지 내부 살짝 음영 */
  box-shadow:
    /* 좌측 spine 그림자 (책 안쪽 굽힘) */
    inset 12px 0 24px -8px rgba(80,55,25,0.18),
    /* 우측 spine 그림자 (대칭) */
    inset -12px 0 24px -8px rgba(80,55,25,0.18),
    /* 책 두께 그림자 (외부) */
    0 2px 4px rgba(80,55,25,0.20),
    0 8px 16px rgba(80,55,25,0.16),
    0 16px 40px rgba(80,55,25,0.12);
}
/* v36: 페이지 가로 중앙 spine 라인 (가로분할형은 책 가운데 접힘 보임) */
body[data-pb-theme="classic-book"] .scene-screen--pb.pb--split .pb-page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(80,55,25,0.18) 30%,
    rgba(80,55,25,0.22) 50%,
    rgba(80,55,25,0.18) 70%,
    transparent);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}
/* .pb-page는 flex이므로 ::before가 position absolute일 때 부모 relative 필요 */
body[data-pb-theme="classic-book"] .scene-screen--pb .pb-page {
  position: relative;
}

/* 2. paper-desk — 책상 위 종이결 (v36 강화: 노이즈 + 종이 그림자 + 페이지 내부 종이결) */
body[data-pb-theme="paper-desk"] .scene-screen--pb {
  background-color: #d9c7a3;
  background-image:
    /* 책상 나무결 (cross-hatch) — 기존 */
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(120,90,50,0.07) 5px 6px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(80,55,25,0.05) 7px 8px),
    /* v36: 큰 나무결 (수평) — 책상다움 ↑ */
    repeating-linear-gradient(90deg,
      transparent 0 80px,
      rgba(80,55,25,0.04) 80px 82px,
      transparent 82px 120px,
      rgba(120,90,50,0.03) 120px 122px),
    /* v36: 미세 노이즈 (작은 점들) — 종이 위 먼지 느낌 */
    radial-gradient(circle at 12% 18%, rgba(80,55,25,0.05) 0, transparent 1.5px),
    radial-gradient(circle at 68% 42%, rgba(80,55,25,0.04) 0, transparent 1.5px),
    radial-gradient(circle at 33% 78%, rgba(80,55,25,0.05) 0, transparent 1.5px),
    radial-gradient(circle at 82% 88%, rgba(80,55,25,0.04) 0, transparent 1.5px);
}
body[data-pb-theme="paper-desk"] .scene-screen--pb .pb-page {
  /* v36 강화: 진짜 종이 그림자 — 책상에 놓인 듯 좌상→우하 비대칭 그림자 */
  box-shadow:
    /* 진한 가까운 그림자 (종이 두께) */
    1px 1px 2px rgba(60,40,15,0.12),
    /* 중간 그림자 (종이 떠 있는 듯) */
    2px 6px 16px rgba(60,40,15,0.18),
    /* 큰 부드러운 그림자 (책상에서 살짝 떠 있음) */
    4px 16px 48px rgba(60,40,15,0.20),
    /* 멀고 흐릿한 그림자 (분위기) */
    8px 32px 64px rgba(60,40,15,0.10);
  /* v36: 종이 내부에도 미세 종이결 — 표면 질감 ↑ */
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 3px,
      rgba(120,90,50,0.025) 3px 4px),
    var(--v03-card-bg, #fffaee);
}

/* 3. minimal-cream — 단순 종이톤 */
body[data-pb-theme="minimal-cream"] .scene-screen--pb {
  background-color: #f0e6d2;
}

/* 4. sketch-note — 손그림 노트 줄지 */
body[data-pb-theme="sketch-note"] .scene-screen--pb {
  background-color: #fff8e0;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 11px, rgba(80,120,180,0.18) 11px 12px);
  position: relative;
}
body[data-pb-theme="sketch-note"] .scene-screen--pb::before {
  content: '';
  position: absolute;
  left: 14%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(220,80,80,0.5);
  pointer-events: none;
  z-index: 0;
}
body[data-pb-theme="sketch-note"] .scene-screen--pb .pb-page {
  border: 1px dashed rgba(120,90,50,0.45);
  position: relative;
  z-index: 1;
}

/* 5. library-card — 도서관 황색 + 라벨·도장 디테일 (v36 강화: 바코드 + 도장) */
body[data-pb-theme="library-card"] .scene-screen--pb {
  background-color: #f0e0b8;
  /* v36: 바코드 (좌하단) + 도장 자국 (우상단) — SVG inline */
  background-image:
    /* 우상단 빨간 원형 도장 (✓ READ) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='30' fill='none' stroke='%23b8482b' stroke-width='2.5' opacity='0.55'/><text x='40' y='38' text-anchor='middle' font-family='Cormorant Garamond,serif' font-size='11' font-weight='bold' fill='%23b8482b' opacity='0.6' letter-spacing='1.5'>READ</text><text x='40' y='52' text-anchor='middle' font-family='Cormorant Garamond,serif' font-size='8' fill='%23b8482b' opacity='0.55'>2026</text></svg>"),
    /* 좌하단 바코드 — 가는 세로 줄들 */
    repeating-linear-gradient(90deg,
      transparent 0 3px,
      rgba(60,40,15,0.55) 3px 4px,
      transparent 4px 5px,
      rgba(60,40,15,0.55) 5px 7px,
      transparent 7px 9px,
      rgba(60,40,15,0.55) 9px 10px);
  background-repeat: no-repeat;
  background-position:
    right 4% top 22px,         /* 도장 */
    left 4% bottom 18px;       /* 바코드 */
  background-size:
    80px 80px,                 /* 도장 크기 */
    160px 28px;                /* 바코드 크기 */
  position: relative;
}
/* DUE 라벨 + 날짜 라인 (좌상단) */
body[data-pb-theme="library-card"] .scene-screen--pb::before {
  content: 'DUE';
  position: absolute;
  left: 4%;
  top: 18px;
  width: 96px;
  height: 26px;
  border: 1px solid rgba(120,80,40,0.45);
  background: rgba(255,250,235,0.55);
  font-size: 12px;
  color: #4a3010;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
/* 우하단 점선 카드 (대출 일자 영역 느낌) */
body[data-pb-theme="library-card"] .scene-screen--pb::after {
  content: '';
  position: absolute;
  right: 5%;
  bottom: 56px;
  width: 72px;
  height: 32px;
  border: 1.5px dashed rgba(180,80,40,0.55);
  transform: rotate(-8deg);
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}
body[data-pb-theme="library-card"] .scene-screen--pb .pb-page {
  border-color: rgba(120,80,40,0.3);
  position: relative;
  z-index: 1;
}

/* 6. night-tale — 밤 이야기 어두운 + 별빛 (v36 강화: 외곽 분위기 깊게).
   사용자 결정: 페이지 내부는 종이 톤 유지 (책 페이지 일관성). 외곽 밤 분위기만 강조. */
body[data-pb-theme="night-tale"] .scene-screen--pb {
  /* 배경 그라데이션 — 위 깊은 보라, 아래 살짝 푸른 톤 (밤하늘 깊이감) */
  background:
    radial-gradient(ellipse at 80% 15%, rgba(80,70,130,0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 85%, rgba(40,55,95,0.40) 0%, transparent 60%),
    linear-gradient(180deg, #14102a 0%, #1c1838 50%, #221d3e 100%);
  background-attachment: fixed;
  position: relative;
}
/* 별빛 layer (작은~큰 별 다양) — ::before로 얹어 본 배경과 분리 */
body[data-pb-theme="night-tale"] .scene-screen--pb::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* 큰 별 (밝게 반짝) */
    radial-gradient(circle at 15% 12%, rgba(255,255,220,0.9) 0, rgba(255,255,220,0.3) 1.5px, transparent 3px),
    radial-gradient(circle at 88% 75%, rgba(255,250,210,0.85) 0, rgba(255,250,210,0.3) 1.5px, transparent 3px),
    radial-gradient(circle at 45% 88%, rgba(255,255,220,0.8) 0, rgba(255,255,220,0.25) 1.5px, transparent 3px),
    /* 중간 별 */
    radial-gradient(circle at 8% 45%, rgba(255,250,200,0.7) 0, transparent 2px),
    radial-gradient(circle at 92% 35%, rgba(255,250,200,0.65) 0, transparent 2px),
    radial-gradient(circle at 70% 18%, rgba(255,250,200,0.75) 0, transparent 2.2px),
    radial-gradient(circle at 30% 28%, rgba(255,250,200,0.6) 0, transparent 2px),
    radial-gradient(circle at 95% 58%, rgba(255,250,200,0.65) 0, transparent 2.2px),
    radial-gradient(circle at 5% 70%, rgba(255,250,200,0.55) 0, transparent 2px),
    radial-gradient(circle at 55% 50%, rgba(255,250,200,0.50) 0, transparent 2px),
    /* 작은 별 (점) */
    radial-gradient(circle at 25% 55%, rgba(255,250,200,0.4) 0, transparent 1.2px),
    radial-gradient(circle at 78% 22%, rgba(255,250,200,0.45) 0, transparent 1.2px),
    radial-gradient(circle at 62% 78%, rgba(255,250,200,0.4) 0, transparent 1.2px),
    radial-gradient(circle at 40% 38%, rgba(255,250,200,0.35) 0, transparent 1.2px),
    radial-gradient(circle at 85% 92%, rgba(255,250,200,0.42) 0, transparent 1.2px),
    radial-gradient(circle at 18% 92%, rgba(255,250,200,0.4) 0, transparent 1.2px),
    radial-gradient(circle at 50% 8%, rgba(255,250,200,0.5) 0, transparent 1.4px),
    radial-gradient(circle at 32% 68%, rgba(255,250,200,0.38) 0, transparent 1.2px);
}
/* 달 — 우상단 작은 초승달 (SVG inline) */
body[data-pb-theme="night-tale"] .scene-screen--pb::after {
  content: '';
  position: absolute;
  top: 4%;
  right: 5%;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><circle cx='30' cy='30' r='22' fill='rgba(255,248,210,0.85)'/><circle cx='38' cy='26' r='20' fill='rgba(20,16,42,1)'/><circle cx='30' cy='30' r='22' fill='none' stroke='rgba(255,255,220,0.4)' stroke-width='0.5'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 10px rgba(255,250,200,0.35));
}
body[data-pb-theme="night-tale"] .scene-screen--pb .pb-page {
  border-color: rgba(220,200,140,0.35);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.5),
    0 16px 40px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D3 (2026-06-19): 그림책 신규 5스킨 1차
   ─────────────────────────────────────────────────────
   · 신규키(cozy/paper/gallery/forest/night-story)는 아직 어떤 작품에도 저장되지 않음
     (JS는 기존 6키만 body[data-pb-theme]에 기록) → 이 CSS는 기존 작품에 회귀 0.
     legacy(classic-book 등) 매핑/새 UI 노출은 후속 단계.
   · "한 장의 동화책 페이지": picturebook-page=종이 표면 / scene-media-frame=그림 매트 /
     scene-narrative-panel=무배경 캡션 / choice=종이 라벨(번호·화살표 숨김).
   · split/imageCenter 비율·grid·.pb-stage 좌표계는 무변경(색/표면/배경 texture만).
   · imageCenter 본문 오버레이(.pb-stage__body-overlay)는 inline 위치/배경 유지 → 캡션
     무배경 처리에서 제외(:not). SVG 장식 도형(잎/별)은 그림 비침범 슬롯이 필요해 D4로 미룸.
   ════════════════════════════════════════════════════ */

/* ── 5스킨 공통: .pb-frame 기본 회색 배경(--v03-bg-soft) 투명화 → page shell(picturebook-page)
   종이가 본문·버튼 영역 뒤까지 그대로 이어지게(한 장의 페이지 통합감). 비율/grid는 무변경. ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb .pb-frame,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb .pb-frame,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb .pb-frame,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb .pb-frame,
body[data-pb-theme="night-story"]        .scene-screen--pb .pb-frame {
  background: transparent;
}

/* ── 5스킨 공통: 책 페이지 통합(캡션 무배경 + 번호/화살표 숨김 + 종이 라벨 버튼) ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb .scene-narrative-panel:not(.pb-stage__body-overlay),
body[data-pb-theme="paper-storybook"]    .scene-screen--pb .scene-narrative-panel:not(.pb-stage__body-overlay),
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb .scene-narrative-panel:not(.pb-stage__body-overlay),
body[data-pb-theme="forest-storybook"]   .scene-screen--pb .scene-narrative-panel:not(.pb-stage__body-overlay),
body[data-pb-theme="night-story"]        .scene-screen--pb .scene-narrative-panel:not(.pb-stage__body-overlay) {
  background: transparent;
  border: none;
  box-shadow: none;
}
body[data-pb-theme="cozy-storybook"]     .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="cozy-storybook"]     .choice-v03--picturebook .pb-choice-arrow,
body[data-pb-theme="paper-storybook"]    .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="paper-storybook"]    .choice-v03--picturebook .pb-choice-arrow,
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook .pb-choice-arrow,
body[data-pb-theme="forest-storybook"]   .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="forest-storybook"]   .choice-v03--picturebook .pb-choice-arrow,
body[data-pb-theme="night-story"]        .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="night-story"]        .choice-v03--picturebook .pb-choice-arrow {
  display: none;  /* 라벨/클릭 영역은 유지, 번호 동그라미·화살표만 숨김 */
}
/* 번호/화살표가 사라진 자리 — 라벨이 flex:1로 폭을 차지하므로 라벨 내부 텍스트를
   가운데로(웹 버튼 좌측정렬 → 책 속 선택 라벨 느낌). 클릭 영역/숨김 상태는 그대로. */
body[data-pb-theme="cozy-storybook"]     .choice-v03--picturebook .pb-choice-label,
body[data-pb-theme="paper-storybook"]    .choice-v03--picturebook .pb-choice-label,
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook .pb-choice-label,
body[data-pb-theme="forest-storybook"]   .choice-v03--picturebook .pb-choice-label,
body[data-pb-theme="night-story"]        .choice-v03--picturebook .pb-choice-label {
  text-align: center;
}
body[data-pb-theme="cozy-storybook"]     .choice-v03--picturebook,
body[data-pb-theme="paper-storybook"]    .choice-v03--picturebook,
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook,
body[data-pb-theme="forest-storybook"]   .choice-v03--picturebook,
body[data-pb-theme="night-story"]        .choice-v03--picturebook {
  box-shadow: none;
  border-width: 1px;
  justify-content: center !important;
  text-align: center !important;
}
body[data-pb-theme="cozy-storybook"]     .choice-v03--picturebook:hover:not(:disabled),
body[data-pb-theme="paper-storybook"]    .choice-v03--picturebook:hover:not(:disabled),
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook:hover:not(:disabled),
body[data-pb-theme="forest-storybook"]   .choice-v03--picturebook:hover:not(:disabled),
body[data-pb-theme="night-story"]        .choice-v03--picturebook:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

/* ── 1. 포근한 동화책 cozy-storybook ── */
/* COVER-THEME-1(2026-07-09): 표지가 그림책 스킨 테마(cozy/paper/gallery/forest)를 따라가게 — 표지가 흰색이라
   밋밋하던 문제(다듬기·감상 표지 둘 다 예뻐짐이 목적). 표지 페이지(.pb-page)=투명 → 테마 배경(.scene-screen--pb)이
   비치고, 표지 카드(.cover-book)=테마 종이색. body[data-pb-theme=X] .cover-as-pb(0,3,0) > data-cover-theme 규칙(0,2,0)
   이라 !important 없이 우선. 표지 구조/제목/데이터·기존 밤테마 작품 무변경(추가 CSS만). */
body[data-pb-theme="cozy-storybook"]     .cover-as-pb .pb-page,
body[data-pb-theme="paper-storybook"]    .cover-as-pb .pb-page,
body[data-pb-theme="gallery-picturebook"] .cover-as-pb .pb-page,
body[data-pb-theme="forest-storybook"]   .cover-as-pb .pb-page { background: transparent; }
/* COVER-THEME-2(2026-07-12·Level 2): 표지 카드에 장면 무대(.picturebook-page)의 질감을 그대로 미러링 —
   표지만 민무늬라 장면 넘기면 재질이 갑자기 생기던 단절 해소. 값은 각 테마 .picturebook-page에서 복사(단일 미러). */
body[data-pb-theme="cozy-storybook"]     .cover-as-pb .cover-book {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.018) 0 1px, transparent 1px 7px),
    linear-gradient(#fdf7ea, #f6ead1);
  border: 1px solid #ecddbf;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(120,90,40,.16);
}
body[data-pb-theme="paper-storybook"]    .cover-as-pb .cover-book {
  background:
    repeating-linear-gradient(45deg, rgba(120,90,50,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(80,55,25,.035) 0 1px, transparent 1px 8px),
    radial-gradient(150% 130% at 50% 35%, #f6eedd 38%, #e6d9bf 100%);
  border: 1px solid #cabd9d;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(70,50,20,.18), inset 0 0 26px rgba(120,90,40,.14);
}
body[data-pb-theme="gallery-picturebook"] .cover-as-pb .cover-book {
  background: #ffffff;
  border: 1px solid #e6e6e2;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
body[data-pb-theme="forest-storybook"]   .cover-as-pb .cover-book {
  background:
    repeating-linear-gradient(60deg, rgba(94,125,74,.045) 0 2px, transparent 2px 16px),
    linear-gradient(#f0f6e9, #e6efdc);
  border: 1px solid #c9d8ba;
  border-radius: 14px;
  box-shadow: 0 3px 11px rgba(50,70,40,.16);
}

/* TEXT-COVER-THEME(2026-07-09): 텍스트 작품 표지도 자기 텍스트 테마(classic/paperbook/note/handwriting/retro/dark)
   톤을 따라가게 — 그림책 표지와 대칭. body[data-text-theme]는 텍스트 작품에서만 붙음(pbTheme와 별개 속성=안 섞임).
   본문(.scene-screen--text[data-text-theme])은 이미 테마 적용됨 — 여기선 표지(.cover-as-pb)만 톤 이식. */
body[data-text-theme] .cover-as-pb .pb-page { background: transparent; }
/* COVER-TEXT-2(2026-07-12·Level 2): 텍스트 표지 카드에도 장면 .text-card의 질감·테두리·그림자 미러링
   (그림책 COVER-THEME-2와 대칭 — 종이결·줄노트·픽셀 글로우가 표지부터 이어지게). 외곽 배경(.cover-as-pb)은 유지. */
body[data-text-theme="classic"]     .cover-as-pb { background: #f3f3f1; }
body[data-text-theme="classic"]     .cover-as-pb .cover-book { background: #ffffff; border: 1px solid #e0e0e0; }
body[data-text-theme="paperbook"]   .cover-as-pb { background: #e9ddc3; }
body[data-text-theme="paperbook"]   .cover-as-pb .cover-book {
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(120, 90, 50, 0.03) 2px 3px),
    #f4ead5;
  border: 1px solid #c8b896;
  box-shadow: 0 4px 12px rgba(120, 90, 50, 0.15);
}
body[data-text-theme="note"]        .cover-as-pb { background: #eef5fb; }
body[data-text-theme="note"]        .cover-as-pb .cover-book {
  background:
    linear-gradient(#dceaf5 1px, transparent 1px) 0 0/100% 28px,
    #fafdff;
  border: 1px solid #c8d8e8;
}
body[data-text-theme="handwriting"] .cover-as-pb { background: #f6edda; }
body[data-text-theme="handwriting"] .cover-as-pb .cover-book {
  background: #fffaf0; border: 1px solid #e8d4a8; border-radius: 4px;
}
body[data-text-theme="retro"]       .cover-as-pb { background: #0e0e0e; }
body[data-text-theme="retro"]       .cover-as-pb .cover-book {
  background: #1a1a1a; border: 2px solid #4af09a; border-radius: 0;
  box-shadow: 0 0 20px rgba(74, 240, 154, 0.15);
}
body[data-text-theme="dark"]        .cover-as-pb { background: #0e1320; }
body[data-text-theme="dark"]        .cover-as-pb .cover-book {
  background: #161d2f; border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* 어두운 테마(retro/dark) 표지 글자 밝게 — 대비 확보 */
body[data-text-theme="retro"] .cover-as-pb .cover-title-pb, body[data-text-theme="dark"] .cover-as-pb .cover-title-pb,
body[data-text-theme="retro"] .cover-as-pb .cover-subtitle-pb, body[data-text-theme="dark"] .cover-as-pb .cover-subtitle-pb,
body[data-text-theme="retro"] .cover-as-pb .cover-kicker, body[data-text-theme="dark"] .cover-as-pb .cover-kicker { color: #e8edf5 !important; }
body[data-text-theme="retro"] .cover-as-pb .cover-title-pb { color: #4af09a !important; }

/* COVER-MOVIE-2(2026-07-12): 무비형 표지 — 무비 룩(W8 Warm Paper) 토큰 미러링.
   무비는 테마 1종 고정이라 값도 고정. 외곽=종이톤(--v03-bg-soft), 카드=결정 패널과 같은
   크림 카드(--v03-card-bg/border/shadow 값 복사). 발명 장식 없음(스크린 검정은 미디어 전용 정체성). */
body[data-movie-theme="warmpaper"] .cover-as-pb .pb-page { background: transparent; }
body[data-movie-theme="warmpaper"] .cover-as-pb { background: #f4ecd8; }
body[data-movie-theme="warmpaper"] .cover-as-pb .cover-book {
  background: #fffaee;
  border: 1px solid rgba(80, 50, 20, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(120, 90, 50, 0.06), 0 8px 24px rgba(120, 90, 50, 0.08);
}

body[data-pb-theme="cozy-storybook"] .scene-screen--pb { background: #ecdfc6; }
body[data-pb-theme="cozy-storybook"] .picturebook-page {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.018) 0 1px, transparent 1px 7px),
    linear-gradient(#fdf7ea, #f6ead1);
  border: 1px solid #ecddbf;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(120,90,40,.16);
}
body[data-pb-theme="cozy-storybook"] .scene-media-frame {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
body[data-pb-theme="cozy-storybook"] .pb-text__body,
body[data-pb-theme="cozy-storybook"] .pb-text__title { color: #5a4630; }
body[data-pb-theme="cozy-storybook"] .choice-v03--picturebook {
  background: #f6dca8; border-color: #e6c688; border-radius: 999px; color: #5a3c1e;
}
body[data-pb-theme="cozy-storybook"] .choice-v03--picturebook:hover:not(:disabled) { background: #f0d199; }

/* ── 2. 종이 동화책 paper-storybook ── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb { background: #ddd2bb; }
body[data-pb-theme="paper-storybook"] .picturebook-page {
  background:
    repeating-linear-gradient(45deg, rgba(120,90,50,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(80,55,25,.035) 0 1px, transparent 1px 8px),
    radial-gradient(150% 130% at 50% 35%, #f6eedd 38%, #e6d9bf 100%);
  border: 1px solid #cabd9d;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(70,50,20,.18), inset 0 0 26px rgba(120,90,40,.14);
}
body[data-pb-theme="paper-storybook"] .scene-media-frame {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 8px rgba(0,0,0,.07);
}
body[data-pb-theme="paper-storybook"] .pb-text__body,
body[data-pb-theme="paper-storybook"] .pb-text__title { color: #43321c; }
body[data-pb-theme="paper-storybook"] .choice-v03--picturebook {
  background: #ece0c4; border-color: #c2ab82; border-radius: 4px; color: #43321c;
}
body[data-pb-theme="paper-storybook"] .choice-v03--picturebook:hover:not(:disabled) { background: #e3d3b1; }

/* ── 3. 전시 그림책 gallery-picturebook ── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb { background: #e8e8e5; }
body[data-pb-theme="gallery-picturebook"] .picturebook-page {
  background: #ffffff;
  border: 1px solid #e6e6e2;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
body[data-pb-theme="gallery-picturebook"] .scene-media-frame {
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px #e4e4e0;
}
body[data-pb-theme="gallery-picturebook"] .pb-text__body,
body[data-pb-theme="gallery-picturebook"] .pb-text__title { color: #2b2b2b; }
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook {
  background: transparent; border-color: #cfcfca; border-radius: 2px; color: #3a3a38;
}
body[data-pb-theme="gallery-picturebook"] .choice-v03--picturebook:hover:not(:disabled) { background: rgba(0,0,0,.04); }

/* ── 4. 숲속 그림책 forest-storybook ── */
body[data-pb-theme="forest-storybook"] .scene-screen--pb {
  background:
    repeating-linear-gradient(60deg, rgba(94,125,74,.06) 0 2px, transparent 2px 16px),
    #cedcc1;
}
body[data-pb-theme="forest-storybook"] .picturebook-page {
  background:
    repeating-linear-gradient(60deg, rgba(94,125,74,.045) 0 2px, transparent 2px 16px),
    linear-gradient(#f0f6e9, #e6efdc);
  border: 1px solid #c9d8ba;
  border-radius: 14px;
  box-shadow: 0 3px 11px rgba(50,70,40,.16);
}
body[data-pb-theme="forest-storybook"] .scene-media-frame {
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
body[data-pb-theme="forest-storybook"] .pb-text__body,
body[data-pb-theme="forest-storybook"] .pb-text__title { color: #3a4a2e; }
body[data-pb-theme="forest-storybook"] .choice-v03--picturebook {
  background: #dfead0; border-color: #aec394; border-radius: 999px; color: #3a4a2e;
}
body[data-pb-theme="forest-storybook"] .choice-v03--picturebook:hover:not(:disabled) { background: #d3e0c0; }

/* ── 5. 밤 이야기 night-story ── (별/그라데는 무대=레터박스에, 페이지는 밤색 종이) */
body[data-pb-theme="night-story"] .scene-screen--pb {
  background:
    radial-gradient(1.4px 1.4px at 16% 14%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 9%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 62% 11%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 82% 8%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 90% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(130% 120% at 72% 0%, #27315c 0%, #161d40 58%, #0d1228 100%);
}
body[data-pb-theme="night-story"] .picturebook-page {
  background: linear-gradient(#1a234a, #141b3c);
  border: 1px solid #313c70;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
body[data-pb-theme="night-story"] .scene-media-frame {
  border-radius: 11px;
  box-shadow: 0 0 12px rgba(90,110,200,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
body[data-pb-theme="night-story"] .pb-text__body,
body[data-pb-theme="night-story"] .pb-text__title { color: #eef1ff; }
body[data-pb-theme="night-story"] .choice-v03--picturebook {
  background: rgba(58,72,130,.55); border-color: #46538a; border-radius: 999px; color: #eef1ff;
}
body[data-pb-theme="night-story"] .choice-v03--picturebook:hover:not(:disabled) { background: rgba(74,90,160,.7); }
/* 모바일 세로: 별/그림자 감산(성능) */
@media (max-width: 600px) {
  body[data-pb-theme="night-story"] .scene-screen--pb {
    background:
      radial-gradient(1.4px 1.4px at 20% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 78% 10%, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(130% 120% at 72% 0%, #27315c 0%, #161d40 58%, #0d1228 100%);
  }
  body[data-pb-theme="night-story"] .scene-media-frame {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  }
}

/* ════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D4 (2026-06-19): 그림책 장식 슬롯 / 엔딩 마감 / 모바일
   ─────────────────────────────────────────────────────
   · 장식 슬롯(.scene-ornaments)은 viewer-render.js가 일반 split/imageCenter의 .pb-frame
     첫 자식에 빈 div로 추가(.pb-stage 밖 → 드래그 좌표 무관). position:absolute라 grid flow
     제외(레이아웃 비율 무변경). 레거시 작품도 빈 슬롯이 생기지만 장식 CSS가 신규 5키 한정이라
     보이지 않음(회귀 0).
   · 장식은 page 모서리·가장자리 중심, pointer-events:none, 그림 본체 비침범(옅게).
   · 엔딩: data-true-end(viewer-render.js가 scene.isTrueEnd로 기록) 기반 진엔딩 강조.
   ════════════════════════════════════════════════════ */
.scene-screen--pb .scene-ornaments {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
/* ornaments 기준 — 신규 5키만 .pb-frame을 positioning context로(grid에 무해) */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb .pb-frame,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb .pb-frame,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb .pb-frame,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb .pb-frame,
body[data-pb-theme="night-story"]        .scene-screen--pb .pb-frame {
  position: relative;
}

/* cozy — 하단 모서리 잎/꽃(본문 영역, 그림 무침범) */
body[data-pb-theme="cozy-storybook"] .scene-ornaments::before {
  content: ""; position: absolute; left: 7px; bottom: 7px; width: 26px; height: 26px; opacity: .5;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><path d='M4 30 Q12 8 30 4 Q24 26 4 30Z' fill='%237d9b6a'/></svg>") no-repeat center/contain;
}
body[data-pb-theme="cozy-storybook"] .scene-ornaments::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px; opacity: .5;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3.2' fill='%23e7a6b0'/><circle cx='12' cy='5' r='3' fill='%23f3c8cf'/><circle cx='19' cy='12' r='3' fill='%23f3c8cf'/><circle cx='12' cy='19' r='3' fill='%23f3c8cf'/><circle cx='5' cy='12' r='3' fill='%23f3c8cf'/></svg>") no-repeat center/contain;
}

/* paper(D9-4C) — 우상단 접힘 음영 + 작은 클립. 둘 다 imageCenter 한정(split 비노출)·약화(스프링이 정체성).
   가장자리 전용·그림 비침범·pointer-events none(.scene-ornaments). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  content: ""; position: absolute; right: 0; top: 0; width: 22px; height: 22px; opacity: .32;
  background: linear-gradient(225deg, rgba(70,50,20,.16) 0%, transparent 55%);
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before {
  content: ""; position: absolute; top: -3px; right: 26px; width: 13px; height: 28px; opacity: .3;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'><path d='M7 41 V13 a5 5 0 0 1 10 0 V35 a8 8 0 0 1-16 0 V15' fill='none' stroke='%23a59c8a' stroke-width='2.4' stroke-linecap='round'/></svg>") no-repeat center/contain;
  filter: drop-shadow(0 1px 1px rgba(70,55,25,.18));
}

/* gallery — 상단 가는 선(장식 최소, 여백이 장식) */
body[data-pb-theme="gallery-picturebook"] .scene-ornaments::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 1px; background: #c7c7c2; opacity: .6;
}

/* forest(D9-6B) — 모서리 손그림 잎 가지(좌상단 큰 가지 + 우상단 작은 가지). imageCenter 한정(split 비노출).
   작품 무대 바깥 모서리·그림 비침범·pointer-events none(.scene-ornaments)·data-uri SVG(외부 0). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before {
  content: ""; position: absolute; left: -3px; top: -3px; width: 96px; height: 78px; opacity: .9;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 78'><path d='M2 4 Q36 11 55 32 Q67 46 73 68' fill='none' stroke='%236d8a4f' stroke-width='2.4' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='21' cy='10' rx='7' ry='3.4' transform='rotate(22 21 10)'/><ellipse cx='40' cy='19' rx='7' ry='3.4' transform='rotate(38 40 19)'/><ellipse cx='55' cy='35' rx='6.5' ry='3.2' transform='rotate(56 55 35)'/><ellipse cx='65' cy='52' rx='6' ry='3' transform='rotate(72 65 52)'/></g><g fill='%238fb56c'><ellipse cx='30' cy='7' rx='5.5' ry='2.8' transform='rotate(-8 30 7)'/><ellipse cx='48' cy='25' rx='5.5' ry='2.8' transform='rotate(12 48 25)'/><ellipse cx='61' cy='44' rx='5' ry='2.6' transform='rotate(28 61 44)'/></g></svg>") no-repeat left top/contain;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 72px; height: 60px; opacity: .82;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 60'><path d='M70 4 Q41 9 27 27 Q17 39 13 56' fill='none' stroke='%236d8a4f' stroke-width='2.2' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='53' cy='10' rx='6' ry='3' transform='rotate(-22 53 10)'/><ellipse cx='39' cy='21' rx='6' ry='3' transform='rotate(-42 39 21)'/><ellipse cx='25' cy='38' rx='5.5' ry='2.8' transform='rotate(-62 25 38)'/></g><g fill='%238fb56c'><ellipse cx='45' cy='14' rx='4.6' ry='2.4' transform='rotate(8 45 14)'/><ellipse cx='31' cy='30' rx='4.6' ry='2.4' transform='rotate(-26 31 30)'/></g></svg>") no-repeat right top/contain;
}

/* night(D9-7B) — 우상단 작은 손그림 초승달 + 가장자리 별 반짝. imageCenter 한정(split 비노출).
   무대 바깥 상단·그림 비침범·pointer-events none·data-uri SVG(외부 0). */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before {
  content: ""; position: absolute; right: 12px; top: 9px; width: 26px; height: 26px; opacity: .95;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M27 4 a17 17 0 1 0 0 32 a13 14 0 1 1 0-32 Z' fill='%23f6dd8f'/></svg>") no-repeat center/contain;
  filter: drop-shadow(0 0 6px rgba(246,221,143,.5));
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  content: ""; position: absolute; left: 7%; top: 6px; width: 122px; height: 34px; opacity: .9;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 34'><g fill='%23fbe7b0'><path d='M16 2 L19 13 L30 16 L19 19 L16 30 L13 19 L2 16 L13 13 Z'/></g><g fill='%23dfe6ff'><path d='M70 7 l1.8 6 l6 1.8 l-6 1.8 l-1.8 6 l-1.8-6 l-6-1.8 l6-1.8 Z'/><path d='M104 3 l1.5 5 l5 1.5 l-5 1.5 l-1.5 5 l-1.5-5 l-5-1.5 l5-1.5 Z'/></g></svg>") no-repeat left top/contain;
}

/* ── 엔딩 마감(신규 5스킨): 페이지 마감 느낌 + 진엔딩 강조 ── */
body[data-pb-theme="cozy-storybook"]     .scene-ending-mark,
body[data-pb-theme="paper-storybook"]    .scene-ending-mark,
body[data-pb-theme="gallery-picturebook"] .scene-ending-mark,
body[data-pb-theme="forest-storybook"]   .scene-ending-mark,
body[data-pb-theme="night-story"]        .scene-ending-mark {
  opacity: .85;
}
body[data-pb-theme="cozy-storybook"]     .scene-ending-mark[data-true-end="1"] .ending-end-stamp,
body[data-pb-theme="paper-storybook"]    .scene-ending-mark[data-true-end="1"] .ending-end-stamp,
body[data-pb-theme="gallery-picturebook"] .scene-ending-mark[data-true-end="1"] .ending-end-stamp,
body[data-pb-theme="forest-storybook"]   .scene-ending-mark[data-true-end="1"] .ending-end-stamp {
  font-weight: 700; letter-spacing: .04em;
}
body[data-pb-theme="night-story"] .scene-ending-mark[data-true-end="1"] .ending-end-stamp {
  font-weight: 700; text-shadow: 0 0 8px rgba(205,214,255,.5);
}

/* ── 모바일 세로: 신규 5스킨 장식 감산(성능/혼잡) ── */
@media (max-width: 600px) {
  body[data-pb-theme="cozy-storybook"] .scene-ornaments::before,
  body[data-pb-theme="cozy-storybook"] .scene-ornaments::after { opacity: .3; }
  /* paper: 클립 더 약하게(스프링 pseudo는 D9-4C 모바일 규칙에서 감산) */
  body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before { opacity: .22; }
  /* forest: 가지 한쪽만(좌상단 유지·우상단 숨김) */
  body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after { display: none; }
  body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before { width: 66px; height: 54px; opacity: .72; }
  /* night: 달 1개만 유지·별무리 숨김·구름 숨김·달 글로우 제거 */
  body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before { filter: none; }
  body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after { display: none; }
  body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage::after { display: none; }
}

/* ────────────────────────────────────────────────────────
   W9 (v3): 양옆 마감 테마 collapsible 토글 헤더.
   접힌 상태: [mini preview] 🎨 양옆 마감 테마 — 책상  ▼
   펼친 상태: 🎨 양옆 마감 테마  ▲  + 아래 6 카드 grid
   ──────────────────────────────────────────────────────── */
.edit-pb-theme-toggle {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border: 0.5px solid rgba(120,90,50,0.30);
  border-radius: 8px;
  color: #2b1f10;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: background 120ms, border-color 120ms;
}
.edit-pb-theme-toggle:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(120,90,50,0.45);
}
.edit-pb-theme-toggle.is-expanded {
  background: rgba(198,111,74,0.06);
  border-color: rgba(198,111,74,0.35);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.edit-pb-theme-toggle-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.edit-pb-theme-toggle-text {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-pb-theme-toggle-current {
  font-weight: 400;
  color: #8a6c4a;
}
.edit-pb-theme-toggle-chev {
  font-size: 11px;
  color: #8a6c4a;
  margin-left: 8px;
}
.edit-pb-theme-toggle.is-expanded .edit-pb-theme-toggle-chev { color: #c66f4a; }
/* 접힌 상태 mini preview — 헤더 좌측에 작은 색·패턴 박스 */
.edit-pb-theme-toggle-mini {
  width: 26px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.edit-pb-theme-toggle-mini::after {
  /* 가운데 페이지 stripe */
  content: '';
  position: absolute;
  left: 50%;
  top: 1px;
  bottom: 1px;
  transform: translateX(-50%);
  width: 30%;
  background: #fffefa;
  border-radius: 1px;
}
/* mini 배경은 각 테마 색으로 (edit-pb-theme-card--{id} 클래스 재사용) */
.edit-pb-theme-card--classic-book.edit-pb-theme-toggle-mini { background: #e8dcc0; }
.edit-pb-theme-card--paper-desk.edit-pb-theme-toggle-mini   { background: #d9c7a3; }
.edit-pb-theme-card--minimal-cream.edit-pb-theme-toggle-mini{ background: #f0e6d2; }
.edit-pb-theme-card--sketch-note.edit-pb-theme-toggle-mini  { background: #fff8e0; }
.edit-pb-theme-card--library-card.edit-pb-theme-toggle-mini { background: #f0e0b8; }
.edit-pb-theme-card--night-tale.edit-pb-theme-toggle-mini   { background: #1c1830; }

/* 펼친 상태 body — 헤더 바로 아래 같은 배경 영역으로 연결 */
.edit-pb-theme-body {
  padding: 10px 12px 12px;
  background: rgba(198,111,74,0.04);
  border: 0.5px solid rgba(198,111,74,0.35);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  margin-bottom: 8px;
}

/* ────────────────────────────────────────────────────────
   W9: 다듬기 인스펙터 — 그림책 테마 카드 selector UI
   텍스트 모드의 .edit-theme-card 패턴 따름.
   ──────────────────────────────────────────────────────── */
.edit-pb-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.edit-pb-theme-card {
  padding: 10px 8px;
  /* W9 (v3): 인스펙터 light 톤(Warm Paper #fffaee)에 맞게 — dark 색은 안 보였음 */
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(120,90,50,0.18);
  border-radius: 8px;
  color: var(--text, #2b1f10);
  text-align: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
  min-height: 60px;
}
.edit-pb-theme-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.9);
  border-color: rgba(120,90,50,0.35);
}
.edit-pb-theme-card.active {
  background: rgba(198,111,74,0.10);
  border-color: var(--accent, #c66f4a);
  box-shadow: 0 0 0 1px rgba(198,111,74,0.45);
}
.edit-pb-theme-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
  color: #3d2914;
}
.edit-pb-theme-desc {
  font-size: 10px;
  color: #8a6c4a;
  line-height: 1.3;
}
.edit-pb-theme-card.active .edit-pb-theme-name {
  color: var(--accent, #c66f4a);
}

/* W9 후속: 테마 카드 안 mini preview — 각 테마의 핵심 시각 요소 미니어처 */
.edit-pb-theme-preview {
  position: relative;
  height: 34px;
  border-radius: 4px;
  margin-bottom: 6px;
  overflow: hidden;
  background: #f0e6d2;
}
.edit-pb-theme-preview-page {
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  transform: translateX(-50%);
  width: 30%;
  background: #fffefa;
  border-radius: 2px;
  box-sizing: border-box;
}

/* 1. classic-book mini */
.edit-pb-theme-card--classic-book .edit-pb-theme-preview {
  background-color: #e8dcc0;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 5px, rgba(120,90,50,0.18) 5px 6px);
}
.edit-pb-theme-card--classic-book .edit-pb-theme-preview-page {
  border-left: 1.5px solid #4a3825;
  border-right: 1.5px solid #4a3825;
  border-radius: 0;
}

/* 2. paper-desk mini */
.edit-pb-theme-card--paper-desk .edit-pb-theme-preview {
  background-color: #d9c7a3;
  background-image: repeating-linear-gradient(45deg,
    transparent 0 2px, rgba(120,90,50,0.16) 2px 3px);
}

/* 3. minimal-cream mini */
.edit-pb-theme-card--minimal-cream .edit-pb-theme-preview {
  background-color: #f0e6d2;
}

/* 4. sketch-note mini */
.edit-pb-theme-card--sketch-note .edit-pb-theme-preview {
  background-color: #fff8e0;
  background-image: repeating-linear-gradient(180deg,
    transparent 0 3px, rgba(80,120,180,0.32) 3px 4px);
}
.edit-pb-theme-card--sketch-note .edit-pb-theme-preview::before {
  content: '';
  position: absolute;
  left: 15%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(220,80,80,0.6);
  z-index: 0;
}
.edit-pb-theme-card--sketch-note .edit-pb-theme-preview-page {
  border: 1px dashed rgba(120,90,50,0.55);
  z-index: 1;
}

/* 5. library-card mini */
.edit-pb-theme-card--library-card .edit-pb-theme-preview {
  background-color: #f0e0b8;
}
.edit-pb-theme-card--library-card .edit-pb-theme-preview::before {
  content: '';
  position: absolute;
  left: 8%;
  top: 5px;
  width: 18%;
  height: 9px;
  border: 0.5px solid rgba(120,80,40,0.5);
  background: rgba(255,250,235,0.55);
  z-index: 0;
}

/* 6. night-tale mini */
.edit-pb-theme-card--night-tale .edit-pb-theme-preview {
  background-color: #1c1830;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,200,0.40) 0, transparent 1.2px),
    radial-gradient(circle at 70% 50%, rgba(255,255,200,0.35) 0, transparent 1.2px),
    radial-gradient(circle at 40% 75%, rgba(255,255,200,0.32) 0, transparent 1.2px),
    radial-gradient(circle at 85% 25%, rgba(255,255,200,0.38) 0, transparent 1.2px);
}
.edit-pb-theme-card--night-tale .edit-pb-theme-preview-page {
  background: #fffefa;
  border: 0.5px solid rgba(220,200,140,0.5);
}

/* ════════════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D6: 신규 5스킨 카드 프리뷰(다듬기 UI 썸네일)
   · UI 목록 key(.edit-pb-theme-card--<신규키>)와 일치. 기능 무관, 스킨 톤만(gradient/색).
   · 기존 legacy 6키 프리뷰는 그대로 보존(데이터/롤백용).
   ════════════════════════════════════════════════════════════ */
/* 포근한 동화책 */
.edit-pb-theme-card--cozy-storybook.edit-pb-theme-toggle-mini { background: #f6dca8; }
.edit-pb-theme-card--cozy-storybook .edit-pb-theme-preview {
  background-color: #f6ead1;
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(0,0,0,0.03) 5px 6px);
}
.edit-pb-theme-card--cozy-storybook .edit-pb-theme-preview-page {
  background: #fdf7ea; border-radius: 4px;
}
/* 종이 동화책 */
.edit-pb-theme-card--paper-storybook.edit-pb-theme-toggle-mini { background: #e9ddc3; }
.edit-pb-theme-card--paper-storybook .edit-pb-theme-preview {
  background-color: #e9ddc3;
  background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(120,90,50,0.14) 2px 3px);
}
.edit-pb-theme-card--paper-storybook .edit-pb-theme-preview-page {
  background: #f4ecda; border-radius: 1px;
}
/* 전시 그림책 */
.edit-pb-theme-card--gallery-picturebook.edit-pb-theme-toggle-mini { background: #f1f1ef; }
.edit-pb-theme-card--gallery-picturebook .edit-pb-theme-preview {
  background-color: #ececea;
}
.edit-pb-theme-card--gallery-picturebook .edit-pb-theme-preview-page {
  background: #ffffff; border: 0.5px solid #d8d8d4; border-radius: 1px;
}
/* 숲속 그림책 */
.edit-pb-theme-card--forest-storybook.edit-pb-theme-toggle-mini { background: #cedcc1; }
.edit-pb-theme-card--forest-storybook .edit-pb-theme-preview {
  background-color: #d7e3cb;
  background-image: repeating-linear-gradient(60deg, transparent 0 4px, rgba(94,125,74,0.16) 4px 5px);
}
.edit-pb-theme-card--forest-storybook .edit-pb-theme-preview-page {
  background: #f0f6e9; border-radius: 4px;
}
/* 밤 이야기 */
.edit-pb-theme-card--night-story.edit-pb-theme-toggle-mini { background: #1a234a; }
.edit-pb-theme-card--night-story .edit-pb-theme-preview {
  background-color: #141b3c;
  background-image:
    radial-gradient(circle at 22% 30%, rgba(255,246,200,0.5) 0, transparent 1.2px),
    radial-gradient(circle at 68% 25%, rgba(255,246,200,0.45) 0, transparent 1.2px),
    radial-gradient(circle at 82% 55%, rgba(255,246,200,0.4) 0, transparent 1.2px);
}
.edit-pb-theme-card--night-story .edit-pb-theme-preview-page {
  background: #1a234a; border: 0.5px solid #3a4576; border-radius: 4px;
}

/* ════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D7-1 (2026-06-19): 신규 5스킨 imageCenter = 그림중심 작품 무대(E) + split 최소 보완
   ─────────────────────────────────────────────────────
   · 신규 5키 한정. imageCenter를 "학생 그림이 주인공인 작품 무대"로(배경-틀-그림박스 통합).
   · 감상/편집 분리: 본문 overlay의 하단 캡션화는 body[...]:not(.edit-mode-active)에서만.
     편집(body.edit-mode-active, viewer-render.js:58)에선 .pb-stage__body-overlay inline 좌표/
     드래그/저장이 그대로 동작(아래 :not 셀렉터가 미적용 → inline style 우선).
   · CSS 표시 레이어만. picturebookBodyBox·저장·좌표계·DOM·JS 무변경. legacy 6키/텍스트/무비 무관.
   ════════════════════════════════════════════════════ */

/* ── 학생 그림 흰 박스(#fffefa)·테두리 제거 (split·imageCenter 공통) ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb .pb-illust,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb .pb-illust,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb .pb-illust,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb .pb-illust,
body[data-pb-theme="night-story"]        .scene-screen--pb .pb-illust {
  background: transparent; border: none; box-shadow: none;
}

/* ── imageCenter 무대: page 카드/프레임 제거 + 그림 더 크게 ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-page,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-page,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-page,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-page {
  background: transparent; box-shadow: none; border: none; border-radius: 0;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-frame {
  gap: 0; padding: 0;
  grid-template-rows: minmax(0, 8.4fr) minmax(0, 1.6fr);
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-stage,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-stage,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-stage,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-stage { border-radius: 0; }

/* ── imageCenter 하단 선택지 = 작은 갈림길 라벨 ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-text--bottom-only {
  background: transparent; border: none; box-shadow: none;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-text__actions {
  flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: 10px; padding: 6px 14px; border-top: none;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  /* data-count="N" 룰이 !important(flex/padding/font)라 동일 속성은 !important로 이김. */
  flex: 0 0 auto !important; width: auto !important; min-width: 0; max-width: 44% !important; flex-basis: auto !important;
  padding: 5px 18px !important; font-size: 13px !important; border-radius: 999px; box-shadow: none; border-width: 1px;
}

/* ── D7-5 최종: 본문 overlay = 다듬기에서 배치한 위치 그대로(감상=편집). 위치/크기 좌표(left/top/width/height)
   는 viewer-render inline 값 사용 — CSS로 덮지 않음. "시각만" 스킨 말풍선화(배경/선/그림자/ink).
   ⚠ 이전의 하단 스크림 강제(left/top/bottom/width !important + 검은 gradient + 흰 자막)는 폐기·제거됨. ── */
/* D8-CLEAN-1B: 말풍선 색조(hue)는 스킨 고정, alpha는 사용자 글상자 진하기(--pb-box-opacity) 반영.
   var 미설정(legacy/비스킨)이면 스킨 기본 alpha fallback. picturebookBodyBox.backdropOpacity 그대로 사용. */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  background: rgba(253,247,234, var(--pb-box-opacity, .86)) !important; border: 1px solid rgba(230,200,150,.55); box-shadow: 0 1px 5px rgba(120,90,50,.10) !important;
}
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  background: rgba(245,238,222, var(--pb-box-opacity, .88)) !important; border: 1px solid rgba(194,171,130,.5); box-shadow: 0 1px 4px rgba(90,70,40,.10) !important;
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  background: rgba(255,255,255, var(--pb-box-opacity, .62)) !important; border: 1px solid rgba(180,180,176,.5); box-shadow: none !important;
}
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  background: rgba(223,234,208, var(--pb-box-opacity, .85)) !important; border: 1px solid rgba(174,195,148,.55); box-shadow: 0 1px 4px rgba(60,80,40,.10) !important;
}
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  background: rgba(30,40,75, var(--pb-box-opacity, .80)) !important; border: 1px solid rgba(90,104,160,.45); box-shadow: 0 1px 6px rgba(0,0,0,.25) !important;
}
/* 본문 글자 = 사용자 글씨 색(--pb-color-override) 우선, 없으면 스킨 기본 ink. 흰 자막/스크림 그림자 폐지. */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body { color: var(--pb-color-override, #5a4630); text-shadow: none; }
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body { color: var(--pb-color-override, #43321c); text-shadow: none; }
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body { color: var(--pb-color-override, #3a3a38); text-shadow: none; }
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body { color: var(--pb-color-override, #3a4a2e); text-shadow: none; }
/* night 기본 본문 글씨 = 밝은 크림(무색일 때). 사용자 --pb-color-override는 그대로 우선(존중). text-shadow는 D9-7B에서 보강. */
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body { color: var(--pb-color-override, #f4edd8); text-shadow: none; }

/* ════════════════════════════════════════════════════════════
   D9-1 (cozy-storybook 정본 · 미커밋): 말풍선=둥근 종이 조각, 행동버튼=작은 종이 라벨.
   cozy 한정 · 시각만. 위치/크기/배경 var(--pb-box-opacity)/글씨색 var(--pb-color-override)/
   드래그·리사이즈 핸들/기능 class(js-restart 등)/그림 크기 무변경. 편집·감상·엔딩 공통.
   ════════════════════════════════════════════════════════════ */
/* 1) 말풍선 — 따뜻한 보더 + 말랑한 종이 그림자 + 더 둥글게. 배경 var는 D8-1B 그대로(미수정). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1.5px solid rgba(198,152,92,.5);
  border-radius: 16px;
  box-shadow: 0 2px 9px rgba(150,110,60,.14), inset 0 1px 0 rgba(255,255,255,.5);
  padding: 10px 16px;
}
/* 2) 행동버튼 — 둥근 종이 라벨(따뜻한 살구·갈색 보더·작은 종이 그림자·갈색 글씨).
   imageCenter pill 규칙(.pb-text__actions[data-count], !important)을 이기게 동일 패턴+!important. */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: #f7dca6 !important;
  border: 1.5px solid #d9b677;
  border-radius: 13px !important;
  box-shadow: 0 1px 2px rgba(150,110,60,.18);
  color: #5a3c1e !important;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 7px 18px !important;
  min-height: 38px;
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook:hover:not(:disabled) {
  background: #f2d091 !important; border-color: #cda55f;
}
/* 번호/화살표는 cozy에서 라벨감 위해 숨김(장식 span — 기능 무관). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-arrow {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   D9-2 (cozy-storybook 정본 · 미커밋): 무대=따뜻한 종이 책상, 작품 칸=은은한 종이 페이지.
   cozy imageCenter 한정 · CSS만. 그림 크기/비율(8.9:1.1)/contain/inset(D7-6)/하단 버튼·말풍선(D9-1)
   /글상자 진하기·글씨색(D8-1B)/핸들/위치 무변경. 외부 asset 0(CSS gradient만). 중앙 접힘선 없음.
   ════════════════════════════════════════════════════════════ */
/* 1) 전체 배경 = 따뜻한 크림 책상 + 보일듯말듯 종이결 + 아주 옅은 상단 광(어두운 비네팅 X). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(255,250,238,.45), rgba(255,250,238,0) 62%),
    repeating-linear-gradient(135deg, rgba(150,110,60,.020) 0 1.5px, transparent 1.5px 9px),
    linear-gradient(#ece0c6, #e7d9bc);
}
/* 2) 작품 칸 = 은은한 종이 페이지(살짝 밝은 크림) + 부드러운 그림자 + 가는 따뜻한 테두리 + 약한 radius.
   D7-5에서 imageCenter page를 투명 처리했으나, cozy만 종이 페이지로 되살림(강한 액자/흰박스 아님). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    repeating-linear-gradient(135deg, rgba(120,90,40,.014) 0 1px, transparent 1px 7px),
    linear-gradient(#fdf7ea, #f7ecd4);
  border: 1px solid rgba(224,202,160,.6);
  border-radius: 14px;
  box-shadow: 0 2px 11px rgba(120,90,40,.12), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ════════════════════════════════════════════════════════════
   D9-3 (cozy-storybook 정본 · 미커밋): 글씨·엔딩 배지·편집 핸들 마감. cozy imageCenter 한정 · CSS만.
   그림 크기/비율/contain/grid/말풍선 위치/picturebookBodyBox/버튼 기능/엔딩 렌더/JS·DB 무변경.
   D8-1B(글상자 진하기 --pb-box-opacity / 글씨색 --pb-color-override)·D9-1·D9-2 유지. 색만 안 덮음. ════════════════════════════════════════════════════════════ */
/* 1) 본문 글씨 — 행간/자간만 마감(색은 D8-1B var 유지 → 미설정). 사용자 글씨색 우선 보존. */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  line-height: 1.55;
  letter-spacing: .005em;
}
/* 2) 버튼 글씨 — 종이 라벨 자간 마감(크기/모양은 D9-1 유지). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  letter-spacing: .02em;
}
/* 3) 엔딩 코너 배지 — 작은 크림 종이 명패(부드러운 그림자). 진엔딩 금색 포인트는 D7-7 유지. */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  box-shadow: 0 1px 4px rgba(120,90,40,.16);
}
/* 4) 편집 핸들 톤 약화 — 파란색은 유지하되 cozy 종이톤에 어울리게 부드럽게. 기능/표시 무변경. */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  background: rgba(126,138,170,.82);
  box-shadow: 0 2px 7px rgba(90,70,40,.22);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  border-color: rgba(126,138,170,.95);
}
/* 5) 큰 파란 점선(.safe-area-hint = 편집 드래그영역 "시각 안내")는 무대를 깨뜨림 → 모든 모드에서 숨김.
   pointer-events:none·실제 드래그 클램프는 JS라 이 요소와 무관(기능/핸들/좌표 영향 0). DOM/JS 토글 그대로. */
.safe-area-hint { display: none; }

/* ════════════════════════════════════════════════════════════
   D9-4 (paper-storybook 정본 · 미커밋): cozy 구조 복제 + paper 성격(누런 종이·연필선·메모/노트·
   덜 말랑·짙은 회갈색). paper imageCenter 한정 · CSS만. 그림 크기/비율/contain/grid/말풍선 위치/
   picturebookBodyBox/버튼 기능/엔딩 렌더/JS·DB 무변경. D8-1B(--pb-box-opacity / --pb-color-override)
   ·D7-7 엔딩 유지 — 배경/글씨색 var 안 덮음. cozy/gallery/forest/night 무수정.
   ════════════════════════════════════════════════════════════ */
/* 1) 배경 = 연한 스케치북 종이 + 보일듯말듯 연필결 + 옅은 상단 광(어두운 비네팅 X). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(252,248,236,.4), rgba(252,248,236,0) 62%),
    repeating-linear-gradient(115deg, rgba(120,108,80,.022) 0 1px, transparent 1px 8px),
    linear-gradient(#e4ddc7, #dcd3ba);
}
/* 2) 작품 칸 = 누런 종이 페이지 + 가는 연필선 테두리 + 부드러운 그림자(액자감 약하게, radius 작게). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    repeating-linear-gradient(115deg, rgba(120,100,60,.016) 0 1px, transparent 1px 7px),
    linear-gradient(#faf4e4, #f1e8cf);
  border: 1px solid rgba(150,135,100,.5);
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(110,95,55,.12), inset 0 1px 0 rgba(255,255,255,.35);
}
/* 3) 말풍선 = 살짝 각진 메모지/노트 조각(연필색 테두리·덜 둥글게). 배경 var는 D8-1B 그대로(미수정). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1.5px solid rgba(150,135,100,.5);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(110,95,55,.13);
  padding: 10px 16px;
}
/* 4) 행동버튼 = 작은 종이 메모 라벨(연필선·살짝 납작). imageCenter pill(!important) 이기게 동일 패턴+!important. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: #efe5cb !important;
  border: 1.2px solid #b9a87f;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(110,95,55,.16);
  color: #43321c !important;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 7px 18px !important;
  min-height: 38px;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook:hover:not(:disabled) {
  background: #e8dabb !important; border-color: #a8966c;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-arrow {
  display: none;
}
/* 5) 본문 글씨 — 깔끔한 노트 느낌(행간/자간만, 색은 D8-1B var 유지: 미설정 시 #43321c 회갈색). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  line-height: 1.55;
  letter-spacing: .005em;
}
/* 6) 엔딩 코너 배지 = 작은 종이 메모 명패(부드러운 그림자·살짝 각진). 진엔딩 금색 포인트는 D7-7 유지. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(110,95,55,.16);
}
/* 7) 편집 핸들 톤 약화(연필/노트 톤) + 큰 safe-area 점선 숨김. 기능/표시/좌표 무변경. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  background: rgba(132,124,104,.82);
  box-shadow: 0 2px 7px rgba(90,75,45,.22);
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  border-color: rgba(132,124,104,.95);
}

/* ════════════════════════════════════════════════════════════
   D9-5B (gallery-picturebook 고밀도 마감): 단순 회색 스킨 → 명확한 "미술관 전시 무대".
   gallery imageCenter 한정 · CSS만(신규 SVG·이미지 0). 절대 보존: 그림 크기/비율(8.9:1.1)/contain/
   grid/말풍선 위치/picturebookBodyBox(--pb-box-opacity)/글씨색(--pb-color-override)/이동·리사이즈/
   엔딩 렌더/버튼 기능 class/JS·DB. cozy/paper/forest/night 무수정.
   핵심: ① 벽을 살짝 어둡게+스포트 2개 → 오프화이트 페이지가 "조명 받는 작품"으로 부각
        ② 매트 여백=contain 레터박스(그림 비침범, 페이지색이 곧 매트) + 부유 그림자로 깊이
        ③ 캡션=핀으로 벽에 붙인 전시 라벨  ④ 버튼=양끝 금속 핀 명패(pseudo, PNG 아님)
   레퍼런스 분위기 ~75%. 어두운 비네팅/그림 위 불투명 레이어/그림 축소 없음.
   ════════════════════════════════════════════════════════════ */
/* 1) 배경 = 전시 벽(살짝 어둡게→작품 대비) + 상단 좌우 스포트 광 2개(페이지 뒤·그림 비침범). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(34% 44% at 26% -3%, rgba(255,252,241,.72), rgba(255,252,241,0) 70%),
    radial-gradient(34% 44% at 74% -3%, rgba(255,252,241,.72), rgba(255,252,241,0) 70%),
    linear-gradient(#e6e5e0 0%, #dcdbd6 56%, #d2d1cc 100%);
}
/* 1b) 천장 트랙 조명 2개(작고 절제) + 부드러운 하향 광 — .scene-ornaments(pointer-events:none).
   ⚠ imageCenter 한정: split은 그림이 상단 full-bleed라 조명기구가 그림 위에 겹쳐 어색 → .pb--imagecenter로 묶음.
   split은 기존 "상단 가는 선"(위 3358)으로 자연 복귀(무변경). 광은 imageCenter 벽/매트 상단에만 떨어짐. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  content: ""; position: absolute; top: 3px; width: 19px; height: 6px; opacity: .9; z-index: 2;
  background: linear-gradient(#9a9b9f, #73747a);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 17px 2px rgba(255,250,235,.42);
  transform: translateX(-50%);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before { left: 26%; }
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after  { left: 74%; }
/* 2) 작품 칸 = 벽에서 떠 있는 매트보드(오프화이트 + 얇은 웜그레이 선 + 강한 부드러운 부유 그림자).
   매트 여백은 contain 레터박스(페이지색)로 자연 형성 → 그림 축소·침범 없음. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background: #fcfcfb;
  border: 1px solid #d9d8d2;
  border-radius: 2px;
  box-shadow: 0 14px 30px -6px rgba(35,35,42,.22), 0 3px 8px rgba(35,35,42,.12);
  position: relative;
}
/* 3) 말풍선 = 벽에 핀으로 붙인 전시 캡션 패널(오프화이트 반투명·웜그레이 선·아주 약한 그림자).
   배경/위치/크기/투명도 var는 D8 그대로(미수정), 글씨색 override 유지. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(150,148,142,.55);
  border-radius: 3px;
  box-shadow: 0 2px 9px rgba(35,35,42,.12);
  padding: 9px 15px;
}
/* 3b) 캡션 좌상단 작은 핀 포인트(장식만·pointer-events:none·텍스트 비침범 패딩 코너). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  content: ""; position: absolute; top: 6px; left: 9px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #bdbdb6 60%, #8c8c85);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.28);
  pointer-events: none;
}
/* 4) 행동버튼 = 작고 얇은 작품 명패 + 양끝 금속 핀(pseudo). pill(!important) 이기게 동일 패턴+!important. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  position: relative;
  background: linear-gradient(#fbfbf8, #f1f1ec) !important;
  border: 1px solid #c9c8c2;
  border-radius: 2px !important;
  box-shadow: 0 1px 3px rgba(35,35,42,.14), inset 0 1px 0 rgba(255,255,255,.7);
  color: #2b2b27 !important;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 7px 24px !important;
  min-height: 38px;
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook:hover:not(:disabled) {
  background: linear-gradient(#ffffff, #f6f6f1) !important; border-color: #bcbbb4;
}
/* 명패 양끝 금속 핀 — 좌(::before)·우(::after). 라벨/번호 span 무관(장식만). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #fefefe, #b6b6af 58%, #8a8a83);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.2);
  pointer-events: none;
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before { left: 7px; }
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::after  { right: 7px; }
/* 번호/화살표 숨김(라벨감) — 핀과 무관. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-arrow {
  display: none;
}
/* 5) 본문 글씨 — 깔끔한 전시 캡션(행간/자간만, 색은 D8 var 유지: 미설정 #2b2b2b). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  line-height: 1.55;
  letter-spacing: .005em;
}
/* 6) 엔딩 배지 = 일반 캡션보다 작은 전시 명패. 진엔딩엔 얇은 금색 라인 포인트(큰 도장 금지·그림 비침범). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  border-radius: 2px;
  padding: 2px 11px;
  box-shadow: 0 1px 4px rgba(35,35,42,.12);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner[data-true-end="1"] {
  box-shadow: 0 1px 4px rgba(35,35,42,.12), inset 0 0 0 1px rgba(196,156,42,.7);
}
/* 7) 편집 핸들 톤 = 중립 회청색(기능/표시/좌표 무변경). */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  background: rgba(120,132,150,.82);
  box-shadow: 0 2px 7px rgba(40,50,70,.22);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  border-color: rgba(120,132,150,.95);
}

/* ════════════════════════════════════════════════════════════
   D9-6 (forest-storybook 정본): 연한 크림그린 무대 + 잎빛 종이 페이지 + 작은 잎 라벨.
   forest imageCenter 한정 · CSS만. 그림 크기/비율/contain/grid/말풍선 위치/picturebookBodyBox/
   글씨색/엔딩 렌더/JS·DB 무변경. 진초록 배경·그림 침범 장식 금지(잎 덩굴은 D4 가장자리 ornament 유지).
   외부 asset 0. cozy/paper/gallery/night 무수정.
   ════════════════════════════════════════════════════════════ */
/* 1) 배경 = 연한 크림그린 + 부드러운 햇살(상단 따뜻한 광) + 보일듯말듯 자연 결. 어두운 비네팅 X. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(255,252,230,.5), rgba(255,252,230,0) 60%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.03) 0 2px, transparent 2px 18px),
    linear-gradient(#eef5e2, #e2edd3);
}
/* 2) 작품 칸 = 잎빛 종이 페이지(연한 크림그린 + 가는 녹색선 + 부드러운 그림자). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    repeating-linear-gradient(60deg, rgba(94,125,74,.026) 0 1px, transparent 1px 7px),
    linear-gradient(#f3f8ec, #e8f0dd);
  border: 1px solid rgba(180,200,158,.6);
  border-radius: 13px;
  box-shadow: 0 2px 11px rgba(60,85,45,.12), inset 0 1px 0 rgba(255,255,255,.4);
}
/* 3) 말풍선 = 잎사귀빛 종이(녹색 보더·둥글게). 배경 var는 D8 그대로(미수정). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1.5px solid rgba(170,193,142,.55);
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(60,85,45,.12);
  padding: 10px 16px;
}
/* 4) 행동버튼 = 작은 잎 라벨(연녹 면·올리브 보더·둥근). pill(!important) 이기게 동일 패턴+!important. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  /* D9-6C: 납작한 잎 라벨 — 아이콘은 flex 흐름 항목(gap 간격)이라 글자와 겹침 0. 높이/그림자 한 단계 축소. */
  display: flex; align-items: center; justify-content: center !important; gap: 8px;
  background: #dce9cb !important;
  border: 1.2px solid #a8bf8a;
  border-radius: 10px !important;
  box-shadow: 0 1px 1px rgba(60,85,45,.1);
  color: #36482b !important;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 16px !important;
  min-height: 36px;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook:hover:not(:disabled) {
  background: #d2e1bd !important; border-color: #9ab37b;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-arrow {
  display: none;
}
/* 5) 본문 글씨 — 행간/자간만(색은 D8 var 유지: 미설정 #3a4a2e 짙은 올리브). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  line-height: 1.55;
  letter-spacing: .005em;
}
/* 6) 엔딩 코너 = 작은 잎 명패(둥근·부드러운 그림자). 진엔딩 금색 포인트는 D7-7 유지. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(60,85,45,.16);
}
/* 7) 편집 핸들 톤 = 회녹색(기능/표시/좌표 무변경). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  background: rgba(110,130,105,.82);
  box-shadow: 0 2px 7px rgba(45,65,40,.22);
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  border-color: rgba(110,130,105,.95);
}

/* ════════════════════════════════════════════════════════════
   D9-7 (night-story 정본): 너무 검지 않은 남색/보라 무대 + 밝은 크림 페이지(그림 그대로 밝게) + 달빛 라벨.
   night imageCenter 한정 · CSS만. 그림 크기/비율/contain/grid/말풍선 위치/picturebookBodyBox/
   글씨색/엔딩 렌더/JS·DB 무변경. ⚠ 학생 그림에 filter/overlay 금지 — 페이지를 밝은 크림으로 올려 그림이
   어두워지지 않게. 말풍선=남색+밝은 글씨(글상자 진하기 낮/높 모두 읽히게 옅은 그림자 1줄). 외부 asset 0.
   cozy/paper/gallery/forest 무수정.
   ════════════════════════════════════════════════════════════ */
/* 1) 배경 = 밝은 남색/보라(near-black 금지) + 상단 달빛 광 + 가장자리 별 몇 개. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(1.4px 1.4px at 14% 12%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 86% 14%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(60% 46% at 78% -2%, rgba(214,222,255,.30), rgba(214,222,255,0) 70%),
    linear-gradient(#2c376a, #212b53);
}
/* 2) 작품 칸 = 밝은 크림 페이지(그림 그대로 밝게) + 부드러운 달빛 테두리/글로우. filter/overlay 없음. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-page {
  background: linear-gradient(#f8f3e2, #f1ebd6);
  border: 1px solid rgba(214,222,255,.4);
  border-radius: 13px;
  box-shadow: 0 4px 18px rgba(0,0,0,.32), 0 0 14px rgba(150,168,235,.18);
}
/* 3) 말풍선 = 남색 카드(밝은 글씨). 배경 var는 D8 그대로(미수정). */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(120,134,196,.45);
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  padding: 10px 16px;
}
/* 4) 행동버튼 = 작은 달빛 라벨(남색 면 충분히 진하게·라벤더 보더·밝은 글씨). 대비 확보. +!important. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  /* D9-7C: 정돈된 별빛 라벨 — 별 아이콘은 flex 흐름 항목(gap 간격)이라 글자와 겹침 0. pill감↓·높이↓·은은한 glow. */
  display: flex; align-items: center; justify-content: center !important; gap: 8px;
  background: rgba(48,60,112,.9) !important;
  border: 1.2px solid rgba(150,162,212,.6);
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.26), 0 0 6px rgba(150,168,235,.14);
  color: #f4edd8 !important;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 16px !important;
  min-height: 36px;
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook:hover:not(:disabled) {
  background: rgba(62,76,140,.92) !important; border-color: rgba(170,182,228,.7);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-num,
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook .pb-choice-arrow {
  display: none;
}
/* 5) 본문 글씨 — 행간/자간 + 가독성 옅은 그림자(글상자 진하기 낮을 때도 밝은 글씨 읽힘). 색은 D8 var #eef1ff. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  line-height: 1.55;
  letter-spacing: .005em;
  text-shadow: 0 1px 3px rgba(8,12,32,.5);
}
/* 6) 엔딩 코너 = 작은 달빛 명패(둥근·달빛 글로우). 진엔딩 포인트는 D7-7 유지. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  border-radius: 13px;
  box-shadow: 0 1px 6px rgba(0,0,0,.3), 0 0 8px rgba(150,168,235,.22);
}
/* 7) 편집 핸들 톤 = 라벤더/푸른 회색(기능/표시/좌표 무변경). */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-body-handle--move {
  background: rgba(150,160,205,.85);
  box-shadow: 0 2px 7px rgba(10,16,40,.3);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter [class*="pb-body-handle--resize-"] {
  border-color: rgba(160,170,210,.95);
}

/* ════════════════════════════════════════════════════════════
   D9-4C (paper 고밀도): 스프링 스케치북 / 메모 노트 정체성 강화. paper imageCenter 한정·CSS/pseudo만.
   절대 보존: 그림 크기/contain/grid/말풍선 위치/picturebookBodyBox(var)/글씨색(var)/이동·리사이즈/기능 class.
   cozy/gallery/forest/night·split 무수정(전부 .pb--imagecenter 한정).
   ════════════════════════════════════════════════════════════ */
/* A) 왼쪽 스프링 제본 — 페이지 좌측 가장자리(작품 칸 바깥), 손그림 코일. absolute·pointer-events none → 그림 폭/크기 불변. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page { position: relative; }
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; left: -3px; top: 6%; width: 15px; height: 88%; z-index: 4; pointer-events: none; opacity: .82;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'><path d='M4 3 Q16 5 14 12 Q12 19 4 21' fill='none' stroke='%23a89f8b' stroke-width='2.3' stroke-linecap='round'/><ellipse cx='7' cy='12' rx='2.2' ry='2.7' fill='%23efe7d2'/></svg>") repeat-y left top/15px 22px;
}
/* C) 말풍선 = 메모지: 우상단 모서리 접힘(dog-ear) pseudo. 위치/크기/투명도 var 무변경. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  content: ""; position: absolute; top: 0; right: 0; width: 13px; height: 13px; pointer-events: none;
  background: linear-gradient(225deg, #e7d9b6 0 50%, transparent 50%);
  border-left: 1px solid rgba(150,135,100,.4);
  border-bottom: 1px solid rgba(150,135,100,.4);
  border-bottom-left-radius: 3px;
}
/* D) 행동버튼 = 인덱스 탭/메모 라벨: 상단 작은 탭 돌출 pseudo. 본체 CSS 유지. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook { position: relative; }
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  content: ""; position: absolute; top: -3px; left: 13px; width: 16px; height: 4px; border-radius: 2px 2px 0 0;
  background: #e7d9b9; border: 1px solid #b9a87f; border-bottom: none; pointer-events: none;
}
/* E) 엔딩 = 메모 스티커: 진엔딩 연노란 형광펜 밑줄(큰 도장 금지·그림 비침범). */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner[data-true-end="1"] {
  box-shadow: 0 1px 4px rgba(110,95,55,.16), inset 0 -3px 0 rgba(240,212,96,.5);
}

/* ════════════════════════════════════════════════════════════
   D9-6B (forest 고밀도): 잎·가지가 무대 바깥을 감싸는 숲속 그림책. forest imageCenter 한정·CSS/pseudo/SVG만.
   절대 보존(상동). 모서리 가지는 ornaments(위)에서 처리. cozy/gallery/paper/night·split 무수정.
   ════════════════════════════════════════════════════════════ */
/* C) 페이지 깊이 강화(부유 그림자). 크기/비율 불변. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  box-shadow: 0 12px 26px -6px rgba(50,72,38,.22), 0 2px 8px rgba(50,72,38,.12), inset 0 1px 0 rgba(255,255,255,.4);
}
/* D) 말풍선 = 잎사귀빛 종이: 유기적 radius + 좌상단 작은 잎 포인트. 위치/크기/var 무변경. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay { border-radius: 17px 17px 17px 5px; }
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  content: ""; position: absolute; top: -7px; left: 11px; width: 18px; height: 13px; pointer-events: none; transform: rotate(-18deg);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2 12 Q3 2 18 3 Q17 13 2 12 Z' fill='%237ea65c'/><path d='M5 11 Q10 7 16 4' stroke='%23557a3d' stroke-width='1' fill='none'/></svg>") no-repeat center/contain;
}
/* E) 행동버튼 = 잎 라벨: 잎 아이콘은 글자 앞 flex 흐름 항목(gap으로 7~8px 간격·세로 중앙·겹침 0). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  content: ""; flex: 0 0 auto; display: inline-block; width: 13px; height: 10px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2 12 Q3 2 18 3 Q17 13 2 12 Z' fill='%23557a3d'/></svg>") no-repeat center/contain;
}
/* F) 엔딩 = 잎 명패: 좌측 작은 잎(좌 패딩 확보). 진엔딩 금색 포인트는 D7-7 유지. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner { position: relative; padding-left: 20px; }
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 11px; height: 8px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2 12 Q3 2 18 3 Q17 13 2 12 Z' fill='%23557a3d'/></svg>") no-repeat center/contain;
}

/* ════════════════════════════════════════════════════════════
   D9-7B (night 고밀도): 달·별·구름 잠자리 밤 이야기. night imageCenter 한정·CSS/pseudo/SVG만.
   ⚠ 학생 그림 filter/overlay 금지(페이지=밝은 아이보리 유지)·가독성 절대 보존. 달·별은 ornaments(위).
   cozy/gallery/paper/forest·split 무수정.
   ════════════════════════════════════════════════════════════ */
/* D) 페이지 달빛 글로우 강화. 밝기/크기 불변. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-page {
  box-shadow: 0 5px 20px rgba(0,0,0,.34), 0 0 18px rgba(150,168,235,.24);
}
/* C) 구름 — 무대 하단 가장자리 옅은 실루엣(버튼 영역 밖·그림 비침범·모바일 숨김). */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage { position: relative; }
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage::after {
  content: ""; position: absolute; left: 5%; bottom: 1px; width: 44%; height: 28px; opacity: .2; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'><path d='M14 34 Q4 34 4 25 Q4 16 15 16 Q17 6 32 8 Q40 1 51 10 Q67 6 71 19 Q88 15 92 27 Q106 25 106 34 Z' fill='%23b9c4ef'/></svg>") no-repeat left bottom/contain;
}
/* E) 말풍선 = 남보라 카드 + 우상단 작은 별빛 포인트. 라벤더 보더·밝은 글씨·가독성. var 무변경. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay { border-color: rgba(150,160,210,.5); }
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  content: ""; position: absolute; top: -6px; right: 9px; width: 14px; height: 14px; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(246,221,143,.5));
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0 l1.8 6.2 l6.2 1.8 l-6.2 1.8 l-1.8 6.2 l-1.8-6.2 l-6.2-1.8 l6.2-1.8 Z' fill='%23f6dd8f'/></svg>") no-repeat center/contain;
}
/* E-b) 가독성 — 이중 그림자: 밝은 외곽선(어두운 사용자 색 override가 남색 글상자 위에서도 윤곽으로 읽힘)
   + 어두운 깊이(기본 밝은 크림 글씨용). override/저장 무변경. 낮은 진하기에서도 가독. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay .pb-text__body {
  text-shadow: 0 0 2px rgba(244,237,216,.4), 0 1px 3px rgba(8,12,32,.55);
}
/* F) 행동버튼 = 별빛 라벨: 별 아이콘은 글자 앞 flex 흐름 항목(gap으로 7~8px 간격·세로 중앙·겹침 0). */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  content: ""; flex: 0 0 auto; display: inline-block; width: 11px; height: 11px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0 l1.8 6.2 l6.2 1.8 l-6.2 1.8 l-1.8 6.2 l-1.8-6.2 l-6.2-1.8 l6.2-1.8 Z' fill='%23f4edd8'/></svg>") no-repeat center/contain;
}
/* G) 엔딩 = 별빛 명패: 좌측 작은 별(좌 패딩 확보). 진엔딩 금빛 별. */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner { position: relative; padding-left: 20px; }
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0 l1.8 6.2 l6.2 1.8 l-6.2 1.8 l-1.8 6.2 l-1.8-6.2 l-6.2-1.8 l6.2-1.8 Z' fill='%23f6dd8f'/></svg>") no-repeat center/contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL (paper·gallery·forest·night 최종 시각 정합): 색만이 아니라 실루엣까지 레퍼런스 수준으로.
   전부 .pb--imagecenter 한정(split/legacy 무영향)·CSS/pseudo/data-uri SVG만(외부 0). cozy 무수정.
   절대 보존: 그림 크기/contain/grid/picturebookBodyBox(위치·크기·진하기 var)/글씨색 var/이동·리사이즈/엔딩/버튼 기능.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────── PAPER: 스프링 스케치북 정본(타공+링 제본·누런 종이·메모지·인덱스 탭) ─────────── */
/* 클립 제거(스프링이 유일 정체성), 접힘 음영 더 약하게 → 장식 언어 통일 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before { display: none !important; }
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after { opacity: .2; }
/* 페이지 = 누런 스케치북 종이 + 연필결/섬유 + 좌측 제본 눌림 그림자 + 덜 둥근 모서리(강한 카드그림자 X) */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    linear-gradient(90deg, rgba(120,98,52,.12) 0, rgba(120,98,52,.03) 16px, transparent 32px),
    repeating-linear-gradient(115deg, rgba(120,100,60,.02) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(22deg, rgba(150,135,95,.016) 0 1px, transparent 1px 9px),
    linear-gradient(#f7eece, #ece0bf) !important;
  border: 1px solid rgba(150,135,100,.55);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(110,95,55,.13), inset 0 1px 0 rgba(255,255,255,.3), inset 15px 0 16px -14px rgba(110,90,50,.28);
}
/* 좌측 제본 = 타공 구멍 + 그 사이를 지나는 금속 링(repeat-y로 5~7개). 페이지에 연결돼 보이게 가장자리 안쪽까지. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; left: -5px; top: 4%; width: 24px; height: 92%; z-index: 4; pointer-events: none; opacity: 1;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 27'><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='%23e7dcc0'/><ellipse cx='15' cy='13.5' rx='3.3' ry='4.2' fill='none' stroke='%23ad9d78' stroke-width='1'/><path d='M2 5 Q22 7 19 13.5 Q22 20 2 22' fill='none' stroke='%23aaa28d' stroke-width='2.8' stroke-linecap='round'/><path d='M4 6.5 Q18.5 9 16.5 13' fill='none' stroke='%23ded6c2' stroke-width='1' stroke-linecap='round'/></svg>") repeat-y left top/24px 27px;
  filter: drop-shadow(0 1px 1px rgba(90,70,40,.22));
}
/* 말풍선 = 붙인 메모지: 비대칭 radius + 더 큰 dog-ear(그림자 있어 실제로 보임) */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 9px 9px 11px 3px;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  width: 17px; height: 17px;
  background: linear-gradient(225deg, #e3d4ae 0 50%, transparent 50%);
  box-shadow: -1px 1px 2px rgba(120,95,50,.22);
  border-left: none; border-bottom: none; border-bottom-left-radius: 3px;
}
/* 행동버튼 = 노트 인덱스 탭(상단 탭 돌출·낮고 납작·연필선). 본체는 paper D9-4 위에 마감만. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(#f1e7cc, #e7d8b4) !important;
  border: 1.2px solid #b6a479 !important;
  border-radius: 3px 3px 5px 5px !important;
  box-shadow: 0 1px 1px rgba(110,95,55,.12) !important;
  padding: 5px 16px !important; min-height: 36px;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  top: -4px; left: 11px; width: 18px; height: 5px; border-radius: 2px 2px 0 0;
  background: #ecdcb6; border: 1px solid #b6a479; border-bottom: none;
}

/* ─────────── GALLERY: 전시 무대 — 작품을 비추는 광·매트 창선·캡션·명패 핀 ─────────── */
/* 배경 광 = 작품 주변 벽/매트에 부드럽게 퍼지는 스포트(더 넓고 은은), 조명기구는 더 작게 */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(48% 58% at 27% -9%, rgba(255,251,240,.85), rgba(255,251,240,0) 72%),
    radial-gradient(48% 58% at 73% -9%, rgba(255,251,240,.85), rgba(255,251,240,0) 72%),
    linear-gradient(#e8e7e2 0%, #dcdbd6 52%, #d0cfca 100%);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  top: 2px; width: 15px; height: 5px; box-shadow: 0 9px 20px 3px rgba(255,250,233,.5);
}
/* 매트보드 = 벽에서 더 떠 있는 깊이 + 작품 둘레 매트 창선(얇은 웜그레이, inset) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page {
  box-shadow: 0 18px 36px -8px rgba(35,35,42,.26), 0 4px 10px rgba(35,35,42,.13);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  content: ""; position: absolute; inset: 13px; border: 1px solid rgba(150,148,142,.42); border-radius: 1px; pointer-events: none; z-index: 3;
}
/* 캡션 = 전시 라벨로 정돈(각진·padding 정리·얇은 선·아주 약한 그림자) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 2px; padding: 7px 14px;
  border: 1px solid rgba(140,138,132,.6); box-shadow: 0 1px 6px rgba(35,35,42,.1);
}
/* 명패 버튼 = 핀 더 또렷·높이 36·각진 */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  padding: 6px 22px !important; min-height: 36px; border-radius: 2px !important;
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::after {
  width: 6px; height: 6px;
}

/* ─────────── FOREST: 잎·가지가 무대를 감싸는 숲 — 풍성한 가지·유기적 말풍선/버튼 ─────────── */
/* 좌상단 가지 더 풍성하게(약 +35%) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before {
  left: -4px; top: -4px; width: 122px; height: 98px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122 98'><path d='M2 4 Q44 12 68 38 Q84 56 92 86' fill='none' stroke='%236d8a4f' stroke-width='2.6' stroke-linecap='round'/><path d='M30 14 Q26 28 36 36' fill='none' stroke='%236d8a4f' stroke-width='1.8'/><path d='M60 42 Q58 58 70 64' fill='none' stroke='%236d8a4f' stroke-width='1.8'/><g fill='%237ea65c'><ellipse cx='24' cy='12' rx='8' ry='3.8' transform='rotate(24 24 12)'/><ellipse cx='46' cy='22' rx='8' ry='3.8' transform='rotate(40 46 22)'/><ellipse cx='64' cy='42' rx='7.5' ry='3.6' transform='rotate(58 64 42)'/><ellipse cx='78' cy='62' rx='7' ry='3.4' transform='rotate(74 78 62)'/><ellipse cx='40' cy='38' rx='6.5' ry='3.2' transform='rotate(-30 40 38)'/><ellipse cx='72' cy='30' rx='6' ry='3' transform='rotate(20 72 30)'/></g><g fill='%238fb56c'><ellipse cx='34' cy='8' rx='6' ry='3' transform='rotate(-6 34 8)'/><ellipse cx='54' cy='30' rx='6' ry='3' transform='rotate(14 54 30)'/><ellipse cx='72' cy='52' rx='5.5' ry='2.8' transform='rotate(30 72 52)'/><ellipse cx='86' cy='74' rx='5' ry='2.6' transform='rotate(60 86 74)'/></g></svg>") no-repeat left top/contain;
}
/* 우상단 = 더 작은 비대칭 잎 군집(반대편 균형) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::after {
  right: -3px; top: -3px; left: auto; bottom: auto; width: 80px; height: 64px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 64'><path d='M78 4 Q44 10 28 30 Q17 44 13 60' fill='none' stroke='%236d8a4f' stroke-width='2.3' stroke-linecap='round'/><path d='M50 14 Q54 26 44 32' fill='none' stroke='%236d8a4f' stroke-width='1.6'/><g fill='%237ea65c'><ellipse cx='58' cy='10' rx='6.5' ry='3.2' transform='rotate(-22 58 10)'/><ellipse cx='42' cy='22' rx='6.5' ry='3.2' transform='rotate(-42 42 22)'/><ellipse cx='27' cy='40' rx='6' ry='3' transform='rotate(-60 27 40)'/><ellipse cx='48' cy='30' rx='5.5' ry='2.8' transform='rotate(20 48 30)'/></g><g fill='%238fb56c'><ellipse cx='50' cy='14' rx='5' ry='2.6' transform='rotate(8 50 14)'/><ellipse cx='34' cy='31' rx='5' ry='2.6' transform='rotate(-26 34 31)'/></g></svg>") no-repeat right top/contain;
}
/* 배경 = 한쪽 따뜻한 햇살 더 명확(초록 농도는 그대로) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(70% 60% at 17% -7%, rgba(255,247,212,.62), rgba(255,247,212,0) 60%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.03) 0 2px, transparent 2px 18px),
    linear-gradient(#eef5e2, #e2edd3);
}
/* 말풍선 = 잎사귀 유기적 모서리(비대칭 radius). 잎 포인트는 D9-6B ::before 유지 */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 18px 6px 18px 6px;
}
/* 행동버튼 = 잎 라벨 실루엣(비대칭 radius로 단순 pill 탈피). 잎 아이콘/높이는 D9-6C 유지 */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  border-radius: 12px 4px 12px 4px !important;
}

/* ─────────── NIGHT: 완성된 밤 이야기 UI — 연금색 말풍선/버튼 ─────────── */
/* 말풍선 = 연금색 얇은 테두리 + 덜 둥근(별빛 포인트는 D9-7B ::before 유지·본문 크림은 유지) */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(198,182,124,.46); border-radius: 10px;
}
/* 버튼 = 별빛 라벨: 연금색 테두리(D9-7C 라벤더 위 마감). 높이/radius/아이콘 gap은 D9-7C 유지 */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  border-color: rgba(210,194,138,.55) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL-2 (재질·실루엣 고도화): 같은 구조 위 "장식만 붙인 느낌" 제거 → 테마별 재질·외곽이 달라 보이게.
   .pb--imagecenter 한정·CSS/pseudo/data-uri SVG만. cozy 무수정·split 무영향·그림 크기/var 보존.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───── PAPER: 제본↔페이지 한 몸 + 종이 두께/눌림 + 메모지 + 인덱스 탭 ───── */
/* 페이지 = 누런 종이결 강화 + 좌측 제본 여백(margin 라인) + 종이 두께(눌림 그림자, 강한 drop 대신) + 덜 둥근 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    linear-gradient(90deg, transparent 29px, rgba(150,110,70,.16) 29px 30px, transparent 30px),
    linear-gradient(90deg, rgba(120,98,52,.15) 0, rgba(120,98,52,.04) 22px, transparent 30px),
    repeating-linear-gradient(94deg, rgba(120,100,60,.026) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(7deg, rgba(150,135,95,.02) 0 1px, transparent 1px 7px),
    linear-gradient(155deg, #f8efcd, #ebdfba) !important;
  border: 1px solid rgba(150,135,100,.5);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(110,95,55,.16), inset -9px -11px 14px -12px rgba(110,90,50,.24), inset 17px 0 16px -14px rgba(110,90,50,.3);
}
/* 코일 = 약간 손그림 느낌 + 타공 안쪽 눌림/찢김 그림자. 페이지 안쪽까지 연결. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  left: -5px; width: 25px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 27'><ellipse cx='16' cy='13.5' rx='3.4' ry='4.3' fill='%23ddd0b0'/><path d='M13 11 Q16 9.5 19 11' fill='none' stroke='%23a8966f' stroke-width='.8'/><ellipse cx='16' cy='13.5' rx='3.4' ry='4.3' fill='none' stroke='%23a8976f' stroke-width='1'/><path d='M2 4.5 Q23 7 19.5 13.5 Q23 20.5 2.5 22.5' fill='none' stroke='%23a89f88' stroke-width='2.8' stroke-linecap='round'/><path d='M4 6 Q19 9 17 12.5' fill='none' stroke='%23e0d8c4' stroke-width='1' stroke-linecap='round'/></svg>") repeat-y left top/25px 27px;
}
/* 제본 반대편(우하단) 종이 들림 — 강한 그림자 대신 종이 두께감 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; pointer-events: none; z-index: 3;
  background: linear-gradient(315deg, #ead9b2 44%, rgba(170,148,100,.55) 50%, transparent 54%);
  box-shadow: -1px -1px 2px rgba(120,95,50,.18);
  border-top-left-radius: 5px;
}
/* 말풍선 = 붙인 메모지: 좌상단 옅은 테이프 + 우상단 dog-ear(이미 D9-FINAL). 미세 비대칭 radius. */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 8px 10px 9px 4px;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  content: ""; position: absolute; top: -5px; left: 16px; width: 26px; height: 11px; pointer-events: none; transform: rotate(-4deg);
  background: rgba(214,198,150,.5); border: 1px solid rgba(150,135,100,.32);
}
/* 버튼 = 인덱스 탭: 탭 더 명확 + 종이 겹침(웹 그림자 대신) */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  box-shadow: 0 1px 0 rgba(255,255,255,.45), 0 2px 2px -1px rgba(110,95,55,.18) !important;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  top: -5px; left: 11px; width: 20px; height: 6px; border-radius: 3px 3px 0 0;
  background: #eddcb5; border: 1px solid #b6a479; border-bottom: none;
}

/* ───── GALLERY: 전시장 깊이(벽 빛·미세 질감) + 웜화이트 매트(이중 경계) + 전시 캡션 + 명패 재질차 ───── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(54% 62% at 27% -11%, rgba(255,251,238,.92), rgba(255,251,238,0) 70%),
    radial-gradient(54% 62% at 73% -11%, rgba(255,251,238,.92), rgba(255,251,238,0) 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.006) 0 2px, transparent 2px 5px),
    linear-gradient(#eae9e4 0%, #dbdad4 55%, #cdccc6 100%);
}
/* 매트 = 웜화이트 + 벽 cast그림자/접촉그림자 분리 */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background: #f7f4ec;
  box-shadow: 0 20px 40px -10px rgba(34,32,40,.28), 0 5px 12px rgba(34,32,40,.14), 0 1px 0 rgba(34,32,40,.1);
}
/* 안쪽 작품 창선 + 바깥 매트 경계 분리(이중 ring) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  inset: 12px; border: 1px solid rgba(150,146,138,.5); border-radius: 1px;
  box-shadow: 0 0 0 5px #f7f4ec, 0 0 0 6px rgba(150,146,138,.22);
}
/* 캡션 = 전시 플레이트(여백 정돈·작게도 거대 카드처럼 안 보이게) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  padding: 6px 13px; border-radius: 2px; border: 1px solid rgba(140,136,128,.6);
}
/* 명패 = 웜그레이 본체(핀과 재질차) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(#f4f2ea, #e7e5db) !important;
  border-color: #c4c2b8 !important;
  color: #33322d !important;
}

/* ───── FOREST: 모서리 가지 프레임(비대칭) + 하단 작은 풀잎 + 방향 햇살 + 유기적 말풍선 ───── */
/* 좌상단 가지 아래로 더 흐름(D9-FINAL SVG 유지, 위치만 살짝 내림) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .scene-ornaments::before {
  top: -2px; left: -6px;
}
/* 하단 좌측 작은 풀잎 1~2개(큰 장식 금지·버튼 비침범·페이지 가장자리) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page { position: relative; }
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  content: ""; position: absolute; left: 7px; bottom: -1px; width: 44px; height: 19px; pointer-events: none; opacity: .62; z-index: 2;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 20'><g fill='none' stroke='%236d8a4f' stroke-width='2' stroke-linecap='round'><path d='M6 20 Q4 10 9 4'/><path d='M13 20 Q13 9 17 6'/><path d='M19 20 Q21 11 17 5'/><path d='M27 20 Q24 12 29 7'/><path d='M33 20 Q34 11 30 6'/></g></svg>") no-repeat left bottom/contain;
}
/* 배경 = 한쪽 방향 햇살 + 아주 옅은 잎 그림자 얼룩 */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(72% 62% at 15% -8%, rgba(255,247,210,.66), rgba(255,247,210,0) 58%),
    radial-gradient(20% 16% at 82% 12%, rgba(94,125,74,.05), rgba(94,125,74,0) 70%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.028) 0 2px, transparent 2px 18px),
    linear-gradient(#eef5e2, #e2edd3);
}
/* 말풍선 = 잎사귀 유기 외곽(한쪽 더 뾰족) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 20px 5px 16px 7px;
}

/* ───── NIGHT: 달빛이 페이지로 연결 + 명확한 남색 말풍선 + 별빛 명패 ───── */
/* 페이지 = 달빛색 테두리 + 남보라/달빛 혼합 그림자(달과 연결되는 glow) */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-page {
  border: 1px solid rgba(226,216,172,.5);
  box-shadow: 0 6px 22px rgba(18,16,48,.42), 0 0 22px rgba(150,162,235,.24);
}
/* 말풍선 = 명확한 남색 색조(회색 투명판 탈피) + 연금색 라인 + 정돈된 radius 9 */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(206,190,128,.5); border-radius: 9px;
}
/* 버튼 = 별빛 명패: 미세 달빛 gradient(보라 pill 탈피)·연금 테두리·크림 글씨는 유지 */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(rgba(56,68,124,.92), rgba(40,52,104,.92)) !important;
  border-color: rgba(214,198,140,.6) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL-3 (5스킨 전면 고도화): cozy 포함 5개 모두 재질/실루엣/깊이 발전. .pb--imagecenter 한정·CSS/pseudo/SVG만.
   split 무영향·그림 크기/var 보존. cozy=천 동화책·책갈피 / paper=스프링노트 / gallery=전시 / forest=숲 / night=밤.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───── COZY: 포근한 천 표지 동화책 + 밝은 안쪽 종이 + 책 두께 + 책갈피/천 라벨 버튼 ───── */
/* 무대 = 은은한 천(패브릭) 결(미세 크로스해치) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(255,250,238,.45), rgba(255,250,238,0) 62%),
    repeating-linear-gradient(0deg, rgba(150,110,60,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(150,110,60,.016) 0 1px, transparent 1px 4px),
    linear-gradient(#ece0c6, #e6d8ba);
}
/* 페이지 = 표지 위 밝은 안쪽 종이 + 책장 두께(겹친 페이지 가장자리) + 접촉 그림자 + 우하단 넘김 */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  position: relative;
  border-radius: 13px;
  box-shadow: 0 3px 0 -1px #e9dcbe, 0 6px 0 -2px #e2d3b1, 0 9px 16px rgba(120,90,40,.18), inset 0 1px 0 rgba(255,255,255,.45);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; pointer-events: none; z-index: 3;
  background: linear-gradient(315deg, #f4e9d0 45%, rgba(205,178,122,.5) 50%, transparent 53%);
  box-shadow: -1px -1px 2px rgba(120,95,50,.15); border-top-left-radius: 4px;
}
/* 상단 천 책갈피 리본(끝이 갈라진 V) — 동화책 큐(썸네일에서도 보임). paper 금속 스프링과 언어 안 겹침(상단·천). */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; top: -2px; right: 26px; width: 14px; height: 33%; z-index: 4; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 60' preserveAspectRatio='none'><path d='M0 0 H14 V52 L7 45 L0 52 Z' fill='%23cf9095'/><path d='M3 0 V52' stroke='rgba(255,255,255,.25)' stroke-width='1.4'/></svg>") no-repeat center top/14px 100%;
  filter: drop-shadow(-1px 2px 2px rgba(90,55,40,.22));
}
/* 말풍선 = 손그림 종이선화 느낌(미세 비대칭 radius) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 18px 13px 17px 14px;
}
/* 버튼 = 천 라벨/책갈피: 직물 결 + 안쪽 박음질선(dashed) + 살짝 비대칭. 살구 pill 탈피. */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(140,95,40,.05) 0 1px, transparent 1px 3px),
    linear-gradient(#f7dca6, #f1cf94) !important;
  border: 1.5px solid #d3ad6c !important;
  border-radius: 11px 11px 13px 10px !important;
  box-shadow: 0 1px 1px rgba(150,110,60,.16) !important;
  min-height: 36px; padding: 5px 17px !important;
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(150,108,55,.5); border-radius: 8px; pointer-events: none;
}
/* 엔딩 = 작은 책갈피 명패(한쪽 더 둥근) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  border-radius: 4px 4px 9px 9px;
}

/* ───── PAPER: 노트 룰링 강화 + 코일 자연화(밀도↓) ───── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    linear-gradient(90deg, transparent 29px, rgba(150,110,70,.16) 29px 30px, transparent 30px),
    repeating-linear-gradient(0deg, rgba(120,100,60,.02) 0 1px, transparent 1px 26px),
    linear-gradient(90deg, rgba(120,98,52,.15) 0, rgba(120,98,52,.04) 22px, transparent 30px),
    repeating-linear-gradient(94deg, rgba(120,100,60,.026) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #f8efcd, #ebdfba) !important;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 31'><ellipse cx='16' cy='15.5' rx='3.5' ry='4.4' fill='%23ddd0b0'/><path d='M13 13 Q16 11.5 19 13' fill='none' stroke='%23a8966f' stroke-width='.8'/><ellipse cx='16' cy='15.5' rx='3.5' ry='4.4' fill='none' stroke='%23a8976f' stroke-width='1'/><path d='M2 5 Q23.5 7.5 19.5 15.5 Q23 23 2.5 25' fill='none' stroke='%23a89f88' stroke-width='2.7' stroke-linecap='round'/><path d='M4 7 Q19 10 17 14' fill='none' stroke='%23e0d8c4' stroke-width='1' stroke-linecap='round'/></svg>") repeat-y left top/25px 31px;
}

/* ───── GALLERY: 픽처레일 라인(천장 걸이) + 큐레이터 엔딩 명패 ───── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter {
  background:
    linear-gradient(to bottom, transparent 6.5%, rgba(60,56,50,.07) 6.5%, rgba(60,56,50,.07) 6.9%, transparent 6.9%),
    radial-gradient(54% 62% at 27% -11%, rgba(255,251,238,.92), rgba(255,251,238,0) 70%),
    radial-gradient(54% 62% at 73% -11%, rgba(255,251,238,.92), rgba(255,251,238,0) 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.006) 0 2px, transparent 2px 5px),
    linear-gradient(#eae9e4 0%, #dbdad4 55%, #cccbc5 100%);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner {
  letter-spacing: .07em; font-size: clamp(9px, 1vw, 11.5px);
}

/* ───── FOREST: 말풍선 잎꼬리 + 가지 프레임 연결감 ───── */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  content: ""; position: absolute; right: 9px; bottom: -8px; width: 16px; height: 14px; pointer-events: none; transform: rotate(28deg);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2 12 Q3 2 18 3 Q17 13 2 12 Z' fill='%237ea65c'/><path d='M5 11 Q10 7 16 4' stroke='%23557a3d' stroke-width='1' fill='none'/></svg>") no-repeat center/contain;
}

/* ───── NIGHT: 짙은 먹남색 별빛 명패 + 또렷한 5각별(아이콘) ───── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(rgba(42,52,100,.94), rgba(28,38,82,.94)) !important;
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook::before {
  width: 12px; height: 12px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 l1.7 4.9 5.2 0 -4.2 3.1 1.6 4.9 -4.3-3 -4.3 3 1.6-4.9 -4.2-3.1 5.2 0 Z' fill='%23f4edd8'/></svg>") no-repeat center/contain;
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 l1.7 4.9 5.2 0 -4.2 3.1 1.6 4.9 -4.3-3 -4.3 3 1.6-4.9 -4.2-3.1 5.2 0 Z' fill='%23f6dd8f'/></svg>") no-repeat center/contain;
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter.ending-as-pb--ic .pb-ending-corner::before {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 l1.7 4.9 5.2 0 -4.2 3.1 1.6 4.9 -4.3-3 -4.3 3 1.6-4.9 -4.2-3.1 5.2 0 Z' fill='%23f6dd8f'/></svg>") no-repeat center/contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL-4 (5스킨 구조적 차별화): 말풍선/버튼 실루엣·페이지 구조를 실제로 바꿔 "구조만 봐도 테마" 읽히게.
   .pb--imagecenter 한정·CSS/pseudo/clip-path/SVG만. cozy 빨간 리본 제거. split 무영향·그림 크기/var 보존.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───── COZY: 빨간 리본 제거 → 채도 낮은 측면 천 탭 + 책등 거터(열린 책 구조) ───── */
/* pb-page::before(기존 빨간 리본) 재정의 = 우측에서 13px만 나온 살구/브라운 천 탭(책 사이 끼운 느낌) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; top: 40%; right: -12px; left: auto; bottom: auto; width: 13px; height: 42px; z-index: 2; pointer-events: none;
  background: linear-gradient(#d9b485, #caa06d);
  border: 1px solid rgba(150,112,62,.4); border-left: none; border-radius: 0 4px 4px 0;
  box-shadow: 1px 1px 2px rgba(120,90,50,.2); filter: none;
}
/* 페이지 = 좌측 책등 거터(부드러운·강한 접힘선 X) + 종이결(책장 두께/넘김은 D9-FINAL-3 유지) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    linear-gradient(90deg, rgba(120,90,40,.13) 0, rgba(120,90,40,.03) 4%, transparent 9%),
    repeating-linear-gradient(135deg, rgba(120,90,40,.014) 0 1px, transparent 1px 7px),
    linear-gradient(#fdf7ea, #f6ebd2);
}

/* ───── PAPER: 말풍선 = 또렷한 dog-ear(접힘 + 그림자, 사각형 탈피) + 테이프 유지 + 제본 strip 밴드 통합 ───── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 8px 2px 10px 4px;
}
/* dog-ear = 접힌 삼각형(뒷면 종이색) + 접힘 그림자 → 확실히 보이는 메모 모서리 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; pointer-events: none;
  background: linear-gradient(225deg, #e6d6ad 0 50%, rgba(170,145,95,.35) 50% 54%, transparent 54%);
  box-shadow: -1px 1px 2px rgba(120,95,50,.25); border: none; border-bottom-left-radius: 3px;
}
/* 제본 strip 밴드 = 좌측 0~30px 약간 다른 종이 톤(타공·코일이 이 밴드 위) → 페이지와 한 구조 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  background:
    linear-gradient(90deg, rgba(150,120,75,.08) 0 30px, transparent 30px),
    linear-gradient(90deg, transparent 29px, rgba(150,110,70,.18) 29px 30px, transparent 30px),
    repeating-linear-gradient(0deg, rgba(120,100,60,.02) 0 1px, transparent 1px 26px),
    linear-gradient(90deg, rgba(120,98,52,.14) 0, rgba(120,98,52,.04) 22px, transparent 30px),
    repeating-linear-gradient(94deg, rgba(120,100,60,.026) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #f8efcd, #ebdfba) !important;
}

/* ───── GALLERY: 3층(벽·매트·작품창) 분리 + 걸이 와이어 + 캡션 플레이트 ───── */
/* 작품 창 = 매트 안쪽으로 살짝 들어간 recess(이중선 + 가장자리 inset) → 벽에 걸린 액자 구조 */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  inset: 11px; border: 1px solid rgba(120,116,108,.55); border-radius: 1px;
  box-shadow: 0 0 0 5px #f7f4ec, 0 0 0 6px rgba(150,146,138,.3), inset 0 1px 5px rgba(60,56,50,.12);
}
/* 픽처레일 → 매트로 짧은 걸이 와이어 2가닥(전시 구조). 페이지 상단 바깥 작은 영역만. */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 54px; height: 15px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(63deg, transparent 47%, rgba(96,92,82,.6) 47%, rgba(96,92,82,.6) 53%, transparent 53%) no-repeat left top/27px 100%,
    linear-gradient(-63deg, transparent 47%, rgba(96,92,82,.6) 47%, rgba(96,92,82,.6) 53%, transparent 53%) no-repeat right top/27px 100%;
}
/* 캡션 플레이트 = 상단 짧은 가이드 라인(전시 캡션 신호) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-top: 2px solid rgba(150,146,138,.5);
}

/* ───── FOREST: 하단 양쪽 풀잎(프레임 연결) + 버튼 잎/표지판 실루엣(clip-path 한쪽 끝 뾰족) ───── */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  content: ""; position: absolute; right: 8px; bottom: -1px; left: auto; top: auto; width: 34px; height: 15px; pointer-events: none; opacity: .5; z-index: 2;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 16'><g fill='none' stroke='%236d8a4f' stroke-width='2' stroke-linecap='round'><path d='M30 16 Q32 8 27 3'/><path d='M23 16 Q23 7 19 5'/><path d='M17 16 Q15 9 19 5'/><path d='M9 16 Q11 9 7 4'/></g></svg>") no-repeat right bottom/contain;
}
/* 버튼 = 잎사귀/숲 표지판 실루엣: 오른쪽 끝을 뾰족하게(clip-path) → 사각 버튼 탈피. 잎 아이콘은 좌측 유지. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right: 22px !important;
  border-radius: 10px 0 0 10px !important;
}

/* ───── NIGHT: 더 짙은 먹남색 버튼(glow만) + 달빛 halo 페이지 + 크림/연금 보더 말풍선 ───── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-page {
  border: 1px solid rgba(228,218,176,.5);
  box-shadow: 0 4px 16px rgba(16,14,44,.42), 0 0 26px rgba(150,162,235,.3);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(216,202,150,.55); border-radius: 9px;
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(rgba(36,46,92,.95), rgba(24,32,72,.95)) !important;
  border: 1.2px solid rgba(216,200,142,.62) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 7px rgba(150,168,235,.18) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL-5 (실루엣·재질·UI 통합): 말풍선/버튼 외곽을 clip-path/비대칭으로 과감히 차별화 →
   "외곽만 봐도 / 버튼만 잘라도 스킨 구분". .pb--imagecenter 한정·CSS/pseudo/clip-path/SVG만.
   cozy 빨간 리본 없음. split 무영향·그림 크기/var 보존.
   ════════════════════════════════════════════════════════════════════════════ */

/* ───── COZY: 두꺼운 양장책(3겹 단면) + 측면 천 탭 보강 + 말풍선 천 패치(접힌 모서리) + 천 탭 버튼 ───── */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page {
  box-shadow:
    0 3px 0 -1px #e9dcbe, 0 6px 0 -2px #e1d2af, 0 9px 0 -3px #d9c8a3,
    0 13px 18px rgba(120,90,40,.2), inset 0 1px 0 rgba(255,255,255,.45);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  top: 37%; right: -3px; width: 16px; height: 50px; border-radius: 3px;
  background: linear-gradient(#d8b07e, #c79a64);
  border: 1px solid rgba(150,112,62,.45);
  box-shadow: 2px 2px 3px rgba(120,90,50,.3);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 16px 14px 4px 15px; border-color: rgba(198,152,92,.55);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; pointer-events: none;
  background: linear-gradient(45deg, #efd9b0 0 50%, transparent 50%);
  box-shadow: -1px -1px 2px rgba(150,110,60,.22); border-top-left-radius: 4px;
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  border-radius: 11px 11px 4px 11px !important;
  box-shadow: 0 1px 2px rgba(150,110,60,.14), inset 0 -1px 1px rgba(150,110,60,.1) !important;
}

/* ───── PAPER: 버튼 인덱스 탭 비대칭(좌 각 / 우 둥) + 가로 ruling 더 옅게 + 코너 들림 명확 ───── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  border-radius: 2px 10px 10px 2px !important;
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  width: 26px; height: 26px;
  background: linear-gradient(315deg, #ead9b2 42%, rgba(160,138,90,.6) 49%, transparent 53%);
}

/* ───── GALLERY: 말풍선 = 각진 전시 플레이트(flat radius 1) + 버튼 각진 명패 ───── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border-radius: 1px;
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  border-radius: 1px !important;
}

/* ───── FOREST: 말풍선 = 잎 실루엣(clip-path 우측 뾰족) — 얹은 잎 아이콘 제거(본체가 잎) ───── */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
  border-radius: 14px 0 0 14px;
  padding-right: 26px;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before,
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  display: none;
}

/* ───── NIGHT: 달빛 명패 통일 — 버튼 상단 sheen + 말풍선 이중 보더(연금 외/남색 내) ───── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  border: 1px solid rgba(218,204,152,.6); border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 0 0 2px rgba(40,52,104,.32);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: linear-gradient(rgba(40,50,98,.95) 0%, rgba(26,34,76,.95) 48%, rgba(20,28,68,.95) 100%) !important;
  border-radius: 9px !important;
  box-shadow: 0 0 6px rgba(150,168,235,.16), inset 0 1px 0 rgba(184,194,238,.2) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   D9-FINAL-6 (forest 마지막 보정 · 5스킨 마감): forest만 수정. cozy/paper/gallery/night 무변경.
   ① 말풍선 = 잎 clip-path 폐기 → 안정적 비대칭 둥근(외곽 온전·가독 우선). ② 하단 풀 군집 강화(좌 풍성/우 작게).
   .pb--imagecenter 한정·split 무영향·picturebookBodyBox/진하기/글씨색/이동·리사이즈 보존.
   ════════════════════════════════════════════════════════════════════════════ */
/* 1) 말풍선 = 비대칭 둥근(우측 꼬리/clip 제거). 작은 잎 포인트는 좌상단에 절제 유지. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay {
  clip-path: none;
  border-radius: 16px 16px 16px 6px;
  padding: 10px 16px;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::before {
  display: block; content: ""; position: absolute; top: -6px; left: 9px; width: 15px; height: 11px; pointer-events: none; transform: rotate(-16deg);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'><path d='M2 12 Q3 2 18 3 Q17 13 2 12 Z' fill='%237ea65c'/><path d='M5 11 Q10 7 16 4' stroke='%23557a3d' stroke-width='1' fill='none'/></svg>") no-repeat center/contain;
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-stage__body-overlay::after {
  display: none;
}
/* 2) 하단 좌측 = 더 풍성한 풀잎 2군집 + 작은 잎(손그림 가는 잎·비대칭) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after {
  left: 6px; bottom: -1px; width: 64px; height: 27px; opacity: .58;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'><g fill='none' stroke='%236d8a4f' stroke-width='2' stroke-linecap='round'><path d='M6 28 Q3 13 9 4'/><path d='M12 28 Q12 11 17 6'/><path d='M18 28 Q21 14 16 5'/><path d='M24 28 Q22 16 28 9'/><path d='M41 28 Q39 18 44 12'/><path d='M47 28 Q48 17 44 12'/><path d='M53 28 Q51 19 56 14'/></g><path d='M30 28 Q31 19 39 18 Q37 27 30 28 Z' fill='%237ea65c'/></svg>") no-repeat left bottom/contain;
}
/* 3) 하단 우측 = 더 작고 낮은 풀잎 군집 */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before {
  right: 7px; bottom: -1px; left: auto; top: auto; width: 30px; height: 15px; opacity: .42;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'><g fill='none' stroke='%236d8a4f' stroke-width='2' stroke-linecap='round'><path d='M8 16 Q6 8 11 4'/><path d='M14 16 Q14 7 18 5'/><path d='M20 16 Q22 9 18 4'/></g></svg>") no-repeat right bottom/contain;
}
/* 4) 모바일 = 하단 풀 감산(우측 숨김·좌측 약화) */
@media (max-width: 600px) {
  body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::before { display: none; }
  body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter .pb-page::after { width: 46px; height: 20px; opacity: .45; }
}

body[data-pb-theme="cozy-storybook"]:not(.edit-mode-active)     .scene-screen--pb.pb--imagecenter .pb-stage__title-overlay,
body[data-pb-theme="paper-storybook"]:not(.edit-mode-active)    .scene-screen--pb.pb--imagecenter .pb-stage__title-overlay,
body[data-pb-theme="gallery-picturebook"]:not(.edit-mode-active) .scene-screen--pb.pb--imagecenter .pb-stage__title-overlay,
body[data-pb-theme="forest-storybook"]:not(.edit-mode-active)   .scene-screen--pb.pb--imagecenter .pb-stage__title-overlay,
body[data-pb-theme="night-story"]:not(.edit-mode-active)        .scene-screen--pb.pb--imagecenter .pb-stage__title-overlay { display: none; }

/* ── D7-5 최종: imageCenter 그림 흰 박스 제거 — 기본 .pb-illust{#fffefa}(특이도 0,4,0)를
   5스킨 imageCenter 전용(0,5,1)으로 덮음. contain 유지·cover 금지·자르기 없음. 여백=테마 무대색. ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust {
  background-color: transparent !important;
}

/* ════════ D7-6 (밸런스 후보 · 미커밋): 그림 조금 더 크게 + 살짝 아래 + 위 얇은 테마 여백 +
   하단 버튼 영역 축소. 5스킨 imageCenter 한정. 본문 좌표/contain/흰배경제거/pb-tone무력화(D7-5)는 유지.
   ⚠ cover/자르기/무비형 꽉채움 금지 — 그림 ~88% 선에서 멈춤. ════════ */
/* 1) 그림 영역 ↑ / 하단 버튼 영역 ↓ : 8.4:1.6 → 8.9:1.1 (버튼 최대 3개 확정 → 하단 더 얇게). 9.0:1.0↑ 금지 */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-frame,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-frame {
  grid-template-rows: minmax(0, 8.9fr) minmax(0, 1.1fr);
}
/* 2) 위 얇은 테마 여백(~3%) + 그림 살짝 아래. contain 유지(cover/자르기 금지) */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-stage .pb-illust {
  inset: 3% 0 0 0;
  background-position: center 60%;
}
/* 3) 하단 버튼 영역 패딩 최소(얇게) — 라벨 높이는 유지 */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-text--bottom-only,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-text--bottom-only {
  padding: 2px 10px;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-text__actions,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-text__actions {
  padding: 2px 14px;
}

/* ════════ D7-7 (imageCenter 엔딩 · 미커밋): 엔딩 마크 = 그림 위 작은 코너 배지(테마톤).
   imageCenter 엔딩 한정(.ending-as-pb--ic) → split/legacy 엔딩 무영향. 그림/말풍선/버튼/ pb-tone무력화는
   .pb--imagecenter라 D7-5/6 자동 적용(시스템 버튼은 choice-v03--picturebook로 라벨화). ════════ */
.pb--imagecenter.ending-as-pb--ic .pb-stage .pb-ending-corner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  font-size: clamp(10px, 1.1vw, 12.5px); font-weight: 600;
  background: rgba(255,255,255,.62); border: 1px solid rgba(0,0,0,.08); color: #3a342a;
}
.pb--imagecenter.ending-as-pb--ic .pb-stage .pb-ending-corner[data-true-end="1"] {
  box-shadow: inset 0 0 0 1px rgba(212,160,23,.55);
}
/* 코너 배지 = 스킨 톤 */
body[data-pb-theme="cozy-storybook"]     .ending-as-pb--ic .pb-ending-corner { background: rgba(253,247,234,.86); border-color: rgba(230,200,150,.6); color: #5a4630; }
body[data-pb-theme="paper-storybook"]    .ending-as-pb--ic .pb-ending-corner { background: rgba(245,238,222,.9); border-color: rgba(194,171,130,.55); color: #43321c; }
body[data-pb-theme="gallery-picturebook"] .ending-as-pb--ic .pb-ending-corner { background: rgba(255,255,255,.7); border-color: rgba(180,180,176,.6); color: #3a3a38; }
body[data-pb-theme="forest-storybook"]   .ending-as-pb--ic .pb-ending-corner { background: rgba(223,234,208,.85); border-color: rgba(174,195,148,.6); color: #3a4a2e; }
body[data-pb-theme="night-story"]        .ending-as-pb--ic .pb-ending-corner { background: rgba(30,40,75,.82); border-color: rgba(120,134,190,.5); color: #eef1ff; }

/* ── D7-5 최종: 행동라벨 "행동 N개 ↓"는 감상에서 숨김(패널 헤더감 제거). 편집은 유지. ── */
body[data-pb-theme="cozy-storybook"]:not(.edit-mode-active)     .scene-screen--pb.pb--imagecenter .pb-text__actions-label,
body[data-pb-theme="paper-storybook"]:not(.edit-mode-active)    .scene-screen--pb.pb--imagecenter .pb-text__actions-label,
body[data-pb-theme="gallery-picturebook"]:not(.edit-mode-active) .scene-screen--pb.pb--imagecenter .pb-text__actions-label,
body[data-pb-theme="forest-storybook"]:not(.edit-mode-active)   .scene-screen--pb.pb--imagecenter .pb-text__actions-label,
body[data-pb-theme="night-story"]:not(.edit-mode-active)        .scene-screen--pb.pb--imagecenter .pb-text__actions-label { display: none !important; }

/* ── D7-5 최종: pb-tone(본문 카드/색계열) 무력화 — 5스킨 imageCenter에서 스킨이 유일 기준.
   pb-tone.css(.scene-screen--pb .pb-frame[class*="pb-tone-color--"]…)보다 특이도 높게 덮음.
   legacy/split/text에는 영향 없음(5스킨×imagecenter 한정). ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"],
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"],
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"],
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"],
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] {
  background: transparent !important; box-shadow: none !important;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after {
  content: none !important; background: none !important; border: none !important; box-shadow: none !important;
}
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] .pb-text__actions .choice-v03--picturebook { background: #f6dca8 !important; border-color: #e6c688 !important; color: #5a3c1e !important; }
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] .pb-text__actions .choice-v03--picturebook { background: #ece0c4 !important; border-color: #c2ab82 !important; color: #43321c !important; }
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] .pb-text__actions .choice-v03--picturebook { background: rgba(255,255,255,.16) !important; border-color: rgba(120,120,116,.5) !important; color: #3a3a38 !important; }
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] .pb-text__actions .choice-v03--picturebook { background: #dfead0 !important; border-color: #aec394 !important; color: #3a4a2e !important; }
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] .pb-text__actions .choice-v03--picturebook { background: rgba(60,74,130,.72) !important; border-color: #5a68a0 !important; color: #f2f5ff !important; }

/* ── 미세조정 2: gallery 라벨 = 전시 무대용 절제(투명/얇은선) ── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: rgba(255,255,255,.16); border-color: rgba(120,120,116,.5); color: #3a3a38;
}
/* ── 미세조정 3+4: night divider 제거 + 라벨 대비 보강(웹버튼화 방지) ── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter .pb-text__actions[data-count] .choice-v03--picturebook {
  background: rgba(60,74,130,.72); border-color: #5a68a0; color: #f2f5ff;
}

/* ── split = B 최소 보완 (신규 5키, 호환용 — 과한 투자 X) ── */
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--split .pb-page,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--split .pb-page,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--split .pb-page,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--split .pb-page,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--split .pb-page { box-shadow: 0 2px 12px rgba(120,90,40,.14); border: none; }
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--split .pb-frame,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--split .pb-frame,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--split .pb-frame,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--split .pb-frame,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--split .pb-frame { gap: 4px; padding: 4px; }
body[data-pb-theme="cozy-storybook"]     .scene-screen--pb.pb--split .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="paper-storybook"]    .scene-screen--pb.pb--split .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--split .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="forest-storybook"]   .scene-screen--pb.pb--split .pb-text__actions[data-count] .choice-v03--picturebook,
body[data-pb-theme="night-story"]        .scene-screen--pb.pb--split .pb-text__actions[data-count] .choice-v03--picturebook { box-shadow: none; }

/* ── 편집 가이드 약화 (신규 5키): 감상 시 safe-area/드래그 핸들 숨김(이미 JS hidden이나 보강) ── */
body[data-pb-theme="cozy-storybook"]:not(.edit-mode-active)     .scene-screen--pb .pb-body-handle,
body[data-pb-theme="paper-storybook"]:not(.edit-mode-active)    .scene-screen--pb .pb-body-handle,
body[data-pb-theme="gallery-picturebook"]:not(.edit-mode-active) .scene-screen--pb .pb-body-handle,
body[data-pb-theme="forest-storybook"]:not(.edit-mode-active)   .scene-screen--pb .pb-body-handle,
body[data-pb-theme="night-story"]:not(.edit-mode-active)        .scene-screen--pb .pb-body-handle { display: none; }

/* ════════════════════════════════════════════════════
   DESIGN-SYSTEM-V1 D7-3 (2026-06-19): 세로 화면 가로 권장 배지 (신규 5스킨)
   ─────────────────────────────────────────────────────
   · 조건: 세로 화면(@media max-aspect-ratio:1/1) + landscape 작품 + 감상 모드 + 신규 5키.
   · 작고 반투명한 안내 배지(상단). 강제 차단·닫기 없음. pointer-events:none(감상/캡처 무방해).
   · portrait 작품·legacy 6키·편집 모드·텍스트/무비/체험전시에는 적용 안 됨(셀렉터로 제외).
   · CSS only(body::before content). JS·DOM·저장 무변경.
   ════════════════════════════════════════════════════ */
@media (max-aspect-ratio: 1/1) {
  body[data-page-orientation="landscape"]:not(.edit-mode-active)[data-pb-theme="cozy-storybook"]::before,
  body[data-page-orientation="landscape"]:not(.edit-mode-active)[data-pb-theme="paper-storybook"]::before,
  body[data-page-orientation="landscape"]:not(.edit-mode-active)[data-pb-theme="gallery-picturebook"]::before,
  body[data-page-orientation="landscape"]:not(.edit-mode-active)[data-pb-theme="forest-storybook"]::before,
  body[data-page-orientation="landscape"]:not(.edit-mode-active)[data-pb-theme="night-story"]::before {
    content: "📱 가로로 보면 그림책이 더 크게 보여요";
    position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap;
    background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.18);
    padding: 5px 13px; border-radius: 999px;
    pointer-events: none; z-index: 9000; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
}

/* ════════════════════════════════════════════════════════════
   W9 (v4): 장면 그림 액션 3개 균등 grid (바꾸기/삭제/그리기)
   사용자 요청 — 가로 균등 배치로 공간 낭비 제거.
   ════════════════════════════════════════════════════════════ */
.edit-pb-image-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.edit-pb-image-actions > .edit-toggle {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  padding: 7px 4px;
}
.edit-pb-image-actions > .edit-toggle:disabled {
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   W9 (v4): HUD maker-return-bar 다듬기 모드 액션 통합.
   사용자 보고 "공간 낭비 — 상단을 마감 편집 중 라인으로 합쳐"
   → 인스펙터 _editActionsHtml 폐기, 4개 액션 다 이 라인으로.
   ════════════════════════════════════════════════════════════ */
.maker-return-bar--editing {
  background: linear-gradient(180deg, #fff8e6 0%, #fdf2d8 100%);
  border-bottom: 1px solid rgba(198,111,74,0.3);
}
.maker-return-bar--editing .maker-return-label {
  color: #c66f4a;
  font-weight: 600;
}
.maker-return-bar--editing .maker-return-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.maker-return-bar--editing .maker-return-btn {
  padding: 6px 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.85);
  border: 0.5px solid rgba(120,90,50,0.3);
  border-radius: 6px;
  color: #2b1f10;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.maker-return-bar--editing .maker-return-btn:hover {
  background: #fff;
  border-color: rgba(120,90,50,0.5);
}
.maker-return-bar--editing .maker-return-btn--test {
  background: #c66f4a;
  color: #fff;
  border-color: #c66f4a;
  font-weight: 500;
}
.maker-return-bar--editing .maker-return-btn--test:hover {
  background: #b65d3a;
  border-color: #b65d3a;
}
.maker-return-bar--editing .maker-return-btn--save {
  background: rgba(74,144,217,0.12);
  border-color: rgba(74,144,217,0.5);
  color: #185fa5;
  font-weight: 500;
}
.maker-return-bar--editing .maker-return-btn--save:hover {
  background: rgba(74,144,217,0.2);
}
.maker-return-bar--editing .maker-return-btn--save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   W9 (v5): 페이지 방향 + 하위 모드 가로 나란히 (한 줄).
   사용자 요청 — 두 토글이 같은 행에 들어와 공간 절약.
   ════════════════════════════════════════════════════════════ */
.edit-pb-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.edit-pb-row-pair > .edit-row--pair-cell {
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   W9 (v8): 사진 편집 모드 — 사용자 사진 크기/위치 조정.
   사용자 결정: 8 handle (모서리 4 + 변 4) + 드래그. 데스크탑 수준.
   진입: 인스펙터 "✂️ 크기/위치" 버튼.
   완료: ✓ 완료 = 저장, ✕ 취소 = 변경 무시, ↺ 되돌리기 = 기본값으로.
   ════════════════════════════════════════════════════════════ */

/* 진입 시 viewer-frame 위 dim overlay (배경 어둡게) */
.pb-image-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
/* 편집 중인 영역 — viewer-frame 위 dim overlay */
body.pb-image-editing .pb-illust {
  position: relative;
  z-index: 201;
  /* W9 (v17): 편집 중엔 overflow visible — 사진/handle이 영역 밖으로 나가도 보임.
     dim mask(box-shadow)는 영역 둘레에 있어 영역 밖 사진도 어두워진 채 보임. */
  overflow: visible;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
/* W9 (v18): 사용자 결정 — 사진/handle이 인스펙터/HUD 위로도 나갈 수 있게.
   chain 전체 overflow visible + stage-wrap z-index 지정. */
body.pb-image-editing #stage-wrap,
body.pb-image-editing #viewer-frame,
body.pb-image-editing .scene-screen,
body.pb-image-editing .pb-page,
body.pb-image-editing .pb-frame {
  overflow: visible;
}
/* stage-wrap이 인스펙터/HUD보다 위 layer로 (편집 중만) */
body.pb-image-editing #stage-wrap {
  z-index: 999;
}
/* W9 (v10): 모드 A — 점선 박스를 사진 wrapper에 부착 (사진 자체 둘레) */
body.pb-image-editing--transform .pb-illust__photo {
  outline: 2px dashed rgba(255, 200, 100, 0.95);
  outline-offset: -1px;
  cursor: move;
  /* W9 (v17): 편집 중 handle이 wrapper 밖으로 나가도 보이게 */
  overflow: visible;
}
/* W9 (v14): crop이 있으면 wrapper outline 끄고 cropHost에 점선 + handle.
   = 잘린 영역 둘레로 정확. */
body.pb-image-editing--transform .pb-illust__photo:has(.js-pb-img-crop-host) {
  outline: none;
  cursor: default;
}
.pb-img-crop-host {
  outline: 2px dashed rgba(255, 200, 100, 0.95);
  outline-offset: -1px;
  cursor: move;
  /* handle이 박스 밖에 있어도 보이게 */
  overflow: visible;
}
body.pb-image-editing--transform .pb-illust__photo .pb-illust__inner {
  pointer-events: none;  /* 사용자가 사진 위 어디 클릭해도 wrapper로 이벤트 */
}
/* 자르기 모드는 wrapper outline 없음 (crop overlay가 표시) */
body.pb-image-editing--crop .pb-illust__photo {
  cursor: default;
}

/* 8 handles — 모서리 4 + 변 4 */
.pb-img-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #c66f4a;
  border-radius: 50%;
  z-index: 202;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 80ms;
  /* v36 태블릿: 핸들 터치 시 브라우저 scroll/zoom 가로채지 못하게 */
  touch-action: none;
}
/* v36 태블릿: 사진/크롭 박스 드래그 영역에도 동일 적용 */
body.pb-image-editing .pb-illust__photo,
body.pb-image-editing .pb-img-crop-host,
body.pb-image-editing .js-pb-crop-box {
  touch-action: none;
}
.pb-img-handle:hover {
  transform: scale(1.2);
}
/* 모서리 4개 */
.pb-img-handle--nw { top: -8px;    left: -8px;    cursor: nwse-resize; }
.pb-img-handle--ne { top: -8px;    right: -8px;   cursor: nesw-resize; }
.pb-img-handle--sw { bottom: -8px; left: -8px;    cursor: nesw-resize; }
.pb-img-handle--se { bottom: -8px; right: -8px;   cursor: nwse-resize; }
/* 변 4개 */
.pb-img-handle--n  { top: -8px;    left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pb-img-handle--s  { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pb-img-handle--w  { top: 50%; left: -8px;  transform: translateY(-50%); cursor: ew-resize; }
.pb-img-handle--e  { top: 50%; right: -8px; transform: translateY(-50%); cursor: ew-resize; }
/* hover scale은 변 handles에선 translate 함께 처리 */
.pb-img-handle--n:hover, .pb-img-handle--s:hover { transform: translateX(-50%) scale(1.2); }
.pb-img-handle--w:hover, .pb-img-handle--e:hover { transform: translateY(-50%) scale(1.2); }

/* 컨트롤 바 — viewer-frame 우상단 또는 하단 */
.pb-img-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 203;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(43, 31, 16, 0.92);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.pb-img-ctrl-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pb-img-ctrl-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}
.pb-img-ctrl-btn--primary {
  background: #c66f4a;
  border-color: #c66f4a;
  font-weight: 500;
}
.pb-img-ctrl-btn--primary:hover {
  background: #b65d3a;
  border-color: #b65d3a;
}
.pb-img-ctrl-btn--danger {
  color: #ff9a9a;
}

/* ════════════════════════════════════════════════════════════
   W9 (v9): 사진 자르기 모드 (crop) 오버레이.
   사진은 전체 보이고, 자르기 영역만 또렷이 + 잘릴 부분은 어둡게 hint.
   ════════════════════════════════════════════════════════════ */
.pb-crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 201;
  pointer-events: none;
}
/* 4 mask 영역 = 잘릴 부분 어둡게 */
.pb-crop-mask {
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
/* 자르기 박스 = 또렷이 (점선) + handles */
.pb-crop-box {
  position: absolute;
  border: 2px dashed rgba(255, 200, 100, 0.95);
  pointer-events: auto;
  cursor: move;
  background: transparent;
}
.pb-crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid #c66f4a;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: auto;
  z-index: 1;
}
.pb-crop-handle--nw { top: -7px;    left: -7px;    cursor: nwse-resize; }
.pb-crop-handle--ne { top: -7px;    right: -7px;   cursor: nesw-resize; }
.pb-crop-handle--sw { bottom: -7px; left: -7px;    cursor: nesw-resize; }
.pb-crop-handle--se { bottom: -7px; right: -7px;   cursor: nwse-resize; }
.pb-crop-handle--n  { top: -7px;    left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pb-crop-handle--s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pb-crop-handle--w  { top: 50%; left: -7px;  transform: translateY(-50%); cursor: ew-resize; }
.pb-crop-handle--e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }

/* 컨트롤 바에 모드 라벨 추가 */
.pb-img-ctrl-mode {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255,255,255,0.2);
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-1A (2026-06-23): 그림책 imageCenter 엔딩 분위기(해피/새드)
   ─────────────────────────────────────────────────────────────
   · 최종안 B+(절제 stage-forward): 무드를 "무대(letterbox=.scene-screen--pb.pb--imagecenter
     배경)"만으로 표현. 페이지/프레임/매트/본문/말풍선/버튼/장식 = 정본(D9-FINAL~6) 무수정
     → 정본 페이지 공예(책더미·스프링·매트·night 크림페이지) 100% 보존, 학생 그림 불변.
   · 범위 잠금: body[data-pb-theme="..5키.."] .scene-screen--pb.pb--imagecenter[data-ending-mood]
     → 그림책 imageCenter 엔딩에만. 비-그림책은 body data-pb-theme 삭제로 2중 차단.
   · 회귀 0: data-ending-mood 없으면 어떤 규칙도 매칭 X = 정본 무대 그대로.
   · 특이도: 정본 무대 규칙(클래스2)에 [data-ending-mood] 1속성 추가 → 자연 우위(!important 불요).
   · 공통 색필터 금지: 각 테마 고유 팔레트로 happy/sad 번역. happy=밝고 따뜻/열림, sad=차분·여운.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. COZY 포근한 동화책 — 따뜻한 크림 무대 ── */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="happy"] {
  background:
    radial-gradient(125% 95% at 50% 0%, rgba(255,246,221,.78), rgba(255,246,221,0) 64%),
    repeating-linear-gradient(0deg, rgba(150,110,60,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(150,110,60,.012) 0 1px, transparent 1px 4px),
    linear-gradient(#f9efd8, #f1e3c0);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="sad"] {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(236,228,212,.38), rgba(236,228,212,0) 60%),
    repeating-linear-gradient(0deg, rgba(120,100,70,.018) 0 1px, transparent 1px 4px),
    linear-gradient(#dcd2bc, #d1c5a7);
}

/* ── 2. PAPER 종이 동화책 — 종이결 무대 ── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="happy"] {
  background:
    radial-gradient(125% 92% at 50% 0%, rgba(254,250,240,.72), rgba(254,250,240,0) 64%),
    repeating-linear-gradient(115deg, rgba(120,108,80,.018) 0 1px, transparent 1px 8px),
    linear-gradient(#f1ead4, #e7dec5);
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="sad"] {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(244,238,224,.32), rgba(244,238,224,0) 60%),
    repeating-linear-gradient(115deg, rgba(110,95,60,.026) 0 1px, transparent 1px 8px),
    linear-gradient(#dbd3bc, #cfc6ab);
}

/* ── 3. GALLERY 전시 그림책 — 전시벽 조도 ── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="happy"] {
  background:
    radial-gradient(54% 62% at 27% -11%, rgba(255,253,246,.96), rgba(255,253,246,0) 70%),
    radial-gradient(54% 62% at 73% -11%, rgba(255,253,246,.96), rgba(255,253,246,0) 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.005) 0 2px, transparent 2px 5px),
    linear-gradient(#f1f0ea 0%, #e6e5df 55%, #d9d8d2 100%);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="sad"] {
  background:
    radial-gradient(60% 64% at 50% 30%, rgba(238,230,214,.14), rgba(238,230,214,0) 66%),
    linear-gradient(#6a655c 0%, #565049 55%, #474238 100%);
}

/* ── 4. FOREST 숲속 그림책 — 숲 빛/안개 ── */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="happy"] {
  background:
    radial-gradient(74% 64% at 15% -8%, rgba(255,248,200,.7), rgba(255,248,200,0) 58%),
    radial-gradient(20% 16% at 82% 12%, rgba(94,125,74,.05), rgba(94,125,74,0) 70%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.028) 0 2px, transparent 2px 18px),
    linear-gradient(#f1f8e4, #e5f0d2);
}
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-ending-mood="sad"] {
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(214,221,210,.55), rgba(214,221,210,0) 58%),
    repeating-linear-gradient(60deg, rgba(90,108,82,.03) 0 2px, transparent 2px 18px),
    linear-gradient(#dde4d3, #cfd8c4);
}

/* ── 5. NIGHT 밤 이야기 — 밤하늘(별/달빛). 페이지는 정본 크림 유지(그림 밝게) ── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-ending-mood="happy"] {
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, rgba(255,255,255,.92) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 9%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 12%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 32% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 70% 24%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(64% 48% at 78% -2%, rgba(220,228,255,.38), rgba(220,228,255,0) 70%),
    linear-gradient(#36437e, #283360);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-ending-mood="sad"] {
  background:
    radial-gradient(1.1px 1.1px at 30% 12%, rgba(210,216,245,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 10%, rgba(210,216,245,.32) 50%, transparent 51%),
    radial-gradient(56% 42% at 80% -2%, rgba(200,210,245,.18), rgba(200,210,245,0) 70%),
    linear-gradient(#222c54, #161d3e);
}
/* (모바일 장식 감산은 기존 night @media 규칙 상속 — 무대 그라데만 사용해 추가 규칙 불요) */

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-2-PREVIEW (2026-06-23): 그림책 imageCenter 일반 장면 "이야기 단계"
   ─────────────────────────────────────────────────────────────
   · B+ 절제(stage-forward): 단계를 "바깥 무대(.scene-screen--pb.pb--imagecenter)
     배경"만으로 표현. 페이지/프레임/매트/본문/말풍선/버튼/장식/학생그림 = 정본 무수정.
   · rising(승)=조금 밝고 활기 / turning(전)=대비·깊이 증가(테마 고유 팔레트, 공통 색필터 금지·
     검정/빨강/공포 금지). 기본(attr 없음)=정본 그대로(회귀 0).
   · 범위: 일반(비엔딩) imageCenter 장면 한정. 엔딩은 data-ending-mood(별도). 편집 미리보기에서만 부착.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. COZY ── */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(125% 92% at 50% 0%, rgba(255,248,228,.6), rgba(255,248,228,0) 62%),
    repeating-linear-gradient(0deg, rgba(150,110,60,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(150,110,60,.014) 0 1px, transparent 1px 4px),
    linear-gradient(#f3e8cf, #ecdcb9);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(120,86,40,.16), rgba(120,86,40,0) 58%),
    repeating-linear-gradient(0deg, rgba(120,86,40,.02) 0 1px, transparent 1px 4px),
    linear-gradient(#d8c8a4, #c9ba90);
}

/* ── 2. PAPER ── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(125% 90% at 50% 0%, rgba(253,249,238,.55), rgba(253,249,238,0) 62%),
    repeating-linear-gradient(115deg, rgba(120,108,80,.02) 0 1px, transparent 1px 8px),
    linear-gradient(#eae3cd, #ded5bd);
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  /* 긴장 단계 — 어둡게만 X, 종이 결/섬유 대비 + 가장자리 그림자로 '잉크 밀도↑' 재료 긴장. */
  background:
    radial-gradient(135% 100% at 50% 50%, rgba(96,74,38,0) 56%, rgba(80,60,28,.2) 100%),
    repeating-linear-gradient(115deg, rgba(96,74,38,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(25deg, rgba(70,52,24,.045) 0 1px, transparent 1px 9px),
    linear-gradient(#d6cdad, #c5bb98);
}

/* ── 3. GALLERY ── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(54% 62% at 27% -11%, rgba(255,253,246,.95), rgba(255,253,246,0) 70%),
    radial-gradient(54% 62% at 73% -11%, rgba(255,253,246,.95), rgba(255,253,246,0) 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.005) 0 2px, transparent 2px 5px),
    linear-gradient(#f0efe9 0%, #e4e3dd 55%, #d6d5cf 100%);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  /* dusk 전시장(따뜻 회베이지) — night와 분리, '조명 꺼짐'처럼 안 보이게 ~12% 밝게+웜. */
  background:
    radial-gradient(48% 56% at 50% 26%, rgba(245,237,219,.34), rgba(245,237,219,0) 62%),
    linear-gradient(#8f877a 0%, #7a7164 55%, #6a6053 100%);
}

/* ── 4. FOREST ── */
/* 승: 밝고 따뜻한 녹 + 우상 햇살(REF 승=무대 밝아지고 생기↑) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(70% 60% at 86% -8%, rgba(255,247,196,.78), rgba(255,247,196,0) 56%),
    radial-gradient(22% 18% at 14% 6%, rgba(120,150,86,.08), rgba(120,150,86,0) 70%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.03) 0 2px, transparent 2px 18px),
    linear-gradient(#eef7df, #def0cc);
}
/* 전: 짙은 올리브 + 상단 캐노피 어둠(REF 전=무대 크게 어두워지고 숲이 닫힘) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  background:
    linear-gradient(180deg, rgba(48,64,36,.40) 0%, rgba(48,64,36,0) 24%),
    radial-gradient(120% 84% at 50% 110%, rgba(64,82,48,.42), rgba(64,82,48,0) 52%),
    repeating-linear-gradient(60deg, rgba(38,52,28,.08) 0 2px, transparent 2px 15px),
    linear-gradient(#9aa87d, #7e9268);
}
/* 그림 주변 매트(.pb-page)가 실제로 보이는 "숲 색" — 흰 그림(.pb-illust)은 위에서 보호.
   승=밝고 따뜻한 잎종이+넓은 그림자 / 전=짙은 올리브 매트+깊은 그림자(숲이 닫힘). */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .pb-page {
  background:
    radial-gradient(64% 52% at 86% 0%, rgba(255,247,196,.55), rgba(255,247,196,0) 62%),
    repeating-linear-gradient(60deg, rgba(94,125,74,.03) 0 1px, transparent 1px 7px),
    linear-gradient(#eff8e0, #dcecc6);
  box-shadow: 0 5px 18px rgba(60,85,45,.16), inset 0 1px 0 rgba(255,255,255,.5);
}
/* 전: 균일 암막이 아니라 "가장자리에서 어둠이 파고드는" vignette = 숲이 안쪽으로 닫혀옴.
   중앙(그림)은 상대적으로 밝게 보존, 가장자리·상단이 어두워지며 좁혀짐. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .pb-page {
  background:
    radial-gradient(120% 96% at 50% 44%, rgba(40,56,28,0) 46%, rgba(40,56,28,.16) 78%, rgba(36,50,24,.34) 100%),
    linear-gradient(180deg, rgba(40,56,28,.28) 0%, rgba(40,56,28,0) 24%),
    repeating-linear-gradient(60deg, rgba(28,40,20,.055) 0 1px, transparent 1px 7px),
    linear-gradient(#b3c096, #a3b585);
  border-color: rgba(96,118,72,.66);
  box-shadow: 0 9px 20px -7px rgba(40,58,24,.34), inset 0 0 42px 8px rgba(36,52,22,.32), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ── 5. NIGHT ── (페이지=정본 크림 유지, 무대 밤하늘만) */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(1.5px 1.5px at 14% 12%, rgba(255,255,255,.92) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 50% 9%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 12%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 32% 22%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(64% 48% at 78% -2%, rgba(220,228,255,.36), rgba(220,228,255,0) 70%),
    linear-gradient(#33407a, #26305a);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  background:
    radial-gradient(1.1px 1.1px at 30% 12%, rgba(210,216,245,.45) 50%, transparent 51%),
    linear-gradient(96deg, transparent 43%, rgba(150,168,235,.16) 50%, transparent 57%),
    radial-gradient(150% 120% at 50% -6%, #1f2850 0%, #131a3a 55%, #0b1026 100%);
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-2 ASSET-EVOLUTION (2026-06-23): 비색상 단서(C 균형안)
   ─────────────────────────────────────────────────────────────
   · 무대 "색"(위 PB-MOOD-1A/2 블록)에 더해, 테마 고유 "에셋·장식·조명·재료"가 단계에 따라
     변하는 비색상 단서를 추가. 모두 그림 바깥(.scene-ornaments z2 = 페이지 여백, box-shadow 기하,
     무대 radial 범위) — 학생 그림(.pb-illust) filter/opacity/overlay/transform 0.
   · 단서 종류: 장식 밀도/펼침/처짐(transform·opacity) · 프레임 그림자 깊이/범위(box-shadow) ·
     조명 범위/집중(무대 radial은 위 블록) · 매트 깊이.
   · 범위: 일반=[data-story-stage], 엔딩=[data-ending-mood]. 특이도(클래스2+속성1+pseudo)로 base 우위.
   ════════════════════════════════════════════════════════════════ */

/* ── COZY: 장식 밀도/펼침/처짐 + 페이지 그림자 범위 ── */
/* 승: 잎·꽃 확대+바깥 펼침, 그림자 넓고 가벼움 */
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::before { transform: scale(1.18) translate(-2px, 2px); opacity: .7; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::after  { transform: scale(1.18) translate(2px, 2px); opacity: .7; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="rising"] .picturebook-page { box-shadow: 0 6px 22px rgba(120,90,40,.15); }
/* 전: 꽃 처짐·안쪽 모임, 그림자 좁고 깊음 */
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::before { transform: scale(.9) translate(4px, -2px); opacity: .5; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::after  { transform: rotate(20deg) translateY(3px) scale(.92); opacity: .5; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-story-stage="turning"] .picturebook-page { box-shadow: 0 11px 18px -5px rgba(90,60,20,.42); }
/* 해피: 별·꽃 확대+퍼짐 */
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::before { transform: scale(1.2) translate(-2px,1px); opacity: .8; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::after  { transform: scale(1.25) translate(2px,1px); opacity: .85; }
/* 새드: 시든 꽃(처짐·작아짐)+장식 감소 */
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::before { opacity: .28; }
body[data-pb-theme="cozy-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::after  { transform: rotate(24deg) translateY(3px) scale(.82); opacity: .5; }

/* ── PAPER: 기록 요소(클립/접힘) + 종이 결/제본 그림자 ── */
/* 승: 클립·접힘 또렷 + 제본 가장자리 그림자(왼쪽 inset) */
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::before { opacity: .6; }
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::after  { opacity: .5; }
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-story-stage="rising"] .picturebook-page { box-shadow: 0 2px 8px rgba(70,50,20,.18), inset 0 0 26px rgba(120,90,40,.14), inset 7px 0 0 -5px rgba(120,98,52,.3); }
/* 전: 접힌 모서리 깊어짐 + 가장자리 그림자 대비↑ */
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::after  { transform: scale(1.5); opacity: .62; }
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-story-stage="turning"] .picturebook-page { box-shadow: 0 6px 16px -4px rgba(60,40,12,.4), inset 0 0 34px rgba(90,60,20,.26); }
/* 해피: 접힘 정돈(작게)+클립 또렷 */
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::before { opacity: .55; }
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::after  { transform: scale(.9); opacity: .4; }
/* 새드: 접힌 모서리 남고 클립 사라짐(남겨진 기록) */
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::before { opacity: .14; }
body[data-pb-theme="paper-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::after  { transform: scale(1.35); opacity: .5; }

/* ── GALLERY: 매트 그림자 깊이(조명 범위는 위 무대 radial) ── */
body[data-pb-theme="gallery-picturebook"] .pb--imagecenter[data-story-stage="rising"] .picturebook-page { box-shadow: 0 5px 16px rgba(0,0,0,.09), 0 0 0 1px #ededea; }
body[data-pb-theme="gallery-picturebook"] .pb--imagecenter[data-story-stage="turning"] .picturebook-page { box-shadow: 0 16px 30px -8px rgba(0,0,0,.4), 0 0 0 1px #d8d6cf; }
body[data-pb-theme="gallery-picturebook"] .pb--imagecenter[data-ending-mood="happy"] .picturebook-page { box-shadow: 0 5px 16px rgba(0,0,0,.08), 0 0 0 1px #efeeea; }
body[data-pb-theme="gallery-picturebook"] .pb--imagecenter[data-ending-mood="sad"] .picturebook-page { box-shadow: 0 18px 30px -8px rgba(0,0,0,.34), 0 0 0 1px #cfcdc6; }

/* ── FOREST: 잎가지 밀도/방향/처짐 (안개는 위 무대 linear) ── */
/* 승: 잎가지 확대+바깥 펼침 */
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::before { transform: scale(1.16) translate(-2px,-1px); opacity: 1; }
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::after  { transform: scale(1.16) translate(2px,-1px); opacity: .92; }
/* 전: 잎가지 한쪽 휨(rotate)·안쪽 */
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::before { transform: rotate(-8deg) scale(.96) translate(2px,1px); opacity: .9; }
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::after  { transform: rotate(8deg) scale(.9) translate(-2px,1px); opacity: .7; }
/* 해피: 잎가지 펼침(열림) */
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::before { transform: scale(1.14); opacity: 1; }
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::after  { transform: scale(1.14); opacity: .92; }
/* 새드: 잎 감소(빈 가지 인상)+한쪽만 */
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::before { opacity: .5; transform: rotate(-6deg) scale(.92); }
body[data-pb-theme="forest-storybook"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::after  { opacity: .22; }

/* ── NIGHT: 달·별무리 밀도/위치 (별밀도·빛길은 위 무대) ── */
/* 승: 별무리 또렷+퍼짐, 달 약간 크게 */
body[data-pb-theme="night-story"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::before { transform: scale(1.12); opacity: 1; }
body[data-pb-theme="night-story"] .pb--imagecenter[data-story-stage="rising"] .scene-ornaments::after  { transform: scale(1.1) translateX(-3px); opacity: 1; }
/* 전: 별무리 한쪽 모임(이동·축소)+달 그대로 */
body[data-pb-theme="night-story"] .pb--imagecenter[data-story-stage="turning"] .scene-ornaments::after  { transform: scale(.82) translateX(10px); opacity: .55; }
/* 해피: 보름달(크게)+별 또렷 */
body[data-pb-theme="night-story"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::before { transform: scale(1.18); opacity: 1; }
body[data-pb-theme="night-story"] .pb--imagecenter[data-ending-mood="happy"] .scene-ornaments::after  { opacity: 1; }
/* 새드: 작은 달(축소)+별 감소 */
body[data-pb-theme="night-story"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::before { transform: scale(.78); opacity: .6; }
body[data-pb-theme="night-story"] .pb--imagecenter[data-ending-mood="sad"] .scene-ornaments::after  { opacity: .3; }

/* ── 모바일 감산(≤480): 변조 강도 완화(핵심 단서 유지) ── */
@media (max-width: 480px) {
  body .pb--imagecenter[data-story-stage] .scene-ornaments::before,
  body .pb--imagecenter[data-story-stage] .scene-ornaments::after,
  body .pb--imagecenter[data-ending-mood] .scene-ornaments::before,
  body .pb--imagecenter[data-ending-mood] .scene-ornaments::after { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-FOREST-PROOF v2 (2026-06-23): 실제 감상 화면 "안쪽 페이지" 발전
   ─────────────────────────────────────────────────────────────
   · 편집 화면 바깥(레터박스) 큰 덩굴 폐기. 안쪽 페이지의 코너 잎 클러스터(z2)가
     기→승(자람:잎↑·안쪽으로 조금 뻗음·열매·얇은 빛)→전(같은 잎이 한쪽 기욺·낙엽·빈가지·좁은 빛)으로 연속 발전.
   · 코너 클러스터 ≤ 페이지폭 ~7%. 큰 세로 덩굴 0. 학생 그림(.pb-illust) 비침범(코너·가장자리만).
   · forest 1테마 PoC. 다른 테마 무수정. (무대 배경 색은 기존 PB-MOOD-2 rising/turning 유지=은은.)
   ════════════════════════════════════════════════════════════════ */
/* 승: 코너 잎 클러스터가 자람(잎↑·열매·얇은 빛) */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments::before { transform:none; width:104px; height:94px; opacity:1;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 96' fill='none'> <path d='M2 4 Q40 12 60 34 Q74 50 82 78' stroke='%236d8a4f' stroke-width='2.6' stroke-linecap='round'/> <g fill='%237ea65c'> <ellipse cx='22' cy='11' rx='8' ry='3.8' transform='rotate(22 22 11)'/> <ellipse cx='42' cy='21' rx='8' ry='3.8' transform='rotate(38 42 21)'/> <ellipse cx='58' cy='38' rx='7.5' ry='3.6' transform='rotate(56 58 38)'/> <ellipse cx='70' cy='56' rx='7' ry='3.4' transform='rotate(70 70 56)'/> <ellipse cx='79' cy='76' rx='6.5' ry='3.2' transform='rotate(80 79 76)'/> </g> <g fill='%238fb56c'> <ellipse cx='32' cy='8' rx='6' ry='3' transform='rotate(-8 32 8)'/> <ellipse cx='50' cy='27' rx='6' ry='3' transform='rotate(14 50 27)'/> <ellipse cx='64' cy='46' rx='5.5' ry='2.8' transform='rotate(30 64 46)'/> <ellipse cx='74' cy='66' rx='5' ry='2.6' transform='rotate(46 74 66)'/> </g> <g fill='%23e8728a'><circle cx='86' cy='80' r='3.4'/><circle cx='92' cy='84' r='2.8'/></g> <polygon points='108,2 96,2 70,60 80,60' fill='%23f3e6a8' opacity='0.4'/> </svg> ") no-repeat left top/contain; }
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments::after  { transform:none; width:96px; height:88px; opacity:.95;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 96' fill='none'> <path d='M108 4 Q70 12 50 34 Q36 50 28 78' stroke='%236d8a4f' stroke-width='2.6' stroke-linecap='round'/> <g fill='%237ea65c'> <ellipse cx='88' cy='11' rx='8' ry='3.8' transform='rotate(-22 88 11)'/> <ellipse cx='68' cy='21' rx='8' ry='3.8' transform='rotate(-38 68 21)'/> <ellipse cx='52' cy='38' rx='7.5' ry='3.6' transform='rotate(-56 52 38)'/> <ellipse cx='40' cy='56' rx='7' ry='3.4' transform='rotate(-70 40 56)'/> </g> <g fill='%238fb56c'> <ellipse cx='78' cy='8' rx='6' ry='3' transform='rotate(8 78 8)'/> <ellipse cx='60' cy='27' rx='6' ry='3' transform='rotate(-14 60 27)'/> <ellipse cx='46' cy='46' rx='5.5' ry='2.8' transform='rotate(-30 46 46)'/> </g> <g fill='%23f3b24a'><circle cx='24' cy='80' r='3.2'/></g> </svg> ") no-repeat right top/contain; }
/* 전: 같은 클러스터가 한쪽으로 기욺 + 낙엽·빈가지·좁은 빛 */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments::before { transform:none; width:112px; height:100px; opacity:.97;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' fill='none'> <path d='M2 4 Q44 14 64 42 Q78 62 84 90' stroke='%234f6838' stroke-width='2.8' stroke-linecap='round'/> <g fill='%235f7a44'> <ellipse cx='24' cy='12' rx='9' ry='3.6' transform='rotate(50 24 12)'/> <ellipse cx='44' cy='24' rx='8.5' ry='3.4' transform='rotate(56 44 24)'/> <ellipse cx='60' cy='42' rx='8' ry='3.2' transform='rotate(62 60 42)'/> <ellipse cx='72' cy='64' rx='7.5' ry='3' transform='rotate(70 72 64)'/> <ellipse cx='80' cy='86' rx='7' ry='2.8' transform='rotate(78 80 86)'/> </g> <g fill='%234f6838'> <ellipse cx='34' cy='10' rx='7' ry='3' transform='rotate(38 34 10)'/> <ellipse cx='52' cy='30' rx='6.5' ry='2.8' transform='rotate(54 52 30)'/> <ellipse cx='66' cy='52' rx='6' ry='2.6' transform='rotate(64 66 52)'/> </g> <path d='M84 90 q9 -4 16 -2' stroke='%237a6a4a' stroke-width='2.2' stroke-linecap='round'/> <ellipse cx='44' cy='96' rx='6.5' ry='3' transform='rotate(-16 44 96)' fill='%23a8783a'/> </svg> ") no-repeat left top/contain; }
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments::after  { transform:none; width:102px; height:94px; opacity:.94;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104' fill='none'> <polygon points='118,2 110,2 84,72 92,72' fill='%23d8cf94' opacity='0.34'/> <path d='M118 4 Q76 14 56 42 Q42 62 36 90' stroke='%234f6838' stroke-width='2.8' stroke-linecap='round'/> <g fill='%235f7a44'> <ellipse cx='94' cy='12' rx='9' ry='3.6' transform='rotate(-50 94 12)'/> <ellipse cx='74' cy='24' rx='8.5' ry='3.4' transform='rotate(-56 74 24)'/> <ellipse cx='56' cy='42' rx='8' ry='3.2' transform='rotate(-62 56 42)'/> <ellipse cx='44' cy='64' rx='7.5' ry='3' transform='rotate(-70 44 64)'/> </g> <g fill='%234f6838'> <ellipse cx='84' cy='10' rx='7' ry='3' transform='rotate(-38 84 10)'/> <ellipse cx='66' cy='30' rx='6.5' ry='2.8' transform='rotate(-54 66 30)'/> </g> <path d='M36 90 q-9 -4 -16 -2' stroke='%237a6a4a' stroke-width='2.2' stroke-linecap='round'/> <ellipse cx='78' cy='96' rx='6.5' ry='3' transform='rotate(14 78 96)' fill='%23a8783a'/> </svg> ") no-repeat right top/contain; }
/* ════════════════════════════════════════════════════════════════
   PB-MOOD-FOREST-5LOOP-V3 / Loop 1 (2026-06-23): 실패 제거 + REF 구조 복귀
   · 하단 전폭 풀 띠 폐기. 대신 .scene-ornaments에 코너/가장자리 작은 클러스터만
     (좌하 덤불·우측 짧은 잎·우하 새싹). 전폭 0·중앙 비움·선택지 24px 안전.
   · 선택지 옆 잎 마커 제거(REF 선택지=깔끔).
   · 같은 잎이 승=밝게 자람 / 전=어둡고 빽빽(닫힘). 무대색은 위 stage 블록.
   ════════════════════════════════════════════════════════════════ */
/* 승: 사방 잎이 자람 — 좌측 가장자리 + 좌하 덤불 + 우측 덩굴 + 우하 새싹 + 얇은 빛줄기(상단). 전폭 0·중앙 비움. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 124'><path d='M14 2 q-4 34 2 64 q5 26 -2 54' stroke='%236d8a4f' stroke-width='2.4' fill='none' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='22' cy='20' rx='8' ry='3.6' transform='rotate(-28 22 20)'/><ellipse cx='10' cy='40' rx='8' ry='3.6' transform='rotate(24 10 40)'/><ellipse cx='22' cy='62' rx='7.5' ry='3.4' transform='rotate(-26 22 62)'/><ellipse cx='12' cy='86' rx='7' ry='3.2' transform='rotate(22 12 86)'/></g><g fill='%238fb56c'><ellipse cx='16' cy='30' rx='5' ry='2.4' transform='rotate(-20 16 30)'/></g></svg>") no-repeat left -2px top 26% / 36px 120px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'><path d='M16 82 q-3 -34 6 -56' stroke='%236f9a4e' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M34 82 q0 -30 11 -48' stroke='%236f9a4e' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M52 82 q3 -24 14 -38' stroke='%236f9a4e' stroke-width='3' fill='none' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='12' cy='46' rx='9.5' ry='4.6' transform='rotate(-50 12 46)'/><ellipse cx='25' cy='30' rx='9.5' ry='4.6' transform='rotate(-40 25 30)'/><ellipse cx='38' cy='46' rx='9.5' ry='4.6' transform='rotate(-58 38 46)'/><ellipse cx='52' cy='28' rx='8.5' ry='4.2' transform='rotate(-46 52 28)'/><ellipse cx='66' cy='42' rx='8' ry='4' transform='rotate(-54 66 42)'/></g><g fill='%238fb56c'><ellipse cx='20' cy='36' rx='6' ry='3' transform='rotate(-44 20 36)'/><ellipse cx='44' cy='36' rx='6' ry='3' transform='rotate(-52 44 36)'/><ellipse cx='60' cy='34' rx='5.5' ry='2.8' transform='rotate(-50 60 34)'/></g><circle cx='47' cy='52' r='3.2' fill='%23e8728a'/><circle cx='58' cy='56' r='2.6' fill='%23f3c8cf'/></svg>") no-repeat left 3% bottom 6% / 96px 80px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 158'><path d='M32 2 q5 42 -2 82 q-5 30 2 70' stroke='%236d8a4f' stroke-width='2.4' fill='none' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='24' cy='22' rx='8.5' ry='3.8' transform='rotate(28 24 22)'/><ellipse cx='36' cy='44' rx='8.5' ry='3.8' transform='rotate(-20 36 44)'/><ellipse cx='22' cy='66' rx='8' ry='3.6' transform='rotate(24 22 66)'/><ellipse cx='34' cy='90' rx='7.5' ry='3.4' transform='rotate(-18 34 90)'/><ellipse cx='22' cy='114' rx='7' ry='3.2' transform='rotate(22 22 114)'/><ellipse cx='32' cy='136' rx='6.5' ry='3' transform='rotate(-16 32 136)'/></g><g fill='%238fb56c'><ellipse cx='28' cy='34' rx='5.5' ry='2.6' transform='rotate(24 28 34)'/></g><circle cx='26' cy='100' r='2.6' fill='%23f3b24a'/></svg>") no-repeat right -2px top 22% / 42px 156px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'><path d='M48 54 q3 -26 -6 -42' stroke='%236f9a4e' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M30 54 q0 -22 -9 -34' stroke='%236f9a4e' stroke-width='3' fill='none' stroke-linecap='round'/><g fill='%237ea65c'><ellipse cx='40' cy='22' rx='8.5' ry='4.2' transform='rotate(48 40 22)'/><ellipse cx='51' cy='34' rx='8' ry='4' transform='rotate(60 51 34)'/><ellipse cx='22' cy='26' rx='7.5' ry='3.6' transform='rotate(40 22 26)'/></g><circle cx='32' cy='36' r='2.6' fill='%23f3b24a'/></svg>") no-repeat right 3% bottom 7% / 58px 50px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><polygon points='86,2 90,8 30,86 22,82' fill='%23fff2a8' opacity='0.5'/><polygon points='78,2 82,6 40,76 34,72' fill='%23fff7c8' opacity='0.4'/></svg>") no-repeat right 9% top -1% / 88px 92px;
}
/* 전: 잎이 어둡고 빽빽해지며 좌우·상단이 page를 감싸 닫힘. 하단 양 코너 연결 + 낙엽2 + 옅은 가장자리 안개. 중앙 비움. */
body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 170'><path d='M16 2 q-6 44 2 86 q6 32 -2 72' stroke='%234f6838' stroke-width='2.8' fill='none' stroke-linecap='round'/><g fill='%235f7a44'><ellipse cx='26' cy='20' rx='9' ry='3.8' transform='rotate(-28 26 20)'/><ellipse cx='12' cy='42' rx='9' ry='3.8' transform='rotate(22 12 42)'/><ellipse cx='28' cy='64' rx='8.5' ry='3.6' transform='rotate(-24 28 64)'/><ellipse cx='14' cy='90' rx='8' ry='3.4' transform='rotate(20 14 90)'/><ellipse cx='28' cy='116' rx='7.5' ry='3.2' transform='rotate(-22 28 116)'/><ellipse cx='16' cy='142' rx='7' ry='3' transform='rotate(20 16 142)'/></g><g fill='%234f6838'><ellipse cx='20' cy='32' rx='6' ry='2.6' transform='rotate(-20 20 32)'/><ellipse cx='22' cy='102' rx='5.5' ry='2.4' transform='rotate(-20 22 102)'/></g></svg>") no-repeat left 0px top 15% / 56px 172px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 170'><path d='M34 2 q6 44 -2 86 q-6 32 2 72' stroke='%234f6838' stroke-width='2.8' fill='none' stroke-linecap='round'/><g fill='%235f7a44'><ellipse cx='24' cy='20' rx='9' ry='3.8' transform='rotate(28 24 20)'/><ellipse cx='38' cy='42' rx='9' ry='3.8' transform='rotate(-22 38 42)'/><ellipse cx='22' cy='64' rx='8.5' ry='3.6' transform='rotate(24 22 64)'/><ellipse cx='36' cy='90' rx='8' ry='3.4' transform='rotate(-20 36 90)'/><ellipse cx='22' cy='116' rx='7.5' ry='3.2' transform='rotate(22 22 116)'/><ellipse cx='34' cy='142' rx='7' ry='3' transform='rotate(-20 34 142)'/></g><g fill='%234f6838'><ellipse cx='30' cy='32' rx='6' ry='2.6' transform='rotate(20 30 32)'/><ellipse cx='28' cy='102' rx='5.5' ry='2.4' transform='rotate(20 28 102)'/></g></svg>") no-repeat right 0px top 13% / 58px 174px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'><path d='M14 78 q-3 -30 6 -50' stroke='%234f6838' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M34 78 q2 -26 12 -42' stroke='%234f6838' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M54 78 q4 -22 14 -34' stroke='%234f6838' stroke-width='3' fill='none' stroke-linecap='round'/><g fill='%235f7a44'><ellipse cx='12' cy='44' rx='9' ry='4.2' transform='rotate(-48 12 44)'/><ellipse cx='26' cy='30' rx='9' ry='4.2' transform='rotate(-38 26 30)'/><ellipse cx='40' cy='44' rx='9' ry='4.2' transform='rotate(-56 40 44)'/><ellipse cx='54' cy='30' rx='8' ry='3.8' transform='rotate(-44 54 30)'/><ellipse cx='66' cy='44' rx='7.5' ry='3.6' transform='rotate(-52 66 44)'/></g><ellipse cx='80' cy='66' rx='7' ry='3' transform='rotate(86 80 66)' fill='%23a8783a'/></svg>") no-repeat left 2% bottom 6% / 100px 80px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 76'><path d='M82 74 q3 -28 -6 -46' stroke='%234f6838' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M62 74 q-2 -24 -12 -38' stroke='%234f6838' stroke-width='3' fill='none' stroke-linecap='round'/><g fill='%235f7a44'><ellipse cx='80' cy='42' rx='9' ry='4.2' transform='rotate(48 80 42)'/><ellipse cx='66' cy='28' rx='9' ry='4.2' transform='rotate(38 66 28)'/><ellipse cx='52' cy='42' rx='8.5' ry='4' transform='rotate(56 52 42)'/><ellipse cx='40' cy='28' rx='8' ry='3.8' transform='rotate(44 40 28)'/></g><ellipse cx='16' cy='64' rx='7' ry='3' transform='rotate(96 16 64)' fill='%23a8783a'/></svg>") no-repeat right 2% bottom 6% / 90px 74px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 150'><polygon points='52,0 64,0 22,150 12,150' fill='%23f6eec2' opacity='0.34'/></svg>") no-repeat left 14% top -2% / 64px 150px,
    linear-gradient(90deg, rgba(58,74,44,.16) 0%, rgba(58,74,44,0) 11%) no-repeat left top / 100% 100%,
    linear-gradient(270deg, rgba(58,74,44,.16) 0%, rgba(58,74,44,0) 11%) no-repeat right top / 100% 100%;
}
/* Loop5 모바일 감산(≤600): forest 단계 장식 전체 ~50%↓(혼잡 방지). 무대색·vignette는 유지(단계 단서 보존). */
@media (max-width: 600px) {
  body[data-pb-theme="forest-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage] .scene-ornaments { opacity: .5; }
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-ALL-THEMES-5LOOP / Loop 1 (2026-06-23): 무드 표면 기반(승 열림 / 전 닫힘)
   ─────────────────────────────────────────────────────────────
   · forest 교훈 적용: 단계 무드는 "실제 보이는 표면"에 = cozy/paper/gallery는 .pb-page(그림 주변 매트),
     night는 무대(남색 하늘). 균일 명암변경만 금지 → 승=열림(밝고 넓은 그림자), 전=가장자리 vignette 닫힘.
   · 학생 그림(.pb-illust)·본문·선택지 불가침. 엔딩 happy/sad 미수정. 기(=base, story-stage 없음)=정본.
   · 요소 성장/긴장(.scene-ornaments)은 Loop2(승)·Loop3(전)에서 추가.
   ════════════════════════════════════════════════════════════════ */

/* ── COZY: 따뜻한 크림 매트 ── */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .pb-page {
  background:
    radial-gradient(66% 54% at 50% -2%, rgba(255,240,198,.55), rgba(255,240,198,0) 62%),
    repeating-linear-gradient(135deg, rgba(120,90,40,.012) 0 1px, transparent 1px 7px),
    linear-gradient(#fefaef, #f7ecd2);
  box-shadow: 0 5px 20px rgba(120,90,40,.14), inset 0 1px 0 rgba(255,255,255,.5);
}
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .pb-page {
  background:
    radial-gradient(130% 108% at 32% 30%, rgba(150,108,52,0) 56%, rgba(150,108,52,.07) 82%, rgba(140,98,46,.15) 100%),
    repeating-linear-gradient(135deg, rgba(120,90,40,.015) 0 1px, transparent 1px 7px),
    linear-gradient(#fbf0d8, #f4e6c6);
  box-shadow: 0 8px 18px -7px rgba(120,84,30,.24), inset -10px -13px 26px -9px rgba(134,92,40,.26), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ── PAPER: 크림 종이 매트(제본 결 유지) ── */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .pb-page {
  background:
    radial-gradient(60% 50% at 50% -2%, rgba(255,246,210,.45), rgba(255,246,210,0) 60%),
    repeating-linear-gradient(115deg, rgba(120,100,60,.016) 0 1px, transparent 1px 7px),
    linear-gradient(#fcf6e8, #f2e9d1);
  box-shadow: 0 4px 16px rgba(110,95,55,.14), inset 7px 0 0 -5px rgba(120,98,52,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .pb-page {
  background:
    radial-gradient(116% 92% at 52% 48%, rgba(96,72,34,0) 46%, rgba(96,72,34,.14) 80%, rgba(86,62,28,.26) 100%),
    repeating-linear-gradient(115deg, rgba(110,90,52,.03) 0 1px, transparent 1px 7px),
    linear-gradient(#f3e8cd, #e8dcbd);
  box-shadow: 0 9px 20px -6px rgba(80,58,24,.4), inset 0 0 44px 6px rgba(92,66,30,.24), inset 8px 0 0 -5px rgba(110,86,44,.4), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ── GALLERY: 거의 흰 작품 매트 — 무드=조명/스포트라이트(중립 회색, night 아님) ── */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .pb-page {
  background:
    radial-gradient(70% 42% at 50% -4%, rgba(255,252,238,.85), rgba(255,252,238,0) 64%),
    linear-gradient(#fdfdfb, #f6f4ee);
  box-shadow: 0 18px 38px -10px rgba(34,32,40,.22), 0 4px 10px rgba(34,32,40,.12);
}
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .pb-page {
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(253,251,246,1) 0%, rgba(240,236,228,1) 44%, rgba(168,160,148,.55) 86%, rgba(146,136,122,.6) 100%),
    linear-gradient(#e2ded4, #d4cec2);
  box-shadow: 0 16px 38px -8px rgba(40,36,30,.36), inset 0 0 42px 8px rgba(96,88,74,.2);
}

/* ── NIGHT: 무대(남색 하늘)가 무드 표면 — 크림 page 유지. 무대 배경 강화(승=별빛 넓게/전=한쪽 깊은 남색) ── */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] {
  background:
    radial-gradient(1.6px 1.6px at 12% 14%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 30% 8%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 52% 11%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 7%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 15%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 8% 8%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 22% 20%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 64% 6%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 26%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(96% 78% at 82% -8%, rgba(224,231,255,.5), rgba(224,231,255,0) 72%),
    linear-gradient(#35427e, #28335f);
}
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] {
  background:
    radial-gradient(1.2px 1.2px at 22% 10%, rgba(210,218,250,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 32% 14%, rgba(210,218,250,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 27% 20%, rgba(210,218,250,.45) 50%, transparent 51%),
    linear-gradient(100deg, rgba(120,140,210,.16) 0 3%, transparent 14%),
    radial-gradient(95% 80% at 50% 50%, rgba(6,9,20,0) 32%, rgba(6,9,20,.5) 100%),
    radial-gradient(150% 130% at 16% -10%, #232c58 0%, #121935 46%, #080c1f 100%);
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-ALL-THEMES-5LOOP / Loop 2 (2026-06-23): 승 = 같은 요소의 성장
   · 각 테마 고유 요소가 자라고 펼쳐짐(코너·가장자리만, 중앙·선택지 비움). forest 승은 기존 보존.
   ════════════════════════════════════════════════════════════════ */

/* COZY 승: 별·반짝임 펼침 + 리본 + 꽃(따뜻) */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 46'><g fill='%23e7c46a'><path d='M14 4 l2 8 l8 2 l-8 2 l-2 8 l-2-8 l-8-2 l8-2Z'/></g><g fill='%23f3d98a'><path d='M42 12 l1.6 5 l5 1.6 l-5 1.6 l-1.6 5 l-1.6-5 l-5-1.6 l5-1.6Z'/><path d='M28 30 l1.2 4 l4 1.2 l-4 1.2 l-1.2 4 l-1.2-4 l-4-1.2 l4-1.2Z'/></g></svg>") no-repeat left 4% top 5% / 54px 42px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 42'><path d='M26 18 L8 6 Q4 16 10 24 Z' fill='%23e7a6b0'/><path d='M26 18 L44 6 Q48 16 42 24 Z' fill='%23e7a6b0'/><circle cx='26' cy='18' r='4' fill='%23d99aa6'/><path d='M24 22 L16 38' stroke='%23e7a6b0' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M28 22 L36 38' stroke='%23e7a6b0' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat right 5% top 4% / 46px 36px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='3.2' fill='%23e7a6b0'/><circle cx='12' cy='5' r='3' fill='%23f3c8cf'/><circle cx='19' cy='12' r='3' fill='%23f3c8cf'/><circle cx='12' cy='19' r='3' fill='%23f3c8cf'/><circle cx='5' cy='12' r='3' fill='%23f3c8cf'/></svg>") no-repeat right 6% bottom 9% / 28px 28px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2 l2 6 l6 2 l-6 2 l-2 6 l-2-6 l-6-2 l6-2Z' fill='%23e7c46a'/></svg>") no-repeat left 3% center / 17px 17px;
}

/* PAPER 승(Loop1 보정2): 메모·클립·책갈피 확대+위치 강화(1초 판독). 가장자리·코너만, 본문/선택지 비침범 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'><rect x='2' y='3' width='54' height='44' rx='2' fill='%23f3ead2' stroke='%23bdac82' stroke-width='1.8' transform='rotate(-6 29 25)'/><line x1='10' y1='17' x2='48' y2='17' stroke='%23b3a47e' stroke-width='1.7'/><line x1='10' y1='27' x2='48' y2='27' stroke='%23b3a47e' stroke-width='1.7'/><line x1='10' y1='37' x2='34' y2='37' stroke='%23b3a47e' stroke-width='1.7'/></svg>") no-repeat right 3% top 4% / 84px 72px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 48'><rect x='2' y='3' width='50' height='40' rx='2' fill='%23ece2c6' stroke='%23bdac82' stroke-width='1.7' transform='rotate(8 27 23)'/><line x1='9' y1='16' x2='44' y2='16' stroke='%23b3a47e' stroke-width='1.6'/><line x1='9' y1='26' x2='44' y2='26' stroke='%23b3a47e' stroke-width='1.6'/></svg>") no-repeat right 5% bottom 15% / 72px 62px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 48'><path d='M8 45 V14 a6 6 0 0 1 12 0 V38 a9 9 0 0 1-18 0 V16' fill='none' stroke='%2398907c' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat left 5% top 3% / 22px 48px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14' preserveAspectRatio='none'><path d='M2 7 q40 6 146 2' stroke='%23ab9b78' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat left 4% bottom 10% / 150px 12px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 52'><path d='M2 2 h16 v40 l-8 -6 l-8 6 Z' fill='%23c4ad7e'/></svg>") no-repeat right 2% center / 20px 50px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 130'><g fill='%23c2b083'><rect x='2' y='8' width='12' height='20' rx='2'/><rect x='2' y='56' width='12' height='20' rx='2'/><rect x='2' y='104' width='12' height='20' rx='2'/></g></svg>") no-repeat left 1% center / 14px 124px;
}

/* GALLERY 승: 스포트라이트 글린트 2 + 명패 + 바닥빛(전시 열림) */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    radial-gradient(closest-side, rgba(255,246,214,.6), rgba(255,246,214,0)) no-repeat left 18% top 3% / 90px 46px,
    radial-gradient(closest-side, rgba(255,246,214,.6), rgba(255,246,214,0)) no-repeat right 18% top 3% / 90px 46px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'><rect x='1' y='2' width='54' height='12' rx='2' fill='%23cbb78a' stroke='%23a8945f' stroke-width='1'/><line x1='8' y1='8' x2='32' y2='8' stroke='%237a6a44' stroke-width='1.4'/></svg>") no-repeat left 7% bottom 9% / 54px 15px,
    linear-gradient(0deg, rgba(255,250,232,.5) 0%, rgba(255,250,232,0) 100%) no-repeat center bottom / 60% 14%;
}

/* NIGHT 승(Loop1 강화): 별 수↑·좌우로 넓게 퍼짐 + 별자리 1 + 반짝임 (코너·가장자리 navy 여백) */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 78'><g fill='%23ffffff'><circle cx='10' cy='10' r='1.8'/><circle cx='28' cy='5' r='1.4'/><circle cx='44' cy='12' r='1.5'/><circle cx='20' cy='24' r='1.6'/><circle cx='38' cy='30' r='1.4'/><circle cx='12' cy='42' r='1.5'/><circle cx='32' cy='50' r='1.7'/><circle cx='54' cy='40' r='1.3'/><circle cx='60' cy='22' r='1.4'/></g><path d='M70 8 l1.6 5 l5 1.6 l-5 1.6 l-1.6 5 l-1.6-5 l-5-1.6 l5-1.6Z' fill='%23fbe7b0'/></svg>") no-repeat left 2% top 5% / 92px 74px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 78'><g fill='%23ffffff'><circle cx='86' cy='10' r='1.8'/><circle cx='68' cy='6' r='1.4'/><circle cx='52' cy='14' r='1.5'/><circle cx='78' cy='26' r='1.6'/><circle cx='60' cy='32' r='1.4'/><circle cx='84' cy='44' r='1.5'/><circle cx='66' cy='52' r='1.6'/><circle cx='44' cy='42' r='1.3'/></g></svg>") no-repeat right 2% top 7% / 92px 74px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'><g stroke='%23bcc6ec' stroke-width='1' fill='none'><path d='M16 16 L60 8 L104 20 L150 10 L186 18'/></g><g fill='%23ffffff'><circle cx='16' cy='16' r='2'/><circle cx='60' cy='8' r='2.2'/><circle cx='104' cy='20' r='1.8'/><circle cx='150' cy='10' r='2.2'/><circle cx='186' cy='18' r='2'/></g></svg>") no-repeat center top 2% / 240px 30px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 170'><g fill='%23ffffff'><circle cx='12' cy='16' r='1.5'/><circle cx='20' cy='44' r='1.3'/><circle cx='10' cy='74' r='1.4'/><circle cx='18' cy='110' r='1.3'/><circle cx='12' cy='146' r='1.5'/></g></svg>") no-repeat left 1% center / 28px 160px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 170'><g fill='%23ffffff'><circle cx='18' cy='22' r='1.5'/><circle cx='10' cy='54' r='1.3'/><circle cx='20' cy='88' r='1.4'/><circle cx='12' cy='120' r='1.3'/><circle cx='18' cy='150' r='1.5'/></g></svg>") no-repeat right 1% center / 28px 160px;
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-ALL-THEMES-5LOOP / Loop 3 (2026-06-23): 전 = 같은 요소의 긴장/집중
   · 승의 같은 요소 유지 + 방향·집중·처짐·몰림. 가장자리만, 중앙·선택지 비움. forest 전은 기존 보존.
   · gallery 승 명패/조명 재선언(강화) 포함.
   ════════════════════════════════════════════════════════════════ */

/* GALLERY 승 강화(재선언): 큰 명패 + 또렷한 조명 2 + 바닥빛 */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="rising"] .scene-ornaments {
  background:
    radial-gradient(closest-side, rgba(255,244,206,.8), rgba(255,244,206,0)) no-repeat left 16% top 1% / 130px 70px,
    radial-gradient(closest-side, rgba(255,244,206,.8), rgba(255,244,206,0)) no-repeat right 16% top 1% / 130px 70px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 20'><rect x='1' y='2' width='70' height='16' rx='2' fill='%23cbb78a' stroke='%23a8945f' stroke-width='1.2'/><line x1='10' y1='7' x2='44' y2='7' stroke='%237a6a44' stroke-width='1.5'/><line x1='10' y1='12' x2='34' y2='12' stroke='%23937f54' stroke-width='1.2'/></svg>") no-repeat left 7% bottom 8% / 72px 20px,
    linear-gradient(0deg, rgba(255,250,232,.55) 0%, rgba(255,250,232,0) 100%) no-repeat center bottom / 64% 16%;
}

/* COZY 전(Loop4 연속성): 승과 같은 위치(좌상 반짝임·우상 리본·우하 꽃)의 같은 요소가 처지고 시든다 */
body[data-pb-theme="cozy-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 50'><g fill='%23d2a94f'><path d='M14 10 l1.8 6 l6 1.8 l-6 1.8 l-1.8 6 l-1.8-6 l-6-1.8 l6-1.8Z'/><path d='M26 26 l1.4 4.6 l4.6 1.4 l-4.6 1.4 l-1.4 4.6 l-1.4-4.6 l-4.6-1.4 l4.6-1.4Z'/><path d='M18 40 l1.1 3.6 l3.6 1.1 l-3.6 1.1 l-1.1 3.6 l-1.1-3.6 l-3.6-1.1 l3.6-1.1Z'/></g></svg>") no-repeat left 4% top 6% / 50px 44px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 54'><g transform='rotate(30 28 18)'><path d='M28 18 L8 7 Q4 18 11 26 Z' fill='%23cf9298'/><path d='M28 18 L48 7 Q52 18 45 26 Z' fill='%23cf9298'/><circle cx='28' cy='18' r='4.2' fill='%23bf858d'/><path d='M25 23 L14 52' stroke='%23cf9298' stroke-width='3.6' fill='none' stroke-linecap='round'/><path d='M31 23 L42 51' stroke='%23cf9298' stroke-width='3.6' fill='none' stroke-linecap='round'/></g></svg>") no-repeat right 5% top 4% / 58px 56px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 58'><g transform='rotate(40 21 16)'><circle cx='21' cy='16' r='4' fill='%23dd99a1'/><circle cx='21' cy='9' r='3.5' fill='%23ebbcc2'/><circle cx='27' cy='16' r='3.5' fill='%23ebbcc2'/><circle cx='21' cy='23' r='3.5' fill='%23ebbcc2'/><circle cx='15' cy='16' r='3.5' fill='%23ebbcc2'/></g><path d='M21 28 Q24 44 15 56' stroke='%23b09a64' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") no-repeat right 6% bottom 11% / 40px 56px;
}

/* PAPER 전: 접힌 모서리 + 메모 기욺 + 밑줄 겹침/틀어짐 */
body[data-pb-theme="paper-storybook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M22 0 L50 0 L50 28 Z' fill='%23c9bb98'/><path d='M22 0 L50 28 L25 27 Z' fill='%23ab9d78'/></svg>") no-repeat right top / 50px 50px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 44'><g transform='rotate(8 25 22)'><rect x='3' y='4' width='44' height='36' rx='2' fill='%23eee4cb' stroke='%23b8a982' stroke-width='1.5'/><line x1='10' y1='16' x2='40' y2='16' stroke='%23bdae8a' stroke-width='1.3'/><line x1='10' y1='24' x2='40' y2='24' stroke='%23bdae8a' stroke-width='1.3'/></g></svg>") no-repeat left 6% top 6% / 48px 42px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'><path d='M2 8 q26 5 96 2' stroke='%23a08b66' stroke-width='2.4' fill='none' stroke-linecap='round'/><path d='M4 14 q26 -4 92 0' stroke='%2390794f' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") no-repeat left 4% bottom 13% / 96px 18px;
}

/* NIGHT 전: 별 한쪽 모임 + 구름이 달 가림 + 빛중심 이동 */
body[data-pb-theme="night-story"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 80'><g fill='%23e3eaff'><circle cx='12' cy='8' r='1.8'/><circle cx='26' cy='5' r='1.5'/><circle cx='18' cy='18' r='1.7'/><circle cx='32' cy='14' r='1.4'/><circle cx='10' cy='28' r='1.6'/><circle cx='24' cy='32' r='1.8'/><circle cx='14' cy='44' r='1.5'/><circle cx='28' cy='48' r='1.4'/></g></svg>") no-repeat left 3% top 7% / 64px 72px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 54'><g fill='%23b9c3df' opacity='0.96'><ellipse cx='38' cy='32' rx='34' ry='14'/><ellipse cx='64' cy='26' rx='26' ry='15'/><ellipse cx='20' cy='28' rx='18' ry='11'/><ellipse cx='80' cy='34' rx='16' ry='10'/></g><g fill='%23cdd6ee' opacity='0.8'><ellipse cx='52' cy='24' rx='28' ry='10'/></g></svg>") no-repeat right 3% top 3% / 100px 54px;
}

/* ════════════════════════════════════════════════════════════════
   PB-MOOD-ALL-THEMES-5LOOP / Loop 4 (2026-06-23): 절제 + 모바일 감산
   · 모든 테마 단계 장식 ≤600 ~50%↓(혼잡 방지). 무드 표면(.pb-page/무대 vignette)은 단서로 유지.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  body[data-pb-theme="cozy-storybook"]      .scene-screen--pb.pb--imagecenter[data-story-stage] .scene-ornaments,
  body[data-pb-theme="paper-storybook"]     .scene-screen--pb.pb--imagecenter[data-story-stage] .scene-ornaments,
  body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage] .scene-ornaments,
  body[data-pb-theme="night-story"]         .scene-screen--pb.pb--imagecenter[data-story-stage] .scene-ornaments { opacity: .55; }
}

/* ════════ PB-MOOD TARGETED POLISH Loop2 (2026-06-23): gallery 전 명패+집중광(암전 완화 보완) ════════ */
body[data-pb-theme="gallery-picturebook"] .scene-screen--pb.pb--imagecenter[data-story-stage="turning"] .scene-ornaments {
  background:
    radial-gradient(closest-side, rgba(255,245,212,.85), rgba(255,245,212,0)) no-repeat center top 0% / 150px 64px,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 20'><rect x='1' y='2' width='74' height='16' rx='2' fill='%23d8c79a' stroke='%23a8945f' stroke-width='1.3'/><line x1='10' y1='7' x2='48' y2='7' stroke='%235e4f30' stroke-width='1.6'/><line x1='10' y1='12' x2='36' y2='12' stroke='%237a6a44' stroke-width='1.3'/></svg>") no-repeat left 7% bottom 8% / 76px 20px;
}

/* ── REFINE-STAB-E: 밤 이야기(night-story) 행동버튼 색감 보정 ──
   기본 파스텔(data-pb-color 1/2/3) 버튼이 어두운 밤 무대 위에 밝은 보라/회색으로 떠 보이던 문제.
   남색 배경 + 크림/달빛 글자 + 달빛 테두리로 테마에 맞춤. 다른 테마 영향 0(night-story 스코프만).
   구조/위치/클릭 무변경 — 색·테두리·hover만. */
body[data-pb-theme="night-story"] .choice-v03--picturebook,
body[data-pb-theme="night-story"] .choice-v03--picturebook[data-pb-color="1"],
body[data-pb-theme="night-story"] .choice-v03--picturebook[data-pb-color="2"],
body[data-pb-theme="night-story"] .choice-v03--picturebook[data-pb-color="3"] {
  background: rgba(26, 34, 66, 0.82);            /* 깊은 남색 */
  border-color: rgba(214, 196, 138, 0.55);       /* 달빛 금색 테두리 */
  color: #f2ecd9;                                 /* 크림 글자 */
}
body[data-pb-theme="night-story"] .choice-v03--picturebook .pb-choice-label {
  color: #f2ecd9;
}
body[data-pb-theme="night-story"] .choice-v03--picturebook:hover:not(:disabled),
body[data-pb-theme="night-story"] .choice-v03--picturebook:focus-visible {
  background: rgba(38, 48, 88, 0.92);
  border-color: rgba(230, 214, 160, 0.85);
}
body[data-pb-theme="night-story"] .choice-v03--picturebook:focus-visible {
  outline: 2px solid rgba(230, 214, 160, 0.8);
  outline-offset: 2px;
}
body[data-pb-theme="night-story"] .choice-v03--picturebook:active:not(:disabled) {
  background: rgba(20, 27, 54, 0.95);
}

/* ════════ MOVIE-PAPER-TONE(2026-07-10): 무비형 결정 패널(본문+행동버튼)을 '종이 동화책' 톤으로 ════════
   기존 어두운 overlay(교육웹 느낌)를 따뜻한 종이 톤으로 — 인쇄/그림책 paper-storybook 정본 값 이식.
   · panel/card 두 deco 모두 --md-* 토큰 override로 처리(레이아웃 무변경).
   · caption-bar 자막 띠(어두운 배경+흰 글씨)는 별도 규칙(특이도 높음)이라 그대로 유지.
   · 무비 엔딩(.movie-ending-decision)은 .movie-decision 토큰 공유 → 자동으로 같은 톤. */
.scene-screen--movie[data-movie-deco="panel"] {
  --md-bg: linear-gradient(to top, rgba(247,238,206,0.95) 55%, rgba(247,238,206,0.35) 100%);
}
body[data-page-orientation="portrait"] .scene-screen--movie[data-movie-deco="panel"] {
  --md-bg: linear-gradient(to top, rgba(247,238,206,0.92) 55%, rgba(247,238,206,0.3) 100%);
}
.scene-screen--movie[data-movie-deco="card"] {
  --md-bg: rgba(250,243,222,0.94);
  --md-border: 1px solid rgba(150,135,100,.5);
  --md-shadow: 0 14px 44px rgba(60,45,20,0.28);
}
/* 본문 — 종이 위 진갈색(paper 정본 글색). */
.scene-screen--movie .movie-decision__desc {
  color: #3a2c14;
  text-shadow: none;
}
/* MOVIE-CAPTION-DARKTEXT(2026-07-10): 자막 띠(caption-bar) 모드도 종이 톤+진갈색으로 —
   기존 '어두운 띠+흰 글씨'가 종이 테마 위에서 안 보인다는 사용자 보고. 선택자 특이도(0,3,0)를
   caption-bar 원규칙(1633·동일 0,3,0)과 맞추고 소스 뒤라 우선. 배경만 종이로 바꾸고 나머지(패딩/라운드)는 원규칙 유지. */
.scene-screen--movie[data-movie-caption="caption-bar"] .movie-decision__desc {
  background: rgba(247,238,206,0.96);
  color: #3a2c14;
  border: 1px solid rgba(150,135,100,.45);
  text-shadow: none;
}
/* 행동버튼 — paper 노트 인덱스 탭 톤(인쇄 .pbp-choice와 동일 계열). */
.scene-screen--movie .choice-v03 {
  background: linear-gradient(#f1e7cc, #e7d8b4);
  color: #4a3a22;
  border: 1.2px solid #b6a479;
  border-radius: 4px 4px 7px 7px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(110,95,55,.16);
}
.scene-screen--movie .choice-v03:hover:not(:disabled) {
  background: linear-gradient(#f7efd8, #eee0c0);
  border-color: #9a6b3f;
  transform: translateY(-1px);
}

/* ── LEVELS-FEEDBACK(2026-07-19): 행동버튼 라벨의 기본 문구('다음 장면으로' 등)는
   실제 입력한 글처럼 표시(흐림·기울임 제거) — 사용자 결정. 본문/제목 placeholder는
   진짜 빈칸임을 알려야 하므로 위 일반 규칙(흐림) 유지. 감상 쪽은 viewer.css
   .choice-v03--empty 동일 정책. ── */
.scene-screen--pb .pb-choice-label.is-empty::before,
.scene-screen--text .text-choice-label.is-empty::before,
.scene-screen--movie .text-choice-label.is-empty::before {
  color: currentColor;
  opacity: 1;
  font-style: normal;
}