/* 새 셸 화면별 완성도 층 — interview(새 프로젝트·인터뷰 위저드). DESIGN.md(Framer) 준수 · body.shell-v2 스코프.
 *   입력은 한 겹 표면(surface-1) + 흰 원형 전송(이 화면의 주 CTA) · 말풍선·보기 칩은 중립 표면 · 파랑은 포커스에만 · 코스모스 광원 없음.
 *   ⚠️ .iv-input-bar·.iv-textarea 는 컴포저(ui/composer.js)·회차 보완 바도 빌려 쓴다 — 입력 규칙은 .iv-root 안으로만 좁힌다. */

body.shell-v2 .iv-root { color: var(--ink); }
body.shell-v2 .iv-orb { display: none; }

/* 히어로 — 제목(display-md) · 부제 ink-48 · 유료 안내는 작은 중립 알약 */
body.shell-v2 .iv-hero-title { margin-bottom: var(--sp-xs); font-size: var(--fs-title-1); font-weight: 500; line-height: var(--lh-title-1); letter-spacing: -1px; color: var(--ink); text-wrap: balance; }
body.shell-v2 .iv-hero-sub { font-size: var(--fs-body); color: var(--ink-48); }
body.shell-v2 .iv-hero-cost { margin-top: var(--sp-sm); padding: 0 var(--sp-sm); border-radius: var(--r-pill); background: var(--surface-1); font-size: var(--fs-fine); line-height: 26px; color: var(--ink-48); }
body.shell-v2 .iv-root--empty .iv-hero { padding-bottom: var(--sp-lg); }

/* 대화 — 사용자 surface-2 · AI surface-1 · 테두리 없음 */
body.shell-v2 .iv-messages { gap: var(--sp-sm); padding-top: var(--sp-lg); }
body.shell-v2 .iv-bubble { padding: var(--sp-sm) var(--sp-md); border-radius: 20px; font-size: var(--fs-body); line-height: 1.5; }
body.shell-v2 .iv-bubble--user { background: var(--surface-2); color: var(--ink); border: 0; border-bottom-right-radius: 6px; }
body.shell-v2 .iv-bubble--ai { background: var(--surface-1); color: var(--ink-80); border: 0; border-bottom-left-radius: 6px; }
body.shell-v2 .iv-bubble--thinking { font-style: normal; color: var(--ink-48); }
body.shell-v2 .iv-bubble--ai .btn.chip { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }
/* 고른 칩은 흰 채움(전역 고른 칩과 같은 모양 · liquid-glass-chrome.css) — 한 단 위 회색으로는 고른 티가 안 났다(2026-10-23 신고). */
body.shell-v2 .iv-bubble--ai .btn.chip.is-on, body.shell-v2 .iv-bubble--ai .btn.chip.is-on:hover:not(:disabled) { background: #ffffff; border-color: transparent; color: #000000; }
@media (prefers-reduced-motion: reduce) { body.shell-v2 .iv-msg-row { animation: none; } }

/* 하단 — 바닥 띠 없음. 대화는 .iv-messages 안에서만 스크롤하고 이 영역 밑으로 지나가지 않아 가릴 글이 없다(2026-09-23 오너 "배경 없는 게 낫다"). */
body.shell-v2 .iv-bottom { padding: var(--sp-sm) var(--sp-xl) var(--sp-lg); background: none; }
body.shell-v2 .iv-root--empty .iv-bottom { padding-top: 0; padding-bottom: 0; }

/* 보기 칩 — 표면 단 카드 · 번호 배지 중립 · 포커스 안쪽 링 */
body.shell-v2 .iv-opt-row { gap: var(--sp-xs); }
body.shell-v2 .iv-optchip { min-height: 52px; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border: 0; border-radius: var(--r-lg); background: var(--surface-1); color: var(--ink); cursor: pointer; }
body.shell-v2 .iv-optchip:hover { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .iv-optchip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .iv-optchip-num { width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-80); font-size: var(--fs-fine); font-weight: 500; font-variant-numeric: tabular-nums; }
body.shell-v2 .iv-optchip:hover .iv-optchip-num { background: var(--surface-3); color: var(--ink); }
body.shell-v2 .iv-optchip-label { font-size: var(--fs-body); font-weight: 500; letter-spacing: var(--ls-body); color: var(--ink); }
body.shell-v2 .iv-optchip-desc { font-size: var(--fs-fine); color: var(--ink-48); }
/* 선택지 끝 칸 크레딧 칩(ui/creditChip.js · 2026-10-16) — 번호 칸(24px)과 같은 줄 높이에 선다(긴 설명이 붙어도 첫 줄에 붙는다). */
body.shell-v2 .iv-optchip > .credit-chip { align-self: flex-start; height: 24px; margin-left: auto; }

/* 회차 수 직접 입력 — 한 겹 표면 + 알약 확인 */
body.shell-v2 .iv-eps-input { border-radius: var(--r-lg); color: var(--ink); }
body.shell-v2 .iv-eps-input::placeholder { color: var(--ink-48); }
body.shell-v2 .iv-eps-input:focus { box-shadow: var(--ring-focus); }
body.shell-v2 .btn.iv-eps-go { height: 44px; border-radius: var(--r-pill); }

/* 입력 — 박스 안 박스 대신 한 겹: 표면 바 + 투명 textarea + 흰 원형 전송 */
body.shell-v2 .iv-root .iv-input-bar { align-items: flex-end; gap: var(--sp-xs); padding: var(--sp-xs) var(--sp-xs) var(--sp-xs) var(--sp-lg); border: 1px solid var(--field-edge); border-radius: 24px; background: var(--field-fill); transition: box-shadow 0.15s ease; }
body.shell-v2 .iv-root .iv-input-bar:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
body.shell-v2 .iv-root .iv-textarea { min-height: 36px; padding: var(--sp-xs) 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: var(--fs-body); line-height: 20px; }
body.shell-v2 .iv-root .iv-textarea:focus { box-shadow: none; }
body.shell-v2 .iv-root .iv-textarea::placeholder { color: var(--ink-48); }
body.shell-v2 .iv-root .btn.iv-send-btn { flex: none; width: 36px; min-width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--canvas); }
body.shell-v2 .iv-root .btn.iv-send-btn:hover:not(:disabled) { background: var(--ink-80); color: var(--canvas); }
body.shell-v2 .iv-root .btn.iv-send-btn:disabled { opacity: 1; background: var(--surface-2); color: var(--ink-48); }
body.shell-v2 .iv-root .btn.iv-send-btn:focus-visible { box-shadow: var(--ring-focus); }

/* 뒤로가기 — 차콜 원형 */
body.shell-v2 .btn.iv-back-btn { border: 0; background: var(--surface-1); color: var(--ink-80); }
body.shell-v2 .btn.iv-back-btn:hover { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .btn.iv-back-btn:focus-visible { box-shadow: var(--ring-focus); }

/* 인터뷰가 보이는 동안에는 프로젝트 셸을 화면 높이에 가둔다 — 안 가두면 대화가 길어질 때 페이지 전체가 늘어나
 *   보기 칩·입력창이 화면 밖으로 밀리고, .iv-messages 가 스크롤 주체가 아니라서 '맨 아래로' 스크롤도 일하지 않는다(실측: 1440 에서 문서 높이 1361 · 칩 위치 898).
 *   ⚠️ 보이는 섹션 안의 .iv-step 에만 걸린다 — 숨긴 위저드가 DOM 에 남아 있어도 다른 모드(회차·오디오)의 스크롤을 막지 않는다. */
body.shell-v2.iv-mode .pshell:has(> .pshell-body > .pshell-center > .shell-view:not([hidden]) > .wiz-root.iv-step) { height: 100dvh; min-height: 0; }
body.shell-v2.iv-mode .pshell:has(> .pshell-body > .pshell-center > .shell-view:not([hidden]) > .wiz-root.iv-step) > .pshell-body { min-height: 0; grid-template-rows: minmax(0, 1fr); }
body.shell-v2.iv-mode .pshell-center:has(> .shell-view:not([hidden]) > .wiz-root.iv-step) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body.shell-v2.iv-mode .pshell-center > .shell-view:not([hidden]):has(> .wiz-root.iv-step) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.shell-v2.iv-mode .pshell-center .wiz-root.iv-step, body.shell-v2.iv-mode.iv-phase0 .pshell-center .wiz-root.iv-step { flex: 1; min-height: 0; }

@media (max-width: 810px) {
  body.shell-v2 .iv-hero { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
  body.shell-v2 .iv-messages { padding: var(--sp-md) var(--sp-md) var(--sp-xs); }
  body.shell-v2 .iv-bubble { max-width: 88%; }
  body.shell-v2 .iv-bottom { padding: var(--sp-xs) var(--sp-md) calc(var(--sp-md) + env(safe-area-inset-bottom, 0px)); }
  /* 보기는 한 줄 요약 행(44px) — 라벨 + 설명 한 줄(말줄임). dock 은 45vh 까지만 쓰고 넘치면 안에서 스크롤해 최근 질문 말풍선 자리를 남긴다 */
  body.shell-v2 .iv-optdock { max-height: 45vh; }
  body.shell-v2 .iv-opt-row { gap: 6px; }
  body.shell-v2 .iv-optchip { align-items: center; min-height: 44px; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-md); }
  body.shell-v2 .iv-optchip-num { width: 22px; height: 22px; margin-top: 0; }
  body.shell-v2 .iv-optchip > .credit-chip { align-self: center; height: 1.1em; }
  body.shell-v2 .iv-optchip-text { flex: 1; flex-direction: row; align-items: baseline; gap: var(--sp-xs); }
  body.shell-v2 .iv-optchip-label { flex: 0 1 auto; max-width: 70%; font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.shell-v2 .iv-optchip-desc { flex: 1 1 0; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.shell-v2 .iv-root .iv-input-bar { padding-left: var(--sp-md); }
  /* 긴 안내 문구는 잘라내지 않고 두 줄로 보인다(입력이 생기면 autoResize 가 높이를 맡는다) */
  body.shell-v2 .iv-root .iv-textarea::placeholder { white-space: normal; overflow: visible; text-overflow: clip; }
  body.shell-v2 .iv-root .iv-textarea:placeholder-shown { min-height: 56px; }
  body.shell-v2 .iv-root .btn.iv-send-btn { width: 44px; min-width: 44px; height: 44px; }
  body.shell-v2 .btn.iv-back-btn { width: 44px; min-width: 44px; height: 44px; }
}

/* 생성 언어·시장 칸 행(spec_i18n W5·§6 — 스위치 i18n·marketKb 는 독립이라 한쪽만 켜져도 자리는 같다) */
body.shell-v2 .iv-root .iv-locale-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-md, 16px); flex-wrap: wrap; margin-top: var(--sp-md, 12px); }
body.shell-v2 .iv-root .iv-locale-row .iv-output-locale, body.shell-v2 .iv-root .iv-locale-row .iv-market { margin-top: 0; }
body.shell-v2 .iv-root .iv-output-locale, body.shell-v2 .iv-root .iv-market { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-md, 12px); font-size: var(--fs-fine, 12px); color: var(--ink-48); }
body.shell-v2 .iv-root .iv-output-locale select, body.shell-v2 .iv-root .iv-market select { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12)); border-radius: 8px; padding: 4px 8px; }
body.shell-v2 .iv-root .iv-output-locale select:disabled, body.shell-v2 .iv-root .iv-market select:disabled { opacity: 0.5; }