/* ================================================================
   viewer.css — 풀스크린 stage / 테마 / UI
   ================================================================ */

/* ── 기본 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* W8 Warm Paper: 다듬기 패널 + cover/scene/terminal 옛 영역에 종이톤.
     4모드 player(v03 변수 격리), 무비형 미디어(--v03-media-bg 별도)는 영향 0.
     사용자 원칙: 구조 안전 — 변수만 변경, 마크업/JS/클래스 0% 건드림. */
  --bg:          #fbf6ea;
  --surface:     #fffaee;
  --surface2:    #f4ecd8;
  --border:      rgba(80,50,20,0.10);
  --text:        #2b1f10;
  --text-muted:  #6b5638;
  --accent:      #c66f4a;      /* 다듬기 강조 = 코랄 (제작 톤) */
  --accent2:     #c79550;      /* 보조 = 골드 */
  --ending:      #c8503c;      /* 종이톤 빨강 */
  --explore:     #5a8a4a;      /* 종이톤 진녹 */

  /* 타이포 */
  --font-story:  'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
  --font-ui:     'Jua', 'Nanum Gothic', 'Malgun Gothic', sans-serif;

  /* 애니메이션 */
  --t-fast:  0.15s;
  --t-mid:   0.3s;
  --t-slow:  0.5s;
}

/* ── 페어리북 테마 ── */
.theme-fairybook {
  --bg:        #1a0d2e;
  --surface:   #2d1a45;
  --surface2:  #3d2460;
  --text:      #f0e8ff;
  --text-muted:#b09acc;
  --accent:    #c084fc;
  --accent2:   #f0c000;
}

/* ── 탐색 테마 ── */
.theme-explore {
  --bg:        #0a1628;
  --surface:   #0f2040;
  --surface2:  #162e54;
  --text:      #cce8ff;
  --text-muted:#7aabcc;
  --accent:    #4dd9ac;
  --accent2:   #f0a030;
}

/* ================================================================
   레이아웃
   ================================================================ */
html, body {
  height: 100%;
  overflow: hidden;
  /* CROSS-A: 태블릿 pull-to-refresh(아래로 쓸어내림 새로고침) 차단 — 감상/제작 중 작업 유실 방지 */
  overscroll-behavior-y: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-story);
}

/* ── entry 화면 (Warm Paper) ── */
#entry-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf6ea;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,90,50,0.025) 0, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(120,90,50,0.020) 0, transparent 50%);
  z-index: 100;
  transition: opacity var(--t-slow);
  padding: 20px;
}
#entry-screen.hidden { display: none; }
/* 종이 테이프 장식 — home/maker join과 통일 */
#entry-screen::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 100px;
  height: 18px;
  background: rgba(232,164,64,0.32);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(120,90,50,0.10);
  opacity: 0.7;
  pointer-events: none;
}

.entry-card {
  position: relative;
  background: #fffaee;
  border: 1px solid rgba(80,50,20,0.10);
  border-radius: 20px;
  padding: 40px 32px 32px;
  width: min(420px, 92vw);
  text-align: center;
  box-shadow:
    0 1px 0 rgba(120,90,50,0.06),
    0 2px 6px rgba(120,90,50,0.06),
    0 16px 32px rgba(120,90,50,0.10);
  animation: entryFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes entryFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 손글씨 부제 (home/maker join과 같은 톤) */
.entry-logo {
  font-family: 'Nanum Pen Script', cursive;
  font-size: 22px;
  color: #5a92c2;       /* 감상 = 하늘 톤 */
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.entry-title  {
  font-family: var(--font-ui);
  font-size: 30px;
  color: #2b1f10;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.entry-sub    {
  font-size: 14px;
  color: #4a3820;
  margin-bottom: 28px;
  line-height: 1.7;
}

.entry-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(80,50,20,0.18);
  border-radius: 14px;
  background: #fdf8eb;
  color: #2b1f10;
  font-family: var(--font-ui);
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.entry-input:focus {
  outline: none;
  border-color: #5a92c2;        /* 감상 = 하늘 액센트 */
  background: #fffaee;
  box-shadow: 0 0 0 3px rgba(90,146,194,0.18);
}
.entry-input::placeholder { color: #9a8868; }

/* 클래스 코드 입력 — 강조 */
.entry-input--code {
  border-color: rgba(90,146,194,0.42);
  font-size: 20px;
  letter-spacing: 4px;
  margin-bottom: 8px;
  background: #f4f8fb;
}

.entry-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: #5a92c2;       /* 감상 = 하늘 톤 */
  color: #fffaee;
  font-family: var(--font-ui);
  font-size: 17px;
  cursor: pointer;
  margin-top: 8px;
  box-shadow:
    0 1px 2px rgba(120,90,50,0.10),
    0 4px 12px rgba(90,146,194,0.22);
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.entry-submit:hover  {
  filter: brightness(1.05);
  box-shadow:
    0 4px 12px rgba(120,90,50,0.14),
    0 8px 24px rgba(90,146,194,0.28);
}
.entry-submit:active { transform: translateY(1px); }
.entry-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
  box-shadow: 0 1px 2px rgba(120,90,50,0.08);
}

.entry-error {
  margin-top: 10px;
  font-size: 13px;
  color: #c8503c;
  min-height: 18px;
  font-family: var(--font-ui);
}

/* ── player 화면 ── */
#player-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
#player-screen.hidden { display: none; }

/* ── HUD (viewer 감성화 3차) ──
   '앱 헤더'에서 '작품 위에 가볍게 얹힌 얇은 레이어'로 한 단계 더 축소.
   그라디언트 더 옅고 짧게 + padding/버튼/텍스트 한 톤씩 내림. */
#hud {
  position: relative;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.42) 0%,                   /* 0.55 → 0.42 */
    rgba(0,0,0,0.15) 45%,                  /* 0.28 → 0.15, 50% → 45% */
    rgba(0,0,0,0) 85%                      /* 100% → 85%, 더 일찍 사라짐 */
  );
  backdrop-filter: blur(10px) saturate(115%);      /* 14 → 10 */
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-bottom: none;
  flex-shrink: 0;
}
/* AI-TOGGLE-FLOW-1: (구)TOP-HUD-AI-LAYOUT-1B의 has-ai-view-toggle 40px 예약 폐기.
   AI 보기 토글을 position:fixed 부유에서 문서 흐름(#ai-view-toggle-slot)으로 옮겨
   더는 #hud 위에 뜨지 않으므로 예약이 불필요 → 그 40px를 감상/편집 세로로 회수(그림책 확대).
   (has-ai-view-toggle class는 이제 부여되지 않음. viewer-ai.js의 remove 호출은 무해하게 유지.) */
/* CHROME-CLEANUP-1: 편집(다듬기) 모드의 '진한 회색' 제거. 정체=#hud의 어두운 그라디언트가
   반투명 maker-return-bar 뒤로 비치는 것. 편집 모드에선 배경을 걷어 회색을 없애고
   maker-return-bar가 곧 시각적 최상단 밴드가 되게 한다. 감상 모드의 #hud 그라디언트는
   검은 stage 위 버튼 가독성용이라 전역 유지 — 반드시 edit-mode-active로만 스코프. */
body.edit-mode-active #hud {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* VIEWER-FILL-MAX-1: 감상(순수 play·maker-return-bar 없음) 상단 HUD를 무대 위 오버레이로 전환 →
   이 줄이 먹던 세로(~52px)를 그림책(.player-body flex:1)으로 회수해 그림책을 키운다.
   어두운 그라디언트는 제거(그림 위 깨끗하게)하고 ✕/⛶/‹ 버튼만 각자 반투명 배경으로 밝은 그림
   위에서도 보이게. 오버레이 자체는 클릭 통과(pointer-events:none), 버튼만 클릭 가능.
   편집·감상테스트(maker-return-bar 있음)는 :has()로 제외 → 그쪽 레이아웃 불변. */
body:not(.edit-mode-active) #hud:not(:has(.maker-return-bar)) {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 60;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
body:not(.edit-mode-active) #hud:not(:has(.maker-return-bar)) .hud-inner {
  padding: 6px 10px;
  pointer-events: none;
}
body:not(.edit-mode-active) #hud:not(:has(.maker-return-bar)) .hud-btn {
  pointer-events: auto;
  background: rgba(40,32,20,0.32);
  color: #fff;
  min-width: 40px; min-height: 40px;       /* 태블릿 터치 확보 */
}
body:not(.edit-mode-active) #hud:not(:has(.maker-return-bar)) .hud-btn--exit {
  background: rgba(200,70,55,0.55);
  color: #fff;
}
.hud-inner {
  display: flex;
  align-items: center;
  padding: 8px 16px 12px;                  /* 10 18 14 → 8 16 12, 행 높이 축소 */
  gap: 10px;
}
/* v36: maker에서 진입한 모든 모드(편집·감상 테스트)에서 HUD 하단 줄 숨김.
   사용자: "X 칸 있는 줄 없애줘. ✕는 안 쓰니까."
   ✕·뒤로·팀명 모두 maker-return-bar의 액션과 중복. 화면 위 영역 절약. */
#hud .maker-return-bar + .hud-inner {
  display: none;
}
.hud-center  { flex: 1; text-align: center; }
.hud-team    {
  font-family: var(--font-ui);
  font-size: 12px;                         /* 13 → 12 */
  color: rgba(230,235,245,0.62);           /* 0.7 → 0.62, 더 물러남 */
  letter-spacing: 0.02em;
}
.hud-right   { display: flex; align-items: center; gap: 8px; }
.hud-explore-count { font-size: 11px; color: var(--explore); opacity: 0.72; }
.hud-edit-badge {
  font-size: 11px;
  background: rgba(240,160,0,0.15);        /* 0.18 → 0.15 */
  color: var(--accent2);
  padding: 2px 8px;
  border-radius: 50px;
  border: 1px solid rgba(240,160,0,0.28);  /* 0.32 → 0.28 */
}

.hud-btn {
  background: none;
  border: none;
  color: rgba(230,235,245,0.58);           /* 0.62 → 0.58 */
  width: 32px; height: 32px;               /* 34 → 32 */
  border-radius: 50%;
  font-size: 18px;                         /* 20 → 18 */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  opacity: 0.7;                            /* 0.75 → 0.7, 더 희미 */
}
.hud-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  opacity: 1;
}
.hud-btn--hidden { visibility: hidden; pointer-events: none; }

/* 핵심 버튼(나가기) — 위계 유지 ──
   전체 HUD는 더 비물질화됐지만 닫기 버튼은 이전과 비슷한 식별성 유지 */
.hud-btn--exit {
  color: rgba(248,130,130,0.9);
  opacity: 0.88;
  background: rgba(248,81,73,0.06);
}
.hud-btn--exit:hover {
  color: #ff9a9a;
  background: rgba(248,81,73,0.14);
  opacity: 1;
  transform: scale(1.04);
}

/* 전체 화면 토글 — 켜져 있으면 시안 링으로 강조(참고: dwad 상단 버튼) */
.hud-btn--fullscreen.is-on {
  color: #8fd8ff;
  opacity: 1;
  background: rgba(120,190,255,0.14);
  box-shadow: inset 0 0 0 1.5px rgba(120,190,255,0.55);
}

/* ── 메인 레이아웃 ── */
.player-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;   /* v46: 다듬기 모드 edit-panel absolute 기준 */
}

/* PANEL-CSS-CLEANUP: #edit-panel/.edit-panel-toggle 레이아웃·슬라이드 토글 CSS 제거
   (해당 DOM은 PANEL-BACKBONE-2-i에서 삭제됨 → inert). 편집 동선은 미리보기 frame
   contenteditable + #scene-navigator + #edit-lock-alert + 팝오버가 전담. */

/* ── TOP-TOOLBAR-2A: 일반 장면 "🔗 버튼" 상단 팝오버 ──
   HUD의 🔗 버튼을 누르면 행동버튼 개수/선택지 연결 도구를 상단에 띄움(1단 복제).
   위치는 JS(_positionChoicePopover)가 inline top/left로 지정 → position:fixed.
   z-index: HUD 위, route-panel(400) 아래. */
.edit-choice-popover {
  position: fixed;
  z-index: 120;
  width: min(420px, calc(100vw - 24px));
  max-height: min(60vh, 520px);
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #e7dcc4;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(60, 45, 20, 0.28);
  padding: 0 0 12px;
}
.edit-choice-popover[hidden] { display: none; }
.edit-choice-popover-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #b06a2e, #d89a4e);
  border-radius: 14px 14px 0 0;
}
.edit-choice-popover-title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.edit-choice-popover-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.edit-choice-popover-close:hover { background: rgba(255, 255, 255, 0.36); }
.edit-choice-popover-body { padding: 12px 14px 0; }
/* 트리거 활성 상태 강조 */
.maker-return-btn.js-edit-choice-popover.is-active {
  background: #b06a2e;
  color: #fff;
}
/* 읽기전용: 1단(#edit-panel)과 동일하게 팝오버 입력/버튼도 차단(닫기 버튼만 살림). */
body.viewer-edit-readonly .edit-choice-popover input,
body.viewer-edit-readonly .edit-choice-popover select,
body.viewer-edit-readonly .edit-choice-popover button:not(.edit-choice-popover-close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── TOP-TOOLBAR-3A: 표지 "🎨 표지" 상단 팝오버 ──
   2A choice 팝오버와 같은 패턴(position:fixed, HUD 아래 anchor)이되 class만 분리.
   z-index는 choice 팝오버(120)와 동일 레벨 — 두 팝오버는 상호배타라 동시 노출 없음. */
.edit-cover-popover {
  position: fixed;
  z-index: 120;
  width: min(340px, calc(100vw - 24px));
  max-height: min(60vh, 480px);
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #e7dcc4;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(60, 45, 20, 0.28);
  padding: 0 0 12px;
}
.edit-cover-popover[hidden] { display: none; }
.edit-cover-popover__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #b06a2e, #d89a4e);
  border-radius: 14px 14px 0 0;
}
.edit-cover-popover__title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.edit-cover-popover__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.edit-cover-popover__close:hover { background: rgba(255, 255, 255, 0.36); }
.edit-cover-popover__body { padding: 12px 14px 0; }
/* TOP-TOOLBAR-4A: 팝오버 내부 제목 높낮이 슬라이더 — 좁은 팝오버(340px)에서 넓게 보이게. */
.edit-cover-popover .edit-slider { width: 100%; }
/* 트리거 활성 상태 강조 */
.maker-return-btn.js-edit-cover-popover.is-active {
  background: #b06a2e;
  color: #fff;
}
/* 읽기전용: 표지 인스펙터와 동일하게 팝오버 pill/버튼/슬라이더 차단(닫기 버튼만 살림).
   TOP-TOOLBAR-4A: 제목 높낮이 input range 추가 → input도 차단 대상에 포함. */
body.viewer-edit-readonly .edit-cover-popover input,
body.viewer-edit-readonly .edit-cover-popover button:not(.edit-cover-popover__close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── PROJECT-SETTINGS-1A: "⚙️ 작품 설정" 상단 팝오버 ──
   choice/cover 팝오버와 같은 골격(position:fixed, HUD 아래 anchor)이되 class 분리.
   장면 도구(따뜻한 갈색 헤더)와 구분되도록 헤더만 차분한 청록 계열 — "작품 전체"임을
   살짝 드러냄. z-index는 다른 팝오버와 동일 레벨(상호배타라 동시 노출 없음). */
.edit-project-popover {
  position: fixed;
  z-index: 120;
  width: min(380px, calc(100vw - 24px));
  /* POPOVER-NOSCROLL(2026-07-11): 작품/감상 설정도 한눈에 — 화면 높이만큼 펼침.
     정확한 남은 높이는 _positionProjectPopover 인라인 재계산, 낮은 화면만 스크롤 안전망. */
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #cdddd9;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(30, 55, 50, 0.26);
  padding: 0 0 12px;
}
.edit-project-popover[hidden] { display: none; }
.edit-project-popover__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #3f7d76, #5fa89c);
  border-radius: 14px 14px 0 0;
}
.edit-project-popover__title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.edit-project-popover__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.edit-project-popover__close:hover { background: rgba(255, 255, 255, 0.36); }
.edit-project-popover__body { padding: 14px; }
.edit-project-popover__hint {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #4a4035;
}
.edit-project-popover__note {
  margin: 0;
  font-size: 12px;
  color: #8a7d6b;
}
/* PROJECT-SETTINGS-1B: 팝오버 내부 슬라이더(전환/텍스트 속도)는 폭 안에서 넓게. */
.edit-project-popover .edit-slider { width: 100%; }
/* 트리거 활성 상태 강조 — 헤더 색과 동일 계열 */
.maker-return-btn.js-edit-project-popover.is-active {
  background: #3f7d76;
  color: #fff;
}
/* 읽기전용: 표지/선택지 팝오버와 동일하게 작품 설정 입력/버튼/슬라이더 차단(닫기만 살림). */
body.viewer-edit-readonly .edit-project-popover input,
body.viewer-edit-readonly .edit-project-popover button:not(.edit-project-popover__close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── PB-IMAGE-1B: picturebook "🖼️ 그림" 상단 팝오버 ──
   choice/cover/project 팝오버와 같은 골격(position:fixed, HUD 아래 anchor)이되 class 분리.
   장면 그림 도구라 헤더만 차분한 청보라 계열로 구분. z-index는 다른 팝오버와 동일
   레벨(상호배타라 동시 노출 없음). 1B는 빈 셸. */
.edit-image-popover {
  position: fixed;
  z-index: 120;
  width: min(320px, calc(100vw - 24px));
  max-height: min(60vh, 480px);
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #d4cee2;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(45, 35, 65, 0.26);
  padding: 0 0 12px;
}
.edit-image-popover[hidden] { display: none; }
.edit-image-popover__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #6a5aa6, #8a78c4);
  border-radius: 14px 14px 0 0;
}
.edit-image-popover__title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.edit-image-popover__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.edit-image-popover__close:hover { background: rgba(255, 255, 255, 0.36); }
.edit-image-popover__body { padding: 14px; }
.edit-image-popover__hint {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #4a4035;
}
.edit-image-popover__note {
  margin: 0;
  font-size: 12px;
  color: #8a7d6b;
}
/* 트리거 활성 상태 강조 — 헤더 색과 동일 계열 */
.maker-return-btn.js-edit-image-popover.is-active {
  background: #6a5aa6;
  color: #fff;
}
/* 읽기전용: 다른 팝오버와 동일하게 그림 도구 입력/버튼 차단(닫기만 살림).
   AI variant 시각 잠금은 PB-IMAGE-1A가 .edit-pb-image-actions 전체에 별도 적용. */
body.viewer-edit-readonly .edit-image-popover input,
body.viewer-edit-readonly .edit-image-popover button:not(.edit-image-popover__close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── SCENE-STYLE-1: picturebook "🎭 장면 스타일" 상단 팝오버 ──
   다른 팝오버와 같은 골격(position:fixed, HUD 아래 anchor)이되 class 분리.
   장면 단위 스타일이라 헤더만 차분한 자홍 계열로 구분. z-index는 동일 레벨(상호배타). */
.edit-scene-style-popover {
  position: fixed;
  z-index: 120;
  width: min(320px, calc(100vw - 24px));
  /* POPOVER-NOSCROLL(2026-07-11): 스크롤 없이 한눈에 — 화면 높이만큼 펼침.
     정확한 남은 높이는 _positionSceneStylePopover가 인라인으로 재계산.
     아주 낮은 화면에서만 overflow:auto가 안전망으로 동작. */
  max-height: calc(100vh - 100px);
  overflow: auto;
  background: #fffdf8;
  border: 1px solid #e2cdd8;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(65, 35, 50, 0.26);
  padding: 0 0 12px;
}
.edit-scene-style-popover[hidden] { display: none; }
.edit-scene-style-popover__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #a6517e, #c47ba0);
  border-radius: 14px 14px 0 0;
}
.edit-scene-style-popover__title {
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.edit-scene-style-popover__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.edit-scene-style-popover__close:hover { background: rgba(255, 255, 255, 0.36); }
.edit-scene-style-popover__body { padding: 14px; }
.edit-scene-style-popover__note {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8a7d6b;
}
/* GLYPH-STYLE-1C: 팝오버 내 톤↔글자 스타일 구분 divider + 소제목. */
.edit-scene-style-divider {
  height: 1px;
  background: #efe6d6;
  margin: 12px 0;
}
.edit-scene-style-subtitle {
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: #6b5638;
  margin: 0 0 8px;
}
/* PB-MOOD-1B-PREVIEW: 결말 분위기 3세그먼트(기본/밝은/여운) — 미저장 미리보기.
   색만으로 구분하지 않도록 라벨 항상 표시 + 선택은 테두리/배경/체크. 44px 터치. */
.pb-mood-seg-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pb-mood-seg {
  flex: 1 1 0;
  min-width: 84px;
  min-height: 44px;
  padding: 8px 6px;
  border: 1.5px solid #d8c7a6;
  border-radius: 10px;
  background: #fbf6ec;
  color: #5a4a30;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
/* FIELD-FIX-D(2026-07-02): 한글 어절 단위 줄바꿈 — '이야기가 커져 / 요' 같은 한 글자 낙하 방지.
   keep-all=공백에서만 줄바꿈('이야기가 / 커져요'), overflow-wrap은 극단 폭 안전판. */
.pb-mood-seg__label { display: block; line-height: 1.25; word-break: keep-all; overflow-wrap: break-word; }
.pb-mood-seg:hover { background: #f5ecda; }
.pb-mood-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198,111,74,.4); }
/* 항목별 은은한 색 힌트(색만으로 구분 아님 — 라벨 항상 표시) */
.pb-mood-seg--base  { }
.pb-mood-seg--happy { background: #fdf3df; border-color: #e7c98c; color: #7a5a24; }
.pb-mood-seg--sad   { background: #eef0f6; border-color: #b9bcd0; color: #4a4d63; }
.pb-mood-seg--happy:hover { background: #fbecca; }
.pb-mood-seg--sad:hover   { background: #e6e8f1; }
/* PB-MOOD-2-PREVIEW: 일반 장면 단계(기본/승/전) 색 힌트 — 색만으로 구분 아님(라벨 항상 표시). */
.pb-mood-seg--stage-base    { }
.pb-mood-seg--stage-rising  { background: #fbf2da; border-color: #e3cf97; color: #6e5a2e; }
.pb-mood-seg--stage-turning { background: #efeae0; border-color: #c7b79b; color: #5b4d36; }
.pb-mood-seg--stage-rising:hover  { background: #f6e9c8; }
.pb-mood-seg--stage-turning:hover { background: #e7e0d2; }
/* 선택 상태 — 색 외에 굵은 테두리 + 체크 마크로 명확히 */
.pb-mood-seg.is-on {
  border-color: #c66f4a;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(198,111,74,.35);
  font-weight: 700;
}
.pb-mood-seg.is-on .pb-mood-seg__label::after {
  content: " ✓";
  color: #c66f4a;
}
@media (max-width: 480px) {
  .pb-mood-seg-group { flex-direction: column; }
  .pb-mood-seg { width: 100%; flex-basis: auto; }
}
/* REFINE-IA-2: [이야기 전체][이 장면만] 탭 */
.edit-scene-style-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  background: #f2ead9;
  border-radius: 10px;
  padding: 3px;
}
.edit-scene-style-tab {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 7px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a7d6b;
  cursor: pointer;
}
.edit-scene-style-tab.active {
  background: #fff;
  color: #6b4a8a;
  box-shadow: 0 1px 3px rgba(80,60,30,0.12);
}
/* 항목별 "기본값" 칩 — 라벨 옆 작은 되돌리기 */
.edit-style-reset-chip-row { margin: 0 0 6px; }
.edit-style-reset-chip {
  margin-left: 6px;
  border: 1px solid #d8c9b0;
  background: #fbf6ec;
  color: #9a7b46;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
.edit-style-reset-chip:hover { background: #f2e6cf; }
/* 전체 되돌리기 버튼 */
.edit-style-promote-btn {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(198, 111, 74, 0.55);
  background: rgba(198, 111, 74, 0.10);
  color: #b3603e;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.edit-style-promote-btn:hover { background: rgba(198, 111, 74, 0.18); border-color: #c66f4a; }

.edit-style-reset-all-btn {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #c9a96a;
  background: #fffaee;
  color: #8a6a32;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12.5px;
}
.edit-style-reset-all-btn:disabled {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}
/* 고급(모든 장면 복사) 접기 */
.edit-style-advanced { margin-top: 10px; }
.edit-style-advanced > summary {
  cursor: pointer;
  font-size: 11.5px;
  color: #9a8d79;
  list-style: none;
  padding: 4px 0;
}
.edit-style-advanced > summary::-webkit-details-marker { display: none; }
.edit-style-advanced > summary::before { content: '⋯ '; }
/* 트리거 활성 상태 강조 — 헤더 색과 동일 계열 */
.maker-return-btn.js-edit-scene-style-popover.is-active {
  background: #a6517e;
  color: #fff;
}
/* 읽기전용: 다른 팝오버와 동일하게 톤 버튼 차단(닫기만 살림). */
body.viewer-edit-readonly .edit-scene-style-popover button:not(.edit-scene-style-popover__close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

/* ── PANEL-CLEANUP-1A/1B: 행동버튼 개수/선택지 연결 우측 중복 렌더가 text(1A)·movie(1A)·
   picturebook(1B) 모두 실제 제거됨 → TOP-TOOLBAR-2B dead hide rule(.edit-row--pb-choice-count/
   -link) 제거. 공용 helper는 🔗 #edit-choice-popover(#edit-panel 밖, viewer.html:151)가 계속 사용. */

/* ── PANEL-CLEANUP-1C: 표지 1단의 중복 렌더(표지색·제목 높낮이·양옆 마감 테마·작품 전환효과)가
   실제 제거됨(_typeSectionCoverHtml 호출부 삭제) → TOP-TOOLBAR-3B(.edit-row--cover-theme)·
   TOP-TOOLBAR-4B(.edit-row--cover-title-y)·PROJECT-SETTINGS-1C(.edit-cover-worksettings-dup)
   dead hide rule 제거. 공용 helper는 🎨 #edit-cover-popover·⚙️ 팝오버(#edit-panel 밖)·
   cover-less edge가 계속 사용(무영향). */

/* PANEL-CSS-CLEANUP: #edit-panel .edit-project-dup-orientation 숨김 규칙 제거
   (#edit-panel DOM 삭제로 inert). 화면 방향은 ⚙️ 작품 설정 팝오버가 전담. */

/* ── PANEL-CLEANUP-1A: 🎬 무비 모달로 이관된 우측 영상/본문 중복 렌더가 실제 제거됨(호출부 삭제)
   → MOVIE-TOOL-1D dead hide rule(.edit-movie-dup-video-tools/.edit-movie-dup-body-toggle) 제거.
   모달 사본(.movie-tool-video-section)·핸들러·Storage helper는 무관(유지). */

/* ── PANEL-CLEANUP-1B: picturebook 우측 중복 렌더가 실제 제거됨(호출부 삭제) → dead hide rule 제거:
   PROJECT-SETTINGS-2C-C(.edit-project-dup-cardstyle) · PB-IMAGE-1D(.edit-project-dup-image-actions)
   · SCENE-STYLE-1C(.edit-scene-dup-tone) · GLYPH-STYLE-1D(.edit-pb-dup-glyph-controls)
   · GLYPH-APPLYALL(.edit-pb-dup-inline-style). 공용 helper는 🖼️/🎭/⚙️ 팝오버(#edit-panel 밖)가
   계속 사용. _pbToneSectionHtml/_pbInlineStyleHtml 본체는 보존(우패널 전용 dead, handler 정리는 별도). */

/* ── PANEL-CLEANUP-1A: text/movie 우측 중복 렌더가 실제 제거됨(호출부 삭제) →
   TEXT-MODE-1D(.edit-text-dup-style-sections)·MOVIE-SETTINGS-1(.edit-movie-dup-project-settings)
   dead hide rule 제거. helper는 🎭/⚙️ 팝오버가 계속 사용. picturebook/cover dup rule은 유지. */
/* 🎭 팝오버 내 "모든 장면 적용" 상단 여백(글자 스타일 컨트롤과 구분). */
.edit-scene-style-apply-all { margin-top: 4px; }

/* PANEL-CSS-CLEANUP: v129 읽기전용 #edit-panel 입력/버튼 차단·예외 규칙 제거
   (#edit-panel DOM 삭제로 inert). 잠금 중 readonly 예외는 #scene-navigator(2601~)·
   #edit-lock-alert(2622~)에서, frame contenteditable 차단은 아래 규칙이 전담. */
/* 표지/본문 contenteditable — 인스펙터 X, viewer-frame 직접 수정도 차단 */
body.viewer-edit-readonly #viewer-frame [contenteditable] {
  pointer-events: none !important;
  user-select: none !important;
  caret-color: transparent;
}
/* 이미지 wrapper drag/resize 핸들 차단 (이미지 자체는 보임). */
body.viewer-edit-readonly #viewer-frame .pb-illust__photo,
body.viewer-edit-readonly #viewer-frame .pb-illust__wrapper {
  pointer-events: none !important;
}
/* v132: 체험전시형 connectObjects 드래그/리사이즈 핸들도 readonly 차단.
   v129 룰이 그림책 한정이라 누락된 거 보강. 다른 친구 잠금 상태에서
   학생이 hotspot 드래그하면 시각적으로 움직이지만 _queueSave가 reject —
   사용자 혼란 차단 위해 시각·인터랙션 둘 다 차단. */
body.viewer-edit-readonly #viewer-frame .connect-object .js-co-move,
body.viewer-edit-readonly #viewer-frame .connect-object .js-co-resize {
  pointer-events: none !important;
  opacity: 0.55 !important;
}
/* HUD 저장 버튼만 차단 — 다른 HUD 액션(▶️ 감상 테스트, 🛤 루트, 🗺 구조, ← 브랜치) 살림 */
body.viewer-edit-readonly .js-edit-save {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ── stage-wrap: letterbox 영역 ──
   v38: 감상 모드도 warm paper로 통일. 종전엔 #000 검정 →
   학생 스마트폰/태블릿에서 letterbox가 검정 영역으로 떠서
   "구조 깨짐"으로 보였음. 페이지(.pb-page)는 box-shadow로 떠 보이므로
   같은 종이톤이어도 페이지 경계 인식됨. */
#stage-wrap {
  flex: 1;
  position: relative;
  background: var(--surface, #fffaee);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* W9 (v5): 다듬기 모드는 동일 톤 유지 — 인스펙터와 같은 톤. */
body.edit-mode-active #stage-wrap {
  background: var(--surface, #fffaee);
}

/* v85: v82에서 넣은 body[data-pb-theme] #stage-wrap 룰 폐기.
   사용자 의도 재정정: letterbox(stage-wrap)는 warm paper(default), scene-screen만
   테마 색. 즉 페이지 카드 둘레 좁은 영역만 테마, 그 바깥 letterbox는 베이지.
   사용자 캡처 비교: 1번(원함) = letterbox warm paper, 2번(원치 X) = letterbox 테마.
   v82~v84에서 넣은 것 정정. */

/* VIEWER-STAGE-THEME-EXTEND-1 (2026-07-08): ↑ v85 결정을 사용자 명시 요구로 재반전.
   감상 그림책에서 레터박스(#stage-wrap) 베이지를 각 테마 '바깥색'으로 연장해 편집 화면처럼
   테마가 뷰포트 끝까지 이어지게(통일감). 무대 안(scene-screen)=정본 스킨(그라디언트+글로우+장식)
   그대로 두고, 무대 밖 여백만 그 테마 그라디언트의 '바깥(하단) 톤' 단색으로 채운다
   (박스 크기 차이로 그라디언트 복제는 이음매가 생겨 단색 근사 채택 — 카드 box-shadow가 경계를 잡아줌).
   :not(.edit-mode-active)로 편집 베이지(위 규칙) 보존. data-pb-theme는 그림책에만 붙어 텍스트/무비 자동 제외.
   ⚠️night-story(다크)는 과거 v38 '검정 letterbox=구조 깨짐' 재발 우려로 사용자 승인 후 별도 추가.
   ⚠️PB-MOOD(엔딩/단계 분위기) 장면은 무대색이 테마 정본과 달라 여백과 미세 색차 가능(1차 수용). */
body[data-pb-theme="cozy-storybook"]:not(.edit-mode-active)     #stage-wrap { background: #e6d8ba; }
body[data-pb-theme="paper-storybook"]:not(.edit-mode-active)    #stage-wrap { background: #dcd3ba; }
body[data-pb-theme="gallery-picturebook"]:not(.edit-mode-active) #stage-wrap { background: #cccbc5; }
body[data-pb-theme="forest-storybook"]:not(.edit-mode-active)   #stage-wrap { background: #e2edd3; }

/* ── viewer-frame: 16:9 작품 무대 ── */
#viewer-frame {
  position: relative;
  width: 100%;
  height: 100%;
  /* JS에서 aspect-ratio 계산 후 max-width/height 적용 */
  overflow: hidden;
  /* W7-A 정정 v6: viewer-frame 자체 배경 검정 → transparent.
     stage.innerHTML 통째 교체 → 빈 검정 stage 잠깐 노출 = 깜빡임.
     배경을 transparent로 두면 새 scene-screen이 들어오기 전 한 프레임 배경이
     비어 보일 수 있지만, 이전 scene-screen이 사라지기 전 새 scene이 그려지면
     깜빡임 안 보임.
     v80: box-shadow 진한 검정(0 0 60px rgba(0,0,0,0.8)) → 부드러운 그림자.
     세로 작품을 가로 화면에서 볼 때 진한 검정 글로우가 표지 색 letterbox
     위에 어두운 박스로 보이던 문제. 책 카드 떠 보이는 효과는 유지하되 약하게. */
  background: transparent;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

/* WIN-TAB-2: 감상(view-only) 상태에서 스테이지 더블탭 줌 지연 제거 → 태블릿 탭 반응 개선.
   manipulation은 핀치줌·스크롤은 그대로 두고 더블탭 줌/300ms 탭 지연만 없앤다.
   다듬기(edit-mode-active)일 땐 제외 — 이미지 이동/리사이즈·그림판 드래그는
   각자 touch-action을 직접 지정하므로 부모에서 건드리지 않는다. */
body:not(.edit-mode-active) #viewer-frame {
  touch-action: manipulation;
}

/* v63/v64: 장면 전환 — 5개 효과 + 작품 단위 viewer-meta.sceneTransition.
   v73: 속도는 CSS 변수 --scene-trans-duration (ms, JS에서 0~100 → 400~3500ms 매핑).
   기본 = fade (살짝 slide-up). 표지 → 첫 장면 등 모든 scene 진입 시 적용. */
#viewer-frame {
  --scene-trans-duration: 1400ms;
  --text-ent-duration:    700ms;
  --text-tw-step:         50ms;
  --text-ent-total:       700ms;
}
.scene-screen {
  /* v133: easing을 더 균등하게.
     옛 cubic-bezier(0.16, 1, 0.3, 1)은 강한 ease-out — 시간의 16~30% 구간에서
     진행률 100%에 도달. 사용자가 "느림으로 설정해도 처음에 휙 지나간다"고 느낀 정확한 원인.
     cubic-bezier(0.4, 0.0, 0.2, 1)은 Material Design standard easing — 시작·중간·끝
     진행률이 균등하게 분포. 3500ms로 설정할 때 후반까지 천천히 진행되는 느낌 살아남.
     fill-mode: both 지정 = 시작 전 from-state 유지 + 끝난 후 to-state 머무름 (안전망). */
  animation: sceneFadeIn var(--scene-trans-duration, 1400ms) cubic-bezier(0.4, 0.0, 0.2, 1) both;
  transform-origin: center center;
}

/* 5개 효과별 animation-name — 부모 #viewer-frame data 속성 기준 */
#viewer-frame[data-transition="fade"]     .scene-screen { animation-name: sceneFadeIn; }
#viewer-frame[data-transition="book"]     .scene-screen { animation-name: sceneBookFlip; }
#viewer-frame[data-transition="scale"]    .scene-screen { animation-name: sceneScaleIn; }
#viewer-frame[data-transition="slide-up"] .scene-screen { animation-name: sceneSlideUp; }
#viewer-frame[data-transition="flip3d"]   .scene-screen { animation-name: sceneFlip3d; }

/* 1) fade — 기본 부드럽게.
   v124: 빠름/느림 차이 체감 향상 — translateY 12px→24px + opacity 시작 더 늦게 잡음.
   변화량 키워서 같은 duration에서도 속도 체감 ↑ (사용자 사건: 빠름/느림 차이 적음). */
@keyframes sceneFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2) book-flip — 책 넘기기 (우→좌 slide + 살짝 rotateY) */
@keyframes sceneBookFlip {
  from {
    opacity: 0;
    transform: translateX(40%) rotateY(-12deg);
    transform-origin: left center;
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0);
    transform-origin: left center;
  }
}

/* 3) scale — 가운데에서 확대.
   v124: 변화량 키움 0.88→0.78. duration 차이가 시각적으로 더 명확히 드러남. */
@keyframes sceneScaleIn {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: scale(1); }
}

/* 4) slide-up — 아래에서 위로 크게 */
@keyframes sceneSlideUp {
  from { opacity: 0; transform: translateY(40%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5) flip3d — 책 펴기 3D. v68: perspective를 parent로 분리 (안정적 3D).
   keyframe transform에 perspective()를 넣으면 element 자체에 적용이라 효과 미묘.
   parent #viewer-frame에 지정해 자식 변환 3D 적용. */
#viewer-frame[data-transition="flip3d"] {
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
#viewer-frame[data-transition="flip3d"] .scene-screen {
  transform-origin: 0% 50%;
  backface-visibility: hidden;
}
@keyframes sceneFlip3d {
  0%   { opacity: 0; transform: rotateY(-90deg); }
  100% { opacity: 1; transform: rotateY(0); }
}

/* v66: 옛 페이지 leaving — 두 layer overlap 효과.
   .scene-screen.is-leaving 클래스가 붙은 옛 페이지가 absolute로 떠 있고
   새 페이지가 normal flow로 등장. 효과별 다른 keyframe 적용. */
.scene-screen.is-leaving {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  animation-fill-mode: forwards !important;
}

/* 효과별 leaving keyframes 매핑 — 부모 #viewer-frame data-transition 기준 */
#viewer-frame[data-transition="fade"]     .scene-screen.is-leaving { animation-name: sceneFadeOut !important; }
#viewer-frame[data-transition="book"]     .scene-screen.is-leaving { animation-name: sceneBookFlipOut !important; }
#viewer-frame[data-transition="scale"]    .scene-screen.is-leaving { animation-name: sceneScaleOut !important; }
#viewer-frame[data-transition="slide-up"] .scene-screen.is-leaving { animation-name: sceneSlideUpOut !important; }
#viewer-frame[data-transition="flip3d"]   .scene-screen.is-leaving { animation-name: sceneFlip3dOut !important; }

/* 1) fade-out — 부드럽게 사라짐 */
@keyframes sceneFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* 2) book-out — 책 페이지 우→좌 넘김 (옛 페이지가 왼쪽으로 슬라이드 아웃) */
@keyframes sceneBookFlipOut {
  from {
    opacity: 1;
    transform: translateX(0) rotateY(0);
    transform-origin: left center;
  }
  to {
    opacity: 0;
    transform: translateX(-80%) rotateY(15deg);
    transform-origin: left center;
  }
}

/* 3) scale-out — 줌 아웃 */
@keyframes sceneScaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.15); }
}

/* 4) slide-up-out — 위로 사라짐 */
@keyframes sceneSlideUpOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-50%); }
}

/* 5) flip3d-out — 옛 페이지 좌측 수직축 3D 회전.
   v68: perspective는 parent #viewer-frame[data-transition="flip3d"]에서. */
@keyframes sceneFlip3dOut {
  0%   { opacity: 1; transform: rotateY(0); }
  100% { opacity: 0; transform: rotateY(-90deg); }
}

/* ──────────────────────────────────────────────────────────────────
   v71: 텍스트 등장 애니메이션 (작품 단위 viewer-meta.textEntrance)
   ──────────────────────────────────────────────────────────────────
   적용 대상: 그림책 모드 본문 + 표지 제목/소개
   효과 6종: none / fade / slide-up / blur-in / pop / typewriter
   typewriter는 JS로 글자 단위 reveal (.pb-text-typing span stagger)
   속도 3종: fast 350ms / normal 700ms / slow 1100ms
   다듬기 모드에선 끔 (입력 깜빡임 차단) */

/* v73: 속도는 CSS 변수 --text-ent-duration / --text-tw-step (JS가 slider 0~100 → ms 매핑).
   delay = var(--text-ent-start-delay) — 장면 전환 끝난 후 텍스트 등장 시작.
   v127: 옛엔 delay = var(--scene-trans-duration). 느림(3500ms) 설정 시 = 본문 5초+ 지연.
   새 변수 --text-ent-start-delay 도입 (JS가 min(sceneTransMs, 2000ms)로 설정).
   미리보기에선 .preview-text-once 붙은 element에 delay 0 강제 (별도 룰). */
#viewer-frame[data-text-entrance]:not([data-text-entrance="none"]) .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance]:not([data-text-entrance="none"]) .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance]:not([data-text-entrance="none"]) .scene-screen--pb .cover-subtitle-pb {
  animation-duration: var(--text-ent-duration, 700ms);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
  animation-delay: var(--text-ent-start-delay, 1400ms);
}

/* 1) fade — opacity 0 → 1 */
#viewer-frame[data-text-entrance="fade"] .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance="fade"] .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance="fade"] .scene-screen--pb .cover-subtitle-pb {
  animation-name: textFadeIn;
}
@keyframes textFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2) slide-up — translateY(14px) + fade */
#viewer-frame[data-text-entrance="slide-up"] .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance="slide-up"] .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance="slide-up"] .scene-screen--pb .cover-subtitle-pb {
  animation-name: textSlideUp;
}
@keyframes textSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3) blur-in — blur(8px) → 0 + fade */
#viewer-frame[data-text-entrance="blur-in"] .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance="blur-in"] .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance="blur-in"] .scene-screen--pb .cover-subtitle-pb {
  animation-name: textBlurIn;
}
@keyframes textBlurIn {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 4) pop — scale(0.7) → 1 살짝 overshoot + fade */
#viewer-frame[data-text-entrance="pop"] .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance="pop"] .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance="pop"] .scene-screen--pb .cover-subtitle-pb {
  animation-name: textPop;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes textPop {
  0%   { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}

/* 5) typewriter — JS가 .pb-text-typing 클래스 붙이고 글자 단위 <span class="tw-char"> 생성.
   각 span은 inline opacity 0 → 1 stagger. animation-delay는 JS가 inline style로 지정.
   본문 한 줄 전체에 효과 적용 (한 글자씩 등장). */
#viewer-frame[data-text-entrance="typewriter"] .scene-screen--pb .pb-text__body,
#viewer-frame[data-text-entrance="typewriter"] .scene-screen--pb .cover-title-pb,
#viewer-frame[data-text-entrance="typewriter"] .scene-screen--pb .cover-subtitle-pb {
  animation: none; /* CSS animation 없음 — JS reveal */
}
.tw-char {
  opacity: 0;
  animation: textTwChar 1ms linear forwards;
  animation-delay: inherit; /* JS가 inline style로 지정 (per-span) */
}
@keyframes textTwChar {
  to { opacity: 1; }
}

/* 다듬기 모드에선 텍스트 등장 효과 끔 — 입력 깜빡임 차단 (v07 동일 정책)
   v72: .preview-text-once 붙은 element만 예외 — 표지 인스펙터에서 효과 미리보기.
   v73: body.preview-active 붙었을 때만 .tw-char 차단 해제 (미리보기 1회 재생).
   v128: viewer-test-active(감상 테스트) 붙었을 때도 예외 — 실제 감상과 동일 조건. */
#viewer-frame.edit-mode-on:not(.viewer-test-active) .scene-screen--pb .pb-text__body:not(.preview-text-once),
#viewer-frame.edit-mode-on:not(.viewer-test-active) .scene-screen--pb .cover-title-pb:not(.preview-text-once),
#viewer-frame.edit-mode-on:not(.viewer-test-active) .scene-screen--pb .cover-subtitle-pb:not(.preview-text-once),
body.edit-mode-active:not(.viewer-test-active) .scene-screen--pb .pb-text__body:not(.preview-text-once),
body.edit-mode-active:not(.viewer-test-active) .scene-screen--pb .cover-title-pb:not(.preview-text-once),
body.edit-mode-active:not(.viewer-test-active) .scene-screen--pb .cover-subtitle-pb:not(.preview-text-once) {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
body.edit-mode-active:not(.preview-active):not(.viewer-test-active) .tw-char {
  animation: none !important;
  opacity: 1 !important;
}
/* v73: typewriter span 룰 — animation은 shorthand 풀어서 inline animation-delay 보존 */
.tw-char {
  opacity: 0;
  animation-name: textTwChar;
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* animation-delay는 inline style로 지정됨 (JS가 글자별 stagger) */
}

/* v73: 미리보기 element는 장면 전환 delay 무시 — 즉시 효과 재생.
   .preview-text-once 붙은 .pb-text__body, .cover-title-pb, .cover-subtitle-pb는 delay 0. */
.preview-text-once {
  animation-delay: 0ms !important;
}

/* v72: 표지 인스펙터 미리보기 — 다듬기 차단 룰 일시 해제.
   장면 전환 효과 미리보기: .scene-screen에 .preview-once 붙이면 animation 1회 재생.
   v73: 속도는 var(--scene-trans-duration) 상속. */
#viewer-frame.edit-mode-on .scene-screen.preview-once,
body.edit-mode-active .scene-screen.preview-once {
  animation-duration: var(--scene-trans-duration, 1400ms);
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}
#viewer-frame[data-transition="fade"]     .scene-screen.preview-once { animation-name: sceneFadeIn !important; }
#viewer-frame[data-transition="book"]     .scene-screen.preview-once { animation-name: sceneBookFlip !important; }
#viewer-frame[data-transition="scale"]    .scene-screen.preview-once { animation-name: sceneScaleIn !important; }
#viewer-frame[data-transition="slide-up"] .scene-screen.preview-once { animation-name: sceneSlideUp !important; }
#viewer-frame[data-transition="flip3d"]   .scene-screen.preview-once { animation-name: sceneFlip3d !important; }

/* ──────────────────────────────────────────────────────────────────
   v73: 행동 버튼(.pb-text__actions) 자동 페이드인
   ──────────────────────────────────────────────────────────────────
   사용자 결정: 행동 버튼 등장 효과는 설정 없음. 항상 텍스트 등장 끝난 후
   1500ms 부드러운 페이드인. 다듬기/감상 모두 적용 (다만 다듬기 모드에선 차단).
   v127: delay = var(--text-ent-start-delay)(min 2초 clamp 적용값) + text-ent-total */
.scene-screen--pb .pb-text__actions {
  animation: actionsFadeIn 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--text-ent-start-delay, 1400ms) + var(--text-ent-total, 0ms));
}
/* VIEWER-PLAY-CLICK-1: v127 지연락 제거(none→auto). 감상 모드에서 행동버튼이 보이는데도
   actionsFadeIn animationend(지연 ~2s+텍스트총+1.5s) 또는 6초 fallback 전까진 pointer-events:none
   이라, 사용자가 그 구간에 누르면 클릭이 조용히 무시되던 문제(AI 재렌더로 락 리셋 시 더 길어짐).
   클릭 신뢰성을 fade 연출보다 우선 — 페이드는 opacity/transform으로만 진행, 클릭은 항상 가능.
   (is-ready 부여 JS는 그대로 두되 이제 클릭 차단에 영향 없음.) */
/* VIEWER-PLAY-CHOICE-UNLINKED-1: 감상 미연결 선택지 — 살짝 비활성처럼 보이되 클릭은 가능
   (pointer-events:none 금지). 눌러도 죽지 않고 안내 토스트가 뜸. */
.choice-v03[aria-disabled="true"],
.choice-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}
/* 감상 토스트 — 화면 하단 중앙, 부드럽게 등장/사라짐. 장면을 가리지 않음. */
.play-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 10006;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  background: rgba(43, 31, 16, 0.92);
  color: #fffaee;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 14px;
  line-height: 1.4;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  cursor: pointer;
  text-align: center;
}
.play-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.scene-screen--pb .pb-text__actions:not(.is-ready) {
  pointer-events: auto;
}
body.edit-mode-active .scene-screen--pb .pb-text__actions {
  pointer-events: auto; /* 다듬기 모드에선 항상 클릭 허용 */
}
@keyframes actionsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 다듬기 모드에선 행동 버튼 페이드 끔 (입력 깜빡임 차단). 미리보기 예외 X — 행동 버튼은 설정 없음.
   v128: 감상 테스트(viewer-test-active) 붙었을 때는 페이드 재생 — 실제 감상과 동일 조건. */
body.edit-mode-active:not(.viewer-test-active) .scene-screen--pb .pb-text__actions {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* book-in 키프레임 강화 — 옛 페이지 왼쪽 넘김과 동시 우측에서 진입 */
@keyframes sceneBookFlip {
  from {
    opacity: 0;
    transform: translateX(80%) rotateY(-15deg);
    transform-origin: right center;
  }
  to {
    opacity: 1;
    transform: translateX(0) rotateY(0);
    transform-origin: right center;
  }
}
/* W7 깜빡임 차단: 다듬기 모드에선 페이드인 끔.
   부분 패치로 대부분 처리되지만, 통째 재렌더 fallback 시에도 페이드인 안 보이게.
   다듬기는 입력이 잦은 상황이라 매번 fade-in이 깜빡임으로 체감됨.
   v72: .preview-once 붙은 scene은 예외 — 표지 인스펙터 미리보기 1회 재생.
   v128: viewer-test-active(감상 테스트) 붙었을 때 예외 — 실제 감상과 동일 조건으로
         장면 전환 효과 재생. 사용자 사건: "느림으로 설정해도 빠르게 넘어가는 인상" 원인. */
#viewer-frame.edit-mode-on:not(.viewer-test-active) .scene-screen:not(.preview-once),
body.edit-mode-active:not(.viewer-test-active) .scene-screen:not(.preview-once) {
  animation: none;
}
/* 화면이 16:9보다 넓을 때: 좌우 레터박스 */
#stage-wrap.letterbox-h #viewer-frame {
  height: 100%;
  width: auto;
  max-width: 100%;   /* W7-A 정정 v5: viewport 폭 절대 안 넘어감 */
  aspect-ratio: 16 / 9;
}
/* 화면이 16:9보다 좁을 때: 상하 필러박스 */
#stage-wrap.letterbox-v #viewer-frame {
  width: 100%;
  height: auto;
  max-height: 100%;  /* W7-A 정정 v5: viewport 높이 절대 안 넘어감 — 결정 패널 잘림 방지 */
  aspect-ratio: 16 / 9;
}

/* ────────────────────────────────────────────────────────
   W9 (v7): 다듬기 모드 viewer-frame = stage 가득 채움.
   사용자 보고: landscape 작품 + 정사각 화면 → 16:9 강제로 위아래 큰 회색
   letterbox 발생 → "구조 깨짐". 해결 = viewer-frame이 stage 가득 +
   페이지(.pb-page)는 container query로 자체 비율 유지하며 contain.
   감상 모드(edit-mode-active 없음)에선 기존 16:9 letterbox 유지.
   ──────────────────────────────────────────────────────── */
body.edit-mode-active #stage-wrap.letterbox-h #viewer-frame,
body.edit-mode-active #stage-wrap.letterbox-v #viewer-frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}

/* ── W9 (v6): portrait 작품 = 다듬기·감상 모두 viewer-frame 비율 세로 책(210:297).
   이전엔 다듬기 모드(edit-mode-on)에선 16:9 강제 — 좁은 화면에서 위아래 잘림 발생.
   사용자 결정: portrait 작품이면 어떤 모드든 portrait 비율 유지. ── */
body[data-page-orientation="portrait"] #stage-wrap.letterbox-h #viewer-frame,
body[data-page-orientation="portrait"] #stage-wrap.letterbox-v #viewer-frame {
  aspect-ratio: 210 / 297;
}

/* ── VIEWER-PLAY-STAGE-FILL-2: 감상 가로 그림책 무대 = 스테이지 꽉 채움(편집과 동일) ──
   (구 STAGE-FILL-1은 무대를 3:2로 letterbox → 바깥에 베이지가 드러났음)
   사용자 요구: 편집 화면(4·5)처럼 우리가 공들인 테마 배경(그라디언트+글로우+텍스처)과
   '장면 분위기(PB-MOOD)'가 뷰포트 끝까지 쭉 이어지게. 해법 = 편집과 똑같이 #viewer-frame을
   스테이지 가득 채우면(aspect auto) scene-screen(테마+분위기 '실제' 배경)이 뷰포트 전체를 칠하고,
   페이지(.pb-page)는 container query로 3:2 비율 유지하며 가운데 contain → 일러스트 크기 동일,
   배경만 끝까지 연장. 분위기는 scene-screen 자체가 그리므로 자동으로 따라감(body 단색 불필요).
   신호=body[data-stage-aspect="pb-landscape"](감상·가로·그림책만). 편집/세로/텍스트/무비 미영향. */
body[data-stage-aspect="pb-landscape"] #stage-wrap.letterbox-h #viewer-frame,
body[data-stage-aspect="pb-landscape"] #stage-wrap.letterbox-v #viewer-frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
}

/* ── safe-area (edit 모드) — 드래그 가능 영역 안내
   평소: 부드러운 테두리만 / 드래그 중: 코너 마커 + 배경 tint 강조 ── */
.safe-area-hint {
  position: absolute;
  /* 드래그 clamp: x 5~95%, y 5~92% 에 맞춤 */
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 8%;
  border: 1px dashed rgba(88,166,255,0.28);
  border-radius: 6px;
  pointer-events: none;
  z-index: 90;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.safe-area-hint.hidden { display: none; }

/* 코너 마커 — ::before/::after로 4개 모서리 표시 */
.safe-area-hint::before,
.safe-area-hint::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88,166,255,0.45);
  transition: border-color 0.18s ease;
}
.safe-area-hint::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}
.safe-area-hint::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 4px;
}

/* 드래그 중 — 영역 활성화 */
#viewer-frame.is-choice-dragging .safe-area-hint {
  border-color: rgba(88,166,255,0.55);
  background-color: rgba(88,166,255,0.04);
}
#viewer-frame.is-choice-dragging .safe-area-hint::before,
#viewer-frame.is-choice-dragging .safe-area-hint::after {
  border-color: var(--accent);
}


/* ================================================================
   Cover 화면
   ================================================================ */
/* v37 (재수정): 표지·엔딩이 메인 장면(picturebook split) 구조 그대로.
   scene-screen--pb 클래스 재사용해 페이지 비율·테마·grid row 다 자동.
   여기선 텍스트 영역 안 콘텐츠 톤만 조정. */

/* v37: 그림 없는 표지 — 책 표지 인쇄 분위기. 빈 그림 영역 폐기.
   페이지 전체를 3분할(위 부제 / 가운데 큰 제목 / 아래 시작 버튼)로 채움. */
.cover-as-pb--text .pb-page {
  display: flex;
  flex-direction: column;
}
.cover-book {
  flex: 1;
  display: grid;
  /* COVER-LONG-TITLE-FIX(#66): 가운데(제목) 행을 minmax(0,2fr)로 — 아주 긴 제목(붙여넣기 등)이
     grid 암묵 min-height:auto로 트랙을 넘겨 커지며 하단 '시작하기' 버튼을 화면 밖으로 밀어내던 것 방지.
     제목이 길면 아래 .cover-book__center 안에서 스크롤(버튼 행 보존). */
  grid-template-rows: 1fr minmax(0, 2fr) 1fr;
  padding: clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.cover-book__top {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.cover-book__top .cover-team-label,
.cover-book__top .cover-kicker {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.3vw, 14px);
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.15em;
  opacity: 0.75;
  padding-top: clamp(4px, 1vw, 12px);
  border-bottom: 1.5px solid rgba(80,50,20,0.15);
  padding-bottom: clamp(6px, 1.2vw, 10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* v129: kicker 비어있으면 border-bottom·padding 다 없애 layout 깔끔하게 */
.cover-book__top .cover-kicker--empty {
  border-bottom: none;
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
}
.cover-class-code {
  font-weight: 700;
  color: var(--text, #2b1f10);
}
.cover-sep {
  opacity: 0.4;
}
.cover-team-name {
  font-weight: 500;
}
.cover-book__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  text-align: center;
  /* COVER-LONG-TITLE-FIX(#66): 트랙을 넘기는 긴 제목은 이 안에서만 스크롤(버튼 밀어내지 않게). */
  min-height: 0;
  overflow-y: auto;
}
.cover-book__center .cover-title-pb {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(28px, 5.5vw, 56px);
  color: var(--text, #2b1f10);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.cover-book__deco {
  color: rgba(80,50,20,0.4);
  font-size: clamp(14px, 1.8vw, 18px);
}
/* v37: 표지 한 줄 소개 */
.cover-subtitle-pb {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--text-muted, #6b5638);
  font-style: italic;
  line-height: 1.5;
  margin: 4px 0 0;
  max-width: 80%;
  text-align: center;
}

/* v37: 표지 테마 (5종) — 배경 색 변경 */
[data-cover-theme="cream"]  .cover-book { background: #f4ecd8; border-radius: 14px; }
[data-cover-theme="sage"]   .cover-book { background: #e8efde; border-radius: 14px; }
[data-cover-theme="sky"]    .cover-book { background: #dde8f2; border-radius: 14px; }
[data-cover-theme="coral"]  .cover-book { background: #f4dccf; border-radius: 14px; }
[data-cover-theme="peach"]  .cover-book { background: #fce0d6; border-radius: 14px; }
[data-cover-theme="lilac"]  .cover-book { background: #e6dcf0; border-radius: 14px; }
[data-cover-theme="mint"]   .cover-book { background: #d8ecdf; border-radius: 14px; }
[data-cover-theme="lemon"]  .cover-book { background: #fbf2c4; border-radius: 14px; }
[data-cover-theme="rose"]   .cover-book { background: #f5d0d0; border-radius: 14px; }
/* default는 종이 톤 그대로 (.pb-page 기본 배경) */
.cover-book__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(4px, 1vw, 12px);
  border-top: 1.5px solid rgba(80,50,20,0.15);
  padding-top: clamp(12px, 2vw, 20px);
}

/* HOTFIX-MOBILE-TEXT-COVER: 모바일(≤600px) 텍스트 표지만 compact.
   기본 .cover-book는 1fr:2fr:1fr로 페이지 전체에 제목/장식/시작버튼을 분산해 모바일에서
   큰 빈 박스처럼 보였다. 모바일만 콘텐츠 기반(auto 행)+중앙 정렬+적정 gap로 모아 준다.
   ★스코프: .cover-as-pb--text = 텍스트 표지 전용. 이미지 표지(cover-as-pb·--text 없음)·
   일반 그림책 장면(cover-as-pb 없음)엔 미적용. 데스크톱/태블릿(>600px) 기존 유지. */
@media (max-width: 600px) {
  .cover-as-pb--text .pb-page {
    justify-content: center;
  }
  .cover-as-pb--text .cover-book {
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
    grid-template-rows: auto auto auto;   /* 1fr:2fr:1fr → 콘텐츠 기반(빈 공간 분산 제거) */
    align-content: center;
    gap: clamp(10px, 2dvh, 18px);         /* 제목·장식·시작버튼을 가깝게 */
    padding: clamp(20px, 5vw, 32px) clamp(18px, 5vw, 32px);
  }
  /* center 행 내부(제목·장식) 간격도 축소 */
  .cover-as-pb--text .cover-book__center { gap: clamp(8px, 1.5dvh, 14px); }
  /* bottom(시작버튼) 상단 여백 축소 — 제목과 가깝게 */
  .cover-as-pb--text .cover-book__bottom { padding-top: clamp(10px, 2dvh, 16px); }
}

/* 표지 텍스트 영역 — 가운데 정렬 + 작품 정보 */
.pb-text--cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
  text-align: center;
}
.cover-team-label,
.cover-kicker {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.2vw, 14px);
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
/* v129: kicker 비어있으면 그림 표지에서도 layout 자리만 차지 + 안 보이게 */
.pb-text--cover .cover-kicker--empty {
  visibility: hidden;
  min-height: 1em;
}
.cover-title-pb {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(20px, 3vw, 32px);
  color: var(--text, #2b1f10);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.005em;
}
.cover-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--text-muted, #6b5638);
  background: rgba(255,250,238,0.7);
  border: 1px solid rgba(80,50,20,0.15);
  border-radius: 50px;
  padding: 4px 12px;
  letter-spacing: 0.05em;
}
.cover-start-btn {
  /* v37 조정: 더 적당한 크기 */
  padding: clamp(8px, 1.2vw, 11px) clamp(20px, 2.8vw, 30px);
  border: none;
  background: #c66f4a;
  color: #fff;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(13px, 1.5vw, 15px);
  border-radius: 50px;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(198,111,74,0.20),
    0 6px 16px rgba(198,111,74,0.30);
  transition: filter 0.15s, transform 0.08s;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cover-start-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cover-start-btn:active { transform: translateY(0) scale(0.98); }

/* 엔딩 텍스트 영역 — 메인 장면 .pb-text 구조 + 엔딩 전용 콘텐츠.
   2026-05-25 fix: justify-content:center 제거. 안내 영역이 줄어든 만큼 본문이
   실제로 그 공간을 차지하도록, 자식들 사이의 flex grow 분배로 처리한다.
   · 본문(.ending-user-body)만 flex:1 1 auto + 내부 스크롤
   · 나머지(title / meta-inline / actions)는 flex:0 0 auto로 자기 높이만 차지 */
.pb-text--ending {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  gap: clamp(6px, 1.2vw, 12px);
  padding: clamp(12px, 2vw, 20px);
  min-height: 0; /* 부모가 좁아도 child overflow 정상 동작 */
}
.pb-text--ending .ending-user-title {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(10px, 1.1vw, 12px);
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0;
  flex: 0 0 auto;
}
/* v77: textStyle CSS 변수(--pb-*) fallback 적용 — 사용자가 엔딩 인스펙터에서
   글자 스타일 지정하면 그것 우선, 지정하지 않으면 기존 default (Jua 등) 유지. */
.pb-text--ending .ending-user-body {
  /* LEVELS-FEEDBACK(2026-07-19): 엔딩 기본 글꼴이 'Jua'(통통체)라 "엔딩만 굵은 기본"으로 보임 —
     일반 장면 본문 기본(Gowun Batang)과 동일하게. 사용자가 고른 --pb-font-family는 그대로 우선. */
  font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  font-size: var(--pb-fs-body, clamp(16px, 2.4vw, 24px));
  /* D9-7C: 엔딩 기본 color 미방출(viewer-data) 후에도 split/legacy/movie/explore 엔딩은
     기존 #2b1f10 그대로(무회귀) — --text 단계 제거로 fairybook/explore의 밝은 --text로 새지 않게 고정.
     사용자 명시 색(--pb-color-override)은 그대로 우선. imageCenter 엔딩은 .pb-text__body 스킨 fallback 별도. */
  color: var(--pb-color-override, #2b1f10);
  line-height: 1.4;
  /* ENDING-WEIGHT-DEFAULT(2026-07-16): 기본 600(semibold)이 "엔딩만 굵게"로 보임 —
     일반 본문(v03-modes --pb-fw-body 기본 400)과 동일하게 400. 사용자가 굵게 고르면
     --pb-fw-body=700이 그대로 우선(기본값만 변경). */
  font-weight: var(--pb-fw-body, 400);
  margin: 0;
  white-space: pre-wrap; /* v127: 엔딩 본문 줄바꿈/빈 줄 유지 (사용자가 입력한 \n\n 등) */
  /* 2026-05-25 fix: 본문이 남는 세로 공간을 모두 가져가고,
     길어지면 본문 안에서만 스크롤. hard-coded height 사용하지 않음. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.ending-stamps-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
  flex-wrap: wrap;
}
/* "이야기 끝" 도장 */
.ending-end-stamp {
  font-family: 'Cormorant Garamond', var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.3vw, 14px);
  color: #c66f4a;
  border: 2px solid #c66f4a;
  border-radius: 6px;
  padding: 4px 12px;
  letter-spacing: 0.12em;
  transform: rotate(-3deg);
  display: inline-block;
  opacity: 0.88;
  font-weight: 600;
}
.pb-text--ending .ending-true-badge {
  background: linear-gradient(135deg, #d4a017, #f2c43f);
  color: #3a2810;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.2vw, 13px);
  border: 1px solid rgba(60,40,15,0.25);
  border-radius: 50px;
  padding: 3px 12px;
}
.pb-text--ending .ending-mood {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--text-muted, #6b5638);
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}
.pb-text--ending .ending-path-summary {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(10px, 1.1vw, 12px);
  color: #c66f4a;
  opacity: 0.85;
  margin: 0;
}
/* 2026-05-25: 엔딩 안내 한 줄 압축 (인라인).
   기존 2-wrapper(.ending-stamps-row + .ending-path-summary-wrap) 구조를
   1-wrapper(.pb-ending-meta-inline)로 합쳤음. 다음 원칙 유지:
   · 한 줄 강제 유지 — flex-wrap: nowrap
   · 좁아져도 두꺼운 2줄로 되돌아가지 않음 — path 문구는 ellipsis로 잘림
   · 안내 영역이 차지하는 세로 공간이 줄어들면, 부모(.pb-text--ending)의
     justify-content:center 적용된 flex 컬럼 구조에서 자연스럽게 본문이 더
     여유 있게 가운데 자리 잡음 (본문 영역 hard-coded 변경 없음). */
.pb-text--ending .pb-ending-meta-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 4px 0;
  min-width: 0;
  line-height: 1.2;
  flex: 0 0 auto; /* 2026-05-25: 자기 높이만 차지 (본문이 남는 공간 가져감) */
}
.pb-text--ending .pb-ending-meta-inline .ending-end-stamp,
.pb-text--ending .pb-ending-meta-inline .ending-true-badge {
  flex-shrink: 0;
}
.pb-text--ending .pb-ending-meta-inline .pb-ending-meta-path {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(10px, 1.1vw, 12px);
  color: #c66f4a;
  opacity: 0.85;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
.ending-actions {
  margin-top: clamp(4px, 1vw, 8px);
}
/* 2026-05-25: 엔딩 텍스트 영역 내부의 액션 행은 자기 높이만 차지.
   (.pb-text--ending 안에서만 적용 — 다른 컨텍스트 영향 없음) */
.pb-text--ending .ending-actions {
  flex: 0 0 auto;
}
/* v88: 엔딩 행동 버튼이 세로로 길쭉하게 stretch되던 문제 fix.
   원인: v03-modes.css line 744 `.scene-screen--pb.pb--split .pb-text__actions`가
   flex: 0 0 60% + align-items: stretch를 지정해서 일반 그림책 행동 버튼처럼 영역
   60% 차지 + 버튼 cross-axis stretch. 엔딩은 행동 버튼이 자체 크기만 차지해야. */
.scene-screen--pb.pb--split.ending-as-pb .pb-text__actions,
.scene-screen--pb.pb--split.ending-as-pb .ending-actions {
  flex: 0 0 auto !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.ending-actions .terminal-btn {
  /* v89: v87 모양 좋다, height만 두 배. padding 3→8, font 12→14.
     height 약 22px → 약 38px (1.7배). */
  padding: 8px 14px !important;
  border-radius: 7px !important;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 14px !important;
  cursor: pointer;
  transition: filter 0.15s, transform 0.08s;
  font-weight: 600;
}
.ending-actions .terminal-btn--primary {
  background: #c66f4a;
  border: none;
  color: #fff;
  box-shadow: 0 2px 4px rgba(198,111,74,0.20), 0 6px 16px rgba(198,111,74,0.30);
}
.ending-actions .terminal-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ending-actions .terminal-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(80,50,20,0.20);
  color: var(--text-muted, #6b5638);
}
.ending-actions .terminal-btn--ghost:hover {
  background: rgba(80,50,20,0.06);
  border-color: rgba(80,50,20,0.35);
}

/* ─────────────────────────────────────────────────────────────
   v133: 엔딩 순차 등장 — terminal-step CSS variable 기반
   ─────────────────────────────────────────────────────────────
   pb-text--ending에 inline style로 지정된 delay/duration 변수:
   --terminal-body-delay / --terminal-badge-delay / --terminal-stats-delay
   --terminal-actions-delay / --terminal-item-duration

   각 .terminal-step--* 요소는 opacity 0 + translateY(8px)로 시작하고
   지정된 delay 후 fade + slide-up으로 등장.
   다듬기 모드(.is-edit-static)에서는 즉시 정적 표시 — 깜빡임 차단.
   ───────────────────────────────────────────────────────────── */
.pb-text--ending .terminal-step {
  opacity: 0;
  transform: translateY(8px);
  animation-name: terminalStepIn;
  animation-duration: var(--terminal-item-duration, 500ms);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}
.pb-text--ending .terminal-step--title {
  animation-delay: var(--terminal-body-delay, 250ms);
}
.pb-text--ending .terminal-step--body {
  animation-delay: var(--terminal-body-delay, 250ms);
}
.pb-text--ending .terminal-step--badge {
  animation-delay: var(--terminal-badge-delay, 750ms);
}
.pb-text--ending .terminal-step--stats {
  animation-delay: var(--terminal-stats-delay, 1100ms);
}
.pb-text--ending .terminal-step--actions {
  animation-delay: var(--terminal-actions-delay, 1500ms);
}

@keyframes terminalStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 다듬기 모드 — 순차 등장 재생 X (인스펙터 조작 시 깜빡임 차단).
   v128 viewer-test-active 붙은 경우(감상 테스트)는 정상 재생. */
body.edit-mode-active:not(.viewer-test-active) .pb-text--ending.is-edit-static .terminal-step {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 버튼 등장 전 클릭 차단 — is-locked 붙은 동안 pointer-events:none.
   다듬기 모드(viewer-edit-readonly 붙은 경우 제외)에선 즉시 클릭 가능. */
.pb-text--ending .ending-actions.is-locked {
  pointer-events: none;
}
.pb-text--ending .ending-actions.is-ready {
  pointer-events: auto;
}
body.edit-mode-active:not(.viewer-test-active) .pb-text--ending .ending-actions {
  pointer-events: auto;
}

/* 페이지 (책 표지) — A4 비율, 장면과 동일 톤 */
.cover-page {
  position: relative;
  aspect-ratio: 297 / 210;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--v03-card-bg, #fffaee);
  border-radius: 14px;
  border: 1px solid rgba(80,50,20,0.08);
  box-shadow:
    0 2px 6px rgba(120,90,50,0.10),
    0 16px 48px rgba(120,90,50,0.18),
    0 32px 64px rgba(120,90,50,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeUp var(--t-slow, 420ms) ease both;
}
@container coverstage (aspect-ratio > 297/210) {
  .cover-page { width: auto; height: 100%; }
}
@container coverstage (aspect-ratio <= 297/210) {
  .cover-page { width: 100%; height: auto; }
}
body[data-page-orientation="portrait"] .cover-page {
  aspect-ratio: 210 / 297;
}
@container coverstage (aspect-ratio > 210/297) {
  body[data-page-orientation="portrait"] .cover-page { width: auto; height: 100%; }
}
@container coverstage (aspect-ratio <= 210/297) {
  body[data-page-orientation="portrait"] .cover-page { width: 100%; height: auto; }
}

/* 표지 그림 (있으면) — 위쪽 배경 */
.cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: blur(1px);
}
.cover-bg-overlay { display: none; }   /* 어두운 오버레이 폐기 */
.cover-bg-solid {
  display: none;   /* 별도 solid 배경 안 씀 — .cover-page 자체 색 사용 */
}

/* 표지 콘텐츠 — 가운데 정렬 */
.cover-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.cover-team {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cover-title {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(28px, 5.5vw, 56px);
  color: var(--text, #2b1f10);
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* 책 표지 장식 — 제목 위/아래 가는 선 */
.cover-title-decoration {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(80,50,20,0.30);
  font-size: 12px;
  margin: 4px 0;
}
.cover-title-decoration::before,
.cover-title-decoration::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(80,50,20,0.25);
}
.cover-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 12px;
  color: var(--text-muted, #6b5638);
  background: rgba(255,250,238,0.7);
  border: 1px solid rgba(80,50,20,0.15);
  border-radius: 50px;
  padding: 5px 14px;
  letter-spacing: 0.05em;
}
.cover-start-btn {
  margin-top: clamp(8px, 2vw, 20px);
  padding: clamp(12px, 1.8vw, 16px) clamp(28px, 4vw, 44px);
  border: none;
  background: #c66f4a;
  color: #fff;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(16px, 2vw, 19px);
  border-radius: 50px;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(198,111,74,0.20),
    0 6px 16px rgba(198,111,74,0.30);
  transition: filter 0.15s, transform 0.08s, box-shadow 0.15s;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cover-start-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(198,111,74,0.25),
    0 10px 24px rgba(198,111,74,0.35);
}
.cover-start-btn:active { transform: translateY(0) scale(0.98); }

/* ================================================================
   Scene 화면
   ================================================================ */
.scene-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  animation: fadeIn var(--t-mid) ease both;
}

.scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.scene-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100%);
}
.scene-bg-overlay--dark { background: rgba(0,0,0,0.7); }
.scene-bg-solid {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
/* v37: 어두운 그라데이션 폐기 — warm paper 톤. 엔딩 페이지 카드 안에 담김. */
.scene-bg-solid--ending  { background: var(--v03-card-bg, #fffaee); }
.scene-bg-solid--explore { background: linear-gradient(135deg, #040d1a, #081428); }

.scene-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 16px;
  overflow: hidden;
}

/* ── 텍스트 박스 ── */
/* ================================================================
   텍스트 박스 — 연출 1차 (text-box 재설계)
   · 기본: 내레이션 카드 (안정적)
   · --short:  분위기/강조 (중앙, 크고 공기 많음)
   · --medium: 일반 내레이션 (기본)
   · --long:   읽기 모드 (좌측 정렬, 스크롤)
   프리셋별 text-page / map-layout 추가 연출은 하단 TEMPLATE 섹션에서 오버라이드
   ================================================================ */
.text-box {
  width: 100%;
  max-width: 680px;                                       /* 720 → 680 : 책 한 단 느낌 */
  background: rgba(10,16,26,0.56);                        /* 순검정 대신 살짝 푸른 심층 */
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
  border: 1px solid rgba(255,255,255,0.06);               /* 더 은은 */
  border-left: 2px solid rgba(180,200,230,0.26);          /* 내레이션 인용 — 3px → 2px, 톤 다운 */
  border-radius: 10px;
  padding: 24px 30px;                                     /* 살짝 넉넉 */
  box-shadow: 0 18px 54px rgba(0,0,0,0.32);               /* 더 깊고 부드러운 그림자 */
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ── 길이별 연출 ── */
.text-box--short {
  /* 분위기 장면 — 한 줄 강조: 중앙 정렬, 크고 공기 많음 */
  max-width: 580px;
  padding: 30px 40px;
  border-left-width: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(10,16,26,0.48);
  text-align: center;
}
.text-box--short .text-box__body {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.75;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.text-box--medium {
  /* 일반 내레이션 — 기본 톤 유지 */
}
.text-box--medium .text-box__body {
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.text-box--long {
  /* 감성화 3차 — 모달 → 페이지 하단 서술 영역 ──
     구조적 전환: 중앙 유리 카드를 해체하고 '장면 하단에서 올라오는 서술 블록'으로.
     border/radius/그림자 제거, 배경은 상단이 투명한 그라디언트로 장면과 연결.
     scene-content의 justify-content:center 영향 하에서 margin-top:auto로
     하단에 밀착시킴.
     감성화 4차 — 유리 박스 잔재 제거:
       · max-height 46vh → 40vh (화면 점유 축소, 하단 영역만)
       · padding 더 얇게
       · 배경 그라디언트 더 옅게 (0.78 → 0.62 / 0.62 → 0.42)
       · backdrop-filter blur(6) → blur(3): 유리질감 최소화 */
  max-width: 760px;
  max-height: 40vh;
  padding: 22px 30px 20px;
  background: linear-gradient(
    to top,
    rgba(6,10,18,0.62) 0%,
    rgba(6,10,18,0.42) 55%,
    rgba(6,10,18,0.0) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-top: auto;
  margin-bottom: 0;
}
.text-box--long .text-box__body {
  font-size: clamp(14px, 1.9vw, 17px);
  line-height: 1.95;
  text-align: left;
  letter-spacing: 0.008em;
}
/* 스크롤 영역도 max-height 동기화 */
.text-box--long .text-box__body--scroll {
  max-height: calc(40vh - 44px);
}

/* ── 기본 본문 스타일 (길이별 오버라이드 가능) ── */
.text-box__body {
  font-size: clamp(15px, 2vw, 20px);
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: pre-wrap;
  word-break: keep-all;
  text-align: left;
}

/* 스크롤 본문 — 얇은 스크롤바 + 상하 fade 힌트 */
.text-box__body--scroll {
  overflow-y: auto;
  max-height: calc(56vh - 48px);
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  /* 상/하단 fade로 "아래/위에 더 있다" 힌트 */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 16px,
    black calc(100% - 16px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 16px,
    black calc(100% - 16px),
    transparent 100%
  );
}
.text-box__body--scroll::-webkit-scrollbar { width: 4px; }
.text-box__body--scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* ================================================================
   선택지
   ================================================================ */

/* ── bottom 선택지 ── */
.choices-bottom {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;         /* 감성화 2차 — 버튼이 컨테이너 중앙에 모이도록 */
  gap: 10px;
  padding: 16px 24px 24px;
  width: 100%;
  /* 감성화 3차 — text-box(--medium 680px)와 같은 수직 축으로 정렬
     → 텍스트와 선택지가 한 페이지의 두 블록처럼 보이도록 */
  max-width: 680px;
  margin: 0 auto;
}
/* 감성화 2차 — 긴 텍스트 장면에서는 상단 패딩 살짝 확대해 읽기↔선택 전환 여유
   감성화 3차 — long에서는 text-box 폭(760)과 통일하고, 페이지 하단 서술 영역과
   자연스럽게 이어지도록 상단 패딩 축소 (서술 → 선택이 한 흐름) */
.scene-screen[data-text-len="long"] .choices-bottom {
  padding-top: 10px;
  max-width: 760px;
}
/* 감성화 3차 — long 장면은 scene-content의 하단 패딩 제거로 text-box와
   choices-bottom 간격을 호흡으로만 두고 시각적으로 잇기 */
.scene-screen[data-text-len="long"] .scene-content {
  padding-bottom: 0;
}

/* ── overlay 선택지 컨테이너 ── */
.choice-overlay-wrap {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -50%);
}

/* ── 공통 버튼 ── */
.choice-btn {
  position: relative;
  display: block;
  /* 감성화 2차 — 밀도 차등 ──
     width: 100% → fit-content로 전환. 짧은 선택지는 내용만큼, 긴 선택지는
     max-width까지 자라 여러 줄 감쌈. min-width로 최소 터치 타깃 보장. */
  width: fit-content;
  min-width: 220px;
  max-width: min(100%, 620px);
  padding: 16px 44px 16px 24px;          /* 우측 화살표, 좌측 라인 공간 */
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  cursor: pointer;
  text-align: left;                      /* 버튼 중앙정렬보다 갈림길/내레이션 느낌 */
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
/* 좌측 얇은 세로 indicator — hover 시 진해짐 */
.choice-btn::before {
  content: '';
  position: absolute;
  left: 12px; top: 22%; bottom: 22%;
  width: 2px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 2px;
  transition: opacity var(--t-fast), top var(--t-fast), bottom var(--t-fast);
}
/* 우측 화살표 — 선택의 방향 힌트, hover 시 살짝 이동 */
.choice-btn::after {
  content: '›';
  position: absolute;
  right: 20px;
  top: 50%;
  font-size: 22px;
  line-height: 1;
  opacity: 0.42;
  transform: translateY(-52%);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.choice-btn:hover::before { opacity: 0.85; top: 14%; bottom: 14%; }
.choice-btn:hover::after  { opacity: 0.95; transform: translate(5px, -52%); }
.choice-btn:hover         { filter: brightness(1.08); }    /* 버튼 들썩임 제거 — 갈림길 느낌 */
.choice-btn:active        { transform: scale(.985); }       /* 눌림 피드백은 남김 */
.choice-btn[disabled]     { opacity: .4; cursor: not-allowed; }
.choice-btn[disabled]::before,
.choice-btn[disabled]::after { opacity: 0.15; }

/* preset: basic — 차분한 액센트 톤 */
.choice-preset--basic {
  background: rgba(88,166,255,0.10);
  border: 1px solid rgba(88,166,255,0.32);
  color: var(--accent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 감성화 3차 — text-box와 같은 방향·계열의 소프트 그림자
     (위에서 아래로 무거워지는 공통 광원 — 한 페이지 요소감) */
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.choice-preset--basic:hover {
  background: rgba(88,166,255,0.16);
  border-color: rgba(88,166,255,0.55);
}

/* preset: ghost — 배경을 거의 그대로 드러내는 얇은 카드 */
.choice-preset--ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.choice-preset--ghost:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.28);
}

/* preset: pin — 강조용 (진엔딩 트리거 등). 밝은 단색 유지하되 덜 공격적으로 */
.choice-preset--pin {
  background: var(--accent2);
  border: none;
  color: #1a1a1a;
  box-shadow: 0 10px 26px rgba(240,160,0,0.38);
  font-weight: 600;
}
.choice-preset--pin::before { background: rgba(0,0,0,0.4); }
.choice-preset--pin::after  { color: rgba(0,0,0,0.55); }

/* overlay 선택지 — 장면 속 특정 위치에 꽂히는 작은 칩. ──
   감성화 3차: 대비 안전장치 보강 ──
   어떤 배경(흰 털/모래/하늘/풀밭 등) 위에서도 최소 가독성 보장.
   어두운 바닥 + 백색 글자 + text-shadow + inset ring의 4중 안전장치.
   preset별 색조 차등은 포기하고 overlay에서는 공통 안정 톤으로 통일.

   감성화 4차 — 밝은 배경 안전성 한 단계 더 ──
   핵심 추가: backdrop-filter brightness(0.72)
     → 버튼 영역 '배경 자체를 눌러' 어떤 배경색에서도 일정 대비 확보.
       배경 rgba 값만 올리는 방식은 밝은 배경에선 여전히 투명하게 느껴짐.
       brightness 필터는 아래 배경을 직접 어둡게 만들어 절대적 대비 바닥 생성.
   추가 보강: 이중 text-shadow (근접 + 확산) + 바깥 1px 어두운 halo(box-shadow).
     · pill 형태(50px radius)로 자연스러운 꽂힘
     · soft drop-shadow로 장면 위에 '떠있는' 존재감
     · hover 시 살짝 부상 + shadow 깊어짐
     · 작은 칩이므로 좌측 라인은 빼고, 하단에 얇은 underline만 유지 */
.choice-btn--overlay {
  white-space: nowrap;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 10px 18px;
  text-align: center;
  border-radius: 50px;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  /* ── 대비 안전장치 (4차 보강) ── */
  background: rgba(10,14,24,0.42);                             /* 0.48 → 0.42, brightness와 합쳐 과도하지 않게 */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: brightness(0.72) blur(14px) saturate(118%); /* ★ 배경 자체를 눌러 일정 대비 */
  -webkit-backdrop-filter: brightness(0.72) blur(14px) saturate(118%);
  text-shadow:
    0 1px 4px rgba(0,0,0,0.75),                                /* 근접 그림자 — 글자 윤곽 */
    0 0 12px rgba(0,0,0,0.5);                                  /* 확산 그림자 — 밝은 배경에서 글자 분리 */
  box-shadow:
    0 6px 18px rgba(0,0,0,0.32),                               /* 떠있는 그림자 */
    0 0 0 1px rgba(0,0,0,0.22),                                /* ★ 바깥 1px halo — 밝은 배경에서 버튼 윤곽 확보 */
    inset 0 0 0 1px rgba(255,255,255,0.1);                     /* 안쪽 ring — 경계 이중 */
}
.choice-btn--overlay:hover {
  background: rgba(10,14,24,0.55);
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: brightness(0.68) blur(14px) saturate(120%);
  -webkit-backdrop-filter: brightness(0.68) blur(14px) saturate(120%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.4),
    0 0 0 1px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.choice-btn--overlay:active {
  transform: translateY(0) scale(0.97);
}

/* pin preset만은 강조 톤 유지 — 진엔딩 트리거 등 중요 선택
   4차: pin은 밝은 단색이라 brightness 누르기 부적합 — 제거하고 기존 강조 유지 */
.choice-btn--overlay.choice-preset--pin {
  background: var(--accent2);
  color: #1a1a1a;
  border: none;
  text-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 8px 22px rgba(240,160,0,0.42),
    0 0 0 1px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(0,0,0,0.12);
}
.choice-btn--overlay.choice-preset--pin:hover {
  background: #f0c030;
  box-shadow:
    0 12px 28px rgba(240,160,0,0.48),
    0 0 0 1px rgba(0,0,0,0.2),
    inset 0 0 0 1px rgba(0,0,0,0.16);
}

/* overlay는 bottom용 ::after(우측 화살표) 비활성 — 작은 칩에 과한 장식 */
.choice-btn--overlay::after { display: none; }

/* overlay ::before를 '좌측 세로 라인'에서 '하단 가는 underline'으로 재용도 ──
   '여기로 갈 수 있다'는 미세 힌트, 평소엔 거의 안 보이고 hover 시 진해짐.
   대비 안전장치 보강: 평소 opacity 0.28 → 0.4 — 밝은 배경에서도 감지되도록 */
.choice-btn--overlay::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 6px;
  top: auto;
  width: auto;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 0;
  transition: opacity var(--t-fast), left var(--t-fast), right var(--t-fast);
}
.choice-btn--overlay:hover::before {
  opacity: 0.85;
  left: 14%;
  right: 14%;
}
.choice-btn--overlay.choice-preset--pin::before {
  opacity: 0.3;                              /* pin은 자체가 강조색이라 underline 더 옅게 */
  background: rgba(0,0,0,0.5);
}

/* ================================================================
   Terminal 화면
   ================================================================ */
.terminal-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--t-mid) ease both;
}
.terminal-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 520px;
  padding: 40px 24px;
}
.terminal-icon  { font-size: 52px; margin-bottom: 16px; }
.terminal-title {
  font-family: var(--font-ui);
  font-size: clamp(20px, 4vw, 32px);
  color: var(--text);
  margin-bottom: 16px;
}
.terminal-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 24px;
  white-space: pre-wrap;
  word-break: keep-all;
}
.ending-hint {
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 28px;
}
.ending-true-badge {
  display: inline-block;
  background: linear-gradient(135deg, #b08000, #f0c000);
  color: #1a1a00;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.terminal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.terminal-btn {
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--font-ui);
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--t-fast), filter var(--t-fast);
}
.terminal-btn:hover  { transform: translateY(-2px); filter: brightness(1.15); }
.terminal-btn:active { transform: scale(.97); }
.terminal-btn--primary {
  background: var(--accent);
  border: none;
  color: #fff;
}
.terminal-btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
}

/* explore 통계 */
.explore-stats {
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--explore);
}
.explore-progress {
  height: 4px;
  background: var(--surface2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.explore-progress-bar {
  height: 100%;
  background: var(--explore);
  border-radius: 2px;
  transition: width var(--t-slow);
}

/* ================================================================
   오디오 버튼
   ================================================================ */
.audio-btn {
  position: absolute;
  bottom: 80px;
  right: 24px;
  z-index: 20;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--t-fast);
}
.audio-btn:hover { background: var(--surface2); }

/* ================================================================
   Edit Panel
   ================================================================ */
.edit-panel-inner { padding: 16px; }

/* ── 장면 네비게이터 ── */
.edit-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.edit-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edit-nav-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-nav-btn:hover:not(:disabled) {
  background: rgba(88,166,255,0.14);
  border-color: var(--accent);
}
.edit-nav-btn:disabled { opacity: .3; cursor: not-allowed; color: var(--text-muted); }

/* 정보 영역 — 2줄 구조 (상단: 번호+배지+카운터 / 하단: 제목) */
.edit-nav-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-ui);
  text-align: center;
  overflow: hidden;
}
.edit-nav-info-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 4px 6px;
  row-gap: 6px;
  line-height: 1.5;
}
.edit-nav-num {
  color: var(--accent);
  font-weight: bold;
  white-space: nowrap;
}
.edit-nav-counter {
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}
.edit-nav-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.3px;
}
.edit-nav-badge--start {
  background: rgba(86, 211, 100, 0.16);
  color: #56d364;
  border: 1px solid rgba(86, 211, 100, 0.35);
}
.edit-nav-badge--normal {
  background: rgba(139, 148, 158, 0.14);
  color: var(--text-muted);
  border: 1px solid rgba(139, 148, 158, 0.28);
}
.edit-nav-badge--ending {
  background: rgba(248, 81, 73, 0.14);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.35);
}
/* v39: 표지 배지 — 보라 톤 (structure-map-node--cover와 동조) */
.edit-nav-badge--cover {
  background: rgba(155, 109, 202, 0.16);
  color: #b87cd9;
  border: 1px solid rgba(155, 109, 202, 0.4);
}
/* ── 역할 배지 (구조 개편 1차 + UI 언어 정리 1차) ──
   '시작'은 타입이 아니라 역할. 주배지(일반/엔딩) 옆에 보조 표시. */
.edit-nav-role {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.edit-nav-info-title {
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* ── 장면 점프 select ── */
.edit-nav-jump {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.edit-nav-jump:hover  { border-color: var(--accent); }
.edit-nav-jump:focus  { outline: none; border-color: var(--accent); background-color: rgba(88,166,255,0.06); }
.edit-nav-jump option { background: var(--surface); color: var(--text); }

/* ── PANEL-BACKBONE-1A-i: HUD 아래 독립 장면 이동 바(#edit-panel 밖) ──
   #player-screen(flex column)에서 #hud와 .player-body(flex:1) 사이의 thin row.
   내부는 기존 .edit-nav-* 글로벌 스타일 재사용(2563~). 빈 상태면 공간 0. */
.scene-navigator:empty { display: none; }
#scene-navigator {
  position: relative;
  z-index: 50;
  flex-shrink: 0;
  display: flex;
  justify-content: center;   /* PANEL-BACKBONE-1A-ii: compact 중앙정렬 */
  padding: 6px 14px 8px;
  background: var(--surface);
  /* VIEWER-AI-MODE-BAR-1A: 보기 모드/navigator 영역의 거슬리는 회색 가로 라인 제거.
     navigator는 자체 배경(var(--surface))으로 구분되고, 위 maker-return-bar가 상단 경계 제공. */
  border-bottom: none;
}
#scene-navigator .edit-nav {
  width: min(100%, 760px);   /* compact: full-width 펼침 방지 */
  margin: 0 auto;
  padding: 0;
  border-bottom: 0;
  gap: 6px;
}
/* VIEWER-EDIT-TOPBAR-1: navigator 1줄 통합 — [←][select 장면 N · 유형][N/총][→] 중앙 정렬.
   기존 --main(번호+배지 줄)/--jump(select 줄) 2줄 → --single 한 줄. */
#scene-navigator .edit-nav-row--single {
  justify-content: center;   /* ←/→가 화면 끝이 아닌 select/카운터 주변으로 모임 */
  gap: 10px;
}
#scene-navigator .edit-nav-jump {
  max-width: min(100%, 480px);   /* 좁은 폭에서 가로 overflow 방지 + 카운터 공간 확보 */
}
/* readonly 예외 — 잠금 중에도 장면 이동 허용(기존 839~849는 #edit-panel scope라 미적용).
   저장/편집 컨트롤 차단은 그대로 두고, 이 바(nav)만 살린다. */
body.viewer-edit-readonly #scene-navigator,
body.viewer-edit-readonly #scene-navigator button,
body.viewer-edit-readonly #scene-navigator select {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* ── PANEL-BACKBONE-1B: 잠금 안내/인수 배너(#edit-panel 밖) ──
   #player-screen(flex column)에서 #hud와 #scene-navigator 사이. 잠금 시 _applyEditLockUI가
   내용을 채우고, 비잠금 시 비움(:empty→display:none). 알림 박스 스타일은 .edit-lock-banner(4379) 재사용. */
#edit-lock-alert:empty { display: none; }
#edit-lock-alert {
  box-sizing: border-box;
  width: min(100%, 760px);
  margin: 8px auto 0;        /* flex column 안에서 중앙 + max 760 */
  position: relative;
  z-index: 50;
}
/* readonly 예외 — 잠금 중에도 인수/재확인/내가수정하기 버튼 클릭 가능(기존 840~849는 #edit-panel scope라
   새 위치엔 미적용). 저장/편집/팝오버 차단은 그대로. */
body.viewer-edit-readonly #edit-lock-alert,
body.viewer-edit-readonly #edit-lock-alert button {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* ── 드래그 안내 힌트 ── */
.edit-drag-hint {
  background: rgba(88,166,255,0.08);
  border: 1px solid rgba(88,166,255,0.2);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--accent);
  margin: 6px 0;
  text-align: center;
}

/* ── 투명도 단계 버튼 ── */
.edit-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.edit-opacity-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  transition: background var(--t-fast);
}
.edit-opacity-btn:hover { background: rgba(88,166,255,0.12); color: var(--accent); }
.edit-opacity-val {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text);
  min-width: 42px;
  text-align: center;
}
.edit-panel-title {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.edit-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.edit-tab {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-tab--active, .edit-tab:hover {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--accent);
}
.edit-row {
  /* W9 v2: 한 화면에 더 많은 설정 들어오게 spacing 14 → 10 축소 */
  margin-bottom: 10px;
}
.edit-row--hidden { display: none; }
.edit-label {
  /* v36: 사용자 요청 — 인스펙터 라벨 크기·굵기 통일 (글자 스타일 헤더와 비슷).
     기존 11px 흐릿한 text-muted → 13px bold + text 톤. 한글 헤더 가독성 ↑. */
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.edit-input {
  width: 100%;
  padding: 7px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 6px;
}
.edit-input:focus { outline: none; border-color: var(--accent); }
.edit-toggle-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* v36: 페이지 방향 + 하위 모드 토글 둘 다 위아래(column)로 통일 — 사용자 결정.
   row pair 안 토글 그룹은 stacked. */
.edit-pb-row-pair .edit-toggle-group {
  flex-direction: column;
}
.edit-toggle {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.edit-toggle.active, .edit-toggle:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* v67: 표지 색 토글 — 박스 크게 (사용자 보고 "칸 너무 작음"). 10개 색 grid 정렬. */
.edit-cover-theme-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.edit-cover-theme {
  width: 100%;
  aspect-ratio: 1;
  min-height: 40px;
  border-radius: 10px;
  border: 2px solid rgba(80,50,20,0.18);
  cursor: pointer;
  padding: 0;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.edit-cover-theme:hover {
  transform: scale(1.05);
  border-color: rgba(80,50,20,0.4);
}
.edit-cover-theme.active {
  border-color: var(--accent, #c66f4a);
  box-shadow: 0 0 0 3px rgba(198,111,74,0.25);
  transform: scale(1.03);
}
.edit-cover-theme.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #c66f4a);
  font-weight: 700;
  font-size: 18px;
}
/* v37: 잠긴 토글 (장면 2부터 페이지 방향·하위 모드) — 클릭 불가 + 흐림 */
.edit-toggle--locked,
.edit-toggle[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.edit-toggle--locked:hover,
.edit-toggle[disabled]:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.edit-toggle--locked.active,
.edit-toggle[disabled].active {
  background: rgba(80,50,20,0.10);
  border-color: rgba(80,50,20,0.20);
  color: var(--text-muted);
}
/* 잠금 안내 박스 — 페이지 방향·하위 모드 row 아래 표시 */
.edit-section-hint--lock {
  background: rgba(198,111,74,0.06);
  border: 1px dashed rgba(198,111,74,0.30);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 0 12px;
  color: #8a4f2f;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 11.5px;
  line-height: 1.4;
}
.edit-range {
  width: 100%;
  accent-color: var(--accent);
}
.edit-range-val {
  font-size: 12px;
  color: var(--text-muted);
}
.edit-save-btn {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  cursor: pointer;
  transition: filter var(--t-fast);
}
.edit-save-btn:hover    { filter: brightness(1.15); }
.edit-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.edit-empty {
  padding: 24px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

/* ── 3단계 신규: 유형별 다듬기 패널 보조 클래스 ──
   원칙: 새 디자인 발명 X. 기존 .edit-* 톤(폰트/색/여백) 그대로 재사용. */

/* placeholder row — "추후 추가" 안내가 있는 줄 (텍스트형의 글자스타일/효과/테마 등) */
.edit-row--placeholder {
  opacity: 0.7;
}
.edit-row--placeholder .edit-label {
  color: var(--text-muted);
}

/* legacy row — 모드 카드 + "이 장면 레이아웃 / 텍스트 위치" 행처럼
   기존 모드 전용으로만 노출되는 영역. 보조 톤. */
.edit-row--legacy {
  opacity: 0.85;
}
.edit-row--legacy .edit-label {
  color: var(--text-muted);
}

/* muted compact row — legacy 텍스트 위치(9칸)처럼 보조 + 살짝 압축 */
.edit-row--muted-compact {
  opacity: 0.85;
  padding-top: 6px;
  padding-bottom: 6px;
}
.edit-row--muted-compact .edit-label {
  color: var(--text-muted);
  font-size: 12px;
}

/* section note — "추후 추가", "임시 집계" 등 작은 안내 텍스트.
   .edit-section-hint보다 인라인 톤. */
.edit-section-note {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(0,0,0,0.03);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-style: italic;
}

/* 그림책형 이미지 진입점 행 (그림 상태 + 업로드/바로 그리기 버튼) */
.edit-pb-image-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-pb-image-status {
  font-size: 13px;
  color: var(--text);
  padding: 6px 0;
}
.edit-pb-image-status strong {
  color: var(--accent);
  font-weight: 600;
}

/* 무비형 미디어 진입점 행 (배지 + 업로드 버튼) */
.edit-movie-media-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.edit-movie-media-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

/* W4-A: 그림책형 본문 글상자 슬라이더 — 4행 grid (이름 / 슬라이더 / 값) */
.edit-pb-bodybox-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-pb-bodybox-row {
  display: grid;
  grid-template-columns: 92px 1fr 44px;
  align-items: center;
  gap: 8px;
}
.edit-pb-bodybox-name {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.edit-pb-bodybox-val {
  font-size: 12px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   에러 화면
   ================================================================ */
.error-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.error-content { text-align: center; padding: 40px; }
.error-icon { font-size: 48px; margin-bottom: 16px; }
.error-msg  { font-size: 16px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.7; }

/* ================================================================
   애니메이션
   ================================================================ */
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* ================================================================
   반응형 — W8 태블릿 확장
   ─────────────────────────────────────────────────────────────
   · 폰 (≤600px): 모든 영역 풀폭 + 세로 스택
   · 태블릿 (601~1024px): 다듬기 인스펙터 패널만 하단 시트로
     (감상 화면은 데스크탑 layout 유지 — 본문/그림/선택지 비율 충분)
   ================================================================ */

/* 폰 — 모든 영역 풀폭 */
@media (max-width: 600px) {
  .choices-bottom { padding: 12px 16px 20px; gap: 8px; }
  .choice-btn     { font-size: 15px; padding: 12px 16px; }
  .text-box       { padding: 18px 20px; }
  .player-body    { flex-direction: column; }
}

/* 태블릿 — 다듬기 인스펙터 패널만 하단 시트.
   사용자가 "다듬기 칸 못 내림" 보고 → 패널이 우측 고정이라 좁은 화면에서 본문 잘림.
   하단 시트로 전환하면 본문은 위, 인스펙터는 아래 → 스크롤 가능. */
@media (min-width: 601px) and (max-width: 1024px) {
  .player-body    { flex-direction: column; }
}

/* ================================================================
   edit 모드 선택/드래그 피드백 (재설계)
   ================================================================ */

/* overlay 선택지 — edit 모드 선택 강조 */
.choice-overlay-wrap.edit-selected {
  outline: 2.5px solid var(--accent);
  outline-offset: 6px;
  border-radius: 14px;
  filter: drop-shadow(0 0 10px rgba(88,166,255,0.45));
  z-index: 20;   /* 선택된 것은 다른 choice 위로 */
}

/* 드래그 핸들 영역 */
#viewer-frame[data-template] .choice-overlay-wrap {
  cursor: grab;
}
.choice-overlay-wrap .choice-btn {
  cursor: pointer;
}

/* 드래그 중 — 잡고 있는 느낌 강화 */
.choice-overlay-wrap.edit-dragging {
  cursor: grabbing;
  opacity: 0.95;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.4))
          drop-shadow(0 0 12px rgba(88,166,255,0.55));
  transform-origin: center center;
  z-index: 30;
}
.choice-overlay-wrap.edit-dragging .choice-btn {
  cursor: grabbing;
  transform: scale(1.04);
  transition: transform 0.1s ease;
}

/* 드래그 중 safe-area 경계 도달 — 경고 톤 */
.choice-overlay-wrap.edit-dragging--at-edge {
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.4))
          drop-shadow(0 0 14px rgba(240, 160, 0, 0.7));
}
.choice-overlay-wrap.edit-dragging--at-edge .choice-btn {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

/* 비선택 overlay는 약간 흐리게 — 0.55는 너무 어두웠음 → 0.72로 완화 */
#viewer-frame.edit-mode-on .choice-overlay-wrap:not(.edit-selected) {
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
#viewer-frame.edit-mode-on .choice-overlay-wrap:not(.edit-selected):hover {
  opacity: 0.95;
}

/* 드래그 중인 동안은 다른 choice를 더 흐리게 — 포커스 강화 */
#viewer-frame.is-choice-dragging .choice-overlay-wrap:not(.edit-dragging) {
  opacity: 0.4 !important;
}

/* hit area 확장 — padding으로 터치 영역 넓힘 */
.choice-overlay-wrap {
  padding: 8px;
  margin: -8px;
  z-index: 15;
}

/* ================================================================
   Fix 5: Template × Theme 실제 시각 차이
   ================================================================ */

/* ================================================================
   TEMPLATE 프리셋 1차 — 각 프리셋의 역할이 분명하게
   · full-image: 배경/분위기 중심 (시네마틱)
   · text-page : 텍스트 중심 (책 페이지)
   · map-layout: 선택지 공간 배치 중심 (지도/탐색)
   ================================================================ */

/* ── TEMPLATE: full-image (시네마틱 배경) ─────────────────────────
   의도: 장면 이미지가 주인공. 텍스트와 선택지는 하단 letterbox처럼 얹힘. */
#viewer-frame[data-template="full-image"] .scene-bg {
  filter: brightness(0.78) contrast(1.06);
}
/* 상하 vignette — 상단은 옅게(헤더 공간), 하단은 짙게(텍스트 가독성) */
#viewer-frame[data-template="full-image"] .scene-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.05) 28%,
    rgba(0,0,0,0.05) 55%,
    rgba(0,0,0,0.78) 100%
  );
}
#viewer-frame[data-template="full-image"] .scene-content {
  justify-content: flex-end;
  padding: 24px 32px 28px;
}
#viewer-frame[data-template="full-image"] .text-box {
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 2px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  max-width: 820px;
  margin: 0 auto 12px;
  padding: 18px 24px;
}
#viewer-frame[data-template="full-image"] .text-box__body {
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.85;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
/* full-image + short: 시네마 자막처럼 한 줄 강조 */
#viewer-frame[data-template="full-image"] .text-box--short {
  max-width: 680px;
  background: rgba(0,0,0,0.35);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  padding: 16px 28px;
  text-align: center;
}
#viewer-frame[data-template="full-image"] .text-box--short .text-box__body {
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
/* full-image + long: 스크롤 영역도 유리 카드 유지 */
#viewer-frame[data-template="full-image"] .text-box--long {
  max-height: 52vh;
  max-width: 760px;
}
#viewer-frame[data-template="full-image"] .choices-bottom {
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  gap: 10px;
}
#viewer-frame[data-template="full-image"] .choice-btn--bottom {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
#viewer-frame[data-template="full-image"] .choice-btn--bottom:hover:not([disabled]) {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.4);
}

/* ── TEMPLATE: text-page (책 페이지) ─────────────────────────────
   의도: 텍스트가 주인공. 이미지는 배경 ghost, 선택지는 조용한 텍스트 라인 스타일. */
#viewer-frame[data-template="text-page"] .scene-bg {
  opacity: 0.06;
  filter: blur(2px) brightness(1.1);
}
#viewer-frame[data-template="text-page"] .scene-bg-overlay {
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(0,0,0,0.6) 100%
  );
}
#viewer-frame[data-template="text-page"] .scene-content {
  justify-content: center;
  padding: 56px 48px 32px;
  position: relative;
}
/* 상단 장식선 — 책의 헤더 라인 느낌 */
#viewer-frame[data-template="text-page"] .scene-content::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    var(--accent),
    transparent);
  opacity: 0.5;
}
#viewer-frame[data-template="text-page"] .text-box {
  background: transparent;
  border: none;
  backdrop-filter: none;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: none;
}
#viewer-frame[data-template="text-page"] .text-box__body {
  font-family: var(--font-story);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 2.1;
  color: var(--text);
  text-align: left;
  letter-spacing: 0.01em;
}
/* text-page + short: 가운데 정렬, 여백 넉넉 — 시집 한 줄 느낌 */
#viewer-frame[data-template="text-page"] .text-box--short {
  text-align: center;
  border: none;
  border-top: none;
  border-bottom: none;
  background: transparent;
  padding: 8px 0;
}
#viewer-frame[data-template="text-page"] .text-box--short .text-box__body {
  text-align: center;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.8;
  letter-spacing: 0.03em;
  font-weight: 500;
}
/* text-page + long: 책 읽기 리듬 — 첫 글자 들여쓰기 + paragraph spacing */
#viewer-frame[data-template="text-page"] .text-box--long {
  max-height: 62vh;
  padding: 4px 8px 4px 0;
  background: transparent;
}
#viewer-frame[data-template="text-page"] .text-box--long .text-box__body {
  text-indent: 1.2em;  /* 첫 줄 들여쓰기 */
  font-size: clamp(15px, 1.95vw, 18px);
  line-height: 2.0;
}
#viewer-frame[data-template="text-page"] .choices-bottom {
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0;
  gap: 8px;
}
#viewer-frame[data-template="text-page"] .choice-btn--bottom {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  padding: 13px 20px;
  border-left: 3px solid rgba(88,166,255,0.5);
  border-radius: 6px;
  text-align: left;
  transition: background 0.2s ease, border-left-color 0.2s ease;
}
#viewer-frame[data-template="text-page"] .choice-btn--bottom:hover:not([disabled]) {
  background: rgba(88,166,255,0.08);
  border-left-color: var(--accent);
}

/* ── TEMPLATE: map-layout (공간 탐색) ──────────────────────────
   의도: 배경 이미지를 '장소'로 보여주고, 텍스트는 작은 annotation,
        선택지는 공간 위 배치(overlay) 전제. */
#viewer-frame[data-template="map-layout"] .scene-bg {
  filter: brightness(0.92) saturate(1.05);
}
#viewer-frame[data-template="map-layout"] .scene-bg-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,0.35) 100%
  );
}
#viewer-frame[data-template="map-layout"] .scene-content {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 24px 20px;
}
#viewer-frame[data-template="map-layout"] .text-box {
  max-width: 320px;
  background: rgba(14, 20, 32, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(88,166,255,0.22);
  border-left: 3px solid var(--accent);   /* annotation 느낌 — 좌측 accent 포인터 */
  border-radius: 10px;
  padding: 12px 16px 12px 18px;
  z-index: 5;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
/* 작은 상단 라벨 — "여기는 어디" 힌트 */
#viewer-frame[data-template="map-layout"] .text-box::before {
  content: '⊙ 장소';
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(88,166,255,0.75);
  text-transform: uppercase;
  margin-bottom: 4px;
}
#viewer-frame[data-template="map-layout"] .text-box__body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
/* map-layout + short: 더 컴팩트한 pin-label */
#viewer-frame[data-template="map-layout"] .text-box--short {
  max-width: 260px;
  padding: 10px 14px 10px 16px;
}
#viewer-frame[data-template="map-layout"] .text-box--short .text-box__body {
  font-size: 13px;
  text-align: left;
  font-weight: 500;
}
/* map-layout + long: 조금 더 넓게 */
#viewer-frame[data-template="map-layout"] .text-box--long {
  max-width: 380px;
  max-height: 45vh;
  background: rgba(14, 20, 32, 0.88);
}
/* bottom choice가 있는 경우만 가로 wrap 처리 (overlay choice가 기본) */
#viewer-frame[data-template="map-layout"] .choices-bottom {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  padding: 0 16px 16px;
}
#viewer-frame[data-template="map-layout"] .choice-btn--bottom {
  width: auto;
  flex: 0 1 auto;
  background: rgba(14, 20, 32, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(88,166,255,0.3);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 14px;
}
#viewer-frame[data-template="map-layout"] .choice-btn--bottom:hover:not([disabled]) {
  background: rgba(88,166,255,0.15);
  border-color: var(--accent);
}
/* map-layout의 overlay choice — 공간 위 핀처럼 */
#viewer-frame[data-template="map-layout"] .choice-overlay-wrap .choice-btn {
  background: rgba(14, 20, 32, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(88,166,255,0.4);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ── THEME: fairybook ── */
/* 손글씨 느낌, 따뜻한 광원, 둥글고 부드러운 경계 */
.theme-fairybook .cover-screen,
.theme-fairybook .scene-screen,
.theme-fairybook .terminal-screen {
  background: radial-gradient(ellipse at 30% 20%, #2d1060 0%, #1a0d2e 100%);
}
.theme-fairybook .text-box {
  background: rgba(45,20,80,0.78);
  border-color: rgba(192,132,252,0.3);
  box-shadow: 0 0 40px rgba(192,132,252,0.12) inset;
}
.theme-fairybook .choice-preset--basic {
  background: rgba(192,132,252,0.18);
  border-color: var(--accent);   /* --accent: #c084fc */
  color: var(--accent);
}
.theme-fairybook .choice-preset--ghost {
  background: rgba(240,200,255,0.07);
  border-color: rgba(240,200,255,0.3);
}
.theme-fairybook .choice-preset--pin {
  background: linear-gradient(135deg, #f0c000, #e080c0);
  color: #1a0030;
}
.theme-fairybook .cover-title {
  text-shadow: 0 0 32px rgba(192,132,252,0.6), 0 2px 16px rgba(0,0,0,0.8);
}
.theme-fairybook .cover-start-btn {
  border-color: var(--accent);
  background: rgba(192,132,252,0.18);
  color: var(--accent);
}
.theme-fairybook .terminal-screen--story {
  background: radial-gradient(ellipse at 50% 60%, #2d0060 0%, #100020 100%);
}

/* ── THEME: explore ── */
/* 지도/탐험 느낌, 격자 배경, 네온 선 강조 */
.theme-explore .cover-screen,
.theme-explore .scene-screen,
.theme-explore .terminal-screen {
  background:
    linear-gradient(rgba(77,217,172,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,217,172,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, #0f2040 0%, #0a1628 100%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
}
.theme-explore .text-box {
  background: rgba(10,22,40,0.82);
  border-color: rgba(77,217,172,0.3);
  box-shadow: 0 0 20px rgba(77,217,172,0.08) inset;
}
.theme-explore .choice-preset--basic {
  background: rgba(77,217,172,0.15);
  border-color: var(--accent);   /* --accent: #4dd9ac */
  color: var(--accent);
}
.theme-explore .choice-preset--pin {
  background: var(--accent);
  color: #001a10;
  box-shadow: 0 4px 20px rgba(77,217,172,0.45);
}
.theme-explore .cover-title {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(77,217,172,0.5);
}
.theme-explore .cover-start-btn {
  border-color: var(--accent);
  background: rgba(77,217,172,0.12);
  color: var(--accent);
}
.theme-explore .hud-inner {
  border-bottom-color: rgba(77,217,172,0.2);
}
.theme-explore .explore-progress-bar {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(77,217,172,0.6);
}

/* ================================================================
   Fix 2: story/explore terminal 시각 차이
   ================================================================ */

/* v37: story 엔딩 — warm paper 톤 + 책 마지막 페이지 분위기.
   이전 어두운 radial 폐기. 페이지 카드 안 가운데 정렬. */
.terminal-screen--story {
  background: transparent;
  padding: 24px;
  box-sizing: border-box;
  container-type: size;
  container-name: endstage;
}
/* 엔딩 페이지 카드 — cover와 동일 비율·디자인 */
.terminal-screen--story .ending-page {
  position: relative;
  aspect-ratio: 297 / 210;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--v03-card-bg, #fffaee);
  border-radius: 14px;
  border: 1px solid rgba(80,50,20,0.08);
  box-shadow:
    0 2px 6px rgba(120,90,50,0.10),
    0 16px 48px rgba(120,90,50,0.18),
    0 32px 64px rgba(120,90,50,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeUp var(--t-slow, 420ms) ease both;
}
@container endstage (aspect-ratio > 297/210) {
  .terminal-screen--story .ending-page { width: auto; height: 100%; }
}
@container endstage (aspect-ratio <= 297/210) {
  .terminal-screen--story .ending-page { width: 100%; height: auto; }
}
body[data-page-orientation="portrait"] .terminal-screen--story .ending-page {
  aspect-ratio: 210 / 297;
}
@container endstage (aspect-ratio > 210/297) {
  body[data-page-orientation="portrait"] .terminal-screen--story .ending-page { width: auto; height: 100%; }
}
@container endstage (aspect-ratio <= 210/297) {
  body[data-page-orientation="portrait"] .terminal-screen--story .ending-page { width: 100%; height: auto; }
}

/* story 엔딩 콘텐츠 — 페이지 안 가운데 */
.terminal-screen--story .terminal-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}
.terminal-icon--story {
  font-size: clamp(36px, 5vw, 52px);
  filter: none;
  opacity: 0.85;
}
.ending-mood {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--text-muted, #6b5638);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}
.ending-path-summary {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.2vw, 13px);
  color: #c66f4a;
  opacity: 0.85;
  margin: 0;
}
/* "이야기 끝" 스탬프 — 도장 분위기 */
.terminal-screen--story .terminal-title {
  font-family: 'Cormorant Garamond', var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(13px, 1.6vw, 16px);
  color: #c66f4a;
  border: 2px solid #c66f4a;
  border-radius: 8px;
  padding: 6px 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  display: inline-block;
  margin: 0;
  opacity: 0.85;
  box-shadow: 0 1px 0 rgba(198,111,74,0.10);
}
.terminal-screen--story .ending-true-badge {
  background: linear-gradient(135deg, #d4a017, #f2c43f);
  color: #3a2810;
  font-family: var(--font-ui, 'Jua', sans-serif);
  border: 1px solid rgba(60,40,15,0.25);
  margin: 0;
}
/* 사용자 본문 (메인 콘텐츠) */
.terminal-screen--story .ending-user-title {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0;
}
.terminal-screen--story .ending-user-body {
  /* ENDING-STYLE-UNIFY(2026-07-21): .terminal-screen--story는 현 JS에 마크업 없음(사어 확인 —
     라이브 엔딩은 .pb-text--ending 경로). 07-19 "실측 매칭" 주석은 오판이었음: 실제로 보이던
     굵게/Jua는 viewer-data ENDING_TEXT_STYLE_DEFAULTS(JS 기본값)의 인라인 변수 주입이 원인.
     혹시 모를 레거시 매칭 대비 굵기만 var(기본 400)로 정합·삭제는 L10 정책상 보류. */
  font-family: var(--pb-font-family, 'Gowun Batang', 'Nanum Gothic', serif);
  font-size: clamp(20px, 3vw, 32px);
  color: var(--text, #2b1f10);
  line-height: 1.4;
  font-weight: var(--pb-fw-body, 400);
  margin: 4px 0;
  letter-spacing: -0.005em;
}

/* 버튼 — warm paper 톤 */
.terminal-screen--story .terminal-btn--primary {
  background: #c66f4a;
  border: none;
  color: #fff;
  box-shadow:
    0 2px 4px rgba(198,111,74,0.20),
    0 6px 16px rgba(198,111,74,0.30);
}
.terminal-screen--story .terminal-btn--primary:hover {
  filter: brightness(1.08);
}
.terminal-screen--story .terminal-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(80,50,20,0.20);
  color: var(--text-muted, #6b5638);
}
.terminal-screen--story .terminal-btn--ghost:hover {
  background: rgba(80,50,20,0.06);
  border-color: rgba(80,50,20,0.35);
}

/* explore — 방문 진행도, 밝고 활동적인 톤 */
.terminal-screen--explore {
  background: radial-gradient(ellipse at 50% 30%, rgba(10,30,30,0.9), var(--bg));
}
.terminal-icon--explore {
  font-size: 56px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(77,217,172,0.4));
}
.terminal-title--explore { color: var(--explore); }
.terminal-content--explore { max-width: 560px; }
.terminal-actions--explore { flex-direction: column; align-items: center; gap: 10px; }
.terminal-btn--explore-primary {
  background: var(--explore);
  color: #001a10;
  font-weight: 700;
  min-width: 200px;
}

/* explore stats 강화 */
.explore-stats-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.explore-stats-num   { font-family: var(--font-ui); font-size: 48px; color: var(--explore); line-height: 1; }
.explore-stats-sep   { font-size: 24px; color: var(--text-muted); }
.explore-stats-total { font-size: 24px; color: var(--text-muted); }
.explore-stats-unit  { font-size: 14px; color: var(--text-muted); margin-left: 4px; }
.explore-complete-msg {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
}
.explore-recent {
  background: rgba(77,217,172,0.06);
  border: 1px solid rgba(77,217,172,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  text-align: left;
}
.explore-recent-label {
  font-size: 10px;
  color: var(--explore);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.explore-recent-item {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ================================================================
   (이전의 Fix 3/Fix 4 중복 블록은 상단의 재설계된 블록으로 통합됨)
   ================================================================ */

/* (map-layout 관련 스타일은 상단 재설계 블록에 통합됨) */

/* edit panel에 divider/section title */
.edit-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ── W8 Phase D-1: 다듬기 패널 탭 헤더 ──────────────
   섹션을 탭으로 분리. .is-on이 있는 패널만 보임.
   데이터 흐름 영향 0 — 시각 토글만. */
.edit-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 12px 0 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* W8: [내용] 탭 안 그림책 글자 스타일 카드.
   본문 textarea와 시각적으로 분리되되 같은 흐름에 자리. */
.edit-pb-inline-style {
  margin: 14px 0 10px;
  padding: 14px 14px 10px;
  background: var(--surface2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.edit-pb-inline-title {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.edit-pb-inline-style .edit-row--compact {
  margin-bottom: 10px;
}
.edit-pb-inline-style .edit-row--compact:last-child {
  margin-bottom: 0;
}
/* W9 v2: 가로 정렬 row — 인스펙터 540px 넓어진 후 label과 입력 같은 줄에 */
.edit-pb-inline-style .edit-row--inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.edit-pb-inline-style .edit-row--inline .edit-label {
  margin-bottom: 0;
  flex: 0 0 80px;
}
.edit-pb-inline-style .edit-row--inline .edit-slider {
  flex: 1;
}
.edit-pb-inline-style .edit-row--inline .edit-toggle-group {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────
   2026-05-25 Phase 1 (fix): 섹션 collapsible 헤더 (평면형).
   ─────────────────────────────────────────────────────────────
   사용처: .edit-pb-inline-style (글자 스타일) /
           .edit-submode-block--pb-tone (본문 카드 톤)
   특징:
   · wrapper가 이미 카드(background + border + padding)이므로,
     헤더는 그 안에 평면적으로 놓여야 자연스러움.
   · 양옆 마감 테마의 .edit-pb-theme-toggle (흰 박스형)과 분리된 시스템.
   · 펼친 상태에서 헤더와 body가 같은 카드 안에서 점선으로 연결.
   · 접힌 상태에서는 헤더만 보이고 점선·여백 없음.
   ───────────────────────────────────────────────────────────── */
.edit-collapsible-header {
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 13px;
  color: var(--text, #2b1f10);
  letter-spacing: 0.02em;
  transition: color 120ms;
}
.edit-collapsible-header:hover {
  color: #c66f4a;
}
.edit-collapsible-header-text {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-collapsible-header-chev {
  font-size: 11px;
  color: #8a6c4a;
  margin-left: 8px;
  flex-shrink: 0;
  transition: color 120ms;
}
.edit-collapsible-header.is-expanded {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(120,90,50,0.18);
}
.edit-collapsible-header.is-expanded .edit-collapsible-header-chev {
  color: #c66f4a;
}
.edit-collapsible-body {
  /* 본문 — wrapper(.edit-pb-inline-style / .edit-submode-block) padding 안에 그대로.
     별도 background·border 없음. wrapper가 카드. */
}

/* 2026-05-27 Phase 4-D-1: 우측 2단 (📝 내용) 접이식 wrapper.
   글자 스타일 카드(.edit-pb-inline-style) 톤 참고하되 더 컴팩트.
   잠금 배너 아래 자연스러운 카드로 놓여, 그림책 일반/엔딩에서 접힘 default.
   표지 / 그림책 외 모드는 강제 펼침. */
.edit-text-advanced-wrap {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.edit-text-advanced-body {
  /* wrapper padding 안에 .edit-row margin 10px 그대로 — 별도 padding X */
}

.edit-tab {
  flex: 1;
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.edit-tab:hover { color: var(--text); }
.edit-tab.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(120,90,50,0.10), 0 2px 6px rgba(120,90,50,0.06);
}
.edit-tab-panel { display: none; }
.edit-tab-panel.is-on { display: block; }
.edit-section-title {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ================================================================
   viewer ↔ maker 왕복 UX — 액션바 + edit 패널 상단
   ================================================================ */

/* ── maker 복귀 바 (fromMaker일 때만 표시) ──
   W8: 종이 골드 톤으로 통일 (teacher-auth + "마감 편집 중" 배지와 같은 액센트).
   학생은 보지 않는 제작자 전용 상태 표시 — 골드 = "안내·관리" 의미와 맞음. */
/* VIEWER-PLAY-TOP-CHROME-1: 제작자 테스트/다듬기 상단 바를 얇고 조용하게.
   세로 padding↓(7→4)·간격↓·배경/경계선 약화 → 작품 위 시선 부담 감소. 버튼 터치 영역은 유지.
   (이 바는 fromMaker일 때만 렌더 — 실 학생 감상엔 없음.) */
.maker-return-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 14px;
  /* CHROME-CLEANUP-1: 반투명(12%)→불투명 크림. #hud 어두운 배경이 뒤로 비쳐 '회색'으로
     읽히던 것을 차단. 불투명이라 backdrop-filter 불필요(제거). */
  background: #fbf4e4;
  border-bottom: 1px solid rgba(199, 149, 80, 0.22);
  flex-wrap: wrap;
  position: relative; /* REFINE-IA-3: ⋯ 더보기 메뉴 앵커 */
}
/* CHROME-CLEANUP-1: 편집(마감) 중에는 살짝 더 amber 톤으로 '편집 중' 신호 유지(사용자 결정 b). */
.maker-return-bar--editing {
  background: #f6e9cd;
  border-bottom-color: rgba(199, 149, 80, 0.32);
}
.maker-return-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #8a5a1f;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0.9;
}
.maker-return-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.maker-return-btn {
  /* VIEWER-PLAY-TOP-CHROME-1: 보더 약화(1.5→1)로 가볍게. 패딩(=터치 높이 ~30px)은 유지. */
  padding: 5px 13px;
  border-radius: 50px;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  border: 1px solid rgba(199, 149, 80, 0.36);
  background: #fffaee;
  color: #6b5638;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.maker-return-btn:hover {
  background: #f4ecd8;
  border-color: #c79550;
  color: #2b1f10;
  transform: translateY(-1px);
}
.maker-return-btn:active { transform: scale(.97); }
/* REFINE-IA-3: 장면 도구(현재 장면 핵심 편집)는 primary 강조 */
.maker-return-btn--tool {
  border-color: #c66f4a;
  color: #a05633;
  font-weight: 700;
  background: #fff6ee;
}
.maker-return-btn--tool:hover { background: #fdeede; border-color: #b85e39; }
/* AI-BUTTON-SURFACE: 🤖 AI 다듬기 — ⋯더보기에 묻혀 안 보이던 것 상단 직접 노출(발견성).
   AI 허용(교사 enabled)일 때만 렌더(viewer-render _aiAllowed). 눈에 띄는 sage 강조(감상 테스트와 구분). */
.maker-return-btn--ai {
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #7aa06a, #6b9159);
  border-color: #5f8350;
  box-shadow: 0 1px 5px rgba(95, 131, 80, 0.32);
}
.maker-return-btn--ai:hover {
  background: linear-gradient(135deg, #6b9159, #5d8049);
  border-color: #527247;
  color: #fff;
}
/* ⋯ 더보기 버튼 */
.maker-return-btn--more { font-weight: 700; }
.maker-return-btn--more[aria-expanded="true"] {
  background: #efe2c8;
  border-color: #c79550;
}
/* 더보기 드롭다운 메뉴 */
.hud-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  z-index: 60;
  min-width: 200px;
  background: #fffdf7;
  border: 1px solid rgba(199, 149, 80, 0.5);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(80, 60, 30, 0.2);
  padding: 6px;
}
.hud-more-menu[hidden] { display: none; }
.hud-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px; /* 터치 영역 */
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: #5a4a30;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.hud-more-item:hover, .hud-more-item:focus-visible { background: #f4ecd8; color: #2b1f10; outline: none; }
.hud-more-item:focus-visible { box-shadow: inset 0 0 0 2px #c79550; }
.hud-more-item--danger { color: #b5482f; }
.hud-more-item--danger:hover { background: rgba(200, 80, 60, 0.1); }
.hud-more-sep { height: 1px; background: rgba(199, 149, 80, 0.3); margin: 4px 6px; }
/* REFINE-IA-3: 모바일에서 편집 바 조밀화(마크업·문구·기능 불변, 패딩/폰트/간격만) */
@media (max-width: 480px) {
  .maker-return-bar { padding: 4px 8px; gap: 5px; }
  .maker-return-label { font-size: 11px; }
  .maker-return-btn { padding: 5px 9px; font-size: 11px; }
  .hud-more-menu { right: 4px; min-width: 64vw; }
}
.maker-return-btn--edit {
  border-color: rgba(198, 111, 74, 0.42);
  color: #c66f4a;
  background: #fdf3e8;
}
.maker-return-btn--edit:hover {
  background: #f8e6df;
  border-color: #c66f4a;
  color: #2b1f10;
}

/* ── edit panel 상단 액션 영역 ── */
.edit-actions-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 4px;
}
.edit-action-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.edit-action-btn small {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.edit-action-btn:hover  { transform: translateY(-1px); }
.edit-action-btn:active { transform: scale(.97); }

.edit-action-btn--test {
  border-color: rgba(86,211,100,0.35);
  background: rgba(86,211,100,0.08);
  color: #56d364;
}
.edit-action-btn--test:hover {
  background: rgba(86,211,100,0.16);
  border-color: #56d364;
}

.edit-action-btn--back {
  border-color: rgba(88,166,255,0.3);
  background: rgba(88,166,255,0.06);
  color: var(--accent);
}
.edit-action-btn--back:hover {
  background: rgba(88,166,255,0.14);
  border-color: var(--accent);
}

/* ── 보조 액션 행 (구조 보기 + 작업으로 돌아가기) ── */
.edit-actions-secondary {
  display: flex;
  gap: 6px;
}
.edit-action-btn-sub {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.edit-action-btn-sub:hover {
  background: rgba(192, 132, 252, 0.1);
  border-color: rgba(192, 132, 252, 0.4);
  color: #c084fc;
}
.edit-action-btn-sub--back:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.4);
  color: var(--accent);
}

/* ================================================================
   구조 미니맵 오버레이
   ================================================================ */
.structure-map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: structure-map-fade-in 0.18s ease;
}
@keyframes structure-map-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.structure-map-panel {
  width: min(960px, 100%);
  height: min(680px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.structure-map-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.structure-map-title {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text);
  flex-shrink: 0;
}
.structure-map-hint {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
}
.structure-map-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.structure-map-close:hover { background: rgba(255,255,255,0.08); }

.structure-map-legend {
  display: flex;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.structure-map-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.structure-map-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.structure-map-dot--cover   { background: rgba(155, 109, 202, 0.5); border: 1px solid rgba(155, 109, 202, 0.8); }
.structure-map-dot--start   { background: #56d364; }
.structure-map-dot--normal  { background: rgba(139,148,158,0.7); border: 1px solid rgba(255,255,255,0.18); }
.structure-map-dot--ending  { background: #f85149; }
.structure-map-dot--current { background: transparent; border: 2px solid var(--accent); box-shadow: 0 0 6px var(--accent); }

.structure-map-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background:
    radial-gradient(circle, rgba(88,166,255,0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}

.structure-map-svg {
  width: 100%;
  height: 100%;
  min-width: 600px;
  min-height: 400px;
  display: block;
}

/* ── 연결선 ── */
.structure-map-edge {
  fill: none;
  stroke: rgba(139,148,158,0.45);
  stroke-width: 1.5;
  marker-end: url(#structure-map-arrow);
  transition: stroke var(--t-fast);
}
/* v39: 표지 → 진입 장면 가상 엣지 — 보라 강조 + 굵게 */
.structure-map-edge--cover {
  stroke: rgba(155, 109, 202, 0.6);
  stroke-width: 2;
  marker-end: url(#structure-map-arrow-cover);
}

/* ── 노드 ── */
.structure-map-node-group {
  cursor: pointer;
}
.structure-map-node {
  fill: var(--surface2);
  stroke: rgba(255,255,255,0.2);
  stroke-width: 1.5;
  transition: fill var(--t-fast), stroke var(--t-fast), transform var(--t-fast);
}
.structure-map-node--start {
  fill: rgba(86, 211, 100, 0.22);
  stroke: rgba(86, 211, 100, 0.6);
}
.structure-map-node--ending {
  fill: rgba(248, 81, 73, 0.22);
  stroke: rgba(248, 81, 73, 0.6);
}
.structure-map-node--normal {
  fill: var(--surface2);
  stroke: rgba(255,255,255,0.22);
}
/* v37: 표지 노드 — 보라 톤 */
.structure-map-node--cover {
  fill: rgba(155, 109, 202, 0.22);
  stroke: rgba(155, 109, 202, 0.7);
}
.structure-map-node.is-current {
  fill: rgba(88, 166, 255, 0.35);
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.55));
}
.structure-map-node-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.4;
  animation: structure-map-pulse 2s ease-in-out infinite;
}
@keyframes structure-map-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1);    stroke-width: 1.5; }
  50%      { opacity: 0.6; transform: scale(1.12); stroke-width: 2; }
}
.structure-map-node-group:hover .structure-map-node {
  stroke: var(--accent);
  stroke-width: 2;
}
.structure-map-node-label {
  fill: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

/* ── 액션 버튼: 구조 보기 (보조 버튼으로 대체됨) ── */

/* ================================================================
   텍스트 배치 프리셋 (그림책용 앵커) — 감성화 1차 배치
   ─────────────────────────────────────────────────────────────
   · data-text-anchor가 지정되면 scene-content의 flex 정렬로 text-box 위치 이동
   · overlay choice는 position:absolute라 flex flow 영향 없음
   · 미지정(기본) 시 기존 동작 그대로 — 하위 호환
   · long text의 margin-top:auto(하단 밀착)은 anchor가 지정된 경우 override
     → 9방향 앵커가 정확히 먹히도록
   ================================================================ */

/* flex-direction: column이므로 아래와 같이 매핑:
     세로(상/중/하) = justify-content
     가로(좌/중/우) = align-items                                   */

/* 상 */
.scene-screen[data-text-anchor^="top-"]    .scene-content { justify-content: flex-start; padding-top: 40px; }
/* 중 (middle) */
.scene-screen[data-text-anchor^="middle-"] .scene-content { justify-content: center; }
/* 하 */
.scene-screen[data-text-anchor^="bottom-"] .scene-content { justify-content: flex-end; padding-bottom: 24px; }

/* 좌 */
.scene-screen[data-text-anchor$="-left"]   .scene-content { align-items: flex-start; padding-left: 32px; }
/* 중 (center) — 기본값과 동일 */
.scene-screen[data-text-anchor$="-center"] .scene-content { align-items: center; }
/* 우 */
.scene-screen[data-text-anchor$="-right"]  .scene-content { align-items: flex-end; padding-right: 32px; }

/* ── anchor 지정 시 long text의 '하단 밀착' 해제 ──
   text-box--long은 margin-top:auto로 flex column 하단에 붙는데,
   그러면 top-*/middle-* 앵커가 동작 안 함. 앵커가 지정된 경우만 해제. */
.scene-screen[data-text-anchor] .text-box--long {
  margin-top: 0;
}

/* ── anchor + long text일 때 폭/높이 안전 보정 ──
   좌/우 앵커에서 text-box--long이 760px 폭으로 과하게 한 쪽을 점유하지 않게 */
.scene-screen[data-text-anchor$="-left"]  .text-box--long,
.scene-screen[data-text-anchor$="-right"] .text-box--long {
  max-width: min(640px, calc(100% - 48px));
}

/* top-* 앵커에서 long text는 HUD와 겹치지 않게 max-height 축소 */
.scene-screen[data-text-anchor^="top-"] .text-box--long {
  max-height: 36vh;
}
.scene-screen[data-text-anchor^="top-"] .text-box--long .text-box__body--scroll {
  max-height: calc(36vh - 44px);
}

/* ================================================================
   편집 패널 — 텍스트 배치 프리셋 UI
   ================================================================ */
.edit-anchor-grid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.edit-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(3, 1fr);
  gap: 3px;
  width: 90px;
  height: 90px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
}
.edit-anchor-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.edit-anchor-cell:hover {
  background: rgba(88,166,255,0.18);
  border-color: rgba(88,166,255,0.5);
}
.edit-anchor-cell--active {
  background: var(--accent);
  border-color: var(--accent);
}
.edit-anchor-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}
.edit-anchor-cell:hover .edit-anchor-dot,
.edit-anchor-cell--active .edit-anchor-dot {
  background: #fff;
}
.edit-toggle.js-text-anchor-reset {
  align-self: stretch;
  font-size: 12px;
  padding: 6px 14px;
}
.edit-toggle--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.edit-anchor-current {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.edit-anchor-current b {
  color: var(--text);
  font-weight: 600;
}

/* ================================================================
   다듬기 화면 — 글 수정 UI (글 수정 기능 1차)
   ================================================================ */

/* 잠금 안내 배너 — 다른 사람이 같은 장면 편집 중일 때 */
.edit-lock-banner {
  margin-bottom: 10px;
  padding: 10px 14px;
  background: rgba(240,160,0,0.12);
  border: 1px solid rgba(240,160,0,0.35);
  border-radius: 8px;
  color: var(--accent2);
  font-size: 12px;
  line-height: 1.5;
}

/* 공통 입력 필드 (textarea/input) */
.edit-text-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
  resize: vertical;
}
.edit-text-input:focus {
  outline: none;
  background: rgba(255,255,255,0.09);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(88,166,255,0.35);
}
.edit-text-input--body {
  min-height: 88px;
}
.edit-text-input--choice {
  /* single-line — resize off */
  resize: none;
}

/* 읽기 전용 상태 (잠금 실패 시) */
.edit-text-input--locked {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  cursor: not-allowed;
}
.edit-text-input--locked:focus {
  box-shadow: none;
  border-color: rgba(255,255,255,0.08);
}

/* 저장 상태 표시 줄 (저장 중 / 저장됨 / 저장 실패) */
.edit-text-status-row {
  min-height: 18px;
  margin-top: 2px;
  text-align: right;
}
.edit-text-status {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  transition: color var(--t-fast);
}
/* 2026-05-27 Phase 4-D-2: 헤더 안 저장 상태 표시.
   접힘/펼침 무관 헤더가 항상 보이므로 저장 상태도 항상 확인 가능.
   기존 11px/muted 톤 유지 + 헤더 flex 안 안전망(nowrap/ellipsis/max-width). */
.edit-text-status--in-header {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 140px;
  margin: 0 8px 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  pointer-events: none;   /* button 안 — 클릭은 button(헤더 토글)로 위임 */
}

/* ================================================================
   텍스트 위치 프리셋 — 실동작 버그 수정 ──
   ─────────────────────────────────────────────────────────────
   원인: .text-box가 width:100%라 align-items(flex-start/flex-end)가
   시각적으로 먹지 않음. 좌/우 앵커일 때 폭을 축소해 한쪽으로 치우침을
   실제로 보이게 한다. 중앙 열(-center)은 현재 폭 유지.
   특이도: .scene-screen[...]+.text-box(...) = (0, 3, 1)이 기본 .text-box
   (0, 1, 0)를 안전히 덮어씀.
   ================================================================ */
.scene-screen[data-text-anchor$="-left"]  .text-box,
.scene-screen[data-text-anchor$="-right"] .text-box {
  width: auto;
  max-width: min(560px, calc(100% - 48px));
}
/* top-* / bottom-* 에서도 text-box가 중앙 열을 기본 폭으로 유지 —
   이미 max-width:680(기본)/760(long) 적용되므로 별도 폭 조정 불필요.
   대신 margin-left/right auto로 self 정렬 충돌 피함. */
.scene-screen[data-text-anchor$="-center"] .text-box {
  margin-left: auto;
  margin-right: auto;
}
/* 좌/우 앵커에서 long text는 더 좁게 (읽기 행폭 안정) */
.scene-screen[data-text-anchor$="-left"]  .text-box--long,
.scene-screen[data-text-anchor$="-right"] .text-box--long {
  max-width: min(520px, calc(100% - 48px));
}

/* ================================================================
   잠금 배너 — 약한 경고 변형 (같은 브라우저 다른 창)
   ================================================================ */
.edit-lock-banner--mild {
  background: rgba(88,166,255,0.10);
  border-color: rgba(88,166,255,0.32);
  color: var(--accent);
}

/* ================================================================
   text-box__title — 제목/본문 분리 렌더 (title/body 분리 1차)
   ─────────────────────────────────────────────────────────────
   · 제목은 본문보다 살짝 크고 강조, 하단 여백으로 본문과 계층 분리
   · 본문보다 훨씬 절제된 톤 (감성화 방향 유지 — 미감 재수정 아님)
   · short/medium/long 공통 기본, 필요시 길이별 미세 조정
   · 제목 없으면 <h3> 자체가 렌더되지 않음 (viewer-render가 조건부)
   ================================================================ */
.text-box__title {
  margin: 0 0 10px 0;
  padding: 0;
  font-family: var(--font-ui);
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  word-break: keep-all;
}
/* short 장면은 제목 자체가 헤드라인 역할 — 크기/정렬 맞춤 */
.text-box--short .text-box__title {
  text-align: center;
  margin-bottom: 14px;
}
/* long 장면은 제목을 살짝 작게 (본문 행폭과 균형) */
.text-box--long .text-box__title {
  font-size: clamp(16px, 2vw, 19px);
  margin-bottom: 12px;
}
/* 제목 있을 때 본문 위 padding 보정 — data-has-title 속성 훅 */
.text-box[data-has-title="true"] .text-box__body {
  margin-top: 0;
}

/* ================================================================
   viewer-edit 패널 구조 개편 1차 — 섹션 위계/힌트/takeover
   ================================================================ */

/* 주요 섹션 라벨 (①②③) — 위계 강조 */
.edit-section-title--major {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin: 2px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(88,166,255,0.18);
  letter-spacing: 0.02em;
}
.edit-section-hint {
  font-size: 11px;
  color: var(--text-muted);
  /* v36: 위 요소(슬라이더 등)와 살짝 띄움 — 기존 -4px이라 너무 붙어 있었음 */
  margin: 8px 0 8px;
  line-height: 1.4;
}

/* W9 (v3): 모드 섹션 안에서 "작품 전체 설정" 시작점 표시 — 작은 헤더 + 옅은 구분선.
   주요 섹션(--major) 아래 위계라 색·크기 절제. */
.edit-section-title--minor {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 12px 0 6px;
  letter-spacing: 0.03em;
  text-transform: none;
}
.edit-subdivider {
  height: 1px;
  background: rgba(120,90,50,0.18);
  margin: 14px 0 0;
}

/* 필드 라벨 보조 텍스트 ((짧은 헤드라인) 등) */
.edit-label-note {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: normal;
}

/* 필드 하단 힌트 (비어있는 상태 안내) */
.edit-field-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  opacity: 0.85;
}

/* 잠금 배너 — 메시지 + 인수 버튼 레이아웃 */
.edit-lock-banner-msg {
  margin-bottom: 6px;
}
.edit-lock-takeover-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-ui);
  background: rgba(88,166,255,0.18);
  color: var(--accent);
  border: 1px solid rgba(88,166,255,0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.edit-lock-takeover-btn:hover {
  background: rgba(88,166,255,0.28);
  border-color: rgba(88,166,255,0.6);
}
/* v116: 강한 경고(other) 상태에도 두 버튼 표시 — 다시 확인 + 내가 수정하기 */
.edit-lock-banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.edit-lock-recheck-btn {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-ui);
  background: rgba(120,90,50,0.10);
  color: #6b5638;
  border: 1px solid rgba(120,90,50,0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.edit-lock-recheck-btn:hover {
  background: rgba(120,90,50,0.18);
  border-color: rgba(120,90,50,0.40);
}
.edit-lock-banner-actions .edit-lock-takeover-btn {
  background: rgba(198,111,74,0.15);
  color: #c66f4a;
  border-color: rgba(198,111,74,0.40);
}
.edit-lock-banner-actions .edit-lock-takeover-btn:hover {
  background: rgba(198,111,74,0.25);
  border-color: rgba(198,111,74,0.55);
}

/* ================================================================
   모드 시스템 뼈대 1차 — 편집 패널 모드 카드 + 무대 최소 차이
   ================================================================ */

/* 모드 선택 UI — 2x2 그리드 카드 */
.edit-row--mode-picker { margin-bottom: 10px; }
.edit-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.edit-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-ui);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-align: left;
}
.edit-mode-card:hover {
  background: rgba(88,166,255,0.1);
  border-color: rgba(88,166,255,0.4);
}
.edit-mode-card--active {
  background: rgba(88,166,255,0.18);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(88,166,255,0.4);
}
.edit-mode-card--locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.edit-mode-card--locked:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
.edit-mode-icon {
  font-size: 18px;
  line-height: 1;
}
.edit-mode-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.edit-mode-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.edit-mode-card--active .edit-mode-label { color: var(--accent); }

.edit-mode-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 8px;
  background: rgba(240,160,0,0.08);
  border-left: 2px solid rgba(240,160,0,0.28);
  border-radius: 4px;
}

/* ================================================================
   무대 모드별 최소 차이 (1차 — 가벼운 톤 구분만)
   ─────────────────────────────────────────────────────────────
   · scene-screen의 data-presentation-mode 속성에 따라 배경 기본 톤이 미세하게 다름
   · 아직 모드별 연출 대공사 금지 — 다음 턴들에서 상세 구현
   · 기존 scene-bg/layout-template 규칙 위에 얕게 덧대기만
   ================================================================ */
.scene-screen[data-presentation-mode="text"] {
  /* 텍스트형: 밝은 톤 베이스 — 읽기 중심 */
  background-color: #f8f5ee;
}
.scene-screen[data-presentation-mode="text"] .text-box {
  /* 밝은 배경에 맞춰 텍스트 박스를 더 옅게 */
  background: rgba(255,255,255,0.72);
  color: #2a2a2a;
  border-color: rgba(0,0,0,0.08);
}
.scene-screen[data-presentation-mode="text"] .text-box__title,
.scene-screen[data-presentation-mode="text"] .text-box__body {
  color: #2a2a2a;
}

.scene-screen[data-presentation-mode="picturebook"] {
  /* 그림책형: 현재 viewer 기본 — 변화 없음 */
}

.scene-screen[data-presentation-mode="movie"] {
  /* 무비형: 깊은 검정 — 영상/시네마틱 베이스 */
  background-color: #0a0a10;
}

.scene-screen[data-presentation-mode="document"] {
  /* 기록물형: 종이 톤 베이스 — 문서 느낌 */
  background-color: #e8e0d0;
}
.scene-screen[data-presentation-mode="document"] .text-box {
  background: rgba(252,248,236,0.9);
  color: #2a2418;
  border-color: rgba(80,60,30,0.12);
  border-left: 3px solid rgba(120,80,40,0.3);
}
.scene-screen[data-presentation-mode="document"] .text-box__title,
.scene-screen[data-presentation-mode="document"] .text-box__body {
  color: #2a2418;
  font-family: 'Nanum Myeongjo', var(--font-ui);
}

/* ================================================================
   텍스트형 1차 — 읽는 장면 연출
   ─────────────────────────────────────────────────────────────
   설계 축:
   · 배경: 따뜻한 종이톤 (#faf6ec) — 검정 stage 완전 배제
   · text-box: 유리패널 해제. 배경과 거의 동일 톤, 좌측 세로 라인으로만 본문 영역 표시
   · 선택 구역: choices-bottom 자체를 '구역'으로. 상단 fade + mood 색 배경
   · 읽기 리듬: 제목(명조 굵게) → 공백 → 본문(긴 행간) → 공백 → 선택 구역

   moodTone 확장 준비:
   · 선택 구역 배경은 CSS 변수 --text-mood-bg로 추상화
   · 기본값은 calm. 나중에 scene-screen[data-mood-tone="..."]로 override
   ================================================================ */

/* ── 기본 변수 (moodTone 확장 포인트) ── */
.scene-screen[data-presentation-mode="text"] {
  /* 기본 calm tone — 선택 구역 배경과 텍스트색 */
  --text-mood-bg:     rgba(160, 180, 200, 0.14);   /* 은은한 블루-그레이 */
  --text-mood-border: rgba(140, 160, 180, 0.28);
  --text-mood-ink:    #2a2a2a;
  --text-paper:       #faf6ec;                     /* 종이톤 */
  --text-ink-title:   #1a1a1a;
  --text-ink-body:    #2a2a2a;
  --text-ink-muted:   #6a6a6a;

  background-color: var(--text-paper);
}

/* ── 텍스트 박스: 유리패널 해제, 문서 영역으로 ──
   모드 뼈대에서 입혔던 rgba(255,255,255,0.72) 유리톤을 덜어내고,
   종이와 거의 같은 톤 + 좌측 indent 라인만 남김. */
.scene-screen[data-presentation-mode="text"] .text-box {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-left: 3px solid rgba(120, 100, 70, 0.22);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 24px 20px 28px;
  max-width: 680px;
  color: var(--text-ink-body);
}

/* ── 길이별 텍스트 박스 보정: 텍스트형에서는 stage 블랙 배경 해제 ── */
.scene-screen[data-presentation-mode="text"] .text-box--short,
.scene-screen[data-presentation-mode="text"] .text-box--medium,
.scene-screen[data-presentation-mode="text"] .text-box--long {
  background: transparent;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}
.scene-screen[data-presentation-mode="text"] .text-box--long {
  /* long은 하단 밀착 해제 — 읽기 리듬상 중앙 배치가 자연스러움 */
  margin-top: 0;
  max-height: none;
  padding: 18px 24px 20px 28px;
}

/* ── 제목: 명조 + 굵게 + 여유로운 하단 간격 ── */
.scene-screen[data-presentation-mode="text"] .text-box__title {
  font-family: 'Nanum Myeongjo', var(--font-ui);
  color: var(--text-ink-title);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.3;
  margin: 0 0 14px 0;
  letter-spacing: 0.005em;
}

/* ── 본문: 긴 행간 + 명조 + 읽기용 크기 ── */
.scene-screen[data-presentation-mode="text"] .text-box__body {
  font-family: 'Nanum Myeongjo', var(--font-ui);
  color: var(--text-ink-body);
  font-size: clamp(15px, 1.95vw, 17.5px);
  line-height: 2.0;
  letter-spacing: 0.005em;
  text-indent: 0;
}

/* ── long 본문 스크롤도 텍스트형에선 문서 스타일 ── */
.scene-screen[data-presentation-mode="text"] .text-box--long .text-box__body--scroll {
  max-height: 50vh;
  padding-right: 10px;
}

/* ── 선택 구역 (choices-bottom을 '구역'으로) ──
   텍스트형의 핵심 연출: 선택지가 버튼이 아니라 '장면 하단의 선택 공간'처럼 보이게.
   상단에 투명→mood 그라디언트로 본문과 경계, 하단은 mood 색이 은은하게 깔림. */
.scene-screen[data-presentation-mode="text"] .choices-bottom {
  position: relative;
  padding: 28px 24px 24px;
  margin: 0 auto;
  max-width: 680px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--text-mood-bg) 22%,
    var(--text-mood-bg) 100%
  );
  border-top: 1px solid var(--text-mood-border);
  /* 가운데 정렬 자식은 기존 규칙 유지 */
}

/* ── 선택지 버튼: 종이 위 잉크 느낌 ── */
.scene-screen[data-presentation-mode="text"] .choice-btn {
  background: rgba(255, 255, 255, 0.68);
  color: var(--text-ink-body);
  border: 1px solid rgba(120, 100, 70, 0.28);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.08);
  font-family: 'Nanum Myeongjo', var(--font-ui);
  font-weight: 500;
}
.scene-screen[data-presentation-mode="text"] .choice-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(120, 100, 70, 0.5);
  filter: none;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.14);
}
/* 좌측 세로 라인과 우측 화살표를 종이 톤에 맞춰 */
.scene-screen[data-presentation-mode="text"] .choice-btn::before {
  background: rgba(80, 60, 30, 0.4);
}
.scene-screen[data-presentation-mode="text"] .choice-btn::after {
  color: rgba(80, 60, 30, 0.5);
}

/* ── 텍스트형 preset별 미세 차이 ── */
.scene-screen[data-presentation-mode="text"] .choice-preset--basic {
  /* 일반 선택: 기본 종이 버튼 */
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(120, 100, 70, 0.28);
  color: var(--text-ink-body);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scene-screen[data-presentation-mode="text"] .choice-preset--basic:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(120, 100, 70, 0.5);
}
.scene-screen[data-presentation-mode="text"] .choice-preset--ghost {
  /* 고스트: 더 얇고 투명 */
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(120, 100, 70, 0.22);
}
.scene-screen[data-presentation-mode="text"] .choice-preset--pin {
  /* 핀: 강조 — 잉크색 유지 */
  background: #3a2a18;
  color: #f5ead0;
  border: none;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.28);
}

/* ── 텍스트형에서 overlay 선택지는 지양되는 패턴 ──
   그래도 존재하면 종이 위 포스트잇처럼 처리 (배경 brightness는 종이에 불필요) */
.scene-screen[data-presentation-mode="text"] .choice-btn--overlay {
  background: rgba(255, 252, 240, 0.88);
  color: var(--text-ink-body);
  border: 1px solid rgba(120, 100, 70, 0.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(60, 40, 20, 0.2);
}
.scene-screen[data-presentation-mode="text"] .choice-btn--overlay:hover {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── scene-content 여백 조정: 텍스트형은 choices-bottom이 '구역'이라
   scene-content 하단 여백을 과하게 두지 않음 (long은 기존 규칙 유지) ── */
.scene-screen[data-presentation-mode="text"] .scene-content {
  padding-bottom: 0;
}

/* ── HUD: 종이 위에 뜨는 얇은 조작 레이어 ──
   텍스트형은 stage 검정이 아니니 HUD의 어두운 그라디언트가 어색해짐.
   상단 그라디언트를 연한 종이 투명 레이어로 교체. */
.scene-screen[data-presentation-mode="text"] ~ #hud,
.viewer-stage:has(.scene-screen[data-presentation-mode="text"]) #hud {
  /* :has 지원 브라우저에서는 자동 적용. 미지원 시 fallback은 기본 HUD. */
}


/* 모드 상세 힌트 박스 (텍스트형 1차) — 선택된 모드의 특성 안내 */
.edit-mode-detail {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(88,166,255,0.06);
  border: 1px solid rgba(88,166,255,0.18);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.edit-mode-detail-title {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
  font-size: 12px;
}
.edit-mode-detail-list {
  margin: 0;
  padding-left: 18px;
}
.edit-mode-detail-list li {
  margin-bottom: 3px;
}
.edit-mode-detail-list li:last-child {
  margin-bottom: 0;
}
.edit-mode-detail-list b {
  color: var(--text);
  font-weight: 600;
}
/* 텍스트형 전용 — 종이톤 변형 */
.edit-mode-detail--text {
  background: rgba(200, 180, 130, 0.08);
  border-color: rgba(200, 180, 130, 0.28);
}
.edit-mode-detail--text .edit-mode-detail-title {
  color: #a88838;
}

/* ================================================================
   그림책형 1차 — spread / stage 서브모드 연출
   ─────────────────────────────────────────────────────────────
   설계:
   · stage: 현재 picturebook 기본 — 변화 없음. (이 블록에서 건드리지 않음)
   · spread: scene-screen을 가로 2분할 — 좌측 그림 / 우측 텍스트+선택지
     · scene-bg는 좌측 패널에만 배치
     · scene-content는 우측 패널에 배치되어 제목/본문 + overlay choices
     · choices-bottom도 우측 패널 하단에 배치
     · textAnchor는 spread에서 의미가 없어 무시 (좌/우 구도가 고정 지배)
   ================================================================ */

/* stage는 기존 기본 동작 유지 — 명시 블록 없음 (변화 없음) */

/* spread: 가로 2분할 ── */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "left right";
  background-color: #f5efdf;   /* 페이지 톤 — 스토리북의 종이 질감 베이스 */
}

/* 좌측 패널: 이미지 영역 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg {
  grid-area: left;
  position: relative;    /* scene-bg 기본이 absolute지만 grid 안에서는 relative로 */
  inset: auto;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* 우측 페이지와의 경계 — 책 펼침 느낌 주는 중앙 세로 라인 */
  box-shadow: inset -1px 0 0 rgba(100, 80, 50, 0.12);
}
/* scene-bg 내부 img 요소도 왼쪽 칸에 정확히 맞춤 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg img,
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 좌측 이미지 없을 때 — 페이지 느낌 부여 (빈 왼쪽 페이지) */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg:empty,
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"]:not(:has(.scene-bg)) {
  background-color: #ebe3d0;
}
/* 위 :has가 미지원이면 무시됨. 기본 #f5efdf 페이지 톤으로 fallback — 깨지지 않음 */

/* 우측 패널: 텍스트 + 선택지 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-content {
  grid-area: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 40px 42px 24px;
  background: transparent;
  overflow-y: auto;        /* 우측 페이지 내용이 많을 때만 스크롤 */
}

/* spread에서 text-box는 문서/페이지 톤 — 유리패널 해제 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  color: #2a2418;
}

/* spread text-box--long 하단 밀착 해제 — spread는 중앙 배치가 자연스러움 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box--long {
  margin-top: 0;
  max-height: none;
  padding: 0;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box--long .text-box__body--scroll {
  max-height: 40vh;
}

/* spread 제목 / 본문 — 페이지에 찍힌 인쇄물 톤 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box__title {
  color: #1a1610;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  margin-bottom: 16px;
  line-height: 1.3;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box__body {
  color: #2a2418;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.005em;
}

/* spread 선택지: bottom도 우측 페이지 하단에 배치됨 (grid-area:right의 자식 flow) */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choices-bottom {
  grid-area: right;        /* scene-screen 직계 자식일 경우 대비 */
  align-self: end;
  max-width: 100%;
  padding: 16px 24px 24px;
  background: transparent;
  margin-top: 12px;
}

/* spread 선택지 버튼 — 페이지 잉크 톤 */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choice-btn {
  background: rgba(255, 252, 244, 0.82);
  color: #2a2418;
  border: 1px solid rgba(120, 100, 70, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choice-btn:hover {
  background: #fff;
  border-color: rgba(120, 100, 70, 0.55);
  filter: none;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choice-btn::before {
  background: rgba(80, 60, 30, 0.35);
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choice-btn::after {
  color: rgba(80, 60, 30, 0.45);
}

/* spread에서 textAnchor 영향 무시 ──
   좌/우 분할이 구도 지배. 9방향 앵커는 spread에서 의미 없음. */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"][data-text-anchor] .scene-content {
  justify-content: center;
  align-items: stretch;
  padding: 40px 42px 24px;
}

/* spread 모바일/세로 화면 대응 — 폭 좁으면 위아래로 분할 */
@media (max-width: 720px) {
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] {
    grid-template-columns: 1fr;
    grid-template-rows: 45% 55%;
    grid-template-areas:
      "left"
      "right";
  }
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg {
    box-shadow: inset 0 -1px 0 rgba(100, 80, 50, 0.12);
  }
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-content {
    padding: 24px 22px 16px;
  }
}

/* ================================================================
   viewer-edit — 서브모드 카드 UI (그림책형 1차)
   ================================================================ */
.edit-submode-block {
  margin-top: 10px;
  padding: 10px 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(88,166,255,0.22);
  border-radius: 8px;
}
.edit-sublabel {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.edit-submode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.edit-submode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-ui);
  transition: background var(--t-fast), border-color var(--t-fast);
  text-align: left;
}
.edit-submode-card:hover {
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.32);
}
.edit-submode-card--active {
  background: rgba(88,166,255,0.14);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(88,166,255,0.3);
}
.edit-submode-card--locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.edit-submode-icon {
  font-size: 15px;
  line-height: 1;
}
.edit-submode-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.edit-submode-desc {
  font-size: 10px;
  color: var(--text-muted);
}
.edit-submode-card--active .edit-submode-label {
  color: var(--accent);
}

/* 모드 상세 힌트 — picturebook 전용 변형 */
.edit-mode-detail--picturebook {
  background: rgba(74, 144, 217, 0.06);
  border-color: rgba(74, 144, 217, 0.22);
}
.edit-mode-detail--picturebook .edit-mode-detail-title {
  color: #3366a0;
}

/* ================================================================
   기록물형 1차 — letter / clue 서브모드 연출
   ─────────────────────────────────────────────────────────────
   설계:
   · letter: 크림 편지지 + 서명선 헤더 + 조용한 문장형 선택지
   · clue:   짙은 서류 베이지 + 종이 카드 + 테이프 장식 + 행동 카드 선택지
   · 기존 document 모드 뼈대(#e8e0d0 종이톤)를 이 블록이 덮음
     (특이도: 모드+서브모드 동시 셀렉터가 모드 단독보다 높음)
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   letter — 편지/메시지
   ──────────────────────────────────────────────────────────── */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] {
  background-color: #fbf5e4;
  /* 편지지 느낌: 가로 얇은 라인 (hairline paper) — 아주 연하게 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 35px,
    rgba(140, 100, 60, 0.035) 35px,
    rgba(140, 100, 60, 0.035) 36px
  );
}

/* letter 텍스트 박스: 편지지 카드 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box {
  background: #fefaeb;
  border: 1px solid rgba(140, 100, 60, 0.18);
  border-left: none;            /* 종이 왼쪽 꽉 메움 — 문서 느낌 */
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(80, 50, 20, 0.09);
  padding: 28px 36px 32px;
  max-width: 640px;
  margin: 0 auto;
  color: #2a2418;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* letter long 장면도 중앙 배치 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box--long {
  margin: auto;
  max-height: none;
  padding: 28px 36px 32px;
}

/* letter 제목: 편지 헤더 느낌 — italic + 하단 점선 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box__title {
  font-family: 'Nanum Myeongjo', var(--font-ui);
  font-style: italic;
  font-weight: 600;
  color: #4a3a20;
  font-size: clamp(16px, 2.1vw, 19px);
  margin: 0 0 18px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(140, 100, 60, 0.3);
  letter-spacing: 0.01em;
}

/* letter 본문: 명조 + 편지 서술체 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box__body {
  font-family: 'Nanum Myeongjo', var(--font-ui);
  color: #2a2418;
  font-size: clamp(14px, 1.9vw, 16.5px);
  line-height: 1.95;
  text-indent: 0;
  letter-spacing: 0.003em;
}

/* letter 선택 구역: 편지지 하단 — 조용한 서명 구역 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .choices-bottom {
  background: transparent;
  border-top: none;
  padding: 20px 24px 24px;
  max-width: 640px;
  margin: 0 auto;
}

/* letter 선택지: 조용한 문장형 톤 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .choice-btn {
  background: rgba(254, 250, 235, 0.72);
  color: #4a3a20;
  border: 1px solid rgba(140, 100, 60, 0.25);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(80, 50, 20, 0.06);
  font-family: 'Nanum Myeongjo', var(--font-ui);
  font-weight: 500;
  font-style: italic;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .choice-btn:hover {
  background: #fefaeb;
  border-color: rgba(140, 100, 60, 0.45);
  filter: none;
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .choice-btn::before {
  background: rgba(140, 100, 60, 0.4);
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .choice-btn::after {
  color: rgba(140, 100, 60, 0.5);
}

/* ────────────────────────────────────────────────────────────
   clue — 메모/단서/조사
   ──────────────────────────────────────────────────────────── */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] {
  background-color: #2e2620;                    /* 짙은 크래프트 톤 — 클립보드·책상 느낌 */
  background-image:
    radial-gradient(circle at 15% 25%, rgba(60,50,40,0.4) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(40,30,20,0.3) 0%, transparent 45%);
}

/* clue 텍스트 박스: 종이 카드 (책상 위 자료 한 장) */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box {
  background: #f4ebd6;
  border: 1px solid rgba(60, 40, 20, 0.2);
  border-radius: 2px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2);
  padding: 32px 30px 28px;
  max-width: 600px;
  margin: 0 auto;
  color: #1a1410;
  position: relative;                           /* 테이프 장식 기준 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* clue 테이프 장식 — 상단 중앙에 노란 테이프 (의사요소) */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 80px;
  height: 18px;
  background: rgba(220, 200, 110, 0.72);
  border: 1px solid rgba(200, 180, 100, 0.4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* clue long 장면도 카드형 유지 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box--long {
  margin: auto;
  max-height: none;
  padding: 32px 30px 28px;
}

/* clue 제목: 분류 태그 톤 — 굵은 고딕, 좌측 세로 라인 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box__title {
  font-family: var(--font-ui);
  font-weight: 700;
  color: #2a1810;
  font-size: clamp(15px, 2vw, 18px);
  margin: 0 0 14px 0;
  padding: 4px 0 6px 12px;
  border-left: 3px solid #6a4420;
  background: linear-gradient(to right, rgba(106,68,32,0.08), transparent 60%);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* clue 본문: 명조 + 조금 짧은 행간 (정보 밀도) */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box__body {
  font-family: 'Nanum Myeongjo', var(--font-ui);
  color: #1a1410;
  font-size: clamp(14px, 1.9vw, 16px);
  line-height: 1.75;
  letter-spacing: 0.003em;
}

/* clue 선택 구역: 자료 아래 행동 리스트 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .choices-bottom {
  background: transparent;
  border-top: none;
  padding: 18px 24px 24px;
  max-width: 600px;
  margin: 0 auto;
}

/* clue 선택지: 행동 카드 — ::before에 아이콘 슬롯 자리 확보 ──
   다음 턴에 아이콘 기능 얹을 때 이 자리에 선택된 아이콘을 렌더.
   현재는 ▸ 화살표 플레이스홀더. */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .choice-btn {
  background: #f4ebd6;
  color: #2a1810;
  border: 1px solid rgba(60, 40, 20, 0.32);
  border-left: 3px solid #6a4420;
  border-radius: 2px;
  padding-left: 40px;                           /* 아이콘 슬롯 공간 확보 */
  padding-right: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  font-family: var(--font-ui);
  font-weight: 500;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .choice-btn:hover {
  background: #fbf5e4;
  border-color: rgba(60, 40, 20, 0.55);
  border-left-color: #8a5a30;
  filter: none;
}

/* clue 선택지 기본 ::before(세로 라인)를 아이콘 슬롯으로 재배치 ── */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .choice-btn::before {
  /* 기존 세로 라인 대신 — 왼쪽 아이콘 자리 (플레이스홀더 ▸) */
  content: '▸';
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  background: transparent;
  color: #6a4420;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* clue 선택지 ::after(우측 화살표)는 숨김 — 아이콘 슬롯이 이미 방향성 제공 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .choice-btn::after {
  display: none;
}

/* ────────────────────────────────────────────────────────────
   document 서브모드에서 기존 모드 뼈대 CSS 충돌 방지
   뼈대 블록(.scene-screen[data-presentation-mode="document"] .text-box)이
   border-left 등 설정을 했으므로, 서브모드에서 해제 또는 재정의.
   ──────────────────────────────────────────────────────────── */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box,
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box {
  /* 뼈대의 border-left: 3px solid rgba(120,80,40,0.3) 해제 (각 서브모드에서 재지정됨) */
  border-left-width: 1px;
}

/* ================================================================
   edit-mode-detail — document 전용 변형 (모드 상세 힌트)
   ================================================================ */
.edit-mode-detail--document {
  background: rgba(140, 100, 60, 0.08);
  border-color: rgba(140, 100, 60, 0.28);
}
.edit-mode-detail--document .edit-mode-detail-title {
  color: #8a5a30;
}

/* ================================================================
   모드 시스템 정리 1차 — 보정 블록
   ─────────────────────────────────────────────────────────────
   A. 텍스트형 + 이미지 정책: 배경 이미지를 흐리게 (종이톤 우선)
   B. 그림책형 spread: 이중 스크롤 완화 + 선택지 리듬
   C. 기록물형 letter/clue: 문서성·자료성 강화
   D. 공통: 모드 상세 힌트 경고 행
   
   전부 이전 블록 뒤에 와야 override 안전 (특이도 동일 + 순서 이김)
   ================================================================ */

/* ── A. 텍스트형 + 이미지 정책: 배경 이미지 흐리게 ──
   텍스트형에선 scene-bg가 있어도 종이톤 읽기 중심이 기본.
   완전히 숨기진 않고 부드러운 종이 분위기로 깔리게 (opacity 18%).
   scene-bg-overlay를 종이톤 레이어로 덮어 텍스트 가독성 확보. */
.scene-screen[data-presentation-mode="text"] .scene-bg {
  opacity: 0.18;
  filter: saturate(0.6) brightness(1.1);
}
.scene-screen[data-presentation-mode="text"] .scene-bg-overlay {
  background: rgba(250, 246, 236, 0.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scene-screen[data-presentation-mode="text"] .scene-bg-solid {
  /* 이미지 없는 텍스트형 장면의 solid 배경도 종이톤으로 */
  background: transparent;
}

/* 텍스트형에서 overlay 선택지는 '비권장 모드'라는 미세 시각 신호.
   기능은 살아있지만 톤을 조금 덜 두드러지게 조정. */
.scene-screen[data-presentation-mode="text"] .choices-overlay .choice-btn--overlay {
  opacity: 0.94;
}

/* ── B. 그림책형 spread: 이중 스크롤 완화 ──
   scene-content만 주 스크롤. text-box 내부 스크롤(body--scroll)은 해제.
   긴 글은 우측 페이지 전체가 한 스크롤로 읽힘. */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box__body--scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .text-box--long {
  overflow: visible;
}

/* spread에서 우측 패널을 2행 grid로 세분화 — text는 주, choices는 하단 고정 ──
   이전 블록에서 scene-content가 flex column이었는데, 이를 2행 grid로 재정의해
   text 영역은 자라고 choices는 항상 아래에 앉게 한다. */
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] {
  grid-template-areas:
    "left right"
    "left choices";
  grid-template-rows: 1fr auto;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg {
  grid-row: 1 / span 2;    /* 좌측 이미지는 두 행 모두 차지 */
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-content {
  grid-area: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 40px 42px 16px;
  overflow-y: auto;
}
.scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choices-bottom {
  grid-area: choices;
  grid-row: auto;          /* 이전 align-self:end 해제 — grid-area가 위치 지배 */
  align-self: stretch;
  padding: 12px 42px 22px;
  border-top: 1px solid rgba(100, 80, 50, 0.08);  /* 얇은 페이지 하단 구분선 */
}

/* spread 모바일(세로 레이아웃)에서도 동일 리듬 — 상하 분할 유지 */
@media (max-width: 720px) {
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] {
    grid-template-columns: 1fr;
    grid-template-rows: 40% 1fr auto;
    grid-template-areas:
      "left"
      "right"
      "choices";
  }
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .scene-bg {
    grid-row: 1;
    grid-column: 1;
  }
  .scene-screen[data-presentation-mode="picturebook"][data-presentation-submode="spread"] .choices-bottom {
    padding: 12px 22px 18px;
  }
}

/* ── C-1. letter 문서성 강화 ──
   우측 상단에 보낸 사람·날짜 느낌의 작은 메타 라벨을
   text-box::after로 얹음 (실데이터 없이도 편지 문서성 시각 신호). */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box {
  position: relative;
  /* 상단 오른쪽에 메타 라벨 공간 확보 */
  padding-top: 42px;
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box::before {
  content: '📮  letter';
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: 'Nanum Myeongjo', var(--font-ui);
  font-style: italic;
  font-size: 11px;
  color: rgba(140, 100, 60, 0.58);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  pointer-events: none;
}

/* letter long 본문 스크롤 해제 — 편지지는 "한 편 통째로 읽히는" 느낌 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="letter"] .text-box__body--scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* ── C-2. clue 자료성 강화 ──
   text-box::after로 우측 상단에 "자료 #N" 번호 배지.
   scene-screen의 data-scene-num 속성을 attr()로 읽어 표시. */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box {
  padding-top: 40px;
}
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box::after {
  content: '자료 #' attr(data-scene-num);
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: 'Consolas', 'Menlo', 'Nanum Gothic', monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(90, 60, 30, 0.72);
  background: rgba(240, 220, 180, 0.5);
  border: 1px solid rgba(120, 80, 40, 0.32);
  border-radius: 2px;
  padding: 2px 7px;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* clue long 본문 스크롤 해제 — 자료는 카드 전체가 한 번에 보이는 느낌 */
.scene-screen[data-presentation-mode="document"][data-presentation-submode="clue"] .text-box__body--scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* ── D. 모드 상세 힌트 경고 행 ── */
.edit-mode-detail-list li.edit-mode-detail-warn {
  color: #b85a20;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed rgba(184, 90, 32, 0.28);
  font-size: 11.5px;
  line-height: 1.5;
}
.edit-mode-detail-list li.edit-mode-detail-warn b {
  color: #b85a20;
}

/* ================================================================
   무비형 설계 1차 — 시네마틱 무대 + 편집 패널 스타일
   ─────────────────────────────────────────────────────────────
   설계:
   · 기본 뼈대(#0a0a10 검정 배경)는 이미 모드 시스템 뼈대 1차에 있음
   · 이번 턴: 포스터 중심 연출, 자막 레이아웃, 선택지 노출 힌트,
     그리고 "업로드 미구현"을 정직하게 보여주는 placeholder
   · 실제 <video> 태그 렌더는 다음 단계 — 이번 턴은 CSS로 "무비형이면
     이렇게 보이겠구나"를 체감시킴
   ================================================================ */

/* ── 무비형 기본 배경 보강 (모드 뼈대 #0a0a10 위에) ──
   포스터 주변에 어두운 비네팅, 상하 시네마틱 레터박스 느낌의 여백 */
.scene-screen[data-presentation-mode="movie"] {
  background:
    radial-gradient(ellipse at center, rgba(25,25,35,0.4) 0%, rgba(5,5,10,0.85) 75%),
    #060608;
}

/* ── 포스터 이미지 (scene-bg로 렌더됨): 시네마틱 중앙 배치 ── */
.scene-screen[data-presentation-mode="movie"] .scene-bg {
  /* 영상 미구현 단계 — 포스터를 화면 중앙 16:9로 박스에 넣는 느낌 */
  background-size: cover;
  background-position: center;
  /* 시네마틱 페이드: 상하로 검정으로 그라데이션 */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}
.scene-screen[data-presentation-mode="movie"] .scene-bg-overlay {
  /* 영상 영역 위에 옅은 비네팅만 — 자막 영역 대비 확보용 */
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0.5) 100%
  );
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* 포스터 없는 movie 장면: 검은 무대 + 필름 프레임 placeholder 느낌 */
.scene-screen[data-presentation-mode="movie"] .scene-bg-solid {
  background: transparent;
  position: relative;
}
.scene-screen[data-presentation-mode="movie"] .scene-bg-solid::after {
  content: '🎞  영상 준비 중';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.8vw, 16px);
  color: rgba(200, 200, 210, 0.35);
  letter-spacing: 0.15em;
  padding: 14px 28px;
  border: 1px dashed rgba(200, 200, 210, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

/* ── 제목/본문 톤: 시네마틱 밝은 글씨 (자막 가독성 우선) ── */
.scene-screen[data-presentation-mode="movie"] .text-box__title {
  color: #f0f0f0;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  letter-spacing: 0.015em;
}
.scene-screen[data-presentation-mode="movie"] .text-box__body {
  color: #e0e0e5;
  line-height: 1.7;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ── 자막 모드: overlay — 영상 위에 자막처럼 겹치기 (하단) ── */
.scene-screen[data-presentation-mode="movie"][data-movie-caption="overlay"] .text-box {
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 720px;
  margin: auto auto 12vh;        /* 화면 하단 1/6 지점 — 영화 자막 위치 */
  padding: 14px 22px 16px;
  text-align: center;
}
.scene-screen[data-presentation-mode="movie"][data-movie-caption="overlay"] .text-box__title {
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 500;
  margin-bottom: 6px;
  color: rgba(220, 220, 230, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.scene-screen[data-presentation-mode="movie"][data-movie-caption="overlay"] .text-box__body {
  font-size: clamp(15px, 2vw, 17px);
}

/* ── 자막 모드: caption-bar — 영상 아래 별도 자막 띠 ── */
.scene-screen[data-presentation-mode="movie"][data-movie-caption="caption-bar"] .text-box {
  background: rgba(10, 10, 14, 0.82);
  border: none;
  border-top: 1px solid rgba(200, 200, 210, 0.08);
  border-radius: 0;
  padding: 20px 32px 24px;
  max-width: none;
  width: 100%;
  margin: auto 0 0;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.scene-screen[data-presentation-mode="movie"][data-movie-caption="caption-bar"] .text-box__title {
  font-size: clamp(15px, 1.9vw, 18px);
  margin-bottom: 8px;
}
.scene-screen[data-presentation-mode="movie"][data-movie-caption="caption-bar"] .text-box__body {
  font-size: clamp(14px, 1.85vw, 16px);
}

/* ── 선택 구역: 시네마틱 — 영상 아래 어둡고 절제된 띠 ── */
.scene-screen[data-presentation-mode="movie"] .choices-bottom {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.4) 30%,
    rgba(0,0,0,0.7) 100%
  );
  padding: 20px 24px 22px;
  border-top: none;
}

/* ── 선택지 버튼: 무비 인터랙션 — 얇은 라인 + 반투명 ── */
.scene-screen[data-presentation-mode="movie"] .choice-btn {
  background: rgba(20, 20, 26, 0.72);
  color: #f0f0f0;
  border: 1px solid rgba(200, 200, 210, 0.2);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  font-weight: 500;
}
.scene-screen[data-presentation-mode="movie"] .choice-btn:hover {
  background: rgba(40, 40, 50, 0.88);
  border-color: rgba(200, 200, 210, 0.5);
  filter: none;
}
.scene-screen[data-presentation-mode="movie"] .choice-btn::before {
  background: rgba(200, 200, 210, 0.55);
}
.scene-screen[data-presentation-mode="movie"] .choice-btn::after {
  color: rgba(200, 200, 210, 0.65);
}

/* ── choiceReveal: 'end' — 영상 끝에서 노출 ──
   이번 단계는 실제 영상 시점 감지 미구현이라 항상 표시하되,
   상단에 "영상 종료 후 표시" 얇은 태그를 달아 정책을 시각 신호.
   videoUrl이 있을 때만 의미 있는 상태이므로, 미구현 단계에선
   태그만 보이고 선택지는 정상 작동. */
.scene-screen[data-presentation-mode="movie"][data-movie-reveal="end"] .choices-bottom {
  position: relative;
}
.scene-screen[data-presentation-mode="movie"][data-movie-reveal="end"] .choices-bottom::before {
  content: '⏱ 영상 끝나고 선택지 노출 (다음 단계에서 연결)';
  position: absolute;
  top: -9px;
  right: 16px;
  background: rgba(30, 30, 40, 0.85);
  color: rgba(200, 200, 210, 0.7);
  font-size: 10px;
  font-family: var(--font-ui);
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid rgba(200, 200, 210, 0.18);
  letter-spacing: 0.05em;
  pointer-events: none;
  white-space: nowrap;
}

/* ── 텍스트 박스 기본값(모드 뼈대에서 #0a0a10 위에 작성된 것) 덮어쓰기 방지용
       — 이미 overlay/caption-bar에서 재정의됨. 기본 fallback은 없음(movie 선택 시
       captionMode는 항상 둘 중 하나로 정규화됨) */

/* ================================================================
   viewer-edit 무비형 전용 편집 구역 스타일
   ================================================================ */

.edit-submode-block--movie {
  background: rgba(80, 60, 100, 0.06);
  border-color: rgba(80, 60, 100, 0.28);
}

/* 영상 / 포스터 슬롯 (2칸 placeholder) */
.edit-movie-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.edit-movie-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 10px;
  min-height: 90px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed rgba(200, 200, 210, 0.2);
  border-radius: 6px;
  text-align: center;
  overflow: hidden;
}
.edit-movie-slot.is-placeholder {
  opacity: 0.82;
}
.edit-movie-slot-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}
.edit-movie-slot-title {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.edit-movie-slot-note {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 포스터 미리보기 (scene.imageData 있을 때) */
.edit-movie-slot.has-source {
  padding: 0;
  background: #000;
  border-style: solid;
  border-color: rgba(200, 200, 210, 0.25);
}
.edit-movie-poster-preview {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}

/* movie 행 (자막/선택지 노출 토글) */
.edit-movie-row {
  margin-bottom: 8px;
}
.edit-movie-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-family: var(--font-ui);
}
.edit-movie-note {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(240, 160, 0, 0.08);
  border-left: 2px solid rgba(240, 160, 0, 0.3);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* edit-mode-detail — movie 전용 변형 */
.edit-mode-detail--movie {
  background: rgba(80, 60, 100, 0.08);
  border-color: rgba(80, 60, 100, 0.28);
}
.edit-mode-detail--movie .edit-mode-detail-title {
  color: #9070c8;
}
.edit-mode-detail-list li.edit-mode-detail-note {
  color: var(--text-muted);
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(200, 200, 210, 0.15);
  font-size: 11px;
  font-style: italic;
}

/* ================================================================
   모드 시스템 총정리 2차 — 전환 정책 / 충돌 / 비활성 UX
   ================================================================ */

/* ── B. movie × textAnchor 충돌 정책 ──
   movie 모드에서 textAnchor는 무효. 자막은 captionMode가 지배.
   scene-content의 flex 정렬을 movie 기준으로 재정의 — 앵커와 무관하게
   overlay/caption-bar가 자기 규칙대로 배치되게. */
.scene-screen[data-presentation-mode="movie"][data-text-anchor] .scene-content {
  justify-content: initial;
  align-items: initial;
}
/* overlay 모드: text-box가 margin: auto auto 12vh 로 하단 중앙 배치 (기존 규칙 유지) */
/* caption-bar 모드: text-box가 margin: auto 0 0 로 하단 풀폭 (기존 규칙 유지) */
/* textAnchor data 속성이 있어도 spread 같이 scene-content 재설정으로 덮여 텍스트가
   예측 가능한 자리에 앉음. movie 모드에서 text-box의 margin 규칙이 지배. */

/* ================================================================
   C. 무비형 비활성 슬롯 UX — "고장이 아니라 설계된 비활성"
   ================================================================ */

.edit-movie-slot {
  position: relative;                      /* locked-badge 기준 */
}

.edit-movie-slot.is-disabled {
  cursor: not-allowed;
  opacity: 0.58;
  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,0.18) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0,0,0,0.18) 50%,
      rgba(0,0,0,0.18) 75%,
      transparent 75%
    ) repeat,
    rgba(0,0,0,0.22);
  background-size: 12px 12px, auto;
  border-style: dashed;
  border-color: rgba(200, 200, 210, 0.18);
  transition: opacity var(--t-fast);
}
.edit-movie-slot.is-disabled:hover {
  /* 비활성이지만 hover 시 "의도적 비활성"임을 미세 표시 */
  opacity: 0.72;
}
.edit-movie-slot.is-disabled:active {
  /* 클릭해도 눌리는 피드백 없음 — 버튼 아님 */
  transform: none;
}

.edit-movie-slot-locked-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(240, 160, 0, 0.18);
  color: #d88a20;
  border: 1px solid rgba(240, 160, 0, 0.35);
  letter-spacing: 0.05em;
  line-height: 1.3;
  pointer-events: none;
  z-index: 2;
}

/* 포스터 슬롯에 실제 이미지가 있을 때 — "장면 이미지 사용 중" 라벨 */
.edit-movie-slot.has-source {
  position: relative;
  cursor: default;
}
.edit-movie-slot-overlay-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

/* ================================================================
   D/E. 서브모드 상세 힌트 통일 — 간결한 1줄 카드
   (이전 .edit-mode-detail 박스형 → 얇은 인라인 카드로 축약)
   ================================================================ */
.edit-submode-detail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(200, 200, 210, 0.22);
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 1.5;
}
.edit-submode-detail-title {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.edit-submode-detail-desc {
  color: var(--text-muted);
}

/* 모드별 서브모드 디테일 색 변형 */
.edit-submode-detail--picturebook {
  border-left-color: rgba(74, 144, 217, 0.45);
  background: rgba(74, 144, 217, 0.04);
}
.edit-submode-detail--document {
  border-left-color: rgba(140, 100, 60, 0.42);
  background: rgba(140, 100, 60, 0.04);
}

/* 블록 변형 — 배경 톤으로 모드별 차이 */
.edit-submode-block--picturebook {
  border-color: rgba(74, 144, 217, 0.22);
}
.edit-submode-block--document {
  border-color: rgba(140, 100, 60, 0.24);
}

/* ================================================================
   E. textAnchor 비활성 상태 (movie 모드) — 희미한 톤 + 안내 노트
   ================================================================ */
.edit-row--muted {
  opacity: 0.55;
  pointer-events: auto;     /* 클릭은 여전히 가능 — 값은 저장되지만 렌더 영향 없음 */
}
.edit-row--muted:hover {
  opacity: 0.72;
}
.edit-anchor-movie-note {
  margin-top: 8px;
  padding: 6px 9px;
  background: rgba(80, 60, 100, 0.1);
  border-left: 2px solid rgba(144, 112, 200, 0.4);
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  opacity: 1;              /* muted 부모의 opacity 상쇄 — 안내는 또렷하게 */
}
.edit-row--muted .edit-anchor-movie-note {
  opacity: 1.8;            /* parent 0.55의 역보정 (최대 1.0로 수렴) */
}

/* ================================================================
   패널 밀도 축소 (실사용 버그 수정 + 패널 밀도 정리 턴) ──
   목표: 오른쪽 패널 세로 길이 단축. 구조 변경 없이 패딩/높이/폰트만.
   이전 블록들이 위에 작성된 상태이므로, 이 블록이 순서로 이김.
   ================================================================ */

/* 모드 상세 박스 — ul/li 대신 인라인 설명 (제목 + 부제 + 조건부 warn/note) */
.edit-mode-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.5;
}
.edit-mode-detail .edit-mode-detail-title {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}
.edit-mode-detail .edit-mode-detail-desc {
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 180px;
}
.edit-mode-detail .edit-mode-detail-warn {
  flex-basis: 100%;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed rgba(184, 90, 32, 0.28);
  color: #b85a20;
  font-size: 11px;
  line-height: 1.4;
}
.edit-mode-detail .edit-mode-detail-warn b { color: #b85a20; }
.edit-mode-detail .edit-mode-detail-note {
  flex-basis: 100%;
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(200, 200, 210, 0.14);
  color: var(--text-muted);
  font-size: 10.5px;
  font-style: italic;
  line-height: 1.4;
}

/* 모드별 detail 톤은 기존 유지, 살짝 희미하게 */
.edit-mode-detail--text        { background: rgba(200, 180, 130, 0.06); border: 1px solid rgba(200, 180, 130, 0.22); }
.edit-mode-detail--picturebook { background: rgba(74, 144, 217, 0.05);  border: 1px solid rgba(74, 144, 217, 0.2); }
.edit-mode-detail--document    { background: rgba(140, 100, 60, 0.06);  border: 1px solid rgba(140, 100, 60, 0.22); }
.edit-mode-detail--movie       { background: rgba(80, 60, 100, 0.06);   border: 1px solid rgba(80, 60, 100, 0.24); }
.edit-mode-detail--text .edit-mode-detail-title        { color: #a88838; }
.edit-mode-detail--picturebook .edit-mode-detail-title { color: #3366a0; }
.edit-mode-detail--document .edit-mode-detail-title    { color: #8a5a30; }
.edit-mode-detail--movie .edit-mode-detail-title       { color: #9070c8; }

/* ── 모드 선택 카드 — desc 줄 제거로 높이 축소 ── */
.edit-mode-card {
  padding: 7px 10px;         /* 이전 10px 12px → 축소 */
  min-height: 48px;          /* 예측 가능한 높이 */
}
.edit-mode-card .edit-mode-desc {
  /* 카드에서 desc를 감춤 (tooltip으로 이동). 내용은 유지해서 접근성/hover는 작동 */
  display: none;
}
.edit-mode-card .edit-mode-icon { font-size: 15px; }
.edit-mode-card .edit-mode-label { font-size: 12.5px; }

/* ── 서브모드 카드도 패딩 축소 ── */
.edit-submode-card {
  padding: 6px 8px;          /* 이전 8px 10px → 축소 */
}
.edit-submode-card .edit-submode-desc {
  display: none;             /* tooltip에 남김 */
}
.edit-submode-card .edit-submode-icon { font-size: 13px; }
.edit-submode-card .edit-submode-label { font-size: 11.5px; }

/* ── 서브모드 블록 자체 패딩 축소 ── */
.edit-submode-block {
  padding: 7px 9px 9px;      /* 이전 10px 10px 12px → 축소 */
  margin-top: 8px;           /* 이전 10px → 축소 */
}
.edit-sublabel {
  font-size: 10.5px;         /* 이전 11px → 소폭 축소 */
  margin-bottom: 4px;        /* 이전 6px */
}

/* 서브모드 인라인 상세 카드 더 얇게 */
.edit-submode-detail {
  padding: 5px 9px;          /* 이전 8px 10px */
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
}
.edit-submode-detail-title { font-size: 11.5px; }

/* ── movie 비활성 슬롯 높이 축소 ── */
.edit-movie-slot {
  min-height: 68px;          /* 이전 90px → 축소 */
  padding: 11px 9px;         /* 이전 18px 10px */
  gap: 2px;
}
.edit-movie-slot-icon { font-size: 18px; }
.edit-movie-slot-title { font-size: 11.5px; }
.edit-movie-slot-note { font-size: 9.5px; line-height: 1.3; }
.edit-movie-slot-locked-badge {
  top: 4px; right: 4px;
  font-size: 8.5px;
  padding: 1px 5px;
}
.edit-movie-poster-preview { height: 68px; }
.edit-movie-slots { gap: 6px; margin-bottom: 9px; }

.edit-movie-row { margin-bottom: 6px; }
.edit-movie-label { font-size: 10.5px; margin-bottom: 3px; }
.edit-movie-note {
  margin-top: 8px;
  padding: 6px 9px;
  font-size: 10.5px;
  line-height: 1.45;
}

/* ── textAnchor 안내 (movie 모드) 축소 ── */
.edit-anchor-movie-note {
  margin-top: 6px;
  padding: 5px 8px;
  font-size: 10.5px;
  line-height: 1.4;
}

/* ── fallback 안내 힌트도 축소 ── */
.edit-mode-hint {
  margin-top: 5px;
  padding: 5px 8px;
  font-size: 10.5px;
  line-height: 1.4;
}

/* 섹션 사이 divider 간격도 미세 축소 */
.edit-divider {
  margin: 10px 0;            /* 기존 14px 이상이었다면 소폭 축소 효과 */
}

/* ================================================================
   버튼 N개 편집 UI (v0.3 — 데이터/편집 레이어 안정화 1단계)
   ================================================================ */

.edit-buttons-row {
  /* edit-row 기본 패딩 위에서 추가 처리 */
}

.edit-buttons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  min-width: 0;   /* 2026-06-02: 좁은 grid 컬럼 안에서 카드가 줄어들 수 있게 */
}

.edit-button-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  transition: border-color 0.12s, background 0.12s;
  min-width: 0;   /* 2026-06-02: input/meta가 패널 폭 안에서 줄어들게 (overflow 차단) */
}
.edit-button-row:hover {
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}
.edit-button-row:focus-within {
  border-color: rgba(88, 166, 255, 0.6);
  background: rgba(88, 166, 255, 0.04);
}

.edit-button-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-button-row-main .edit-text-input--choice {
  flex: 1;
  min-width: 0;  /* shrink 허용 */
}

.edit-btn-remove {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(220, 100, 100, 0.3);
  background: rgba(220, 100, 100, 0.08);
  color: #d47070;
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.12s;
}
.edit-btn-remove:hover {
  background: rgba(220, 100, 100, 0.2);
  border-color: rgba(220, 100, 100, 0.6);
  color: #ff8888;
}

.edit-button-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 2026-06-02: 좁은 패널 폭에서 [글자수]+[다음→select]가 한 줄에 안 들어가면
     overflow 대신 줄바꿈(연결 select가 아래 줄로). 넓은 폭(text/pb)에선 한 줄 유지 — 회귀 0. */
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 10.5px;
  color: var(--text-muted, #888);
  font-family: 'Consolas', 'Menlo', monospace;
  letter-spacing: 0.02em;
}

.edit-btn-counter {
  color: var(--text-muted, #888);
}
.edit-btn-counter--warn {
  color: #d4a060;   /* 30자 초과 — 주황 경고 */
  font-weight: 500;
}
.edit-btn-counter--over {
  color: #d47070;   /* 60자 초과 — 빨간 차단 */
  font-weight: 600;
}
.edit-btn-counter--warn .js-edit-btn-len,
.edit-btn-counter--over .js-edit-btn-len {
  font-weight: 700;
}

.edit-btn-target {
  font-style: normal;
  opacity: 0.75;
  /* 2026-06-02: 라벨 + select 묶음이 좁은 폭에서 select를 줄여 패널 밖으로 안 나가게. */
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

/* nextId 드롭다운 (W2-B-α) — 버튼별 다음 장면 연결 편집 */
.edit-btn-next-label {
  margin-right: 4px;
  color: var(--text-muted, #888);
  font-size: 12px;
}
.edit-btn-next-select {
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border, #444);
  background: var(--bg, #1a1a1a);
  color: var(--text, #ddd);
  font-size: 12px;
  cursor: pointer;
  max-width: 180px;
  min-width: 0;   /* 2026-06-02: 좁은 폭에서 축소 허용 (overflow 차단) */
  /* 길어지면 ... 처리 */
  text-overflow: ellipsis;
}
.edit-btn-next-select:focus {
  outline: 2px solid var(--accent, #5b9dff);
  outline-offset: 1px;
}
.edit-btn-next-select:hover {
  border-color: var(--accent, #5b9dff);
}
/* 미연결 상태 (빈 값 selected) — 시각적 약하게 */
.edit-btn-next-select option[value=""]:checked,
.edit-btn-next-select:not(:focus):has(option[value=""]:checked) {
  color: var(--text-muted, #888);
  font-style: italic;
}
.edit-btn-nolink {
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

/* ============================================================
   2026-05-27 Phase 4-C — 1단 선택지 연결 섹션 (오른쪽 1단)
   ─────────────────────────────────────────────
   행동 버튼별 다음 장면 연결을 1단에서 빠르게 바꿀 수 있게 한 줄짜리 row.
   2단의 .edit-button-row와 톤 통일하되 더 컴팩트 (한 줄 + 작은 gap).
   ============================================================ */
.edit-pb-choice-link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-pb-choice-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  transition: border-color 0.12s, background 0.12s;
  min-width: 0;  /* 1단 폭 좁아도 깨지지 않게 — flex shrink 허용 */
  flex-wrap: wrap;   /* 2026-06-02: 좁은 폭에선 select가 라벨 아래 줄로 쌓이게 */
}
.edit-pb-choice-link-row:hover {
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}
.edit-pb-choice-link-row:focus-within {
  border-color: rgba(88, 166, 255, 0.6);
  background: rgba(88, 166, 255, 0.04);
}

/* 번호 — 작은 원형 badge. 우측 2단 행동 버튼 행과 통일된 톤. */
.edit-pb-choice-link-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.15);
  color: #79b8ff;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Consolas', 'Menlo', monospace;
  letter-spacing: 0;
}

/* 라벨 미리 — flex:1 + ellipsis 한 줄. 비면 muted/italic. */
.edit-pb-choice-link-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text, #ddd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-pb-choice-link-label.is-empty {
  color: var(--text-muted, #888);
  font-style: italic;
}

.edit-pb-choice-link-arrow {
  flex: 0 0 auto;
  color: var(--text-muted, #888);
  font-size: 11px;
  opacity: 0.7;
}

/* 2026-06-02: 1단 행별 개별 삭제(×) — 2단 .edit-btn-remove 톤, 더 작게. 행 끝 고정(축소 X). */
.edit-pb-choice-link-remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(220, 100, 100, 0.3);
  background: rgba(220, 100, 100, 0.08);
  color: #d47070;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.12s;
}
.edit-pb-choice-link-remove:hover {
  background: rgba(220, 100, 100, 0.2);
  border-color: rgba(220, 100, 100, 0.6);
  color: #ff8888;
}

/* select — 1단 폭 안에서 깨지지 않게. flex로 남는 폭 활용 + max 안전망. */
.edit-pb-choice-link-select {
  flex: 1 1 auto;
  min-width: 0;       /* 2026-06-02: 좁은 폭에서 축소 허용 (패널 밖으로 안 나가게) */
  max-width: 100%;    /* 줄바꿈돼 자기 줄에 오면 폭 활용, 절대 패널 초과 X */
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--border, #444);
  background: var(--bg, #1a1a1a);
  color: var(--text, #ddd);
  font-size: 12px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.edit-pb-choice-link-select:focus {
  outline: 2px solid var(--accent, #5b9dff);
  outline-offset: 1px;
}
.edit-pb-choice-link-select:hover {
  border-color: var(--accent, #5b9dff);
}
/* 미연결 상태 (빈 값 selected) — 시각적 약하게 (2단 select와 동일 톤) */
.edit-pb-choice-link-select option[value=""]:checked,
.edit-pb-choice-link-select:not(:focus):has(option[value=""]:checked) {
  color: var(--text-muted, #888);
  font-style: italic;
}
/* disabled 옵션 (자기 자신) — 브라우저 기본보다 명확히 dim */
.edit-pb-choice-link-select option:disabled {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.edit-buttons-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}
.edit-btn-add {
  font-size: 12px;
  padding: 7px 14px;
  background: rgba(88, 166, 255, 0.1);
  border: 1px dashed rgba(88, 166, 255, 0.4);
  color: #79b8ff;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s;
  font-weight: 500;
}
.edit-btn-add:hover {
  background: rgba(88, 166, 255, 0.2);
  border-style: solid;
  border-color: #58a6ff;
  color: #a8d0ff;
}

/* 0개 경고 힌트 */
.edit-field-hint--warn {
  color: #d47070;
  background: rgba(220, 100, 100, 0.08);
  border-left: 2px solid rgba(220, 100, 100, 0.5);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* ================================================================
   ╔═══════════════════════════════════════════════════════════╗
   ║  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 {
  --v03-bg:           #f4f5f7;
  --v03-bg-soft:      #eaecef;
  --v03-card-bg:      #ffffff;
  --v03-card-border:  #e1e4e8;
  --v03-card-shadow:  0 1px 2px rgba(20,30,50,0.04), 0 8px 24px rgba(20,30,50,0.06);
  --v03-fg:           #1a1f2e;
  --v03-fg-soft:      #4a5568;
  --v03-fg-muted:     #8a93a3;
  --v03-divider:      #e1e4e8;
  --v03-accent:       #2d6cdf;
  --v03-btn-bg:       #ffffff;
  --v03-btn-fg:       #1a1f2e;
  --v03-btn-border:   #d1d5db;
  --v03-btn-hover-bg: #f4f5f7;
  --v03-btn-hover-bd: #2d6cdf;
  --v03-illust-bg:    #eef0f4;
  --v03-illust-mark:  #cdd2db;
  --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;
}
.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(2026-07-19): 빈 라벨 기본 문구('다음 장면으로' 등)를 흐림/기울임 없이
   실제 입력한 글처럼 표시 — 감상·편집 모두(사용자 결정: 회색 placeholder가 어색함). */
.choice-v03--empty {
  color: inherit;
  font-style: normal;
}

/* ╭─────────────────────────────────────────╮
   │  모드 1: 텍스트형 (text)                │
   │  배경 + 중앙 카드 + 카드 안 (제목→본문→버튼) │
   ╰─────────────────────────────────────────╯ */
.scene-screen--text {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--v03-bg);
}

/* v37: 텍스트 모드 페이지 비율 고정 — 그림책 .pb-page와 동일 패턴.
   사용자: "디바이스/회전마다 다르게 나옴. 그리기 화면처럼 비율 고정해야".
   .scene-screen--text-paged > .text-page > .text-card */
.scene-screen--text-paged {
  display: grid;
  place-items: center;
  padding: 12px;
  container-type: size;
  container-name: textpage;
  box-sizing: border-box;
}
.scene-screen--text-paged .text-page {
  position: relative;
  /* portrait 기본 (스마트폰 비율) */
  aspect-ratio: 210 / 297;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  background: var(--v03-card-bg, #fffaee);
  border-radius: 14px;
  border: 1px solid rgba(80,50,20,0.08);
  box-shadow:
    0 2px 6px rgba(120,90,50,0.10),
    0 16px 48px rgba(120,90,50,0.18);
  overflow: hidden;
  box-sizing: border-box;
}
@container textpage (aspect-ratio > 210/297) {
  .scene-screen--text-paged .text-page { width: auto; height: 100%; }
}
@container textpage (aspect-ratio <= 210/297) {
  .scene-screen--text-paged .text-page { width: 100%; height: auto; }
}
/* v37: text-card 페이지 가득 채움 — inline style 무시 (사용자 textBox 비활성).
   다듬기·감상·태블릿·맥북 모두 동일 박스. */
.scene-screen--text-paged .text-page .text-card {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 3.5vw, 36px);
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: transparent;
}
/* HOTFIX-MOBILE-TEXT-FIXEDFRAME: 모바일(≤600px) 텍스트 본문 = 고정 독서 프레임.
   직전 compact(height:auto·place-items:center)는 장면마다 카드 높이/위치가 달라져 화면이 왔다갔다(멀미).
   이제 프레임을 화면 상단부터 안정적으로 채워(장면 무관 동일 top/height/actions) 본문만 내부 스크롤.
   · place-items:center→stretch + padding-top 축소 → 카드가 위에서 시작(상단 낭비 감소).
   · text-page/card height:100% → 장면 길이와 무관하게 프레임 고정.
   · 본문 flex:1 1 auto + min-height:0 + overflow-y:auto(후자 둘은 v03-modes HOTFIX-LAYOUT) → 길면 본문만 스크롤.
   · actions flex:0 0 auto → 항상 카드 하단 안정.
   표지(cover-as-pb--text)는 별도 규칙 유지(무영향). 데스크톱/태블릿(>600px) 기존 고정 페이지 유지. */
@media (max-width: 600px) {
  .scene-screen--text-paged {
    padding: 8px 10px 10px;
    place-items: stretch;
  }
  .scene-screen--text-paged .text-page {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }
  .scene-screen--text-paged .text-page .text-card {
    height: 100%;
    max-height: 100%;
    padding: 16px 18px 14px;
  }
  /* text-paged 스코프로 compact의 flex:0 1 auto/max-height 덮어씀(본문 장면 전용·표지 무관). */
  .scene-screen--text-paged .text-card__body {
    flex: 1 1 auto;
    max-height: none;
    margin-bottom: 12px;
  }
  .scene-screen--text-paged .text-card__actions {
    flex: 0 0 auto;
  }
}
.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 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--v03-fg);
  margin: 0 0 14px;
}
/* ADV-EDIT-ABSORB-TITLE-1: 텍스트형 '+ 제목 추가' 칩 — 다듬기 모드, 제목 없는 장면에만 노출.
   감상 모드에는 마크업 자체가 렌더되지 않음(_textTitleHtml 게이트). 작게·점선·본문 위. */
.scene-screen--text .text-title-add-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 7px 13px;
  min-height: 36px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--v03-fg);
  background: rgba(127, 127, 127, 0.08);
  border: 1px dashed rgba(127, 127, 127, 0.45);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.scene-screen--text .text-title-add-chip:hover {
  opacity: 1;
  background: rgba(127, 127, 127, 0.14);
  border-color: rgba(127, 127, 127, 0.7);
}
.scene-screen--text .text-card__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--v03-fg);
  margin: 0 0 18px;
  flex: 1;  /* 본문이 영역 차지, 버튼은 아래로 밀림 */
  /* 줄바꿈 정책: 한국어 단어 단위 + 영문/숫자 강제 줄바꿈 */
  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)         │
   │  TB(상하) 또는 LR(좌우) 50:50 분할      │
   ╰─────────────────────────────────────────╯ */
.scene-screen--pb {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--v03-bg);
  /* 패딩 줄임: 좁은 viewer-frame에서 콘텐츠 면적 확보 */
  padding: 12px;
}
.scene-screen--pb .pb-frame {
  width: 100%;
  height: 100%;
  display: grid;
  /* gap 줄임: 16px → 10px */
  gap: 10px;
  background: var(--v03-bg-soft);
  border-radius: var(--v03-r-md);
}
/* TB: 위 그림 / 아래 텍스트 — v0.3 명세상 50:50 유지하되
   체감상 텍스트 영역에 제목·본문·버튼 다 들어가야 하므로
   minmax(0, 1fr)로 그림이 텍스트 압박하지 않게 함 */
.scene-screen--pb.pb--tb .pb-frame {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: 1fr;
}
/* LR: 좌 그림 / 우 텍스트 — 50:50 (v0.3 고정)
   minmax(0, 1fr)로 영역이 콘텐츠에 의해 안 늘어나도록 (overflow는 자식 처리) */
.scene-screen--pb.pb--lr .pb-frame {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
}

/* 그림 슬롯 — A4 비율(세로/가로) 그림 안전 처리:
   cover 중심 + center crop. 원본 비율 보존보다 페이지 안 안정 배치 우선.
   inner padding으로 액자 느낌 — 그림이 영역 전체를 꽉 채우지 않게 (시각 압박 줄임). */
.scene-screen--pb .pb-illust {
  background: var(--v03-illust-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--v03-r-md);
  border: 1px solid var(--v03-card-border);
  /* inner framing — 그림 슬롯 안에 살짝 여백.
     그림이 있을 때는 cover로 채워지고, 없을 때(empty)는 placeholder가 안에 표시 */
  min-width: 0;
  min-height: 0;
  /* A4 그림 안전 크롭: cover 중심 + center 정렬. 사용자가 세로 A4 올리면
     좌우는 잘리지만 가운데가 보임. 가로 A4면 위아래 살짝 잘림. 둘 다 의도된 동작. */
}
.scene-screen--pb .pb-illust--empty {
  display: grid;
  place-items: center;
  /* 더 옅은 배경 — 시각 압박 줄임 (0.45 opacity 마크와 어울림) */
  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 {
  /* 마크 크기 줄임 + opacity 더 낮춤 — placeholder가 화면을 안 압도하게 */
  font-size: 36px;
  line-height: 1;
  color: var(--v03-illust-mark);
  opacity: 0.3;
  font-weight: 300;
  /* 의도적으로 짧고 중성적 — v0.3 명세: 감성 문구 금지 */
}

/* 텍스트 영역 — 좁은 환경에서 효율적으로 */
.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 {
  /* 폰트 viewport-반응 — 좁아지면 살짝 작아짐 */
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--v03-fg);
  margin: 0 0 10px;
}
/* SCENE-TITLE-1B: 빈 '일반 장면' 제목 placeholder를 매우 약하게(편집 통로는 유지, 압박만 제거).
   공통 클래스 .js-pb-editable-title만 대상 → 표지 작품 제목(.cover-title-pb)·본문은 무영향.
   #viewer-frame(id)로 특이도를 올려 v03-modes.css(나중 로드)의 0.42~0.5 placeholder를 덮음.
   감상 모드에선 빈 제목 자체가 미렌더라 영향 없음(편집 모드에서만 보임). */
#viewer-frame .js-pb-editable-title:empty::before,
#viewer-frame .js-pb-editable-title.is-empty::before {
  opacity: 0.22;
  font-weight: 400;
}
.scene-screen--pb .pb-text__body {
  font-size: clamp(13px, 1.5vw, 14.5px);
  line-height: 1.7;
  color: var(--v03-fg);
  margin: 0 0 12px;
  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;
  padding-top: 10px;
  border-top: 1px solid var(--v03-divider);
  flex-shrink: 0;
  /* 버튼은 텍스트 영역 안에만, 그림 영역 침범 금지 (v0.3 명세) */
}

/* ╭─────────────────────────────────────────╮
   │  모드 3: 무비형 (movie)                 │
   │  위 미디어(어두움) + 아래 결정 패널(light) │
   │  결정 패널 자연 높이 + 최대 40%          │
   ╰─────────────────────────────────────────╯ */
.scene-screen--movie {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--v03-media-bg);
  display: grid;
  grid-template-rows: 1fr auto;  /* 위 미디어 = 가용 공간, 아래 결정 = 자연 높이 */
}
.scene-screen--movie .movie-media {
  background: var(--v03-media-bg);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 0;  /* grid 1fr가 줄어들 수 있어야 결정 패널이 자연 높이 가짐 */
}
.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;
  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 명세 */
}
.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;
}

/* 결정 패널 — light 톤, 자연 높이 + 최대 40% */
.scene-screen--movie .movie-decision {
  background: var(--v03-card-bg);
  color: var(--v03-fg);
  border-top: 1px solid var(--v03-card-border);
  padding: 16px 24px 18px;
  /* v0.3 명세: 자연 높이 기반 + 최대 40%, 넘치면 내부 스크롤 */
  max-height: 40%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scene-screen--movie .movie-decision__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--v03-fg-soft);
  margin: 0;
  /* 줄바꿈 정책: 한국어 단어 단위 + 영문/숫자 강제 줄바꿈 */
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.scene-screen--movie .movie-decision__actions {
  display: flex;
  gap: 8px;
  /* 기본 세로 (1개·3+개) */
  flex-direction: column;
}
/* 2개 + 가로 허용 시점 — JS가 data-btn-layout="pair" 부여
   가로 가능 조건: 컨테이너 폭이 충분할 때.
   v0.3 명세: 폭 충분 + 문구 짧을 때만 가로, 그 외 세로 자동 전환.
   여기서는 컨테이너 폭으로 1차 분기 (640px 이상). 문구 길이 감지는
   다음 단계 — JS가 측정 후 클래스 토글. 지금은 폭만으로. */
.scene-screen--movie .movie-decision__actions[data-btn-layout="pair"] {
  flex-direction: column;  /* 기본은 세로 */
}
@media (min-width: 640px) {
  .scene-screen--movie .movie-decision__actions[data-btn-layout="pair"] {
    flex-direction: row;
  }
  .scene-screen--movie .movie-decision__actions[data-btn-layout="pair"] .choice-v03 {
    flex: 1;
    /* 가로 배치 시 화살표 숨기고 가운데 정렬 */
    justify-content: center;
    text-align: center;
  }
  .scene-screen--movie .movie-decision__actions[data-btn-layout="pair"] .choice-v03::after {
    display: none;
  }
}

/* ╭─────────────────────────────────────────╮
   │  반응형 — 좁은 화면 보정                │
   ╰─────────────────────────────────────────╯ */
@media (max-width: 820px) {
  /* 그림책 LR은 좁은 화면에서 자동으로 TB로 전환.
     16:9 viewer-frame 안에서 좌우 50:50은 820px 미만에서 너무 좁아짐
     (각 영역 ~410px → 패딩/gap 빼면 본문 영역 ~330px → 한글 가독성 한계).
     820px 임계점은 viewer-frame이 그 폭 미만이면 LR 포기하고 TB로.
     일반적인 노트북 1366×768 + 사이드바 등 빼면 viewer-frame이 800px 안팎 — 안전하게 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 */

/* ================================================================
   v0.3 옵션 C — ③ 선택지 표현 섹션 "기존 모드 전용" 태그
   v0.3 명시 모드(text/picturebook/movie)에서는 이 섹션 자체가
   숨겨지고, document/모드 미지정에서만 노출됨.
   섹션 제목 옆에 작은 회색 배지로 "기존 모드 전용" 표시.
   ================================================================ */
.edit-section-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #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;
}

/* ================================================================
   3단계 — 유형별 다듬기 섹션 클래스
   ─────────────────────────────────────────────────────────────
   원칙: 새 디자인 발명 X. 기존 .edit-row / .edit-toggle-group 톤 그대로 활용.
   여기서는 유형 전용으로만 보이는 보조 클래스만 정의.
   ================================================================ */

/* 진입점만 있고 본격 구현이 추후로 미뤄진 항목 — 시각상 옅게 */
.edit-row--placeholder {
  opacity: 0.7;
}

/* "추후 추가" / 임시 안내 같은 보조 텍스트 — 작고 옅게 */
.edit-section-note {
  font-size: 12px;
  color: var(--text-muted, #8a93a3);
  line-height: 1.5;
  padding: 6px 0;
  font-style: italic;
}

/* 그림책형 / 체험전시형 이미지 슬롯 행 — 상태 + 업로드 진입점 */
.edit-pb-image-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-pb-image-status {
  font-size: 13px;
  color: var(--text, #ddd);
  padding: 4px 0;
}

/* 무비형 미디어 행 — 배지 + 업로드 진입점 */
.edit-movie-media-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.edit-movie-media-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text, #ddd);
  white-space: nowrap;
}



/* ── W6: 체험전시형 다듬기 패널 — connectObject row ── */
.edit-co-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.edit-co-row {
  border: 1px solid var(--edit-card-border, #2a3340);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-co-row-main {
  display: flex;
  gap: 6px;
  align-items: center;
}
.edit-co-badge {
  flex-shrink: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  background: rgba(74, 144, 217, 0.18);
  color: #c8dcf2;
  white-space: nowrap;
}
.edit-co-badge--button   { background: rgba(74, 144, 217, 0.18); color: #c8dcf2; }
.edit-co-badge--arrow    { background: rgba(74, 144, 217, 0.25); color: #d0e3f5; }
.edit-co-badge--flag     { background: rgba(217, 74, 74, 0.18);  color: #f5c8c8; }
.edit-co-badge--next     { background: rgba(74, 217, 144, 0.18); color: #c8f5d8; }
.edit-co-badge--back     { background: rgba(217, 144, 74, 0.18); color: #f5d8c8; }
.edit-co-badge--home     { background: rgba(144, 74, 217, 0.18); color: #d8c8f5; }
.edit-co-badge--invisible{ background: rgba(140, 140, 140, 0.18); color: #d0d0d0; }
.edit-co-label {
  flex: 1;
  min-width: 0;
}
.edit-co-remove {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(220, 53, 69, 0.4);
  background: rgba(220, 53, 69, 0.1);
  color: #ff8090;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.edit-co-remove:hover {
  background: rgba(220, 53, 69, 0.25);
  border-color: rgba(220, 53, 69, 0.7);
}
.edit-co-row-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--edit-fg-muted, #8a93a3);
}
.edit-co-counter {
  flex-shrink: 0;
}
.edit-co-target {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.edit-co-next-label {
  flex-shrink: 0;
}
.edit-co-next {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--edit-card-border, #2a3340);
  border-radius: 4px;
  color: inherit;
}
.edit-co-system-hint {
  font-size: 11px;
  color: #8a93a3;
  font-style: italic;
}
.edit-co-add-area {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--edit-divider, rgba(255,255,255,0.08));
}
.edit-section-note--empty {
  padding: 12px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #8a93a3;
  font-size: 12px;
}

/* ── W7-B: 무비형 영상 업로드 진행률 + 에러 ── */
.edit-movie-progress {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--edit-card-border, #2a3340);
  border-radius: 6px;
}
.edit-movie-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.edit-movie-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90e2, #3abf8a);
  border-radius: 3px;
  width: 0%;
  transition: width 200ms ease-out;
}
.edit-movie-progress-text {
  margin-top: 6px;
  font-size: 11px;
  color: #c8dcf2;
  text-align: center;
}
.edit-movie-error {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 6px;
  color: #ff8090;
  font-size: 11px;
  line-height: 1.5;
}
.edit-movie-video-section,
.edit-movie-poster-section {
  padding: 10px 0;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.edit-movie-video-section:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   W7: 엔딩 본문 살림 — 사용자 본문이 메인, 시스템 라벨이 보조
   사용자 결정: "사용자 본문이 실제 엔딩 본문 영역으로 보이게 할 것"
   ════════════════════════════════════════════════════════════ */

/* 사용자가 입력한 엔딩 제목 — 본문 위 작은 라벨 */
.ending-user-title {
  font-family: 'Jua', 'Nanum Gothic', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

/* 사용자가 쓴 엔딩 본문 — 메인 (큰 글씨, 중앙 정렬) */
.ending-user-body {
  font-family: 'Nanum Gothic', sans-serif;
  font-size: 22px;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 28px;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: -0.005em;
  /* 긴 본문 안전 */
  max-height: 50vh;
  overflow-y: auto;
}

/* 시스템 표시 (🏁 이야기 끝) — 작게, 본문 아래 보조 */
.ending-system-label-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Jua', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}
.ending-system-icon-small {
  font-size: 13px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════
   W8: 바로 그리기 모달
   ─────────────────────────────────────────────────────
   캔버스 그리기 — 펜·지우개·색·굵기·undo·전체지우기
   시안 따뜻한 톤 (종이 베이지 배경, 코랄 액션)
   ════════════════════════════════════════════════════ */
.pb-draw-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-draw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 31, 16, 0.55);
  backdrop-filter: blur(2px);
}
.pb-draw-dialog {
  position: relative;
  width: min(1200px, 96vw);
  height: min(800px, 92vh);
  background: var(--surface, #fbf6ea);
  border-radius: 16px;
  box-shadow:
    0 4px 16px rgba(120,90,50,0.16),
    0 24px 64px rgba(120,90,50,0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pb-draw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface2, #f4ecd8);
}
.pb-draw-title {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 17px;
  color: var(--text, #2b1f10);
  margin: 0;
}
.pb-draw-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b5638);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.pb-draw-close:hover { background: rgba(80,50,20,0.08); }

/* ── MOVIE-TOOL-1A/1B: 🎬 무비 도구 모달 (pb-draw-modal 패턴 축소판) ── */
.movie-tool-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.movie-tool-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 31, 16, 0.55);
  backdrop-filter: blur(2px);
}
.movie-tool-dialog {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: 88vh;
  overflow: auto;
  background: var(--surface, #fbf6ea);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.movie-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #2c3e66, #4a6aa0);
  border-radius: 16px 16px 0 0;
}
.movie-tool-title {
  font-family: 'Jua', sans-serif;
  font-size: 16px;
  color: #fff;
}
.movie-tool-close {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.movie-tool-close:hover { background: rgba(255, 255, 255, 0.36); }
.movie-tool-body { padding: 16px 18px 20px; }
.movie-tool-note { margin: 0 0 12px; font-size: 13px; color: #6b5638; }
.movie-tool-section { margin-bottom: 16px; }
.movie-tool-section-title {
  font-family: 'Jua', sans-serif;
  font-size: 14px;
  color: #2b1f10;
  margin-bottom: 8px;
}
.movie-tool-hint { margin-top: 6px; font-size: 12px; color: #8a7d6b; }
/* 읽기전용: 모달 입력/버튼 차단(닫기 제외). */
body.viewer-edit-readonly .movie-tool-modal button:not(.movie-tool-close) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.25);
}

.pb-draw-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface, #fbf6ea);
  align-items: center;
}
.pb-draw-section {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pb-draw-section-label {
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 11px;
  color: var(--text-muted, #6b5638);
  letter-spacing: 0.04em;
}
.pb-draw-tools {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface2, #f4ecd8);
  border-radius: 10px;
}
.pb-draw-tool {
  padding: 6px 12px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pb-draw-tool:hover { color: var(--text, #2b1f10); }
.pb-draw-tool.is-on {
  background: var(--surface, #fbf6ea);
  color: var(--text, #2b1f10);
  box-shadow: 0 1px 2px rgba(120,90,50,0.10);
}
.pb-draw-colors {
  display: flex;
  gap: 5px;
}
.pb-draw-color {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(80,50,20,0.10);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.15s;
}
.pb-draw-color:hover { transform: scale(1.1); }
.pb-draw-color.is-on {
  border-color: var(--text, #2b1f10);
  transform: scale(1.15);
  box-shadow: 0 1px 4px rgba(120,90,50,0.20);
}
.pb-draw-sizes {
  display: flex;
  gap: 4px;
}
.pb-draw-size {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface, #fbf6ea);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.pb-draw-size:hover { background: var(--surface2, #f4ecd8); }
.pb-draw-size.is-on {
  border-color: var(--text, #2b1f10);
  background: var(--surface2, #f4ecd8);
}
.pb-draw-size-dot {
  background: var(--text, #2b1f10);
  border-radius: 50%;
  display: block;
}
.pb-draw-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.pb-draw-action {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(80,50,20,0.18));
  background: var(--surface, #fbf6ea);
  color: var(--text, #2b1f10);
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.pb-draw-action:hover { background: var(--surface2, #f4ecd8); }

.pb-draw-canvas-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  background: rgba(80,50,20,0.05);
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}
#pb-draw-canvas {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(120,90,50,0.16);
  /* W8: 캔버스 display 크기는 JS에서 wrap 측정 후 동적 설정.
     aspect-ratio 유지하며 wrap 안에서 최대 크기. */
  display: block;
}

/* submode hint — 제목 옆 작은 안내 */
.pb-draw-submode-hint {
  font-size: 11px;
  color: var(--text-muted, #6b5638);
  font-weight: normal;
  margin-left: 4px;
}

/* 펜 압력 체크박스 */
.pb-draw-pressure-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface2, #f4ecd8);
  cursor: pointer;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 12px;
  color: var(--text, #2b1f10);
  user-select: none;
}
.pb-draw-pressure-label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.pb-draw-pressure-label:hover { background: rgba(80,50,20,0.08); }

/* v36: 자유 컬러 피커 */
.pb-draw-color-pick {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px dashed rgba(80,50,20,0.30);
  cursor: pointer;
  padding: 0;
  background: transparent;
  margin-left: 2px;
  transition: transform 0.1s, border-color 0.15s;
}
.pb-draw-color-pick:hover {
  transform: scale(1.1);
  border-color: var(--text, #2b1f10);
}
.pb-draw-color-pick::-webkit-color-swatch { border-radius: 50%; border: none; }
.pb-draw-color-pick::-moz-color-swatch { border-radius: 50%; border: none; }

/* v36: 굵기 슬라이더 */
.pb-draw-size-slider {
  width: 90px;
  margin-left: 4px;
  cursor: pointer;
  accent-color: #c66f4a;
}
.pb-draw-size-val {
  font-size: 11px;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  min-width: 32px;
  text-align: right;
}

/* v36: 불투명도 슬라이더 */
.pb-draw-opacity-slider {
  width: 90px;
  cursor: pointer;
  accent-color: #c66f4a;
}
.pb-draw-opacity-val {
  font-size: 11px;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  min-width: 36px;
  text-align: right;
}

/* v36: 펜 종류 버튼들 (펜 도구일 때 의미 있음) */
.pb-draw-pentypes {
  display: flex;
  gap: 4px;
}
.pb-draw-pentype {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface, #fbf6ea);
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 12px;
  color: var(--text, #2b1f10);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pb-draw-pentype:hover { background: var(--surface2, #f4ecd8); }
.pb-draw-pentype.is-on {
  border-color: var(--text, #2b1f10);
  background: var(--surface2, #f4ecd8);
}

/* v37: 줌 버튼 그룹 (확대·축소·리셋) */
.pb-draw-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pb-draw-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface, #fbf6ea);
  cursor: pointer;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 14px;
  font-weight: bold;
  color: var(--text, #2b1f10);
  display: grid;
  place-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.pb-draw-zoom-btn:hover {
  background: var(--surface2, #f4ecd8);
  border-color: var(--text, #2b1f10);
}
.pb-draw-zoom-val {
  font-size: 11px;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  min-width: 38px;
  text-align: center;
  font-weight: 600;
}

/* v37: 캔버스 wrap — 확대 시 잘림 (overflow hidden). 이동 도구로 다른 영역 보기 */
.pb-draw-canvas-wrap {
  overflow: hidden;
}

/* v36: 도형 채움 토글 */
.pb-draw-fill-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface2, #f4ecd8);
  cursor: pointer;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 12px;
  color: var(--text, #2b1f10);
  user-select: none;
}
.pb-draw-fill-label input[type="checkbox"] { margin: 0; cursor: pointer; }
.pb-draw-fill-label:hover { background: rgba(80,50,20,0.08); }

.pb-draw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, rgba(80,50,20,0.10));
  background: var(--surface2, #f4ecd8);
}
.pb-draw-footer-hint {
  flex: 1;
  font-size: 12px;
  color: #c66f4a;
  font-family: var(--font-ui, 'Jua', sans-serif);
}
.pb-draw-footer-hint:empty { display: none; }
.pb-draw-footer-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.pb-draw-cancel {
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--border, rgba(80,50,20,0.18));
  background: transparent;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.pb-draw-cancel:hover { background: rgba(80,50,20,0.06); }
.pb-draw-save {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: #c66f4a;
  color: #fff;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(198,111,74,0.16), 0 3px 8px rgba(198,111,74,0.24);
  transition: filter 0.15s, transform 0.08s;
}
.pb-draw-save:hover { filter: brightness(1.08); }
.pb-draw-save:active { transform: translateY(1px); }

/* 모바일 — 툴바 더 컴팩트 */
@media (max-width: 768px) {
  .pb-draw-toolbar { gap: 10px; padding: 10px 12px; }
  .pb-draw-section-label { display: none; }
  .pb-draw-submode-hint { display: none; }
  .pb-draw-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .pb-draw-footer { flex-direction: column; align-items: stretch; }
  .pb-draw-footer-hint { text-align: center; }
}

/* v124c: 다듬기 화면 루트보기 CSS — maker.html에 있던 것을 viewer로 이전.
   storyAnalyzer가 생성하는 HTML 클래스(.rt-*)에 스타일이 있어야 카드 모양 정상. */
.rt-path { border-left:3px solid rgba(198,111,74,0.25); padding:4px 0 10px 12px; margin:8px 0; }
.rt-path-label { font-family:'Jua',sans-serif;font-size:11px;color:#c66f4a;margin-bottom:4px; }
.rt-path-steps { display:flex;flex-direction:column;gap:2px; }
.rt-scene-line {
  background:#fffdf7; border:1px solid #e6d8bb; border-radius:8px;
  padding:7px 10px; cursor:pointer; transition:background .12s,border-color .12s;
  display:flex; gap:8px; align-items:baseline; line-height:1.5;
}
.rt-scene-line:hover { background:#fdf3e8; border-color:#c66f4a; }
.rt-scene-line--ending { background:#fbf0ec; border-color:#e0a99a; }
.rt-scene-line--ending:hover { background:#f8e6df; border-color:#c8503c; }
.rt-scene-prefix {
  font-family:'Jua',sans-serif; font-size:12px; color:#c66f4a;
  white-space:nowrap; flex:0 0 auto;
}
.rt-scene-line--ending .rt-scene-prefix { color:#c8503c; }
.rt-scene-text { font-size:13px; color:#2b1f10; word-break:break-word; }
.rt-choice-line {
  font-size:12px; color:#b3603e; background:rgba(198,111,74,0.10);
  border-radius:50px; padding:3px 12px; margin:2px 0 2px 20px;
  align-self:flex-start; font-weight:500;
  display:inline-flex; align-items:center; gap:6px;
}
.rt-choice-line .rt-choice-text { display:inline; }

/* ── v130: 루트보기 인라인 수정 — 본문/선택지 라벨 ──
   ✎ 버튼: 평소엔 흐리게, hover/touch 중인 줄에선 진하게.
   _rtIsViewerEditable()=false면 ✎ 자체를 만들지 않음 (storyAnalyzer JS에서 생성). */
.rt-inline-edit-btn {
  margin-left:auto; padding:2px 8px; font-size:12px; line-height:1;
  border:1px solid transparent; border-radius:6px;
  background:transparent; color:#c66f4a; cursor:pointer;
  font-family:'Jua',sans-serif; opacity:.55;
  transition:opacity .12s, background .12s, border-color .12s;
}
.rt-scene-line:hover .rt-inline-edit-btn,
.rt-choice-line:hover .rt-inline-edit-btn,
.rt-inline-edit-btn:hover {
  opacity:1; background:#fffdf7; border-color:rgba(198,111,74,0.45);
}
.rt-choice-line .rt-inline-edit-btn { margin-left:4px; }

.rt-inline-editor-wrap {
  display:block; width:100%; margin-top:6px;
  background:#fffdf7; border:1.5px solid #c66f4a; border-radius:10px;
  padding:8px; box-shadow:0 4px 16px rgba(155,77,202,.18);
}
.rt-inline-editor-wrap--choice {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:0; padding:4px 8px;
}
.rt-inline-body-editor {
  width:100%; min-height:80px; resize:vertical; box-sizing:border-box;
  border:1px solid #e6d8bb; border-radius:6px; padding:8px;
  font-family:'Jua',sans-serif; font-size:13px; color:#2b1f10;
  line-height:1.55; outline:none; white-space:pre-wrap;
}
.rt-inline-body-editor:focus { border-color:#c66f4a; }
.rt-inline-choice-editor {
  flex:1 1 auto; min-width:120px;
  border:1px solid #e6d8bb; border-radius:50px; padding:4px 10px;
  font-family:'Jua',sans-serif; font-size:12px; color:#2b1f10;
  outline:none;
}
.rt-inline-choice-editor:focus { border-color:#c66f4a; }
.rt-inline-editor-actions {
  display:flex; align-items:center; gap:6px; margin-top:6px;
}
.rt-inline-editor-hint {
  flex:1 1 auto; font-family:'Jua',sans-serif; font-size:10px; color:#9a8868;
}
.rt-inline-editor-btn {
  padding:4px 10px; font-family:'Jua',sans-serif; font-size:11px;
  border-radius:50px; border:1.5px solid rgba(198,111,74,0.45); cursor:pointer;
  transition:background .12s, color .12s;
}
.rt-inline-editor-btn--save {
  background:#c66f4a; color:#fffaee; border-color:#c66f4a;
}
.rt-inline-editor-btn--save:hover { background:#b3603e; border-color:#b3603e; }
.rt-inline-editor-btn--cancel {
  background:#fffdf7; color:#b3603e;
}
.rt-inline-editor-btn--cancel:hover { background:rgba(198,111,74,0.10); }
.rt-issue-line {
  font-size:12px; color:#c8503c; background:rgba(200,80,60,0.08);
  border:1px dashed rgba(200,80,60,0.35); border-radius:8px; padding:5px 10px;
  margin:2px 0 2px 20px; align-self:flex-start;
}
.rt-group summary::-webkit-details-marker { display:none; }
.rt-group[open] > summary { border-radius:10px 10px 0 0; }

/* v119: 태블릿 다듬기 화면 작은 보강 (coarse pointer + 768~ ).
   사용자 명령: "대규모 개편 X, 작은 보강만". 적용 내용:
   1. input/textarea/select 16px 보장 — iPad Safari/Android Chrome 자동 확대 차단
   2. 잠금 배너 버튼 터치 영역 min-height 40px
   3. 도구 패널 주요 버튼 최소 터치 영역
   PC 마우스(coarse 아님)·모바일 폰(768 미만)은 영향 없음. */
@media (any-pointer: coarse) and (min-width: 768px) { /* CROSS-A: 클램셸 크롬북(primary=fine)도 포함 */
  /* CROSS-B: 다듬기 크롬 터치 타깃 40px 보장(감상 모드에만 있던 보정을 편집 크롬에도) */
  .maker-return-btn, .edit-toggle, .ai-view-toggle-btn { min-height: 40px; }
  .rt-inline-edit-btn { min-height: 32px; padding: 6px 10px; }
  .edit-text-input,
  .js-edit-text-input {
    font-size: 16px;
  }
  .edit-lock-takeover-btn,
  .edit-lock-recheck-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .edit-lock-banner-actions {
    gap: 10px;
    margin-top: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   WIN-TAB-1 — 장면 전환 중 backdrop-filter 합성 부담 완화
   ────────────────────────────────────────────────────────────
   renderCurrentScene가 감상 모드 전환 시 body.pb-is-scene-switching를
   부여하고 전환 시간만큼 뒤 제거한다. 전환 애니메이션이 도는 동안에만
   본문/선택지의 무거운 blur를 축소해 Windows/태블릿 GPU 스터터를 줄인다.
   · 평상시(전환 종료 후) 디자인은 기존과 동일.
   · 대비 안전장치(brightness)는 유지하고 blur 반경만 축소 → 가독성 보존.
   ════════════════════════════════════════════════════════════ */
body.pb-is-scene-switching .text-box {
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
}
body.pb-is-scene-switching .choice-btn--overlay {
  backdrop-filter: brightness(0.72);
  -webkit-backdrop-filter: brightness(0.72);
}
body.pb-is-scene-switching .choice-preset--basic,
body.pb-is-scene-switching .choice-preset--ghost {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ══ DRAWING-STUDIO-2-SIMPLE: 간단 모드(핵심 도구만 기본)+상태 문구+선택 강조+저장 토스트 ══
   기능 삭제 없음 — 고급 도구는 .pb-draw-adv(기본 접힘)로 이동. 캔버스가 주인이 되도록 도구바 압축. */

/* 현재 도구 상태 1줄 */
.pb-draw-status {
  padding: 7px 18px 0;
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 13px;
  color: #5a7a4c;
}

/* 핵심 도구 한 줄(랩 허용) — 터치 타깃 40px+ */
.pb-draw-core {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.pb-draw-core .pb-draw-tool { min-height: 42px; padding: 8px 14px; font-size: 14px; }
.pb-draw-core .pb-draw-color { width: 34px; height: 34px; }
.pb-draw-core .pb-draw-color-pick { width: 34px; height: 34px; }
.pb-draw-core .pb-draw-size { min-width: 42px; min-height: 42px; }
.pb-draw-core .pb-draw-action { min-height: 42px; padding: 8px 12px; }

/* 선택 도구 강조 강화 — 크림 배경(대비 약함) → sage 채움 */
.pb-draw-tool.is-on {
  background: #7aa06a;
  color: #fff;
  box-shadow: 0 1px 4px rgba(90, 120, 70, 0.35);
}
.pb-draw-tool.is-on:hover { color: #fff; }

/* 도구 더보기 토글 */
.pb-draw-more-btn {
  min-height: 42px;
  padding: 8px 14px;
  border: 1.5px dashed #cdb98c;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted, #6b5638);
  font-family: var(--font-ui, 'Jua', sans-serif);
  font-size: 13px;
  cursor: pointer;
}
.pb-draw-more-btn:hover { background: var(--surface, #fbf6ea); color: var(--text, #2b1f10); }
.pb-draw-more-btn[aria-expanded="true"] { border-style: solid; background: var(--surface, #fbf6ea); }

/* 고급 도구(접힘 기본) — hidden 속성 우선 보장 */
.pb-draw-adv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4d5b8; }
.pb-draw-adv[hidden] { display: none !important; }

/* 저장 성공 토스트 */
.pb-draw-saved-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 100010;
  background: #4a6a3c; color: #fff;
  font-family: var(--font-ui, 'Jua', sans-serif); font-size: 14px;
  padding: 10px 22px; border-radius: 50px;
  box-shadow: 0 6px 20px rgba(40, 60, 30, 0.35);
  opacity: 1; transition: opacity 0.4s ease;
  pointer-events: none;
}
.pb-draw-saved-toast.is-out { opacity: 0; }

/* 모바일(≤768): 도구바 압축 — 캔버스 공간 회복이 목적 */
@media (max-width: 768px) {
  .pb-draw-status { font-size: 12px; padding-top: 5px; }
  .pb-draw-core { gap: 6px 8px; }
  .pb-draw-core .pb-draw-tool { min-height: 40px; padding: 7px 10px; font-size: 13px; }
  .pb-draw-core .pb-draw-color { width: 30px; height: 30px; }
  .pb-draw-core .pb-draw-color-pick { width: 30px; height: 30px; }
  .pb-draw-core .pb-draw-size { min-width: 40px; min-height: 40px; }
  .pb-draw-core .pb-draw-action { min-height: 40px; padding: 7px 9px; font-size: 12px; }
  .pb-draw-more-btn { min-height: 40px; font-size: 12px; padding: 7px 10px; }
}

/* CROSS-A(2026-07-10): 윈도우 클래식 스크롤바(17px 회색) 웜톤·슬림 통일.
   맥/크롬북은 오버레이 스크롤바라 영향 없음. scrollbar-width 지원 Chrome(121+)은
   표준 속성, 그 이전은 ::-webkit-scrollbar 규칙 적용. */
* { scrollbar-width: thin; scrollbar-color: rgba(120,90,50,.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(120,90,50,.35); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* CROSS-B: iPad long-press 시 이미지 저장/공유 시트 억제(감상 무대 그림·영상) — iOS 전용 속성 */
#viewer-frame img, .movie-video { -webkit-touch-callout: none; }

/* ════════════════════════════════════════════════════════════════
   SHELF-1(2026-07-11): 학급 책장 화면 — 목업(shelf-comment-mockup) 확정 시안.
   가운데 정렬 + 최대 폭(넓은 화면 가구 느낌), 기기 폭 따라 3~6권/줄 자동. */
#shelf-screen { position: fixed; inset: 0; overflow-y: auto; background: #f6ecd8;
  padding: 26px 20px 60px; z-index: 30; font-family: 'Jua', 'Apple SD Gothic Neo', sans-serif; }
#shelf-screen.hidden { display: none; }
#shelf-screen .shelf-inner { max-width: 980px; margin: 0 auto; }
#shelf-screen .shelf-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
#shelf-screen .shelf-head h1 { font-size: 24px; color: #3a2c14; margin: 0; }
#shelf-screen .shelf-cnt { color: #a4592f; font-size: 14px; }
#shelf-screen .shelf-home { margin-left: auto; font-size: 13px; color: rgba(80,50,20,0.6); text-decoration: none;
  padding: 6px 14px; border: 1px dashed rgba(80,50,20,0.25); border-radius: 6px; }
#shelf-screen .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px 16px; padding-bottom: 16px; border-bottom: 10px solid #b98d5a; border-radius: 2px; }
#shelf-screen .shelf-book { cursor: pointer; transition: transform .15s; }
#shelf-screen .shelf-book:hover { transform: translateY(-5px); }
#shelf-screen .shelf-cover { aspect-ratio: 2/3; border-radius: 8px 14px 14px 8px; padding: 16px 12px; position: relative;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  box-shadow: -4px 0 0 rgba(0,0,0,.12) inset, 0 6px 14px rgba(90,70,30,.25); }
#shelf-screen .shelf-cover-t { font-size: 16.5px; line-height: 1.3; }
#shelf-screen .shelf-cover-s { font-size: 10.5px; opacity: .75; margin-top: 6px; }
#shelf-screen .shelf-badge { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.88);
  color: #a4592f; font-size: 11px; padding: 2px 8px; border-radius: 20px; }
#shelf-screen .shelf-team { text-align: center; font-size: 12px; color: #7a6a4f; margin-top: 8px; }
#shelf-screen .shelf-foot { margin-top: 14px; font-size: 12px; color: #b09a6f; }
#shelf-screen .shelf-empty { grid-column: 1 / -1; text-align: center; color: #8a6a30;
  font-size: 14.5px; line-height: 1.7; padding: 40px 10px; }

/* COMMENT-1: 댓글 서랍 — 우측 고정, 웜톤 */
#comment-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 92vw); z-index: 60;
  background: #fffaf0; border-left: 2px solid #e2d3b0; padding: 14px 16px; overflow-y: auto;
  display: flex; flex-direction: column; box-shadow: -6px 0 22px rgba(60,40,10,.18);
  font-family: 'Jua', 'Apple SD Gothic Neo', sans-serif; }
#comment-drawer.hidden { display: none; }
#comment-drawer .cmt-head { display: flex; align-items: center; justify-content: space-between;
  color: #a4592f; font-size: 16px; margin-bottom: 4px; }
#comment-drawer .cmt-close { border: none; background: #f3e3bd; color: #6b4a24; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 13px; }
#comment-drawer .cmt-note { font-size: 11.5px; color: #b09a6f; margin-bottom: 12px; }
#comment-drawer .cmt-list { flex: 1; }
#comment-drawer .cmt-item { background: #fff; border: 1px solid #eee0c0; border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; }
#comment-drawer .cmt-who { font-size: 12px; color: #a4592f; font-weight: 700; }
#comment-drawer .cmt-txt { font-size: 13.5px; color: #3a2c14; margin-top: 2px; line-height: 1.45;
  word-break: break-word; }
#comment-drawer .cmt-empty { color: #b09a6f; font-size: 13px; text-align: center; padding: 26px 6px; line-height: 1.6; }
#comment-drawer .cmt-loading { color: #b09a6f; font-size: 13px; text-align: center; padding: 26px 6px; }
#comment-drawer .cmt-form { margin-top: 10px; border-top: 1.5px solid #eee0c0; padding-top: 10px; }
#comment-drawer .cmt-form input, #comment-drawer .cmt-form textarea { width: 100%; box-sizing: border-box;
  border: 1.5px solid #e2d3b0; border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: 13px;
  margin-bottom: 6px; background: #fff; }
#comment-drawer .cmt-err { color: #c62828; font-size: 12px; min-height: 16px; margin-bottom: 4px; }
#comment-drawer .cmt-send { width: 100%; padding: 10px; border: none; border-radius: 9px; background: #c96f4a;
  color: #fff; font-family: inherit; font-size: 14px; cursor: pointer; }
#comment-drawer .cmt-send:disabled { opacity: .6; }

/* KO-WRAP-1(2026-07-11): 한국어 줄바꿈 전역 — 단어(어절) 중간에서 줄이 끊기거나
   '요' 한 글자만 다음 줄로 떨어지는 미관 문제 해소. keep-all=공백 단위로만 줄바꿈,
   overflow-wrap=극단적으로 긴 문자열(URL 등) 넘침 안전판. 개별 요소의 기존 선언이 우선. */
body { word-break: keep-all; overflow-wrap: break-word; }

/* ── LEVELS-FEEDBACK(2026-07-19): 1·2단계(일직선) — 갈래가 없어 '다른 결말 찾기'가 무의미.
   엔딩의 ↺ 버튼을 전 모드 템플릿에서 일괄 숨김('← 직전 장면으로'는 유지=페이지 뒤로 넘기기).
   body 클래스는 viewer-data가 meta.picturebookLevel로 토글. ── */
body.pb-level-linear .js-restart { display: none !important; }