/* M5 화면: 시뮬레이터 차트·비교표·데모 안내. 색은 tokens.css 변수만 쓴다. */
.chart { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick { fill: var(--text-muted); font-size: 11px; }
.chart-line { stroke-width: 2.5; stroke-linejoin: round; }
.chart-line.s0 { stroke: var(--accent); }
.chart-line.s1 { stroke: var(--tone-warn-fg); stroke-dasharray: 6 4; }
.chart-line.s2 { stroke: var(--tone-success-fg); stroke-dasharray: 2 3; }
.chart-bar { fill: var(--accent); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.chart-legend .key { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; margin-right: var(--sp-1); }
.chart-legend .k1 { border-top: 3px dashed var(--tone-warn-fg); }
.chart-legend .k2 { border-top: 3px dotted var(--tone-success-fg); }
.chart-box { display: grid; gap: var(--sp-2); min-width: 0; }
.cmp-wrap { overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; }
.cmp-table th, .cmp-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: right; }
.cmp-table th:first-child, .cmp-table td:first-child { text-align: left; }
.cmp-table td.best { background: var(--tone-success-bg); color: var(--tone-success-fg); font-weight: 700; }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.demo-guide ol { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.demo-guide li.done { color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
[hidden] { display: none !important; }
@media (max-width: 767px) {
  .chart-tick { font-size: 17px; }
  .chart-line { stroke-width: 4; }
}

/* 2D 재생 */
.rp-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.rp-timebar { display: grid; gap: var(--sp-2); }
.rp-clock { font-weight: 700; font-size: 1.05rem; }
#rp-t { width: 100%; min-height: 28px; }
.rp-floor { width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.rp-svg { width: 100%; height: auto; display: block; }
.rp-tile { cursor: pointer; outline: none; }
.rp-tile rect:first-of-type { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.rp-id { fill: var(--text); font-size: 20px; font-weight: 700; }
.rp-st { fill: var(--text); font-size: 15px; }
.rp-qty { fill: var(--text-muted); font-size: 13px; }
.rp-barbg { fill: var(--border); }
.rp-bar { fill: var(--accent); }
.rp-tile.k-STORE rect:first-of-type { stroke-dasharray: 5 3; }
.rp-tile.st-RUN rect:first-of-type { fill: var(--tone-success-bg); stroke: var(--tone-success-fg); }
.rp-tile.st-SETUP rect:first-of-type { fill: var(--tone-warn-bg); stroke: var(--tone-warn-fg); }
.rp-tile.st-DOWN rect:first-of-type { fill: var(--tone-danger-bg); stroke: var(--tone-danger-fg); stroke-width: 2.5; }
.rp-tile.sel rect:first-of-type { stroke: var(--accent); stroke-width: 4; }
.rp-tile:focus-visible rect:first-of-type { stroke: var(--focus); stroke-width: 4; }
.rp-carrier rect { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.rp-carrier.t-AGV rect { fill: var(--tone-warn-fg); }
.rp-carrier.empty { opacity: 0.55; }
.rp-carrier.empty rect { stroke: var(--text-muted); stroke-dasharray: 3 2; }
.rp-ctext { fill: var(--accent-contrast); font-size: 12px; font-weight: 700; }
.rp-load { fill: var(--text); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.rp-route { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rp-recent { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); }
.rp-legend .rp-swatch { display: inline-block; min-width: 1.2em; text-align: center; font-weight: 700; }
.rp-legend .st-RUN { color: var(--tone-success-fg); }
.rp-legend .st-SETUP { color: var(--tone-warn-fg); }
.rp-legend .st-DOWN { color: var(--tone-danger-fg); }
@media (prefers-reduced-motion: reduce) { .rp-carrier { transition: none; } }
@media (max-width: 767px) {
  .rp-floor { overflow-x: auto; }
  .rp-svg { width: 680px; max-width: none; } /* 좁은 화면은 가로로 밀어서 본다(글자가 읽히는 크기 유지) */
}

/* 예측계획(BucketGrid, 정확도 탭). 토큰만 쓰므로 라이트·다크 모두 따라간다. */
.bucket-grid-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.bucket-grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.bucket-grid caption { text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-muted); }
.bucket-grid th, .bucket-grid td { padding: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.bucket-grid .bg-sticky { position: sticky; left: 0; background: var(--surface); text-align: left; z-index: 1; }
.bg-firm { background: var(--accent-soft); }
.bg-forecast { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--border) 5px 10px); background-color: var(--surface); }
.bg-cell.bg-mixed { padding: 0; display: table-cell; }
.bg-part { display: inline-block; padding: var(--sp-1) var(--sp-2); }
.bg-key { display: inline-block; padding: 0 var(--sp-2); border: 1px solid var(--border); }
.bg-empty { color: var(--text-muted); }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.acc-grid > div { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.acc-grid strong { display: block; font-size: var(--fs-lg); }
.ctl-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.ctl-row .field { min-width: 0; }
.bg-part + .bg-part { border-left: 1px solid var(--border); }