/* Metalogy Spatial Editor — SKP Tools (SKP → GLB · SKP 태그 정리 · 3DM → SKP · SKP → 이미지, 서버 변환 · 여러 파일) 화면. 틀 · 카드 · 기록은 assets/tools/tools.css 를 같이 쓴다. */

/* 한 줄로 쌓일 때 순서: 입력 → 설정 → 실행 → 여러 파일 · 분석 결과 → 변환 결과 → 기록 (tools.css 의 PLY Tools 순서를 덮는다) */
@media (max-width: 1080px) {
  .skp .tool-grid .skp-in-card { order: 1; }
  .skp .tool-grid .skp-opt-card { order: 2; }
  .skp .tool-grid .run-card { order: 3; }
  .skp .tool-grid .skp-batch-card { order: 4; }
  .skp .tool-grid .skp-an-card { order: 4; }
  .skp .tool-grid .skp-res-card { order: 5; }
  .skp .tool-grid .console-card { order: 6; }
}

/* 변환 종류 (데스크톱 프로그램의 세 탭 + JPG) — 탭 · 서버 변환기 칩이 한 줄, 종류 설명은 그 아래.
   --skp-col: 탭 · 머리 문단 · 종류 설명이 함께 쓰는 폭(최대 960px, 오른쪽에 칩 자리 216px 를 남김) — 셋의 오른쪽 끝이 한 선.
   칩은 그 줄의 오른쪽 끝(아래 카드의 오른쪽 끝과 같은 선, PLY Tools 의 칩 자리와 같은 규칙) */
.skp { --skp-col: min(960px, calc(100% - 216px)); }
.skp-mode-bar { display: grid; grid-template-columns: minmax(0, var(--skp-col)) 1fr; grid-template-areas: "tabs env" "desc desc"; column-gap: 24px; align-items: center; margin: 0 0 18px; }
.skp-mode-nav { grid-area: tabs; min-width: 0; }
.skp-mode-bar .env { grid-area: env; justify-self: end; flex-wrap: nowrap; } /* 칩 두 개는 한 줄로 */
.skp-mode { max-width: 960px; }
.skp-mode .seg-btn { position: relative; isolation: isolate; height: 40px; font-size: 13.5px; }
.skp-mode .seg-btn:disabled { cursor: not-allowed; opacity: .55; }
/* 고른 탭의 바탕(그라데이션)이 서로 겹치며 바뀐다 — 그라데이션은 transition 이 안 되어 뒤에 깐 층의 투명도로.
   아래 내용(설명 · 작업 칸)의 사라졌다 나타나기는 skp.js fadeKind */
.skp-mode .seg-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gradient); opacity: 0; transition: opacity .32s ease; }
.skp-mode .seg-btn[aria-checked="true"] { background: transparent; }
.skp-mode .seg-btn[aria-checked="true"]::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .skp-mode .seg-btn::before { transition: none; } }
.seg-sub { margin-left: 4px; font-size: 11.5px; font-weight: 500; opacity: .8; }
/* 이 파일의 그 종류 결과가 서버에 보관됨 (누르면 다시 변환하지 않고 바로) — 탭 오른쪽 위 작은 점 */
.skp-mode .seg-btn.has-kept::after { content: ""; position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0d1217; pointer-events: none; }
.mode-desc { grid-area: desc; margin: 10px 0 0; max-width: var(--skp-col); font-size: 13px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
/* 머리 문단 · 종류 설명은 폭을 종류 탭(.skp-mode 960px)과 같게 — 줄 끝이 탭 끝(SKP → 이미지)에 맞고, 마지막 줄이 너무 짧지 않게(pretty) */
.skp .hero > div:first-child { flex: 1 1 auto; max-width: var(--skp-col); min-width: 0; }
.skp .hero p { max-width: none; text-wrap: pretty; }
.skp .hero p strong, .skp .hero .nw { white-space: nowrap; } /* 'SKP → GLB' 같은 종류 이름 · 형식 목록은 한 덩어리로 */
/* 칩 자리를 빼면 탭이 좁아지는 폭(창 1120px 이하)에서는 칩을 탭 위 오른쪽으로 — 탭 · 문단은 한 줄 전체 */
@media (max-width: 1120px) {
  .skp { --skp-col: 100%; }
  .skp-mode-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "env" "tabs" "desc"; row-gap: 10px; }
  .skp-mode { max-width: none; } /* 탭도 한 줄 전체 — 칩 · 문단 · 아래 카드와 오른쪽 끝이 같게 */
}
@media (max-width: 760px) { .skp-mode { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .skp-mode .seg-btn { height: auto; min-height: 40px; padding: 6px 6px; line-height: 1.3; }
  .seg-sub { display: block; margin: 0; }
}

/* 보관함 창(body 에 붙음)도 입력 칸과 같은 색 */
.skp .file-tag.t-skp, .box-modal .file-tag.t-skp { background: #ffb38a; }
.skp .file-tag.t-3dm, .box-modal .file-tag.t-3dm { background: #c3b6ff; }
/* GLB · glTF(ZIP) — SKP → 이미지는 이 컴퓨터에서 그리고, 3DM → SKP 는 (ZIP 은 GLB 로 묶어) 올린다 */
.skp .file-tag.t-glb, .box-modal .file-tag.t-glb { background: #7ee7c7; }
.skp .file-tag.t-zip, .box-modal .file-tag.t-zip { background: #ffe08a; }
/* SKP → 이미지의 텍스처 칸이 잠긴 까닭 (이 컴퓨터의 GLB · glTF) */
.skp .jpg-texture-note { margin-top: 6px; color: #ffd479; }
.pass-row { margin-bottom: 14px; }
.run-row .btn.big { padding: 0 22px; }
.opt-lead { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: #c8d3de; }
.opt-panel > .sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.skp .f-label label { font: inherit; color: inherit; }

/* 도움말: ? 단추 → 아래에 설명 펼치기 (데스크톱 프로그램의 (?) 아이콘 문구 그대로) */
.help-btn { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; padding: 0; vertical-align: 1px; border: 1px solid #ffffff2e; border-radius: 50%; background: transparent; color: var(--dim); font: 700 10.5px/1 var(--font); cursor: pointer; transition: color .25s, border-color .25s; }
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.help-text { grid-column: 1 / -1; margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff12; font-size: 12.5px; line-height: 1.65; color: var(--muted); animation: help-in .25s ease both; }
.help-text strong { display: block; margin-bottom: 4px; color: #c8d3de; font-size: 12.5px; }
.help-text p { margin: 0; }
.help-text p + p { margin-top: 6px; }
@keyframes help-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .help-text { animation: none; } }

/* 분석 결과 */
.an-summary { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.an-summary strong { color: var(--text); }
.an-summary .warn { color: #ffd479; }
.an-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.an-tools .field { flex: 1; height: 34px; }
.an-only { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.an-only input, .an-table input { accent-color: var(--accent); }
.an-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.an-table { min-width: 540px; }
.an-table th, .an-table td { padding: 5px 6px; }
.an-table th { font-size: 11.5px; white-space: normal; line-height: 1.3; vertical-align: bottom; }
.an-table thead th { position: sticky; top: 0; z-index: 1; background: #10161c; }
.an-table th:first-child, .an-table td:first-child { width: 58px; text-align: left; white-space: nowrap; }
.an-table td.path { max-width: 0; width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.an-table td.text { min-width: 96px; text-align: left; color: var(--dim); font-size: 11.5px; white-space: normal; line-height: 1.4; }
.an-table th { text-align: right; }
.an-table th:nth-child(2) { text-align: left; }
.an-table[data-kind="skp2glb"] th:last-child, .an-table[data-kind="skp2skp"] th:last-child, .an-table[data-kind="3dm2skp"] th:last-child,
.an-table[data-kind="3dm2skp"] th:nth-child(3) { text-align: left; }
.an-table tr.is-out td { color: #ffc2cd; }
.an-table tr.is-out td.path { text-decoration: line-through; text-decoration-color: #ff6b8188; }
.an-table tr.is-parent-out td { color: var(--dim); }
.an-table tr.is-hidden td.path { color: var(--dim); }
.an-table tr.is-candidate td:nth-child(3), .an-table tr.is-candidate td:nth-child(4) { color: #ffd479; font-weight: 600; }
.an-table .act { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer; }
.an-more { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); }

/* 변환 결과 */
.res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4px; }
.res-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 이어서 칸(SKP → GLB · SKP → 이미지로 이어서): 안내 글 아래 단추 줄은 띄운다 (.hint 는 아래 여백 0) */
.sec > .hint + .res-actions { margin-top: 12px; }
@media (max-width: 760px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.btn.is-disabled { opacity: .55; }
/* 실행 전 칸 안내 (종류 탭 · 이어서 단추로 옮겨 와 아직 실행하지 않음) — 성공(ok) · 실패(bad) 와 구분되는 차분한 칸 */
.result.info { background: #ffffff06; border: 1px solid var(--line); color: var(--muted); }

/* 다른 종류로 옮겨 간 뒤 보여 줄 칸 — 스크롤해 와서(고정 머리 높이는 skp.js 가 scroll-margin-top 으로) 테두리가 2~3초 빛난다.
   동작 줄이기면 빛나는 움직임 없이 테두리만 */
.skp .is-spotlight { outline: 2px solid var(--accent); outline-offset: 4px; animation: skp-spotlight 2.8s ease both; }
.skp .jpg-views.is-spotlight { border-radius: 12px; }
.skp .btn.is-spotlight { outline-offset: 2px; }
@keyframes skp-spotlight {
  0% { box-shadow: 0 0 0 0 #2fd3a800; }
  18% { box-shadow: 0 0 0 6px #2fd3a833, 0 0 28px 4px #2fd3a855; }
  70% { box-shadow: 0 0 0 3px #2fd3a81f, 0 0 16px #2fd3a826; outline-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 #2fd3a800; outline-color: #2fd3a800; }
}
@media (prefers-reduced-motion: reduce) { .skp .is-spotlight { animation: none; } }
@media (forced-colors: active) { .skp .is-spotlight { outline-color: Highlight; } }

/* SKP → 이미지: 수직뷰 · 이소메트릭 두 장 */
.jpg-views { display: grid; gap: 12px; margin: 14px 0 12px; }
.jpg-view { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #ffffff05; }
.jpg-img { display: block; background: #d9d9d5; }
.jpg-img img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain; }
.jpg-view figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.jpg-view figcaption strong { color: var(--text); }
.jpg-stale { margin: 0; font-size: 12.5px; line-height: 1.6; color: #ffd479; }
.jpg-img.is-clear { background: repeating-conic-gradient(#d4d4d4 0% 25%, #ffffff 0% 50%) 50% / 20px 20px; } /* 투명 배경 미리보기 */
.jpg-style-note { margin: 2px 0 8px; }
.jpg-view-note { margin: 4px 0 0; }
.batch-links .nw { white-space: nowrap; }
.skp input[type="color"].field { padding: 4px 6px; cursor: pointer; }
.skp .opt-panel .field:disabled { opacity: .5; cursor: not-allowed; }
.skp .opt-panel .switch-row:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* 여러 파일 변환 — 열 폭은 고정(상태 칸은 짧은 표시와 % 만), 지금 파일의 변환기 문구 · 막대 · 경과는 표 아래 진행 칸 */
.skp-batch-card .card-head { flex-wrap: wrap; row-gap: 6px; } /* 휴대폰 폭에서 단추가 화면 밖으로 나가지 않게 */
.batch-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.batch-table { min-width: 520px; table-layout: fixed; }
.batch-table col.c-size { width: 72px; }
.batch-table col.c-state { width: 124px; }
.batch-table col.c-result { width: 38%; }
.batch-table th, .batch-table td { padding: 6px 8px; text-align: left; }
.batch-table thead th { position: sticky; top: 0; z-index: 1; background: #10161c; font-size: 11.5px; }
.batch-table td.path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-table td:nth-child(2) { white-space: nowrap; color: var(--dim); font-size: 12px; }
.batch-table td.state { white-space: nowrap; }
.batch-table td.text { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.batch-table .badge { display: inline-block; min-width: 58px; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.skp .badge.act { color: #bff5e6; background: var(--accent-soft); } /* 진행 중 (올리는 중 · 차례 기다림 · 변환 중 · 그리는 중) */
.batch-pct { display: inline-block; width: 4ch; margin-left: 4px; text-align: right; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; vertical-align: middle; }
.batch-table tr.is-current td { background: #2fd3a80a; }
.batch-table tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.batch-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.batch-links a:hover { text-decoration: underline; }
#batch-note { margin-top: 10px; }
/* 진행 칸 (표 아래) — 단계 · 파일 이름 · n/N · 멈추기 / 막대 / 변환기 문구 · 경과 / 최근 기록 몇 줄. 끝나면 요약 */
.batch-live { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0b1015; }
.batch-live[hidden] { display: none; }
.batch-say { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* 화면에는 안 보이고 읽기 프로그램만 */
.batch-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.batch-live-head .badge { flex: none; }
.batch-live-name { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.batch-live-count { flex: none; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.batch-live-head .btn { flex: none; }
.batch-live .bar { height: 6px; }
.batch-live-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; line-height: 1.55; color: #c8d3de; }
.batch-live-msg { min-width: 0; overflow-wrap: anywhere; }
.batch-live-time { flex: none; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.batch-live-log { list-style: none; margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #06090c; font: 11.5px/1.6 "JetBrains Mono", Consolas, "Cascadia Mono", monospace; color: #7f8b99; }
.batch-live-log[hidden] { display: none; }
.batch-live-log li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-live-log li:last-child { color: #b8c4d0; }
.batch-live-log .l-warn { color: #ffd479; }
.batch-live-log .l-error { color: #ff8a9c; }
.batch-live-log .l-ok { color: #9ff0d8; }
.batch-live-t { display: inline-block; min-width: 4.5ch; margin-right: 8px; color: #56616d; font-variant-numeric: tabular-nums; }
.batch-live[data-state="done"] { background: #2fd3a80d; border-color: #2fd3a844; }
.batch-live[data-state="error"] { background: #ff6b810d; border-color: #ff6b8144; }
.batch-live[data-state="error"] .bar span { background: var(--danger); }
.batch-live[data-state="stopped"] { background: #ffc85a0d; border-color: #ffc85a33; }
@media (max-width: 560px) { .batch-live-row { flex-direction: column; gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .batch-live .bar.indeterminate span { animation: none; width: 100%; opacity: .45; } }
/* 고르기 창 (목록 비우기: 목록만 닫기 · 서버에서도 지우기) */
dialog.modal.choose-modal { width: min(500px, calc(100vw - 32px)); }
.choose-modal .modal-foot { flex-wrap: wrap; }

/* 서버 점검 */

/* 한 줄에 하나 (막대 · 혼자인 드롭다운) — 드롭다운 두 개는 .two 로 나란히, 막대는 늘 한 줄 전체라 칸의 왼쪽 · 오른쪽 끝이 맞는다 */
.skp .one { display: grid; gap: 14px; margin-top: 12px; }
.skp .one label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }

/* 숫자 막대 (assets/skp/slider.js) — 값은 숨긴 select 에 그대로, 막대는 그것을 비춘다 */
.skp select.slider-source { display: none; }
.skp label.has-slider { position: relative; }
.skp .slider-value { position: absolute; top: -1px; right: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #dff8f0; font-variant-numeric: tabular-nums; }
.skp .f-label.has-slider { display: flex; align-items: center; gap: 6px; }
.skp .f-label.has-slider .slider-value { position: static; margin-left: auto; max-width: none; }
.skp .slider-value.is-disabled { color: var(--muted); opacity: .6; }

/* 처음 값으로 — SKP → 이미지 칸마다 ↺ (칸 이름 바로 뒤, 처음 값과 다른 칸에만 보임 · 잠긴 칸이면 흐리게) · 처리 설정 위 '초기화' (지금 종류 전체) */
.skp-opt-card .card-head { flex-wrap: wrap; row-gap: 6px; }
.skp .field-name { display: flex; align-items: center; gap: 3px; min-width: 0; }
.skp .reset-one {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin: -3px 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--accent); cursor: pointer; transition: color .15s, background-color .15s, opacity .15s;
}
.skp .reset-one:not(.is-changed) { visibility: hidden; } /* 자리는 남겨 값을 바꿔도 줄이 흔들리지 않게 */
.skp .reset-one svg { width: 14px; height: 14px; stroke-width: 2.3; }
.skp .reset-one:hover:not(:disabled) { background: #2fd3a81f; color: #bff5e6; }
.skp .reset-one:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.skp .reset-one:disabled { opacity: .35; color: var(--muted); cursor: default; }
.opt-reset { flex: none; }
.skp .slider { --p: 0%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: start; gap: 10px; }
.skp .slider-step { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; padding: 0; border: 1px solid var(--line-2); border-radius: 7px; background: #ffffff08; color: #cfd8e2; font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.skp .slider-step:hover:not(:disabled) { border-color: #2fd3a880; background: var(--accent-soft); color: #fff; }
.skp .slider-step:disabled { opacity: .35; cursor: default; }
.skp .slider-body { position: relative; min-width: 0; padding-bottom: 20px; }
.skp .slider-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.skp .slider-range:focus-visible { outline: none; }
.skp .slider-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-green), #07999e var(--p), #ffffff1f var(--p)); }
.skp .slider-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 3px solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #2fd3a81f, 0 2px 6px #0009; transition: transform .12s, box-shadow .12s; }
.skp .slider-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.skp .slider-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px #2fd3a866, 0 2px 6px #0009; }
.skp .slider-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px #2fd3a866, 0 2px 6px #0009; } /* 파이어폭스도 초점 표시 (따로 둔다 — 섞으면 규칙째 무시) */
.skp .slider-range::-moz-range-track { height: 6px; border-radius: 999px; background: #ffffff1f; }
.skp .slider-range::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-green), #07999e); }
.skp .slider-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--accent); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #2fd3a81f, 0 2px 6px #0009; }
/* 막대 아래 숫자 = 자주 쓰는 값 단추 (누르면 바로 그 값) */
.skp .slider-ticks { position: absolute; left: 9px; right: 9px; top: 30px; height: 20px; pointer-events: none; }
.skp .slider-tick { position: absolute; top: 0; transform: translateX(-50%); height: 20px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: #8693a1; font: inherit; font-size: 11px; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; pointer-events: auto; transition: color .15s, background-color .15s; }
.skp .slider-tick.at-start { transform: translateX(-9px); }
.skp .slider-tick.at-end { transform: translateX(calc(-100% + 9px)); }
.skp .slider-tick:hover:not(:disabled) { color: #fff; background: #2fd3a826; }
.skp .slider-tick.is-active { color: #bff5e6; font-weight: 700; background: #2fd3a81a; }
.skp .slider-tick.is-hidden { visibility: hidden; }
.skp .slider-tick:disabled { cursor: not-allowed; }
.skp .slider.is-disabled { opacity: .45; }
.skp .slider.is-disabled .slider-range { cursor: not-allowed; }
.skp .slider.is-disabled .slider-range::-webkit-slider-thumb { border-color: #7d8894; box-shadow: none; }
.skp .slider.is-disabled .slider-range::-moz-range-thumb { border-color: #7d8894; box-shadow: none; }
/* 고대비(강제 색) 모드: 그림자가 지워지므로 초점 받은 막대의 손잡이를 강조색으로 */
@media (forced-colors: active) {
  .skp .slider-range:focus-visible::-webkit-slider-thumb { background: Highlight; }
  .skp .slider-range:focus-visible::-moz-range-thumb { background: Highlight; }
  .skp .slider-tick.is-active { outline: 1px solid Highlight; }
}
.skp .f-label + .slider { margin-top: 2px; }
.skp .linescale-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; }

/* 단추 안 아이콘(data-icon 껍데기)이 글자와 같은 줄 가운데에 오게 */
.skp .btn > [data-icon] { display: inline-flex; align-items: center; }
.skp .btn > [data-icon] svg { display: block; }

/* 보관함 (이 브라우저에서 올린 작업 — 브라우저를 껐다 켜도 서버 보관 시간 동안 다시 불러오기) */
.skp-in-card .card-head .box-btn { margin-left: auto; gap: 6px; }
.box-btn.is-attention { border-color: #ffd47999; color: #fff; box-shadow: 0 0 0 3px #ffd47933; animation: box-attention 1.1s ease 3; }
@keyframes box-attention { 50% { box-shadow: 0 0 0 6px #ffd47926; } }
@media (prefers-reduced-motion: reduce) { .box-btn.is-attention { animation: none; } }
.box-btn .box-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-soft); color: #bff5e6; font-size: 11px; font-weight: 700; line-height: 1; }
.box-btn .box-count:empty { display: none; }
dialog.modal.box-modal { width: min(760px, calc(100vw - 32px)); } /* 기본 dialog.modal(620px)보다 넓게 — 선택자 우선순위를 맞춘다 */
.box-lead { margin: 0 0 14px !important; font-size: 12.5px !important; line-height: 1.65; }
/* 목록 칸 — 설명 글과 구분되는 상자 */
.box-panel { border: 1px solid var(--line); border-radius: 12px; background: #0b1015; overflow: hidden; }
.box-list { list-style: none; margin: 0; padding: 0; max-height: min(56vh, 540px); overflow: auto; }
.box-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.box-item:last-child { border-bottom: 0; }
.box-item.is-current { background: #2fd3a80d; box-shadow: inset 3px 0 0 var(--accent); }
.box-info { flex: 1; display: grid; gap: 3px; min-width: 0; font-size: 12px; color: var(--muted); }
.box-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.box-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 14px; }
.box-title .badge { flex: none; }
/* 서버가 종류별로 보관한 결과 (예: GLB · 이미지) */
.box-meta .box-kept { display: inline-block; margin-left: 4px; padding: 0 7px; border: 1px solid #2fd3a855; border-radius: 999px; color: #bff5e6; font-size: 11px; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
.box-meta { overflow-wrap: anywhere; } /* 종류 · 크기 · 올린 시각 · 여러 파일 · 결과를 자르지 않고 다 보인다 (좁으면 줄바꿈) */
.box-meta span { white-space: nowrap; }
.box-keep.soon { color: #ffd479; }
.box-actions { display: flex; flex: none; align-items: center; gap: 6px; }
/* 비었을 때 — 점선 상자 안에 아이콘 · 제목 · 설명 */
.box-panel.is-empty { border-style: dashed; border-color: var(--line-2); background: #ffffff03; }
.box-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 24px 32px; text-align: center; }
.box-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.box-empty-icon svg { width: 22px; height: 22px; }
.box-empty strong { color: var(--text); font-size: 14px; font-weight: 600; }
.box-empty .box-empty-text { max-width: 440px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.box-foot { flex-wrap: wrap; row-gap: 10px; justify-content: space-between; align-items: center; }
.box-foot .dim { flex: 1 1 auto; min-width: 0; font-size: 12px; } /* 좁으면 단추가 아랫줄로 (글이 한 글자 폭으로 눌리지 않게) */
@media (max-width: 600px) { .box-item { flex-wrap: wrap; } .box-item .box-actions { width: 100%; justify-content: flex-end; } }