/* 새 셸 프로젝트 작업실 — 에피소드 모드: 회차 목록(좌) · 요약·대사 스타일 카드 · 회차 드로어(중앙). DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 * 원칙: 파란 accent 는 링크·포커스·선택에만. 완료/상태는 중립 칩 + 글자. 카드는 테두리가 아니라 표면 단차. */

/* ═════════ 에피소드 모드 ═════════ */
/* 프로젝트 셸 상단에 이미 '← 프로젝트' 가 있다 — 뷰의 '← 기획안 목록' 은 중복(v1 셸은 body.shell-v2 가 없어 그대로 보인다). */
body.shell-v2 #episodesView .ep-detail-bar:has(> .ep-back-btn:only-child) { display: none; }
body.shell-v2 #episodesView .ep-studio { padding-top: var(--sp-xl); gap: var(--sp-sm); }

body.shell-v2 .ep-summary-card { gap: var(--sp-xs); padding: 20px; background: var(--surface-1); border: 0; border-radius: var(--r-xl); }
body.shell-v2 .ep-summary-title { font-size: var(--fs-title-3); font-weight: 600; }
body.shell-v2 .ep-summary-chip { background: var(--surface-2); border: 0; color: var(--ink-80); }
body.shell-v2 .ep-summary-label { color: var(--ink-48); font-weight: 500; }
body.shell-v2 .ep-summary-val { color: var(--ink-80); word-break: keep-all; overflow-wrap: anywhere; }
/* 대사 스타일 카드 — 라벨이 column flex 안에서 flex-basis 52px = '높이 52px' 가 되어 빈 줄이 생겼다. */
body.shell-v2 .ep-voice .ep-summary-card { gap: 6px; }
body.shell-v2 .ep-voice .ep-summary-label { flex: 0 0 auto; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
body.shell-v2 .ep-voice .ep-summary-meta { font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-48); word-break: keep-all; }
body.shell-v2 .ep-voice textarea { margin-top: 6px; min-height: 44px; field-sizing: content; padding: 10px 12px; border-radius: var(--r-md); color: var(--ink); line-height: 1.5; resize: vertical; }
body.shell-v2 .ep-voice textarea:focus { outline: none; border-color: var(--accent); }
body.shell-v2 .ep-batch .batch-bar-note { color: var(--ink-48); }
/* ≤810 터치 — [일괄 생성]이 44px 이 되므로(project-touch.css) 옆 범위 드롭다운도 같은 높이로 맞춘다. */
@media (max-width: 810px) { body.shell-v2 .ep-batch .batch-bar-actions .msel-trigger { height: 44px; } }

/* 회차 목록(좌 패널) */
body.shell-v2 .ep-list-head { color: var(--ink-48); line-height: 1.5; word-break: keep-all; }
body.shell-v2 .ep-search { width: 100%; box-sizing: border-box; min-height: 36px; padding: 8px 12px; border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-caption); }
body.shell-v2 .ep-search:focus { outline: none; border-color: var(--accent); }
body.shell-v2 .epr-chip { background: var(--surface-1); border-color: transparent; color: var(--ink-80); }
body.shell-v2 .epr-chip:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
body.shell-v2 .epr-chip.is-active { background: var(--surface-3); border-color: transparent; color: var(--ink); }
body.shell-v2 .epr-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 .pshell-left .ep-row { align-items: flex-start; gap: 10px; padding: 10px 12px; }
body.shell-v2 .ep-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 .pshell-left .ep-row-no,
body.shell-v2 .ep-row-no { flex: 0 0 34px; padding-top: 2px; font-size: var(--fs-caption); font-weight: 500; color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .ep-row .epr-title { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); }
body.shell-v2 .epr-cliff { color: var(--ink-48); }
body.shell-v2 .epr-cliff::before { content: none; }
body.shell-v2 .ep-row-right { gap: 6px; }
body.shell-v2 .ep-row-badge,
body.shell-v2 .ep-row-badge--on,
body.shell-v2 .ep-row-badge--ready { padding: 2px 8px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-48); font-size: var(--fs-fine); }
body.shell-v2 .ep-row-badge--on { background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .ep-row-chev { color: var(--ink-48); }

/* 회차 드로어(중앙) — 액센트 색 칠을 걷는다 */
body.shell-v2 .epr-block { background: var(--surface-1); border-color: transparent; border-radius: var(--r-xl); }
body.shell-v2 .epr-strip-chip { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }
body.shell-v2 .epr-scene-no,
body.shell-v2 .epr-scenechip-no { color: var(--ink-48); }
body.shell-v2 .epr-clip { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .epr-side-card { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .epr-toggle { background: var(--surface-1); border-color: transparent; }
/* 새 셸의 칩 버튼 기본 배경(--lg-control)이 꺼진 칸에도 깔려 켜짐/꺼짐이 알파 0.08 대 0.07 로 거의 같았다(2026-10-01 독립 검증) —
   꺼진 칸은 투명, 켜진 칸만 한 단 위로. */
body.shell-v2 .epr-toggle .btn.epr-toggle-btn { background: transparent; box-shadow: none; }
body.shell-v2 .epr-toggle .btn.epr-toggle-btn.is-active { background: var(--lg-control-on); box-shadow: var(--lg-rim); color: var(--ink); }

/* ═════════ 후속 보정(화면 확인으로 잡은 것) ═════════ */
/* 드로어는 새 셸에서 static 인데 flex 자식이라 원래의 z-index(61)가 살아 스크롤 시 sticky 상단바(z 30) 위를 덮었다. */
body.shell-v2 #episodesView .ep-drawer { z-index: auto; }
/* 회차 읽기 패널 모서리 — 새 셸에서 인라인 칸이 되며 둥근 모서리를 한 번도 받지 않아 위 카드(요약·일괄 생성, --r-xl)와 달리 각져 보였다(오너 2026-09-23).
   overflow 로 자르지 않는다 — 안쪽 목차·보완 발이 sticky 라 조상 overflow 가 그것을 조용히 죽인다. 대신 바닥에 닿는 발이 같은 반경을 받는다. */
body.shell-v2 #episodesView .ep-drawer { border-radius: var(--r-xl); }
/* 회차 제목 — 배지 때문에 'COMMAND // 0…' 로 잘렸다. 두 줄까지 읽히게. */
body.shell-v2 .ep-row .epr-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }
body.shell-v2 .ep-row .epr-cliff { margin-top: 2px; font-size: var(--fs-fine); }
@media (max-width: 810px) {
  body.shell-v2 #episodesView .ep-studio { padding-inline: 0; }
  body.shell-v2 #episodesView .ep-drawer-body { padding-inline: 16px; }
}
/* 드로어로 스크롤할 때 머리(회차 제목·이전/다음·닫기)가 sticky 상단바 밑에 숨지 않게 */
body.shell-v2 #episodesView .ep-drawer { scroll-margin-top: 72px; }
@media (max-width: 810px) { body.shell-v2 #episodesView .ep-drawer { scroll-margin-top: 128px; } }
/* ≤810 드로어 머리 — 44px 아이콘 넷이 제목을 네 줄로 짓눌렀다(지금은 [원문 복사]까지 다섯). 제목은 한 줄 전체, 조작은 그 아래 한 줄(닫기는 오른쪽 끝). */
@media (max-width: 810px) {
  body.shell-v2 #episodesView .ep-drawer-head { flex-wrap: wrap; row-gap: 4px; }
  body.shell-v2 #episodesView .ep-drawer-titlewrap { flex: 1 0 100%; min-width: 0; }
  body.shell-v2 #episodesView .epr-nav { margin-left: -10px; }
  body.shell-v2 #episodesView .ep-drawer-close { margin-left: auto; }
}
/* ≤810 드로어 섹션 목차 — 44px 버튼 여섯 개가 세로로 쌓여 본문을 한 화면 아래로 밀었다. 가로로 넘기는 칩 레일(레일 안에서만 스크롤). */
@media (max-width: 810px) {
  body.shell-v2 #episodesView .ep-drawer .section-nav { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 var(--sp-xs); border-bottom: 0; }
  body.shell-v2 #episodesView .ep-drawer .section-nav::-webkit-scrollbar { display: none; }
  body.shell-v2 #episodesView .ep-drawer .btn.section-nav-btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 14px; border-radius: var(--r-pill); background: var(--surface-1); }
  body.shell-v2 #episodesView .ep-drawer .btn.section-nav-btn.is-active { background: var(--surface-3); }
}
/* 칩 레일이 column + align-items:flex-start 에서 max-content(645px)로 늘어 페이지를 밀었다 — 폭을 부모에 묶는다. */
@media (max-width: 810px) {
  body.shell-v2 #episodesView .ep-drawer .section-nav-layout { align-items: stretch; min-width: 0; }
  body.shell-v2 #episodesView .ep-drawer .section-nav { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 810px) {
  /* 칩은 글자 폭만 — 전역 모바일 버튼 규칙이 폭 100% 를 걸어 칩 하나가 레일 한 칸(334px)을 차지했다. */
  body.shell-v2 #episodesView .ep-drawer .btn.section-nav-btn { width: auto; max-width: none; }
}

/* 회차 보완 입력+이력(.ep-drawer-foot) — 드로어 안에 둔다(우 패널로 옮기면 390 에선 '패널' 탭 안에만 있었다).
   v1 오버레이 드로어는 발이 화면 바닥에 늘 보였다 — 새 셸 드로어는 문서 흐름이라 발이 4,000px 아래로 밀리므로, 드로어를 읽는 동안 바닥에 붙인다.
   🔴 재질(반투명+블러)을 쓰지 않는다 — 이 발은 **콘텐츠 층**이고(HIG "Don't use Liquid Glass in the content layer"),
   실제로 0.86 투과분으로 본문 글자가 입력칸과 겹쳐 읽혔다. 불투명 --canvas + 윗 헤어라인으로 바꾼다.
   (검은 번짐 그림자 0 -20px 20px 도 함께 걷는다 — 글자가 비치던 나머지 절반이다.) */
/* ⚠️ 선택자에 `.ep-drawer` 를 한 칸 더 넣는다 — liquid-glass-chrome.css 가 이 발을 '본문 위 입력 바'(크롬)로 보고
   `#episodesView .ep-drawer-foot:not([hidden])` 에 thick 틴트를 건다. **특이도가 정확히 같아** 나중에 실리는 쪽이 이겼고,
   실측으로 rgba(0,0,0,0.70) + blur(30px) 이 그대로 남아 있었다(본문 글자 30% 투과). 클래스 하나로 이긴다.
   지우는 값도 명시한다 — 선언을 빼기만 하면 그 규칙이 여전히 유일한 선언자라 그대로 적용된다. */
body.shell-v2 #episodesView .ep-drawer .ep-drawer-foot:not([hidden]) {
  position: sticky; bottom: 0; z-index: 2;
  padding: var(--sp-sm) var(--sp-sm) var(--sp-md);
  background: var(--epr-panel, var(--canvas)); border-top: 1px solid var(--hairline); /* 패널과 같은 표면(chrome-base.css 가 값으로 물려준다) — 발만 더 어두운 띠로 뜨지 않게 */
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl); /* 위는 패널 안쪽 칸(헤어라인) · 아래는 패널 모서리와 같은 곡선 — liquid-glass-chrome 의 윗 반경 20px 을 걷는다 */
}
body.shell-v2 #episodesView .ep-drawer-foot .epr-histhost { max-height: 30dvh; overflow: auto; }
body.shell-v2 .ep-refine-head { margin: 0 0 6px; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-48); }
body.shell-v2 .ep-refine-cap { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 4px 0; font-size: var(--fs-fine); color: var(--ink-48); }
body.shell-v2 .ep-refine-cap[hidden] { display: none; }
body.shell-v2 .ep-refine-cap-count { font-variant-numeric: tabular-nums; }
body.shell-v2 .ep-refine-cap--over { color: var(--danger); }
body.shell-v2 #episodesView .ep-refine-bar { gap: 6px; padding: 6px 6px 6px 12px; background: var(--field-fill); border: 1px solid var(--field-edge); border-radius: var(--r-xl); box-shadow: none; }
body.shell-v2 #episodesView .ep-refine-bar:focus-within { border-color: var(--accent); }
body.shell-v2 #episodesView .ep-refine-bar .iv-textarea { min-height: 36px; max-height: 180px; resize: none; line-height: 1.5; padding: 8px 0; background: transparent; border: 0; box-shadow: none; color: var(--ink); font-size: var(--fs-caption); }
body.shell-v2 #episodesView .ep-refine-bar .iv-textarea::placeholder { color: var(--ink-48); }

/* 유료 버튼 둘이 나란히 흰 알약이던 자리 — 새 셸은 `.ep-list-wrap` 만 좌 패널로 보내므로(shell/paneMap.js)
 *   일괄 바와 드로어가 같은 중앙 면에 남는다. 미생성 회차가 있는 채로 미생성 회차를 열면
 *   `이어서 N편 일괄`(유료)과 `생성`(유료)이 함께 선다(2026-09-18 감사).
 * 🔴 **드로어가 열린 동안에는 드로어가 이긴다** — 사용자가 방금 그 회차를 골랐기 때문이다.
 *   일괄 바는 그때만 차콜로 내려간다(닫으면 되돌아온다).
 * ⚠️ 여기서 고치는 이유: `batchBar.js` 의 variant 를 바꾸면 **캐릭터 일괄 화면까지** 바뀐다(공용 컴포넌트다).
 *   드로어 열림 신호는 `.ep-drawer-backdrop--open`(episodes.js:491)이고 일괄 바보다 **뒤**에 붙으므로 `:has(~ …)` 로 본다. */
body.shell-v2 .ep-batch:has(~ .ep-drawer-backdrop--open) .btn.batch-bar-go {
  background: var(--surface-2); border-color: transparent; color: var(--ink);
}
body.shell-v2 .ep-batch:has(~ .ep-drawer-backdrop--open) .btn.batch-bar-go:hover { background: var(--surface-3); }

/* 회차 읽기의 섹션 목차(sticky)는 **프로젝트 상단바 아래**에 붙는다 — `top: 0` 이면 첫 항목이 상단바(sticky · z 70) 밑에 가려진다
 *   (2026-09-19 실측: 900px 스크롤에서 첫 칩의 elementFromPoint 가 .pshell-top). 높이 상한도 그만큼 줄인다. */
@media (min-width: 721px) { body.shell-v2.pshell-open #episodesView .section-nav { top: var(--top-h); max-height: calc(100dvh - var(--top-h)); } } /* 좁은 폭은 기본 규칙이 static 가로 줄로 바꾼다 — 거기엔 걸지 않는다 */