/* Metalogy Spatial Editor — 상호작용 '썸네일 디자인' 창 (v2.0.28, assets/ix-thumbs.js)
   구조 · 요소 / 미리 보기 / 속성 세 칸 (Pano2VR · 3DVista 스킨 편집기처럼). 편집기 모양(--accent · --text · --muted · --dim ·
   .modal · .btn · .seg · .switch)을 따르고, 미리 보기 안의 썸네일은 뷰어 interactions.css(.mse-ixt-*)가 그린다.
   편집 칸 '썸네일 · 표시' · 상호작용 탭 '표시 형태' 줄도 여기 (.ix-display · .ix-mk-*). */

/* ---- 창 */
dialog.modal.ix-thumbs-modal { width: min(1320px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); }
dialog.modal.ix-thumbs-modal[open] { display: flex; flex-direction: column; }
.ixd-head { gap: 10px; }
.ixd-head h2 { flex: 0 0 auto; margin-right: 6px; }
.ixd-head-tools { display: flex; align-items: center; gap: 4px; margin: 0 6px 0 auto; }
.ixd-head-tools .btn:disabled { opacity: .35; }
.ix-thumbs-modal .modal-body.ixd-body {
  display: grid; grid-template-columns: minmax(250px, 290px) minmax(320px, 1fr) minmax(320px, 380px); gap: 14px;
  overflow: hidden; padding-bottom: 14px;
}
.ix-thumbs-modal .modal-foot { align-items: center; }
.ixd-foot-note { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ixd-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid #ffffff14; border-radius: 13px; background: #ffffff05; }
.ixd-col-head {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border-bottom: 1px solid #ffffff10;
  font-size: 12.5px; font-weight: 600; color: #d5dde6;
}
.ixd-col-head > span:first-child { flex: 1 1 auto; }
.ixd-col-head small { font-weight: 500; font-size: 11px; }
.ixd-col-head--sub { border-top: 1px solid #ffffff10; }
.ixd-col-head .seg .seg-btn { padding: 0 9px; font-size: 12px; }

/* ---- 왼쪽: 구조 (만들어 둔 모양) · 요소 */
.ixd-col-left { overflow: auto; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ixd-presets { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.ixd-preset {
  display: flex; flex-direction: column; gap: 5px; padding: 6px 6px 7px; border: 1px solid #ffffff14; border-radius: 10px;
  background: #0b1116; color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center;
  transition: border-color .15s, background-color .15s;
}
.ixd-preset:hover { border-color: #ffffff33; }
.ixd-preset[aria-selected="true"] { border-color: var(--accent); background: #2fd3a814; box-shadow: 0 0 0 1px var(--accent) inset; }
.ixd-preset-pv {
  position: relative; height: 104px; overflow: hidden; border-radius: 7px; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 15%, #2a3b47, #0d1318 72%); --sse-accent: #2fd3a8;
}
.ixd-preset-name { color: #d5dde6; }
.ixd-elems { flex: none; display: grid; gap: 2px; padding: 6px; }
.ixd-elem {
  display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: background-color .15s, box-shadow .15s;
}
.ixd-elem:hover { background: #ffffff0a; }
.ixd-elem[aria-selected="true"] { background: #2fd3a817; box-shadow: inset 0 0 0 1px #2fd3a866; }
.ixd-elem-ic { flex: none; display: grid; place-items: center; width: 22px; color: var(--accent); }
.ixd-elem-name { flex: 1 1 auto; min-width: 0; }
.ixd-elem-val { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 11.5px; }
.ixd-elem[hidden] { display: none; }
/* v2.3.59 적용 대상 (모든 썸네일 / 고른 썸네일만) · 내 프리셋 */
.ixd-target { flex: none; border-bottom: 1px solid #ffffff10; }
.ixd-target[hidden], .ixd-targets[hidden], .ixd-target-note[hidden], .ixd-presetbox[hidden] { display: none; }
.ixd-target > .ixd-col-head { border-bottom: 0; }
.ixd-target-seg { padding: 0 10px 8px; }
.ixd-target-seg .seg { display: flex; width: 100%; }
.ixd-target-seg .seg-btn { flex: 1 1 0; padding: 0 6px; font-size: 12px; }
.ixd-targets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 196px; overflow: hidden auto; padding: 0 6px 6px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ixd-target-row { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; padding: 3px 4px 3px 6px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.ixd-target-row:hover { background: #ffffff0a; }
.ixd-target-row:has(input:checked) { background: #2fd3a814; box-shadow: inset 0 0 0 1px #2fd3a855; }
.ixd-target-row input { flex: none; margin: 0; accent-color: var(--accent); }
.ixd-target-img { flex: none; width: 40px; height: 26px; border-radius: 5px; object-fit: cover; background: #ffffff10; }
.ixd-target-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ixd-target-own { flex: none; padding: 1px 6px; border-radius: 999px; background: #2fd3a822; color: var(--accent); font-size: 10.5px; }
.ixd-target-load { flex: none; width: 26px; height: 26px; padding: 0; }
.ixd-target-load svg { width: 15px; height: 15px; }
.ixd-target-note { margin: 0; padding: 0 12px 9px; font-size: 11.5px; }
.ixd-target-note.is-warn { color: #ffd479; }
.ixd-presetbox { flex: none; padding: 10px 10px 2px; }

/* ---- 가운데: 미리 보기 */
.ixd-col-mid { min-height: 0; }
.ixd-stage-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; padding: 10px; }
.ixd-stage {
  --sse-accent: #2fd3a8;
  position: relative; flex: 1 1 auto; min-height: 340px; overflow: hidden; border-radius: 11px; border: 1px solid #ffffff1a;
  background: radial-gradient(120% 90% at 30% 20%, #1c2a33, #090d11 70%); font-family: 'Pretendard', system-ui, sans-serif; isolation: isolate;
}
.ixd-stage.has-bg[data-bg="scene"]::before {
  content: ""; position: absolute; inset: -14px; z-index: -1; background: var(--ixd-bg) center / cover no-repeat; filter: blur(1.5px) brightness(.72); transform: scale(1.02);
}
.ixd-stage[data-bg="light"] { background: linear-gradient(#e9eef2, #cdd6dd); }
.ixd-stage[data-bg="dark"] { background: radial-gradient(120% 90% at 30% 20%, #1c2a33, #090d11 70%); }
.ixd-stage[data-layout="mobile"] { flex: 0 0 auto; width: min(300px, 100%); height: auto; max-height: 100%; min-height: 0; aspect-ratio: 9 / 17; border-radius: 26px; border: 4px solid #2a333b; }
/* 기준선 (중심점 높이 — 장면 바닥처럼) */
.ixd-stage::after { content: ""; position: absolute; left: 0; right: 0; top: var(--ixd-base, 74%); height: 1px; background: linear-gradient(90deg, transparent, #ffffff26 20%, #ffffff26 80%, transparent); pointer-events: none; }
.ixd-stage[data-layout="mobile"]::after { top: var(--ixd-base, 62%); }
.ixd-stage[data-bg="light"]::after { background: linear-gradient(90deg, transparent, #0000002e 20%, #0000002e 80%, transparent); }
.ixd-stage .mse-ix-layer--preview .mse-ix-hot,
.ixd-stage .mse-ix-layer--preview .mse-ix-cluster { pointer-events: none; }
.ixd-stage .mse-ix-layer--preview .mse-ixt-head,
.ixd-stage .mse-ix-layer--preview .mse-ixt-shape,
.ixd-stage .mse-ix-layer--preview .mse-ixt-line { cursor: pointer; }
/* 고른 요소를 점선으로 */
.ixd-stage[data-sel="frame"] .mse-ixt-frame,
.ixd-stage[data-sel="title"] .mse-ixt-title,
.ixd-stage[data-sel="line"] .mse-ixt-line,
.ixd-stage[data-sel="shape"] .mse-ixt-shape { outline: 1.5px dashed #ffd479; outline-offset: 3px; }
.ixd-stage[data-sel="gap"] .mse-ixt-line,
.ixd-stage[data-sel="gap"] .mse-ixt-head { outline: 1px dashed #ffd47999; outline-offset: 0; }
.ixd-stage[data-sel="pivot"] .mse-ixt-pivotMark { transform: scale(1.5); }
.ixd-pv-note { margin: 0 12px 10px !important; }
.ixd-btnmock { position: absolute; left: 50%; top: 52%; display: grid; justify-items: center; gap: 12px; color: #d5dde6; font-size: 12px; transform: translate(-50%, -50%); }
.ixd-btnmock-btn {
  display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--sse-accent); border-radius: 50%;
  background: rgba(10, 14, 18, .74); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* ---- 오른쪽: 속성 */
.ixd-props { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 14px 18px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.ixd-field { margin-top: 14px; }
.ixd-field-label { margin-bottom: 6px; color: #c3ccd5; font-size: 12px; font-weight: 600; }
.ixd-seg { flex-wrap: wrap; }
.ixd-seg .seg-btn { padding: 0 10px; }
.ixd-row { display: grid; grid-template-columns: 96px 1fr 58px 22px; align-items: center; gap: 8px; margin-top: 12px; }
.ixd-row.is-off { opacity: .45; }
.ixd-row-label { color: #c3ccd5; font-size: 12px; font-weight: 600; line-height: 1.3; }
.ixd-range { width: 100%; min-width: 0; accent-color: var(--accent); }
.ixd-num.field { width: 100%; height: 30px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; }
.ixd-unit { color: var(--dim); font-size: 11px; }
.ixd-row--color { grid-template-columns: 96px auto 38px 1fr 38px; }
.ixd-color { width: 38px; height: 28px; padding: 0; border: 1px solid #ffffff26; border-radius: 6px; background: transparent; cursor: pointer; }
.ixd-color::-webkit-color-swatch-wrapper { padding: 2px; }
.ixd-color::-webkit-color-swatch { border: 0; border-radius: 4px; }
.ixd-accent.btn.small { height: 28px; padding: 0 8px; font-size: 11.5px; }
.ixd-accent.is-on { border-color: var(--accent); color: #061014; background: var(--accent); }
.ixd-alpha:disabled { opacity: .35; }
.ixd-alpha-val { color: var(--dim); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.ixd-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ixd-switch-row label { color: #c3ccd5; font-size: 12.5px; font-weight: 600; }
.ixd-switch-row small { font-weight: 500; }
.ixd-sub { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #ffffff10; color: #d5dde6; font-size: 12px; font-weight: 700; }
.ixd-note { margin: 14px 0 0 !important; }
.ixd-row--fx { grid-template-columns: 96px 1fr auto; }
.ixd-fx-sel.field { height: 30px; }

/* 도형 고르기 */
.ixd-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ixd-shape-btn {
  display: grid; justify-items: center; gap: 5px; padding: 8px 2px 6px; border: 1px solid #ffffff14; border-radius: 9px; background: #0b1116;
  color: #c3ccd5; font: inherit; font-size: 11px; cursor: pointer; transition: border-color .15s, background-color .15s; --sse-accent: #2fd3a8;
}
.ixd-shape-btn:hover { border-color: #ffffff33; }
.ixd-shape-btn[aria-checked="true"] { border-color: var(--accent); background: #2fd3a81a; color: #fff; }
.mse-ixt.ixd-shape-mini { display: grid; place-items: center; width: 24px; height: 22px; pointer-events: none; }
.mse-ixt.ixd-shape-mini .mse-ixt-shape { margin: 0; pointer-events: none; }
.ixd-none-mark { color: var(--dim); font-weight: 700; }

/* 중심점 고르기 — 작은 그림 (머리 · 라인 · 도형과 점) */
.ixd-pivots { display: grid; gap: 4px; margin-top: 6px; }
.ixd-pivot-btn {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.ixd-pivot-btn:hover { background: #ffffff0a; }
.ixd-pivot-btn[aria-checked="true"] { border-color: #2fd3a866; background: #2fd3a814; }
.ixd-pivot-text { display: grid; gap: 1px; min-width: 0; }
.ixd-pivot-text strong { font-size: 12.5px; font-weight: 600; }
.ixd-pivot-text small { color: var(--dim); font-size: 11px; line-height: 1.35; }
.ixd-pivot-dia { position: relative; flex: none; width: 30px; height: 50px; }
.ixd-pivot-dia > i { position: absolute; left: 50%; display: block; transform: translateX(-50%); background: #ffffff40; }
.ixd-pd-head { top: 0; width: 26px; height: 18px; border-radius: 3px; }
.ixd-pd-line { top: 20px; width: 2px; height: 20px; }
.ixd-pd-shape { top: 41px; width: 8px; height: 8px; border-radius: 50%; }
.ixd-pivot-btn[aria-checked="true"] .ixd-pivot-dia > i { background: #2fd3a8aa; }
.ixd-pd-dot { position: absolute; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 1.5px solid #ff3b5c; border-radius: 50%; background: #ff3b5c55; box-sizing: border-box; }
.ixd-pivot-dia[data-at="headTop"] .ixd-pd-dot { top: 0; }
.ixd-pivot-dia[data-at="imageCenter"] .ixd-pd-dot { top: 8px; }
.ixd-pivot-dia[data-at="headBottom"] .ixd-pd-dot { top: 18px; }
.ixd-pivot-dia[data-at="lineStart"] .ixd-pd-dot { top: 20px; }
.ixd-pivot-dia[data-at="lineEnd"] .ixd-pd-dot { top: 40px; }
.ixd-pivot-dia[data-at="shape"] .ixd-pd-dot { top: 45px; }

/* 좁은 화면: 두 칸 · 한 칸 */
@media (max-width: 1180px) {
  .ix-thumbs-modal .modal-body.ixd-body { grid-template-columns: minmax(230px, 260px) 1fr; overflow: auto; }
  .ixd-col-right { grid-column: 1 / -1; min-height: 380px; }
}
@media (max-width: 760px) {
  dialog.modal.ix-thumbs-modal { height: calc(100vh - 32px); }
  .ix-thumbs-modal .modal-body.ixd-body { grid-template-columns: 1fr; }
  .ixd-col-mid { min-height: 420px; }
}

/* ---- 상호작용 탭 '만들 때 표시' 줄 (interactions.js — v2.0.32 새로 만들 형태 · 수 · 썸네일 디자인) */
.ix-display { display: grid; gap: 8px; margin: 12px 0 2px; padding: 12px; border: 1px solid #ffffff14; border-radius: 12px; background: #ffffff05; }
.ix-display-row { display: flex; align-items: center; gap: 10px; }
.ix-display-row > .ix-display-label { flex: 1 1 auto; color: #d5dde6; font-size: 12.5px; font-weight: 600; }
.ix-display .seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.ix-display .seg-btn svg { width: 14px; height: 14px; }
.ix-display-sum { min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ix-display-tools { display: flex; align-items: center; gap: 6px; }
/* v2.1.6 F 키 · 다가가면 활성화 (거리 · 효과 · 시간 · 색 · F 표시 · 미리 보기) */
.ix-near-box { display: grid; gap: 7px; padding-top: 8px; border-top: 1px solid #ffffff0f; }
.ix-near-box > .ix-fkey-row { padding-top: 0; border-top: 0; }
.ix-near-row { flex-wrap: wrap; gap: 6px; }
.ix-near-label { flex: none; min-width: 34px; color: var(--muted); font-size: 12px; }
.ix-near-label.ix-near-gap { min-width: 0; margin-left: 8px; }
.ix-near-seg { flex: 1 1 auto; display: flex; flex-wrap: wrap; }
.ix-near-seg .seg-btn { flex: 1 1 auto; padding: 0 8px; font-size: 12px; justify-content: center; text-align: center; } /* v2.3.33 효과 단추 글 가운데 */
.ix-near-row > .field.num { width: 58px; flex: 0 0 auto; }
.ix-near-color { width: 30px; height: 24px; padding: 0; border: 1px solid #ffffff26; border-radius: 6px; background: transparent; cursor: pointer; }
.ix-near-color.is-default { opacity: .75; }
.ix-near-fill { flex: 1 1 auto; }
.ix-near-row .switch { flex: none; }
/* v2.1.6 나오는 쪽 · 간격 (썸네일이 없어도) */
.ix-mk-side { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ix-mk-side .ix-side { flex: 1 1 auto; }
.ix-mk-side .field.num { width: 54px; }
.ix-mk-side .ix-unit { color: var(--dim); font-size: 11.5px; }
/* v2.1.5 F 키로 열기 거리 */
.ix-fkey-row { flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px solid #ffffff0f; }
/* v2.3.33 글은 한 줄 전체, 입력칸과 m 은 그 아래 줄에 나란히 (사용자 — 예전에는 글 옆에 붙어 밀렸다) */
.ix-fkey-row > .ix-display-label { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ix-fkey-row > .ix-display-label kbd { min-width: 18px; padding: 0 5px; border: 1px solid #ffffff40; border-radius: 5px; font: 700 11px/18px ui-monospace, Consolas, monospace; text-align: center; color: #fff; background: #0a0e12; box-shadow: 0 0 0 1px var(--accent, #2fd3a8); }
.ix-fkey-row > .ix-display-label small { font-weight: 400; font-size: 11px; }
.ix-fkey-row > .field.num { width: 58px; flex: 0 0 auto; }
.ix-fkey-row > .ix-unit { color: var(--dim); font-size: 11.5px; }
.ix-fkey-note { flex: 1 1 100%; min-width: 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* ---- 편집 칸 '썸네일 · 표시' 의 표시 줄 */
.ix-mk-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ix-mk-row .seg { flex-wrap: wrap; }
.ix-mk-row .seg-btn { padding: 0 10px; gap: 5px; }
.ix-mk-row .seg-btn svg { width: 13px; height: 13px; }

/* ---- v2.0.32 리모컨의 '표시' (고른 상호작용 하나만 버튼 · 썸네일) */
.remote-row.remote-style { gap: 8px; }
.remote-style-label { flex: none; padding-left: 2px; color: var(--muted); font-size: 12px; }
.remote-style .seg { flex: 1 1 auto; min-width: 0; }
.remote-style .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; height: 26px; padding: 0 8px; gap: 5px; }
.remote-style .seg-btn svg { width: 13px; height: 13px; }

/* ---- v2.0.32 놓기 안내 줄의 '표시' 고르기 (안내 줄은 누름을 3D 화면으로 넘기지만 이 칸은 누름을 받음) */
.ix-place-hint .ix-hint-style { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; }
.ix-place-hint .ix-newstyle { padding: 2px; border-radius: 8px; }
.ix-place-hint .ix-newstyle .seg-btn { height: 22px; padding: 0 8px; gap: 4px; font-size: 11.5px; border-radius: 6px; }
.ix-place-hint .ix-newstyle .seg-btn svg { width: 12px; height: 12px; color: inherit; }
.ix-mk-label { flex: none; width: 54px; color: var(--muted); font-size: 12px; }
.ix-mk-line { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ix-mk-line .field.num { width: 64px; }
.ix-mk-line .ix-unit { color: var(--dim); font-size: 11.5px; }

/* v2.1.4 버튼 띄우기 (좌우 · 높이 m) — 편집 칸 · 리모컨 */
.ix-mk-float { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* v2.1.10 맵 이동 · 빠른 이동 썸네일 두 장 — 표시 썸네일 · 이 자리 썸네일(등록용) */
.ix-thumb-head { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 5px; }
.ix-thumb-head strong { font-size: 12.5px; }
.ix-thumb-head small { font-size: 11px; }
.ix-thumb-head[hidden], .ix-thumb-from[hidden], .ix-reg[hidden] { display: none; }
.ix-thumb-from { margin: 5px 0 0; }
.ix-reg { margin-top: 10px; padding-top: 4px; border-top: 1px dashed #ffffff1c; }
.ix-reg .ix-reg-box { min-height: 0; aspect-ratio: 16 / 10; }
/* v2.1.8 버튼 위치 — 좌우 · 높이 · 앞뒤 한 줄 (좁으면 줄바꿈) · 단추 줄 */
.ix-pos-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 8px; }
.ix-pos-pair { display: inline-flex; align-items: center; gap: 3px; }
.ix-pos-pair[hidden] { display: none; }
.ix-pos-pair .field.num { width: 46px; height: 28px; padding: 0 6px; }
.ix-pos-pair .ix-mk-sub { font-size: 11.5px; color: var(--dim); }
.ix-pos-pair .ix-unit { color: var(--dim); font-size: 11.5px; }
.ix-pos-actions .btn[hidden] { display: none; }
.ix-mk-float .field.num { width: 58px; }
.ix-mk-float .ix-unit { color: var(--dim); font-size: 11.5px; }
.ix-mk-float .ix-mk-sub { font-size: 11.5px; color: var(--dim); margin-left: 2px; }
.remote-float .remote-num { width: 52px; }