/* 생산관리(mes 모듈) 화면 — 포털(ccp.css)과 같은 토큰·같은 부품(.card · .btn · .badge · table · .formgrid)을 쓰고, 여기에는 MES 화면에만 있는 것만 둔다.
   색은 전부 디자인 토큰(tokens.css). 레퍼런스(fzmes)의 화면 틀(머리 → 조회 조건 → 표, 문서 입력 = 머리 칸 + 품목 줄)만 따른다. */

.mes-head{margin-bottom:var(--fna-space-md);align-items:center;gap:var(--fna-space-sm)}
.mes-title{font-size:var(--fna-font-size-lg)}
.mes-req{color:var(--fna-error);font-weight:800}

/* 조회 조건 */
.mes-search{margin-bottom:var(--fna-space-md)}
.mes-search .body{align-items:flex-end;gap:var(--fna-space-md)}
.mes-search label.f{min-width:140px}
.mes-search input,.mes-search select{min-width:140px}

/* 표 — 숫자는 오른쪽, 누를 수 있는 줄은 손가락 */
.mes-table td.num,.mes-table th.num,.mes-lines td.num,.mes-lines th.num{text-align:right;font-variant-numeric:tabular-nums}
.mes-table tr.mes-click{cursor:pointer}
.mes-table tr.mes-click:hover td{background:var(--fna-surface-low)}
.mes-table tr.mes-click:focus-visible{outline:2px solid var(--fna-primary);outline-offset:-2px}
.mes-table tfoot td{font-weight:800;background:var(--fna-surface-low);border-top:2px solid var(--fna-border)}
.mes-table td.mes-nowrap,.mes-table th.mes-nowrap{white-space:nowrap}
.mes-plus{color:var(--fna-primary);font-weight:700}
.mes-minus{color:var(--fna-error);font-weight:700}
.mes-zero{color:var(--fna-text-muted)}
.mes-sub{display:block;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}

/* 머리 칸 */
.mes-fields{padding:var(--fna-space-lg)}
.mes-fields .mes-wide{grid-column:1 / -1}
.mes-fields .mes-check{flex-direction:row;align-items:center;gap:var(--fna-space-sm)}
.mes-fields textarea{resize:vertical}

/* 품목 줄(편집 표) */
.mes-lines table{min-width:720px}
.mes-lines td{padding:6px 8px}
.mes-lines td input,.mes-lines td select{width:100%;min-width:88px}
.mes-lines td select,.mes-lines td.w-m input{min-width:128px}
.mes-lines td input[type=checkbox]{width:auto;min-width:0}
.mes-lines td.w-item select{min-width:200px}
.mes-lines td.w-s input{min-width:72px}
.mes-lines td.w-r input{min-width:104px}
.mes-lines__bar{padding:var(--fna-space-sm) var(--fna-space-md);border-top:1px solid var(--fna-border)}
.mes-totals{padding:var(--fna-space-md) var(--fna-space-lg);gap:var(--fna-space-lg);justify-content:flex-end;border-top:1px solid var(--fna-border);background:var(--fna-surface-low)}
.mes-totals b{font-variant-numeric:tabular-nums}
.mes-totals__sum{color:var(--fna-primary)}
.mes-actions{padding:var(--fna-space-md) var(--fna-space-lg);gap:var(--fna-space-sm);justify-content:flex-end}

/* 검수 항목(스위치 모음) */
.mes-checks{display:flex;flex-wrap:wrap;gap:var(--fna-space-xs) var(--fna-space-md)}
.mes-checks label{display:inline-flex;align-items:center;gap:6px;font-size:var(--fna-font-size-sm);font-weight:600;color:var(--fna-text)}

/* 현황판 */
.mes-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--fna-space-md);margin-bottom:var(--fna-space-md)}
.mes-kpi{padding:var(--fna-space-lg);border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface)}
.mes-kpi__label{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:700}
.mes-kpi__value{font-size:var(--fna-font-size-2xl,28px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.mes-kpi__sub{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.mes-kpi--warn .mes-kpi__value{color:var(--fna-error)}
.mes-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--fna-space-md)}
.mes-bars{display:flex;align-items:flex-end;gap:var(--fna-space-sm);height:150px;padding:var(--fna-space-md) var(--fna-space-lg)}
.mes-bars__day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mes-bars__stack{display:flex;align-items:flex-end;gap:2px;height:110px;width:100%;justify-content:center}
.mes-bars__bar{width:10px;border-radius:3px 3px 0 0;min-height:2px}
.mes-bars__bar--receipt{background:var(--fna-info,var(--fna-primary))}
.mes-bars__bar--produce{background:var(--fna-success)}
.mes-bars__bar--ship{background:var(--fna-warning)}
.mes-bars__label{font-size:var(--fna-font-size-xs);color:var(--fna-text-muted)}
.mes-legend{gap:var(--fna-space-md);padding:0 var(--fna-space-lg) var(--fna-space-md);font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.mes-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}

.mes-off{margin:0 0 var(--fna-space-md);font-size:var(--fna-font-size-sm)}

/* 생산 현황 — 최근 7일: (종류 · 단위)마다 한 줄, 줄마다 자기 눈금 */
.mes-week{padding:var(--fna-space-md) var(--fna-space-lg);display:flex;flex-direction:column;gap:var(--fna-space-sm)}
.mes-week__row{display:grid;grid-template-columns:96px 1fr auto;align-items:end;gap:var(--fna-space-md)}
.mes-week__name{font-size:var(--fna-font-size-sm);font-weight:700}
.mes-week__name i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.mes-week__bars{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;height:44px;align-items:end;border-bottom:1px solid var(--fna-border)}
.mes-week__day{display:flex;align-items:flex-end;justify-content:center;height:100%;font-size:var(--fna-font-size-xs);color:var(--fna-text-muted)}
.mes-week__day .mes-bars__bar{width:60%;max-width:22px}
.mes-week__sum{font-size:var(--fna-font-size-sm);font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.mes-week__axis .mes-week__bars{height:auto;border-bottom:0}
.mes-kpi__value small{font-size:var(--fna-font-size-sm);font-weight:600}

/* 진행률 막대(작업지시) */
.mes-progress{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--fna-surface-high);vertical-align:middle;overflow:hidden}
.mes-progress > i{display:block;height:100%;background:var(--fna-primary)}
.mes-progress.done > i{background:var(--fna-success)}

/* 로트 추적 — 입고 → 생산 → CCP → 출하 */
.mes-trace{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--fna-space-md)}
.mes-trace__col h4{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);margin:0 0 var(--fna-space-sm)}
.mes-node{border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);padding:var(--fna-space-md);background:var(--fna-surface);margin-bottom:var(--fna-space-sm)}
.mes-node.cur{border-color:var(--fna-primary);border-width:2px}
.mes-node b{display:block}
.mes-node .muted{font-size:var(--fna-font-size-sm)}

/* 창고이동 — 왼쪽 출고 창고의 재고, 오른쪽 옮길 품목 */
.mes-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--fna-space-md)}
@media (max-width:980px){.mes-split{grid-template-columns:1fr}}
.mes-table tr.picked td{background:var(--fna-surface-container)}

/* 설비 가동 카드 */
.mes-eq{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--fna-space-md)}
.mes-eq__card{border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);padding:var(--fna-space-lg);background:var(--fna-surface);display:flex;flex-direction:column;gap:var(--fna-space-sm)}
.mes-eq__card.run{border-color:var(--fna-success)}
.mes-eq__card.stop{border-color:var(--fna-error)}

/* ── [sales] 영업(주문 · 출하) 화면에만 쓰는 것 ── */

/* ── [prod] 생산(BOM · 소요량 · 작업지시 · 생산실적 · 설비 가동) 화면에만 쓰는 것 ── */
.mes-result-lot{font-size:var(--fna-font-size-xl);font-variant-numeric:tabular-nums}
.mes-h4{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);margin:var(--fna-space-md) 0 var(--fna-space-sm)}
.mes-eq__name{font-size:var(--fna-font-size-lg)}
.mes-gap{height:var(--fna-space-md)}

/* 공정 흐름도 — 공정 칸을 화살표로 잇는다(좁으면 다음 줄로). CCP 공정은 빨간 테두리, 끝의 제품은 주색 */
.mes-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--fna-space-sm) 0;padding:var(--fna-space-md) var(--fna-space-lg)}
.mes-flow__node{min-width:132px;max-width:240px;border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface);padding:var(--fna-space-sm) var(--fna-space-md);display:flex;flex-direction:column;gap:var(--fna-space-xs);font:inherit;color:inherit;text-align:left}
button.mes-flow__node{cursor:pointer}
button.mes-flow__node:hover{background:var(--fna-surface-low);border-color:var(--fna-primary)}
button.mes-flow__node:focus-visible{outline:2px solid var(--fna-primary);outline-offset:2px}
.mes-flow__node.cur{border:2px solid var(--fna-primary);background:var(--fna-primary-container)}
.mes-flow__art{display:flex;justify-content:center}
.mes-flow__cnt{display:flex;gap:4px;flex-wrap:wrap}
.mes-flow__node.ccp{border:2px solid var(--fna-error)}
.mes-flow__node.end{border:2px solid var(--fna-primary);background:var(--fna-surface-low)}
.mes-flow__node.loose{border-style:dashed}
.mes-flow__top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mes-flow__no{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:11px;background:var(--fna-primary);color:var(--fna-primary-on);font-size:var(--fna-font-size-xs);font-weight:800}
.mes-flow__node.ccp .mes-flow__no{background:var(--fna-error)}
.mes-flow__in{display:block;font-size:var(--fna-font-size-sm)}
.mes-flow__li{display:flex;justify-content:space-between;gap:var(--fna-space-sm);padding:2px 0;border-top:1px dashed var(--fna-border)}
.mes-flow__li span{color:var(--fna-text-muted)}
.mes-flow__li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.mes-flow__end{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.mes-flow__arrow{display:flex;align-items:center;padding:0 4px;color:var(--fna-text-muted)}
.mes-flow__empty{padding:var(--fna-space-md) var(--fna-space-lg);margin:0}
.mes-flow__desc{padding:var(--fna-space-sm) var(--fna-space-lg) 0;margin:0;font-size:var(--fna-font-size-sm)}
.mes-flow__title{padding:0 var(--fna-space-lg);margin-bottom:0}
.mes-flowcard{margin-bottom:var(--fna-space-md)}
.mes-flowcard h3{gap:var(--fna-space-sm)}
/* 공정 그림(디자인 시스템 process-art.js) — 선은 글자색(currentColor), 옅은 면은 표면색. CCP 공정은 빨강 */
.fna-art{width:52px;height:52px;color:var(--fna-primary);flex:none}
.fna-art.sm{width:26px;height:26px;vertical-align:middle}
.fna-art.lg{width:68px;height:68px}
.fna-art .l{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fna-art .s{fill:var(--fna-surface-container);stroke:none}
.fna-art .f{fill:currentColor;stroke:none}
.mes-flow__node.ccp .fna-art{color:var(--fna-error)}
/* 공정 현황 — 머리(그림 · 이름 · 오늘 숫자) + 카드들 */
.mes-proc .card,.mes-proc .mes-cols{margin-bottom:var(--fna-space-md)}
.mes-proc__head{display:flex;align-items:center;gap:var(--fna-space-lg);padding:var(--fna-space-md) var(--fna-space-lg)}
.mes-proc__facts{display:flex;flex-wrap:wrap;gap:var(--fna-space-xs) var(--fna-space-lg);padding:var(--fna-space-sm) 0;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.mes-proc__facts b{color:var(--fna-text);font-size:var(--fna-font-size-md,1rem);font-variant-numeric:tabular-nums}
.card > .mes-proc__facts{padding:var(--fna-space-md) var(--fna-space-lg) 0}
.mes-proc__facts .mes-bad,.mes-proc__facts .mes-bad b{color:var(--fna-error)}
.mes-proc__note{padding:var(--fna-space-sm) var(--fna-space-lg) var(--fna-space-md);margin:0;font-size:var(--fna-font-size-sm)}
.mes-table select{min-width:130px}
/* BOM 편집 — 수량 ↔ 배합비 전환 줄, 계산된(고칠 수 없는) 칸 */
.mes-bom__mode{padding:var(--fna-space-sm) var(--fna-space-lg);align-items:center;gap:var(--fna-space-md);border-top:1px solid var(--fna-border)}
.mes-bom__mode label.f{flex-direction:row;align-items:center;gap:var(--fna-space-sm)}
.mes-bom__mode label.f input{width:120px;text-align:right}
.mes-lines td input[readonly],.mes-bom__mode input[readonly]{background:var(--fna-surface-low);color:var(--fna-text-muted)}
.mes-totals .mes-bad{color:var(--fna-error)}

/* ── [stock] 재고(현황 · 일보 · 수불부 · 로트 추적 · 조정 · 이동) 화면에만 쓰는 것 ── */
/* 재고 이력 창의 기간 줄 */
.mes-hist__bar{padding:0 0 var(--fna-space-md);align-items:flex-end;gap:var(--fna-space-md)}
/* 창고별 재고현황(피벗) — 품목코드 · 품목명은 왼쪽에 붙어 있고 창고 열만 옆으로 민다 */
.mes-pivot td:nth-child(1),.mes-pivot th:nth-child(1){position:sticky;left:0;min-width:110px;max-width:110px;overflow-wrap:anywhere;z-index:1}
.mes-pivot td:nth-child(2),.mes-pivot th:nth-child(2){position:sticky;left:110px;min-width:180px;z-index:1;box-shadow:1px 0 0 var(--fna-border)}
.mes-pivot tbody td:nth-child(-n+2){background:var(--fna-surface)}
/* 로트 추적 — 노드 안은 한 줄씩, 누를 수 있는 노드는 테두리로 알린다 */
.mes-node > span{display:block}
.mes-node > span + span{margin-top:2px}
.mes-node span b{display:inline}
.mes-node__qty{font-size:var(--fna-font-size-sm);font-variant-numeric:tabular-nums}
.mes-node[data-node]{cursor:pointer}
.mes-node[data-node]:hover{border-color:var(--fna-primary);background:var(--fna-surface-low)}
.mes-node[data-node]:focus-visible{outline:2px solid var(--fna-primary);outline-offset:2px}
.mes-trace__col h4:not(:first-child){margin-top:var(--fna-space-md)}
/* 창고이동 입력 — 창고 고르기 줄과 옮길 품목의 입력 칸 */
.mes-move__bar{align-items:flex-end;gap:var(--fna-space-md)}
.mes-move__bar label.f{min-width:160px}
#mes-mv-cart-t input[type=number]{width:110px}
#mes-mv-cart-t input[type=text]{width:100%;min-width:120px}


/* 공정 단계 줄 — 끝낸 공정(초록 체크) · 지금 공정(주색) · 남은 공정(옅게), 끝에 누르는 버튼 */
.mes-steps{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fna-space-sm)}
.mes-steps__chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mes-step{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border:1px solid var(--fna-border);border-radius:999px;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);background:var(--fna-surface);white-space:nowrap}
.mes-step i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9px;background:var(--fna-surface-high);font-style:normal;font-size:var(--fna-font-size-xs);font-weight:800}
.mes-step.done{color:var(--fna-success-text);border-color:var(--fna-success);background:var(--fna-success-container)}
.mes-step.done i{background:var(--fna-success);color:var(--fna-primary-on)}
.mes-step.cur{color:var(--fna-primary);border:2px solid var(--fna-primary);font-weight:800;background:var(--fna-primary-container)}
.mes-step.cur i{background:var(--fna-primary);color:var(--fna-primary-on)}
.mes-step.ccp:not(.done){border-color:var(--fna-error)}
.mes-step__sep{color:var(--fna-text-muted)}
.mes-stepcards{display:flex;flex-direction:column}
.mes-stepcard{padding:var(--fna-space-md) var(--fna-space-lg);border-top:1px solid var(--fna-border);display:flex;flex-direction:column;gap:var(--fna-space-sm)}
.mes-stepcard:first-child{border-top:0}
.mes-stepcard .row{gap:var(--fna-space-md);align-items:center}
#mes-pc-items .mes-steps{min-width:460px}
.mes-step i .fna-icon{width:12px;height:12px}
/* 바코드 스캔 칸(입고 · 출하 등록) */
.mes-scan__row{gap:var(--fna-space-md);flex-wrap:wrap}
.mes-scan__row .f{flex:1 1 240px}
.mes-scan__msg{min-height:1.5em;margin-top:var(--fna-space-sm);font-weight:700;color:var(--fna-text-muted)}
.mes-scan__msg.ok{color:var(--fna-success)}
.mes-scan__msg.bad{color:var(--fna-error)}