/* Metalogy Spatial Editor — 편집기 화면 배치 */

body.editor { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* header */
.ed-head {
  flex: none; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 8px; background: #0a0d10; border-bottom: 1px solid var(--line);
}
.ed-logo { display: flex; align-items: center; gap: 10px; padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--line); }
.ed-logo .ed-wordmark { display: inline-block; font-family: "Jaapokkisubtract", var(--font); font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: .015em; white-space: nowrap; background: linear-gradient(105deg, #00b050, #07999e 48%, #1b60e1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ed-logo span { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .03em; white-space: nowrap; }
.ed-logo .ed-product { display: flex; flex-direction: column; line-height: 1.25; }
.ed-logo .ed-version { color: #7d92a6; font-size: 10.5px; font-weight: 400; letter-spacing: .02em; }
.ed-logo .ed-version span { display: inline; color: inherit; font-size: inherit; font-weight: inherit; } /* v2.3.39 좁은 폭의 '.ed-logo span { display:none }' 이 판 번호만 숨겨 ', 날짜' 만 남던 것 */
.ed-scene { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ed-title {
  min-width: 80px; max-width: 340px; flex: 0 1 auto; height: 32px; padding: 0 8px;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: border-color .3s, background .3s;
}
.ed-title:hover { border-color: var(--line); }
.ed-title:focus { outline: none; border-color: var(--accent); background: var(--field); }
.ed-id { color: var(--dim); white-space: nowrap; }
/* v1.16.0: 맵이 든 프로젝트 (누르면 프로젝트 화면) — 게시 전 · 게시 중단이면 작은 표시 */
.ed-project { flex: 0 1 auto; min-width: 0; max-width: 240px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; white-space: nowrap; text-decoration: none; transition: color .3s, border-color .3s; }
.ed-project:hover { color: var(--text); border-color: #2fd3a855; }
.ed-project[hidden] { display: none; }
/* v2.1.6 머리줄 맵 목록 단추 · 드롭다운 */
.ed-maps { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: color .3s, border-color .3s, background-color .3s; }
.ed-maps:hover, .ed-maps[aria-expanded="true"] { color: var(--text); border-color: #2fd3a855; background: #2fd3a810; }
.ed-maps[hidden] { display: none; }
.ed-maps-chev { width: 7px; height: 7px; margin: -3px 0 0 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.ed-maps[aria-expanded="true"] .ed-maps-chev { transform: rotate(225deg); margin-top: 3px; }
.ed-maps-menu { position: fixed; z-index: 400; width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow: auto; padding: 6px; border: 1px solid #ffffff1f; border-radius: 12px; background: #0d1318f2; backdrop-filter: blur(10px); box-shadow: 0 18px 44px #000000a0; animation: ed-maps-in .16s ease-out; }
@keyframes ed-maps-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.ed-maps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 8px 8px; border-bottom: 1px solid #ffffff12; margin-bottom: 4px; }
.ed-maps-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text); }
.ed-maps-head small { flex: none; color: var(--dim); font-size: 11px; }
.ed-maps-loading { margin: 10px 8px; color: var(--muted); font-size: 12px; }
.ed-maps-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; outline: none; }
.ed-maps-item:hover, .ed-maps-item:focus-visible { background: #2fd3a81a; }
.ed-maps-item.is-here { background: #ffffff0a; cursor: default; }
.ed-maps-item > img, .ed-maps-ph { flex: none; width: 52px; height: 34px; border-radius: 6px; object-fit: cover; background: #ffffff0d; box-shadow: 0 0 0 1px #ffffff14; }
.ed-maps-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ed-maps-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.ed-maps-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 10.5px; }
.ed-maps-tag { flex: none; padding: 1px 7px; border: 1px solid #ffffff26; border-radius: 999px; color: var(--muted); font-size: 10.5px; }
.ed-maps-tag.is-here { border-color: #2fd3a8; color: #2fd3a8; }
.ed-maps-tag.is-draft { border-color: #ffd47966; color: #ffd479; } /* v2.1.17 이 브라우저에 게시하지 않은 편집본 */
.ed-maps-foot { display: block; margin-top: 4px; padding: 8px; border-top: 1px solid #ffffff12; color: var(--muted); font-size: 11.5px; text-decoration: none; text-align: center; border-radius: 0 0 8px 8px; outline: none; }
.ed-maps-foot:hover, .ed-maps-foot:focus-visible { color: var(--text); background: #ffffff08; }
.ed-project > span { overflow: hidden; text-overflow: ellipsis; }
.ed-project > span::after { content: " /"; color: var(--dim); }
.ed-project small { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: #cfe4ff; background: #0f223a; }
.ed-project small.is-locked { color: #ffe2a8; background: #3a2c0f; }
.ed-project:has(small) > span::after { content: ""; }
.ed-status { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-status.is-dirty { color: #ffd479; }
.ed-status.is-dirty::before { content: "● "; }
.ed-status.is-clean { color: #7fe3c2; }
.ed-actions { display: flex; gap: 6px; }

.banner {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: #2b2410; border-bottom: 1px solid #6b5a22; color: #ffe7a6; font-size: 13px;
}

/* main */
.ed-main { flex: 1; min-height: 0; display: flex; }
/* v2.3.33 편집 칸 너비 = --ed-panel-w (기본 320 · +100 · +150 px — editor.js bindPanelWidth), 바뀔 때 부드럽게 */
.ed-panel {
  flex: none; width: var(--ed-panel-w, 320px); display: flex; flex-direction: column;
  background: #0d1115; border-right: 1px solid var(--line); min-height: 0;
  transition: width .34s cubic-bezier(.2, .8, .2, 1);
}
.ed-panel-instant .ed-panel, .ed-panel-instant .ed-panel-size { transition: none; }
/* 칸 오른쪽 가장자리 가운데의 손잡이 — 막대 셋 중 켜진 수 = 지금 너비 단계. 칸 안 팝업들의 위치 기준을 바꾸지 않게 칸은 그대로 두고
   손잡이만 화면 기준(fixed)으로 칸 너비를 따라 (머리줄 56 px 아래 남은 높이의 가운데) */
.ed-panel-size {
  position: fixed; z-index: 6; top: calc(50% + 28px); left: calc(var(--ed-panel-w, 320px) - 9px); width: 18px; height: 52px; transform: translateY(-50%);
  display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 9px;
  background: #121a21; color: var(--dim); cursor: pointer; transition: left .34s cubic-bezier(.2, .8, .2, 1), color .15s ease, border-color .15s ease, background .15s ease;
}
.ed-panel-size:hover, .ed-panel-size:focus-visible { color: #2fd3a8; border-color: #2fd3a880; background: #142027; }
.eps-bars { display: grid; gap: 3px; }
.eps-bars i { display: block; width: 4px; height: 8px; border-radius: 2px; background: currentColor; opacity: .3; transition: opacity .2s ease; }
.ed-panel-size[data-w="0"] .eps-bars i:first-child,
.ed-panel-size[data-w="1"] .eps-bars i:nth-child(-n + 2),
.ed-panel-size[data-w="2"] .eps-bars i { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ed-panel, .ed-panel-size { transition: none; } }
.tabs { flex: none; display: grid; grid-template-columns: .66fr 1.06fr 1.28fr; gap: 4px; /* v1.17.0: 가운데 '상호작용' 이 '주석' 보다 길어 넓힘 */ margin: 10px; padding: 3px; background: #ffffff0a; border-radius: 9px; }
.tabs button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
}
.tabs button svg { width: 15px; height: 15px; }
.tabs button[aria-selected="true"] { background: #ffffff14; color: var(--text); }
.count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #ffffff1a; font-size: 11px; line-height: 18px; }
.tabpanel { flex: 1; overflow: auto; padding: 0 12px 24px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }

.group { padding: 12px 4px 14px; border-bottom: 1px solid #ffffff0d; }
.group:last-child { border-bottom: 0; }
.group-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #dfe6ee; }
.group-title small { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--dim); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.row > label { font-size: 13px; color: #d5dde6; }
.row-actions { display: flex; gap: 4px; align-items: center; }
label.sub { display: block; margin: 4px 0 6px; font-size: 12px; color: var(--muted); }
.hint { margin: 6px 0 4px; font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.hint code { font-size: 11px; }
.field.narrow { width: 128px; }
.field.num { width: 64px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; }
.btn.wide { width: 100%; }
.color-field { display: inline-flex; align-items: center; gap: 8px; }
.color-field input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.color-field code { font-size: 11px; background: none; color: var(--muted); padding: 0; }

.cam-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 10px; border-radius: 8px; background: #ffffff08; }
.cam-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cam-name svg { width: 16px; height: 16px; color: var(--accent); }
.card { margin-top: 8px; padding: 10px; border-radius: 9px; background: #ffffff06; border: 1px solid #ffffff0d; }
.card-label { font-size: 10px; letter-spacing: .12em; color: var(--dim); margin-bottom: 4px; }
.slider-row { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 8px; min-height: 30px; }
.slider-row > label { font-size: 12px; color: var(--muted); }
.slider-row output { font-size: 12px; text-align: right; color: #cbd5df; font-variant-numeric: tabular-nums; }
.slider-row .field.num { width: 52px; height: 26px; font-size: 12px; }
/* v2.3.33 맵 탭 '카메라 → 속도' — 값 글이 길어 오른쪽 칸을 넓게 */
.slider-row.cs-row { grid-template-columns: 74px 1fr 104px; }
.cs-card { margin-top: 10px; }
.cs-card .col-actions { margin-top: 6px; }
.coords { margin-top: 8px; display: grid; gap: 6px; }
.coord-row { display: grid; grid-template-columns: 44px repeat(3, 1fr); gap: 4px; align-items: center; }
.coord-row span { font-size: 11px; color: var(--muted); }
.coord-row .field.num { width: 100%; height: 26px; font-size: 12px; }
/* v2.3.46 3D 오브젝트 크기 칸 옆 잠금 단추 — 세 줄의 칸이 같은 폭이게 모든 줄에 끝 칸 */
.coords.has-link .coord-row { grid-template-columns: 44px repeat(3, minmax(0, 1fr)) 26px; }
.obj-scale-link { width: 26px; height: 26px; min-width: 26px; padding: 0; }
.obj-scale-link svg { width: 14px; height: 14px; }
.obj-scale-link.is-active { color: var(--accent); border-color: #2fd3a866; background: #2fd3a81a; }
.remote-fields.has-link .rf-row { grid-template-columns: 30px repeat(3, minmax(0, 1fr)) 22px; }
.remote-fields .rf-link { width: 22px; height: 22px; min-width: 22px; padding: 0; }
.remote-fields .rf-link svg { width: 13px; height: 13px; }
.remote-fields .rf-link.is-active { color: var(--accent); border-color: #2fd3a866; background: #2fd3a81a; }

.fx { border-radius: 9px; padding: 2px 8px; margin: 0 -8px; transition: background .3s; }
.fx-body { padding: 2px 0 8px; }
.fx-body[hidden], .fx:not(.is-on) .fx-body:not([data-on]) { display: none; }
.fx.is-on { background: #ffffff06; }

/* 빈 목록 안내 (예전 주석 목록 · 3D 오브젝트 목록 — 주석 목록 모양은 v1.17.0 상호작용 목록으로 바뀜, 아래 '상호작용') */
.empty { color: var(--dim); font-size: 13px; text-align: center; padding: 18px 0; }

/* stage */
/* v2.3.33 container: 타임라인의 좁은 화면 규칙이 창 너비가 아니라 이 칸 너비를 따른다 (편집 칸 너비가 바뀌어도 맞게 — timeline.css) */
.ed-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #000; container: ed-stage / inline-size; }
.viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.viewer-host { position: absolute; inset: 0; z-index: 1; /* v2.0.0: 아래 층 Cesium(geo-host) 위에 투명 캔버스 */ }
/* v2.0.0 Cesium(지리) 층: 아래 Cesium 지구 · 지형, 위 투명 PlayCanvas 캔버스. 크레딧(출처)은 숨기지 않는다 (ion · OSM · Google 약관) */
.geo-host { position: absolute; inset: 0; z-index: 0; background: #000; overflow: hidden; }
.geo-host[hidden] { display: none; }
.geo-host .cesium-viewer, .geo-host .cesium-widget, .geo-host .cesium-widget > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 크레딧(출처)은 왼쪽 아래 — 가운데 화면 도구 막대(.vp-toolbar, bottom 16px) 위에 두어 좁은 창에서도 서로 가리지 않게. 글은 누르기를 가로채지 않음(링크만) */
/* v2.0.7 사용권 명시(출처): 하단 도구 막대 왼쪽 아래 구석 (editor.js placeGeoCredits 가 넓이 · 높이를 맞춤 — 모자라면 막대 위) */
.geo-credits { position: absolute; left: 10px; bottom: 12px; z-index: 3; width: max-content; max-width: min(60%, 520px); font-size: 11px; line-height: 1.45; color: #cfd8dc; pointer-events: none; text-shadow: 0 1px 2px #000c; }
.geo-credits .cesium-widget-credits { position: static; display: block; } /* Cesium 이 넣는 absolute 상자(폭 0 → 낱말마다 줄바꿈)를 흐름 안으로 */
.geo-credits a, .geo-credits button, .geo-credits [role="button"] { pointer-events: auto; }
.geo-credits.is-corner { font-size: 10.5px; line-height: 1.4; } /* v2.0.7 막대 왼쪽 좁은 구석 — 줄이 덜 늘어나게 */
.geo-credits[hidden] { display: none; }
.geo-credits a { color: inherit; }
.geo-credits .cesium-credit-logoContainer img, .geo-credits .cesium-credit-imageContainer img { height: 18px; vertical-align: middle; }
.geo-credits .cesium-credit-expand-link { color: #9fd5c3; }
.viewer-host .sse-viewer { position: absolute; inset: 0; --sse-accent: #2fd3a8; }
.viewer-host canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
/* v1.17.0: 예전 주석 번호 표시(.markers)와 누름을 막던 놓기 막(.place-layer)은 없앴다 — 핫스팟은 뷰어가 그린다 */
/* v2.3.39 3D 화면보다 길면 줄을 바꾼다 (예전 nowrap 은 1024 px 에서 양쪽이 잘렸다) — width:max-content 라야 left:50% 의 반쪽 폭에서 꺾이지 않는다.
   리모컨 · 회전축을 덮으면 objects.js fitHint 가 left · top · max-width 를 옮긴다 */
.place-hint, .vp-help {
  position: absolute; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; box-sizing: border-box;
  width: max-content; max-width: calc(100% - 24px); text-align: center; text-wrap: balance; line-height: 1.6;
  background: #000000b0; backdrop-filter: blur(4px); font-size: 12px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; pointer-events: none;
}
.place-hint { top: 14px; border: 1px solid #2fd3a866; color: #c9f7ea; }
.vp-help { top: 12px; opacity: .7; transition: opacity .6s; }
/* v2.3.25 뷰어 뿌리(.sse-viewer) 안 캔버스 바로 뒤로 옮겨 둔다 (editor.js mountVpHelp) — 뷰어의 Arial 대신 편집기 글꼴 */
.sse-viewer > .vp-help { font-family: var(--font); }
kbd { padding: 1px 6px; border: 1px solid #ffffff40; border-radius: 4px; font: 11px ui-monospace, Consolas, monospace; margin-left: 6px; }

.vp-toolbar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px;
  background: #0d1217e6; border: 1px solid #ffffff1c; backdrop-filter: blur(6px); box-shadow: 0 10px 40px #0008;
}
.vp-toolbar .sep { width: 1px; height: 20px; margin: 0 4px; background: #ffffff20; }
.vp-toolbar .btn.icon { width: 34px; height: 32px; }

.loading { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #0b1b1a, #000 70%); transition: opacity .5s; }
.loading.is-done { opacity: 0; pointer-events: none; }
.loading-box { width: min(320px, 80%); text-align: center; display: grid; gap: 12px; }
.loading-box .brand-wordmark { font-size: 26px; }
.bar { height: 3px; border-radius: 3px; background: #ffffff18; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--gradient); transition: width .3s; }

/* timeline */
.timeline { flex: none; height: 132px; border-top: 1px solid var(--line); background: #0b0f13; display: flex; flex-direction: column; }

/* open dialog */
.scene-pick { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.scene-pick a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: #ffffff06; transition: border-color .3s, background .3s; }
.scene-pick a:hover { border-color: #2fd3a870; background: #2fd3a80d; }

/* v2.0.0 지리 · Cesium 칸 (editor.html #geo-group · assets/geopanel.js) */
/* v2.0.6 지구 위 위치: 경도 · 위도 / 높이 · 방향 (두 칸씩 — 숫자 끌기 칸) */
.geo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin: 2px 0 6px; }
.geo-grid > label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.geo-grid .field.num { width: 100%; height: 28px; font-size: 12px; text-align: right; }
/* v2.0.6 주소: 한 줄, 길면 두 줄 (읽기 전용 textarea — geopanel fitAddress) */
textarea.field.geo-address { display: block; width: 100%; height: auto; min-height: 0; margin-top: 2px; padding: 6px 10px; resize: none; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; overflow-y: auto; }
/* v2.0.1 맵 배치 (예전 맵 방향) · v2.0.6 '맵 배치 편집모드' 스위치를 켜야 고친다 — 꺼진 동안 칸은 흐리게(inert), 켜면 강조색 줄 */
.place-mode > label { font-weight: 600; color: var(--text); }
.place-group.is-editing .place-mode > label { color: #bff5e6; }
.place-state { margin: 0 0 8px; font-size: 11.5px; line-height: 1.45; color: #9fe9d2; }
.place-state:empty { display: none; }
.place-gizmo-row { margin: 0 0 6px; }
/* v2.0.22 기즈모 단추(이동 · 회전 · 크기 — 맵 배치 · 3D 오브젝트 · 지우기 상자)가 칸을 넘지 않게: 칸 폭을 똑같이 나눠 그 안에서 줄어들고,
   칸이 좁으면(맵 배치는 왼쪽에 '기즈모' 이름표) 단축키 숫자 표시만 숨긴다 — 단축키는 바로 아래 안내 줄에. 예전에는 아이콘 · 글자 · 숫자의
   폭(단추 하나 약 95px)보다 줄지 못해 맵 배치 줄이 64px, 3D 오브젝트 줄이 21px 패널 밖으로 넘었다 */
/* v2.1.5 상자 계열(지우기 상자 · 맵 배치 지우기 상자 · 범위 · 충돌 상자)도 이동 · 회전 · 크기 세 단추 */
.place-gizmo, .place-box-gizmo, .obj-gizmo { container: gizmo3 / inline-size; }
.place-gizmo .seg-btn, .obj-gizmo .seg-btn, .place-box-gizmo .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.place-gizmo .seg-key, .obj-gizmo .seg-key, .place-box-gizmo .seg-key { margin-left: 2px; }
@container gizmo3 (max-width: 252px) {
  .seg-key { display: none; }
}
@container gizmo2 (max-width: 170px) {
  .seg-key { display: none; }
}
.place-pivot-row { margin: 0 0 4px; }
/* v2.0.8 맵 배치 편집모드 — 편집 대상(맵 배치 · 지우기 상자) · 지우기 상자 칸 */
.place-target-row { margin: 0 0 10px; }
.place-box-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.place-box-count { font-size: 11.5px; color: var(--dim); }
.place-box-draw { margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.place-box-list { list-style: none; display: grid; gap: 4px; margin: 0 0 8px; padding: 0; }
.place-box-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff05; cursor: pointer; transition: border-color .2s, background-color .2s; }
.place-box-item:hover { border-color: #ffffff38; background: #ffffff0a; }
.place-box-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.place-box-item.is-selected { border-color: #2fd3a8aa; background: #2fd3a812; }
.place-box-item.is-off { opacity: .55; }
.place-box-item.is-locked { cursor: default; }
.place-box-badge { flex: none; padding: 1px 6px; border: 1px solid #ffffff26; border-radius: 6px; font-size: 10.5px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.place-box-badge.is-erase { color: #9fe9d2; border-color: #2fd3a866; }
.place-box-badge.is-outside { color: #ffc98a; border-color: #ff9f3366; }
.place-box-badge.is-keep { color: #a8f0b8; border-color: #4cd96466; }
.place-box-name { display: grid; min-width: 0; }
.place-box-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); }
.place-box-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); }
.place-box-edit { margin-top: 6px; padding-top: 8px; border-top: 1px solid #ffffff14; }
.place-box-edit .seg-row { margin: 0 0 6px; }
.place-box-coords { margin: 6px 0 4px; }
.place-box-actions { justify-content: flex-end; min-height: 0; margin-top: 2px; }
.place-box-height { margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
/* 좁은 칸에서도 단추 글 한 줄 — 지우는 방식은 이름을 위에 두고 칸 너비 전체로 */
.seg-row.is-stack { flex-direction: column; align-items: stretch; gap: 4px; }
.seg-row.is-stack .seg-label { width: auto; }
.place-target .seg-btn, .place-box-mode .seg-btn { white-space: nowrap; padding: 0 8px; gap: 5px; }
.place-pivot-hint { margin: 2px 0 10px; }
/* v2.0.14 맵 배치 편집모드 단축키 줄 (기즈모 단추 아래) */
.place-keys-hint { margin: -2px 0 10px; line-height: 1.75; }
.place-keys-hint kbd { margin: 0 1px; padding: 0 5px; }
.place-card-label { margin-top: 2px; }
.place-coords { margin: 0 0 4px; }
.place-scale-row { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
.place-scale-note { font-size: 11px; color: var(--dim); }
/* 축 색 (X 빨강 · Y 초록 · Z 파랑) — 숫자 칸 아래 줄 */
.field.num.ax-x { box-shadow: inset 0 -2px 0 #d9485fcc; }
.field.num.ax-y { box-shadow: inset 0 -2px 0 #3fae5acc; }
.field.num.ax-z { box-shadow: inset 0 -2px 0 #3b74e0cc; }
.field.num.ax-x.is-scrubbing, .field.num.ax-y.is-scrubbing, .field.num.ax-z.is-scrubbing { box-shadow: 0 0 0 2px #4f9dff66; }
.place-body { transition: opacity .25s, filter .25s; }
.place-body[inert] { opacity: .45; filter: saturate(.5); }
.place-body > .card-label { margin: 2px 0 6px; }
.place-geo { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff14; }
.place-group.is-editing { box-shadow: inset 2px 0 0 #2fd3a8; }
.geo-status { margin: -2px 0 8px; padding: 6px 10px; border-radius: 8px; background: #ffffff0a; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.geo-status.is-error { color: #ffb4c1; background: #ff4d6d14; }
.geo-status[hidden] { display: none; }
.geo-keys a { color: #9fd5c3; }
/* v2.3.39 키 줄의 'ADMIN → API 설정' — 이 화면 위에서 API 설정 창을 여는 단추 (auth.js [data-admin-open]), 모양은 링크처럼 */
.geo-keys .geo-keys-admin { padding: 0; border: 0; background: none; color: #9fd5c3; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.geo-keys .geo-keys-admin:hover { color: #c9f7ea; }
/* v2.0.5 지리 · Cesium 칸 배치 — 맵 유형 카드(강조) · 묶음(가로 선으로 나눔) · 두 칸(2열) 셀, 셋째는 다음 줄 */
.geo-type-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 11px; align-items: start; margin: 2px 0 12px; padding: 12px; border: 1px solid #5b8cff8c; border-radius: 12px; background: linear-gradient(135deg, #1b60e12b, #2fd3a812); box-shadow: 0 0 0 1px #5b8cff1f inset; }
.geo-type-badge { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #5b8cff8c; border-radius: 10px; background: #0f223a; color: #8fb8ff; }
.geo-type-badge svg { width: 18px; height: 18px; }
.geo-type-text { display: grid; gap: 2px; min-width: 0; }
.geo-type-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #9fb6d8; }
.geo-type-text strong { font-size: 14.5px; letter-spacing: -.01em; color: #e9f0fc; }
.geo-type-desc { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.geo-type-btn { grid-column: 1 / -1; width: 100%; border-color: #5b8cff8c; }
.geo-type-btn:hover { border-color: #8fb8ff; background: #5b8cff1f; }
/* v2.0.6 지리 칸: '보기 · 톤' 묶음처럼 한 줄 칸(이름 왼쪽 · 값 오른쪽) — 작은 제목(card-label)으로만 나눈다 */
.geo-group .card-label.geo-sub { margin: 12px 0 2px; }
.geo-group .geo-type-card + .geo-status + .card-label.geo-sub, .geo-group .geo-type-card + .card-label.geo-sub { margin-top: 4px; }
.geo-group select.field.narrow { width: 150px; padding-right: 6px; text-overflow: ellipsis; } /* 크롬 · 파이어폭스는 화살표 자리를 따로 둔다 */
.geo-group .field.num.geo-margin { width: 96px; text-align: right; }
.geo-group .hint.geo-api-line { margin: 2px 0 4px; }
.row-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.row-label > label, .row-text { font-size: 13px; color: #d5dde6; }
.geo-help { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted); font: 700 11px/1 var(--font); cursor: pointer; transition: color .2s, border-color .2s; }
.geo-help:hover, .geo-help[aria-expanded="true"] { color: var(--text); border-color: #2fd3a8aa; }
.geo-help-pop { margin: 2px 0 8px; padding: 9px 11px; border: 1px solid #2fd3a855; border-radius: 9px; background: #2fd3a80c; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.geo-help-pop strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 12px; }
.geo-help-pop p { margin: 0 0 4px; }
.geo-help-pop p:last-child { margin-bottom: 0; }
.geo-info { margin-top: 10px; }
/* v2.0.10 장면 탭 '캐시' 묶음 — 한도 고르기 · 이 브라우저 용량 두 줄 · 지우기 */
#cache-group select.field.narrow { width: 150px; padding-right: 6px; }
/* v2.3.39 '보기, 톤' 의 불러올 때 크기 · 작은 가우시안 · 느릴 때 오브젝트 — 고른 글이 잘리지 않게 (지도 공급자 칸과 같게) */
#skybox-size, #small-splats, #obj-boxes { padding-right: 6px; text-overflow: ellipsis; } /* 글을 줄여 이웃 select(128 px)와 폭을 맞춤 — 넘치면 말줄임 */
.cache-usage-row { display: grid; gap: 6px; margin: 2px 0 6px; }
.cache-usage-row .hint { min-width: 0; margin: 0; white-space: pre-line; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; }
.cache-usage-row .btn { justify-self: end; }
.geo-info .hint { margin: 0 0 6px; }
.geo-terrain-src { color: #b9c8d8; }
/* '지도에서 고르기' 창: 주소 검색 + 팝업 지도(leaflet, 360px) */
dialog.modal.geo-modal { width: min(720px, calc(100vw - 32px)); }
.geo-modal .geo-search { display: flex; gap: 6px; margin-top: 6px; }
.geo-modal .geo-search .field { flex: 1; min-width: 0; }
.geo-modal .geo-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.geo-modal .geo-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #ffffff06; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; transition: border-color .3s, background .3s; }
.geo-modal .geo-result:hover { border-color: #2fd3a870; background: #2fd3a80d; }
.geo-modal .geo-result small { font-size: 11px; color: var(--dim); }
.geo-modal .geo-result-note { padding: 6px 2px; font-size: 12.5px; color: var(--muted); }
.geo-modal .geo-map { position: relative; height: 360px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0b1116; isolation: isolate; }
.geo-modal .geo-map .leaflet-container { width: 100%; height: 100%; background: #0b1116; }
.geo-modal .geo-map-error { display: grid; place-items: center; height: 100%; margin: 0; padding: 16px; text-align: center; color: #ffb4c1; }
.geo-modal .geo-readout { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.pub-link { word-break: break-all; }
.check-result { font-size: 12.5px; margin-top: 8px; }
.check-result.ok { color: #7fe3c2; }
.check-result.bad { color: #ffb4c1; }

@media (max-width: 1100px) {
  .ed-actions .btn:not(.primary) { font-size: 0; gap: 0; padding: 0 9px; }
  .ed-logo span { display: none; }
}
@media (max-width: 760px) {
  body.editor { overflow: auto; height: auto; min-height: 100vh; }
  .ed-head { flex-wrap: wrap; height: auto; padding: 8px; }
  .ed-logo { border-right: 0; }
  .ed-scene { order: 3; flex-basis: 100%; }
  .ed-main { flex-direction: column-reverse; }
  .ed-panel { width: 100%; border-right: 0; border-top: 1px solid var(--line); }
  .ed-stage { height: 62vh; flex: none; }
  .ed-panel-size { display: none; }
  .vp-help { display: none; }
}

/* scene orientation */
.rot-row { display: grid; grid-template-columns: 22px 56px 1fr 56px; gap: 6px; align-items: center; margin-bottom: 6px; }
.rot-row .field.num { width: 100%; height: 28px; text-align: center; }
.rot-axis { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font: 700 11px/1 var(--font); color: #fff; }
.rot-axis.x { background: #d9485f; }
.rot-axis.y { background: #3fae5a; }
.rot-axis.z { background: #3b74e0; }
/* v2.0.2 맵 배치 크기 — X · Y · Z 같은 배율 (세 축 색을 한 칸에) */
.rot-axis.xyz { width: 22px; font-size: 7.5px; letter-spacing: -.04em; background: linear-gradient(135deg, #d9485f 0 33%, #3fae5a 33% 66%, #3b74e0 66%); }
.place-scale-label { margin-top: 10px; }
#scale-note.is-warn { color: #ffd479; }
/* v2.0.4 지금 쓰는 지도 공급자 안내 줄 · v2.0.6 맵타일 사용권 명시 끄기 확인 창 (geopanel.js) */
.geo-api-line { margin-top: 2px; }
.geo-api-line.is-warn { color: #ffd479; }
dialog.modal.ion-logo-modal { width: min(660px, calc(100vw - 32px)); }
/* 라이선스 원문을 펼쳐도 아래 단추(취소 · 로고 끄기)는 늘 보이게 — 본문만 스크롤 */
dialog.modal.ion-logo-modal[open] { display: flex; flex-direction: column; }
.ion-logo-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ion-logo-modal .modal-foot { flex: none; padding-top: 14px; }
.ion-logo-modal .ion-license { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff06; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.ion-logo-modal .ion-license strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 13px; }
.ion-logo-modal .ion-license ul { margin: 0 0 10px; padding-left: 18px; }
.ion-logo-modal .ion-license a { color: #8fd8ff; overflow-wrap: anywhere; }
.ion-logo-modal .ion-license-text { max-height: 180px; overflow: auto; margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #05090d; color: #c8d3de; font: 11.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* camera mode switch */
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #ffffff0d; }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .25s, color .25s;
}
.seg-btn svg { width: 15px; height: 15px; }
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-checked="true"] { background: var(--gradient); color: #fff; }
.vp-help kbd { margin-left: 0; margin-right: 2px; }
/* v2.6.0 드론 모드 안내 줄의 충돌 상자 줄 (editor.js flyCollisionNote) — 충돌 상자 생성의 보라 점 */
.vp-help-col { display: inline-flex; align-items: center; gap: 6px; color: #e3d6ff; }
.vp-help-col .colmode-dot { width: 6px; height: 6px; box-shadow: 0 0 0 2px #b88cff33; }

/* v1.19.0 맵 탭 'LOD · 환경' — 3DGS 파일 형식(.fmt-badge 는 mse.css) · 쓰는 단계 · 환경(배경) 켜고 끄기 */
.lod-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lod-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--muted); }
.lod-detail { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.lod-detail:empty { display: none; }
.lod-row-label { font-size: 13px; color: #d5dde6; }
.lod-levels-value { font-size: 12.5px; color: var(--text); text-align: right; }
.lod-levels-value.is-picked { color: #ffe2a8; }
#lod-env-row label small { color: var(--dim); font-size: 11.5px; }
#lod-env-row.is-disabled { opacity: .5; }
.lod-actions { margin-top: 4px; }
.lod-actions .btn { text-decoration: none; }

/* collision */
.col-status { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; background: #ffffff08; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.col-status strong { color: var(--text); }
.col-status.is-on { background: #2fd3a80f; border: 1px solid #2fd3a833; }
.col-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.col-steps { margin-top: 8px; }
.col-steps .up-step { padding: 4px 6px; grid-template-columns: 20px 1fr; gap: 8px; }
.col-steps .up-dot { width: 16px; height: 16px; }
.col-steps .up-step[data-state="done"] .up-dot::after { left: 5px; top: 2px; width: 4px; height: 8px; }
.col-steps .up-step strong { font-size: 12.5px; }
.col-steps .up-detail { font-size: 11.5px; }
.col-manual { margin-top: 10px; font-size: 12px; color: var(--muted); }
.col-manual summary { cursor: pointer; margin-bottom: 6px; }
.seg-btn:disabled { opacity: .35; cursor: not-allowed; }

/* publish done */
.pub-done { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #2fd3a812; border: 1px solid #2fd3a844; }
.pub-done strong { display: block; font-size: 15px; }
.pub-done .dim { font-size: 12.5px; }
.pub-done .pub-note { display: block; margin-top: 2px; font-size: 12.5px; color: #ffd479; } /* v1.16.0: 프로젝트가 게시 전 · 게시 중단 */
.pub-check { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gradient); color: #fff; font-weight: 800; font-size: 17px; }

/* 3D 오브젝트 (v1.5.0-alpha) */
.tabs button { white-space: nowrap; font-size: 12.5px; gap: 5px; }
#tab-obj.is-over { outline: 1px dashed var(--accent); outline-offset: -4px; background: #2fd3a808; }
.obj-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.obj-item { display: flex; gap: 6px; align-items: flex-start; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff06; padding: 8px 6px 8px 10px; cursor: pointer; transition: border-color .3s, background .3s; }
.obj-main { flex: 1; min-width: 0; }
.obj-side { flex: none; display: flex; flex-direction: column; gap: 2px; }
.obj-side .btn.icon { width: 28px; height: 28px; }
.obj-item:hover { border-color: #ffffff26; }
.obj-item.is-selected { border-color: #2fd3a870; background: #2fd3a80d; }
.obj-item.is-hidden { opacity: .55; }
.obj-top { display: flex; align-items: center; gap: 8px; }
.obj-type { flex: none; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #3b74e0; }
.obj-type.splat { background: var(--gradient); }
/* v2.6.0 맵 3D 모델 (맵 올리기의 일반 3D) */
.obj-type.base { background: #7b5be0; }
.obj-cut.base { color: #b7a6f2; }
.obj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.obj-sub { margin-top: 3px; font-size: 11.5px; color: var(--dim); }
.obj-sub.bad { color: #ff8a7a; }
.obj-cut { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.obj-cut::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #6b7682; vertical-align: 1px; }
.obj-cut.pending::before { background: #4f9dff; }
.obj-cut.applied::before { background: #2fd3a8; }
.obj-cut.moved::before { background: #ff8a5c; }
.obj-cut.held::before { background: #8a96a3; box-shadow: inset 0 0 0 1.5px #c9d2dc; } /* v2.1.17 숨긴 동안 지우기 멈춤 */
.obj-edit { margin-top: 10px; border-top: 1px solid #ffffff0d; }
.obj-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.obj-edit-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.obj-gizmo .seg-btn { flex: 1; justify-content: center; }
.obj-cut-status { margin: 8px 0; }
.obj-cut-status.pending { background: #4f9dff14; border: 1px solid #4f9dff40; color: #cfe2ff; }
.obj-cut-status.applied { background: #2fd3a80f; border: 1px solid #2fd3a833; color: #c9f5e8; }
.obj-cut-status.moved { background: #ff8a5c14; border: 1px solid #ff8a5c44; color: #ffd9c7; }
.obj-cut-status.held { background: #8a96a314; border: 1px solid #8a96a344; color: #dde3ea; }
.obj-key { display: inline-block; width: 9px; height: 9px; margin: 0 4px 0 2px; border-radius: 2px; vertical-align: -1px; }
.obj-key.blue { background: #4f9dff; }
.obj-key.red { background: #ff6b4d; }
#obj-cut-body .slider-row { grid-template-columns: 74px 1fr 64px; }
#obj-cut-body .slider-row .field.num { width: 64px; }
.cut-progress { margin: 4px 0 12px; }
.cut-progress .bar { height: 8px; border-radius: 6px; }
.cut-progress .bar span { transition: width .15s linear; }
.cut-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.cut-result { margin-top: 12px; }
.cut-result .hint { margin-top: 10px; }

/* v1.5.0-alpha2: 목록 · 비우는 모양 · 높이 바 · 삭제 확인 */
.obj-label { margin: 10px 0 6px; }
.obj-label .dim { letter-spacing: 0; }
.obj-method .seg-btn { flex: 1; justify-content: center; }
#obj-method-hint { margin-top: 6px; }
.hrange { position: relative; height: 26px; margin: 2px 4px 0; }
.hrange-track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: #ffffff18; }
.hrange-obj { position: absolute; top: -3px; bottom: -3px; border-radius: 3px; background: #ffffff2e; }
.hrange-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #4f9dffcc, #4f9dff); }
.hrange-in { position: absolute; left: -7px; right: -7px; width: calc(100% + 14px); top: 0; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.hrange-in::-webkit-slider-runnable-track { background: none; height: 26px; }
.hrange-in::-moz-range-track { background: none; }
.hrange-in::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 14px; height: 18px; margin-top: 4px; border-radius: 5px; background: #e9f1ff; border: 2px solid #4f9dff; cursor: ew-resize; box-shadow: 0 1px 4px #0008; }
.hrange-in::-moz-range-thumb { pointer-events: auto; width: 12px; height: 16px; border-radius: 5px; background: #e9f1ff; border: 2px solid #4f9dff; cursor: ew-resize; }
.hrange-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #4f9dff66; }
.hrange-ticks { position: relative; height: 16px; margin: 2px 4px 0; font-size: 10.5px; color: var(--dim); }
.hrange-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.hrange-ticks [data-tick="lo"] { left: 0; transform: none; }
.hrange-ticks [data-tick="bottom"] { left: 25%; }
.hrange-ticks [data-tick="top"] { left: 50%; }
.hrange-ticks [data-tick="hi"] { right: 0; transform: none; }
.hrange-label { margin: 2px 0 8px; font-size: 12px; color: #cfe2ff; }

/* v1.5.0-alpha3: 선택 칸 · 높이 바 둘 · 지우기 상자 · 미리보기 색 · 숫자 칸 끌기 · 도움말 */
:root { --mse-tint: #1f6bff; }
.sel-card { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 8px 6px 8px 10px; border: 1px solid #2fd3a85c; border-radius: 10px; background: #2fd3a80f; }
.sel-label { flex: none; font-size: 11px; font-weight: 700; color: #7fe6c8; letter-spacing: .02em; }
.sel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
.sel-card .obj-type:empty { display: none; }
.obj-type.box { background: #5a6472; }
.obj-type.box.erase { background: var(--mse-tint); }
.obj-type.box.outside { background: #d9822b; }
.obj-type.box.keep { background: #2c9f63; }
.box-mode .seg-btn { flex: 1; justify-content: center; }
.coord-note { grid-column: span 2; font-size: 11px; color: var(--dim); }
/* v2.3.32 카메라 범위 — 각도 제한 (위-아래 · 좌-우) */
.ca-label { margin: 14px 0 2px; }
.ca-label.ca-label-first { margin-top: 2px; }
.ca-coords { margin: 2px 0 6px; }
.ca-coords .coord-row .btn { grid-column: span 2; justify-self: start; }
.box-item .obj-sub { font-variant-numeric: tabular-nums; }
.hbar { margin: 4px 0 8px; }
.hbar-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.hbar-name { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hbar-name .dim { margin-left: 4px; font-size: 11px; color: var(--dim); }
.hbar-head .field.num { width: 64px; height: 26px; font-size: 12px; text-align: right; }
.hbar-unit { font-size: 11px; color: var(--dim); }
.hbar-end[aria-pressed="true"] { background: #4f9dff26; color: #cfe2ff; box-shadow: inset 0 0 0 1px #4f9dff66; }
.hrange-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--mse-tint) 75%, transparent), var(--mse-tint)); }
.hrange-in::-webkit-slider-thumb { border-color: var(--mse-tint); }
.hrange-in::-moz-range-thumb { border-color: var(--mse-tint); }
.hrange-label { display: grid; gap: 1px; min-height: 36px; margin: 4px 0 8px; line-height: 1.45; }
.hrange-label .dim { font-size: 11.5px; color: var(--dim); }
.obj-key.tint { background: var(--mse-tint); }
.field.num.scrub { cursor: ew-resize; }
.field.num.scrub:focus { cursor: text; }
.field.num.is-scrubbing { box-shadow: 0 0 0 2px #4f9dff66; }
.vp-toolbar .btn.icon:disabled { opacity: .35; }
.vp-toolbar { width: max-content; max-width: calc(100% - 24px); }
/* v2.7.0 3D 화면이 막대보다 좁으면(960 px 창, 편집 칸을 넓힌 창, 휴대폰) 두 줄로 — 예전에는 오른쪽 단추가 화면 밖으로 6 ~ 76 px 나갔다.
   늘어난 높이는 --vp-tb-extra (editor.js) 로 그 위의 창(도움말, 품질, 속도), 알림, 통계를 올린다 */
.vp-toolbar { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.vp-toolbar .seg-btn { white-space: nowrap; }
.help-pop { position: absolute; left: 50%; bottom: calc(64px + var(--vp-tb-extra, 0px)); translate: -50% 0; z-index: 6; width: min(470px, calc(100% - 32px)); padding: 10px 14px 12px; border-radius: 12px; background: #0d1217f2; border: 1px solid #ffffff22; box-shadow: 0 14px 50px #000a; font-size: 12.5px; }
.help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.help-list { display: grid; grid-template-columns: max-content 1fr; gap: 7px 14px; margin: 0; align-items: baseline; }
.help-list dt { color: var(--text); white-space: nowrap; }
.help-list dd { margin: 0; color: var(--muted); }
.help-list kbd { margin-left: 0; }

/* v1.5.0-alpha4: 선택 칸(빈 화면 안내) · 축 기준 · 기준점 · 알림은 도구 막대 위 가운데 · 암호 창 */
/* 선택 칸이 비었을 때 (v1.5.4): '선택됨' 카드와 같은 크기의 한 줄 카드(점선) + 안내 한 줄 */
.sel-card-empty { border-style: dashed; border-color: #ffffff29; background: #ffffff05; }
.sel-card-empty .sel-empty-icon { flex: none; display: inline-flex; align-items: center; height: 20px; color: var(--dim); }
.sel-card-empty .sel-empty-icon svg { width: 15px; height: 15px; opacity: .75; }
.sel-card-empty .sel-name { color: var(--muted); }
.sel-empty .hint { margin-top: -2px; }
.sel-empty .hint b { color: var(--text); font-weight: 600; }
.seg-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.seg-label { flex: none; width: 44px; font-size: 11.5px; color: var(--muted); }
.seg-row .seg { flex: 1; }
.seg-row .seg-btn { flex: 1; justify-content: center; }
#obj-pivot-hint { margin-top: 6px; }
.editor .toast-host { left: calc(50% + var(--ed-panel-w, 320px) / 2); bottom: calc(78px + var(--vp-tb-extra, 0px)); } /* v2.3.33 3D 화면 가운데 (편집 칸 너비만큼) */
@media (max-width: 760px) {
  .editor .toast-host { left: 50%; bottom: 28px; }
}

/* v1.5.0-alpha6: 탭 · 단추 고르기를 부드럽게 — 탭은 고른 칸 바탕이 미끄러져 옮겨 가고,
   단추(이동 · 회전 · 크기 · 축 기준 · 기준점 · 화면 조작 …)는 SKP Tools 종류 단추처럼 그라데이션이 서서히 */
.tabs { position: relative; }
.tabs button { position: relative; z-index: 1; transition: color .25s ease; }
.tabs button[aria-selected="true"] { background: transparent; }
.tab-ink { position: absolute; top: 3px; left: 0; width: 0; height: 32px; border-radius: 7px; background: #ffffff17; box-shadow: inset 0 0 0 1px #ffffff0d; pointer-events: none; transition: transform .32s cubic-bezier(.22,.68,.2,1), width .32s cubic-bezier(.22,.68,.2,1); }
.tab-ink.is-instant { transition: none; }
.editor .seg-btn { position: relative; isolation: isolate; }
.editor .seg-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gradient); opacity: 0; transition: opacity .32s ease; }
.editor .seg-btn[aria-checked="true"] { background: transparent; }
.editor .seg-btn[aria-checked="true"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tab-ink, .editor .seg-btn::before { transition: none; }
}

/* 충돌 상자 (v1.13.0) — 장면 탭 충돌 · 걷기 칸. 점 색 = 3D 화면의 상자 선 (막기 빨강 · 범위 보라 · 빼기 하늘) */
.cbx { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cbx-add { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.cbx-dot { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 6px; border: 2px solid currentColor; border-radius: 3px; }
.cbx-dot.is-block { color: #ff5c6b; }
.cbx-dot.is-area { color: #b88cff; }
.cbx-dot.is-cut { color: #59ccff; }
/* v1.16.2: 막기 · 범위 · 빼기 무리 — 머리 단추로 접고 펼침 (animateFold) */
.cbx-groups { display: grid; gap: 8px; margin-top: 12px; }
.cbx-group { border: 1px solid var(--line); border-radius: 10px; background: #ffffff04; }
.cbx-ghead { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background-color .3s; }
.cbx-ghead:hover { background: #ffffff0a; }
.cbx-ghead > svg { flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform .45s ease; }
.cbx-group.is-folded .cbx-ghead > svg { transform: rotate(-90deg); }
.cbx-ghead .cbx-dot { margin-right: 0; }
.cbx-ghead small { color: var(--dim); font-size: 11.5px; }
.cbx-ghead .cbx-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #ffffff12; color: var(--muted); font-size: 11.5px; text-align: center; }
.cbx-ghead .cbx-offc { color: var(--dim); font-size: 11px; }
.cbx-group.has-selected { border-color: #2fd3a855; }
.cbx-glist { list-style: none; margin: 0; padding: 0 4px 6px; display: grid; gap: 4px; }
.cbx-group.is-folded:not(.is-animating) > .cbx-glist { display: none; }
@media (prefers-reduced-motion: reduce) { .cbx-ghead > svg { transition: none; } }
.cbx-item { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto auto auto; align-items: center; gap: 2px; padding: 2px 2px 2px 4px; border: 1px solid transparent; border-radius: 8px; }
.cbx-item.is-selected { border-color: #2fd3a866; background: #2fd3a80f; }
.cbx-item.is-off .cbx-name { opacity: .45; }
.cbx-name { display: flex; align-items: center; min-width: 0; padding: 6px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.cbx-name:hover { background: #ffffff0d; }
.cbx-mode { height: 30px; padding: 0 6px; font-size: 12px; }
.cbx-empty { padding: 4px 2px; font-size: 12px; color: var(--dim); }
.cbx-edit { margin-top: 8px; }
.cbx-edit .col-actions { margin-top: 6px; }
/* 충돌 걷기 모드 (v1.15.0) — 모드에서만 만들기 단추 · 목록, 밖에서는 개수 한 줄. 3D 화면 왼쪽 위 표시 · 3D 오브젝트 탭 잠금 안내 */
/* v1.16.2: 충돌 걷기 모드 단추 위 왼쪽, 그 아래 제목 */
.cbx-mode-row { display: flex; justify-content: flex-start; margin-bottom: 14px; }
.cbx .cbx-title { margin: 0; }
.cbx-faces { margin-top: 6px; min-height: 30px; }
.cbx-faces > label small { margin-left: 4px; color: var(--dim); font-size: 11.5px; }
.cbx-summary { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.cbx-summary[hidden], .cbx-body[hidden] { display: none; }
.cbx-body { margin-top: 4px; }
.colmode-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b88cff; box-shadow: 0 0 0 3px #b88cff33; }
.colmode-chip {
  position: absolute; left: 12px; top: 46px; z-index: 4; /* 가운데 조작 안내 줄(.vp-help) 아래 — 오른쪽 회전축과 같은 높이 */
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 140px);
  padding: 5px 6px 5px 12px; border-radius: 8px; border: 1px solid #b88cff66;
  background: #000000b0; backdrop-filter: blur(4px); color: #e3d6ff; font-size: 12px; word-break: keep-all;
}
.colmode-chip[hidden] { display: none; }
.colmode-chip strong { font-weight: 600; white-space: nowrap; }
.colmode-chip .colmode-sub { color: var(--muted); }
.colmode-chip .btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 600px) { .colmode-chip .colmode-sub { display: none; } }
.colmode-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 10px; border: 1px solid #b88cff55; border-radius: 10px; background: #b88cff14; color: #e3d6ff; font-size: 12px; line-height: 1.45; }
.colmode-note[hidden] { display: none; }
.colmode-note > span:nth-child(2) { flex: 1; min-width: 0; }
.colmode-note .btn { flex: none; }
body.is-colmode #tab-obj > .group { opacity: .38; }

/* 충돌 상자 자동 만들기 창 (v1.14.0) — 위에서 본 미리보기(벽 높이 점 · 벽 칸) 위에 범위(보라) · 막기(빨강) */
dialog.modal.auto-modal { width: min(640px, calc(100vw - 32px)); }
.auto-plan-wrap { position: relative; display: grid; place-items: center; min-height: 160px; border: 1px solid var(--line); border-radius: 10px; background: #000; overflow: hidden; }
.auto-plan-wrap canvas { display: block; max-width: 100%; max-height: 36vh; image-rendering: pixelated; }
.auto-plan-wrap.is-busy::after { content: '계산하는 중…'; position: absolute; inset: 0; display: grid; place-items: center; background: #000000a0; color: var(--muted); font-size: 13px; }
.auto-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.auto-legend span::before { content: ''; display: inline-block; width: 12px; height: 9px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.auto-legend .is-area::before { border: 2px solid #b88cff; }
.auto-legend .is-wall::before { background: #ff5c6b; }
.auto-legend .is-void::before { border: 2px solid #ff5c6b; background: repeating-linear-gradient(135deg, #ff5c6b66 0 2px, transparent 2px 5px); }
.auto-legend .is-scan::before { background: #ebebeb; }
.auto-legend .is-notch::before { border: 2px solid #8a94a6; background: repeating-linear-gradient(135deg, #8a94a666 0 2px, transparent 2px 5px); }
/* v1.15.0: 그리기 전에 먼저 보는 내부 · 외부 개수 */
.auto-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.auto-count { display: grid; gap: 1px; padding: 9px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff06; }
.auto-count-name { font-size: 12px; color: var(--muted); }
.auto-count b { font-size: 26px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.auto-count small { font-size: 11px; color: var(--dim); }
.auto-count.is-area { border-color: #b88cff55; }
.auto-count.is-area b { color: #cdb2ff; }
.auto-count.is-block { border-color: #ff5c6b55; }
.auto-count.is-block b { color: #ff8a95; }
/* v1.15.1: 범위끼리 맞닿은 곳(점선 — 지나갈 수 있음) · 벽 감지 단추 사이 띄움 · 창 첫 초점은 창 자체(단추에 테두리 없이) */
.auto-legend .is-seam::before { width: 16px; height: 0; border-top: 2px dashed #b88cff; border-radius: 0; vertical-align: 3px; }
.auto-legend [hidden] { display: none; }
.auto-seam-note { margin: 8px 0 0; padding: 7px 10px; border: 1px dashed #b88cff88; border-radius: 8px; background: #b88cff12; color: #e3d6ff; font-size: 12.5px; line-height: 1.5; }
.auto-seam-note[hidden] { display: none; }
.auto-opts .seg { gap: 8px; padding: 0; border: 0; background: none; }
.auto-opts .seg-btn { min-width: 68px; justify-content: center; border: 1px solid #ffffff24; background: #ffffff08; }
.auto-opts .seg-btn[aria-checked="true"] { border-color: #ffffff47; }
dialog.modal.auto-modal:focus { outline: none; }
.auto-summary { margin: 10px 0 0; font-size: 13px; color: var(--text); }
.auto-opts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.auto-opts .qp-label { font-size: 13px; }
.auto-msg { margin: 10px 0 0; font-size: 13px; color: #ffd479; }

/* 현재 화면 저장 확인 창의 작은 그림 (v1.12.2) — 시작 시점 · 주석 시점, 3D 화면 비율 그대로 */
.view-shot { margin: 0 auto 14px; border-radius: 8px; overflow: hidden; background: #0b1116; border: 1px solid var(--line); }
.view-shot canvas { display: block; width: 100%; height: 100%; }
.view-shot.is-loading, .view-shot:has(> span) { display: grid; place-items: center; padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }

/* 걷기 시작 위치 고르기 (v1.12.1) — 주석 놓기 안내와 같은 자리 · 모양. 3D 화면은 그대로 눌리고 안내 상자(취소)만 받는다 */
.walk-hint {
  position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 4; /* translate: 나타나는 움직임(transform)과 따로 */
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 24px);
  padding: 5px 6px 5px 14px; border-radius: 8px; border: 1px solid #2fd3a866;
  background: #000000b0; backdrop-filter: blur(4px); color: #c9f7ea; font-size: 12px; word-break: keep-all;
}
.walk-hint .btn { flex-shrink: 0; white-space: nowrap; }
.walk-hint[hidden] { display: none; }
.walk-hint.is-miss #walk-hint-text { color: #ffd479; }
.walk-hint kbd { margin-left: 0; }
.viewport.is-walk-placing .vp-help { opacity: 0; }
@media (hover: none) { .walk-hint-key { display: none; } }
/* 고르는 동안 걷기 단추 깜빡 (게시 화면 하단 바의 걷기 단추와 같게) */
.vp-toolbar .seg-btn.is-pending { color: var(--text); box-shadow: inset 0 0 0 2px #2fd3a8; animation: walk-pending 1.2s ease-in-out infinite; }
@keyframes walk-pending { 50% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .vp-toolbar .seg-btn.is-pending { animation: none; } }

/* v1.5.1: 긴 이름은 여러 줄로 (목록 · 선택 칸) — 왼쪽 칸 폭은 그대로, 가로 스크롤 없음.
   목록은 그리드라 칸이 내용(긴 이름 한 줄) 만큼 넓어졌다: 칸을 0 까지 줄 수 있게 하고 이름은 어디서든 줄을 바꾼다 */
.tabpanel { overflow-x: hidden; }
.obj-list { grid-template-columns: minmax(0, 1fr); }
.obj-top { align-items: flex-start; }
.obj-top .obj-type { margin-top: 1px; }
.obj-name, .sel-name { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.sel-card { align-items: flex-start; }
.sel-card .sel-label, .sel-card .obj-type { margin-top: 2px; }

/* v1.5.1: 3D 오브젝트 설명서 — 제목 옆 ? 원형 단추, 3D 화면(#viewport) 정가운데 창 (게시 화면 '설정' 창과 같은 표면 · 0.35초 움직임) */
.help-round { margin-left: auto; align-self: center; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid #ffffff3d; border-radius: 50%; background: #ffffff0a; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s; }
.help-round:hover, .help-round:focus-visible { color: #fff; border-color: var(--accent); background: #2fd3a81f; box-shadow: 0 0 0 3px #2fd3a826; outline: none; }
.hint kbd { margin-left: 0; }
.help-foot { display: flex; justify-content: flex-end; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff14; }

.objhelp { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; }
.objhelp[hidden] { display: none; }
.oh-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 55%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .35s ease; }
.oh-card { position: relative; display: flex; flex-direction: column; width: min(880px, 100%); max-height: 100%; min-height: 0; border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; background: color-mix(in srgb, #0b1116 90%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 80px rgb(0 0 0 / 60%); color: var(--text); opacity: 0; transform: translateY(18px) scale(.99); transition: opacity .35s ease, transform .35s ease; }
.objhelp.is-open .oh-backdrop { opacity: 1; }
.objhelp.is-open .oh-card { opacity: 1; transform: none; }
.oh-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 10px 22px; }
.oh-head-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--gradient); color: #fff; }
.oh-head-icon svg { width: 21px; height: 21px; }
.oh-head-text { flex: 1; min-width: 0; }
.oh-head h2 { margin: 1px 0 3px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.oh-head p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.oh-close { flex: none; width: 32px; height: 32px; }
.oh-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 22px 12px; border-bottom: 1px solid #ffffff12; }
.oh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border: 1px solid #ffffff1f; border-radius: 999px; background: #ffffff08; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.oh-chip svg { width: 14px; height: 14px; }
.oh-chip:hover, .oh-chip:focus-visible { color: #fff; border-color: #2fd3a880; background: #2fd3a814; outline: none; }
/* v2.3.36 단축키 창의 '사용자 메뉴얼' (오른쪽 끝, 새 탭) */
.oh-chip.oh-manual { margin-left: auto; color: #8ff3d7; border-color: #2fd3a855; text-decoration: none; }
.oh-body { min-height: 0; overflow: auto; padding: 14px 22px 22px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; overscroll-behavior: contain; }
.oh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.oh-sec { min-width: 0; padding: 14px 16px 12px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff05; scroll-margin-top: 10px; }
.oh-keys { grid-column: 1 / -1; }
.oh-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.oh-sec-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #2fd3a81a; color: var(--accent); }
.oh-sec-icon svg { width: 18px; height: 18px; }
.oh-sec h3 { display: flex; align-items: baseline; gap: 7px; margin: 0; font-size: 14px; font-weight: 600; }
.oh-sec h3 small { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--dim); }
.oh-lines { display: grid; gap: 5px; margin: 0; padding: 0 0 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.oh-lines b { color: var(--text); font-weight: 600; }
.oh-lines code { font-size: 11.5px; }
.oh-sec kbd { margin-left: 0; }
.oh-fig { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #ffffff0d; border-radius: 10px; background: #00000059; }
.oh-fig-svg { display: block; width: 100%; height: auto; max-height: 132px; }
.oh-fig text { font-family: inherit; }
.oh-fig .f-tint { stroke: var(--mse-tint); }
.oh-fig .f-tint-fill { fill: color-mix(in srgb, var(--mse-tint) 24%, transparent); stroke: none; }
.oh-fig .f-faint { stroke: #dbe6ff66; }
.oh-fig .f-white { stroke: #fff; stroke-width: 3; }
.oh-fig .f-cursor { fill: #fff; stroke: #0b1116; stroke-width: 1.2; }
.oh-fig .f-cap { fill: var(--dim); stroke: none; font-size: 10px; }
.oh-fig .f-note { fill: #e9f1fb; stroke: none; font-size: 10.5px; }
.oh-fig .f-lead { stroke: #ffffff70; stroke-width: 1; stroke-dasharray: 2 2; }
.oh-fig .f-bg { fill: #ffffff08; stroke: #ffffff1a; }
.oh-fig .f-hole { fill: #0b1116; stroke: none; }
.oh-fig .f-orange { stroke: #ff9e33; }
.oh-fig .f-orange-fill { fill: #ff9e3333; stroke: #ffffff1a; }
.oh-fig .f-green { stroke: #4de67a; }
.oh-fig .f-x { stroke: #ff5a52; stroke-width: 2.4; }
.oh-fig .f-x-fill { fill: #ff5a52; stroke: none; }
.oh-fig .f-y { stroke: #5be36b; stroke-width: 2.4; }
.oh-fig .f-y-fill { fill: #5be36b; stroke: none; }
.oh-fig .f-z { stroke: #4f8dff; stroke-width: 2.4; }
.oh-fig .f-z-fill { fill: #4f8dff; stroke: none; }
.oh-fig .f-ring { stroke: #fff; stroke-width: 1.2; }
.oh-keylist { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 12.5px; align-items: baseline; }
.oh-keylist dt { color: var(--text); white-space: nowrap; }
.oh-keylist dd { margin: 0; color: var(--muted); }
.oh-keylist kbd + kbd { margin-left: 3px; }
.oh-card:focus { outline: none; }
@media (max-width: 640px) {
  .oh-keylist { grid-template-columns: 1fr; gap: 2px 0; }
  .oh-keylist dd { margin-bottom: 7px; }
  .oh-keylist dt { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .oh-backdrop, .oh-card { transition: none; }
}

/* v1.5.2: '선택됨' 칸 — 이름이 여러 줄이어도 표시 · 종류 · X 가 첫 줄(20 px) 가운데에 나란히 */
.sel-card .sel-name { line-height: 20px; }
.sel-card .sel-label { margin-top: 0; height: 20px; display: inline-flex; align-items: center; }
.sel-card .obj-type { margin-top: 1px; height: 18px; display: inline-flex; align-items: center; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.sel-card > .btn.icon.small { margin: -4px 0; }

/* v1.5.2: 다각형 · 올가미 선택 단추 · 그린 모양을 담은 상자 */
.box-select-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.box-select-tools .btn { justify-content: center; }
.box-select-tools .btn.is-active { border-color: var(--accent); background: #2fd3a81f; color: #fff; box-shadow: 0 0 0 2px #2fd3a826; }
.box-mask { margin: 8px 0 4px; padding: 8px 10px; border: 1px dashed #ffffff26; border-radius: 10px; background: #ffffff05; }
.box-mask .hint { margin: 0 0 8px; }
.box-mask-tag { display: inline-block; padding: 0 6px; border-radius: 5px; background: #ffffff1a; color: var(--text); font-weight: 600; }

/* v1.5.2: 오브젝트 색상 (SuperSplat 색상 패널처럼 접히는 칸) */
.obj-color { margin: 10px 0 2px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff05; color: var(--muted); }
.obj-color > summary { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; list-style: none; font-size: 13px; font-weight: 600; color: #dfe6ee; }
.obj-color > summary::-webkit-details-marker { display: none; }
.obj-color > summary small { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--dim); }
.obj-color > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 2px 0 auto; border: solid var(--dim); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .3s; }
.obj-color[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.oc-icon { display: inline-grid; color: var(--accent); }
.oc-icon svg { width: 16px; height: 16px; }
.oc-state { padding: 1px 6px; border-radius: 5px; background: #2fd3a826; color: #7fe6c8; font-size: 10.5px; font-weight: 700; }
.oc-state:empty { display: none; }
.oc-body { padding: 0 10px 10px; }
.oc-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 58px; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; color: var(--text); }
.oc-row .color-field { grid-column: 2 / 4; }
.oc-row input[type="range"] { width: 100%; }
.oc-row .field.num { width: 100%; }

/* v1.5.2: 다각형 · 올가미 선택 — 3D 화면 위 그리는 층, 위쪽 도구 막대 (커서 옆 + − ∩ 는 포토샵처럼) */
.sel-layer { position: absolute; inset: 0; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none; }
.sel-layer[hidden] { display: none; }
.sel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sel-shape { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 6 4; animation: sel-ants .6s linear infinite; filter: drop-shadow(0 0 1px #000); }
@keyframes sel-ants { to { stroke-dashoffset: -10; } }
.sel-live { fill: none; stroke: #ff9a3c; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 1px #000); }
.sel-live.add { stroke: #6be3a8; }
.sel-live.remove { stroke: #ff6b6b; }
.sel-live.intersect { stroke: #ffd36b; }
.sel-start { fill: #ff9a3c; stroke: #fff; stroke-width: 1.5; }
.sel-start.is-closable { fill: #fff; stroke: #ff9a3c; stroke-width: 2.5; }
.sel-bar { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; width: max-content; max-width: calc(100% - 24px); padding: 8px 10px 7px; border: 1px solid #ffffff1f; border-radius: 12px; background: color-mix(in srgb, #0b1116 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 12px 40px #0009; cursor: default; }
.sel-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sel-bar-icon { display: inline-grid; color: var(--accent); }
.sel-bar-icon svg { width: 18px; height: 18px; }
.sel-title { font-size: 13px; white-space: nowrap; }
.sel-ops .seg-btn { gap: 5px; padding: 0 9px; font-size: 12px; white-space: nowrap; }
.sel-ops .seg-btn.is-held { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sel-op-mark { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: #ffffff1a; font-size: 12px; font-weight: 700; line-height: 1; }
.sel-count { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.sel-count:empty { display: none; }
.sel-hint { margin: 6px 2px 0; max-width: 640px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .sel-shape { animation: none; }
}
/* v1.5.2: 설명서 그림 — 선택 모양(점선) · 더하기 · 빼기 표시 */
.oh-fig .f-ants { fill: none; stroke: #fff; stroke-width: 1.3; stroke-dasharray: 4 3; }
.oh-fig .f-ants-out { stroke: #ff8a7a; }
.oh-fig .f-badge rect { fill: #0b1116; stroke: #fff; stroke-width: 1.2; }
.oh-fig .f-badge path { stroke: #6be3a8; stroke-width: 2; }
.oh-fig .f-badge-out path { stroke: #ff8a7a; }

/* v1.5.3: 선택 도구 — 그림 층은 누르기를 받지 않고(카메라는 휠 · 오른쪽 끌기 · 키보드로 그대로), 도구 막대만 받는다 */
.sel-layer { pointer-events: none; }
.sel-bar { pointer-events: auto; }
.viewport.is-selecting canvas { cursor: var(--sel-cursor, crosshair) !important; }
.sel-back[hidden] { display: none; }
.sel-back.is-far:not(:disabled) { border-color: var(--accent); background: #2fd3a826; color: #fff; box-shadow: 0 0 0 3px #2fd3a830; animation: sel-pulse 1.6s ease-in-out infinite; }
@keyframes sel-pulse { 50% { box-shadow: 0 0 0 6px #2fd3a814; } }
.sel-notice { margin: 6px 2px 0; max-width: 640px; font-size: 11.5px; line-height: 1.5; color: #ffd36b; }
.sel-notice[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sel-back.is-far { animation: none; }
}

/* v1.5.3: 지우기 상자 적용 순서 — 아이콘 + 글 단추 */
.box-order { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.box-order .seg-label { flex: none; margin-right: 2px; white-space: nowrap; }
.box-order .btn { flex: none; }
.box-order-pos { margin-right: auto; padding: 1px 7px; border-radius: 6px; background: #ffffff12; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.box-order-pos:empty { display: none; }
.box-order-hint { margin-top: 4px; }

/* v1.5.5: 선택 칸 — 편집 칸(오브젝트 · 지우기 상자) 가운데 큰 쪽 높이를 늘 비워 둔다 (min-height 는 objects.js 가 잰 값) */
.sel-stage { position: relative; }

/* v1.5.5: 리모컨 — 3D 화면 위에 떠 있는 칸 (머리줄로 끌어 옮기고, 접고 펼침) */
.remote { position: absolute; z-index: 25; width: 248px; max-width: calc(100% - 16px); border: 1px solid #ffffff21; border-radius: 12px; background: #10141bf0; box-shadow: 0 12px 32px #0000008c, 0 0 0 1px #00000040; color: var(--text); font-size: 12px; -webkit-user-select: none; user-select: none; }
@supports (backdrop-filter: blur(1px)) { .remote { background: #10141bd9; backdrop-filter: blur(12px); } }
.remote[hidden] { display: none; }
.remote.is-in { animation: remote-in .22s ease-out; }
@keyframes remote-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.remote-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 8px; cursor: grab; touch-action: none; }
.remote.is-dragging { box-shadow: 0 18px 40px #000000a6, 0 0 0 1px #2fd3a866; }
.remote.is-dragging .remote-head { cursor: grabbing; }
.remote-grip, .remote-icon { display: inline-flex; flex: none; }
.remote-grip svg { width: 12px; height: 14px; color: var(--dim); }
.remote-icon svg { width: 15px; height: 15px; color: #7fe6c8; }
.remote-title { flex: none; font-size: 12px; font-weight: 700; color: #7fe6c8; letter-spacing: .02em; }
.remote-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.remote-fold svg { transition: transform .5s ease; }
.remote.is-collapsed .remote-fold svg { transform: rotate(-90deg); }
.remote-body { display: grid; gap: 6px; padding: 2px 8px 8px; border-top: 1px solid #ffffff12; padding-top: 8px; }
.remote.is-collapsed:not(.is-animating) .remote-body { display: none; }
.remote-row { display: flex; align-items: center; gap: 6px; }
.remote-row > .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.remote-seg { display: flex; }
.remote-seg .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.remote-pick { width: 100%; min-width: 0; }
.remote-order { flex: none; padding: 1px 7px; border-radius: 6px; background: #ffffff12; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .remote.is-in { animation: none; }
  .remote-fold svg { transition: none; }
}

/* v1.5.6: 선택 칸이 비었을 때 — 비워 둔 높이를 채우는 안내 (그림 · 고르는 방법 · 단축키 · 장면 숫자 · 바로가기) */
.sel-stage { display: flex; flex-direction: column; }
.sel-stage > .sel-body { flex: none; }
#sel-empty:not([hidden]) { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px dashed #ffffff26; border-radius: 12px; background: linear-gradient(180deg, #ffffff07, #ffffff02); }
#sel-empty .sel-card-empty { margin: 0; padding: 0 0 2px; border: 0; background: none; }
.sel-empty-art { display: block; width: 100%; max-width: 280px; height: auto; margin: 2px auto 0; }
.sel-empty-lead { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.sel-empty-lead b { color: var(--text); font-weight: 600; }
.sel-empty-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sel-empty-stats .chip { padding: 2px 9px; border-radius: 999px; background: #ffffff0f; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sel-empty-stats .chip b { margin-left: 4px; color: var(--text); }
.sel-empty-h { margin: 4px 0 -4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #7fe6c8; }
.sel-empty-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sel-empty-tips li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.sel-empty-tips li b { color: var(--text); font-weight: 600; }
.sel-empty-tips .tip-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #2fd3a81a; color: #7fe6c8; }
.sel-empty-tips .tip-ic svg { width: 14px; height: 14px; }
.sel-empty-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 12px; color: var(--dim); }
.sel-empty-keys dt { white-space: nowrap; color: var(--text); }
.sel-empty-keys dt kbd { margin-left: 0; }
.sel-empty-keys dd { margin: 0; }
.sel-empty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 6px; }
.sel-empty-actions .btn { justify-content: center; }

/* v1.5.6: 기즈모 단추의 단축키 · 잠금 · 누른 곳에 놓기 */
.seg-key { margin-left: 5px; padding: 0 4px; border: 1px solid #ffffff2b; border-radius: 4px; font: 10px/1.4 ui-monospace, Consolas, monospace; color: var(--dim); }
.seg-btn[aria-checked="true"] .seg-key { border-color: #ffffff59; color: inherit; }
.obj-item.is-locked .obj-name::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: -1px; opacity: .7; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.is-locked { color: #ffd36b; }
.lock-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; padding: 7px 8px; border: 1px solid #ffd36b55; border-radius: 9px; background: #ffd36b12; color: #ffe2a1; font-size: 11.5px; line-height: 1.45; }
.lock-note[hidden] { display: none; }
.lock-note .lock-ic { flex: none; display: inline-flex; }
.lock-note .lock-ic svg { width: 14px; height: 14px; }
.lock-note > span:nth-child(2) { flex: 1; min-width: 0; }
.lock-note .btn { flex: none; }
/* v2.2.5 공유 받은 맵: 맵 탭 · 조명 칸 잠김 (inert — 누르거나 고를 수 없음, 흐리게) */
.map-lock-note { margin: 12px 0 4px; }
#tab-scene.is-map-locked > .group, #light-group.is-map-locked > :not(.group-title):not(.lock-note), #ix-display.is-map-locked { opacity: .5; filter: saturate(.55); }
#ix-lock-note { margin: 10px 0 0; }
.viewport.is-obj-placing canvas { cursor: crosshair !important; }
.obj-place-hint { z-index: 26; display: block; } /* v2.3.39 줄바꿈되게 flex 대신 글 흐름 (아이콘 · 표시 고르기 칸은 줄 안에) */
.obj-place-hint[hidden] { display: none; }
.obj-place-hint svg { width: 14px; height: 14px; color: #7fe6c8; vertical-align: -2px; margin-right: 2px; }
.viewport.is-obj-placing .vp-help { opacity: 0; }
.viewport.is-scene-placing .vp-help { opacity: 0; } /* v2.3.39 충돌 상자 '누른 곳에 만들기' 중에도 놓기 안내만 (같은 자리에 겹쳤음) */

/* v1.5.6: 리모컨 숫자 칸 (접고 펼침) */
.remote-fields { border-top: 1px solid #ffffff12; padding-top: 6px; }
.remote-fields > summary { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; list-style: none; font-size: 11.5px; color: var(--muted); }
.remote-fields > summary::-webkit-details-marker { display: none; }
.remote-fields > summary svg { width: 12px; height: 12px; transform: rotate(-90deg); transition: transform .5s ease; }
.remote-fields > summary[aria-expanded="true"] svg { transform: none; }
.remote-fields > summary[aria-expanded="false"] svg { transform: rotate(-90deg); }
.remote-fields[open] > summary svg { transform: none; }
.remote-fields .rf-row { display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; margin-top: 4px; }
.remote-fields .rf-row > span { font-size: 11px; color: var(--dim); }
.remote .field.num.remote-num { width: 100%; min-width: 0; height: 26px; padding: 0 5px; font-size: 11.5px; text-align: right; }
.remote-body > * { min-width: 0; max-width: 100%; }
.remote-row > .btn { overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; }
@media (prefers-reduced-motion: reduce) {
  .remote-fields > summary svg { transition: none; }
}

/* v1.5.6: 목록 항목 — 단추 셋(보기 · 잠그기 · 삭제)은 이름 줄 오른쪽에 한 줄로, 아래 설명 줄은 항목 너비 전부 (항목 높이가 늘지 않게) */
.obj-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; row-gap: 3px; align-items: start; }
.obj-item > .obj-main { display: contents; }
.obj-item .obj-top { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; }
.obj-item .obj-sub, .obj-item .obj-cut { grid-column: 1 / -1; min-width: 0; }
.obj-item > .obj-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: row; gap: 4px; margin: -3px -2px 0 0; } /* v2.5.13 단추 사이 1 → 4 px */

/* v1.5.7: 왼쪽 칸 묶음을 카드로 — 배경 · 테두리 · 제목 띠(아이콘 · 왼쪽 색 막대) · 묶음 사이 간격. 제목 줄을 누르면 접힘 */
.tabpanel { padding: 10px 8px 24px; }
.tabpanel > .group { margin: 0 0 10px; padding: 0 10px 12px; border: 1px solid #ffffff17; border-radius: 12px; background: linear-gradient(180deg, #ffffff09, #ffffff03); box-shadow: inset 0 1px 0 #ffffff08, 0 6px 16px #0000002e; }
.tabpanel > .group:last-child { border-bottom: 1px solid #ffffff17; }
/* v1.9.4: 제목 줄이 없는 칸(주석 탭 맨 위 '주석 추가')은 위 여백도 아래만큼 — 단추가 칸 테두리에 붙어 보이지 않게 */
.tabpanel > .group:not(:has(> .group-title)) { padding-top: 12px; }
.tabpanel > .group > .group-title { position: relative; align-items: center; margin: 0 -10px 12px; padding: 9px 8px 9px 14px; border-bottom: 1px solid #ffffff12; border-radius: 12px 12px 0 0; background: #ffffff08; }
.tabpanel > .group > .group-title::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: .85; }
.tabpanel > .group > .group-title > svg:first-child { flex: none; width: 15px; height: 15px; color: #7fe6c8; }
.tabpanel > .group > .group-title > .help-round { margin-left: auto; }
.tabpanel > .group > .group-title.is-foldable { cursor: pointer; user-select: none; -webkit-user-select: none; }
.tabpanel > .group > .group-title.is-foldable:hover { background: #ffffff0d; }
.group-fold { margin-left: auto; width: 24px; height: 24px; color: var(--dim); }
.help-round + .group-fold { margin-left: 4px; }
.group-fold svg { width: 14px; height: 14px; transition: transform .5s ease; }
.tabpanel > .group.is-folded:not(.is-animating) { padding-bottom: 0; }
.tabpanel > .group.is-folded:not(.is-animating) > :not(.group-title) { display: none !important; }
.tabpanel > .group.is-folded:not(.is-animating) > .group-title { margin-bottom: 0; border-bottom-color: transparent; border-radius: 12px; }
.tabpanel > .group > .group-title { transition: background-color .5s, border-color .5s; }
.tabpanel > .group.is-folded .group-fold svg { transform: rotate(-90deg); }
#sel-group > .group-title { background: #2fd3a80d; }
@media (prefers-reduced-motion: reduce) {
  .group-fold svg { transition: none; }
}

/* v1.5.7: 지우는 높이 — 바운딩 박스에 맞추기 단추 */
.obj-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obj-label-row .btn { padding: 0 8px; height: 24px; font-size: 11px; }

/* v1.5.7: 리모컨 아이콘 단추 줄 (잠금 · 삭제 · 선택 풀기) */
.remote-row.is-icons { justify-content: flex-end; }
/* v1.16.2 충돌 걷기 모드 리모컨: 면 표시 스위치 · 종류 단추의 색 점 */
.remote-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding: 0 2px; color: var(--muted); font-size: 12px; cursor: pointer; }
.remote-seg .cbx-dot { margin-right: 4px; width: 8px; height: 8px; }
.remote-row > .btn .cbx-dot { margin-right: 4px; width: 8px; height: 8px; }
.remote-row.is-icons > .btn { flex: none; width: 32px; height: 28px; padding: 0; justify-content: center; }

/* v1.5.7: 통계 — 3D 화면 오른쪽 아래, 반투명 바탕 (누르기는 지나감) */
.obj-stats { position: absolute; right: 12px; bottom: calc(66px + var(--vp-tb-extra, 0px)); z-index: 24; width: 280px; max-width: calc(100% - 24px); padding: 10px 12px 11px; border: 1px solid #ffffff1f; border-radius: 12px; background: #0b0f14a8; box-shadow: 0 10px 28px #00000059; color: var(--text); font-size: 11.5px; pointer-events: none; animation: os-in .2s ease-out; }
@supports (backdrop-filter: blur(1px)) { .obj-stats { background: #0b0f14b3; backdrop-filter: blur(10px); } }
.obj-stats[hidden] { display: none; }
@keyframes os-in { from { opacity: 0; transform: translateY(6px); } }
.os-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid #ffffff17; }
.os-head > svg { flex: none; width: 14px; height: 14px; color: #7fe6c8; }
.os-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.os-head .obj-type { flex: none; }
.os-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; }
.os-rows dt { color: #9fadbb; white-space: nowrap; }
.os-rows dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: #e6edf3; }
.os-rows dt:empty + dd { grid-column: 1 / -1; text-align: left; color: var(--dim); white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .obj-stats { animation: none; }
}

/* v1.5.11: 미리보기 품질 칸 (도움말 칸과 같은 자리 · 모양) */
.quality-pop { width: min(440px, calc(100% - 32px)); }
.qp-row { display: grid; gap: 6px; margin: 2px 0 10px; }
.qp-label { font-size: 12px; color: var(--text); }
.qp-label small { margin-left: 8px; color: var(--dim); font-size: 10.5px; }
.qp-seg { display: flex; }
.qp-seg .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.quality-pop .row { margin: 0 0 8px; }
.quality-pop .row small { font-size: 10.5px; margin-left: 4px; }
.qp-info { margin: 4px 0 8px; padding: 6px 9px; border-radius: 8px; background: #ffffff0b; color: #cfe3ef; font-size: 11.5px; font-variant-numeric: tabular-nums; }
#tool-quality { position: relative; }
#tool-quality.has-custom::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0d1217; }
/* v2.7.0 편집기 저사양 모드 (assets/lowspec.js): 품질 창 맨 위 칸, 세 갈래, 그래픽 메모리. 켠 동안 품질 단추에 주황 점 */
.ls-block { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff06; }
.quality-pop .ls-row { margin: 0; }
.quality-pop .ls-row label small { display: block; margin: 2px 0 0; color: var(--dim); font-size: 10.5px; }
.ls-body { display: grid; gap: 6px; padding-top: 10px; }
.ls-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--text); cursor: pointer; }
.ls-opt input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.ls-mem { margin: 8px 0 0; font-size: 11.5px; color: #cfe3ef; font-variant-numeric: tabular-nums; }
#tool-quality.has-lowspec::after { content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 0 2px #0d1217; }

/* v1.5.15: 도움말 · 품질 · 카메라 속도 칸은 가운데 맞춤을 translate 속성으로 (위 .help-pop) — 나타나고 사라지는 움직임의 transform 이
   가운데 맞춤을 덮어써 칸이 반 폭만큼 오른쪽에서 나왔다가 가운데로 튀던 것 */

/* 카메라 속도 칸 (v1.5.15) */
#tool-speed { position: relative; }
.speed-pop { width: min(430px, calc(100% - 32px)); }
.speed-pop .sp-row { display: grid; gap: 6px; margin: 2px 0 12px; }
.speed-pop .qp-label small { display: block; margin: 2px 0 0; line-height: 1.5; }
.speed-pop .qp-label kbd { font-size: 10px; }
.speed-pop .sp-slider { display: flex; align-items: center; gap: 12px; }
.speed-pop .sp-slider input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.speed-pop .sp-slider output { min-width: 128px; text-align: right; font-size: 12px; color: #cfe3ef; font-variant-numeric: tabular-nums; white-space: nowrap; }
.speed-pop .hint { margin: 0 0 8px; }

/* 카메라 속도 알림: 3D 화면 아래 가운데, 도구 막대 바로 위 (잠깐 보이고 사라짐) */
.speed-toast { position: absolute; left: 50%; bottom: calc(64px + var(--vp-tb-extra, 0px)); translate: -50% 0; z-index: 7; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #0d1217eb; border: 1px solid #ffffff24; box-shadow: 0 10px 32px #0009; color: #e8eef5; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.speed-toast .st-icon { display: inline-grid; color: var(--accent); }
.speed-toast .st-icon svg { width: 16px; height: 16px; }
.speed-toast .st-bars { display: inline-flex; align-items: flex-end; gap: 3px; }
.speed-toast .st-bars i { width: 6px; border-radius: 2px; background: #ffffff26; }
.speed-toast .st-bars i.on { background: var(--accent); }
.speed-toast b { font-variant-numeric: tabular-nums; }
.speed-toast small { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* 아래 칸들은 3D 화면 높이 안에서 (작은 화면에서 위로 넘치지 않게 · 넘치면 안에서 스크롤) */
.help-pop { max-height: calc(100% - 76px - var(--vp-tb-extra, 0px)); overflow-y: auto; overscroll-behavior: contain; }

/* v1.7.0 서버 마무리 변환 — 오브젝트 목록 줄 (objects.js '서버 마무리 변환') */
.obj-sub.obj-fin { color: #9cc8ff; }
.obj-sub.obj-fin.bad { color: #ff8a7a; }
.obj-fin .btn { height: 20px; margin-left: 6px; padding: 0 8px; font-size: 11px; vertical-align: 1px; }

/* 회전축 (v1.9.0 — SuperSplat 편집기의 view cube): 3D 화면 오른쪽 위 (v1.9.1, 위쪽 조작 안내 줄 아래 — 리모컨은 그 아래에서 시작). 원만 눌리고 나머지는 3D 화면으로 지나간다 (assets/viewcube.js) */
.view-cube { position: absolute; right: 10px; top: 46px; z-index: 2; width: 104px; display: grid; justify-items: center; gap: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.view-cube svg { display: block; overflow: visible; filter: drop-shadow(0 1px 3px #000c); }
.view-cube .vc-dot { cursor: pointer; pointer-events: auto; outline: none; }
.view-cube .vc-dot circle { transition: stroke .15s, stroke-width .15s; }
.view-cube .vc-dot:hover circle, .view-cube .vc-dot:focus-visible circle { stroke: #fff; stroke-width: 3; }
.view-cube text { pointer-events: none; font-family: Arial, var(--font); }
.view-cube-badge { margin-top: -4px; padding: 1px 9px; border-radius: 999px; background: #000000b0; border: 1px solid #ffffff2e; color: #e8eef5; font-size: 11px; letter-spacing: .04em; pointer-events: auto; cursor: default; }
@media (max-width: 900px) { .view-cube { transform: scale(.8); transform-origin: top right; } }

/* 카메라 이동 범위 (v1.9.0) */
.cb-coords { margin-top: 8px; }
.hint.is-warn { color: #ffd479; }
#cb-edit.is-active { border-color: #ffa829aa; background: #ffa8291c; color: #ffe2b0; }

/* 장면 탭 '설정 파일' 칸 (v1.9.3) — settings.json 가져오기 · 내보내기 두 단추 (v1.9.2 의 패널 아래 고정 줄을 없앰) */
.file-io { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.file-io .btn { min-width: 0; }

/* 상호작용 (v1.17.0 — 예전 주석): 종류별 묶음의 목록 줄 · 고른 것의 편집 칸 (assets/interactions.js) */
.ix-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ix-list:empty { display: none; }
.ix-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; align-items: start; padding: 8px 6px 5px 8px; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff06; cursor: pointer; transition: border-color .3s, background .3s, opacity .3s; }
.ix-item:hover { border-color: #ffffff26; }
.ix-item:focus-visible { outline: 2px solid #2fd3a888; outline-offset: 1px; }
.ix-item.is-selected { border-color: #2fd3a870; background: #2fd3a80d; }
.ix-item.is-off { opacity: .6; }
.ix-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #2fd3a8; background: #0b1116; color: #fff; box-sizing: border-box; }
.ix-ic svg { width: 15px; height: 15px; }
.ix-item.is-selected .ix-ic { background: var(--gradient); border-color: #fff; }
.ix-main { min-width: 0; display: grid; gap: 2px; }
.ix-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); }
.ix-sub { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.ix-meta { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ix-thumb { width: 56px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid #ffffff1f; background: #0b1116; }
.ix-thumb[hidden] { display: none; }
.ix-thumb.is-broken { opacity: .3; }
/* v2.7.2 단추 사이 4px (테두리 단추가 1px 로 붙어 보이던 것 — 모든 맵 메뉴 줄도 같은 줄) */
.ix-tools { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; }
.ix-tools .btn.icon { width: 28px; height: 26px; }
.ix-edit { margin-top: 10px; }
.ix-edit .sel-card { margin-top: 0; }
.ix-ic.is-sel { flex: none; width: 22px; height: 22px; }
.ix-ic.is-sel svg { width: 13px; height: 13px; }
.sel-card .ix-type { background: #1f6f5f; }
.ix-sec { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #ffffff0d; }
.ix-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ix-label-row label { color: inherit; }
.ix-count { font-size: 10.5px; letter-spacing: 0; color: var(--dim); font-variant-numeric: tabular-nums; }
.ix-form .field:not(.num) { width: 100%; }
.ix-lift-row { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.ix-lift-row label { margin-right: auto; font-size: 12.5px; color: #d5dde6; }
.ix-lift-row .field.num { width: 72px; height: 28px; }
.ix-unit { font-size: 12px; color: var(--muted); }
/* v2.0.18 버튼 효과 (interactions.js — 나타남 · 사라짐 효과 고르기 · 길이) */
.ix-fx-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 62px auto; align-items: center; gap: 6px; margin: 2px 0 6px; }
.ix-fx-row label { font-size: 12.5px; color: #d5dde6; }
.ix-fx-row .field { height: 28px; min-width: 0; }
.ix-fx-row .field.num { width: 62px; }
.ix-fx-row .field.num:disabled { opacity: .45; }
.ix-fx-hint { margin-top: 4px; }
.ix-anchor { font-variant-numeric: tabular-nums; }
.ix-state { margin: 2px 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* v2.3.61 편집 칸 미리보기 = 썸네일이 보이는 틀 비율 (--ix-tb-r, 높이 200 px 까지 — 좁으면 가운데) */
.ix-thumb-box { position: relative; display: grid; place-items: center; aspect-ratio: var(--ix-tb-r, 16 / 9); width: min(100%, calc(200px * var(--ix-tb-r, 99))); box-sizing: border-box; margin: 2px auto 8px; border: 1px solid #ffffff24; border-radius: 9px; overflow: hidden; background: #0b1116; }
/* v2.3.56 그림은 칸에 꽉 (세로로 긴 그림이 위쪽만 보이던 것) — 보이는 쪽은 '그림 정렬' */
.ix-thumb-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ix-thumb-box > span { padding: 10px; font-size: 11.5px; color: var(--dim); text-align: center; }
.ix-thumb-box.is-empty { border-style: dashed; }
.ix-thumb-box.is-empty img, .ix-thumb-box:not(.is-empty) > span { display: none; }
.ix-thumb-box.is-broken img { opacity: .25; }
.ix-side .seg-btn { flex: 1; justify-content: center; }
.ix-text { min-height: 76px; font-size: 13px; resize: vertical; }
.ix-form .row small { margin-left: 4px; font-size: 10.5px; }
.ix-preview-row { margin-top: 12px; }
.ix-preview-row .btn { flex: 1; justify-content: center; }
/* 놓는 동안: 3D 화면은 그대로 움직이고(끌기) 누르는 곳이 놓을 자리 — 커서 · 단추 표시 */
.viewport.is-ix-placing canvas { cursor: crosshair !important; }
.viewport.is-ix-placing .vp-help { opacity: 0; }
#tool-ann.is-active, #tab-ann [data-ix-add].is-active { box-shadow: inset 0 0 0 2px #2fd3a8; }

/* v1.20.0: 시작 시 숨기기 — 목록 표시 · 함께 멈출 지우기 상자 */
.obj-tag { flex: none; padding: 0 6px; border: 1px solid #ffd47966; border-radius: 6px; color: #ffd479; font-size: 10px; font-weight: 600; white-space: nowrap; }
.obj-item .obj-start-line { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--dim); font-size: 11px; }
.obj-start-body { display: grid; gap: 6px; margin: -2px 0 8px; }
.obj-start-body .hint { margin: 0; }
.obj-start-body .hint.is-warn { color: #ffd479; }
.obj-linked { display: grid; gap: 3px; }
.obj-linked .card-label { margin: 2px 0 2px; }
.obj-linked-item { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 2px 6px; border: 1px solid #ffffff12; border-radius: 7px; background: #ffffff05; font-size: 12px; cursor: pointer; }
.obj-linked-item input { flex: none; margin: 0; accent-color: var(--accent); }
.obj-linked-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj-linked-ov { color: #7fe6c8; font-size: 11px; }
/* v2.5.8 다른 그룹이 정하는 상자 수 안내 — 목록 줄과 6 px (안내 글 → 목록 간격과 같게) */
.obj-linked .hint.obj-linked-note { margin-top: 3px; }

/* v2.0.5 편집기의 모든 단추에 테두리 선 — 선 없는 단추(ghost · 도구 막대 아이콘 · 칸 접기 · 모드 단추 · 창 닫기)가 글자처럼 떠 보여 어색하다는 의견.
   모양 · 크기 · 색은 그대로 두고 선만 (편집기 화면만 — 목록 · 프로젝트 화면은 mse.css 그대로) */
.btn.ghost { border-color: var(--line-2); }
.btn.ghost:hover { border-color: #ffffff45; }
.btn.ghost.danger { border-color: #ff6b8150; }
.btn.primary { border: 1px solid #ffffff42; }
.modal-head .btn.icon[data-close] { border: 1px solid var(--line-2); }
.seg { border: 1px solid var(--line-2); }
.seg-btn { border: 1px solid #ffffff17; }
.seg-btn:hover { border-color: #ffffff38; }
.seg-btn[aria-checked="true"], .seg-btn[aria-pressed="true"] { border-color: #ffffff47; }

/* v2.0.5 왼쪽 패널 탭 · 꽉 찬 단추(빨강 · 노랑)도 선 */
.tabs { border: 1px solid var(--line); }
.tabs button { border: 1px solid #ffffff12; }
.tabs button:hover { border-color: #ffffff2e; }
.tabs button[aria-selected="true"] { border-color: #ffffff38; }
.btn.danger-solid, .btn.warn-solid { border: 1px solid #ffffff38; }

/* v2.0.6 왼쪽 칸 묶음 순서 바꾸기 (assets/panelsort.js): 제목 줄을 끌면 제목 복제본이 따라오고, 원래 묶음은 흐리게 · 점선 */
.tabpanel > .group > .group-title.is-foldable { cursor: grab; }
.tabpanel > .group.is-dragging { opacity: .4; outline: 1px dashed #2fd3a8aa; outline-offset: -2px; border-radius: 10px; }
.group-sort-ghost { position: fixed; z-index: 70; pointer-events: none; padding: 9px 12px; border: 1px solid #2fd3a8; border-radius: 10px; background: #111820f2; box-shadow: 0 12px 32px #000a; }
.group-sort-ghost .group-title { margin: 0; }
body.is-group-sorting, body.is-group-sorting * { cursor: grabbing !important; user-select: none !important; }

/* v2.0.26 레이어 탭 (assets/layers.js) — 탭 넷: 왼쪽 칸(320 px)에서는 아이콘을 빼고 글 · 개수만 한 줄에 (넓은 칸 — 휴대폰 아래 칸 — 은 아이콘도) */
.tabs { container-type: inline-size; grid-template-columns: .55fr 1.05fr 1.3fr .95fr; gap: 3px; }
.tabs button { gap: 4px; padding: 0 3px; font-size: 12.5px; min-width: 0; }
.tabs button svg { width: 14px; height: 14px; flex: none; }
.tabs .count { min-width: 16px; padding: 0 4px; font-size: 10.5px; line-height: 17px; }
@container (max-width: 380px) {
  .tabs button svg { display: none; }
}
/* v2.4.0-beta1 AI 에이전트 탭: 둘째 줄 전체 폭 (기본 칸 320 px — 한 줄에 다섯이면 상호작용 60/74 · 3D 오브젝트 75/94 px 로 넘침, 2026-10-18 실측).
   아이콘은 좁은 칸에서도 보임 (자리가 넉넉함). 일하는 중이면 오른쪽에 점 (다른 탭을 보고 있어도 — Spline 의 탭 표시등처럼) */
.tabs .tab-ai { grid-column: 1 / -1; }
.tabs .tab-ai svg { display: block; width: 14px; height: 14px; }
.tabs .tab-ai .ai-tab-state { width: 7px; height: 7px; border-radius: 50%; background: #9b87ff; box-shadow: 0 0 0 0 #9b87ff99; animation: ai-tab-pulse 1.4s ease-out infinite; }
@keyframes ai-tab-pulse { 0% { box-shadow: 0 0 0 0 #9b87ff99; } 100% { box-shadow: 0 0 0 7px #9b87ff00; } }
@media (prefers-reduced-motion: reduce) { .tabs .tab-ai .ai-tab-state { animation: none; } }
/* 줄 (인트로 스킨 '층' 과 같은 손맛 — 위 = 앞, 들여쓰기 = 그룹 안) */
.lyr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 8px; }
.lyr-actions #lyr-fold { margin-left: auto; }
/* v2.2.1 겹친 지우기 상자 합치기 확인 창 (boxmerge.js — 경고 · 목록은 편집본 버리기 창의 draft-discard 모양) */
.box-merge .draft-discard-info dd > div + div { margin-top: 3px; }
/* v2.2.4 부분으로 합치기만이면 경고 대신 안내 (나누기로 되돌림) */
.box-merge-note { display: flex; align-items: center; gap: 8px; margin: 0 !important; padding: 9px 11px; border: 1px solid #2fd3a844; border-radius: 9px; background: #2fd3a80f; color: #bdf3e3 !important; font-size: 12.5px !important; line-height: 1.5; }
.box-merge-note svg { flex: none; width: 18px; height: 18px; color: #2fd3a8; }
.lyr-wrap { position: relative; max-height: 56vh; min-height: 96px; overflow: hidden auto; margin: 0 -4px; padding: 3px 4px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff04; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.lyr-wrap .empty { padding: 14px 8px; font-size: 12px; line-height: 1.55; }
.lyr-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; outline: none; border-radius: 8px; user-select: none; -webkit-user-select: none; }
.lyr-list.is-drop-root { background: #2fd3a80d; outline: 1px dashed #2fd3a866; outline-offset: 2px; }
.lyr-row { min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 2px 3px 2px calc(2px + var(--d, 0) * 14px); border: 1px solid transparent; border-radius: 7px; color: #cfd8e2; font-size: 12.5px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.lyr-row:hover { background: #ffffff0a; }
.lyr-row.is-mark { background: #2fd3a812; border-color: #2fd3a833; }
.lyr-row.is-sel { border-color: #2fd3a866; background: #2fd3a81f; color: #fff; }
.lyr-row.is-hidden .lyr-text, .lyr-row.is-hidden .lyr-ic { opacity: .42; }
.lyr-row.is-dragging { opacity: .35; }
.lyr-row.is-drop-in { background: #c3a6ff21; outline: 1px dashed #c3a6ff; }
.lyr-row.is-g .lyr-ic { color: #c3a6ff; }
.lyr-row.is-g .lyr-name { font-weight: 600; }
.lyr-row.is-o .lyr-ic { color: var(--accent); }
.lyr-row.is-b .lyr-ic { color: #8fb6ff; }
.lyr-row.is-i .lyr-ic { color: #ffd479; }
.lyr-row.is-anim { min-height: 28px; color: var(--muted); }
.lyr-row.is-anim .lyr-ic { color: #7fe6c8; }
.lyr-row.is-anim .lyr-name { font-size: 11.5px; }
.lyr-row.is-anim.is-off .lyr-text { opacity: .55; }
.lyr-grip { flex: none; display: grid; place-items: center; width: 14px; height: 22px; color: var(--dim); cursor: grab; touch-action: none; }
.lyr-grip.is-blank { cursor: inherit; }
.lyr-grip svg { width: 13px; height: 13px; }
.lyr-caret { flex: none; display: grid; place-items: center; width: 16px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--dim); cursor: pointer; }
.lyr-caret svg { width: 12px; height: 12px; transform: rotate(-90deg); transition: transform .2s ease; }
.lyr-caret.is-open svg { transform: none; }
.lyr-caret.is-blank { cursor: inherit; }
.lyr-caret:not(.is-blank):hover { background: #ffffff14; color: var(--text); }
.lyr-ic { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.lyr-ic svg { width: 14px; height: 14px; }
.lyr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.lyr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--dim); }
.lyr-badge { flex: none; padding: 0 6px; border-radius: 6px; background: #c3a6ff26; color: #ddd0ff; font-size: 10px; line-height: 16px; }
.lyr-state { flex: none; display: grid; place-items: center; width: 16px; color: #ffd479; opacity: .8; }
.lyr-state svg { width: 12px; height: 12px; }
/* 도구는 올렸을 때 · 고른 줄에만 (이름이 넓게) — 숨김 · 잠금은 그 표시만 늘 */
.lyr-tools { display: none; flex: none; gap: 4px; } /* v2.5.13 단추 사이 4 px (고른 줄에서 테두리가 붙어 보였다) */
.lyr-row:hover .lyr-tools, .lyr-row.is-sel .lyr-tools, .lyr-row:focus-within .lyr-tools { display: flex; }
.lyr-row:is(.is-own-hidden, .is-up-hidden, .is-own-locked, .is-start):not(:hover):not(.is-sel):not(:focus-within) .lyr-tools { display: flex; }
.lyr-row:not(:hover):not(.is-sel):not(:focus-within) .lyr-tool:not(.is-on) { display: none; }
.lyr-tools .btn.icon.small { width: 22px; height: 22px; }
.lyr-tools .btn svg { width: 13px; height: 13px; }
.lyr-tool.is-on { color: #ffd479; }
/* v2.3.21 시작 시 숨기기 단추 — 켜면 강조색, 위 그룹으로 숨으면 흐리게, 나타나게 하는 것이 없으면 노랑 경고 */
.lyr-tool.is-start.is-on { color: #2fd3a8; }
.lyr-tool.is-start.is-on.is-inherited { opacity: .55; }
.lyr-tool.is-start.is-on.is-warn { color: #ffb84d; opacity: 1; }
/* v2.3.25 위 그룹의 시작 시 숨기기를 따름 — 바꾸지 못함 (누르면 안내 창) */
.lyr-tool.is-start.is-locked { cursor: help; }
.switch.is-locked span { opacity: .55; }
.switch.is-locked input { cursor: help; }
.lyr-dropmark { position: absolute; z-index: 2; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 6px #2fd3a8; pointer-events: none; }
.lyr-rename { flex: 1; min-width: 0; height: 24px; padding: 0 6px; font-size: 12.5px; }
.lyr-stats { margin: 6px 0 0; }
.lyr-keys { margin-top: 2px; font-size: 10.5px; }
body.is-layer-dragging, body.is-layer-dragging * { cursor: grabbing !important; user-select: none !important; }
/* 선택 칸 */
.lyr-sel .lyr-gname { flex: 1; min-width: 0; height: 26px; font-size: 13px; }
.lyr-sel .sel-card { align-items: center; }
.lyr-chips { justify-content: flex-start; margin: 0 0 8px; }
.lyr-path { margin: -4px 0 8px; }
.lyr-coords { display: grid; gap: 4px; margin: 8px 0 2px; }
.lyr-coord2 { grid-template-columns: 44px 1fr 40px 1fr; }
.lyr-unit { font-size: 11px; color: var(--muted); text-align: right; }
.lyr-adds { align-items: center; }
.lyr-adds .lyr-addix { flex: 1; min-width: 96px; height: 28px; font-size: 12px; }
.lyr-danger { margin-top: 10px; }
.lyr-card-empty .sel-empty-tips { margin-top: 10px; }
.lyr-card-group .row, .lyr-card-item .col-actions, .lyr-card-multi .col-actions { margin-top: 4px; }
.remote-group .lyr-remote-sum { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.remote-group .lyr-remote-sum svg { width: 14px; height: 14px; color: #c3a6ff; }
/* 3D 오브젝트 탭 목록 줄의 그룹 (레이어 탭) · 그룹이 잠근 자물쇠 */
.obj-group-line { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10.5px; color: #c9b5ff; }
.obj-group-line svg { width: 12px; height: 12px; flex: none; }
.btn.is-inherited { opacity: .55; }

/* v2.1.4 시작 지점 안내 · 이동 범위 / 충돌 상자 기즈모(이동 · 회전) · 누른 곳에 만들기 */
.cam-start-hint { margin: 2px 0 8px; }
.scene-gizmo { margin: 8px 0 2px; }
.scene-gizmo[hidden] { display: none; }
/* v2.1.5 리모컨의 기즈모 칸 — 아이콘 · 글자 · 단축키 숫자, 좁으면 숫자만 숨김 */
.remote-gizmo { container: rgizmo / inline-size; }
.remote-gizmo .seg-btn { gap: 4px; padding: 0 6px; overflow: hidden; }
.remote-gizmo .seg-key { margin-left: 2px; }
@container rgizmo (max-width: 238px) {
  .seg-key { display: none; }
}
.cbx-edit .scene-gizmo { margin: 8px 0 6px; }
#cbx-place.is-active, .remote .is-scene-placing { border-color: #2fd3a8; color: #c9f7ea; }
.viewport.is-scene-placing canvas { cursor: crosshair !important; }

/* v2.1.16 상자 만들기 (assets/boxmaker.js) — 창 · 오브젝트 칸의 상자 줄 */
.obj-box-btn { margin-top: 6px; margin-bottom: 14px; } /* v2.3.33 아래 '3D 모델 가볍게' 줄과 간격 넓게 */
.obj-box-btn small { margin-left: 4px; font-weight: 400; }
.obj-boxrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 10px; padding: 8px 10px; border: 1px solid #ffffff1c; border-radius: 10px; background: #ffffff07; }
.obj-boxrow[hidden] { display: none; }
.obj-boxrow-icon { display: inline-grid; color: var(--accent); }
.obj-boxrow-icon svg { width: 15px; height: 15px; }
.obj-boxrow-text { flex: 1 1 140px; min-width: 0; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.obj-boxrow-actions { display: flex; gap: 6px; flex-wrap: wrap; }
/* v2.4.0-beta4 AI 에이전트가 만든 오브젝트 줄 (내보내기) */
.obj-airow { border-color: #9b87ff40; background: #9b87ff0d; }
.obj-airow .obj-boxrow-icon { color: #b9a7ff; }
/* v2.3.43 3D 파일 줄 — 지금 파일 이름 · 교체하기 · 이전으로 되돌리기 */
.obj-filerow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 10px; padding: 8px 10px; border: 1px solid #ffffff1c; border-radius: 10px; background: #ffffff07; }
.obj-filerow-label { flex: none; font-size: 11.5px; color: var(--dim); }
.obj-filerow-name { flex: 1 1 120px; min-width: 0; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.obj-filerow-actions { display: flex; flex: 1 1 100%; gap: 6px; flex-wrap: wrap; }
dialog.modal.bm-modal { width: min(1120px, calc(100vw - 32px)); }
/* v2.3.59 내 프리셋 줄 (presets.js — 상자 만들기 · 썸네일 디자인) */
.preset-bar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid #ffffff14; border-radius: 10px; background: #ffffff05; }
.preset-bar[hidden], .preset-row[hidden] { display: none; }
.preset-main, .preset-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.preset-label { flex: none; font-size: 12px; font-weight: 600; color: #d5dde6; }
.preset-pick, .preset-name { flex: 1 1 140px; min-width: 0; height: 30px; }
.preset-ask { flex: 1 1 100%; font-size: 12px; color: #ffd479; }
.bm-modal .modal-head h2 { display: flex; align-items: center; gap: 8px; }
.bm-modal .modal-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
/* v2.2.1 왼쪽 = 3D 미리 보기, 오른쪽 = 설정 */
.bm-body { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 18px; align-items: start; }
.bm-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-row > label { width: 92px; flex: none; font-size: 12.5px; color: var(--muted); }
.bm-row[hidden], .bm-surface-texture[hidden] { display: none; }
.bm-sub { font-size: 12.5px; color: var(--muted); margin-bottom: -4px; }
.bm-seg .seg-btn { padding: 0 12px; white-space: nowrap; }
.bm-templates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bm-template { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid #ffffff1c; border-radius: 9px; background: #ffffff08; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.bm-template small { color: var(--dim); font-size: 11px; }
.bm-template:hover { border-color: #ffffff40; }
.bm-template.is-on { border-color: var(--accent); background: #2fd3a81a; box-shadow: inset 0 0 0 1px var(--accent); }
.bm-sizes .bm-size-cell { display: inline-flex; flex-direction: column; gap: 2px; }
.bm-sizes .bm-size-cell small { font-size: 10.5px; color: var(--dim); }
.bm-sizes .field.num { width: 78px; }
.bm-textures { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 236px; overflow: auto; padding: 2px; }
.bm-tex { display: flex; flex-direction: column; gap: 3px; padding: 3px; border: 1px solid #ffffff1a; border-radius: 8px; background: #ffffff06; color: var(--text); cursor: pointer; font: inherit; font-size: 11px; }
.bm-tex img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; display: block; }
.bm-tex span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-tex:hover { border-color: #ffffff45; }
.bm-tex[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: #2fd3a814; }
.bm-file-name { font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.bm-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bm-preview { width: 100%; height: auto; aspect-ratio: 560 / 360; border-radius: 10px; background: #05080b; border: 1px solid #ffffff14; }
.bm-preview3d { aspect-ratio: 4 / 3; cursor: grab; touch-action: none; background: radial-gradient(ellipse at 50% 30%, #16242c, #05080b 75%); }
.bm-preview3d:active { cursor: grabbing; }
.bm-hint { margin: -2px 0 0; font-size: 11px; }
.bm-side { position: sticky; top: 0; }
.bm-mat { border: 1px solid #ffffff14; border-radius: 10px; padding: 8px 10px 10px; background: #ffffff05; }
.bm-mat > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.bm-mat .bm-row { margin-top: 6px; }
.bm-range { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.bm-range input[type=range] { flex: 1; accent-color: var(--accent); }
.bm-val { min-width: 2.8em; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text); }
.bm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.bm-info { margin: 0; font-size: 12.5px; color: var(--text); }
.bm-warn { margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #ff8a7a66; background: #ff8a7a14; color: #ffd0c8; font-size: 12.5px; }
.bm-warn[hidden] { display: none; }
.bm-note { margin: 0; font-size: 11.5px; line-height: 1.5; }
.bm-foot { grid-column: 1 / -1; padding: 4px 0 0; }
@media (max-width: 860px) {
  .bm-body { grid-template-columns: minmax(0, 1fr); }
  .bm-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v2.2.0 계정 · 함께 편집 — 머리줄 '함께 편집 중' (editor.js setEditors) */
.ed-coedit { flex: none; min-width: 0; max-width: 240px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid #8fb6ff59; border-radius: 999px; background: #8fb6ff14; color: #cfe0ff; font-size: 11.5px; white-space: nowrap; }
.ed-coedit[hidden] { display: none; }
.ed-coedit-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-coedit-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8fb6ff; box-shadow: 0 0 0 0 #8fb6ff80; animation: ed-coedit-pulse 2.4s ease-out infinite; }
@keyframes ed-coedit-pulse { 0% { box-shadow: 0 0 0 0 #8fb6ff80; } 70%, 100% { box-shadow: 0 0 0 7px #8fb6ff00; } }
/* v2.2.12 함께 편집하는 계정이 모두 부재중이면 점이 회색 · 멈춤 */
.ed-coedit.is-away { border-color: #ffffff2e; background: #ffffff0a; color: #b9c4cf; }
.ed-coedit.is-away .ed-coedit-dot { background: #7d8a96; animation: none; }
@media (prefers-reduced-motion: reduce) { .ed-coedit-dot { animation: none; } }
@media (max-width: 1100px) { .ed-coedit { flex: 0 1 auto; max-width: 150px; } }

/* v2.2.0 다른 계정이 올린 항목 — 회색 · 고를 수 없음 (목록 · 레이어 · 맵 배치의 지우기 상자) */
.obj-item.is-foreign, .ix-item.is-foreign, .place-box-item.is-foreign { cursor: not-allowed; border-style: dashed; border-color: #ffffff1a; background: #ffffff03; filter: grayscale(1); opacity: .5; }
.obj-item.is-foreign:hover, .ix-item.is-foreign:hover { border-color: #ffffff2e; }
.obj-item.is-foreign .obj-name::after { display: none; }
.obj-item.is-foreign .obj-side .btn { opacity: .7; }
.lyr-row.is-foreign { cursor: not-allowed; color: #8c96a1; filter: grayscale(1); }
.lyr-row.is-foreign .lyr-text, .lyr-row.is-foreign .lyr-ic { opacity: .5; }
.lyr-row.is-foreign .lyr-grip { cursor: not-allowed; opacity: .3; }
.lyr-row.is-foreign:hover { background: transparent; }
.lyr-state.is-foreign { color: #9aa6b2; opacity: .8; }
.geo-type-owner { grid-column: 1 / -1; padding: 6px 10px; border: 1px dashed #ffffff26; border-radius: 8px; color: var(--muted); font-size: 11.5px; text-align: center; }
.geo-type-owner[hidden] { display: none; }

/* v2.2.9 지우기 상자가 가득 참 — '상자 합치기' 안내 줄 · 가득 찬 추가 단추 (누르면 안내 창) */
.box-full-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; padding: 8px 10px; border: 1px solid #7a5a1e; border-radius: 8px; background: #241c0e; color: #f2d79a; font-size: 12px; line-height: 1.5; }
.box-full-note[hidden] { display: none; }
.box-full-note .box-full-text { flex: 1 1 180px; }
#box-add.is-full, #place-box-add.is-full { opacity: .75; border-style: dashed; }

/* v2.2.18 하단바 '빠른 선택' 단추 · 창 */
.vp-toolbar .qp-open { height: 32px; padding: 0 10px; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.vp-toolbar .qp-open svg { width: 16px; height: 16px; }
.qp-modal { width: min(560px, calc(100vw - 32px)); }
.qp-modal .modal-body { display: flex; flex-direction: column; gap: 10px; max-height: min(72vh, 720px); }
.qp-hint { margin: 0; word-break: keep-all; }
.qp-tools { display: flex; gap: 8px; align-items: center; }
.qp-tools .qp-search { flex: 1 1 auto; min-width: 0; }
.qp-tools .btn { flex: none; white-space: nowrap; }
.qp-body { overflow: auto; min-height: 120px; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
.qp-sec-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.qp-sec-title small { color: var(--dim); font-weight: 500; letter-spacing: .04em; font-size: 10.5px; }
.qp-sec-title .count { margin-left: auto; color: var(--dim); font-weight: 500; font-variant-numeric: tabular-nums; }
.qp-list { display: flex; flex-direction: column; gap: 2px; }
.qp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; height: auto; margin: 0; line-height: 1.3; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.qp-row:hover, .qp-row:focus-visible { background: #2fd3a814; outline: none; }
.qp-row:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.qp-row.is-other { opacity: .62; }
.qp-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #ffffff0d; color: #7fe6c8; }
.qp-ic svg { width: 16px; height: 16px; }
.qp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qp-name, .qp-sub { line-height: 1.35; }
.qp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.qp-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); }
.qp-tag { flex: none; padding: 1px 6px; border-radius: 999px; background: #ffffff10; color: var(--muted); font-size: 10.5px; }
.qp-tag.is-warn { background: #ffb0001f; color: #ffcf66; }
.qp-empty { margin: 0; padding: 8px 10px; color: var(--dim); font-size: 12px; }

/* v2.2.20 오브젝트 끌어 올리기 — 파일을 끌고 들어오면 편집기 전체에 안내 (놓을 곳은 어디든) */
.obj-drop-cover { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; background: rgba(4, 8, 12, .55); box-shadow: inset 0 0 0 3px var(--accent); }
.obj-drop-cover[hidden] { display: none; }
.obj-drop-card { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(460px, calc(100vw - 48px)); padding: 26px 30px; border-radius: 16px; border: 1px dashed var(--accent); background: rgba(10, 16, 20, .92); color: var(--text); text-align: center; word-break: keep-all; }
.obj-drop-card svg { width: 34px; height: 34px; color: var(--accent); }
.obj-drop-card strong { font-size: 16px; }
.obj-drop-card span { font-size: 12.5px; color: var(--muted); }
#obj-upload.is-drop { box-shadow: 0 0 0 3px #2fd3a855; }

/* ---- v2.4.10 맵 색상 (mapcolor.js) · 하늘, 안개 (geosky.js) · 태양, 렌즈 플레어 창 ---- */
.mc-group .card-label.mc-sub, .sky-group .card-label.geo-sub, .sky-dlg .card-label.mc-sub { margin: 12px 0 5px; }
.card-label.mc-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-label.mc-sub-row .btn.small { height: 24px; padding: 0 8px; font-size: 11px; letter-spacing: 0; }
.mc-on-row .mc-state { margin-left: 6px; }
/* v2.6.0 조명, 그림자 적용 (맵 색상과 같은 결 — 끈 동안 몸통은 회색, 해 방향, 높이만 그대로) */
.lt-on-row .lt-state { margin-left: 6px; }
/* v2.6.0 하늘 템플릿 (보기, 톤 칸 · 고르기 창) */
.sky-tpl-card { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 6px 8px; border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff06; }
.sky-tpl-card[hidden] { display: none; }
.sky-tpl-thumb { flex: none; width: 96px; height: 48px; border-radius: 6px; object-fit: cover; background: #0c1014; }
.sky-tpl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sky-tpl-text strong { font-size: 12.5px; font-weight: 600; }
.sky-tpl-text small { color: var(--muted); font-size: 11px; }
.sky-tpl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sky-tpl-group { margin: 12px 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.sky-tpl-group:first-child { margin-top: 0; }
.sky-tpl-pick { display: flex; flex-direction: column; gap: 5px; padding: 5px; border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff05; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.sky-tpl-pick img { display: block; width: 100%; aspect-ratio: 2 / 1; border-radius: 6px; object-fit: cover; background: #0c1014; }
.sky-tpl-pick:hover { border-color: #2fd3a866; background: #2fd3a80d; }
.sky-tpl-pick[aria-checked="true"] { border-color: #2fd3a8; background: #2fd3a81a; }
@media (max-width: 760px) { .sky-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lt-body { transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.lt-group.is-off .lt-body > :not(.lt-keep) { opacity: .45; }
.lt-off-hint { display: none; }
.lt-group.is-off .lt-off-hint { display: block; }
.mc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.mc-tools .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.mc-preset[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mc-rows { margin: 2px 0; }
.mc-row { grid-template-columns: 76px minmax(0, 1fr) 58px; margin: 7px 0; transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.mc-row > label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.mc-row.is-changed > label { color: var(--accent); }
.mc-row.is-off { opacity: .45; }
/* v2.4.12 끈 동안은 아래 칸 모두 회색 (맵 색상 · 맵타일 색상 — 안의 단추, 막대, 숫자 칸은 disabled) */
.mc-body { transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.mc-group.is-off .mc-body, .mc-body.is-off { opacity: .45; }
.mc-group.is-comparing .mc-rows { opacity: .55; }
/* 그라데이션 막대 (색온도 · 틴트 · 채도 · 색상별 · 안개 짙기) */
.mc-row input[type="range"].mc-grad { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer; }
.mc-row input.mc-grad::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--mc-grad); box-shadow: inset 0 0 0 1px #ffffff1f; }
.mc-row input.mc-grad::-moz-range-track { height: 6px; border-radius: 3px; background: var(--mc-grad); }
.mc-row input.mc-grad::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #f4f7fb; border: 2px solid #0b0f14; box-shadow: 0 0 0 1px #ffffff66, 0 1px 3px #000a; }
.mc-row input.mc-grad::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #f4f7fb; border: 2px solid #0b0f14; box-shadow: 0 0 0 1px #ffffff66; }
.mc-row input.mc-grad:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #2fd3a888, 0 1px 3px #000a; }
.mc-row input.mc-grad:disabled { cursor: default; opacity: .5; }
/* 색상별 칩 */
.mc-hues { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 6px 0 4px; }
.mc-hue { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 5px 0 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 10.5px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.mc-hue:hover { background: #ffffff0d; color: var(--text); }
.mc-hue[aria-checked="true"] { border-color: #ffffff38; background: #ffffff12; color: var(--text); }
.mc-hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mc-hue-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--mc-hue); box-shadow: 0 0 0 2px #0b0f14, 0 0 0 3px #ffffff2a; transition: box-shadow .2s, transform .2s; }
.mc-hue[aria-checked="true"] .mc-hue-dot { box-shadow: 0 0 0 2px #0b0f14, 0 0 0 4px var(--mc-hue); transform: scale(1.06); }
.mc-hue-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-hue.is-changed::after { content: ""; position: absolute; top: 3px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* v2.7.0 맵 색상 텍스처 표시 (일반 3D 맵) · 템플릿 (프로젝트 공통 — mapcolor.js) */
.mc-tex-row { margin: 4px 0 2px; }
.mc-tex-row[hidden] { display: none; }
.mc-tex-row.is-changed > label { color: var(--accent); }
.mc-tpl { margin-top: 14px; padding-top: 2px; border-top: 1px solid #ffffff0f; }
.mc-tpl[hidden] { display: none; }
.mc-tpl .mc-tpl-head { margin-top: 10px; }
.mc-tpl-head .btn.small { flex: none; }
.mc-tpl-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tpl-head small { margin-left: 2px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mc-tpl-list { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.mc-tpl-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 4px 8px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff05; transition: border-color .2s, background-color .2s; }
.mc-tpl-row.is-previewing { border-color: #2fd3a899; background: #2fd3a814; }
.mc-tpl-row.is-editing { display: block; padding: 6px; }
.mc-tpl-ic { flex: none; display: inline-flex; color: var(--accent); }
.mc-tpl-ic svg { width: 16px; height: 16px; }
.mc-tpl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mc-tpl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); }
.mc-tpl-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--dim); }
.mc-tpl-acts { flex: none; display: flex; align-items: center; gap: 4px; }
.mc-tpl-acts .btn.small.icon { width: 26px; height: 26px; padding: 0; }
.mc-tpl-edit { display: grid; gap: 4px; margin: 6px 0 0; }
.mc-tpl-row .mc-tpl-edit { margin: 0; }
.mc-tpl-edit-row { display: flex; align-items: center; gap: 6px; }
.mc-tpl-edit-row .field { flex: 1; min-width: 0; height: 30px; }
.mc-tpl-edit-row .btn { flex: none; }
.mc-tpl-note { margin: 0; color: #ffd479; }
.mc-tpl-note[hidden] { display: none; }
.mc-tpl-empty { margin: 6px 0 0; }
.mc-tpl-hint { margin-top: 8px; }
/* v2.7.0 맵 애니메이션 효과 (맵 탭 — mapintro.js): 끈 동안 몸통은 회색, 맵 색상 전환은 따로 켬 */
.mi-on-row .mi-state { margin-left: 6px; }
.mi-body, .mi-color-body { transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.mi-group.is-off .mi-body, .mi-color-body.is-off { opacity: .45; }
.mi-effect-hint { margin: 2px 0 6px; }
.mi-glow-row .row-actions { gap: 10px; }
.mi-noglow { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; }
.mi-noglow input { margin: 0; accent-color: #2fd3a8; cursor: pointer; }
.mi-origin-row[hidden] { display: none; }
.mi-color { margin-top: 12px; padding-top: 2px; border-top: 1px solid #ffffff0f; }
.mi-color[hidden] { display: none; }
.mi-color .card-label.mc-sub { margin: 10px 0 2px; }
.mi-color-warn { margin: 6px 0 0; }
.mi-color-warn[hidden] { display: none; }
.mi-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
/* 하늘, 안개: 태양 카드 */
.sky-sun-card { display: grid; grid-template-columns: 84px minmax(0, 1fr) 14px; align-items: center; gap: 10px; width: 100%; margin: 4px 0 8px; padding: 7px 10px 7px 7px; border: 1px solid var(--line-2); border-radius: 10px; background: #ffffff06; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s; }
.sky-sun-card:hover { border-color: #2fd3a877; background: #2fd3a80d; }
.sky-sun-card[aria-expanded="true"] { border-color: var(--accent); }
.sky-sun-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sky-sun-thumb { width: 84px; height: 54px; border-radius: 7px; box-shadow: 0 0 0 1px #ffffff1f; }
.sky-sun-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--muted); }
.sky-sun-text strong { font-size: 13px; color: var(--text); }
.sky-sun-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-sun-go { width: 8px; height: 8px; border: solid var(--dim); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
/* 태양, 렌즈 플레어 창 — 3D 화면 오른쪽에 떠서 고르는 대로 3D 화면에 바로 */
.sky-dlg { position: fixed; top: 70px; right: 16px; z-index: 60; display: flex; flex-direction: column; width: min(392px, calc(100vw - 32px)); max-height: calc(100vh - 150px); border: 1px solid var(--line-2); border-radius: 14px; background: #0d1217f2; box-shadow: 0 18px 50px #000b, 0 0 0 1px #00000066; color: var(--text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sky-dlg[hidden] { display: none; }
.sky-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.sky-dlg-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.sky-dlg-head h2 svg { width: 17px; height: 17px; color: var(--accent); }
.sky-dlg-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 14px 10px; overscroll-behavior: contain; }
.sky-dlg-note { margin: 8px 0 0; }
.sky-dlg-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.sky-dlg-gap { flex: 1 1 auto; }
.sky-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 4px; }
.sky-opt { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 5px 5px 6px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff05; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.sky-opt:hover { border-color: #ffffff3a; color: var(--text); }
.sky-opt[aria-checked="true"] { border-color: var(--accent); background: #2fd3a814; color: var(--text); box-shadow: 0 0 0 1px var(--accent) inset; }
.sky-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sky-opt-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 7px; }
.sky-opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sky-strength-row { margin-top: 8px; }
@media (max-width: 600px) { .sky-dlg { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 70vh; } .sky-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- v2.4.14 드롭 메뉴 '모든 맵 구성' · '단일 구성' · 나란히 놓기 (ix-menuscope.js) ---- */
.dm-scope { margin: 8px 0 14px; }
.dm-scope + .dm-scope { padding-top: 12px; border-top: 1px solid var(--line); }
.dm-scope-body { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.dm-scope-body > .ix-list:empty { display: none; }
.dm-scope-body > .empty { margin: 0; }
/* v2.7.2 모든 맵 메뉴 줄 = 이 맵 메뉴 줄(.ix-item)과 같은 모양 — 목록 보기 '간소화 · 전체보기' 를 함께 따름. '편집' 은 전체보기에서 글 단추,
   간소화에서 다른 단추와 같은 아이콘 단추 */
/* v2.7.3 이 맵 메뉴 줄(interactions.js makeRow)도 같은 단추 — 눈(누른 상태 = 3D 화면에 보이는 중) · 편집 글 단추 */
.ix-item .ix-tools .btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.ix-item .ix-tools .dm-edit { height: 26px; padding: 0 9px 0 7px; gap: 4px; }
#tab-ann.ix-compact .ix-item .ix-tools .dm-edit { width: 24px; height: 24px; padding: 0; justify-content: center; }
#tab-ann.ix-compact .ix-item .dm-edit-text { display: none; }
.dm-note { margin: 6px 0 0; }
.dm-arrange { margin: 2px 0 12px; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff06; }
.dm-arrange-head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 4px; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.dm-arrange-head small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.dm-opt { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.dm-opt-label { font-size: 12px; color: var(--muted); }
.dm-seg { width: 100%; box-sizing: border-box; }
.dm-seg .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-seg .seg-btn:disabled { cursor: default; opacity: .55; }
.dm-gap-row { margin: 8px 0; transition: opacity .3s cubic-bezier(.22,.68,.2,1); }
.dm-arrange .is-off { opacity: .45; pointer-events: none; }
/* v2.7.3 '작업 뷰어에서 미리 보기' (켠 동안 강조) */
.dm-arrange-pv { margin: 4px 0 6px; }
.dm-arrange-pv[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* 메뉴 편집 창: 모든 맵 메뉴 표시 · 썸네일 칸 (ix-menu.js) */
.ixm-scope { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: middle; }
.ixm-thumb { display: flex; flex-direction: column; gap: 8px; }
.ixm-thumb-seg { width: 100%; box-sizing: border-box; }
.ixm-thumb-seg .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ixm-thumb-body { display: flex; flex-direction: column; gap: 8px; }
.ixm-thumb-label { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ixm-thumb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ixm-thumb-tile { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: border-color .2s, background-color .2s; }
.ixm-thumb-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; display: block; }
.ixm-thumb-tile small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ixm-thumb-tile:hover { background: #ffffff0d; }
.ixm-thumb-tile[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
/* v2.7.2 '저장된 썸네일' — 이 맵에서 카메라 위치를 저장할 때 찍힌 화면들 (많으면 칸 안에서 굴리고, 10개부터 이름 찾기) */
.ixm-saved-tiles { max-height: 272px; overflow: auto; padding: 2px; scrollbar-width: thin; overscroll-behavior: contain; }
.ixm-saved-tiles .ixm-thumb-tile { min-width: 0; }
.ixm-saved-tiles .ixm-thumb-tile img { aspect-ratio: 16 / 10; }
.ixm-saved-tiles .ixm-thumb-tile small { line-height: 1.3; }
.ixm-saved-where { color: var(--dim); }
.ixm-thumb-tile[aria-checked="true"] .ixm-saved-where { color: var(--muted); }
.ixm-saved-none { grid-column: 1 / -1; margin: 6px 2px; }
.ixm-elsewhere { margin: 0; padding: 8px 10px; border-radius: 8px; background: #ffffff0a; font-size: 12.5px; }