/* Metalogy Spatial Editor — PLY Tools (Splat 변환) 화면.
   본문 · 머리 · 하단 폭은 목록 화면(index.html)과 같은 홈페이지 .container 규칙. */
body { min-height: 100vh; background: radial-gradient(ellipse at 20% -10%, #06322c66, transparent 45%), radial-gradient(ellipse at 90% 0, #0a2a6a44, transparent 40%), var(--bg); }
.wrap { width: calc(100% - 112px); max-width: 1248px; margin: 0 auto; padding: 56px 0 80px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hero h1 { margin: 10px 0 16px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -.05em; } /* 목록 화면과 같게 제목 아래를 넓게 */
.hero p { margin: 0; color: var(--muted); font-size: 15px; max-width: 720px; }
.hero p strong { color: var(--text); }
.mse-footer { width: calc(100% - 112px); max-width: 1248px; box-sizing: border-box; margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid var(--line); }
.mse-footer p { margin: 0; font-size: 12px; line-height: 1.7; color: #7d92a6; letter-spacing: .02em; }
.mse-footer strong { font-weight: 600; color: #a9bccd; }
.mse-footer-sep { margin: 0 8px; }
.mse-footer-credit { color: var(--dim) !important; }
@media (max-width: 900px) { .wrap, .mse-footer { width: calc(100% - 40px); } }

/* 환경 표시 (WebGPU · 폴더 쓰기 · 라이브러리 판) */
.env { display: flex; flex-wrap: wrap; gap: 6px; }
.env-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); color: var(--muted); background: #ffffff05; }
.env-chip.ok { color: #9ff0d8; border-color: #2fd3a844; }
.env-chip.bad { color: #ffc2cd; border-color: #ff6b8166; background: #ff6b810d; }
.tool-warn { margin-bottom: 18px; padding: 14px 18px; border-radius: 12px; background: #2a1219; border: 1px solid #ff6b8155; color: #ffd3da; font-size: 13.5px; line-height: 1.7; }

/* 두 칸: 입력 | 출력 */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
/* 왼쪽: 입력 · 저장 · 실행 · 기록 / 오른쪽: 미리보기 · 출력 — 기록 카드가 남은 높이를 채워 출력 카드 아래 선과 맞춘다 */
.tool-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tool-col > .card:last-child { flex: 1 1 auto; } /* 어느 열이 길든 두 열의 아래 선이 맞는다 (기록 · 출력 카드) */
@media (max-width: 1080px) {
  /* 한 줄로 쌓일 때는 넣은 파일 바로 아래에 미리보기, 설정을 마친 뒤에 변환 · 기록 */
  .tool-grid { grid-template-columns: 1fr; }
  .tool-col { display: contents; }
  .tool-grid > .tool-col > .card { min-width: 0; }
  .tool-grid [aria-labelledby="in-title"] { order: 1; }
  .tool-grid .preview-card { order: 2; }
  .tool-grid [aria-labelledby="save-title"] { order: 3; }
  .tool-grid [aria-labelledby="out-title"] { order: 4; }
  .tool-grid .actions-card { order: 5; }
  .tool-grid .run-card { order: 6; }
  .tool-grid .console-card { order: 7; }
}
.card { border: 1px solid var(--line); border-radius: 14px; background: #0d1217; padding: 20px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.grow { flex: 1; }
.hint { margin: 6px 0 0; color: var(--dim); font-size: 12px; line-height: 1.6; }
.hint code, .tools code { font-size: 11.5px; padding: 1px 5px; border-radius: 4px; background: #ffffff10; }
.req { margin-left: 4px; font-size: 11px; font-weight: 600; color: #75d9c8; }
.f-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 500; color: #c8d3de; }
.f-label.first { margin-top: 0; }
.card .field { width: 100%; }

/* 입력: 끌어다 놓기 · 파일 목록 */
.dropzone { display: grid; place-items: center; gap: 4px; padding: 26px 16px; border: 1px dashed #ffffff30; border-radius: 12px; text-align: center; color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .4s, background .4s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: #2fd3a80a; color: var(--text); }
.dropzone.compact { padding: 12px 16px; }
.dropzone.compact .dim:last-child { display: none; }
.drop-icon svg { width: 26px; height: 26px; }
.row-actions { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.file-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.file-item { border: 1px solid var(--line); border-radius: 10px; background: #ffffff04; }
.file-main { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.file-tag { flex: none; min-width: 44px; padding: 3px 6px; border-radius: 6px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #0b1116; background: #9fd8ff; }
.file-tag.t-ssog, .file-tag.t-lcc2, .file-tag.t-lcc { background: #7ee7c7; }
.file-tag.t-sog { background: #b9a7ff; }
.file-text { flex: 1; min-width: 0; }
.file-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 11.5px; color: var(--dim); }
.badge { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge.ok { color: #9ff0d8; background: #2fd3a81a; }
.badge.warn { color: #ffe2a8; background: #ffc85a1a; }
.badge.err { color: #ffc2cd; background: #ff6b811a; }
.badge.run { color: var(--muted); background: #ffffff0d; }
.lod-select { width: 84px !important; height: 30px; padding: 0 6px; font-size: 12px; }
.file-transform { display: grid; grid-template-columns: 70px repeat(3, 1fr); gap: 6px 8px; align-items: center; padding: 0 12px 12px; font-size: 12px; color: var(--muted); }
.file-transform .field { height: 30px; padding: 0 8px; font-size: 12px; }
.icon-btn { width: 30px; height: 30px; padding: 0; justify-content: center; }

/* 출력 */
.save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.save-dir { font-size: 13px; color: var(--dim); }
.save-dir.ok { color: #9ff0d8; font-weight: 600; }
.sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.sec-title { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #c8d3de; }
.sec-title .dim { font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.seg { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #ffffff0d; }
.seg-btn { flex: 1; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 600 12.5px var(--font); cursor: pointer; transition: background .25s, color .25s; }
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-checked="true"] { background: var(--gradient); color: #fff; }
.seg-btn[hidden] { display: none; }
.two, .three { display: grid; gap: 10px; margin-top: 12px; }
.two { grid-template-columns: 1fr 1fr; }
.three { grid-template-columns: repeat(3, 1fr); }
.two label, .three label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .three { grid-template-columns: 1fr 1fr; } }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: #c8d3de; cursor: pointer; }
.level-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.level-checks label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); cursor: pointer; }
.level-checks input { accent-color: var(--accent); }
.table-wrap { margin-top: 12px; overflow-x: auto; }
.lod-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lod-table th { padding: 6px 8px; text-align: right; font-weight: 600; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.lod-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #ffffff0a; font-variant-numeric: tabular-nums; }
.lod-table th:first-child, .lod-table td:first-child { text-align: left; }
.lod-table tfoot td { font-weight: 700; color: var(--text); border-bottom: 0; }
.card .lod-table input.field { width: 76px; height: 26px; padding: 0 6px; text-align: right; font-size: 12px; }
.actions-list { display: grid; gap: 6px; }
.action-row { display: grid; grid-template-columns: 120px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.action-row .vals { display: flex; gap: 4px; flex-wrap: wrap; }
.action-row .vals .field { flex: 1; min-width: 56px; height: 30px; padding: 0 6px; font-size: 12px; }
.add-action { display: flex; gap: 6px; margin-top: 8px; }
.actions-card .actions-list:empty + .add-action { margin-top: 0; }
.actions-card .hint { margin-top: 10px; }
.advanced summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #c8d3de; }

/* 실행 · 진행 · 결과 */
.run-card { margin-top: 0; }
.run-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn.big { height: 46px; padding: 0 26px; font-size: 15px; }
.run-info { flex: 1; min-width: 240px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.run-info .warn { color: #ffd479; }
.run-info .err { color: #ffc2cd; }
.progress { margin-top: 16px; }
.bar { height: 8px; border-radius: 99px; background: #ffffff10; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--gradient); transition: width .3s ease; }
.bar.indeterminate span { width: 30%; animation: bar-slide 1.4s ease-in-out infinite; }
@keyframes bar-slide { from { margin-left: -30%; } to { margin-left: 100%; } }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.result { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; }
.result.ok { background: #2fd3a80d; border: 1px solid #2fd3a844; color: #c8f5e8; }
.result.bad { background: #ff6b810d; border: 1px solid #ff6b8144; color: #ffd3da; }
.result strong { color: #fff; }
.console-card { margin-top: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
/* 기록 내용이 길어도 열 높이를 밀어 올리지 않게: 남은 공간을 채우는 상자 안에 절대 위치로 둔다 */
.console-wrap { position: relative; flex: 1 1 auto; min-height: 240px; }
.console-wrap .console { position: absolute; inset: 0; height: auto; }
@media (max-width: 1080px) { .console-wrap { flex: none; height: 260px; } }
.console { height: 260px; margin: 0; padding: 12px 14px; overflow: auto; border-radius: 10px; background: #06090c; border: 1px solid var(--line); font: 12px/1.6 "JetBrains Mono", Consolas, "Cascadia Mono", monospace; color: #b8c4d0; white-space: pre-wrap; word-break: break-all; }
.console .l-step { color: #7ee7c7; }
.console .l-warn { color: #ffd479; }
.console .l-error { color: #ff8a9c; }
.console .l-ok { color: #9ff0d8; }

/* 변환 라이브러리 업데이트 (서버 관리자 · localhost 만) */
.libup-card { margin-top: 18px; }
.libup-card .hint a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.libup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 14px; }
.libup-grid > div { padding: 10px 12px; border-radius: 10px; background: #ffffff06; border: 1px solid #ffffff0d; min-width: 0; }
.libup-k { color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.libup-v { margin-top: 4px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.libup-v small { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; font-weight: 500; }
.libup-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.libup-interval { flex: 1; max-width: 560px; }
.libup-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: var(--muted); background: #ffffff06; border: 1px solid #ffffff0d; }
.libup-note.warn { color: #ffe2a8; background: #ffc85a0d; border-color: #ffc85a33; }
.libup-note.ok { color: #9ff0d8; background: #2fd3a80d; border-color: #2fd3a833; }
.libup-note .btn { margin-left: 8px; vertical-align: middle; }
.libup-wrap { margin-top: 0; } /* v2.0.24 좁은 화면에서 표만 안에서 가로로 (페이지가 넘치지 않게) */
.libup-table td .badge { margin-left: 6px; }
.libup-table td:last-child, .libup-table th:last-child { text-align: right; }
.libup-log-box { margin-top: 12px; }
.libup-log { height: 160px; margin-top: 10px; }
.libup-v a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* v2.3.35 EDIT TOOLS(SuperSplat) 업데이트 — 만드는 중 단계 · 진행 막대, 실패 자세히 */
.editup-progress { margin: 0 0 12px; }
.editup-bar { height: 6px; border-radius: 99px; background: #ffffff10; overflow: hidden; }
.editup-bar > span { display: block; width: 2%; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.editup-stage { margin-top: 7px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.editup-detail { margin-top: 6px; }
.editup-detail summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.editup-detail pre { max-height: 180px; overflow: auto; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: #00000033; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .libup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libup-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .libup-interval { max-width: none; }
  .libup-table th:nth-child(4), .libup-table td:nth-child(4) { display: none; }
  /* EDIT TOOLS 표는 넷째 칸이 '쓰기' — 대신 '만든 때' 를 숨긴다 */
  .editup-table th:nth-child(4), .editup-table td:nth-child(4) { display: table-cell; }
  .editup-table th:nth-child(3), .editup-table td:nth-child(3) { display: none; }
}

/* 미리보기 (입력 파일을 원점 근처에서 본 모습 — pipeline.js makeThumbnail) */
.preview-main { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #090c0f; border: 1px solid var(--line); display: grid; place-items: center; }
.preview-main img { width: 100%; height: 100%; object-fit: cover; display: block; animation: pv-in .4s ease both; }
@keyframes pv-in { from { opacity: 0; } to { opacity: 1; } }
.preview-empty { padding: 0 24px; text-align: center; font-size: 13px; color: var(--dim); line-height: 1.6; }
.preview-empty.busy::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 10px; border: 2px solid #ffffff25; border-top-color: var(--accent); border-radius: 50%; animation: pv-spin .9s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.preview-strip { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.pv-thumb { flex: none; width: 96px; aspect-ratio: 16 / 9; padding: 0; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); background: #090c0f; cursor: pointer; display: grid; place-items: center; color: var(--dim); font-size: 10px; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.file-item .file-thumb { flex: none; width: 48px; height: 27px; border-radius: 4px; object-fit: cover; background: #090c0f; border: 1px solid var(--line); }
.restore-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.6; color: #ffe2a8; background: #ffc85a0d; border: 1px solid #ffc85a33; }
.restore-note .btn { margin-left: 8px; vertical-align: middle; }
.keep-hint { margin: 10px 0 0; font-size: 12px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .preview-main img { animation: none; } .preview-empty.busy::before { animation: none; } }

/* 판 번호를 받기 전 칩 (확인 중…) */
.env-chip.is-pending { color: var(--dim, #8b95a1); }

/* v2.1.0 PLY TOOLS 기능 탭 (Splat 변환 · 평면도) — SKP Tools 종류 탭과 같은 모양 — tools.html · tools-plan.html 공용 */
.ply-mode-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; }
.ply-mode { min-width: min(560px, 100%); }
.ply-mode .seg-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 13.5px; text-decoration: none; }
.ply-mode .seg-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--gradient); opacity: 0; transition: opacity .32s ease; }
.ply-mode .seg-btn[aria-current="page"] { color: #fff; }
.ply-mode .seg-btn[aria-current="page"]::before { opacity: 1; }
.ply-mode .seg-sub { font-size: 11.5px; font-weight: 500; opacity: .8; }
@media (max-width: 560px) { .ply-mode .seg-btn { height: auto; min-height: 40px; flex-direction: column; gap: 0; line-height: 1.3; padding: 6px; } }

/* ---- v2.1.2 보관함 (이 브라우저 — PLY TOOLS 변환 · 평면도 · MESH TOOLS, assets/localbox.js) — SKP TOOLS 보관함과 같은 모양 */
.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(780px, calc(100vw - 32px)); }
.box-modal .modal-head h2 { display: flex; align-items: center; gap: 8px; }
.box-modal .modal-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
.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; }
.box-meta { overflow-wrap: anywhere; }
.box-meta span { white-space: nowrap; }
.box-keep { color: var(--muted); }
.box-keep.soon, .box-keep.warn { 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: 460px; 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; }
.box-modal .file-tag.t-mesh, .box-modal .file-tag.t-glb { background: #7ee7c7; }
.box-modal .file-tag.t-plan { background: #ffe08a; }
.box-modal .file-tag.t-gs { background: #7ee7c7; }
@media (max-width: 600px) { .box-item { flex-wrap: wrap; } .box-item .box-actions { width: 100%; justify-content: flex-end; } }