` 가 됐다(버튼 안의 버튼 금지) — `.vlab-img-tile` 의 `cursor: pointer` 는
그대로 두어 **카드 전체 클릭이 여전히 손잡이**임을 말한다.
⚠️ 행동은 카드 **맨 아래**다(클립 목록과 같은 어법): 그림 → 이름 → 상태 → 행동. 위로 올리면 썸네일을
가리고, 옆에 두면 240px 칸에서 이름이 잘린다. */
.vlab-pick-act { margin-top: auto; padding: var(--sp-xxs); }
.vlab-pick-act .vlab-pick-add { width: 100%; }
/* 잠긴 카드는 **왜 잠겼는지**가 라벨에 있다('캔버스에 있음') — 흐리게만 두면 고장으로 읽힌다. */
.vlab-pick-add[disabled] { opacity: 0.55; cursor: default; }
/* 참조로 안 쓰인다는 사실 — `.vlab-hint`(정보)와 색으로 갈린다(`.vlab-node-err` 주석의 그 규율). */
.vlab-img-tile-cap--warn { color: var(--warn, #e0b34a); opacity: 0.9; }
/* ── 고른 것을 말하는 줄 — 목록과 [넣기] 사이(2026-09-08) ─────────────────────
오너: *"배경 고르기도 선택하면 뷰 고르는부분과 목록부분이 ui가 너무 헷갈려"*.
옛 판은 뷰 세그먼트를 **격자 흐름 한가운데**(`grid-column: 1 / -1`)에 끼워 넣었다 — 카드1 · 뷰줄 ·
카드2 로 그려지니 어느 카드의 뷰인지 안 보이고, 세그먼트가 목록 필터처럼 읽혔다.
⚠️ 그래서 격자 **밖**이다. 목록(`.vlab-img-grid` 는 자기 max-height 안에서 스크롤한다)이 아무리
길어도 이 줄은 늘 [넣기] 바로 위 같은 자리에 있다.
⚠️ 고른 것이 없으면 이 상자는 **비어 있고**(자식 0) padding·테두리가 보이면 빈 상자가 뜬다 —
`:empty` 로 통째로 지운다(문구 0건 규율의 CSS 판). */
.vlab-pick-bar {
margin-top: var(--sp-sm);
padding: var(--sp-xs);
border-radius: var(--r-md);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.25);
display: grid;
gap: var(--sp-xxs);
}
.vlab-pick-bar:empty { display: none; }
/* 어느 배경의 뷰인지 — 이 줄의 부재가 곧 옛 판의 혼란이었다. */
.vlab-pick-bar-title { font-size: 12px; font-weight: 600; }
/* 뷰가 다섯이라 좁은 팝업에서는 접힌다(가로 스크롤을 만들지 않는다). */
.vlab-pick-bar .vlab-tabs { flex-wrap: wrap; }
.vlab-pick-bar .vlab-img-empty { padding: 0; }
/* 실제로 캔버스를 바꾸는 유일한 버튼 — 푸터 맨 오른쪽. 잠겼으면 아직 고른 것이 없다는 뜻이다. */
.vlab-pick-confirm[disabled] { opacity: 0.5; cursor: default; }
/* 피커 푸터는 버튼이 넷이다(만들기·새로고침·닫기·넣기) — `.sm-actions` 는 감싸지 않는 한 줄 flex 이라
좁은 창에서 [넣기]가 밖으로 밀린다. 이 팝업 안에서만 접는다. */
.vlab-img-panel .sm-actions { flex-wrap: wrap; }
/* 이미 앉아 있는 (배경, 뷰) — 칸을 지우지 않고 **잠근다**: 지우면 다섯 칸의 자리가 흔들려 어느 뷰가
빠졌는지 읽히지 않는다. */
.vlab-tab[disabled] { opacity: 0.4; cursor: default; }
.vlab-tab[disabled]:hover { color: inherit; }
.vlab-img-tile { position: relative; }
/* 확대 버튼 — 그림 위 오른쪽 위. 타일 클릭('고르기')과 **다른 의도**라 별도 손잡이로 둔다. */
.vlab-img-zoom {
position: absolute;
top: 8px;
right: 8px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(0, 0, 0, 0.55);
font-size: 13px;
line-height: 1;
cursor: zoom-in;
opacity: 0; /* 평소엔 그림을 가리지 않는다 */
transition: opacity 120ms ease;
}
.vlab-img-tile:hover .vlab-img-zoom,
.vlab-img-tile:focus-within .vlab-img-zoom,
.vlab-img-zoom:focus-visible { opacity: 1; }
/* 터치는 hover 가 없다 — 항상 보인다(안 그러면 확대에 닿을 길이 없다). */
@media (hover: none) {
.vlab-img-zoom { opacity: 1; }
}
/* 채우기·수정 버튼은 폭을 다 쓴다(카드 안에서 유일한 행동이라 찾기 쉬워야 한다). */
.vlab-node-fill { flex: 1 1 auto; justify-content: center; }
/* ⚠️ **`.vlab-node-err` 는 어느 CSS 에도 없던 클래스였다**(2026-08-18 배경 라운드에서 발견).
`videoLabNodeView` 가 캐릭터 카드의 "이 캐릭터를 찾을 수 없습니다"를 이 클래스로 그려 왔는데 규칙이
없어서 **경고가 평범한 본문 글자로** 떴다 — 참조가 끊긴 노드는 그 사실이 눈에 띄어야 하고, 안 그러면
사용자는 참조 없이 생성이 돌아간 뒤에야 "왜 얼굴이/배경이 다르지"로 알게 된다.
Phase 7 의 `vlab-node-model` 과 **같은 형태**의 결함이다(클래스가 있으니 스타일이 있다고 가정하면 안 된다).
⚠️ `.vlab-hint`(정보)와 **색으로 갈린다** — 둘이 같은 톤이면 "아직 없음"과 "찾을 수 없음"이 구별되지 않는다. */
.vlab-node-err {
font-size: 11px;
line-height: 1.45;
color: var(--danger, #ff8a8a);
opacity: 0.95;
}
/* 캡션 묶음 — 카드의 flex gap(9px)이 이 래퍼 하나에만 걸리므로, 안쪽 간격은 여기서 준다.
⚠️ 래퍼에 CSS 를 안 주면 입력과 힌트가 붙고 래퍼 위아래로만 여백이 생겨 **간격이 뒤집혀 보인다**
(오너 신고 2026-08-10). display:grid + gap 이 그 어긋남을 없앤다. */
/* ── 모달 레이아웃 ────────────────────────────────────────────────────────
보드 이미지 목록이 주인공이고 업로드는 한 줄이면 된다.
⚠️ 예전에는 파일 입력이 큰 블록을 차지해 목록이 눌렸다(오너 신고 2026-08-10). */
.vlab-img-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
max-height: 46vh;
overflow-y: auto;
padding-right: 2px; /* 스크롤바가 타일 테두리를 덮지 않게 */
}
.vlab-img-empty { font-size: 12px; opacity: 0.55; padding: 10px 0; }
/* ★ 구분선은 **설명 절**이 소유한다(2026-08-24) — 예전에는 border-top 이 여기 붙어 같은 or 집합의 두
멤버(보드 이미지 ↔ 파일)를 갈라 놓고, 성질이 다른 설명 절은 경계 없이 붙어 있었다. */
.vlab-img-sec--cap { padding-bottom: var(--sp-sm); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vlab-img-sec--upload { margin-top: var(--sp-md); padding-top: var(--sp-sm); }
.vlab-img-sec--upload .vlab-img-sec-title { display: inline; margin-right: 8px; }
.vlab-img-sec--upload .vlab-file { display: inline-block; }
.vlab-img-sec--upload .vlab-img-hint { display: block; margin: 6px 0 0; }
/* ── 채우기 팝업 — **두 틀을 두 열로**(2026-08-24) ───────────────────────────────
오너: *"지금 ui가 너무 난잡하고 이미지들도 겹쳐있고 ui가 너무 별로야 모달을 키워도 되니까 전반적으로
이 모달UI정리해"*. 고친 것 넷:
① **겹침의 원인** — 이력 묶음을 `.vlab-char-hist`(flex) 로 그리면서 그 자식에 폭을 정하는 클래스
(`.vlab-char-hist-tile`)를 안 붙였다. flex 아이템이 폭 없이 `aspect-ratio` 이미지를 들어 서로 겹쳤다.
→ 이력도 **같은 격자**로 그린다(스트립을 안 쓴다). 시간축은 정렬(최신 먼저)이 이미 표현한다.
② **타일 위의 ＋ 배지 철거** — 썸네일 위에 버튼을 얹은 것이 난잡함의 절반이었다. 이제 **열이 뜻을
정한다**(왼쪽=그대로, 오른쪽=재료)이고 선택 표시는 테두리 + 캡션 앞 `✓` 다.
③ **모달을 키웠다** — 560px 한 단에 두 틀을 쌓으니 타일이 눌렸다. 1040px 두 단(좁으면 세로로 쌓임).
⚠️ 공용 `.vlab-img-panel` 을 넓히지 않는다(캐릭터·배경 피커가 같이 커진다) — 자기 클래스를 뒀다.
④ **열마다 자기 스크롤** — 팝업 하나가 통째로 길어지지 않게. 유료 버튼이 화면 밖으로 밀리지 않는다. */
.vlab-fill-panel {
max-width: 1040px;
width: min(1040px, 96vw);
max-height: 88vh;
overflow-y: auto;
}
.vlab-fill-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); align-items: start; }
@media (max-width: 900px) {
/* 두 열을 억지로 나란히 두면 타일이 60px 로 줄어 무엇인지 못 고른다 — 좁으면 쌓는다. */
.vlab-fill-cols { grid-template-columns: 1fr; }
}
/* 한 열짜리 팝업(이미지 카드의 [고르기·올리기] · [다른 회차] — 2026-09-23 오너 "남은것들 진행해")은 폭도 한 열이다.
두 열 틀을 그대로 쓰면 오른쪽 절반이 빈 채 창만 넓었다. */
.vlab-fill-panel.vlab-fill-panel--single { max-width: 640px; width: min(640px, 96vw); }
.vlab-fill-panel--single .vlab-fill-cols { grid-template-columns: 1fr; }
/* ── 어디서 고를까(이미지 노드 팝업만 · 2026-09-23) ────────────────────────────
오너: *"이미지노드에서 이전회차에서 가져올수있는 기능을제공해야해 회차를 고르고 그회차에서
다른 이미지 노드를 선택할수있게"*. 목록 **바로 위**에 붙인다 — 이 줄이 아래 목록의 뜻을 정하므로
둘 사이에 다른 것이 끼면 무엇이 바뀐 것인지 안 보인다.
⚠️ 셀렉트는 공용 `.vlab-model` 이다(자기 위젯을 만들지 않는다) — 여기서는 남는 폭을 먹게만 한다. */
.vlab-fill-from { display: flex; align-items: center; gap: var(--sp-xs); margin: var(--sp-xs) 0; }
.vlab-fill-from-label { font-size: 11px; opacity: 0.6; white-space: nowrap; }
.vlab-fill-from .vlab-model { flex: 1 1 0; min-width: 0; }
/* 고를 다른 회차가 없을 때 셀렉트 자리의 한 줄(2026-09-23) — 오류가 아니라 사실이라 흐린 본문 글자다. */
.vlab-fill-from-none { font-size: 12px; opacity: 0.75; }
.vlab-img-box {
padding: var(--sp-sm);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--r-md, 12px);
background: rgba(255, 255, 255, 0.02);
min-width: 0; /* 격자 열 안에서 내용이 열을 밀어내지 않게 */
}
.vlab-img-box-title { display: flex; align-items: center; gap: var(--sp-xs); }
.vlab-img-box-title .vlab-img-sec-title { margin: 0; font-size: var(--fs-sm, 13px); opacity: 1; }
/* 값 배지 — 무료/유료. 두 틀의 차이가 값에서 가장 크게 갈린다. */
.vlab-img-box-tag {
font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0.7;
}
.vlab-img-box-tag.is-paid { border-color: rgba(255, 176, 32, 0.5); color: #ffb020; opacity: 1; }
/* 목록 — 스크롤은 **묶음 전체**가 함께 받는다(격자마다 스크롤이 생기면 어디를 끄는지 모른다). */
.vlab-img-list { max-height: 40vh; overflow-y: auto; padding-right: 2px; }
.vlab-img-list .vlab-img-grid { max-height: none; overflow: visible; }
.vlab-img-filter { margin: var(--sp-xxs) 0 var(--sp-xs); }
/* 묶음 머리 — `