/* 에피소드 읽기 표면 — 목록 2단 행 · 드로어 씬 점프 칩 · 씬별 한 화면.
 * 전부 새 클래스(.epr-*)다. 기존 .ep-row/.ep-drawer 규칙은 손대지 않는다 —
 *   같은 클래스를 스토리보드·팟캐스트·캐릭터 목록이 함께 쓰고 있어 여기서 고치면 남의 화면이 바뀐다.
 * 색·간격·라운드는 tokens.css 변수만 쓴다. 한국어 줄바꿈은 keep-all(어절 단위) + anywhere(긴 영문·URL 대비). */

/* ── 목록: 제목줄 / 클리프행어줄 2단 ─────────────────────────────────── */
.epr-row { align-items: flex-start; }
.epr-row .ep-row-no { padding-top: 1px; }
.epr-title { word-break: keep-all; overflow-wrap: anywhere; }
/* ⚡ 는 CSS 가 붙인다 — 본문 텍스트에 이모지를 섞으면 복사·검색에 딸려 나간다. */
.epr-cliff {
  margin-top: 4px; font-size: var(--fs-caption); line-height: 1.45; color: var(--ink-48);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.epr-cliff::before { content: '⚡'; margin-right: 5px; opacity: 0.75; }

/* ── 목록: 상태 칩 ───────────────────────────────────────────── */
.epr-filterhost:empty { display: none; }
.epr-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); padding: 0 2px var(--sp-xs); }
.epr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.epr-chip {
  font: inherit; font-size: var(--fs-fine); line-height: 1.3; color: var(--ink-80);
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 4px 11px; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.epr-chip:hover { background: var(--surface-2); border-color: var(--divider-soft); color: var(--ink); }
.epr-chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ── 드로어: 앞뒤 회차 ───────────────────────────────────────────────── */
.epr-nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.btn.epr-nav-btn { border-radius: var(--r-sm); }
.btn.epr-nav-btn:disabled { opacity: 0.28; }

/* ── 드로어 머리: 보기 토글 · 씬 점프 칩 ─────────────────────────────────── */
/* 요약 스트립은 2026-09-30 오너 지시로 없어졌다 — 스트립이 잘라 보이던 값은 본문의 '기본 정보' 블록이 다 보인다.
   보기 토글은 2026-10-01 오너 지시로 두 칸(씬별 · 항목별)으로 돌아왔다. */
.epr-head { display: flex; flex-direction: column; gap: var(--sp-xs); }
.epr-toolbar { display: flex; align-items: center; gap: var(--sp-xs); }
.epr-toggle { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface-1); }
.btn.epr-toggle-btn { border-radius: var(--r-pill); border-color: transparent; background: transparent; }
.btn.epr-toggle-btn.is-active { background: var(--surface-3); color: var(--ink); }
.btn.epr-toggle-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.epr-chiprow:empty { display: none; }
.epr-scenechips { display: flex; flex-wrap: wrap; gap: 6px; }
.epr-scenechip { display: inline-flex; align-items: baseline; gap: 6px; }
.epr-scenechip-no { font-weight: 700; color: var(--accent); }
.epr-scenechip-title { color: var(--ink-80); }

/* ── 씬별 한 화면(episodeSheetView) ───────────────────────────────────── */
.epr-scenes { display: flex; flex-direction: column; gap: var(--sp-md); }
.epr-preamble { font-size: var(--fs-caption); color: var(--ink-48); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }

/* 회차 블록 — 기본 정보 · 말미 클리프행어 · 회차 공통(episodeSheetBlocks). 씬 카드와 같은 테두리·여백. */
.epr-block {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  padding: var(--sp-md); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--parchment);
  scroll-margin-top: var(--sp-md);
}
body.shell-v2 #episodesView .epr-block { scroll-margin-top: calc(var(--pshell-top-h, var(--top-h, 0px)) + var(--sp-md)); }
.epr-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs); }
.epr-block .epr-block-title { margin: 0; font-size: var(--fs-caption); font-weight: 700; color: var(--ink-80); }
.epr-block-head .final-edit-btn { margin-left: auto; }
.epr-block-sub { margin-top: 4px; font-size: var(--fs-fine); font-weight: 700; color: var(--ink-48); }
.epr-block-text { margin: 0; font-size: var(--fs-caption); line-height: 1.6; color: var(--ink-80); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.epr-strip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.epr-strip-chip {
  font-size: var(--fs-fine); color: var(--ink-80); background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 3px 10px;
  word-break: keep-all; overflow-wrap: anywhere;
}
/* 기본 정보 — 라벨 | 값 2열(좁으면 한 열). 값은 자르지 않는다(스트립이 자르던 것을 여기서 다 보인다). */
.epr-basics { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-sm); margin: 0; font-size: var(--fs-caption); line-height: 1.6; }
.epr-basics-label { color: var(--ink-48); word-break: keep-all; }
.epr-basics-value { margin: 0; min-width: 0; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }

/* 씬 카드 */
.epr-scene {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  padding: var(--sp-md); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas);
  scroll-margin-top: var(--sp-md); /* 씬 칩 점프 시 카드 머리가 드로어 상단에 붙지 않게 */
}
/* 새 셸 회차 화면은 창이 스크롤한다 — 붙어 있는 상단바(.pshell-top) 밑에 씬 머리가 숨지 않게 그 높이만큼 더 */
body.shell-v2 #episodesView .epr-scene { scroll-margin-top: calc(var(--pshell-top-h, var(--top-h, 0px)) + var(--sp-md)); }
.epr-scene-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-xs); }
.epr-scene-no { font-weight: 800; color: var(--accent); letter-spacing: -0.01em; }
/* 제목은 늘지 않는다 — ★ 표식이 제목 바로 뒤에 붙고 연필만 margin-left:auto 로 오른쪽 끝에 간다. */
.epr-scene .epr-scene-title { margin: 0; flex: 0 1 auto; min-width: 0; font-size: var(--fs-tagline); font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
/* 씬 개요(§2) — 📍 · 상황 · 내적 독백 · 나머지 줄. 대본 줄(클립 상자)과 한 단 다른 흐린 층이다. */
.epr-scene-plan {
  display: flex; flex-direction: column; gap: 4px; padding-left: var(--sp-sm); border-left: 2px solid var(--hairline);
  font-size: var(--fs-caption); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
}
.epr-scene-plantitle { font-weight: 600; color: var(--ink-80); }
.epr-scene-loc { color: var(--ink-48); }
.epr-scene-situ { margin: 0; color: var(--ink-80); }
.epr-scene-extra { color: var(--ink-80); white-space: pre-wrap; }

/* ── 클립 상자 — 머리(클립 N + ★) · 대본 줄(episodeScript.css 의 .eps-* 표기) ─────── */
.epr-clips { display: flex; flex-direction: column; gap: var(--sp-xs); }
.epr-clip { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--parchment); }
.epr-clip-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--fs-fine); font-weight: 600; color: var(--ink-80);
  padding: 6px var(--sp-sm); background: var(--surface-1); border-bottom: 1px solid var(--hairline);
  word-break: keep-all; overflow-wrap: anywhere;
}
.epr-clip-lines { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-sm); }
.epr-clips > .epr-clip-lines { padding: 0; } /* 첫 클립 앞 줄 — 상자 밖이라 안쪽 여백이 없다 */

/* ── 씬 곁카드(연출 포인트) ───────────────────────────────────────────── */
/* 한 줄 전체 폭 — BGM 곁카드가 빠진 뒤(2026-10-01 E5) 2열 격자는 카드 하나만 왼쪽 반에 서고 오른쪽이 비었다(오너: "우측이 비어서 굳이 이럴 필요가 없다"). */
.epr-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
.epr-side-card { padding: var(--sp-sm); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-1); min-width: 0; }
.epr-side-title { font-size: var(--fs-fine); font-weight: 700; color: var(--ink-48); margin-bottom: 4px; }
.epr-side-text { font-size: var(--fs-fine); line-height: 1.55; color: var(--ink-80); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .epr-basics { grid-template-columns: 1fr; gap: 0; }
  .epr-basics-value { margin-bottom: 4px; }
}

/* ── 보완지시 이력(드로어 하단) ──────────────────────────────────────── */
.epr-histhost:empty { display: none; }
.epr-refhist { margin-bottom: var(--sp-xs); }
.epr-refhist-head {
  display: flex; align-items: baseline; gap: var(--sp-xs); width: 100%; text-align: left;
  font: inherit; font-size: var(--fs-fine); color: var(--ink-48);
  background: none; border: 0; padding: 2px 2px 4px; cursor: pointer;
}
.epr-refhist-head:disabled { cursor: default; }
.epr-refhist-tag { flex: 0 0 auto; font-weight: 700; }
.epr-refhist-latest { flex: 1; min-width: 0; color: var(--ink-80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epr-refhist-count, .epr-refhist-caret { flex: 0 0 auto; }
.epr-refhist-caret { display: inline-flex; align-self: center; transition: transform .2s; }
.epr-refhist-caret.is-open { transform: rotate(180deg); }
.epr-refhist-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 168px; overflow-y: auto;
  padding: var(--sp-xs); margin-bottom: var(--sp-xs);
  border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--parchment);
}
.epr-refhist-row { display: flex; gap: var(--sp-xs); font-size: var(--fs-fine); line-height: 1.5; }
.epr-refhist-no { flex: 0 0 auto; color: var(--ink-48); }
.epr-refhist-text { flex: 1; min-width: 0; color: var(--ink-80); word-break: keep-all; overflow-wrap: anywhere; }
.epr-refhist-ts { flex: 0 0 auto; color: var(--ink-48); }

/* ── 캐릭터 대사 스타일 입력 접기 ────────────────────────────────────── */
/* 비어 있는 선택 입력이 상시로 화면을 먹지 않게 한 줄로 접는다. rows 는 JS 가 바꾸고, 여기서는 전환만 부드럽게. */
/* ⚠️ `.synopsisdoc-edit` 가 `min-height: 220px` 를 갖고 있어 rows=1 만으로는 안 접힌다(목 화면 실측 2026-09-09 — 그대로 300px). 여기서 최소 높이를 풀고 포커스·값 있음 때만 늘린다. */
.ep-voice-compact { min-height: 0; height: auto; transition: min-height var(--t-fast) var(--ease); }
.ep-voice-compact:focus, .ep-voice-compact[rows="4"] { min-height: 6.5em; }

/* 회차 본문 직접 수정 — 2026-09-24 판(원문 통째 textarea, .ep-edit*)은 2026-09-25 오너 반려로 걷혔다.
   지금은 씬·섹션 카드의 연필(web/ui/episodeFieldEdit.js)이 web/ui/fieldEdit.css 의 .fe-* 를 쓴다. */