/* shot_view.css — 컷·에셋 상세 새 화면 (시안 「가」 · 2.208.0 · 새 파일)
   틀(카드·두 칸·좁으면 대화가 카드 밑)은 title_view.css 의 `.tv-*` 를 그대로 쓴다 — 여기는 컷·에셋만의 옷.
   ⚠ 오른쪽 옛 보기 판(.detail-side)은 이 화면에서 접는다 — 그 안의 그림 칸·대화 칸은 카드로 옮겨 달린다(shot_view.js).
     큰 화면(Enter)이면 `sv-on` 이 빠지고 옛 큰 화면 판 그대로 선다. */

.detail-body.sv-on, .detail-body.sv-on.t1, .detail-body.sv-on.t2 { grid-template-columns: minmax(0, 1fr); }
.detail-body.sv-on > .detail-side { display: none; }

/* 머리 카드 — 썸네일 하나 + 옆을 채운다 */
.sv-hero.hero { display: grid; grid-template-columns: minmax(220px, 380px) minmax(0, 1fr); gap: 18px; margin: 0; padding: 14px; align-items: start; }
@container tvleft (max-width: 1000px) { .sv-hero.hero { grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); gap: 14px; } }   /* 10-04 밤 · 왼쪽 칸 폭으로 잰다(오른쪽 칸이 넓어졌다) */
@container tvleft (max-width: 640px) { .sv-hero.hero { grid-template-columns: minmax(0, 1fr); } }
.sv-thumb .hero-img { height: 100%; width: 100%; border: 0; border-radius: 0; object-fit: cover; }
.sv-thumb .hero-img.strip { height: 100%; }
.sv-nothumb { font-size: 13px; padding: 0 12px; text-align: center; }
.sv-side { gap: 8px; }
.sv-hhead { gap: 8px; }
.sv-hhead b.sv-code { font-size: 13px; }
.sv-hhead .spacer { flex: 1; }
.sv-hhead .sv-ep { font-size: 13px; }
.sv-hhead .made-by-tag { font-size: 11px; }
.sv-status.hero-status { margin: 0; gap: 6px; }
.sv-status.hero-status select.status { font-size: 13px; padding: .25rem 1.6rem .25rem .6rem; border-radius: 99px; }
.sv-status.hero-status .sicon { transform: none; margin-right: 0; }
.sv-folder { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; }
.sv-folder .sv-folder-btn { position: relative; }
.sv-folder .sv-folder-btn .ic { color: #e3b341; }
.sv-folder .sv-folder-btn.gray .ic { color: var(--muted); }
.sv-folder .sv-folder-btn .fi-ok, .sv-folder .sv-folder-btn .deliv-dot { position: absolute; right: -3px; top: -3px; }
/* 2.208.3 · 이미지 컷 그림 폴더 아이콘(cut_folder.js) — 폴더 아이콘 옆 · 규칙과 다르면 노랑 + 바꾸기 단추 */
.cf-folder { display: inline-flex; align-items: center; gap: 4px; }
.cf-folder .cf-btn { position: relative; }
.cf-folder .cf-btn.ok .ic { color: #3fb950; }
.cf-folder .cf-btn.warn .ic { color: #e3b341; }
.cf-folder .cf-btn.gray .ic { color: var(--muted); }
.cf-folder .cf-btn .fi-ok, .cf-folder .cf-btn .deliv-dot { position: absolute; right: -3px; top: -3px; }
.cf-folder .cf-rename { color: #e3b341; white-space: nowrap; }
/* 2.208.4 · 폴더가 둘 — 합치기 단추(빈 쪽 있음) · 둘 다 파일이면 안내만 */
.cf-folder .cf-twin { color: #e3b341; white-space: nowrap; }
.cf-folder span.cf-twin { font-size: 12px; cursor: help; }
.cf-twin-lines { white-space: pre-line; }
.cf-ask .cf-name-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.cf-ask .cf-name-input { flex: 1; min-width: 12em; }
.sv-folder .fi-more { width: 22px; height: 26px; }
.sv-title { font-size: 20px; margin: 2px 0 0; }
.sv-title.clickable { cursor: text; }
.sv-title-none { font-size: 15px; font-weight: 500; }
.sv-title-input { font-size: 18px; width: min(100%, 520px); }
.sv-sub { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 10-12 · 담당·마감 칸을 꺼서(SHOW_OWNER_DUE) 칸 수가 둘~넷으로 갈린다 — 있는 칸이 폭을 나눠 채운다(옛 4칸 고정 · 900 아래 2칸) */
.sv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.sv-facts.sv-facts-gd { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }   /* 굿즈 상품 = 다섯 칸(길이 대신 가격·수량 + 바코드) */
.sv-facts-gd .sv-fact-v { white-space: normal; overflow-wrap: anywhere; }                  /* 가격·수량·바코드 번호는 잘리지 않고 줄을 바꾼다 */
.sv-fact { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; min-width: 0; text-align: left; color: var(--fg); font: inherit; }
button.sv-fact { cursor: pointer; }
button.sv-fact:hover { border-color: var(--accent); }
.sv-fact-l { font-size: 12px; color: var(--muted); }
.sv-fact-v { font-weight: 700; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-fact-v.none { color: var(--muted); font-weight: 500; }
.sv-fact.late .sv-fact-v { color: #e0457b; }
.sv-band { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sv-band .spacer { flex: 1; }
.sv-band-label { font-size: 12px; }
.sv-band .hero-line.legacy-line { gap: 6px; font-size: 12px; }
.sv-stepchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: var(--bg);
  border: 1px solid var(--line); color: var(--fg); cursor: pointer; }
.sv-stepchip b { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.sv-stepchip.now { border-color: var(--st-wip); }
.sv-stepchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sv-todo-box.tv-todo-box { margin: 2px 0 0; }

/* 태스크 카드 */
.sv-filter { display: inline-flex; align-items: center; gap: 5px; }
.sv-filter .ic { width: 14px; height: 14px; }
.sv-filter.on { border-color: var(--accent); color: var(--accent); }
.tv-tasks .task-fields-wrap { overflow-x: auto; }
/* 10-04 밤 · 모든 줄이 빈 날짜 칸은 좁게(shot_fit.js `FIT_EMPTY_W`) — 칸 안 입력은 칸 폭을 따른다(눌러 적을 수 있다) */
.task-fields td.sv-col-empty input { width: 100%; min-width: 0; box-sizing: border-box; }
.task-fields th.sv-col-empty { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-up-cell { text-align: right; padding-right: 6px; }
.sv-up-cell .upload-cta.big { padding: .3rem .8rem; font-size: 13px; border-radius: 8px; }

/* 버전 카드 — 표 + 고른 버전 크게 한 곳 */
/* ⭐ 10-04 밤 · 폭 줄이기(링고 「와이드하면 파악하기 힘들다」) — 칸은 내용 폭(1%·줄바꿈 없음) · 파일 칸만 남는 자리를 갖고 글이 길면 「…」 ·
   표 · 고른 버전 크게 둘 다 최대 폭(화면 끝까지 퍼지지 않게). 컷·에셋·타이틀 상세가 같은 표다. */
.sv-vtable { width: 100%; max-width: 1064px; }
.sv-vtable th, .sv-vtable td { width: 1%; white-space: nowrap; }
.sv-vtable td.sv-vfile, .sv-vtable th.sv-vfile-h { width: auto; }
.sv-vtable tbody tr { cursor: pointer; }
.sv-vtable tbody tr.current td, .sv-vtable tbody tr.picked td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sv-vtable tr.omitted td { opacity: .55; }
.sv-vfile { max-width: 0; min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-vreview { white-space: nowrap; }
.sv-omit { font-size: 12px; }
.sv-vbig { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; margin-top: 12px; align-items: start; max-width: 1064px; }   /* 표 오른쪽 끝과 같은 자리 */
.sv-vbig.hidden { display: none; }
@container tvleft (max-width: 640px) { .sv-vbig { grid-template-columns: minmax(0, 1fr); } }
.sv-viewer-slot { min-width: 0; }
.sv-viewer-slot #detail-viewer { border-radius: 10px; }
.sv-viewer-slot .player { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.sv-viewer-slot .hint { font-size: 11px; }
.sv-vside { display: flex; flex-direction: column; gap: 7px; font-size: 13px; min-width: 0; }
.sv-vrow { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.sv-vrow > :last-child { min-width: 0; text-align: right; }
.sv-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 130px; }
.sv-vchips { display: inline-flex; gap: 4px; align-items: center; }
.sv-vacts { display: flex; gap: 6px; justify-content: flex-end; }
.sv-vbtn { display: inline-flex; align-items: center; justify-content: flex-start; gap: 4px; text-decoration: none; color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; background: var(--bg); font-size: 13px; }
.sv-vbtn .ic { width: 15px; height: 15px; }
.sv-vbtn.off { opacity: .45; cursor: not-allowed; }
.sv-vbtn.on { border-color: var(--st-done); }
.sv-vempty { margin: 4px 0; display: flex; align-items: center; gap: 10px; }
.sv-docs .sv-docview { grid-template-columns: minmax(0, 1fr); }

/* 아래 카드 — 등장·연결은 머리에 수만(안 머리줄은 카드 머리가 한다) */
.tv-appears .appears-head { display: none; }
.tv-card[hidden] { display: none; }

/* 오른쪽 「리뷰·대화」 — 고른 버전 기준 · 올림은 얇은 회색 줄 */
.sv-talk-card { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.sv-talk-card > .tv-body { min-height: 0; overflow: auto; }
@container tdetail (max-width: 1100px) { .sv-talk-card > .tv-body { overflow: visible; } }
.sv-talk-scope.on { border-color: var(--accent); color: var(--accent); }
.sv-talk-slot .notes-panel { margin-top: 0; }
.sv-talk-slot .talk { margin-top: 0; border-top: 0; padding-top: 0; }
.sv-talk-slot .talk-h { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.sv-talk-slot .talk-row.talk-ver { background: none; padding: 2px 0; gap: 6px; font-size: 12px; color: var(--muted); }
.sv-talk-slot .talk-row.talk-ver > div { display: flex; gap: 6px; align-items: baseline; }
.sv-talk-slot .talk-row.talk-ver strong { font-weight: 500; color: var(--muted); }
.sv-talk-slot .talk-row.talk-ver .vthumb { width: 42px; height: 24px; object-fit: cover; border-radius: 4px; }
.sv-talk-slot .note-form:not(.talk-form) { display: flex; gap: 6px; }
.sv-talk-slot .note-form input[type="text"] { flex: 1; min-width: 0; }