/* 새 셸 화면별 완성도 층 — canvas(영상 프로젝트 안쪽: 캐릭터/배경/소품 카드 · 캔버스 툴바 · 노드 카드). DESIGN.md(Framer) 준수 · body.shell-v2 스코프 * 모달(캐릭터·배경·소품 패널 · 초안 팝업)·세그먼트 탭·준비물 안내는 canvas-modals.css(이 파일 바로 뒤에 링크) 가 소유한다. * ⚠️ videolab.css · components.css 는 읽기 전용 — 여기서 덮어쓴다. 프로젝트 목록 카드는 ui-tools 몫이라 건드리지 않는다. * ⚠️ 영상탭은 조판·과금 로직이 얽혀 있어 JS·문구는 그대로 두고 표시만 바꾼다. */ /* ════════ 그림 자리표시자의 이니셜(`videoLabImageFallback`) ════════ * 옛 카드 격자(`.vlab-char-grid`·`.vlab-char-card`·`.vlab-char-thumb`)는 2026-10-03 캐스트 스튜디오로 대체돼 여기 규칙도 걷었다. */ body.shell-v2 .vlab-char-initial { opacity: 1; color: var(--ink-48); } /* ════════ 캔버스 툴바 ════════ * 구조는 videolab.css·videoLabToolbar.js 가 소유한다 — 메인 헤더 행 + 메뉴 띠 행(세로 두 줄, 2026-09-16 캘빈). * 이 층은 재질만 입힌다: 툴바 바탕은 liquid-glass-chrome.css 의 글라스, 행은 불투명 바탕을 걷고 메뉴 띠만 한 톤 밝은 알파 채움. * 🔴 여기서 flex-wrap·order·::after 로 자식을 재배치하지 않는다 — 옛 한 줄 DOM 용 규칙이 두 줄 DOM 에 남아 * ::after(flex-basis 100%)가 세로 flex 에서 열을 끊어 두 행이 옆으로 나란히 서고 가운데가 빈 칸이 됐다(2026-09-19 오너 신고). */ body.shell-v2 .vlab-toolbar { min-width: 0; max-width: 100%; border-bottom: 1px solid var(--lg-edge); } body.shell-v2 .vlab-toolbar-row { width: 100%; } body.shell-v2 .vlab-toolbar-row--main { background: transparent; } /* ★ 독 배치 = 캔버스 위 하단 가운데 떠 있는 막대 하나(2026-09-19 오너 *"상단 바가 3겹으로 너무 많아 … 화면 중앙 하단에 툴바로"* * · *"헤더에 두번째 줄은 필요 없는 것 같아"*). 새 셸이면 툴바가 머리 줄 없이 `.vlab-dock` 하나를 그린다(`videoLabToolbar` dock) — * [목록] │ 만들기·편집·보기·정리 │ [저장][취소][전체 실행]. 캔버스 이름은 상단바 빵부스러기, 읽기 전용 표시도 상단바 하나다. * ⚠️ 기준 상자는 보드 화면이다 — 툴바 바깥 상자는 static 이고 글라스(backdrop-filter)를 갖지 않아야 한다(liquid-glass-chrome 주석). * ⚠️ [＋ 추가 ▾] 메뉴는 단추 윗변 기준으로 위로 연다(`videoLabToolbar` anchorY). * 떠 있는 컨트롤이라 글라스(G1) 재질 — 콘텐츠층 글라스 금지 규칙과 무관(캔버스 위 컨트롤층). */ body.shell-v2 .vlab-screen--board { position: relative; } body.shell-v2 .vlab-screen--board > .vlab-toolbar { position: static; } body.shell-v2 .vlab-toolbar--dock { border-bottom: 0; box-shadow: none; } body.shell-v2 .vlab-dock { position: absolute; z-index: 6; left: 50%; bottom: var(--sp-lg, 24px); translate: -50% 0; display: flex; align-items: center; gap: 0; /* 🔴 **가로 자리는 화면 가운데가 정본이다**(2026-09-22 오너 *"독바 중앙정렬이 화면에 안맞아진거같아 왼쪽에 쏠려있어 독바가 화면기준으로"*) — `left: 50%` + `translate: -50%` 한 줄이 그것이고, 아래 미디어 쿼리만이 예외다. ⚠️ 상한에서 빼는 **56px** 은 접힌 미니맵 아이콘 레인이다: 아이콘은 `.vlab-corner-br`(right 12) 안의 28px 이라 오른쪽 끝에서 12 + 28 = 40 을 차지하고, 거기에 틈 16 을 더한 값이다. **양쪽에서 똑같이** 빼는 것이 요점이다 — 한쪽만 빼면 그것이 곧 옛 증상(가운데가 아닌 독)이고, 대칭으로 빼면 밀지 않고 좁히므로 가운데가 지켜진다. ⚠️ 실측(2026-09-19 · 보드 1440) 독 폭은 958px 이라 이 상한은 보드 1070px 아래에서만 물린다. 그 아래에서는 독이 제 안에서 가로로 구른다(`overflow-x: auto`) — 옛 규칙은 같은 자리에서 이미 더 일찍 좁히고 있었다. */ width: max-content; max-width: calc(100% - 2 * (12px + 28px + var(--sp-md, 16px))); height: 52px; padding: 0 var(--sp-xs); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--r-pill); background: var(--lg-sheen), var(--lg-tint-thick, rgba(0, 0, 0, 0.72)); -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter); box-shadow: var(--lg-shadow-float); } body.shell-v2 .vlab-dock::-webkit-scrollbar { display: none; } body.shell-v2 .vlab-dock > * { flex: none; display: flex; align-items: center; gap: 4px; } body.shell-v2 .vlab-dock > * + *::before { content: ''; align-self: center; width: 1px; height: 20px; margin: 0 var(--sp-xs); background: var(--divider-soft, rgba(255, 255, 255, 0.12)); } body.shell-v2 .vlab-dock .vlab-toolbar-row--menu { width: auto; height: auto; padding: 0; background: none; border: 0; overflow: visible; justify-content: flex-start; } body.shell-v2 .vlab-dock .btn { min-height: 36px; border-radius: var(--r-pill); } body.shell-v2 .vlab-dock .vlab-toolbar-run { padding-left: 0; border-left: 0; } /* 미니맵(오른쪽 아래 · 폭 220 + 여백 = 약 248px)과 겹치지 않게 — 보드가 좁으면 **미니맵 왼쪽 남는 폭의 가운데**에 선다. 7f3e9fa1 이 고친 옛 증상(*"좁은 보드에서 막대가 왼쪽 끝으로 간다"*)은 그대로 막혀 있다 — 조건만 좁아졌다. 🔴 **조건이 좁아진 이유**(2026-09-22 오너 *"독바 중앙정렬이 화면에 안맞아진거같아 왼쪽에 쏠려있어"*): 이 규칙이 폭만 보고 **언제나** 248 을 비워서, 미니맵이 접혀 28px 아이콘 하나일 때도 독이 화면 중심보다 124px 왼쪽에 섰다. 자리를 비우는 것은 **판이 실제로 펼쳐져 있을 때**뿐이다. ⚠️ 표식은 `body.vlab-minimap-open` 이고 `graphMinimap.paintChrome` 이 여닫을 때마다 든다. CSS 만으로는 못 한다 — 미니맵은 `.vlab-canvas` 안(`.vlab-corner-br`)에 있고 독은 그 **앞** 형제인 `.vlab-toolbar` 안이라 `~` 가 닿지 않는다(형제 결합자는 뒤로만 간다). `:has()` 는 닿지만 캔버스 서브트리는 렌더마다 DOM 이 크게 바뀌는 곳이라(`videoLabPanFlicker` 의 그 불변식) 거기에 조상 무효화를 심는 대신 클래스 한 줄을 골랐다. ⚠️ **1520 임계값은 다시 재도 맞다**: 실측 독 폭 958(보드 1440) · 펼친 판은 오른쪽 끝에서 220 + 12 = 232 를 쓴다. 가운데 선 독의 오른쪽 모서리 (W + 958) / 2 가 W − 232 보다 12px 앞서려면 W ≥ 1446 이다. 1520 은 74px 여유이고, 그만큼이 [남은 생성 취소]처럼 실행 중에만 서는 단추 하나의 폭이다(독 폭은 고정이 아니다). */ @media (max-width: 1520px) { body.shell-v2.vlab-minimap-open .vlab-dock { left: calc((100% - 248px) / 2); max-width: calc(100% - 248px - 2 * var(--sp-md, 16px)); } } /* 선 색 안내는 새 셸에서 세우지 않는다(2026-09-19 오너 *"선색 안내 필요 없고"*) — 선 색은 연결점·카드 색이 이미 말한다 */ body.shell-v2 .vlab-legend { display: none; } body.shell-v2 .vlab-toolbar .vlab-add { gap: 2px; } body.shell-v2 .vlab-title { height: 36px; padding: 0 var(--sp-sm); border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 500; letter-spacing: var(--ls-body); } body.shell-v2 .vlab-title:hover { background: var(--surface-1); border-color: transparent; } body.shell-v2 .vlab-title:focus { background: var(--surface-1); border-color: transparent; box-shadow: var(--ring-focus); } body.shell-v2 .vlab-viewonly-note { opacity: 1; color: var(--ink-48); border: 0; background: var(--surface-1); padding: var(--sp-xxs) var(--sp-sm); } /* 보드 화면 높이 — 옛 규칙은 캔버스를 100vh-58px 로 고정해 툴바(두 줄 101px)만큼 페이지가 세로로 넘쳤다(sh 999 > 900). * 화면을 상단바 아래 높이의 세로 flex 로 두고 캔버스가 남는 자리를 가진다. 뷰포트 계산은 캔버스 크기를 다시 재므로 좌표계는 그대로다. */ body.shell-v2 .vlab-screen--board { display: flex; flex-direction: column; height: calc(100dvh - var(--top-h)); min-height: 0; } body.shell-v2 .vlab-screen--board > .vlab-toolbar { flex: none; } body.shell-v2 .vlab-screen--board > .vlab-canvas { flex: 1 1 auto; height: auto; min-height: 0; } /* ════════ 노드 카드 — 테두리 대신 표면(surface-1) + 떠 있는 그림자 · 선택만 파란 링 ════════ */ body.shell-v2 .vlab-node { background: var(--surface-1); border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: var(--shadow-float); } body.shell-v2 .vlab-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-float); } body.shell-v2 .vlab-node-kind { opacity: 1; color: var(--ink-48); font-weight: 500; } body.shell-v2 .vlab-hint { opacity: 1; color: var(--ink-48); } body.shell-v2 .vlab-text, body.shell-v2 .vlab-caption { background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink); } body.shell-v2 .vlab-text:focus, body.shell-v2 .vlab-caption:focus { border-color: transparent; box-shadow: var(--ring-focus); } body.shell-v2 .vlab-text::placeholder, body.shell-v2 .vlab-caption::placeholder { color: var(--ink-48); } body.shell-v2 .vlab-node-run { border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-80); padding: var(--sp-xxs) var(--sp-sm); } body.shell-v2 .vlab-node-run:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: transparent; } body.shell-v2 .vlab-node-run:focus-visible { outline: none; box-shadow: var(--ring-focus); } body.shell-v2 .vlab-port { background: var(--surface-2); border-color: var(--ink-48); } body.shell-v2 .vlab-badge { border: 0; background: var(--surface-2); } body.shell-v2 .vlab-badge--idle { opacity: 1; color: var(--ink-48); } body.shell-v2 .vlab-badge--running { color: var(--ink-80); } body.shell-v2 .vlab-badge--done { color: var(--positive); } body.shell-v2 .vlab-badge--failed { color: var(--danger); } body.shell-v2 .vlab-badge--cancelled { color: var(--ink-80); } body.shell-v2 .vlab-board-cell { border-color: transparent; background: var(--surface-2); } /* 노드 미리보기 상자 — 시트는 contain 이 맞지만(잘리면 안 된다) 상자 바탕을 노드 표면과 같게 두어 좌우 여백이 검은 띠로 안 읽히게 한다 */ body.shell-v2 .vlab-node .vlab-media { background: var(--surface-1); } body.shell-v2 .vlab-node .vlab-thumb { background: transparent; } /* 노드 안 본문 최소 12px(캔버스 줌 100% 기준) — 버튼·단계·배지·비용·재료 점검 줄이 10~11px 이었다(실측). */ body.shell-v2 .vlab-node .vlab-node-run, body.shell-v2 .vlab-node .vlab-char-node-stage, body.shell-v2 .vlab-node .vlab-badge, body.shell-v2 .vlab-node .vlab-node-cost, body.shell-v2 .vlab-node .vlab-lint, body.shell-v2 .vlab-node .vlab-lint-line { font-size: 12px; line-height: 1.4; } /* ════════ 좁은 화면 ════════ */ @media (max-width: 810px) { /* 툴바 — 두 행 그대로, 행마다 가로 스크롤(페이지는 가로 스크롤 0). 좁으면 제목이 먼저 줄어든다 */ body.shell-v2 .vlab-toolbar-row { height: auto; min-height: 48px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--sp-sm); } body.shell-v2 .vlab-toolbar-row::-webkit-scrollbar { display: none; } body.shell-v2 .vlab-toolbar-row > * { flex: none; } body.shell-v2 .vlab-toolbar-row > .vlab-title { flex: 1 0 120px; min-width: 120px; } body.shell-v2 .vlab-toolbar .btn, body.shell-v2 .vlab-title { min-height: 44px; } body.shell-v2 .vlab-node-run { min-height: 36px; } /* 좁은 화면 프로젝트 상단바는 경계선까지 59px(실측) — --top-h(56) 로 빼면 3px 세로 스크롤이 남는다 */ body.shell-v2 .vlab-screen--board { height: calc(100dvh - var(--top-h) - 3px); } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ * ▼▼ 구조 손질 2026-09-21 (오너 지적 #1 도크 · #3 포트 · #7 상단 탭 줄 · #8 타임라인) ▼▼ * ⚠️ 이 블록은 **배치·구조만** 손댄다 — 색 토큰 값은 위의 색 절들이 소유한다(대비 손질은 그쪽에서). * ⚠️ 전부 `body.shell-v2` + 영상탭 선택자 스코프다. 다른 탭·다른 화면은 한 픽셀도 안 바뀐다. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── ① 캔버스에서는 상단 모드 탭 줄을 감춘다 ────────────────────────────────────────────── * 오너 *"[캔버스 상단] 상단의 탭 줄(개요 · 기획 · 에피소드 · 오디오 · 영상)은 캔버스에서 안 나오게 하고, * 그 자리에 하단 도크의 메뉴 일부를 빼서 넣자"* · *"오른쪽 상단에"*. * ⚠️ 표식은 `body.vlab-board-open` 하나 — 영상탭 뷰가 **보드 화면일 때만** 붙이고 떠날 때 뗀다 * (`videoLabView.renderNow` · `deactivateVideoLabView` · `app.js clearCanvasTools`). * 모드 내비 모듈(`projectModeNav.js`)도 다른 탭의 코드 경로도 한 줄 안 바뀐다 — 감추는 일은 여기 CSS 뿐이다. * ⚠️ 좁은 화면의 `