/* ════════ ③ 캔버스 — 시안 F1(2026-10-08 오너 승인 · `videoLabEpisodeList` 와 그 부품) ════════
   배치: 왼쪽 = 셸 왼쪽 패널의 캔버스 목록(①② 와 같은 264) · 본문 = 단계 줄(①② 와 같은 자리) → 고른 회차(이야기 | 캔버스 카드 2열)
   → '시즌 · N화' 별 레일 → 필름 스트립. 배경은 은은한 별밭(결정적 — 렌더마다 바뀌지 않는다). 썸네일은 2단계다.
   상태 셋은 색만이 아니라 모양으로도 가른다 — 작업 중 = 채운 원·빛나는 별 · 빈 캔버스 = 고리 · 없음 = 점선 고리·작은 점.
   ⚠️ 빈 캔버스의 호박색은 오너 승인 시안의 색이다 — 제품 토큰엔 없다(주황은 기획안 결손 경고 줄 등에 쓰인다 · videolab.css `.vlab-projects-notice`).
      변수 하나(--f1-blank)로 묶었다 — 배지·고리·위성·범례·⚡ 가 모두 이 한 값에서 섞는다(글자색 --f1-blank-ink 도 이 값에 흰색을 섞은 것).
      색만으로 가르지 않는다(채운 별 · 고리 · 점선). 오너가 스테이징에서 보고 바꾸라면 이 한 줄(2026-10-09 팀리드 결정).
   ⚠️ 왼쪽 목록은 셸 패널로 옮겨 가 `.vlab-eps` 밖이다 — 변수는 두 자리에 함께 둔다. */
body.shell-v2 :is(.vlab-eps, .vlab-cast-pane--canvases) {
  --f1-ink-64: #a8a8a8; --f1-ink-32: #5c5c5c; --f1-edge: #2c2c2c;
  --f1-blank: #f5a524; --f1-blank-ink: color-mix(in srgb, var(--f1-blank) 70%, #fff); --f1-work-ink: #6ee7a0; --f1-cont-ink: #ffe2a8;
}

/* 화면 — 머리 줄(단계 줄)은 ①② 스튜디오와 같은 자리(왼쪽 = 본문 시작선 · --sp-xl) · 별밭 배경 */
body.shell-v2 .vlab-screen--season { min-height: calc(100dvh - var(--top-h, 56px));
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255, 255, 255, 0.22), transparent),
    radial-gradient(1.2px 1.2px at 45% 60%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(900px 600px at 25% 75%, rgba(80, 40, 90, 0.16), transparent 70%),
    radial-gradient(700px 480px at 75% 20%, rgba(30, 50, 90, 0.12), transparent 70%);
  background-size: 227px 191px, 311px 263px, 173px 149px, 389px 331px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat; }
body.shell-v2 .vlab-screen--season > .vlab-tabs-wrap { max-width: none; margin: 0; padding: var(--sp-sm) var(--sp-lg) var(--sp-sm) var(--sp-xl); }
/* 머리 줄 아래 구분선 — ①②③ 스튜디오 틀과 **같은 규칙**이다(asset-studio.css `.vlab-screen--studio > .vlab-screen-sub` 의 border-top · 같은 토큰 · 1px).
   선은 본문(`.vlab-screen-sub`)의 위 테두리라 머리 행(`.vlab-tabs-wrap`)의 높이·자리는 그대로다 — 단계를 옮겨도 단계 줄이 움직이지 않는다(오너 승인 2026-10-12). */
body.shell-v2 .vlab-screen--season > .vlab-screen-sub { border-top: 1px solid var(--hairline); }
body.shell-v2 .vlab-eps { padding: 8px var(--sp-xl) 48px; display: grid; gap: var(--sp-md); min-width: 0; }
body.shell-v2 .vlab-f1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
body.shell-v2 .vlab-eps-empty { padding: var(--sp-md) 4px; font-size: var(--fs-caption); color: var(--ink-48); }
body.shell-v2 .vlab-eps-fail { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }

/* 상태 배지 · 점 */
body.shell-v2 .vlab-st-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; flex: none; }
body.shell-v2 .vlab-st-tag.is-work { background: rgba(34, 197, 94, 0.14); color: var(--f1-work-ink); }
body.shell-v2 .vlab-st-tag.is-blank { background: color-mix(in srgb, var(--f1-blank) 14%, transparent); color: var(--f1-blank-ink); }
body.shell-v2 .vlab-st-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-sizing: border-box; }
body.shell-v2 .vlab-st-dot.is-work { background: var(--positive); }
body.shell-v2 .vlab-st-dot.is-blank { border: 2px solid var(--f1-blank); }
body.shell-v2 .vlab-st-dot.is-none { border: 1.5px dashed var(--f1-ink-32); }

/* 고른 회차(시안 F) — 큰 칸(왼쪽 600 · 16:9) | 이야기 · 메타 · 행동 줄. 캔버스가 둘 이상이면 큰 칸 위에 전환 칩 줄
   이야기 칸은 320 아래로 줄지 않는다 — 모자라면 큰 칸이 줄어든다(16:9 그대로). 600 고정이면 1181~1277 에서 이야기가 223~319 로
   눌려 사건 문장이 여러 줄로 부서졌다(2026-10-10 독립 검증 — 1190 에서 232). */
body.shell-v2 .vlab-f1-hero { display: grid; grid-template-columns: minmax(0, 600px) minmax(320px, 1fr); gap: 34px; align-items: center; }
body.shell-v2 .vlab-f1-media { min-width: 0; }
body.shell-v2 .vlab-f1-story { padding: 0 4px; min-width: 0; }
body.shell-v2 .vlab-f1-hero-top { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-48); }
body.shell-v2 .vlab-f1-hero-n { font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-f1-hero.is-free .vlab-f1-hero-n { color: var(--ink); }
body.shell-v2 .vlab-f1-hero-ct { font-size: 12px; font-weight: 400; color: var(--ink-48); }
body.shell-v2 .vlab-f1-beat + .vlab-f1-beat { margin-top: 18px; }
body.shell-v2 .vlab-f1-event { margin: 12px 0 0; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
body.shell-v2 .vlab-f1-beat.is-branch .vlab-f1-event { font-size: 20px; }
body.shell-v2 .vlab-f1-cliff { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 8px; color: var(--f1-ink-64); font-size: 14px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
body.shell-v2 .vlab-f1-cliff-ic { flex: none; margin-top: 5px; color: var(--f1-blank); }
/* 클리프행어는 세 줄까지 — 트리트먼트 행이 비어 회차 본문의 클리프행어 단락을 대신 쓸 때 길 수 있다(`videoLabPlanOutline.docCliff`) */
body.shell-v2 .vlab-f1-cliff > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
body.shell-v2 .vlab-f1-branch { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-right: 8px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-80); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 3px; flex: none; }
/* 메타 한 줄 — {표시 이름(둘 이상 · 굵게)} · 노드 n개 · 언제 편집 · 이어서. 늘 한 줄이다(긴 이름이 줄을 늘려 행동 줄을 밀지 않게 — 높이 불변).
   줄어드는 것은 이름 조각뿐이다(말줄임) — 노드 수 · 편집 시각 · '이어서'는 잘리지 않는다(2026-10-10 재검증 — 줄 끝 말줄임이라 좁은 이야기 칸에서
   '2시간 전 편…' · '이어서'가 잘렸다). 사이 글(' · 노드 n개 · …')은 플렉스의 이름 없는 칸이라 내용보다 줄지 않는다 · 칸 사이는 gap 이 띄운다.
   전체 이름은 title(마우스) · 칩 낭독 */
body.shell-v2 .vlab-f1-meta { margin: 14px 0 0; display: flex; align-items: baseline; gap: 0 0.3em; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ink-48); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
body.shell-v2 .vlab-f1-meta-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-80); font-weight: 600; }
body.shell-v2 .vlab-f1-meta-cont { flex: none; color: var(--f1-cont-ink); }
/* 행동 줄 — 흰 [열기 →] 하나 · (하나일 때) 고스트 [＋ 캔버스 추가] · [편집기] · ⋯ */
body.shell-v2 .vlab-f1-acts { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* 전환 칩 줄(오너 결정 Q1 A) — 넘치면 줄 안에서 가로로 민다(줄바꿈 없음). 칩 하나는 280 까지 — 긴 이름은 이름 칸만 말줄임(점 · 수 · '이어서'는 남는다) · 전체 이름은 title */
body.shell-v2 .vlab-cv-chips { display: flex; gap: 8px; margin: 0 0 14px; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.shell-v2 .vlab-cv-chips::-webkit-scrollbar { display: none; }
body.shell-v2 .vlab-cv-chip { appearance: none; font: inherit; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 280px; padding: 0 14px; border-radius: var(--r-pill); background: var(--surface-1); border: 1px solid var(--hairline); color: var(--ink-80); font-size: 13px; white-space: nowrap; cursor: pointer; }
body.shell-v2 .vlab-cv-chip-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.shell-v2 .vlab-cv-chip:hover:not(.is-on):not(:disabled):not([aria-disabled="true"]) { border-color: var(--divider-soft); color: var(--ink); }
body.shell-v2 .vlab-cv-chip.is-on { background: var(--surface-3); border-color: color-mix(in srgb, var(--ink) 70%, transparent); color: var(--ink); font-weight: 600; }
body.shell-v2 .vlab-cv-chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-cv-chip .vlab-st-dot { width: 8px; height: 8px; }
body.shell-v2 .vlab-cv-chip .vlab-st-dot.is-blank { width: 10px; height: 10px; border-width: 1.5px; }
body.shell-v2 .vlab-cv-chip-n { flex: none; font-size: 12px; font-weight: 400; color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-cv-chip-cont { flex: none; font-size: 11px; font-weight: 400; color: var(--f1-cont-ink); }
body.shell-v2 .vlab-cv-chip--add { width: 36px; padding: 0; justify-content: center; border-style: dashed; border-color: var(--f1-edge); background: transparent; color: var(--f1-ink-64); }
body.shell-v2 .vlab-cv-chip--add:disabled { opacity: 0.5; cursor: default; }
body.shell-v2 .vlab-cv-chip--add.is-busy { width: auto; padding: 0 10px; cursor: progress; }

/* 썸네일 칸(시안 F) — 영상 첫 프레임(0.6초 · 공용 로더) · 없으면 점선 플레이스홀더(오너 결정 Q3 나) — 큰 칸 · 프레임 · 줄이 같은 문법 */
body.shell-v2 .vlab-th { position: relative; box-sizing: border-box; overflow: hidden; background: var(--surface-1); }
body.shell-v2 .vlab-th--big { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; }
body.shell-v2 .vlab-th.is-video::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
/* 세로(9:16) 클립은 가운데 위쪽을 중심으로 자른다 — 얼굴이 대개 위쪽 3분의 1 에 있다 */
body.shell-v2 .vlab-th-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 0.24s ease; }
/* 보이는 것은 프레임이 선 노드뿐 — 큰 칸이 미리 받는 형제(is-warm)는 투명하게 칸 안에 숨는다 · 붙잡은 지난 프레임(is-hold)은 주인 아래에 보인다.
   붙잡은 프레임이 있으면(is-held) 주인은 페이드 없이 덮는다 — 페이드 인은 처음 도착뿐이다(`videoLabBigThumb`) */
body.shell-v2 .vlab-th-media[data-ready]:not(.is-warm) { opacity: 1; }
body.shell-v2 .vlab-th.is-held .vlab-th-media { transition: none; }
body.shell-v2 .vlab-th.is-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; text-align: center; background: transparent; border: 1.5px dashed var(--f1-edge); }
body.shell-v2 .vlab-th-mark { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
body.shell-v2 .vlab-th-mark.is-work { background: var(--positive); }
body.shell-v2 .vlab-th-mark.is-blank { border: 1.5px solid var(--f1-blank); }
body.shell-v2 .vlab-th-mark.is-none { border: 1.5px dashed var(--f1-ink-32); }
body.shell-v2 .vlab-th-t { font-size: 12px; color: var(--f1-ink-64); }
body.shell-v2 .vlab-th.is-blank .vlab-th-t { color: var(--f1-blank-ink); }
body.shell-v2 .vlab-th--big.is-ph { gap: 10px; }
body.shell-v2 .vlab-th--big .vlab-th-mark { width: 18px; height: 18px; }
body.shell-v2 .vlab-th--big .vlab-th-t { font-size: 15px; font-weight: 600; }
body.shell-v2 .vlab-th--big.is-work-none .vlab-th-t, body.shell-v2 .vlab-th--big.is-work-unknown .vlab-th-t { color: var(--ink-80); }
body.shell-v2 .vlab-th-s { font-size: 13px; color: var(--ink-48); }

/* 만들기 판정 중 — 그 문만 돈다 */
body.shell-v2 .vlab-ep-create.is-busy, body.shell-v2 .vlab-sf-make.is-busy, body.shell-v2 .vlab-cvp-make.is-busy { cursor: progress; }
body.shell-v2 .vlab-ep-spin {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor;
  animation: vlab-ep-spin 0.9s linear infinite;
}
@keyframes vlab-ep-spin { to { transform: rotate(360deg); } }

/* 시즌 머리 · 범례 */
/* 열은 minmax(0, 1fr) — 별 레일 칸은 회차 수 × 30px(손가락 44px)이라 회차가 많으면 칸 안에서 가로로 민다. 열을 auto 로 두면 레일의 최소 폭이
   열을 넓혀 페이지가 화면보다 넓어졌다(24화 · 1024 에서 20px · 좁은 화면은 레이아웃 뷰포트가 750 으로 늘었다 — 2026-10-09 실측) */
body.shell-v2 .vlab-f1-season { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
body.shell-v2 .vlab-sr-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
body.shell-v2 .vlab-sr-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-80); }
body.shell-v2 .vlab-sr-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-sr-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
body.shell-v2 .vlab-sr-lg-mk { display: inline-block; flex: none; border-radius: 50%; box-sizing: border-box; }
body.shell-v2 .vlab-sr-lg-mk.is-work { width: 10px; height: 10px; background: radial-gradient(circle, #fffdf6 0 45%, #ffe9b8 70%, rgba(255, 220, 160, 0) 100%); }
body.shell-v2 .vlab-sr-lg-mk.is-blank { width: 10px; height: 10px; border: 1.5px solid color-mix(in srgb, var(--f1-blank-ink) 75%, transparent); }
body.shell-v2 .vlab-sr-lg-mk.is-none { width: 5px; height: 5px; background: rgba(255, 255, 255, 0.28); }
body.shell-v2 .vlab-sr-lg-mk.is-sat { width: 5px; height: 5px; background: #ffeccc; box-shadow: 0 0 6px rgba(255, 230, 190, 0.8); }

/* 별 레일 — 칸 = 회차(같은 폭) · 회차가 많으면 칸이 30px 아래로 줄지 않고 가로로 민다(페이지 가로 스크롤 0) */
body.shell-v2 .vlab-sr-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.shell-v2 .vlab-sr-scroll::-webkit-scrollbar { display: none; }
body.shell-v2 .vlab-sr-track { position: relative; height: 84px; min-width: calc(var(--n, 1) * 30px); }
body.shell-v2 .vlab-sr-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.shell-v2 .vlab-sr-lines line { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
body.shell-v2 .vlab-sr-lines line.is-made { stroke: rgba(255, 255, 255, 0.3); stroke-dasharray: none; }
body.shell-v2 .vlab-sr-node { position: absolute; width: 0; height: 0; }
body.shell-v2 .vlab-sr-node > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
body.shell-v2 .vlab-sr-star { appearance: none; border: 0; padding: 0; margin: 0; width: 28px; height: 28px; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 1; }
body.shell-v2 .vlab-sr-star:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-sr-sun { position: relative; display: grid; place-items: center; width: var(--d); height: var(--d); }
body.shell-v2 .vlab-sr-halo { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 2.6); height: calc(var(--d) * 2.6); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 200, 0.42), rgba(255, 210, 150, 0.1) 45%, transparent 70%); }
body.shell-v2 .vlab-sr-core { position: relative; width: var(--d); height: var(--d); border-radius: 50%; background: radial-gradient(circle, #fffdf6 0 45%, #ffe9b8 70%, rgba(255, 220, 160, 0) 100%); }
body.shell-v2 .vlab-sr-ring { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--f1-blank-ink) 75%, transparent); background: color-mix(in srgb, var(--f1-blank-ink) 8%, transparent); }
body.shell-v2 .vlab-sr-next { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 1.5px dashed rgba(255, 255, 255, 0.7); display: grid; place-items: center; color: var(--ink); }
body.shell-v2 .vlab-sr-slot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
body.shell-v2 .vlab-sr-selring { width: var(--d); height: var(--d); border-radius: 50%; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
body.shell-v2 .vlab-sr-sat { width: 5px; height: 5px; border-radius: 50%; box-sizing: border-box; background: #ffeccc; box-shadow: 0 0 6px rgba(255, 230, 190, 0.8); pointer-events: none; }
body.shell-v2 .vlab-sr-sat.is-blank { background: transparent; box-shadow: none; border: 1px solid color-mix(in srgb, var(--f1-blank-ink) 80%, transparent); }
body.shell-v2 .vlab-sr-node > .vlab-sr-more { top: 10px; transform: translate(0, -50%); font-size: 10px; color: var(--f1-ink-64); pointer-events: none; }
body.shell-v2 .vlab-sr-num { position: absolute; transform: translate(-50%, -50%); font-size: 11px; color: var(--ink-48); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
body.shell-v2 .vlab-sr-num.is-made { color: var(--ink-80); }
body.shell-v2 .vlab-sr-num.is-on { color: var(--ink); font-weight: 600; }
/* 이어 할 별 하나만 숨쉰다 — 상태 표시(여기서 멈췄다). 움직임 줄이기면 끈다 */
@keyframes vlab-sr-twinkle { 0%, 100% { opacity: 0.82; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes vlab-sr-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
body.shell-v2 .vlab-sr-node.is-cont .vlab-sr-core { animation: vlab-sr-twinkle 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
body.shell-v2 .vlab-sr-node.is-cont .vlab-sr-halo { animation: vlab-sr-glow 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

/* 필름 스트립 — 위아래 스프로킷 구멍 · 가로 스크롤 · 오른쪽 끝이 어둠으로 사라진다 */
body.shell-v2 .vlab-sf { position: relative; margin-top: 10px; padding: 10px 0; background: #050505; border-radius: 20px; border: 1px solid var(--hairline-soft); overflow: hidden; }
body.shell-v2 .vlab-sf::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 120px; background: linear-gradient(90deg, transparent, #050505); pointer-events: none; }
body.shell-v2 .vlab-sf-perf { height: 8px; margin: 0 12px; border-radius: 2px; opacity: 0.8; background: repeating-linear-gradient(90deg, var(--surface-3) 0 10px, transparent 10px 22px); }
body.shell-v2 .vlab-sf-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.shell-v2 .vlab-sf-scroll::-webkit-scrollbar { display: none; }
body.shell-v2 .vlab-sf-frames { display: flex; gap: 12px; width: max-content; padding: 12px 132px 10px 12px; }
body.shell-v2 .vlab-sf-frame { appearance: none; border: 0; margin: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; flex: none; width: 180px; display: flex; flex-direction: column; gap: 8px; border-radius: 9px; cursor: pointer; }
body.shell-v2 .vlab-sf-frame.is-next { cursor: default; }
body.shell-v2 .vlab-sf-frame:focus-visible { outline: none; }
body.shell-v2 .vlab-sf-frame:focus-visible .vlab-th--frame { box-shadow: var(--ring-focus); }
/* 프레임 썸네일 칸(16:9) — 고른 회차는 흰 테 · 캔버스가 여럿이면 겹친 테두리(제품 면 · 선 토큰) + 칸 안 '캔버스 n개' 배지 */
body.shell-v2 .vlab-th--frame { width: 180px; height: 101px; border-radius: 8px; }
body.shell-v2 .vlab-th--frame.is-ph { flex-direction: row; gap: 6px; }
body.shell-v2 .vlab-sf-frame.is-on .vlab-th--frame { outline: 2px solid var(--ink); outline-offset: 2px; }
body.shell-v2 .vlab-sf-frame.is-stack .vlab-th--frame { box-shadow: 6px -6px 0 -1px var(--surface-2), 6px -6px 0 0 color-mix(in srgb, var(--ink) 32%, transparent), 12px -12px 0 -1px var(--surface-1), 12px -12px 0 0 color-mix(in srgb, var(--ink) 24%, transparent); }
body.shell-v2 .vlab-sf-frame.is-stack { margin-right: 10px; }
body.shell-v2 .vlab-sf-k { position: absolute; right: 7px; bottom: 7px; z-index: 1; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--canvas) 72%, transparent); font-size: 11px; color: var(--f1-cont-ink); white-space: nowrap; }
body.shell-v2 .vlab-sf-cap { display: grid; gap: 2px; min-width: 0; font-size: 12px; color: var(--f1-ink-64); }
body.shell-v2 .vlab-sf-ep { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-sf-line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.shell-v2 .vlab-sf-line .vlab-f1-branch { min-width: 16px; height: 16px; margin-right: 4px; font-size: 10px; vertical-align: 1px; }
body.shell-v2 .vlab-sf-make { appearance: none; font: inherit; box-sizing: border-box; width: 180px; height: 101px; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.6); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; cursor: pointer; }
body.shell-v2 .vlab-sf-make:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.04); }
body.shell-v2 .vlab-sf-make:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .vlab-sf-make:disabled { opacity: 0.5; cursor: default; }

/* 왼쪽 목록(셸 왼쪽 패널) — 최근 편집 · 자유 캔버스 */
body.shell-v2 .vlab-cvp-tools > .vlab-cvp-make { flex: 1 1 auto; }
body.shell-v2 .vlab-cvp-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-48); }
body.shell-v2 .vlab-cvp-sec-n { font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-cvp-list { display: grid; gap: 2px; }
body.shell-v2 .vlab-cvp-row { appearance: none; border: 0; margin: 0; background: none; font: inherit; color: var(--ink); text-align: left; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; }
body.shell-v2 .vlab-cvp-row:hover { background: var(--surface-1); }
body.shell-v2 .vlab-cvp-row[aria-current="true"] { background: var(--surface-2); }
body.shell-v2 .vlab-cvp-row:focus-visible { outline: none; box-shadow: var(--ring-focus); }
/* 줄 썸네일(시안 F) — 64×36 · 없으면 작은 점선 상자 + 모양 */
body.shell-v2 .vlab-th--row { width: 64px; height: 36px; flex: none; border-radius: 6px; }
body.shell-v2 .vlab-th--row.is-ph { padding: 0; border-width: 1px; }
body.shell-v2 .vlab-cvp-body { display: grid; gap: 1px; min-width: 0; }
body.shell-v2 .vlab-cvp-t { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.shell-v2 .vlab-cvp-nm { font-weight: 500; color: var(--f1-ink-64); }
body.shell-v2 .vlab-cvp-meta { font-size: 12px; color: var(--ink-48); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
body.shell-v2 .vlab-cvp-empty { padding: 2px 8px; font-size: 12px; color: var(--ink-48); }

/* 받는 동안의 뼈대 — 도착할 화면과 같은 자리 */
body.shell-v2 .vlab-f1-bone { display: block; }
body.shell-v2 .vlab-f1-bone--eyebrow { width: 150px; height: 18px; margin-top: 18px; }
body.shell-v2 .vlab-f1-bone--event { width: 86%; height: 30px; margin-top: 14px; }
body.shell-v2 .vlab-f1-bone--cliff { width: 72%; height: 40px; margin-top: 14px; }
body.shell-v2 .vlab-f1-bone--rail { height: 84px; margin-top: 24px; border-radius: var(--r-md); }
body.shell-v2 .vlab-f1-bone--strip { height: 154px; margin-top: 10px; border-radius: 20px; }

/* 좁은 데스크톱 — 큰 칸 위 · 이야기 아래 */
@media (max-width: 1180px) {
  body.shell-v2 .vlab-f1-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  body.shell-v2 .vlab-f1-media { max-width: 640px; }
}
/* 좁은 창(≤810) — 머리 줄 여백이 ①②③ 스튜디오 틀과 **같은 폭에서** 바뀐다(asset-studio.css 의 ≤810 규칙 · 옛 판은 ≤720 이라 721~810 에서
   ④ 만 단계 줄이 다른 자리에 섰다). 본문의 좌우 여백도 같은 선으로 맞춘다(머리 줄과 본문 시작선이 어긋나지 않게 · 위아래는 그대로). */
@media (max-width: 810px) {
  body.shell-v2 .vlab-screen--season > .vlab-tabs-wrap { padding: var(--sp-sm) var(--sp-md); }
  body.shell-v2 .vlab-eps { padding-inline: var(--sp-md); }
}
@media (max-width: 720px) {
  body.shell-v2 .vlab-eps { padding: 4px var(--sp-md) 40px; }
  body.shell-v2 .vlab-f1-event { font-size: 22px; }
  body.shell-v2 .vlab-f1-beat.is-branch .vlab-f1-event { font-size: 18px; }
  body.shell-v2 .vlab-f1-acts .btn { min-height: 44px; }
}
/* 손가락 화면 — 별의 과녁만 44(보이는 별은 그대로) · 칸도 44 로 넓혀 과녁끼리 겹치지 않게 · 행동 줄의 아이콘 버튼(편집기 · ⋯) · 칩도 44
   (테두리 없는 버튼이라 보이는 것은 아이콘 그대로다 · `apple-rules.css` 의 ::after 는 가로를 2px 만 넓혀 28 짜리가 32 에 그친다) */
@media (pointer: coarse) {
  body.shell-v2 .vlab-sr-star { width: 44px; height: 44px; }
  body.shell-v2 .vlab-sr-track { min-width: calc(var(--n, 1) * 44px); }
  body.shell-v2 .vlab-cvp-row { min-height: 56px; }
  body.shell-v2 .vlab-f1-acts .btn { min-width: 44px; min-height: 44px; }
  body.shell-v2 .vlab-cv-chip { height: 44px; }
  body.shell-v2 .vlab-cv-chip--add { width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .vlab-sr-node.is-cont .vlab-sr-core, body.shell-v2 .vlab-sr-node.is-cont .vlab-sr-halo, body.shell-v2 .vlab-ep-spin { animation: none; }
  body.shell-v2 .vlab-th-media { transition: none; }
}