/* 새 셸 프로젝트 작업실 — 우측 패널(Agent|속성) · ≤720 패널 칸 높이. DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 * 원칙: 파란 accent 는 링크·포커스·선택에만. 완료/상태는 중립 칩 + 글자. 카드는 테두리가 아니라 표면 단차. */

/* 왼쪽 패널 머리의 수 — 올라온 목록이 `data-pane-count` 를 줄 때만 선다(영상 ③ 캔버스 '캔버스 7' · 시안 F1 · `projectPanes.setLeftTitleText`) */
body.shell-v2 .pshell-pane-count { flex: none; padding-right: var(--sp-xxs); font-size: var(--fs-fine); color: var(--ink-48); font-variant-numeric: tabular-nums; }

/* ═════════ 우측 패널: Agent | 속성 ═════════ */
body.shell-v2 .pshell-right .pshell-tab { color: var(--ink-48); }
body.shell-v2 .pshell-right .pshell-tab:hover { color: var(--ink); }
body.shell-v2 .pshell-right .pshell-tab.is-active { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .pshell-right .pshell-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 속성 탭 카드 — framer.css 의 `.board-card, .lib-inspector, .pshell-props-static` 규칙이 배경·라운드만 준다
   (셋이 셀렉터를 공유해 그 자리에 안쪽 여백을 얹으면 나머지 둘의 여백 체계를 깬다).
   여백 0 이라 글자가 둥근 모서리에 바로 붙어 있었다(2026-09-22 오너 스크린샷) — .ep-summary-card·.fp-glance 와 같은 20px. */
body.shell-v2 .pshell-props-static { padding: 20px; }
/* 회차 브리프(사건·클리프행어·서스펜스·칩)는 위 kv 사실과 다른 종류의 정보라 얇은 구분선으로 뗀다. */
body.shell-v2 .pshell-props-static .fp-tl-body { padding-top: var(--sp-xs); border-top: 1px solid var(--hairline-soft); gap: var(--sp-xs); }
/* 네 덩어리를 실제로 구분한다(2026-09-22 오너 — 글자는 안 늘리고 시각만). 타임라인 행에서 통하던 문법이
   새 셸에서는 반쯤 해체돼 있었다: 운영 실측으로 ① 서스펜스의 dashed 테두리가 `transparent` 로 덮여 안 보이고
   (project-plan.css 의 새 셸 재지정) ② 칩 배경(surface-1)이 카드 배경(surface-1)과 **같은 토큰**이며
   ③ #adadad 가 kv 라벨·클리프행어·칩 세 곳에 겹쳐 색이 종류를 못 가른다. 아래 세 줄이 그 셋을 각각 푼다.
   ⚠️ 전부 `.pshell-props-static` 안으로 스코프한다 — 트리트먼트 타임라인의 같은 클래스는 건드리지 않는다. */
body.shell-v2 .pshell-props-static .fp-tl-cliff { color: var(--ink-80); }
body.shell-v2 .pshell-props-static .fp-tl-susp { background: transparent; border-color: var(--grid-line-strong); }
body.shell-v2 .pshell-props-static .fp-tl-chip { background: var(--surface-2); }

body.shell-v2 .pshell-agent-ask { gap: var(--sp-sm); padding-top: 0; border-top: 0; }
body.shell-v2 .agent-ask { gap: var(--sp-sm); }
body.shell-v2 .agent-log { gap: 10px; }
body.shell-v2 .agent-msg { padding: 8px 12px; font-size: var(--fs-caption); line-height: 1.6; word-break: keep-all; }
body.shell-v2 .agent-msg--user { max-width: 88%; background: var(--surface-2); color: var(--ink); border-radius: 15px 15px 4px 15px; }
body.shell-v2 .agent-msg--bot { background: var(--surface-1); color: var(--ink-80); border: 0; border-radius: 15px 15px 15px 4px; }
/* 답 마크다운(agentPane fillBot) — pre-wrap 이면 렌더러가 블록 사이에 넣는 개행이 빈 줄로 선다. 문단 간격은 여기서만. */
body.shell-v2 .agent-msg--md { white-space: normal; }
body.shell-v2 .agent-msg--md > .km-md-p, body.shell-v2 .agent-msg--md > .km-md-list { margin: 0 0 6px; }
body.shell-v2 .agent-msg--md > .km-md-list { padding-left: 1.2em; }
body.shell-v2 .agent-msg--md > :last-child { margin-bottom: 0; }
/* 입력 — 앱 공용 goo 입력바(ui/liquidChatBar.js · v2/chat-input.css)가 모양을 그린다. 여기는 이 패널 몫(글자 크기·높이 상한)만.
   ⚠️ 옛 판은 세로(column) 바라 칸에 flex: none 이 필요했다 — 이제 가로 바라 .iv-textarea 의 flex: 1 이 폭 축에 걸리고,
      grow() 의 높이가 그대로 먹는다(2026-09-23 · agentPane.test 8번이 잠근다). */
body.shell-v2 .lqc .agent-input { max-height: 180px; font-size: var(--fs-caption); line-height: 1.5; }
/* 입력은 패널 맨 아래에 붙는다(2026-09-23 오너 *"채팅 입력창이 맨 아래에 고정되는게 맞는 것 같아"*) —
   대화 상자가 남은 높이를 다 먹고, 대화 목록이 그 안에서 스크롤한다. 좁은 화면(패널이 자라는 모드)에선 sticky 가 대신 붙든다. */
body.shell-v2 .pshell-agent-ask, body.shell-v2 .agent-ask { flex: 1 1 auto; min-height: 0; }
body.shell-v2 .agent-log { flex: 1 1 auto; min-height: 0; max-height: none; }
body.shell-v2 .agent-ask > .lqc { position: sticky; bottom: 0; z-index: 2; }
/* Agent 탭 빈 본문 — shell2 의 `.pshell-agent:has(…) .pshell-agent-note` 가 자손 전체를 잡아, 질문 상자 안의 안내('아직 대화가 없어요' 등)까지 숨겼다.
   질문 상자 안 안내는 되살린다(패널 직속 안내만 접히는 것이 원래 의도). */
body.shell-v2 .pshell-agent .agent-ask .pshell-agent-note { display: block; padding: 4px 2px; font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-48); word-break: keep-all; }
/* 뼈대(mountAgentAsk 대기중) — 자리에 최종적으로 서는 안내 문구(.pshell-agent-note)와 같은 캡션 크기. */
body.shell-v2 .skel-agent-wait { --skel-line-h: 12px; }
@media (max-width: 810px) { body.shell-v2 .pshell-right .pshell-tab { min-height: 44px; padding-inline: 16px; } }
/* ≤720 트리·패널 탭 — 상단바가 두 줄(≈113px)이 됐는데 패널은 여전히 100dvh-56px 로 서서, 페이지가 97px 넘치고 패널 몸통이 안에서 또 스크롤했다(이중 스크롤).
   모바일에선 패널이 옆 기둥이 아니라 한 화면 전체이므로 고정 높이·내부 스크롤을 풀고 페이지 스크롤 하나만 쓴다. */
@media (max-width: 720px) {
  body.shell-v2 :is(.pshell-left, .pshell-right) { position: static; height: auto; min-height: 0; }
  body.shell-v2 :is(.pshell-left, .pshell-right) .pshell-pane-bd { overflow: visible; max-height: none; }
}