/* 새 장비 설문 (wizard-ui.js). 모든 규칙은 .wz 아래에 둡니다. 색·간격은 styles.css 토큰을 씁니다. */
dialog:has(> .wz) { width: 1180px; max-width: min(1180px, 96vw) }
.wz { font-size: 13px }
.wz .dialog-body { padding-top: 16px }
.wz .dialog-footer .spacer { flex: 1 }
.wz .dialog-footer { justify-content: flex-start }

.wz-stepper { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap }
.wz-stepper button { display: flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; color: var(--ink-2) }
.wz-stepper button b { font: 600 13px var(--font-num); color: var(--ink-3) }
.wz-stepper button { border-color: var(--line); font-weight: 500 }
.wz-stepper button.active, .wz-stepper button.active:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600 }
.wz-stepper button.active b { color: var(--paper) }

.wz-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start }
.wz-main { min-width: 0 }
.wz-main > p:first-child { font-size: 13px; color: var(--ink-2); word-break: keep-all }
.wz-main .section-title { margin: 16px 0 10px }

.wz-types { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.wz-types .choice { align-content: start; word-break: keep-all }
.wz-icon { width: 100%; height: 58px; background: var(--floor); border-radius: 4px; margin-bottom: 6px; padding: 4px }
.wz-i-port { fill: var(--floor-muted); stroke: var(--floor-ink); stroke-width: 1 }
.wz-i-pm { fill: var(--floor-module); stroke: var(--floor-ink); stroke-width: 1 }
.wz-i-ll { fill: var(--floor-line); stroke: var(--floor-ink); stroke-width: 1 }
.wz-i-tc { fill: var(--floor-2); stroke: var(--floor-accent); stroke-width: 1.5 }
.wz-i-robot { fill: var(--floor-muted); stroke: var(--floor-accent); stroke-width: 1.5 }
.wz-i-line { stroke: var(--floor-wire); stroke-width: 1.5; fill: var(--floor-wire) }
.wz-i-belt { stroke: var(--carry); stroke-width: 3 }
.wz-i-empty { fill: none; stroke: var(--floor-muted); stroke-width: 1.5; stroke-dasharray: 5 4 }
.wz-catalog { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.wz-two { grid-template-columns: 1fr 1fr }
.wz-inline { display: flex; gap: 6px; align-items: center }
.wz-inline input { flex: 1 }

.wz-steps { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 760px; table-layout: fixed }
.wz-steps th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11.5px; line-height: 1.3; padding: 0 4px 6px; border-bottom: 1px solid var(--line); vertical-align: bottom; word-break: keep-all; white-space: normal; overflow-wrap: anywhere }
.wz-steps td { padding: 5px 4px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.wz-steps input:not([type=checkbox]), .wz-steps select { width: 100%; padding: 5px 7px; font-size: 12.5px }
.wz-steps .wz-n { font: 600 13px var(--font-num); color: var(--muted); width: 24px }
.wz-steps .wz-c { text-align: center }
.wz-steps tr.wz-optional td { background: var(--panel-2) }
.wz-row-tools { white-space: nowrap }
.wz-row-tools button { padding: 3px 6px; margin-left: 1px }
.wz-steps select { padding-right: 22px }
.wz-steps th { position: relative }
.wz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

.wz-preview { position: sticky; top: 76px; border: 0; border-radius: var(--radius-lg); background: var(--surface); padding: 16px }
.wz-preview h3 { margin-bottom: 6px }
.wz-preview > p.small { color: var(--ink-2); margin-bottom: 10px }
.wz-plan { display: block; width: 100%; height: 190px; background: var(--floor); border-radius: 4px }
.wz-p-line { stroke: var(--floor-wire); stroke-width: 5; fill: none }
.wz-p-pm { fill: var(--floor-module); stroke: var(--floor-edge); stroke-width: 2 }
.wz-p-port { fill: var(--floor-line); stroke: var(--floor-edge); stroke-width: 2 }
.wz-p-cv { fill: var(--floor-2); stroke: var(--carry); stroke-width: 2 }
.wz-p-buffer { fill: var(--floor-line); stroke: var(--floor-edge); stroke-width: 2 }
.wz-p-tc { fill: var(--floor-2); stroke: var(--floor-accent); stroke-width: 3 }
.wz-p-robot { fill: var(--floor-muted); stroke: var(--floor-accent); stroke-width: 3 }
.wz-p-arm { fill: none; stroke: var(--floor); stroke-width: 7 }
.wz-p-text { fill: var(--floor-ink); font-size: 17px; font-family: var(--font) }
.wz-est { margin: 12px 0 2px; font-size: 13px }
.wz-est b { font: 600 22px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink) }

.wz-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px }
.wz-kpis .kpi small { word-break: keep-all }
.wz-seq { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.8 }
.wz-issues { margin: 12px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--attention) }

/* 카세트 질문(2단계)과 상단 '카세트 설정' 대화상자(.wz.wz-cst) */
dialog:has(> .wz-cst) { width: 820px; max-width: min(820px, 96vw) }
.wz-four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.wz-three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.wz-three .choice, .wz-four .choice { align-content: start; word-break: keep-all }
.wz-cst-sum { margin: 8px 0 0; font: 500 14px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink) }
.wz-cst-line { margin: 4px 0 2px; font-size: 12.5px; color: var(--ink-2) }
.wz-cst-total { display: block; padding: 7px 0; font: 600 16px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink) }
.wz-cst-steps { margin-top: 9px }
.wz-cst-more { margin-top: 10px }
.wz-cst-more summary { cursor: pointer; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px }
.wz-cst .wz-main > p:first-child { margin-top: 0 }
.wz-cst .wz-kpis { margin-top: 16px }

@media (max-width: 960px) {
  .wz-grid { grid-template-columns: 1fr }
  .wz-preview { position: static }
  .wz-plan { height: 220px }
  .wz-types { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* 휴대폰: styles.css의 dialog 전체 화면 규칙을 설문에도 적용합니다(위 너비 규칙이 더 구체적이므로 다시 씀). */
@media (max-width: 820px) {
  dialog:has(> .wz), dialog:has(> .wz-cst) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0 }
}
@media (max-width: 560px) {
  .wz-types, .wz-two, .wz-three { grid-template-columns: 1fr }
  .wz-four { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .wz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .wz-stepper button { padding: 5px 9px; font-size: 12px }
}