/* 새 셸(shellV2) — body.shell-v2 아래에서만 유효. v1 은 이 파일이 없는 것과 같다(플래그 OFF = 바이트 동일 동작).
 * 단일책임: ① 허브 셸 크롬을 무채색·평면으로(유리·블러·오로라 제거) ② 프로젝트 셸(상단바 48 + 좌/중앙/우) ③ 허브 홈·보드·피드 페이지 레이아웃.
 * 토큰은 tokens.css 그대로(다크 전용 — D6). 악센트는 --accent 1색, 상태색은 완료 --positive · 진행 --accent · 실패 --danger. */

/* ── ① 허브 크롬: 평면 ── */
body.shell-v2 #cosmosBeams { display: none; }
body.shell-v2 { background: var(--canvas); }
body.shell-v2 .shell-sidebar {
  left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--parchment); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-right: 1px solid var(--hairline); border-radius: 0; box-shadow: none; animation: none;
}
body.shell-v2 .rail-mini { background: var(--parchment); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.shell-v2 .nav-btn { border-radius: var(--r-sm); }
body.shell-v2 .nav-btn--active { background: var(--surface-3); }
body.shell-v2 .home-scroll-nudge { display: none !important; }
body.shell-v2 #agentFeedHost { display: none !important; }

/* ── ② 프로젝트 셸 ── */
body.shell-v2.pshell-open .shell-main > .shell-view { display: none; }   /* 허브 섹션은 셸 뒤로 — 중앙에 옮겨 붙인 섹션만 보인다 */
.pshell { display: flex; flex-direction: column; min-height: 100dvh; }
.pshell[hidden] { display: none; }
.pshell-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-sm); height: 48px; padding: 0 var(--sp-sm);
  background: var(--parchment); border-bottom: 1px solid var(--hairline);
}
.pshell-mode {
  height: 30px; padding: 0 28px 0 10px; border-radius: var(--r-sm);
  color: var(--ink); background: var(--surface-1); border: 1px solid var(--hairline);
  font: 600 var(--fs-caption)/1 var(--font-sans); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-48) 50%), linear-gradient(135deg, var(--ink-48) 50%, transparent 50%);
  background-position: calc(100% - 14px) 12px, calc(100% - 9px) 12px; background-size: 5px 5px; background-repeat: no-repeat;
}
.pshell-title { display: flex; align-items: baseline; gap: var(--sp-xs); min-width: 0; flex: 1; justify-content: center; }
.pshell-title-text { font-size: var(--fs-caption); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pshell-title-meta { font-size: var(--fs-fine); color: var(--ink-48); white-space: nowrap; }
.pshell-actions { display: flex; align-items: center; gap: var(--sp-xs); }
.pshell-pill { font-size: var(--fs-fine); color: var(--ink-80); padding: 3px 8px; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
.pshell--readonly .pshell-pill { color: #f0c36b; border-color: rgba(240, 195, 107, 0.4); }
.pshell-save { display: inline-flex; align-items: center; min-width: 0; }
.pshell-save .autosave-indicator { position: static; margin: 0; }
.pshell-mseg { display: none; }
/* 3분할 — 열은 패널 존재 클래스로만 선다(없는 패널은 열도 없다). 접힘은 좌 열을 0 으로 */
.pshell { --pshell-left-w: 240px; }
.pshell-body { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; }
.pshell--left .pshell-body { grid-template-columns: var(--pshell-left-w) 1fr; }
.pshell--right .pshell-body { grid-template-columns: 1fr 300px; }
.pshell--left.pshell--right .pshell-body { grid-template-columns: var(--pshell-left-w) 1fr 300px; }
.pshell--left.pshell--left-folded .pshell-body { grid-template-columns: 0 1fr; }
.pshell--left.pshell--left-folded.pshell--right .pshell-body { grid-template-columns: 0 1fr 300px; }
.pshell--left-folded .pshell-left { overflow: hidden; border: 0; }
.pshell-left, .pshell-right { display: flex; flex-direction: column; min-height: 0; background: var(--parchment); position: sticky; top: 48px; height: calc(100dvh - 48px); }
/* 좌 패널의 회차 행 — 좁은 폭에 맞춰 번호·제목 두 줄·배지만(클리프행어 줄은 접는다) */
.pshell-left .ep-row { padding: 8px 10px; gap: var(--sp-xs); }
.pshell-left .ep-row-no { flex: 0 0 44px; }
.pshell-left .ep-row-event { white-space: normal; font-size: var(--fs-caption); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pshell-left .ep-row-cliff { display: none; }
.pshell-left { border-right: 1px solid var(--hairline); }
.pshell-right { border-left: 1px solid var(--hairline); }
.pshell-left[hidden], .pshell-right[hidden] { display: none; }
.pshell-pane-hd { display: flex; align-items: center; gap: var(--sp-xs); height: 36px; padding: 0 var(--sp-xs) 0 var(--sp-sm); border-bottom: 1px solid var(--hairline); flex: 0 0 auto; }
.pshell-pane-title { flex: 1; font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-48); }
.pshell-pane-bd { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-sm); display: flex; flex-direction: column; gap: var(--sp-sm); }
.pshell-tabs { padding-left: var(--sp-xs); }
.pshell-tab.is-active { background: var(--surface-3); color: var(--ink); }
.pshell-right .pshell-props { display: none; }
.pshell-right--props .pshell-props { display: flex; }
.pshell-right--props .pshell-agent { display: none; }
.pshell-agent-note { margin: 0; font-size: var(--fs-caption); color: var(--ink-48); line-height: 1.5; }
.pshell-props-static { display: flex; flex-direction: column; gap: var(--sp-xs); }
.pshell-agent:has(> :not([hidden]):not(.pshell-agent-note)) .pshell-agent-note { display: none; } /* 옮겨 온 입력이 보이면 안내는 접는다 */
.pshell-kv { display: grid; grid-template-columns: 72px 1fr; gap: 4px var(--sp-xs); font-size: var(--fs-caption); }
.pshell-kv dt { color: var(--ink-48); } .pshell-kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pshell-center { min-width: 0; position: relative; }

/* ── 모드별: 옮겨 붙은 뷰 요소가 패널 안에서 서는 자세(뷰 CSS 는 원래 자리 전제라 여기서만 덮는다) ── */
.pshell-left .wiz-rail { flex-direction: column; align-items: stretch; margin: 0; overflow: visible; }
.pshell-left .wiz-rail-step { justify-content: flex-start; }
body.shell-v2.iv-mode .pshell-left .wiz-rail { display: none; }   /* 원 규칙(.wiz-root.iv-step .wiz-rail)은 노드가 .wiz-root 를 떠나면 안 걸린다 */
.pshell-left .section-nav { position: static; width: auto; max-height: none; }
.pshell-right .wiz-composer { position: static; padding: 0; background: none; pointer-events: auto; }
.pshell-right .wiz-composer-inner { max-width: none; }
body.shell-v2 .pshell-right .ep-drawer-foot { padding: 0; border: 0; }
body.shell-v2 .pshell-right .ep-drawer-foot[hidden] { display: none; }
body.shell-v2 #episodesView .ep-drawer-backdrop { display: none; }
body.shell-v2 #episodesView .ep-drawer { position: static; height: auto; width: 100%; transform: none; box-shadow: none; border-left: 0; }
body.shell-v2 #episodesView .ep-drawer:not(.ep-drawer--open) { display: none; }
body.shell-v2 #episodesView .ep-drawer-body { overflow: visible; }
.pshell-left .audio-editor-lib { flex: 1 1 auto; width: auto; max-width: none; min-height: 0; }
.pshell-left .ep-list { display: flex; flex-direction: column; gap: var(--sp-xs); }
.pshell-right .audio-master-meter { width: auto; flex: 0 0 auto; }
body.shell-v2 .pshell-center .audio-editor { height: calc(100dvh - var(--top-h, 56px)); padding-top: var(--sp-md); }

/* 모바일: 3분할 → 탭 전환. 한 번에 한 칸만 보인다 */
@media (max-width: 720px) {
  .pshell-mseg { display: inline-flex; gap: 2px; margin-left: auto; }
  .pshell-mseg .btn.is-active { background: var(--surface-3); }
  .pshell-title, .pshell-save, .pshell-actions { display: none; }   /* 상단바는 뒤로·모드·탭만 — 저장 상태는 작업 칸 안 도구가 말한다 */
  .pshell-top { gap: 4px; padding: 0 6px; }
  .pshell .pshell-body, .pshell--left .pshell-body, .pshell--right .pshell-body, .pshell--left.pshell--right .pshell-body,
  .pshell--left.pshell--left-folded .pshell-body, .pshell--left.pshell--left-folded.pshell--right .pshell-body { grid-template-columns: minmax(0, 1fr); } /* 1fr 만으로는 트랙이 min-content 로 늘어 화면 밖으로 나간다(실측 862px) */
  .pshell-left, .pshell-right { position: static; height: auto; min-height: calc(100dvh - 48px); min-width: 0; border: 0; }
  .pshell-left, .pshell-right { display: none; }
  body.pshell-m-left .pshell--left .pshell-left { display: flex; }
  body.pshell-m-left .pshell-center, body.pshell-m-right .pshell-center { display: none; }
  body.pshell-m-right .pshell--right .pshell-right { display: flex; }
}
/* 중앙에 옮겨 붙은 기존 섹션 — hidden 은 app.js switchView 가 관리하므로 그대로 두고, 위저드 풀스크린 100dvh 만 상단바만큼 줄인다 */
.pshell-center .shell-view { animation: none; }
body.shell-v2 .wiz-root.iv-step { min-height: calc(100dvh - 48px); }
body.shell-v2.iv-phase0 .wiz-root.iv-step { min-height: calc(100dvh - 48px); }
/* 프로젝트 셸에는 허브 사이드바가 없다 — 자리만 0 으로 두지 말고 **변수도 0** 으로 말한다. tokens.css 가 :root 에 --sidebar-w: 240px 를 주므로
 *   `var(--sidebar-w, 0px)` 의 폴백은 영영 안 쓰인다: 트레이(edge-attached.css)가 없는 사이드바 240px 를 피해 120px 오른쪽으로 치우쳐 떴다(2026-09-18 실측 — 좌 291 · 우 50). */
body.shell-v2.pshell-open.shell-chrome { --sidebar-w: 0px; padding-left: 0; }
body.shell-v2.pshell-open .shell-sidebar { display: none; }
body.shell-v2.pshell-open .rail-mini { display: none; }

/* ── ③ 허브 홈 ── */
.hub-wrap { max-width: 1280px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xl); }
.hub-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.hub-title { margin: 0; font-size: var(--fs-display-md); font-weight: 600; letter-spacing: var(--ls-display-md); color: var(--ink); }
.hub-section { display: flex; flex-direction: column; gap: var(--sp-sm); }
.hub-section-head { display: flex; align-items: baseline; gap: var(--sp-sm); }
.hub-section-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.hub-section-sub { font-size: var(--fs-caption); color: var(--ink-48); }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-sm); }
.hub-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: var(--sp-sm);
  background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.hub-card:hover { border-color: var(--divider-soft); background: var(--surface-2); }
.hub-card--more { align-items: center; justify-content: center; color: var(--ink-80); border-style: dashed; }
.hub-card-thumb { height: 72px; border-radius: var(--r-sm); background: var(--surface-2); }
.hub-card-title { font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-card-meta { font-size: var(--fs-fine); color: var(--ink-48); }
.hub-muted { font-size: var(--fs-caption); color: var(--ink-48); }
.hub-cards--gallery .hub-card-thumb { height: 96px; overflow: hidden; }
.hub-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-sm); }

/* ── ④ 라이브러리(허브 · 프로젝트 › 에셋) ── */
.lib-wrap { max-width: 1280px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-md); }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.lib-search { height: 32px; min-width: 220px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); font: var(--fs-caption)/1 var(--font-sans); }
.lib-chips { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.lib-chip.is-active { background: var(--surface-3); color: var(--ink); }
.lib-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-lg); align-items: start; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-sm); }
.lib-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: var(--sp-xs); background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink); cursor: pointer; }
.lib-card:hover { border-color: var(--divider-soft); background: var(--surface-2); }
.lib-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-ring); }
.lib-card-thumb { aspect-ratio: 1 / 1; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lib-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-card-glyph { font-size: 28px; color: var(--ink-48); }
.lib-card-title { font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-card-meta { font-size: var(--fs-fine); color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-inspector { position: sticky; top: 60px; background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--sp-sm); min-height: 200px; }
body.shell-v2.pshell-open .lib-inspector { top: 56px; }
.lib-ins { display: flex; flex-direction: column; gap: var(--sp-xs); }
.lib-ins-preview { border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.lib-ins-preview img { width: 100%; display: block; }
.lib-ins-preview audio { width: 100%; }
.lib-ins-title { margin: 4px 0 0; font-size: var(--fs-body); color: var(--ink); }
.lib-kv { display: grid; grid-template-columns: 56px 1fr; gap: 4px var(--sp-xs); font-size: var(--fs-caption); }
.lib-kv-k { color: var(--ink-48); } .lib-kv-v { color: var(--ink); overflow-wrap: anywhere; }
.lib-ins-import { display: flex; flex-direction: column; gap: var(--sp-xs); padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); }
.lib-ins-sub { font-size: var(--fs-fine); color: var(--ink-48); text-transform: uppercase; letter-spacing: 0.04em; }
.lib-ins-select, .lib-ins-ep { height: 30px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); font: var(--fs-caption)/1 var(--font-sans); }
@media (max-width: 900px) { .lib-body { grid-template-columns: 1fr; } .lib-inspector { position: static; } }

/* ── ⑤ 프로젝트 Agent 자유 질의(우 패널 · 플래그 projectAgent) ── */
.pshell-agent-ask { display: flex; flex-direction: column; gap: var(--sp-xs); padding-top: var(--sp-sm); border-top: 1px solid var(--hairline); }
.agent-ask { display: flex; flex-direction: column; gap: var(--sp-xs); }
.agent-log { display: flex; flex-direction: column; gap: 6px; max-height: 40dvh; overflow: auto; }
.agent-msg { font-size: var(--fs-caption); line-height: 1.5; padding: 6px 10px; border-radius: var(--r-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-msg--user { align-self: flex-end; background: var(--surface-3); color: var(--ink); max-width: 92%; }
.agent-msg--bot { align-self: flex-start; background: var(--surface-1); color: var(--ink-80); border: 1px solid var(--hairline); max-width: 100%; }
.agent-trunc { color: var(--ink-48); font-size: var(--fs-fine); }
.hub-trend { display: flex; flex-direction: column; gap: var(--sp-sm); }

/* ── ③ 보드 ── */
.board-wrap { max-width: 1280px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-lg); }
.board-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-md); }
.board-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-md); padding-left: 24%; }
.board-card { background: var(--parchment); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.board-card--dim { opacity: 0.55; }
.board-card-hd { display: flex; align-items: center; gap: var(--sp-xs); padding: 8px 12px; font-size: var(--fs-caption); color: var(--ink); background: var(--surface-1); border-bottom: 1px solid var(--hairline); }
.board-card-hd::before { content: '▷'; color: var(--ink-48); font-size: 11px; }
.board-card-bd { display: flex; flex-direction: column; gap: var(--sp-xs); padding: 12px; }
.board-line { font-size: var(--fs-fine); color: var(--ink-80); line-height: 1.4; }
.board-actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.board-pill { font-size: var(--fs-fine); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--hairline); color: var(--ink-80); }
.board-pill.ok { color: var(--positive); border-color: rgba(63, 174, 109, 0.4); }
.board-pill.acc { color: var(--accent); border-color: var(--accent-ring); }
@media (max-width: 720px) {
  .board-branch { padding-left: 0; }
  .hub-wrap, .board-wrap { padding: var(--sp-lg) var(--sp-md); }
}

/* ── ③ 피드 페이지 — 홈의 iv-mode 글라스 카드 규칙(feed.css body.iv-mode) 대신 허브 표면에 평면 카드 ── */
.feed-page-wrap { max-width: 900px; margin: 0 auto; padding: var(--sp-xl) var(--sp-lg); }
.feed-page-wrap .feed-latest-head { display: none; }
.feed-page-empty { padding: var(--sp-xl); text-align: center; color: var(--ink-48); font-size: var(--fs-caption); }

/* ── ⑥ 프로젝트 목록의 '영상만' 섹션(자유 영상 프로젝트 · D5) ── */
.home-free-video { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-xl); }
.home-free-video-head { display: flex; align-items: baseline; gap: var(--sp-xs); flex-wrap: wrap; }
.home-free-video-badge { font-size: var(--fs-fine); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--accent-ring); color: var(--accent); }
.home-free-video-sub { font-size: var(--fs-caption); color: var(--ink-48); }
.home-free-video .home-section-title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }