/* Metalogy Spatial Editor — 렌더링 창 (assets/render.js): 이미지 · 비디오 내보내기 */

dialog.modal.render-modal { width: min(620px, calc(100vw - 32px)); display: flex; flex-direction: column; }
dialog.modal.render-modal:not([open]) { display: none; }
.render-modal .modal-body { flex: 1; min-height: 0; padding-top: 12px; scrollbar-width: thin; scrollbar-color: #ffffff22 transparent; }
.rd-title { display: flex; align-items: center; gap: 10px; }
.rd-title small { font-size: 10px; font-weight: 600; letter-spacing: .12em; color: var(--dim); }
.rd-head-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gradient); color: #fff; }
.rd-head-icon svg { width: 18px; height: 18px; }

/* 탭: 이미지 · 비디오 (왼쪽 패널 탭과 같은 결) */
.rd-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 22px 0; padding: 3px; border: 1px solid var(--line); background: #ffffff0a; border-radius: 9px; }
.rd-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px;
  border: 1px solid #ffffff12; /* v2.0.5 단추 선 */ border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rd-tabs button svg { width: 15px; height: 15px; }
.rd-tabs button:hover { border-color: #ffffff2e; color: var(--text); }
.rd-tabs button[aria-selected="true"] { background: #ffffff17; border-color: #ffffff38; color: var(--text); box-shadow: inset 0 0 0 1px #ffffff0d; }

/* 설정 줄: 왼쪽 이름 · 오른쪽 조작 */
.rd-pane, .rd-form { display: grid; gap: 2px; }
.rd-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 42px; padding: 3px 0; border-bottom: 1px solid #ffffff0a; }
.rd-label { font-size: 13px; color: #d5dde6; line-height: 1.35; }
.rd-label small { display: block; margin-top: 1px; font-size: 11px; color: var(--dim); }
.rd-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rd-ctrl > .seg { flex: 0 1 auto; }
.rd-seg .seg-btn { justify-content: center; }
.rd-seg .seg-btn:disabled { opacity: .35; cursor: not-allowed; }
.rd-res { flex: 1 1 170px; min-width: 0; }
.rd-fps { width: auto; min-width: 200px; max-width: 100%; }
.rd-size, .rd-time { display: inline-flex; align-items: center; gap: 6px; }
.rd-size .field.num, .rd-time .field.num { width: 76px; height: 30px; text-align: center; }
.rd-size .field.num:disabled { opacity: .55; }
.rd-x { color: var(--dim); font-size: 12px; }
.rd-unit { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-swap.btn.icon.small { width: 30px; height: 30px; }
.rd-swap[aria-pressed="true"] { background: var(--accent-soft); border-color: #2fd3a880; color: #bff5e6; }
.rd-ctrl input[type=range] { flex: 1 1 160px; }
.rd-out { min-width: 28px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.rd-tlinfo { margin: 0 0 4px !important; padding: 8px 12px; border-radius: 9px; background: #ffffff08; font-size: 12.5px !important; color: var(--muted) !important; }

/* 요약 · 안내 */
.rd-summary { margin: 12px 0 0 !important; padding: 10px 12px; border-radius: 9px; border: 1px solid #2fd3a833; background: #2fd3a80b; font-size: 12.5px !important; color: #c8f5e8 !important; font-variant-numeric: tabular-nums; }
.rd-summary.bad { border-color: #ff6b8155; background: #ff6b8112; color: #ffd3da !important; }
.rd-note { margin: 10px 0 0 !important; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: #ffffff06; font-size: 12px !important; color: var(--muted) !important; }
.rd-note.ok { border-color: #2fd3a833; color: #9fdcc9 !important; }
.rd-note.warn { border-color: #ffc85a55; background: #ffc85a10; color: #ffe9bf !important; }
.rd-note.bad { border-color: #ff6b8155; background: #ff6b8112; color: #ffd3da !important; }
.rd-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 20px 22px; border: 1px dashed #ffffff26; border-radius: 12px; text-align: center; color: var(--muted); }
.rd-empty > svg { width: 30px; height: 30px; color: var(--accent); }
.rd-empty strong { color: var(--text); font-size: 14px; }
.rd-empty p { margin: 0 !important; max-width: 420px; font-size: 12.5px !important; line-height: 1.6; }

/* 진행 · 결과 */
.rd-run { display: grid; gap: 10px; }
.rd-run-title { font-size: 14px; }
/* 높이가 정해진 칸 가운데에 출력 비율 그대로 (가로 그림은 폭에, 세로 그림은 높이에 맞춤 — 격자 칸은 내용 크기로 늘어나 잘리므로 절대 배치) */
.rd-preview { position: relative; width: 100%; height: min(42vh, 330px); overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: #05080b; }
.rd-preview > canvas, .rd-preview > img, .rd-preview > video { position: absolute; inset: 0; margin: auto; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; background: #000; }
.rd-preview img.is-transparent { background: repeating-conic-gradient(#2a3138 0 25%, #1a2026 0 50%) 50% / 20px 20px; }
.rd-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.rd-stats strong { font-size: 15px; word-break: break-all; }
.rd-run-time { color: var(--muted); font-size: 12.5px; }
.rd-run-detail { min-height: 1.5em; margin: 0 !important; font-size: 12.5px !important; color: var(--muted) !important; }
.rd-run-detail.bad { color: #ffb4c1 !important; }
.rd-run .hint { margin: 0; }

.rd-foot { align-items: center; padding-top: 14px; border-top: 1px solid #ffffff0d; }
.rd-foot-gap { flex: 1; }

@media (max-width: 560px) {
  .rd-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; }
  .rd-foot { flex-wrap: wrap; }
}