/* 레시피 설문(설문 5단계 · 상단 '레시피 설정')과 레시피 결과. 규칙은 .rcp 아래에 둡니다.
   예외 두 가지: 평면의 장치 상태 '레시피 전환'(.node[data-mode=changeover])과 가동 이력의 전환 구간(.gantt-span.changeover)은
   기존 화면 요소라 같은 자리에 둡니다. 색은 styles.css 토큰을 씁니다. */
dialog:has(> .rcp-dialog) { width: 900px; max-width: min(900px, 96vw) }
.rcp .rcp-six { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.rcp .rcp-six .choice { padding: 10px 8px; text-align: center }
.rcp .rcp-six .choice b { font-size: 13px; word-break: keep-all }
.rcp .rcp-names, .rcp .rcp-weights { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top: 9px }
.rcp .rcp-weights small { display: block; margin-top: 2px; font: 500 13px var(--font-num); font-variant-numeric: tabular-nums }
.rcp .rcp-table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 520px }
.rcp .rcp-table 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 }
.rcp .rcp-table td { padding: 5px 4px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.rcp .rcp-table td:first-child { min-width: 120px; word-break: keep-all }
.rcp .rcp-table th.rcp-num { width: 96px }
.rcp .rcp-table th.rcp-mode { width: 168px }
.rcp .rcp-table input, .rcp .rcp-table select { width: 100%; min-width: 64px; padding: 5px 7px; font-size: 12.5px }
.rcp .rcp-table .tag { margin-left: 4px; font-size: 10px; padding: 0 6px }
.rcp .rcp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 10px 0 10px; flex-wrap: wrap }
.rcp .rcp-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 8px 12px; margin-bottom: -1px; font-size: 12.5px }
.rcp .rcp-tabs button { font-weight: 600; color: var(--ink-2) }
.rcp .rcp-tabs button:hover:not(:disabled) { background: transparent; color: var(--ink) }
.rcp .rcp-tabs button.active, .rcp .rcp-tabs button.active:hover:not(:disabled) { color: var(--ink); background: transparent; border-bottom-color: var(--ink); font-weight: 700 }
.rcp .rcp-tabs .tag { font-size: 10px; padding: 0 6px; margin-left: 4px; color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft) }
.rcp .rcp-seq { padding: 4px 0 0 }
.rcp .rcp-preview { margin: 14px 0 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); word-break: keep-all }
.rcp-result.card { margin-top: 14px }
.rcp-result .hint { margin-bottom: 0 }
.rcp-legend { color: var(--changeover) }
.gantt-span.changeover { background: var(--changeover) }
.node[data-mode=changeover] .mode-pill { color: var(--floor-changeover); border-color: color-mix(in srgb, var(--floor-changeover) 45%, transparent) }
.seqx .seqx-recipe { color: var(--floor-muted); font-size: 11px }
.seqx-recipe-note .mini { margin-left: 4px }
@media (max-width: 820px) {
  dialog:has(> .rcp-dialog) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0 }
}
@media (max-width: 560px) {
  .rcp .rcp-six { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}