/* ── 에셋 쇼룸 ─────────────────────────────────────────────── */
:root {
  --bg0: #0d1117;
  --bg1: #131a22;
  --bg2: #1a2330;
  --bg3: #223044;
  --line: #2c3a4e;
  --text: #dde5ee;
  --text-dim: #8ea0b5;
  --accent: #d9a441;
  --green: #3ec97e;
  --amber: #e0b74a;
  --red: #e05a5a;
  --blue: #4aa3e0;
  --sky: #6ab7e8;   /* 편집 사본(자식) 체크·강조 — 상위 선택(금색)과 구분 */
  font-size: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── 상단 헤더 ── */
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 0;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
/* 브랜드 영역을 사이드바 폭에 고정 → 카테고리 탭이 뷰어 세로선부터 시작 */
.brand { flex: 0 0 320px; padding-left: 14px; display: flex; align-items: center; gap: 9px; }
.brand-icon { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.brand h1 { font-size: 1.15rem; letter-spacing: .02em; white-space: nowrap; }
.brand .sub { font-size: .72rem; color: var(--text-dim); white-space: nowrap; }

/* 분류·툴 콤보박스 — 탭이 9개가 되며 헤더를 다 차지해 콤보로 바꿨다 */
#topbar-selects { display: flex; gap: 12px; align-items: center; }
.tb-sel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--text-dim);
  white-space: nowrap;
}
/* display:flex가 hidden 속성을 이겨서 하이트맵·픽셀 화면에서도 분류가 남아 있었다 */
.tb-sel[hidden] { display: none; }
.tb-sel #cat-add { margin-left: 4px; padding: 2px 8px; font-weight: 700; }
.tb-sel select {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .85rem;
  cursor: pointer;
  outline: none;
}
.tb-sel select:hover { border-color: var(--text-dim); }
.tb-sel select:focus { border-color: var(--accent); }
#category-select { border-color: var(--accent); color: var(--accent); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.counter { font-size: .75rem; color: var(--text-dim); white-space: nowrap; }
.counter b { color: var(--text); }
.counter .miss-warn { color: var(--red); }

/* ── 공용 버튼 ── */
.tool-btn {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .84rem;
  white-space: nowrap;
}
.tool-btn:hover:not(:disabled) { border-color: var(--text-dim); }
.tool-btn.active { border-color: var(--accent); color: var(--accent); }
/* 화면의 지형이 지금 설정과 다를 때. 눌러야 할 버튼이라는 걸 색으로 알린다. */
.tool-btn.needs { background: #16341f; border-color: #2f7d4a; color: #7fd39a; }
.tool-btn.needs:hover:not(:disabled) { border-color: #46a768; color: #9ee2b4; }
.tool-btn:disabled { opacity: .45; cursor: default; }
#btn-compare.over { color: var(--red); border-color: var(--red); }
.tool-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .84rem;
  color: var(--text-dim);
  background: var(--bg1);
}

/* ── 레이아웃 ── */
#layout { flex: 1 1 auto; display: flex; min-height: 0; }

/* ── 사이드바 ── */
#sidebar {
  width: 320px;
  flex: 0 0 320px;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-head { display: flex; gap: 8px; padding: 10px; }
#search {
  flex: 1;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 6px 10px;
  font-size: .85rem;
  outline: none;
}
#search:focus { border-color: var(--accent); }
.sidebar-actions { display: flex; gap: 8px; padding: 0 10px 8px; }
.sidebar-actions .tool-btn { flex: 1; }

/* 숫자키 카메라 가이드 — 뷰어 우측 상단 (파란 사각 + 큰 채움 화살표 위 숫자) */
#numpad-guide {
  position: absolute;
  top: 52px;
  right: 12px;
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 5px;
  z-index: 20;
  opacity: .9;
}
#numpad-guide:hover { opacity: 1; }
/* 중앙과 방향 버튼을 잇는 십자 연결선(버튼 뒤) */
#numpad-guide::before,
#numpad-guide::after {
  content: '';
  position: absolute;
  background: var(--line);
  z-index: 0;
}
#numpad-guide::before { left: 50%; top: 10px; bottom: 10px; width: 2px; transform: translateX(-50%); }
#numpad-guide::after { top: 50%; left: 10px; right: 10px; height: 2px; transform: translateY(-50%); }
#numpad-guide .np {
  border: 1px solid var(--line);
  background: rgba(24, 28, 34, .92);
  color: var(--text);
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background .08s, border-color .08s;
}
#numpad-guide .np:hover { border-color: var(--accent); color: var(--accent); }
#numpad-guide .np-8 { grid-area: 1 / 2; }
#numpad-guide .np-4 { grid-area: 2 / 1; }
#numpad-guide .np-5 { grid-area: 2 / 2; border-color: var(--accent); color: var(--accent); }
#numpad-guide .np-6 { grid-area: 2 / 3; }
#numpad-guide .np-2 { grid-area: 3 / 2; }
/* 큰 채움 화살표(밝은 파랑) — 숫자 글자 아래 깔린다 */
#numpad-guide .np:not(.np-5) i {
  position: absolute;
  inset: 4px;
  background: rgba(217, 164, 65, .30); /* 액센트(골드) 반투명 채움 */
  clip-path: polygon(50% 0, 100% 46%, 74% 46%, 74% 100%, 26% 100%, 26% 46%, 0 46%);
  pointer-events: none;
  transition: background .08s;
}
#numpad-guide .np-6 i { transform: rotate(90deg); }
#numpad-guide .np-2 i { transform: rotate(180deg); }
#numpad-guide .np-4 i { transform: rotate(270deg); }
#numpad-guide .np b {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* 눌림 효과 — 클릭·키 입력 공용 */
#numpad-guide .np:active,
#numpad-guide .np.pressed {
  background: #2a2416;           /* 활성 태그 칩과 동일 톤 */
  border-color: var(--accent);
  color: var(--accent);
}
#numpad-guide .np:active i,
#numpad-guide .np.pressed i { background: rgba(217, 164, 65, .7); }

/* 백그라운드 잡 진행 표시 — 뷰어 상단 중앙, 비차단 */
#job-progress {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  max-width: 60%;
  background: rgba(18, 21, 26, .92);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  z-index: 35; /* 클릭이 캔버스로 통과하지 않게 — 밑의 마커를 잡아 던지는 사고 방지 */
}
#job-progress-text { font-size: .82rem; margin-bottom: 7px; color: var(--text); white-space: pre-line; }
#job-progress.done { border-color: var(--green); }
#job-progress.err { border-color: var(--red); }

/* 동영상/음원 재생기 */
#media-player {
  position: absolute;
  inset: 0; /* 카메라 툴바·가장자리까지 전부 덮는다 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22; /* 툴바(5)·숫자키 가이드(20)보다 위 */
  background: var(--bg0);
}
#media-player[hidden] { display: none; } /* display:flex가 hidden 기본값을 덮어쓰지 않게 */
#media-player.audio { flex-direction: column; gap: 16px; justify-content: flex-start; padding: 56px 0 200px; overflow-y: auto; }
/* 음원 편집 */
#audio-edit { width: min(84%, 960px); display: flex; flex-direction: column; gap: 8px; }
#audio-edit[hidden] { display: none; }
.ae-head, .ae-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; }
.ae-title { font-weight: 700; }
#ae-wave {
  width: 100%; height: 200px; display: block; touch-action: none;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(19,26,34,.6); cursor: crosshair;
}
.ae-row input[type=number] { width: 76px; background: var(--bg0); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 6px; }
/* 재생 설정(자동·순차) — 뷰어 좌상단. 켜진 버튼은 다른 툴 버튼과 같은 강조색 */
#media-tools { position: absolute; top: 12px; left: 10px; display: flex; gap: 6px; z-index: 2; }
#media-video { max-width: 100%; max-height: 100%; outline: none; border-radius: 8px; }
#media-video[hidden], #media-audio[hidden], #eq-canvas[hidden] { display: none; }
#media-audio { width: min(70%, 560px); }
#eq-canvas {
  width: min(70%, 560px);
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(19, 26, 34, .6);
}

/* 웨이트 뷰 라벨 */
/* 점 찍기 안내 — 뷰어 위 왼쪽에 단계 목록으로. 현재 단계는 노랑, 찍은 단계는 ✔ */
#pick-guide {
  position: absolute;
  top: 52px;
  left: 14px;
  width: 340px;
  background: rgba(18, 21, 26, .94);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: .8rem;
  color: var(--text);
  z-index: 26;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
#pick-guide .pg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#pick-guide .pg-head b { color: var(--amber); font-size: .9rem; }
#pick-guide .pg-head span { color: var(--muted); flex: 1; }
#pick-guide ol { margin: 0; padding-left: 22px; }
#pick-guide li { padding: 3px 0; color: var(--muted); }
#pick-guide li.cur { color: var(--amber); font-weight: 600; }
#pick-guide li.done { color: var(--green); text-decoration: line-through; opacity: .8; }
#pick-guide #pg-note { margin-top: 6px; color: var(--muted); font-size: .74rem; }
#pick-guide #pg-note.warn { color: var(--red); }
#pick-guide #pg-nav { display: flex; gap: 8px; margin-top: 8px; }
#pick-guide #pg-nav[hidden] { display: none; }
#pick-guide #pg-nav #pg-next { flex: 1; border-color: var(--amber); color: var(--amber); font-weight: 700; }
#pick-guide #pg-adjust { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#pick-guide #pg-adjust[hidden] { display: none; }
#pick-guide #pg-adjust label { display: flex; align-items: center; gap: 5px; flex: 1; color: var(--text); }
#pick-guide #pg-adjust .pg-hint { flex: 1; color: var(--muted); font-size: .74rem; }
#pick-guide #pg-adjust .pg-hint b { color: var(--amber); }
#pick-guide #pg-ok { border-color: var(--amber); color: var(--amber); font-weight: 700; }
#proj-opts { flex-wrap: wrap; row-gap: 4px; max-width: 760px; }
#proj-opts label.tool-btn { cursor: pointer; }
#proj-opts #proj-bake { border-color: var(--amber); color: var(--amber); font-weight: 700; }
#proj-opts .muted { color: var(--muted); font-size: .72rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 마커 위 본 이름 — 어느 모드든 위 가운데. 웨이트 라벨이 떠 있으면 그 아래로 */
#bone-hover {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 21, 26, .9);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  z-index: 25;
  pointer-events: none;
}
#bone-hover small { font-weight: 400; color: var(--muted); margin-left: 6px; }
/* 화면 캡처 */
#cap-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 14, .82); display: flex; align-items: center; justify-content: center; }
#cap-overlay[hidden] { display: none; }
#cap-panel { width: min(96vw, 1500px); height: min(94vh, 980px); display: flex; flex-direction: column; background: var(--bg2, #14171c); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow: hidden; }
#cap-panel .cap-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .82rem; }
#cap-panel .cap-head b { color: var(--amber); }
#cap-panel .cap-head label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
#cap-panel .cap-head select { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: .78rem; }
#cap-stage { position: relative; flex: 1; min-height: 0; background: #0b0d11; overflow: hidden; display: flex; align-items: center; justify-content: center; user-select: none; }
#cap-video { max-width: 100%; max-height: 100%; display: block; background: #000; }
#cap-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 520px; text-align: center; color: var(--muted); font-size: .84rem; line-height: 1.5; padding: 14px 18px; background: rgba(18, 21, 26, .85); border: 1px solid var(--line); border-radius: 10px; pointer-events: none; }
#cap-hint[hidden] { display: none; }
#cap-rect { position: absolute; border: 2px solid var(--amber); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); box-sizing: border-box; cursor: move; }
#cap-rect[hidden] { display: none; }
#cap-rect.rec { border-color: #ff4d4d; }
#cap-rect .cap-handle { position: absolute; width: 12px; height: 12px; background: var(--amber); border: 1px solid #000; border-radius: 2px; }
#cap-rect .cap-handle[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
#cap-rect .cap-handle[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
#cap-rect .cap-handle[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
#cap-rect .cap-handle[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
#cap-rect.fixed .cap-handle { display: none; }
#cap-rect-label { position: absolute; left: 0; top: -22px; font-size: .74rem; color: var(--amber); background: rgba(18, 21, 26, .85); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
#cap-rect-bar { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: rgba(18, 21, 26, .92); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; white-space: nowrap; cursor: default; }
#cap-rect-bar #cap-rec { border-color: #ff4d4d; color: #ff7b7b; font-weight: 700; }
#cap-rect-bar #cap-timer { font-size: .78rem; color: var(--muted); min-width: 60px; }
#cap-rect-bar #cap-timer.on { color: #ff7b7b; font-weight: 700; }
#tex-loupe { position: fixed; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#tex-loupe[hidden] { display: none; }
#tex-loupe canvas { width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--amber); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); image-rendering: pixelated; background: #222; }
#tex-loupe .c { display: flex; align-items: center; gap: 6px; background: rgba(18, 21, 26, .92); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: .74rem; color: var(--text); }
#tex-loupe .c i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #fff4; display: inline-block; }
#prop-dd { position: fixed; z-index: 60; display: flex; gap: 8px; align-items: flex-end; }
#prop-dd[hidden] { display: none; }
#prop-dd-list { background: rgba(18, 21, 26, .97); border: 1px solid var(--line); border-radius: 8px; padding: 4px; max-height: 50vh; min-width: 260px; overflow-y: auto; }
#prop-dd-list .it { padding: 5px 10px; font-size: .8rem; border-radius: 5px; cursor: pointer; white-space: nowrap; }
#prop-dd-list .it:hover, #prop-dd-list .it.hover { background: rgba(255, 217, 59, .18); }
#prop-dd-list .it.cur { color: var(--amber); font-weight: 600; }
#prop-dd-preview { background: rgba(18, 21, 26, .97); border: 1px solid var(--line); border-radius: 8px; padding: 6px; width: 220px; }
#prop-dd-preview img { width: 208px; height: 208px; object-fit: contain; background: #2a2f38; border-radius: 6px; display: block; }
#prop-dd-preview .n { font-size: .74rem; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#prop-dd-preview[hidden] { display: none; }
#weight-label:not([hidden]) ~ #bone-hover { top: 86px; }
#weight-label {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18, 21, 26, .85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .8rem;
  color: var(--amber);
  z-index: 25; /* 클릭 통과 금지 — 밑의 본 마커 오조작 방지 */
}

/* 회전 링 드래그 중 각도 표시 — 기즈모 근처에 따라다닌다 */
#xform-angle {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(18, 21, 26, .9);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  pointer-events: none;
  z-index: 26;
}
#xform-angle .xa-free { color: var(--muted); font-size: .72rem; margin-left: 6px; }

/* 편집 도구 독 — 뷰어 좌하단. 상단 툴바에 흩어져 있으면 '뭘 고치는지'와 '결과가 어디
   나오는지'가 따로 놀아, 모델을 보는 자리 옆에 모아 둔다. 아래쪽 정보 패널 높이만큼은
   JS가 띄워 준다(패널 높이가 내용마다 달라진다). */
#edit-dock {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 24px);
  /* 독 자체는 클릭을 안 받는다 — 줄마다 폭이 달라 짧은 줄 오른쪽의 빈 자리까지 독이 덮어 마커·붓 클릭이 막혔다.
     버튼 그룹만 다시 받는다 */
  pointer-events: none;
}
#edit-dock .vt-group {
  pointer-events: auto;
  background: rgba(13, 17, 23, .9);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  flex-wrap: wrap;
}
/* 저장 버튼은 그 그룹 안에서 눈에 띄어야 한다 — 다른 버튼과 색으로 갈라 놓는다 */
#edit-dock .tool-btn[id$="save"] { border-color: var(--amber); color: var(--amber); }
#edit-dock .tool-btn[id$="save"]:hover { background: rgba(48, 38, 16, .92); }
/* 편집 도구 설명 말풍선 — 호버한 도구 위에 바로 뜬다 */
#dock-tip {
  position: fixed;
  z-index: 40;
  max-width: 360px;
  padding: 7px 10px;
  background: rgba(13, 17, 23, .96);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--text-dim);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
#dock-tip[hidden] { display: none; }
#dock-tip b { color: var(--amber); font-size: .78rem; }

/* display:flex가 [hidden]의 기본값을 덮어써서, 숨긴 패널이 계속 자리를 차지했다
   (뷰어 캔버스가 100px로 찌그러지던 원인) — 화면 전환 대상은 명시적으로 지운다 */
#sidebar[hidden], #stage[hidden], #hm-side[hidden], #hm-stage[hidden] { display: none; }

/* ── 하이트맵 생성기 작업 화면 (좌측 설정·목록 + 우측 큰 미리보기) ── */
#hm-side {
  width: 320px;
  flex: 0 0 320px;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.hm-sec { padding: 10px; border-bottom: 1px solid var(--line); }
.hm-sec-head {
  font-size: .78rem;
  color: var(--accent);
  padding: 9px 10px 6px;
  font-weight: 600;
}
.hm-sec .hm-sec-head { padding: 0 0 8px; }
.hm-field { display: flex; flex-direction: column; gap: 5px; font-size: .75rem; color: var(--text-dim); margin-bottom: 9px; }
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.hm-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; color: var(--text-dim); }
#hm-side input, #hm-side select {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  padding: 5px 8px;
  font-size: .8rem;
  outline: none;
  width: 100%;
}
#hm-side input:focus, #hm-side select:focus { border-color: var(--accent); }
.hm-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-radios label, .hm-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: var(--text);
  cursor: pointer;
}
#hm-side .hm-radios input, #hm-side .hm-check input {
  width: auto;                /* #hm-side input의 width:100%를 이겨야 한다(id 선택자라 명시도가 높다) */
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.hm-radios label, .hm-check { white-space: nowrap; }
/* 시드 입력 + 무작위 버튼 한 줄 */
.hm-seed-row { display: flex; gap: 5px; align-items: stretch; }
#hm-side .hm-seed-row input { flex: 1 1 auto; min-width: 0; }
#btn-hm-roll { flex: 0 0 auto; padding: 4px 8px; font-size: .9rem; line-height: 1; }
.hm-hint { font-size: .71rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 9px; }
.hm-actions { display: flex; gap: 8px; }
/* 미리보기·생성 줄은 위 목록과 붙어 있으면 목록의 일부처럼 보인다 */
.hm-actions-main { margin-top: 14px; }
.hm-actions .tool-btn { flex: 1; }
#hm-result { font-size: .74rem; color: var(--text-dim); min-height: 1.1em; margin-top: 8px; line-height: 1.5; }
#hm-result.err { color: var(--red); }
#hm-result.ok { color: var(--green); }

/* 지형 요소(스탬프) 목록 */
.hm-sec-head.hm-sub { padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 10px; }
#hm-stamp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hm-stamp {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 7px;
  background: var(--bg2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hm-stamp.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hm-strow { display: flex; align-items: center; gap: 6px; }
.hm-strow label { display: flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--text-dim); flex: 1; }
#hm-side .hm-strow input { width: 100%; padding: 3px 6px; font-size: .75rem; }
#hm-side .hm-strow select { padding: 3px 6px; font-size: .75rem; width: auto; flex: 1; }
.hm-num {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1b6f92;
  color: #fff;
  font-size: .68rem;
  display: flex; align-items: center; justify-content: center;
}
.hm-kind { font-size: .68rem; color: var(--text-dim); flex: 0 0 auto; }
.st-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .85rem; padding: 0 3px; }
.st-del:hover { color: var(--red); }
/* 그리기 안내 — 하이트맵 바로 아래에 붙여 눈에 들어오게 */
#hm-2d-body { position: relative; }
#hm-draw-hint {
  /* 그림 '아래'에 띄운다. 예전엔 bottom:0으로 하이트맵 하단에 겹쳤는데,
     하필 거기를 클릭해 점을 놓을 수가 없었다. top:100%로 내리면 그림을 안 가리고,
     띄워 두었으니 배치도 안 밀린다. 안내문일 뿐이라 클릭은 그대로 통과시킨다. */
  /* 도구줄 안에 인라인으로 — 그림도 아래 패널도 건드리지 않는다 */
  min-width: 0;
  pointer-events: none;
  padding: 4px 9px;
  font-size: .72rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1a1206;
  background: var(--accent);
  border-radius: 7px;
}
#hm-draw-hint[hidden] { display: none; }
/* 커브 편집기 — 마디를 위아래로 끌어 모양을 잡는다 */
.hm-curves { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.hm-cv { display: flex; flex-direction: column; gap: 3px; }
.hm-cv span { font-size: .68rem; color: var(--text-dim); }
.hm-cv canvas {
  width: 100%;
  height: 70px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg0);
  cursor: ns-resize;
  touch-action: none;
}

/* 생성된 하이트맵 카드 목록 */
#hm-list { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.hm-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
  cursor: pointer;
}
.hm-card:hover { border-color: var(--text-dim); }
.hm-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hm-card img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg0);
  image-rendering: pixelated;
}
.hm-card .n { font-size: .77rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-card .m { font-size: .69rem; color: var(--text-dim); }
.hm-empty { color: var(--text-dim); font-size: .76rem; text-align: center; padding: 16px 0; }

/* 우측: 큰 미리보기 */
#hm-stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; background: var(--bg0); }
/* 3D 지형이 뷰어 전체를 채우고, 하이트맵은 그 위에 겹쳐 뜬다 */
#hm-view {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
#hm-3d { width: 100%; height: 100%; display: block; background: var(--bg1); }
/* 3D 위에 겹치는 하이트맵 패널 — 좌상단 버튼으로 접기 */
#hm-2d-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.hm-panel-head { display: flex; align-items: center; gap: 6px; }
.hm-zoomlbl {
  background: rgba(18, 21, 26, .9);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: .74rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hm-szbtn {
  background: rgba(18, 21, 26, .9);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  padding: 4px 8px;
  font-size: .74rem;
  cursor: pointer;
}
.hm-szbtn:hover { border-color: var(--text-dim); }
.hm-szbtn.active { border-color: var(--accent); color: var(--accent); }
#btn-hm-fold {
  background: rgba(18, 21, 26, .9);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 5px 11px;
  font-size: .78rem;
  cursor: pointer;
  white-space: nowrap;
}
#btn-hm-fold:hover { border-color: var(--text-dim); }
#hm-2d-body[hidden] { display: none; }
#hm-preview, #hm-big {
  width: 300px;
  height: 300px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg1);
  image-rendering: pixelated;   /* 하이트맵은 픽셀이 값이라 보간하면 오해를 부른다 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  display: block;
}
/* display 지정이 [hidden] 기본값을 덮어쓴다 — 안 적어주면 숨긴 쪽이 빈 상자로 남는다
   (미리보기 캔버스와 저장본 이미지가 둘 다 보이던 원인) */
#hm-preview[hidden], #hm-big[hidden] { display: none; }
/* 페인트 브러시 패널 — 뷰어 좌하단 */
/* 아래쪽 도구 — 브러시와 지형 색상을 한 판에 담고, 각각 접었다 편다 */
#hm-tools {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: stretch;          /* 두 칸의 높이를 맞춘다 */
  background: rgba(18, 21, 26, .92);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.hm-tool { display: flex; flex-direction: column; padding: 8px 10px 9px; }
.hm-tool + .hm-tool { border-left: 1px solid var(--line); }
#hm-color-panel { width: 268px; }
.hm-tool-head {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: .84rem;
  padding: 4px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.hm-tool-head:hover { color: var(--text); border-color: var(--line); }
.hm-tool-head.active { color: var(--accent); border-color: var(--accent); }
/* 색상 칸 안쪽 — 사이드바가 아니라 도구 판 톤에 맞춘다 */
#hm-color-panel select {
  width: 100%;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 7px;
  font-size: .78rem;
  outline: none;
}
#hm-color-panel .hm-field { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--text-dim); }
#hm-color-panel .hm-blendrow { display: flex; align-items: center; gap: 6px; margin: 7px 0 3px; font-size: .72rem; color: var(--text-dim); }
#hm-color-panel .hm-blendrow > span:first-child { flex: 0 0 auto; white-space: nowrap; }
#hm-color-panel .hm-blendrow input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; accent-color: var(--accent); }
#hm-color-panel .hm-hint { margin-top: 5px; }
/* 브러시 머리 버튼은 .hm-tool-head 규칙을 그대로 쓴다 */
#hm-brush-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 218px;
}
#hm-brush-opts[hidden] { display: none; }
#hm-brush-opts label { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-dim); }
#hm-brush-opts input, #hm-brush-opts select {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 3px 7px;
  font-size: .76rem;
  width: 82px;
  outline: none;
}
#hm-brush-opts .tool-btn { padding: 4px 8px; font-size: .72rem; }

#hm-3d-note {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  font-size: .72rem;
  color: var(--text-dim);
  background: rgba(18, 21, 26, .8);
  border-radius: 7px;
  padding: 3px 9px;
}
#hm-info {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--bg1);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#hm-info-name { font-size: .95rem; font-weight: 600; }
#hm-info-tip { font-size: .74rem; color: var(--accent); }
.hm-info-actions { display: flex; gap: 8px; margin-top: 4px; }

/* 선택 작업 메뉴 */
#retarget-box { position: relative; }
#btn-actions { width: 100%; }
#action-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  z-index: 40;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.am-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 10px;
  border-radius: 7px;
  font-size: .84rem;
  cursor: pointer;
}
.am-item:hover { background: var(--bg2); }
.am-item:disabled { opacity: .4; cursor: default; }
.am-item.danger { color: var(--red); }
.am-label { color: var(--text-dim); font-size: .72rem; padding: 6px 10px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
#am-move { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#am-move .tool-btn { font-size: .74rem; padding: 3px 8px; }

/* 카드 다중 선택(Shift/Ctrl) — 최초 선택(뷰어 선택)과 동일한 외곽선 */
/* 선택(체크)은 테두리만 — 보고 있는 카드(.selected)의 굵은 외곽선과 구분된다 */
.asset-card.multisel { border-color: var(--accent); }
/* 현재 뷰어에서 보고 있는 카드: 썸네일 좌상단 눈 아이콘 */
.thumb-wrap .eye-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: .78rem;
  line-height: 1;
  background: rgba(13, 17, 23, .75);
  border-radius: 5px;
  padding: 1px 3px;
  pointer-events: none;
}

/* 드래그&드롭 하이라이트 */
aside.drop-hover { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* 태그 필터 바 — 5줄 초과 시 JS(renderTagBar)가 고정 높이+스크롤을 건다
   (auto 높이에 max-height+overflow만 걸면 높이 0 붕괴 — 콘택트시트 셀과 동일 버그) */
/* 유무 필터 바로 위에 놓인다 — #sidebar-bottom이 이미 좌우 여백을 주므로 자체 여백은 없음.
   태그가 많아도 목록 영역을 잠식하지 않게 높이를 제한하고 넘치면 스크롤 */
#tag-bar { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; max-height: 84px; overflow-y: auto; }
#tag-bar:empty { display: none; }
.tag-chip {
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text-dim);
  cursor: pointer;
  font-style: italic;
}
.tag-chip:hover { border-color: var(--text-dim); }
.tag-chip.active { border-color: var(--accent); color: var(--accent); background: #2a2416; }

#asset-list { flex: 1; overflow-y: auto; padding: 0 10px 10px; user-select: none; } /* 드래그 연속 선택 시 텍스트 선택 방지 */

/* 사이드바 하단: 일괄 태그 + 유무 체크리스트 */
#sidebar-bottom {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg1);
}
#retarget-box { display: flex; flex-direction: column; gap: 6px; }
.rt-watch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--text-dim);
  cursor: pointer;
}
.rt-watch input { accent-color: var(--accent); }
.rt-src { font-size: .7rem; color: var(--text-dim); line-height: 1.4; }
.rt-src b { color: var(--accent); }
/* 애니메이션 이식 선택 리스트(다이얼로그) */
#rtp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 380px;          /* 고정 — 검색으로 줄이 줄어도 창 크기가 흔들리지 않게 */
  overflow-y: auto;
  align-content: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--bg0);
}
.rt-src-row,
.dialog label.rt-src-row {
  display: flex;
  flex-direction: row;      /* .dialog label의 세로 배치 무시 */
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--text);
  cursor: pointer;
}
.dialog label.rt-watch { flex-direction: row; align-items: center; justify-content: flex-start; }
.rt-src-row input { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; flex: 0 0 auto; }
.rt-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 태그는 오른쪽 끝에 붙인다 — 이름만으론 어떤 동작인지 알기 어렵다 */
.rt-src-tags { margin-left: auto; display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.rt-src-tags .badge.tag { font-size: .66rem; padding: 1px 6px; white-space: nowrap; }
.rt-src-row .star { color: var(--accent); }
.rt-src-hint { font-size: .7rem; color: var(--text-dim); }
.tool-btn.danger:not(:disabled) { border-color: #6b3030; color: var(--red); }
.tool-btn.danger:not(:disabled):hover { border-color: var(--red); }

/* 툴 생성 에셋 표시(N 배지) */
.thumb-wrap { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.gen-badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: var(--accent);
  color: #1a1408;
  font-size: .6rem;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 5px;
  pointer-events: none;
}
#rt-result { font-size: .74rem; min-height: 0; white-space: pre-line; }
#rt-result.ok { color: var(--green); }
#rt-result.err { color: var(--red); }
.badge.star { background: #33280f; color: var(--accent); border: 1px dashed #55431c; cursor: pointer; }
.badge.star.on { border-style: solid; background: var(--accent); color: #1a1408; }

#checklist .cl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .72rem;
  color: var(--text-dim);
  margin-bottom: 5px;
}
#cl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cl-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
#cl-items label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--text-dim);
}
#cl-items label.on { color: var(--green); }
#cl-items input { accent-color: var(--green); width: 13px; height: 13px; cursor: pointer; }
#bt-result { font-size: .78rem; min-height: 1.2em; }
#bt-result.ok { color: var(--green); }
#bt-result.err { color: var(--red); }

/* 다이얼로그류는 배경을 어둡게 하지 않는다(뒤 화면 조작 가능) — 사용자 지정 규칙 */
#tags-overlay, #rtpick-overlay, #import-overlay, #settings-overlay { background: transparent; pointer-events: none; }
/* 이식 창은 두 단 — 왼쪽 목록·옵션, 오른쪽 미리보기 */
#rtpick-overlay .dialog { width: min(1160px, 96vw); flex-direction: row; gap: 18px; align-items: stretch; }
#rtp-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
#rtp-right { flex: 0 0 510px; display: flex; flex-direction: column; gap: 8px; }
#rtp-preview {
  width: 100%; aspect-ratio: 1 / 1; display: block;
  background: var(--bg0); border: 1px solid var(--line); border-radius: 10px;
}
#rtp-prev-name { font-weight: 600; color: var(--text); min-height: 1.2em; }
#rtp-prev-meta { min-height: 1.2em; white-space: pre-line; }
#tags-overlay .dialog, #rtpick-overlay .dialog, #import-overlay .dialog, #settings-overlay .dialog {
  pointer-events: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.7);
  border-color: var(--text-dim);
  background: var(--bg1);
}
#tags-overlay select {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: .85rem;
}
#bt-existing { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; max-height: 90px; overflow-y: auto; }
#bt-existing .tag-chip { font-size: .72rem; }

.asset-card {
  display: grid;
  grid-template-columns: 56px 1fr 20px;
  gap: 10px;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  margin-bottom: 8px;
  cursor: pointer;
}
/* 마우스 오버는 원본·사본 모두 회색 — 선택(금색)·사본(하늘색)과 구분된다.
   이미 선택·보는 중인 카드는 자기 색을 지킨다 */
.asset-card:hover:not(.selected):not(.multisel):not(.childsel) { border-color: var(--text-dim); }
.asset-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.asset-card.missing { opacity: .55; }
.thumb {
  width: 56px; height: 56px;
  border-radius: 6px;
  background: var(--bg3);
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: var(--text-dim);
  overflow: hidden;
}
.asset-card .meta { min-width: 0; }
.asset-card .name {
  font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badges { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.badge {
  font-size: .64rem;
  padding: 1px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.badge.st-채택 { background: #143a26; color: var(--green); }
.badge.st-후보 { background: #3a3014; color: var(--amber); }
.badge.st-예약 { background: #33280f; color: var(--accent); border-color: #55431c; }
.badge.st-반려 { background: #3a1717; color: var(--red); }
.badge.st-교체 { background: #3a1717; color: #e08080; }
.badge.tag { background: var(--bg3); color: var(--text-dim); font-style: italic; }
.badge.miss { background: var(--red); color: #fff; }
.asset-card .src {
  font-size: .68rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-card input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
/* 편집 사본(자식) — 부모 밑에 들여쓰기 + 왼쪽에 트리 노드(└) */
.asset-card.child {
  position: relative;
  margin-left: 22px;
  /* 배경은 카드 기본(--bg2 #1a2330)에서 RGB 각 +15 */
  background: #29323f;
}
/* 부모 카드에서 내려오는 세로줄 — 카드 위쪽 여백(8px)까지 이어 붙는다 */
.asset-card.child::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -9px;
  width: 2px;
  height: calc(50% + 9px);
  background: #3d5a6e;
}
/* 세로줄에서 카드로 꺾이는 가로줄 */
.asset-card.child::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #3d5a6e;
}
/* 마지막 자식이 아니면 세로줄을 카드 아래까지 이어 다음 자식과 연결 */
.asset-card.child.has-next::before { height: calc(100% + 17px); }
.asset-card.child .name { font-size: .82rem; }
.asset-card.child.childsel { border-color: var(--sky); }   /* 체크 = 얇은 외곽선 */
/* 보고 있는 사본은 금색이 아니라 하늘색 테두리 — 원본과 구분된다.
   체크(.childsel)보다 뒤에 선언해 굵은 외곽선이 이긴다 */
.asset-card.child.selected { border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky); }
/* 자식 체크박스는 하늘색 — 상위 체크와 한눈에 구분된다 */
.asset-card input.child-cb { accent-color: var(--sky); }
.badge.edit { background: #16323f; color: #8fd0f0; border-color: #2f4a5c; }
#btn-child-actions.child-actions { border-color: #2f4a5c; color: #8fd0f0; }
#btn-child-actions.child-actions:hover { border-color: var(--sky, #6ab7e8); }
#child-menu {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  min-width: 200px;
  background: var(--bg1);
  border: 1px solid #2f4a5c;
  border-radius: 10px;
  padding: 5px;
  z-index: 120;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

.list-empty { color: var(--text-dim); text-align: center; padding: 30px 0; font-size: .85rem; }

/* ── 뷰포트 ── */
#stage { flex: 1; position: relative; min-width: 0; background: #3d4450; }
#view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#viewer-toolbar {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 5;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.vt-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(19,26,34,.85);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 10px 4px 8px;
  backdrop-filter: blur(4px);
}
.vt-label { font-size: .68rem; color: var(--text-dim); margin-right: 2px; white-space: nowrap; }
/* 툴바 안 숫자 입력(웨이트 붓 반경·세기) — 버튼 높이에 맞춰 납작하게 */
.vt-num { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; color: var(--text-dim); }
.vt-num[hidden] { display: none; }
.vt-num label { display: inline-flex; align-items: center; gap: 4px; cursor: ew-resize; }
.vt-num i { font-style: normal; opacity: .7; }
/* 양끝 슬라이더 하나 — 브라우저에 두 손잡이 range가 없어서, 같은 트랙 위에 range 둘을
   겹쳐 놓고 트랙은 지우고 손잡이만 살린다. 입력은 pointer-events:none로 빼고
   손잡이에만 auto를 줘서, 아래 깔린 쪽 손잡이도 잡힌다. */
.dual { position: relative; display: inline-block; width: 118px; height: 18px; vertical-align: middle; }
.dual-track { position: absolute; left: 0; right: 0; top: 8px; height: 3px;
  background: var(--line); border-radius: 2px; }
.dual-fill { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.vt-num .dual input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: none; border: 0; pointer-events: none;
}
.vt-num .dual input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--bg1); cursor: ew-resize;
}
.vt-num .dual input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--bg1); cursor: ew-resize;
}
.vt-num .dual input[type=range]::-moz-range-track { background: none; border: 0; }
.vt-num input[type=range] { width: 66px; }
.vt-num input { width: 54px; padding: 3px 5px; font-size: .7rem; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 6px; color: var(--text); cursor: ew-resize; }
#viewer-toolbar .tool-btn { background: var(--bg2); }
#view-mode { cursor: pointer; outline: none; }
#view-mode option { background: var(--bg1); color: var(--text); }

/* ── 조명 패널 ── */
#light-panel {
  position: absolute;
  top: 52px; left: 10px;
  z-index: 6;
  background: rgba(19,26,34,.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(6px);
  width: 220px;
}
#light-panel[hidden] { display: none; }
.lp-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--text-dim); }
.lp-row input[type=range] { flex: 1; accent-color: var(--accent); }
.lp-row input[type=color] {
  width: 40px; height: 24px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg0); cursor: pointer;
}
#light-gyro {
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 35%, #2a3648, var(--bg0));
  position: relative;
  cursor: crosshair;
  touch-action: none;
  flex: 0 0 auto;
}
#light-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lp-hint { font-size: .68rem; color: var(--text-dim); line-height: 1.5; }

/* ── 뷰어 로딩 표시 ── */
#viewer-loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(13,17,23,.35);
  pointer-events: none;
}
#viewer-loading[hidden] { display: none; }
#viewer-loading .progress { width: min(320px, 60%); }
#viewer-loading-text { font-size: .8rem; color: var(--text); text-shadow: 0 1px 4px #000; }

/* 뷰어 좌상단 에셋 요약 */
#viewer-info {
  position: absolute;
  top: 56px;
  left: 10px;
  z-index: 4;
  background: rgba(13,17,23,.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 12px;
  max-width: 320px;
  backdrop-filter: blur(4px);
}
#viewer-info .ci-name { font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#viewer-info .ci-meta { font-size: .7rem; color: var(--text-dim); margin-top: 2px; }

/* 이식 다이얼로그 정면 축 선택 */
.rtp-facing, .rtp-clips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* .dialog label이 세로 배치(column)이고 명시도가 같아 뒤에 오는 그쪽이 이겼다 —
   글자가 라디오 아래로 내려가던 원인. .dialog를 앞에 붙여 명시도를 올린다 */
.dialog .rtp-facing label, .dialog .rtp-clips label {
  display: flex;
  flex-direction: row;      /* 라디오 오른쪽에 글자 */
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.rtp-facing input, .rtp-clips input { accent-color: var(--accent); flex: 0 0 auto; }

/* Blender 창 옵션 — 실행 버튼 아래, 흐리게. 상시 기능이 아니라는 걸 배치로 알린다 */
.rtp-advanced {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: .7;
}
.rtp-advanced:hover { opacity: 1; }
.rtp-advanced .rt-watch { font-size: .76rem; }

/* ── 정보 패널 ── */
#info-panel {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 23; /* 미디어 플레이어(22)가 뷰어 전체를 덮어도 정보 패널(경로·이름 변경·태그)은 위에 남는다 */
  background: rgba(13,17,23,.88);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
}
.info-name { font-size: 1rem; font-weight: 700; }
.info-desc { font-size: .78rem; color: var(--text-dim); margin: 3px 0 8px; }
.info-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.info-chips .badge { font-size: .68rem; }
.chip-meta { background: var(--bg2); color: var(--text-dim); border: 1px solid var(--line); font-style: italic; }
.anim-row { display: flex; gap: 6px; flex-wrap: wrap; }
.anim-row:empty { display: none; }
.anim-btn.anim-del { border-color: rgba(220, 90, 90, .5); color: var(--text-dim); margin-left: auto; }
/* 이름 변경·클립 제거는 한 묶음(.anim-tail)으로 줄의 오른쪽 끝에 — 묶음이 통째로 밀리므로 따로 줄바꿈되지 않는다 */
.anim-tail { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.anim-tail .anim-btn.anim-del { margin-left: 0; }
.anim-btn.anim-del:hover { color: #fff; background: rgba(220, 90, 90, .35); }
.anim-row[hidden] { display: none; }
/* 시뮬레이션 중에는 하단 패널을 흐리게·비활성화 */
#px-view #info-panel.px-mode.sim-dim { opacity: .35; pointer-events: none; }

/* 재생 컨트롤 — 정보 패널 위에 떠 있는 콤팩트 바 */
#playback {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92%);
  display: flex;
  flex-wrap: wrap;             /* 시트 격자 줄은 둘째 줄로 내려간다 */
  align-items: center;
  gap: 10px;
  background: rgba(13,17,23,.88);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
}
#playback[hidden] { display: none; }
.pb-div { width: 1px; height: 18px; background: var(--line); flex: 0 0 auto; }
#pb-speed-reset { padding: 3px 8px; font-size: .72rem; }
#pb-time { flex: 1; accent-color: var(--accent); min-width: 120px; }
#pb-clock { font-size: .74rem; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.pb-speed input { width: 110px; accent-color: var(--accent); }
#pb-speed-val { min-width: 34px; color: var(--text); font-variant-numeric: tabular-nums; }

/* 에셋별 유무 표시(정보 패널) — 유무 필터의 데이터 */
#asset-checks { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
#asset-checks:empty { display: none; }
.check-chip {
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: var(--bg2);
  color: var(--text-dim);
  cursor: pointer;
}
.check-chip:hover { border-color: var(--text-dim); }
.check-chip.on { border: 1px solid var(--green); color: var(--green); background: #143a26; }
.anim-btn {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: .8rem;
  cursor: pointer;
}
.anim-btn.active { border-color: var(--accent); color: var(--accent); background: #2a2416; }

/* ── 오버레이 공통 ── */
.overlay[hidden] { display: none; }
.overlay {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(8,11,15,.96);
  display: flex; flex-direction: column;
}
.overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  flex: 0 0 auto;
}
.overlay-head h2 { font-size: 1.05rem; }

/* 비교 */
#compare-panels {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 0 18px 18px;
  min-height: 0;
}
.cmp-panel {
  flex: 1;
  position: relative;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}
.cmp-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-info {
  position: absolute;
  left: 10px; top: 10px;
  background: rgba(13,17,23,.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  z-index: 2;
  max-width: calc(100% - 20px);
}
.cmp-info .ci-name { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-info .ci-meta { font-size: .7rem; color: var(--text-dim); margin-top: 2px; }
.cmp-anim {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex; gap: 4px; flex-wrap: wrap;
  z-index: 2;
}
.cmp-anim:empty { display: none; }
.cmp-anim .anim-btn { background: rgba(26,35,48,.9); }

/* 로딩바 */
.progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bg3);
  overflow: hidden;
  flex: 0 0 auto;
}
.progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .2s;
}
.progress.ind i { width: 30%; animation: prog-slide 1.1s infinite linear; }
@keyframes prog-slide { from { margin-left: -30%; } to { margin-left: 100%; } }

/* 메뉴얼(위키) — 이동 가능한 플로팅 창, 배경 비차단(보면서 작업) */
#manual-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
  pointer-events: none; /* 창 밖은 그대로 조작 가능 */
}
#manual-window {
  position: absolute;
  left: calc(50% - min(45vw, 460px));
  top: 10vh;
  width: min(90vw, 920px);
  height: min(74vh, 760px);
  min-width: 420px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
  resize: both;      /* 우하단 모서리로 크기 조절 */
  pointer-events: auto;
}
#manual-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: move;
  user-select: none;
  flex: 0 0 auto;
}
#manual-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 12px 16px 16px;
  gap: 16px;
}
#manual-toc {
  flex: 0 0 190px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-right: 10px;
}
#manual-toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: .88rem;
  cursor: pointer;
}
#manual-toc a:hover { color: var(--text); background: var(--bg2); }
#manual-toc a.active { color: var(--accent); background: #2a2416; }
#manual-body {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  max-width: 860px;
  line-height: 1.75;
  font-size: .92rem;
}
#manual-body section { padding: 6px 4px 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
#manual-body h2 { font-size: 1.05rem; color: var(--accent); margin-bottom: 10px; }
#manual-body p { margin: 8px 0; color: var(--text); }
#manual-body b { color: #fff; }
#manual-body code {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .84em;
}
#manual-body kbd {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: .82em;
  font-family: inherit;
}
#manual-body table { border-collapse: collapse; margin: 10px 0; width: 100%; }
#manual-body th, #manual-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
#manual-body th { background: var(--bg2); color: var(--text-dim); font-weight: 600; }

/* 콘택트시트 */
#contact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding: 0 18px 12px;
  flex: 0 0 auto;
}
.cf-sep { width: 1px; height: 16px; background: var(--line); margin: 0 8px; }
#contact-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
  align-content: start;
}
.contact-cell {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* overflow:hidden 금지 — 셀 자동 높이가 0으로 붕괴해 내용이 잘리는 레이아웃 버그(타일 카테고리에서
     셀이 납작해지던 원인). 모서리 클리핑은 .cc-thumb에 직접 건다 */
  cursor: pointer;
}
/* 마우스 오버는 회색 — 금색(선택)·하늘색(사본)과 뜻이 겹치지 않게.
   이미 선택된 셀은 자기 색을 지킨다 */
.contact-cell:hover:not(.checked) { border-color: var(--text-dim); }
/* 갤러리에는 '보는 중' 외곽선을 쓰지 않는다 — 뷰어에서 보고 있다는 표시는 '보는 중' 배지로만.
   외곽선은 선택 상태 전용(금색=원본, 하늘색=사본) */
/* 선택된 카드 썸네일 중앙 '보기' 버튼 — 뷰어로 이동 */
.contact-cell .cc-thumb { position: relative; }
.contact-cell .cc-view {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(13, 17, 23, .85);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: .88rem;
  cursor: pointer;
}
.contact-cell.checked .cc-view { display: block; }
.contact-cell .cc-view:hover { background: var(--accent); color: #14171c; }

/* 다중 선택(체크 연동) — 우상단 체크 표시 */
.contact-cell.checked { border-color: var(--accent); position: relative; }  /* 체크 = 얇은 외곽선 */
.contact-cell.checked::after {
  content: '✔';
  position: absolute;
  top: 4px;
  right: 6px;
  color: var(--accent);
  background: rgba(13, 17, 23, .8);
  border-radius: 5px;
  padding: 0 4px;
  font-size: .8rem;
}
/* 갤러리의 편집 사본 — 좌측 패널과 같은 색으로 알아보게 한다 */
.contact-cell.child .cc-meta { background: #29323f; border-radius: 0 0 9px 9px; }
.contact-cell.child .cc-thumb { border-radius: 9px 9px 0 0; }
.contact-cell.child.checked { border-color: var(--sky); }
.contact-cell.child.checked::after { color: var(--sky); }   /* 체크 표시도 하늘색 */
.contact-cell.child .cc-view { border-color: var(--sky); color: var(--sky); }
.contact-cell.child .cc-view:hover { background: var(--sky); color: #14171c; }


.badge.viewing { background: #2a2416; color: var(--accent); border: 1px solid var(--accent); }
/* 정사각 셀 강제: img에 aspect-ratio를 직접 걸면 브라우저에 따라 원본 비율이 이겨
   타일 텍스처 셀이 납작해진다 → 래퍼 div가 정사각을 잡고 img는 채우기만 한다 */
.contact-cell .cc-thumb { width: 100%; aspect-ratio: 1 / 1; background: var(--bg3); overflow: clip; border-radius: 9px 9px 0 0; }
.contact-cell .cc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-cell .cc-meta { padding: 8px 10px; }
.contact-cell .cc-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-cell .badges { margin-top: 4px; }

/* AI 스테이트트리 패널 */
#st-panel {
  position: absolute;
  top: 52px;
  right: 12px;
  width: 360px;
  max-height: calc(100% - 200px);
  overflow-y: auto;
  background: rgba(18, 21, 26, .92);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 30;
  font-size: .82rem;
}
.st-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.st-mini { padding: 2px 8px; font-size: .74rem; }
.st-active-label { color: var(--accent); font-size: .78rem; margin-bottom: 8px; min-height: 1em; }
.st-sec { color: var(--text-dim); margin: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.st-param-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.st-param-row .sp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-param-row input[type="checkbox"] { accent-color: var(--accent); }
.st-state { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin: 4px 0; background: var(--bg1); }
.st-state.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #2a2416; }
.st-state .ss-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.st-state input.ss-name { width: 110px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 6px; font-size: .8rem; }
.st-state select { background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 4px; font-size: .74rem; max-width: 150px; }
.st-state .ss-sub { color: var(--text-dim); font-size: .72rem; margin-top: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-children { margin-left: 14px; border-left: 1px dashed var(--line); padding-left: 8px; }

/* 촬영 모드 */
#capture-body {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px 18px;
  min-height: 0;
}
#capture-img {
  max-width: 100%; max-height: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #000;
}

/* 불러오기 다이얼로그 */
.overlay.center { align-items: center; justify-content: center; }
.dialog {
  width: min(560px, 92vw);
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dialog h2 { font-size: 1.05rem; }
.dialog-hint { font-size: .76rem; color: var(--text-dim); line-height: 1.6; }
.dialog label { font-size: .78rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; }
.dialog input, .dialog select {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 10px;
  font-size: .85rem;
  outline: none;
}
.dialog input:focus, .dialog select:focus { border-color: var(--accent); }
/* 채택/태그 설정 — 상태는 배지 클릭, 태그는 토큰 입력 */
.bt-field { font-size: .78rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; }
#bt-status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
#bt-status-pick .badge {
  cursor: pointer;
  border: 1px solid var(--line);
  opacity: .55;               /* 고르지 않은 상태는 흐리게 — 선택된 하나만 또렷하다 */
}
#bt-status-pick .badge:hover { opacity: .85; }
#bt-status-pick .badge.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* 태그 토큰 입력 — 겉보기는 .dialog input과 같고, 안에 칩과 입력칸이 함께 흐른다 */
#bt-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  min-height: 36px;
  cursor: text;
}
#bt-tags.focus { border-color: var(--accent); }
#bt-tags input {
  flex: 1 1 90px;
  min-width: 90px;
  background: none;
  border: none;
  padding: 2px 0;
  border-radius: 0;
}
#bt-tags input:focus { border-color: transparent; }
.bt-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-style: italic;
  padding: 2px 4px 2px 9px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text-dim);
  white-space: nowrap;
}
.bt-token.dup { border-color: var(--accent); color: var(--accent); background: #2a2416; }
.bt-token button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: 0 3px;
  opacity: .6;
}
.bt-token button:hover { opacity: 1; color: var(--red); }

.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
#imp-result { font-size: .78rem; color: var(--text-dim); min-height: 1.2em; }
#imp-result.err { color: var(--red); }
#imp-result.ok { color: var(--green); }

/* 탐색기 다이얼로그 — 높이 고정(내용에 따라 창 크기가 출렁이지 않게) */
.dialog.wide { width: min(760px, 94vw); height: min(720px, 88vh); overflow: hidden; }
.dialog.wide .browse { flex: 1 1 auto; min-height: 0; }
.dialog .row { display: flex; gap: 8px; }
.dialog .row input { flex: 1; }
.crumb { display: flex; flex-wrap: wrap; gap: 4px; font-size: .78rem; color: var(--text-dim); align-items: center; }
.crumb button {
  background: none; border: none; color: var(--blue); cursor: pointer;
  font-size: .78rem; padding: 2px 2px;
}
.crumb button:hover { text-decoration: underline; }
.browse {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-y: auto;
  background: var(--bg0);
}
.browse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--bg2);
  cursor: pointer;
  font-size: .84rem;
}
.browse-row:last-child { border-bottom: none; }
.browse-row:hover { background: var(--bg2); }
.browse-row .b-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-row .b-count { color: var(--text-dim); font-size: .72rem; }
.browse-row .b-count.has { color: var(--green); }
.browse-row .tool-btn { padding: 3px 10px; font-size: .74rem; }
.browse-empty { padding: 16px; color: var(--text-dim); font-size: .8rem; text-align: center; }
.import-opts { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.import-opts label { flex: 1; min-width: 160px; }
#set-result { font-size: .78rem; color: var(--text-dim); min-height: 1.2em; white-space: pre-line; }
#set-result.err { color: var(--red); }
#set-result.ok { color: var(--green); }

/* 카테고리 이동 드롭다운(정보 패널) */
.cat-select {
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  outline: none;
  margin-right: 4px;
}
.cat-select option { background: var(--bg1); color: var(--text); }

/* 상태 드롭다운(정보 패널) */
.status-select {
  font-size: .72rem;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  outline: none;
  margin-right: 4px;
}
.status-select.st-채택 { background: #143a26; color: var(--green); }
.status-select.st-후보 { background: #3a3014; color: var(--amber); }
.status-select.st-예약 { background: #33280f; color: var(--accent); }
.status-select.st-반려 { background: #3a1717; color: var(--red); }
.status-select.st-교체 { background: #3a1717; color: #e08080; }
.status-select option { background: var(--bg1); color: var(--text); }

/* 경로 칩 */
.chip-meta.path {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  font-style: normal;
}
.badge.tag-edit { background: var(--bg2); color: var(--text-dim); border: 1px dashed var(--line); cursor: pointer; }
.badge.tag-edit:hover { color: var(--accent); border-color: var(--accent); }

/* 중앙 메시지 창 — 배경을 어둡게 하지 않는다 */
#msg-overlay { background: transparent; pointer-events: none; }
#msg-overlay .dialog {
  pointer-events: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,.7);
  border-color: var(--text-dim);
}
.msg-dialog { width: min(440px, 90vw); }
#msg-text { font-size: .88rem; line-height: 1.7; white-space: pre-line; }

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }
/* 확인창 안에 붙는 옵션 체크박스 */
#msg-check { display: flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-size: .85rem; color: var(--text-dim); cursor: pointer; }
#msg-check[hidden] { display: none; }
#msg-check input { width: auto; margin: 0; accent-color: var(--accent); }
/* 브러시 패널 아래쪽 버튼 두 개 */
.hm-brush-row { display: flex; gap: 5px; }
.hm-brush-row .tool-btn { flex: 1 1 0; padding: 5px 6px; font-size: .76rem; }
/* 지형 색상 층 편집 */
/* 색 층 한 줄 — 좁은 칸에 들어가도록 격자로 자리를 못박는다
   (예전엔 #hm-side 안이라 가정한 규칙이라, 도구 판으로 옮긴 뒤 색 견본이 실처럼 눌렸다) */
#hm-layer-list { display: flex; flex-direction: column; gap: 3px; margin: 5px 0; }
.hm-layer {
  display: grid;
  grid-template-columns: 22px 44px 1fr 1fr;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: var(--text-dim);
}
.hm-layer .ly-n { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-layer label { display: flex; align-items: center; gap: 3px; white-space: nowrap; min-width: 0; }
#hm-color-panel .hm-layer input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 2px 3px;
  font-size: .68rem;
  text-align: right;
}
#hm-color-panel input[type="color"] {
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: none;
  flex: 0 0 auto;
  cursor: pointer;
}
.hm-rockrow { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--text-dim); margin: 6px 0 0; }
.hm-blendrow { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-dim); margin: 6px 0 2px; }
#hm-side .hm-blendrow input[type="range"] { flex: 1 1 auto; width: auto; padding: 0; accent-color: var(--accent); }
#hm-blend-lbl { flex: 0 0 34px; text-align: right; color: var(--text); }
/* 브러시 패널 단축키 표기 */
.hm-key { font-size: .62rem; color: var(--accent); opacity: .85; white-space: nowrap; }
.hm-keys { margin-top: 6px; font-size: .64rem; color: var(--text-dim); line-height: 1.5; white-space: nowrap; }
.hm-keys b { color: var(--text); font-weight: 600; }
/* 하이트맵 4분할 안내선 체크박스 */
.hm-grid-chk { display: flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.hm-grid-chk input { width: auto; margin: 0; accent-color: var(--accent); }
/* 진행 막대 — 미리보기·생성처럼 시간이 걸리는 일이 도는 동안 */
#hm-busy {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-width: 240px;
  padding: 8px 12px 10px;
  background: rgba(18, 21, 26, .93);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
#hm-busy[hidden] { display: none; }
#hm-busy-txt { display: block; font-size: .78rem; color: var(--text); margin-bottom: 6px; }
.hm-busy-bar { height: 4px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.hm-busy-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  animation: hm-busy-slide 1.1s ease-in-out infinite;
}
@keyframes hm-busy-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* 광원 칸 — 쇼룸 조명 패널과 같은 모양, 도구 판 크기에 맞춰 조금 작게 */
#hm-light-panel { width: 210px; }
#hm-light-body { display: flex; flex-direction: column; gap: 7px; }
#hm-light-body .lp-row { font-size: .72rem; }
#hm-light-body input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg0); cursor: pointer; }
#hm-light-body input[type="range"] { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; accent-color: var(--accent); }
#hm-light-body .lp-gyro-row { align-items: center; gap: 8px; }
#hml-gyro {
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 35%, #2a3648, var(--bg0));
  position: relative;
  cursor: crosshair;
  touch-action: none;
  flex: 0 0 auto;
}
#hml-dot {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#hm-light-body .lp-hint { font-size: .64rem; line-height: 1.4; color: var(--text-dim); }
#hm-light-body .tool-btn { padding: 4px 8px; font-size: .74rem; }
/* 광원 칸 제목 — 여닫지 않으므로 누르는 느낌을 주지 않는다 */
.hm-tool-title { color: var(--accent); border-color: var(--accent); cursor: default; }
.hm-tool-title:hover { color: var(--accent); border-color: var(--accent); }
/* 섹션 제목 줄에 버튼을 나란히 */
.hm-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-sec-row .tool-btn { padding: 3px 8px; font-size: .72rem; font-weight: 400; }
.hm-tool-head:disabled { opacity: .4; cursor: default; }
.hm-tool-head:disabled:hover { color: var(--text-dim); border-color: transparent; }
/* ── 픽셀 스프라이트 굽기 ── */
#px-side {
  width: 320px;
  flex: 0 0 320px;
  background: var(--bg1);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 12px;
}
#px-side[hidden] { display: none; }
/* 체크박스 줄(.hm-check)은 가로로 둬야 한다 — id 선택자가 .hm-check를 이겨 세로로 서 있었다 */
#px-side label:not(.hm-check) {
  display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--text-dim);
}
#px-side .hm-check { margin: 6px 0; }
#px-side input, #px-side select {
  background: var(--bg0); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 8px; font-size: .82rem; outline: none; width: 100%;
}
#px-side input:focus, #px-side select:focus { border-color: var(--accent); }
#px-side .hm-check input { width: auto; flex: 0 0 auto; accent-color: var(--accent); }
#px-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
/* 시트는 가로로 길어서 잘라내면 뭐가 뭔지 모른다 — 축소해 담는다 */
#px-list .hm-card img { object-fit: contain; }
#px-stage { flex: 1 1 auto; min-width: 0; display: flex; background: var(--bg0); }
#px-stage[hidden] { display: none; }
#px-view {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;   /* 큰 시트가 사이드바를 덮지 않게 */
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px;
}
/* 도구 줄은 뷰어 왼쪽에 붙인다(가운데 정렬이면 시트 폭에 따라 자리가 흔들린다) */
#px-toolbar, #px-sheetbar { display: flex; align-items: center; gap: 6px; align-self: flex-start; font-size: .82rem; }
#px-sheetbar { width: 100%; padding: 6px 4px 4px; }
#px-toolbar .hm-grid-chk, #px-sheetbar .hm-grid-chk, #px-frames .pxf-head .hm-grid-chk { font-size: .82rem; }
#px-toolbar .hm-grid-chk input[type="number"], #px-frames .pxf-head .hm-grid-chk input[type="number"] {
  width: 48px; background: var(--bg0); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; font-size: .82rem;
}
.px-tb-gap { width: 10px; }
/* 재생칸·시트는 폭을 넘으면 가로 스크롤로 담는다.
   flex + justify-content:center로 가운데 두면 넘칠 때 왼쪽이 스크롤로 닿지 않는다 → 블록 + margin auto */
#px-play-wrap { flex: 0 0 auto; width: 100%; overflow-x: auto; }
#px-frames { flex: 0 0 auto; width: 100%; padding: 6px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .78rem; }
#px-frames[hidden] { display: none; }
#px-frames .pxf-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; white-space: nowrap; }
#px-frames .pxf-head b { color: var(--amber); }
.pxf-cell.sel { background: rgba(91, 140, 255, .18); border-color: #5b8cff; }
.pxf-cell.sel.cur { box-shadow: 0 0 0 1px var(--amber) inset; }
#pxf-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px; }
.pxf-cell { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(18, 21, 26, .6); }
.pxf-cell.cur { border-color: var(--amber); }
.pxf-cell canvas { width: 56px; height: 56px; image-rendering: pixelated; background: #3b424e; border-radius: 4px; cursor: pointer; }
.pxf-cell .n { font-size: .68rem; color: var(--muted); }
.pxf-cell input { width: 56px; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 4px; font-size: .72rem; padding: 1px 3px; text-align: center; }
.pxf-cell .b { display: flex; gap: 2px; }
.pxf-cell .b button { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 3px; font-size: .66rem; padding: 0 3px; cursor: pointer; }
.pxf-cell .b button:hover { color: var(--text); border-color: var(--text-dim); }
#px-play {
  display: block; margin: 0 auto;
  image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px;
}
#px-play[hidden] { display: none; }
.px-zbtn {
  background: rgba(18, 21, 26, .9); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 10px; font-size: .82rem; cursor: pointer;
}
.px-zbtn:hover { color: var(--text); }
.px-zbtn.active { color: var(--accent); border-color: var(--accent); }
#px-sheet-wrap { flex: 1 1 auto; min-height: 0; width: 100%; overflow: auto; }
#px-sheet {
  display: block; margin: 0 auto;
  image-rendering: pixelated;         /* 픽셀은 보간하면 안 된다 */
  border: 1px solid var(--line);
  border-radius: 6px;
}
#px-sheet.checker, #px-play.checker {
  /* 체크무늬는 중간 회색 두 톤 — 예전 어두운 톤은 검은 픽셀·외곽선과 거의 같은 밝기라 검정이 투명처럼 보였다 */
  background-color: #3b424e;
  background-image:
    linear-gradient(45deg, #5a6272 25%, transparent 25%),
    linear-gradient(-45deg, #5a6272 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #5a6272 75%),
    linear-gradient(-45deg, transparent 75%, #5a6272 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#px-note { font-size: .74rem; color: var(--text-dim); }
/* 클립 체크 목록·시트 안 클립 선택 */
.px-clips { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: .8rem; background: var(--bg0); }
/* 사이드바 라벨은 세로(제목 위·입력 아래)가 기본이라, 체크 목록만 가로로 되돌린다 */
#px-side .px-clips label, .px-clips label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; cursor: pointer; white-space: nowrap; text-align: left; margin: 0; padding: 1px 0; }
#px-side .px-clips label input { margin: 0; width: 13px; height: 13px; flex: 0 0 auto; }
.px-clips input { accent-color: var(--accent); }
.px-clips-tools { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.px-clipsel { background: var(--bg0); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-size: .8rem; max-width: 220px; }
.hm-card .hm-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.px-group { font-size: .74rem; color: var(--accent); margin: 8px 0 2px; padding: 3px 4px; cursor: pointer; user-select: none; border-radius: 6px; }
.px-group:hover { background: rgba(255,255,255,.05); }
.px-group.closed { color: var(--text-dim); }
.px-group-body { display: flex; flex-direction: column; gap: 8px; }
.px-group-body[hidden] { display: none; }
/* 픽셀 화면으로 옮겨 온 하단 정보 패널 — 쇼룸에서는 뷰어 위에 떠 있지만 여기서는 시트 아래 한 줄로 */
#px-view #info-panel.px-mode { position: static; width: 100%; flex: 0 0 auto; margin-top: 4px; }

/* ── 방향 시뮬레이션 창 ── */
#px-sim {
  position: absolute; inset: 0; z-index: 30;   /* 하단 정보 패널(23)보다 위 — 시뮬레이션 중엔 패널이 가려진다 */
  background: rgba(8, 10, 14, .72);
  display: flex; align-items: center; justify-content: center;
}
#px-sim[hidden] { display: none; }
#px-sim-box {
  background: var(--bg1); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}
#px-sim-head { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--text); }
#px-sim-head .hm-hint { margin-left: auto; }
#px-sim-tools { display: flex; align-items: center; gap: 8px; font-size: .82rem; flex-wrap: wrap; }
#px-sim-tools .hm-grid-chk { font-size: .82rem; gap: 5px; }
#px-sim-tools input[type="number"] {
  width: 48px; background: var(--bg0); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; font-size: .82rem;
}
#px-sim-tools select {
  background: var(--bg0); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font-size: .82rem;
}
.px-file { cursor: pointer; }
#px-sim-cv {
  image-rendering: pixelated; border-radius: 8px; background: var(--bg0);
  border: 1px solid var(--line); display: block;
}
#px-sim-cv.checker {
  background-color: #3b424e;
  background-image:
    linear-gradient(45deg, #5a6272 25%, transparent 25%),
    linear-gradient(-45deg, #5a6272 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #5a6272 75%),
    linear-gradient(-45deg, transparent 75%, #5a6272 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#px-sim-help { font-size: .74rem; color: var(--text-dim); text-align: center; }
#px-result { margin-top: 8px; font-size: .76rem; color: var(--text-dim); }
#px-result.ok { color: var(--green); }
#px-result.err { color: var(--red); }

/* 다이얼로그의 여러 갈래 선택(본 심기의 손가락·발가락·날개) */
#msg-opts { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 2px; }
#msg-opts[hidden] { display: none; }
#msg-opts label { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; cursor: pointer; }
/* 콤보는 글 폭을 뺏지 않는다 — 긴 항목이 있으면 셀렉트가 넓어져 설명이 세로 한 글자씩 접혔다 */
#msg-opts label span { flex: 1 1 auto; min-width: 0; }
#msg-opts label select { flex: 0 0 auto; max-width: 46%; align-self: center; }
#msg-opts label i { font-style: normal; color: var(--text-dim); font-size: .72rem; }
#msg-opts input { margin-top: 2px; }

/* 이식 창의 태그 칩 — 누르면 그 태그가 붙은 애니메이션이 한 번에 골라진다 */
.imp-ext { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px; font-size: .74rem; }
.imp-ext-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.imp-ext-head .tool-btn { padding: 3px 9px; font-size: .74rem; }
.imp-ext-head .hint { color: var(--text-dim); margin-left: 4px; }
.imp-ext-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.imp-ext .grp { color: var(--text-dim); width: 52px; flex: 0 0 auto; cursor: pointer; user-select: none; }
.imp-ext .grp:hover { color: var(--text); }
.imp-ext .badge.ext { cursor: pointer; user-select: none; opacity: .45; transition: opacity .12s, border-color .12s, color .12s; }
.imp-ext .badge.ext.on { opacity: 1; border-color: var(--accent); color: var(--accent); }
.imp-ext .badge.ext:hover { opacity: 1; }
.rt-src-tags .rt-tag-pick { cursor: pointer; transition: border-color .12s, color .12s; }
.rt-src-tags .rt-tag-pick:hover { border-color: var(--accent); color: var(--accent); }
.rt-src-tags .rt-tag-pick:active { transform: translateY(1px); }

/* 이식 창 상단 도구 줄 — 전체 선택/해제 + 태그별 한 번에 고르기 */
#rtp-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; }
#rtp-tools .rtp-mini { padding: 3px 9px; font-size: .74rem; }
/* 줄은 display:flex 라벨이라 hidden 속성이 안 먹는다 — 검색으로 거른 줄은 여기서 숨긴다 */
.rt-src-row[hidden], .dialog label.rt-src-row[hidden] { display: none; }
#rtp-search { flex: 1 1 180px; min-width: 140px; background: var(--bg0); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; font-size: .78rem; outline: none; }
#rtp-search:focus { border-color: var(--accent); }
#rtp-tagbar { display: flex; gap: 5px; flex-wrap: wrap; }
#rtp-sel { margin-left: auto; font-size: .74rem; white-space: nowrap; }
#rtp-tagbar .rt-tag-pick.on { border-color: var(--accent); color: var(--accent); background: rgba(255,183,77,.12); }

/* 타임라인 위에 애니메이션 수정이 번지는 범위를 띄운다 */
.pb-track { position: relative; flex: 1; display: flex; min-width: 120px; }
.pb-track #pb-time { flex: 1; min-width: 0; }
#pb-range-fill { position: absolute; top: 2px; bottom: 2px; background: var(--amber); opacity: .28; border-radius: 3px; pointer-events: none; }
#pb-range-fill[hidden] { display: none; }
#anim-opts select { background: #1c222b; color: inherit; border: 1px solid #3a4552; border-radius: 4px; padding: 1px 4px; font-size: .78rem; }
#anim-opts label { margin-right: 6px; }

/* 여러 개 고르는 창의 항목 — 상위 .dialog label이 세로(column)라 체크박스 아래로 글이 내려갔다. 옆에 붙인다. */
#msg-opts label { flex-direction: row; align-items: flex-start; }
#msg-opts label span { display: inline; }

.hm-card.missing { opacity: .55; }

/* 동영상 구간 편집 — 필름 스트립 + 양끝 손잡이 */
#video-edit { width: min(84%, 960px); display: flex; flex-direction: column; gap: 6px; }
#video-edit[hidden] { display: none; }
#ve-strip { width: 100%; height: 72px; display: block; background: var(--bg0); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.ve-dual { position: relative; display: block; width: 100%; height: 18px; }
.ve-dual .dual-track { position: absolute; left: 0; right: 0; top: 8px; height: 3px; background: var(--line); border-radius: 2px; }
.ve-dual input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 18px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ve-dual input[type=range]::-webkit-slider-runnable-track { background: none; }
.ve-dual input[type=range]::-moz-range-track { background: none; border: 0; }
.ve-dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 12px; height: 18px; border-radius: 3px; background: var(--accent); border: 1px solid #000; cursor: ew-resize; }
.ve-dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 18px; border-radius: 3px; background: var(--accent); border: 1px solid #000; cursor: ew-resize; }
/* 스냅샷 굽기 패널 — 동영상 화면 왼쪽에 세로로 */
#vid-bake { position: absolute; top: 56px; left: 12px; width: 268px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(18, 21, 26, .92); border: 1px solid var(--line); border-radius: 10px; font-size: .78rem; color: var(--text); z-index: 3; }
#vid-bake[hidden] { display: none; }
#vid-bake .vb-head { font-weight: 700; color: var(--amber); display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
#vid-bake .vb-head .hm-hint { font-weight: 400; }
#vid-bake label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#vid-bake label.vb-check { justify-content: flex-start; }
#vid-bake .vb-cropref { display: flex; align-items: center; gap: 6px; font-size: .74rem; }
#vid-bake .vb-cropref .hm-hint { flex: 1 1 auto; }
#vid-bake select, #vid-bake input[type=number] { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: .78rem; max-width: 150px; }
#vid-bake input[type=number] { width: 70px; }
#vid-bake .vb-actions { display: flex; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
#vid-bake .vb-actions button { flex: 1; }
#vid-bake #vb-sprite { border-color: var(--amber); color: var(--amber); font-weight: 700; }
/* 동영상 — 영상을 위에, 구간 편집을 아래에 세로로 */
#media-player.video { flex-direction: column; gap: 12px; justify-content: flex-start; padding: 56px 0 24px; overflow-y: auto; }
#media-player.video #media-video { max-height: 58vh; width: min(84%, 960px); flex: 0 0 auto; }
/* 굽기 패널이 떠 있으면 영상·구간 편집을 오른쪽으로 밀어 겹치지 않게 */
#media-player.video:has(#vid-bake:not([hidden])) #media-video { width: min(calc(100% - 320px), 960px); margin-left: 300px; }
#media-player.video:has(#vid-bake:not([hidden])) #video-edit { margin-left: 300px; width: calc(100% - 320px); }
/* 목록 정렬 줄 */
.sidebar-sort { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; font-size: .74rem; color: var(--text-dim); }
.sidebar-sort label { display: flex; align-items: center; gap: 6px; width: 100%; }
.sidebar-sort select { flex: 1; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: .78rem; }
/* 시트 격자·PNG 변환 — 재생 패널의 둘째 줄 전체를 쓴다(한 줄에 끼우면 패널 밖으로 삐져나갔다) */
#sheet-grid { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--text-dim); }
#sheet-grid[hidden] { display: none; }
#sheet-grid label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: default; }
#sheet-grid input[type=number] { width: 52px; background: var(--bg0); border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 2px 6px; font-size: .78rem; }
#sheet-grid .tool-btn { padding: 4px 10px; font-size: .76rem; margin-left: auto; }
#sheet-grid .tool-btn + .tool-btn { margin-left: 0; }

/* ── 웹 모드 덮개창(도우미 연결 · 중복 접속 끊김) ── */
.web-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(6, 9, 14, .86); display: flex; align-items: center; justify-content: center; padding: 20px; }
.web-overlay[hidden] { display: none; }
.web-box { width: min(520px, 100%); background: var(--bg1); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.web-box h2 { margin: 0; font-size: 1.1rem; color: var(--amber); }
.web-box label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
.web-box input { background: var(--bg0); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: .9rem; }
.web-box code { background: var(--bg0); padding: 1px 6px; border-radius: 4px; color: var(--amber); }
.web-box .err { min-height: 1.2em; font-size: .82rem; color: #ff8a8a; white-space: pre-wrap; }
.web-actions { display: flex; justify-content: flex-end; gap: 8px; }