/* 새 셸 화면별 완성도 층 — canvas-modals(영상탭 모달: 캐릭터·배경·소품 패널 · 가져오기/초안 팝업 · 세그먼트 탭 · 준비물 안내). DESIGN.md(Framer) 준수 · body.shell-v2 스코프
 *   canvas.css 에서 나눴다(200줄 한도) — index.html 이 canvas.css 바로 뒤에 링크해 선언 순서가 분리 전과 같다.
 *   ⚠️ videolab.css · components.css 는 읽기 전용 — 여기서 덮어쓴다. JS·문구는 그대로 두고 표시만 바꾼다. */

/* ════════ 영상탭 모달(캐릭터·배경 패널 · 가져오기/초안 팝업) — 표면 패널 · 긴 유료 문구는 줄바꿈 ════════
 *   ★ 패널 이름은 **명시 목록** `:is(…)` 이다(2026-10-07 · canvas-render 성능) — 옛 `[class*="vlab-"]`(class 부분 문자열)는
 *     어느 요소의 class 가 바뀌어도 그 아래 전체를 다시 계산하게 했다(영상탭 월드의 class 한 번 = 23~43ms · 줌·팬 긴 프레임의 남은 몫).
 *     구체도는 같다(속성 선택자 = 클래스 하나). 새 영상탭 패널(`sm-panel vlab-…`)을 만들면 목록에 넣는다 — `vlabPanelSelector.test.mjs` 가 지킨다. */
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) { background: var(--surface-1); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-float); }

body.shell-v2 .vlab-imp-topbar { border-bottom-color: var(--hairline-soft); }
body.shell-v2 .vlab-char-step-hint, body.shell-v2 .vlab-imp-hint { opacity: 1; color: var(--ink-48); }
/* 회차 찾기 진행 상자(2026-09-26) — 표면 단차로 묶고 테두리는 쓰지 않는다 · 경과 줄은 보조 글색. */
body.shell-v2 .vlab-draft-progress { background: var(--surface-2); border-color: transparent; border-radius: var(--r-md); }
body.shell-v2 .vlab-draft-progress-found { opacity: 1; color: var(--ink-80); }
body.shell-v2 .vlab-draft-progress-meta { opacity: 1; color: var(--ink-48); }
/* 유료 버튼 문구("시트 생성 (유료 · 이미지 1장 · 약 $0.04 + …)")가 좁은 폭에서 한 줄로 잘려 나갔다 — 알약 모양을 유지한 채 감싼다. */
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) .btn { max-width: 100%; height: auto; min-height: var(--btn-h, 32px); white-space: normal; }
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) .btn__label { white-space: normal; text-align: left; line-height: 1.35; padding-block: 6px; }
/* 채움·테두리는 framer.css ③ 이 소유한다(모서리만 여기서) — 옛 판이 테두리를 걷어 모달 위에서 칸이 안 읽혔다(2026-09-21). */
body.shell-v2 .vlab-char-look-input { border-radius: var(--r-md); }

/* 모달 머리 닫기(×) — 넓은 화면은 발의 [닫기]로 충분해 숨기고, 좁은 화면 전체 화면 시트에서만 머리 오른쪽에 44px 로 선다. */
/* 넓은 화면에서도 머리 오른쪽에 둔다(3차 대조: 넓은 화면에서만 숨겨 두니 '닫기' 가 발 하나로 줄어 v1 과 같은 수가 됐지만, 모바일과 자리가 달랐다).
 *   제목 줄 높이만큼 끌어올려 제목 오른쪽 끝에 맞춘다 — 흐름에서 자리를 차지하지 않게 아래 여백도 같이 뺀다. */
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) { position: relative; }
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .btn.vlab-modal-x {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  --btn-h: 36px; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--r-pill);
}
body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .sm-title { padding-right: 44px; }

/* ════════ 캐릭터·배경 상세(넓은 2단 판) — 2026-10-02 다듬기 ════════
 *   구조는 videolab.css 가 정하고, 여기서는 겉만 Framer 다크 토큰에 맞춘다. 두 상세는 2026-10-03 캐스트 스튜디오(`asset-studio.css`)로
 *   옮겨 갔다 — 떠 있는 행동 줄의 도크와 시트가 설 자리(뼈대)의 규칙은 그 정리에서 걷었다. */

/* 안내 배너 — 주황(--warn)은 이 디자인 시스템에 없는 색이다(아래 색 규칙). 표면 단차 + 본문 글자로 옮기고 성공만 --positive 다. */
body.shell-v2 .vlab-char-note { color: var(--ink); border-color: transparent; background: var(--surface-2); border-radius: var(--r-md); }
body.shell-v2 .vlab-char-note.is-ok { color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, transparent); }

/* ════════ 세그먼트 탭 · 초안 팝업 칩 · 준비물 안내 ════════
 *   색 규칙: 파랑은 선택 링에만. 주황(--warn)은 이 디자인 시스템에 없는 색이라 표면 단차 + 흰 글자 굵기로 옮긴다 —
 *   '시트 없음'·'아직 완성되지 않은 재료' 같은 조치 문구는 글자 자체가 뜻을 들고 있어 색이 빠져도 읽힌다. */
body.shell-v2 .vlab-tab { border-color: transparent; border-radius: var(--r-pill); color: var(--ink-48); }
body.shell-v2 .vlab-tab:hover { color: var(--ink); background: var(--surface-2); }
body.shell-v2 .vlab-tab.is-on { background: var(--surface-3); border-color: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
body.shell-v2 .vlab-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-tabs { background: var(--surface-2); border-color: transparent; border-radius: var(--r-pill); }
body.shell-v2 .vlab-new-tag { background: var(--surface-2); border-color: transparent; color: var(--ink-80); }
body.shell-v2 .vlab-draft-chip { border-color: transparent; background: var(--surface-2); color: var(--ink); }
body.shell-v2 .vlab-draft-chip:hover { background: var(--surface-3); }
body.shell-v2 .vlab-draft-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-draft-chip-meta.is-missing { color: var(--ink-48); opacity: 1; }
body.shell-v2 .vlab-draft-source { background: var(--surface-2); border-color: transparent; border-radius: var(--r-md); color: var(--ink); }
body.shell-v2 .vlab-draft-source:focus { border-color: transparent; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-new-hint { opacity: 1; color: var(--ink-48); }
body.shell-v2 .vlab-prep, body.shell-v2 .vlab-guide-card--warn { border-color: transparent; background: var(--surface-2); }
body.shell-v2 .vlab-prep-title { color: var(--ink); }
body.shell-v2 .vlab-prep-sub { color: var(--ink-80); opacity: 1; }
body.shell-v2 .vlab-prep-icon { display: inline-flex; color: var(--ink-80); } /* SVG 경고 아이콘(원래 ⚠ 글리프였다) */
body.shell-v2 .vlab-prep-row, body.shell-v2 .vlab-guide-card--warn .vlab-prep-row { background: var(--surface-3); }
body.shell-v2 .vlab-prep-step { border-color: transparent; background: var(--surface-1); color: var(--ink-80); }
body.shell-v2 .vlab-img-box-tag.is-paid { border-color: transparent; background: var(--surface-2); color: var(--ink-80); }
body.shell-v2 .vlab-clip-note.is-warn, body.shell-v2 .vlab-clip-unavailable, body.shell-v2 .vlab-imp-sum-warn, body.shell-v2 .vlab-new-err { color: var(--ink); opacity: 1; }
body.shell-v2 .vlab-draft-chip-meta.is-missing, body.shell-v2 .vlab-char-style-hint.is-warn, body.shell-v2 .vlab-img-tile-cap--warn { color: var(--ink-48); opacity: 1; }

/* 노드 안 재료 점검 줄(⚠ 아직 완성되지 않은 재료 …) · 목록 안내 상자 · 상태 알약 — 주황/테두리 → 표면·흰 글자 */
body.shell-v2 .vlab-lint, body.shell-v2 .vlab-lint-line { color: var(--ink-80); opacity: 1; }
body.shell-v2 .vlab-projects-notice--info { border-color: transparent; background: var(--surface-1); color: var(--ink-80); }

/* ════════ 좁은 화면 — 전체 화면 시트 ════════ */
@media (max-width: 810px) {
  /* 모달 — 전체 화면 시트. 머리(제목)와 발(닫기·주 버튼)은 스크롤해도 늘 보인다(390 에서 위가 잘려 제목·닫기가 안 보였다). */
  body.shell-v2 .sm-overlay:has(> .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel)) { padding: 0; align-items: stretch; }
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) {
    width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border-radius: 0;
    padding: 0 var(--sp-md); gap: var(--sp-md);
  }
  body.shell-v2 .sm-panel.vlab-char-panel-modal { overflow-y: auto; overscroll-behavior: contain; }
  /* 전체 화면 시트가 떠 있는 동안 뒤 문서 스크롤 잠금 — 이 모달은 영상탭 JS 가 열어 잠금 훅이 없어 CSS(:has)로 건다.
   *   html 에도 거는 이유: WebKit 은 body 만 잠그면 뷰포트(문서) 팬을 막지 못하는 경우가 있다. */
  html:has(body.shell-v2 > .sm-overlay > .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel)),
  body.shell-v2:has(> .sm-overlay > .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel)) { overflow: hidden; overscroll-behavior: none; }
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .sm-title {
    position: sticky; top: 0; z-index: 3; flex: none; display: flex; align-items: center; min-height: 52px;
    margin: 0 calc(-1 * var(--sp-md)); padding: 0 var(--sp-md);
    background: var(--surface-1); border-bottom: 1px solid var(--hairline-soft);
  }
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .sm-actions {
    position: sticky; bottom: 0; z-index: 3; flex: none;
    margin: 0 calc(-1 * var(--sp-md)); padding: 8px var(--sp-md) calc(8px + env(safe-area-inset-bottom));
    background: var(--surface-1); border-top: 1px solid var(--hairline-soft);
  }
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .sm-actions .btn { min-height: 44px; }
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .sm-title { padding-right: 60px; }
  /* ⚠️ 선택자에 패널 목록 :is(…) 를 넣어야 위 '.btn 줄바꿈' 규칙(height:auto · min-height: --btn-h 36)을 이긴다 — 없으면 36px 로 줄었다(WebKit 실측). */
  body.shell-v2 .sm-panel:is(.vlab-char-panel-modal, .vlab-cliphist-panel, .vlab-dsheet-panel, .vlab-fill-panel, .vlab-gal, .vlab-img-panel, .vlab-imp-panel, .vlab-import, .vlab-lib-lightbox-panel, .vlab-new-panel) > .btn.vlab-modal-x {
    --btn-h: 44px; display: inline-flex; position: sticky; top: 4px; z-index: 4; align-self: flex-end;
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--r-pill);
    /* 제목 줄(52px) 가운데에 맞춘다 — 위로 (52 + 간격 − 4)px, 아래는 흐름 자리를 0 으로 되돌린다(44 − 63 + 4 + 간격 = 간격). */
    margin: calc(-48px - var(--sp-md)) -8px 4px 0;
  }
  body.shell-v2 .sm-panel > .vlab-modal-x:focus-visible { box-shadow: var(--ring-focus); }
}