/* 새 셸 프로젝트 작업실 — 기획 모드: 좌측 단계 트리·문서 목차 · 최종 기획안 문서 · 액션 행. DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 * 원칙: 파란 accent 는 링크·포커스·선택에만. 완료/상태는 중립 칩 + 글자. 카드는 테두리가 아니라 표면 단차. */

/* ═════════ 좌측 패널: 단계 트리 + 문서 목차 ═════════ */
body.shell-v2 .wiz-rail-dot { width: 20px; height: 20px; border: 1px solid var(--hairline); background: transparent; color: var(--ink-48); font-size: 11px; }
body.shell-v2 .wiz-rail-step.is-done .wiz-rail-dot { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }
body.shell-v2 .wiz-rail-step.is-done .wiz-rail-label { color: var(--ink-80); }
body.shell-v2 .wiz-rail-step.is-active { color: var(--ink); font-weight: 600; }
body.shell-v2 .wiz-rail-step.is-active .wiz-rail-dot { background: var(--ink); border-color: var(--ink); color: var(--canvas); box-shadow: none; }
body.shell-v2 .wiz-rail-sep,
body.shell-v2 .wiz-rail-sep.is-filled { background: var(--hairline); }
body.shell-v2 .wiz-rail-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 .pshell-left .wiz-rail { gap: 0; margin-bottom: var(--sp-sm); padding-bottom: 0; }
body.shell-v2 .pshell-left .wiz-rail-step { gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: var(--r-md); }
body.shell-v2 .pshell-left .wiz-rail-step.is-active { background: var(--surface-1); }
/* 세로 트리의 연결선 — 점 가운데 아래로 짧게(가로 막대가 '―' 로 흩어져 보이던 것) */
body.shell-v2 .pshell-left .wiz-rail-sep { width: 1px; height: 6px; margin-left: 17.5px; }

body.shell-v2 .pshell-left .section-nav { gap: 2px; padding: var(--sp-sm) 0 0; border-right: 0; border-top: 1px solid var(--hairline-soft); }
body.shell-v2 .pshell-left .section-nav::before { content: attr(data-heading); display: block; padding: 4px 8px 6px; font-size: var(--fs-fine); font-weight: 600; color: var(--ink-80); }
body.shell-v2 .btn.section-nav-btn { justify-content: flex-start; border: 0; border-radius: var(--r-md); color: var(--ink-48); }
/* 문서 목차 세 층: 제목(13px · ink-80) > 구획 머리(11px 트래킹 · ink-48) > 항목(13px · ink-80 · 들여쓰기). 항목이 머리보다 밝다 — 머리는 라벨이고 항목이 누르는 것이다. */
body.shell-v2 .pshell-left .section-nav .btn.section-nav-btn { color: var(--ink-80); }
body.shell-v2 .pshell-left .section-nav-group { margin-top: var(--sp-md); }
body.shell-v2 .pshell-left .section-nav-group:first-of-type { margin-top: var(--sp-xs); }
body.shell-v2 .btn.section-nav-btn:hover { color: var(--ink); background: var(--surface-1); }
body.shell-v2 .btn.section-nav-btn.is-active { color: var(--ink); background: var(--surface-2); border-color: transparent; }
body.shell-v2 :is(.ep-drawer, .feed-episode-reading) .section-nav { border-right-color: var(--hairline-soft); }

/* ═════════ 기획 모드 — 최종 기획안 문서 ═════════ */
/* 390 가로 넘침: ≤720 에서 layout 이 column + align-items:flex-start 라 본문이 max-content(1225px)로 늘었다. 새 셸에선 목차가 좌 패널로 가므로 늘 꽉 채운다. */
body.shell-v2 .section-nav-content { width: 100%; max-width: 100%; }
body.shell-v2 .stage-panel > .final-output > .section-nav-layout:not(:has(> .section-nav)) { margin-left: 0; }

body.shell-v2 .fp-glance { padding: 20px; border: 0; border-radius: var(--r-xl); background: var(--surface-1); }
body.shell-v2 .fp-chip { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }
body.shell-v2 .fp-glance-status .fp-chip { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }

body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) .frame-block { background: var(--surface-1); border: 0; border-radius: var(--r-xl); }
body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) .frame-block-head { border-bottom-color: var(--hairline-soft); }
body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) .frame-block-title { padding-left: 0; }
body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) .frame-block-title::before { content: none; }
/* 구획 탭·인물 명부·회차 필터 — 선택은 표면 단차(surface-3)로, 파랑은 포커스에만. */
body.shell-v2 .fp-tabs.is-stuck { border-bottom-color: var(--hairline-soft); }
body.shell-v2 .btn.fp-tab[aria-selected="true"],
body.shell-v2 .btn.fp-tl-filter-chip.is-active,
body.shell-v2 .fp-roster-row.is-active { background: var(--surface-3); border-color: transparent; color: var(--ink); }
body.shell-v2 .fp-roster-row:hover { background: var(--surface-2); }
body.shell-v2 .fp-strip-cell { background: var(--surface-2); }
body.shell-v2 .char-card-role { color: var(--ink-48); } /* 역할은 라벨이지 링크·선택이 아니다 — 파랑은 링크·포커스·선택에만(DESIGN.md) */
body.shell-v2 .fp-strip-cell.is-on { background: var(--ink-80); }
body.shell-v2 .fp-roster-row.is-active .fp-strip-cell.is-on { background: var(--ink); }
body.shell-v2 .fp-chip--btn:hover { background: var(--surface-3); color: var(--ink); }
/* 새 셸은 문서가 스크롤하고 프로젝트 상단바(sticky · z 70)가 위에 서 있다 — 탭 바와 그 아래 묶음 머리는 그 밑에 붙는다. */
body.shell-v2.pshell-open .final-output .section-nav-content { --fp-sticky-top: var(--pshell-top-h, var(--top-h)); } /* ≤720 에선 상단바가 저장 줄·전환 줄만큼 높다 — 실높이(projectShell 이 잰다)를 따른다 */
body.shell-v2 .btn.final-copy-btn { border-color: transparent; color: var(--ink-48); }
body.shell-v2 .btn.final-copy-btn:hover { border-color: transparent; background: var(--surface-2); color: var(--ink); }
body.shell-v2 .btn.fp-syn-tab.is-active { background: var(--surface-3); border-color: transparent; color: var(--ink); }
body.shell-v2 .fp-tl-ep,
body.shell-v2 .fp-tl-branch { color: var(--ink-80); }
body.shell-v2 .fp-tl-cliff::before { content: none; }
body.shell-v2 .fp-tl-ghead { background: var(--surface-1); border-bottom-color: var(--hairline-soft); }
body.shell-v2 .fp-tl-row { border-bottom-color: var(--hairline-soft); }
body.shell-v2 .fp-tl-susp { background: var(--surface-2); border-color: transparent; }
/* 표 — 카드 안에서 한 겹 더 어두운 칸이 섞이지 않게. 넘치면 표만 가로로 스크롤한다(래퍼가 이미 overflow-x:auto). */
body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) :is(.km-md-tablewrap, .treatment-table-container) { background: transparent; border-color: var(--hairline); }
body.shell-v2 :is(.final-output, .ep-drawer, .feed-episode-reading) .km-md-table { background: transparent; }

/* 모바일 '트리' 탭 — components.css 의 가로 레일용 규칙이 라벨을 숨겨 점만 남았다. 세로 트리에선 라벨이 곧 내용이다. */
body.shell-v2 .pshell-left .wiz-rail-label { display: inline; }
/* 단계 제목(h2)은 왼쪽 레일의 활성 표시를 되풀이한다 — **레일이 보일 때만** 시각적으로 감춘다(제목 위계·스크린리더는 유지).
 *   레일이 안 보이는 경우(≤720px 은 좌 패널이 탭 뒤로 · 패널을 접었을 때 · 인터뷰 모드)에는 이 제목이 단계의 유일한 이름이라 그대로 둔다. */
@media (min-width: 721px) {
  body.shell-v2:not(.iv-mode) .pshell--left:not(.pshell--left-folded) .pshell-center .wiz-step-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
/* 단계 버튼은 disabled(이동 불가)라 전역 버튼 규칙의 투명도가 걸려 글자 대비가 4.5:1 아래로 떨어졌다 — 색 단계(ink-80/ink)로만 구분한다. */
body.shell-v2 .wiz-rail-step:disabled,
body.shell-v2 .wiz-rail-step[disabled] { opacity: 1; cursor: default; }
/* 인터뷰 단계(새 프로젝트·인터뷰 중인 기획안) — shell2 가 iv-mode 에서 좌 패널 단계 트리를 숨겨 '단계' 헤더만 남은 빈 칸이 됐다.
   v1 의 풀스크린 인터뷰용 규칙이다. 새 셸 좌 패널에서는 트리를 그대로 보여 준다(현재 = AI 인터뷰 강조, 다음 단계는 잠김). */
body.shell-v2.iv-mode .pshell .pshell-left .wiz-rail { display: flex; }
body.shell-v2 .pshell-left .wiz-rail-step.is-locked .wiz-rail-dot { background: transparent; border-color: var(--hairline); color: var(--ink-48); }
body.shell-v2 .pshell-left .wiz-rail-step.is-locked .wiz-rail-label { color: var(--ink-48); }

/* 최종 기획안 액션 행(step-final.js 가 그린다) — 주 CTA 는 파일이 variant 로 정한다(완료 전 '기획안 완료 저장' · 완료 뒤 '에피소드 만들기').
   ≤810 — 버튼들이 두 줄에서 폭이 들쭉날쭉했다. 균등 격자 · 44px(2026-09-22 '기획안으로' 를 걷어 셋이 됐다 — 칸 수를 못박지 않는다). */
@media (max-width: 810px) {
  body.shell-v2 .field-row:has(~ .final-output) { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-xs); }
  body.shell-v2 .field-row:has(~ .final-output) > .btn { width: 100%; min-width: 0; min-height: 44px; justify-content: center; }
  body.shell-v2 .field-row:has(~ .final-output) > .btn .btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 2×2 격자 칸(≈156px)에서 '에피소드 만들기' 가 말줄임됐다 — 칸 안에선 아이콘을 빼 폭을 돌려주고, 긴 라벨('완료 저장하고 에피소드 만들기')은 자르지 않고 두 줄로. */
@media (max-width: 810px) {
  body.shell-v2 .field-row:has(~ .final-output) > .btn .btn__icons { display: none; }
  body.shell-v2 .field-row:has(~ .final-output) > .btn .btn__label { overflow: visible; text-overflow: clip; white-space: normal; text-align: center; line-height: 1.25; word-break: keep-all; }
}

/* 위저드 보완 입력줄(.wiz-composer) — 새 셸에선 가운데 작업 칸 하단에 붙는다(v1 자리). v1 규칙은 viewport 전폭 fixed 라
   좌·우 패널을 덮으므로, 가운데 칸 안에서 스크롤해도 바닥에 붙는 sticky 로 바꾼다. 입력칸은 본문 폭만큼 넓게. */
body.shell-v2 .pshell-center .wiz-composer { position: sticky; left: auto; right: auto; bottom: 0; margin-top: var(--sp-lg); padding: var(--sp-sm) 0 var(--sp-md); background: rgba(9, 9, 9, 0.86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -20px 20px -4px rgba(9, 9, 9, 0.86); } /* 라벨('키워드 직접 추가')이 비치는 본문 글자와 겹쳐 읽히지 않던 것 — 단색 + 위로 번지는 그림자로 가린다 */
body.shell-v2 .pshell-center .wiz-composer-inner { max-width: 760px; margin: 0 auto; }
/* 보완 입력줄은 본문이 짧아도 화면 바닥에 선다(오너 2026-09-25 — sticky 만으로는 본문이 화면보다 짧을 때 본문 바로 아래 가운데쯤에 떠 있었다).
   입력줄이 있는 스텝만 위저드를 화면 높이만큼 세우고 입력줄을 margin-top:auto 로 바닥에 민다. 인터뷰는 자체 배치라 제외. */
body.shell-v2 .pshell-center .wiz-root.wiz-has-composer:not(.iv-step) { display: flex; flex-direction: column; box-sizing: border-box; min-height: calc(100dvh - var(--top-h, 56px)); padding-bottom: 0; } /* 옛 fixed 입력줄 자리로 비워 둔 140px 를 걷는다 — 이제 입력줄이 흐름 안에서 바닥에 선다 */
body.shell-v2 .pshell-center .wiz-root.wiz-has-composer:not(.iv-step) > .wiz-composer { margin-top: auto; }
body.shell-v2 .pshell-center .wiz-root.wiz-has-composer:not(.iv-step) > .wiz-content { margin-bottom: var(--sp-lg); }
/* 입력 줄 = [입력바 + 전송][전진 CTA]. CTA 는 입력바 밖 맨 오른쪽에 늘 선다(오너 2026-10-01 — 입력바 안에 있을 땐 전송 버튼이 CTA 바깥으로 밀렸다).
   입력바가 320px 아래로 짜부라질 폭이면(1024 ~210px · 390 ~70px 이던 것) CTA 가 다음 줄 오른쪽으로 내려간다 — 미디어쿼리 없이 flex-basis 로. */
body.shell-v2 .pshell-center .composer-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }
body.shell-v2 .pshell-center .composer-row > .lqc { flex: 1 1 320px; min-width: 0; }
body.shell-v2 .pshell-center .composer-row > .btn.composer-cta { margin: 0 0 6px auto; } /* 아래 6px = 한 줄 입력바(48px)·전송 버튼과 세로 중심이 맞는 자리(CTA 36px). 입력이 여러 줄로 커지면 전송 버튼처럼 바닥에 남는다 */
body.shell-v2 .pshell-center .composer-bar .iv-textarea { flex: 1 1 0; min-width: 0; }