/* M2 화면: 가져오기 마법사, 대시보드, 현장 입력. 색은 tokens.css 변수만 쓴다. */

/* 마법사 단계 표시 */
.stepper { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.stepper li {
  flex: 1 1 0; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); counter-increment: step;
  display: flex; gap: var(--sp-2); align-items: center;
}
.stepper li::before {
  content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-weight: 600;
}
.stepper li[aria-current="step"] { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.stepper li[aria-current="step"]::before { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.stepper li.done::before { content: "✓"; background: var(--tone-success-bg); color: var(--tone-success-fg); }
.stepper .step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wiz-text { width: 100%; min-height: 160px; font-family: var(--font-mono); font-size: var(--fs-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
tr.row-error td { background: var(--tone-danger-bg); }
tr.flag20 td { background: var(--tone-warn-bg); }
.num-strong { font-weight: 700; }
.wiz-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; }
.radio-line { display: flex; gap: var(--sp-2); align-items: flex-start; }
.radio-line input { margin-top: 4px; }
@media (max-width: 767px) {
  .stepper .step-label { display: none; }
  .stepper li[aria-current="step"] .step-label { display: block; }
  .stepper li[aria-current="step"] { flex: 3 1 0; }
}

/* 대시보드 */
.kpi-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi-card { display: grid; gap: var(--sp-1); }
.kpi-card .kpi-label { color: var(--text-muted); font-size: var(--fs-sm); }
.kpi-card .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.kpi-card .kpi-delta { font-size: var(--fs-sm); }
.kpi-card .kpi-delta.good { color: var(--tone-success-fg); }
.kpi-card .kpi-delta.bad { color: var(--tone-danger-fg); }
.kpi-card .kpi-delta.flat { color: var(--text-muted); }
.kpi-card.clickable { cursor: pointer; }
.kpi-card.clickable:hover { background: var(--surface-2); }
.spark { width: 100%; height: 40px; display: block; }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-area { fill: var(--accent-soft); stroke: none; }
.spark .spark-target { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.spark .spark-dot { fill: var(--accent); }
.aux-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.aux-item { display: grid; gap: 2px; }
.aux-item strong { font-size: var(--fs-lg); }
.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.todo-list li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.todo-list .todo-main { flex: 1 1 0; min-width: 0; display: grid; gap: var(--sp-1); }
.todo-list a { min-height: var(--touch); display: inline-flex; align-items: center; }
.dash-cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 767px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } }

/* 현장 입력(큰 글자·큰 버튼) */
.floor { font-size: 1.125rem; }
.floor .tile-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tile {
  min-height: 72px; padding: var(--sp-3) var(--sp-4); text-align: left; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: grid; gap: var(--sp-1);
  font-size: inherit;
}
.tile:hover { background: var(--surface-2); }
.tile .tile-title { font-weight: 700; }
.tile .tile-sub { color: var(--text-muted); font-size: var(--fs); }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--w, 0%); background: var(--accent); }
.field-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.field-tab { min-height: 72px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); color: var(--text); padding: var(--sp-2); display: grid; gap: 2px; text-align: center; cursor: pointer; font-size: inherit; }
.field-tab .ft-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.field-tab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.keypad button { min-height: 56px; font-size: 1.5rem; font-weight: 600; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.keypad button:hover { background: var(--surface-2); }
.keypad button.wide { grid-column: span 1; font-size: 1rem; }
.btn.big { min-height: 56px; font-size: 1.125rem; font-weight: 600; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.code-grid button { min-height: 56px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1rem; }
.code-grid button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.remain-line { font-weight: 700; }

/* 계획·MRP / 작업지시 */
.inline-input { width: 100%; min-width: 80px; min-height: var(--touch); }
.bar-cell { display: grid; gap: 2px; min-width: 90px; }
.bar { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-firm { width: var(--w, 0%); background: var(--accent); }
.bar-fc { width: var(--w, 0%); background: var(--accent-soft); border: 1px dashed var(--accent); box-sizing: border-box; }
.forecast-rows tbody tr { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-2) 6px 12px); }

/* M3: 구매·출하·재고 */
@media print { .topbar, .sidebar, .tabbar, .notice, .no-print { display: none !important; } }