/* 새 셸 화면별 완성도 층 — tools(오디오·영상 목록 + 트렌드·지식·관리자 공용 칩·셀렉트). DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 * 원칙: 선택 = 표면 한 단(파란색 아님) · 배지 = 중립 칩 · 카드 = 테두리 대신 표면 단차 · 흰 알약은 화면당 하나. */

/* ─────────────── 공용: 중립 칩 · 셀렉트 ─────────────── */
body.shell-v2 :is(.trend-class-badge, .trend-new-chip, .trend-mom-strength, .km-badge) {
  background: var(--surface-2); border-color: transparent; color: var(--ink-80); box-shadow: none; opacity: 1;
}
body.shell-v2 :is(.km-filter-select, select.admin-input) {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-color: var(--field-fill); border: 1px solid var(--field-edge); border-radius: var(--r-pill); color: var(--ink);
  padding: var(--sp-xs) 34px var(--sp-xs) var(--sp-sm); font-size: var(--fs-caption); letter-spacing: var(--ls-caption); font-weight: 500;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-48) 50%), linear-gradient(135deg, var(--ink-48) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
body.shell-v2 :is(.km-filter-select, select.admin-input):hover { background-color: var(--field-fill-hover); }

/* ─────────────── 영상 프로젝트 목록 ─────────────── */
body.shell-v2 .vlab-proj-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-md); }
body.shell-v2 .vlab-proj { background: var(--surface-1); border: 0; border-radius: var(--r-xl); padding: var(--sp-md) var(--sp-lg) var(--sp-lg); min-height: 0; transition: background 0.15s ease; }
body.shell-v2 .vlab-proj:hover { background: var(--surface-2); transform: none; }
body.shell-v2 .vlab-proj:focus-visible { background: var(--surface-2); box-shadow: var(--ring-focus); transform: none; }
body.shell-v2 .vlab-proj-main { gap: var(--sp-xs); }
body.shell-v2 .vlab-proj-title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; }
body.shell-v2 .vlab-proj-steps { color: var(--ink-48); gap: var(--sp-xxs) var(--sp-sm); }
body.shell-v2 .vlab-proj-meta { color: var(--ink-48); font-size: var(--fs-fine); }
body.shell-v2 .vlab-proj-acts .btn { color: var(--ink-48); border-color: transparent; background: transparent; }
body.shell-v2 .vlab-proj-acts .btn:hover { color: var(--ink); background: var(--surface-3); }
body.shell-v2 .vlab-proj-acts .btn.vlab-proj-del:is(:hover, :focus-visible) { color: var(--danger); background: var(--danger-soft); }
body.shell-v2 .vlab-projects-title { font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: 600; letter-spacing: -0.6px; }
/* 검색줄 — 이 층에 카드·제목·동작은 있는데 **검색줄만 빠져 있었다**(2026-09-19 오너 신고 · 스크린샷).
 *   그래서 이것만 옛 팔레트로 남아 주변과 달라 보였다: 남색 배경 rgba(20,22,30,.92) · 1px 테두리 ·
 *   모서리 10 · 높이 34(컨트롤 사다리 밖) · 포커스 폴백 #5b8cff(새 셸 accent 는 #0099ff).
 *   같은 역할(허브 검색)인 `.lib-search`(알약 · 40px · 표면 단)에 맞춘다. v1 파일(videolab.css)은 안 건드린다. */
body.shell-v2 .vlab-proj-search {
  height: 40px; padding: 0 var(--sp-md); margin-bottom: var(--sp-md);
  background: var(--field-fill); border: 1px solid var(--field-edge); border-radius: var(--r-pill);
}
body.shell-v2 .vlab-proj-search:hover { background: var(--field-fill-hover); border-color: var(--field-edge-hover); }
body.shell-v2 .vlab-proj-search:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-proj-search-icon { color: var(--ink-48); }
body.shell-v2 .vlab-proj-search-input { color: var(--ink); font-size: var(--fs-caption); letter-spacing: var(--ls-caption); }
/* 특이도: framer.css ③ 의 input 기본·호버·포커스 규칙(최대 0,3,2)을 이겨야 안쪽 칸이 알약 안의 두 번째 필드로 안 그려진다
 *   (2026-10-10 오너 신고 · 스크린샷 — 알약 안에 테두리·채움·모서리가 한 겹 더). 껍데기는 바깥 `.vlab-proj-search` 하나다(`.chipin-input` 과 같은 방식). */
body.shell-v2 .vlab-proj-search input.vlab-proj-search-input, body.shell-v2 .vlab-proj-search input.vlab-proj-search-input:is(:hover, :focus) {
  padding: 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; outline: none;
}
body.shell-v2 .vlab-proj-search-input::placeholder { color: var(--ink-48); opacity: 1; }
body.shell-v2 .vlab-projects-sub { color: var(--ink-48); }
body.shell-v2 .vlab-projects-state { background: var(--surface-1); border: 0; border-radius: var(--r-xl); }
@media (max-width: 810px) {
  body.shell-v2 .vlab-proj-grid { grid-template-columns: minmax(0, 1fr); }
  body.shell-v2 .vlab-proj-acts .btn { min-width: 44px; min-height: 44px; }
}

/* ─────────────── 오디오 — 상세 중앙 안내(audioDetailIntro.js) ─────────────── */
/* 프로젝트 셸 상단바가 이미 제목을 말한다 — 중앙의 '기획안 목록 ← 제목' 줄은 반복 */
body.shell-v2 #audiodramaView .ep-hub > .ep-detail-bar:has(> .ep-back-btn) { display: none; }
/* 대본 에디터의 고정 머리는 **프로젝트 상단바 아래**에 붙는다 — 새 셸은 문서가 스크롤하고 상단바(sticky · z 70)가 위에 서 있어,
 *   `top: 0` 이면 머리의 첫 두 행(제목·승인 줄 / KR·EN 줄)이 상단바 밑으로 들어가 가려졌다(2026-09-19 실측). */
body.shell-v2.pshell-open .script-head { top: var(--top-h); }
body.shell-v2 .audio-intro {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-md);
  width: 100%; max-width: 560px; margin: clamp(var(--sp-lg), 10vh, 96px) auto 0; padding: var(--sp-xl);
  background: var(--surface-1); border-radius: var(--r-xl); box-sizing: border-box;
}
body.shell-v2 .audio-intro-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); }
body.shell-v2 .audio-intro-title { margin: var(--sp-xxs) 0 0; font-size: var(--fs-display-md); font-weight: 500; line-height: var(--lh-display-md); letter-spacing: var(--ls-display-md); color: var(--ink); }
body.shell-v2 .audio-intro-sub { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--ink-48); }
body.shell-v2 .audio-intro-steps { list-style: none; margin: var(--sp-xxs) 0 var(--sp-xs); padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.shell-v2 .audio-intro-step { display: flex; align-items: flex-start; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-sm); border-radius: var(--r-md); background: var(--surface-2); }
body.shell-v2 .audio-intro-step-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .audio-intro-step-title { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); line-height: 1.4; }
body.shell-v2 .audio-intro-step-desc { font-size: var(--fs-fine); color: var(--ink-48); line-height: 1.4; }
@media (max-width: 810px) {
  body.shell-v2 .audio-intro { margin-top: var(--sp-md); padding: var(--sp-lg); }
  body.shell-v2 .audio-intro-title { font-size: var(--fs-title-1); letter-spacing: -0.6px; }
  body.shell-v2 .btn.audio-intro-cta { min-height: 44px; width: 100%; justify-content: center; }
}


/* ─────────────── 오디오 — 대본 에디터 크롬(scriptEditorView) ─────────────── */
body.shell-v2 #audiodramaView .btn.ep-back-btn { border-color: transparent; color: var(--ink-48); }
body.shell-v2 #audiodramaView .btn.ep-back-btn:hover { background: var(--surface-1); color: var(--ink); }
body.shell-v2 :is(.script-bible, .script-cast) { background: var(--surface-1); border: 0; border-radius: var(--r-lg); padding: var(--sp-sm) var(--sp-lg); }
body.shell-v2 :is(.script-bible-sum, .script-cast-sum) { color: var(--ink); font-weight: 600; cursor: pointer; }
body.shell-v2 :is(.script-bible-note, .script-cast-note) { color: var(--ink-48); }
body.shell-v2 .script-card { background: var(--surface-1); border: 0; border-radius: var(--r-md); box-shadow: none; }
body.shell-v2 .script-card:focus-within { box-shadow: var(--ring-focus); }
body.shell-v2 .script-cast-row select {
  appearance: none; -webkit-appearance: none; height: 32px; padding: 0 34px 0 var(--sp-sm); border-radius: var(--r-pill);
  background-color: var(--field-fill); border: 1px solid var(--field-edge); color: var(--ink); font-size: var(--fs-caption); line-height: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-48) 50%), linear-gradient(135deg, var(--ink-48) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
body.shell-v2 .script-lang-group { background: var(--surface-1); border-color: transparent; }
/* 화면의 흰 알약은 '승인' 하나 — 번역 갱신은 차콜 */
body.shell-v2 .btn.btn--primary.script-lang-sync { background: var(--surface-2); color: var(--ink); border-color: transparent; }
body.shell-v2 .btn.btn--primary.script-lang-sync:hover { background: var(--surface-3); }
body.shell-v2 .btn.script-tab { background: transparent; border-color: transparent; color: var(--ink-48); }
body.shell-v2 .btn.script-tab:hover { background: var(--surface-1); color: var(--ink); }
body.shell-v2 .btn.script-tab.is-on { background: var(--surface-2); color: var(--ink); }

/* 반대 언어 미반영 블록 — 노란 배경 대신 왼쪽 끝 한 줄(상태는 카드 안 문구가 말한다) */
body.shell-v2 .script-card.script-card--unsynced { background: var(--surface-1); box-shadow: inset 3px 0 0 var(--ink-48); }
@media (max-width: 810px) {
  body.shell-v2 .vlab-projects-acts .btn { min-height: 44px; }
}
/* 영상 프로젝트 즐겨찾기 별 — 프로젝트 목록(ui-home)과 같은 흰 별. starButton 이 금색을 인라인 변수로 박으므로 !important 로 이긴다.
   꺼짐 = ink-48 외곽선, 켜짐 = ink 채움. 흐림(opacity) 대신 색으로 물러난다. */
body.shell-v2 .btn.pl-bm.vlab-proj-fav { color: var(--ink-48); background: transparent; opacity: 1; --btn-on-color: var(--ink) !important; }
body.shell-v2 .btn.pl-bm.vlab-proj-fav:hover { color: var(--ink); background: var(--surface-2); }
body.shell-v2 .btn.pl-bm.vlab-proj-fav.pl-bm--on { color: var(--ink); }

/* ≤720 타임라인 에디터 — 상단바가 두 줄(≈113px)이 됐는데 framer.css 는 100dvh-56px 로 세워 57px 넘쳤다(901 vs 844 실측).
   높이를 상단바 숫자로 빼지 않고, 셸을 100dvh 로 고정해 몸통(flex:1)이 남은 높이를 주게 한다 — 상단바 높이가 바뀌어도 맞는다. */
@media (max-width: 720px) {
  body.shell-v2 .pshell:has(.pshell-center .audio-editor) { height: 100dvh; }
  body.shell-v2 .pshell-center:has(.audio-editor) { min-height: 0; }
  body.shell-v2 .pshell-center > .shell-view:has(> .audio-editor) { height: 100%; }
  body.shell-v2 .pshell-center .audio-editor { height: 100%; }
}

/* 대본 에디터 — 접기 요약의 기본 ▼ 마커를 숨기고 셰브론 아이콘(접히면 오른쪽). 패널 JS 는 목록 밖이라 CSS 마스크로 그린다(재렌더에도 남는다). */
body.shell-v2 :is(.script-bible-sum, .script-cast-sum) { list-style: none; display: flex; align-items: center; gap: var(--sp-xs); }
body.shell-v2 :is(.script-bible-sum, .script-cast-sum)::-webkit-details-marker { display: none; }
body.shell-v2 :is(.script-bible-sum, .script-cast-sum)::before {
  content: ''; flex: none; width: 16px; height: 16px; background-color: var(--ink-48); transition: transform 0.15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.shell-v2 details:not([open]) > :is(.script-bible-sum, .script-cast-sum)::before { transform: rotate(-90deg); }
/* 반대 언어 미반영 — 노란 글자 대신 중립 글자 + 경고 아이콘 */
body.shell-v2 .script-lang-unsynced { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-80); }
body.shell-v2 .script-lang-unsynced::before {
  content: ''; flex: none; width: 14px; height: 14px; background-color: var(--ink-48);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 오디오 회차 목록 상태 — 에피소드 목록(.ep-row-badge)과 같은 중립 칩 톤. 완료·렌더 중만 표면을 얻고, 실패는 danger 점으로만 말한다. */
body.shell-v2 .audio-ep-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--sp-xs); border-radius: var(--r-pill); background: transparent; color: var(--ink-48); font-size: var(--fs-fine); white-space: nowrap; }
body.shell-v2 :is(.audio-ep-badge--done, .audio-ep-badge--rendering) { background: var(--surface-3); color: var(--ink-80); }
body.shell-v2 .audio-ep-badge--err { color: var(--ink-80); }
body.shell-v2 .audio-ep-badge--err::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }

/* 영상 프로젝트 카드 단계 아이콘 */
body.shell-v2 .vlab-proj-step { align-items: center; gap: 5px; }
body.shell-v2 .vlab-proj-step-ico { flex: none; color: var(--ink-48); }

/* 오디오 상세 — 좁은 폭 회차 고르기(좌 패널 목록이 '트리' 탭 뒤로 숨을 때만). 넓은 폭은 좌 패널 목록이 같은 일을 한다. */
body.shell-v2 .audio-intro-eps { display: none; }
@media (max-width: 720px) {
  body.shell-v2 .audio-intro-eps { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  body.shell-v2 .audio-intro-eps .btn.audio-intro-ep { width: 100%; min-height: 44px; justify-content: flex-start; background: var(--surface-2); border-color: transparent; color: var(--ink); }
  body.shell-v2 .audio-intro-eps .btn.audio-intro-ep .btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── 클립 EQ = 디자인 시스템 트레이(web/ui/audioClipEqDrawer.js · mountShell 의 shell-v2 가지) ──
 *   v1 은 오른쪽 오버레이 드로어(.ep-drawer, audioDrama.css)를 그대로 쓴다 — tray.css 가 전부 body.shell-v2 라
 *   v1 에서 <dialog class="tray"> 를 띄우면 스타일이 한 줄도 안 붙기 때문이다.
 *   넓고 낮은 바텀시트라 세로로 쌓지 않고 두 칸으로 나눈다: 왼쪽 = 곡선·안내·전역 컨트롤 / 오른쪽 = 밴드 목록.
 *   높이를 78dvh 로 묶는 것은 의도다 — 위쪽 타임라인이 계속 보여야 "무엇에 거는 EQ 인지" 를 잃지 않는다. */
body.shell-v2 dialog.tray.tray--eq { max-height: min(78dvh, 100% - 2 * var(--sp-sm)); }
/* 폭은 떠 있는 데스크톱 트레이에만 건다 — ≤810px 은 tray.css 의 '화면 폭 바텀시트'(inset 0 · 100%)가 주인이다.
 *   조건 없이 걸면 특이도가 더 높아 그 규칙을 덮고, 좁은 화면에서 좌우 12px 가 뜬 반쪽 시트가 된다(2026-09-18 390px 실측 — left 12 · w 366). */
@media (min-width: 811px) { body.shell-v2 dialog.tray.tray--eq { width: min(1100px, 100% - 2 * var(--sp-sm)); } }
/* '전체 해제' 줄 — 트레이 머리에는 액션 슬롯이 없어 본문 맨 위에 오른쪽 정렬로 둔다. 읽기전용이면 비어 있다(여백도 0). */
body.shell-v2 .tray--eq .audio-eq-toolbar { display: flex; justify-content: flex-end; gap: var(--sp-xs); }
body.shell-v2 .tray--eq .audio-eq-toolbar:empty { display: none; }
body.shell-v2 .tray--eq .audio-eq-body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-lg); align-items: start; margin-top: var(--sp-xs);
}
body.shell-v2 .tray--eq .audio-eq-col { display: flex; flex-direction: column; gap: var(--sp-md); min-width: 0; }
body.shell-v2 .tray--eq .audio-eq-curve { height: 208px; background: var(--surface-2); border-color: var(--hairline); border-radius: var(--r-md); }
body.shell-v2 .tray--eq .audio-eq-band,
body.shell-v2 .tray--eq .audio-eq-empty { border-radius: var(--r-md); }
body.shell-v2 .tray--eq .audio-eq-band { background: var(--surface-2); border-color: transparent; }
body.shell-v2 .tray--eq .audio-eq-band.is-selected { border-color: var(--accent); background: var(--accent-soft); }
/* ⚠️ 채움·테두리를 여기서 덮지 않는다 — framer.css ③ 의 --field-fill/--field-edge 가 담는 면(트레이) 위로 한 단 올려 주고,
   테두리가 곧 이 칸의 영역 표시다(2026-09-21). 옛 판은 `border-color: transparent` 로 그 테두리를 걷고 있었다. */
/* 한 칸이 되는 폭 — 목록이 곡선 아래로 내려온다(v1 스택과 같은 순서). 터치 대상은 tray.css·project-touch.css 가 키운다. */
@media (max-width: 900px) {
  body.shell-v2 dialog.tray.tray--eq { max-height: min(88dvh, 100% - 2 * var(--sp-sm)); }
  body.shell-v2 .tray--eq .audio-eq-body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-md); }
}
/* 터치 대상 — 390px 실측에서 전체 해제·바이패스·밴드 추가가 28px, 셀렉트·숫자 칸이 42px 였다(44 미달). */
@media (max-width: 810px) {
  body.shell-v2 .tray--eq .btn,
  body.shell-v2 .tray--eq .audio-eq-select,
  body.shell-v2 .tray--eq .audio-eq-num { min-height: 44px; }
}