/* 스마트HACCP 화면(2026-10-19, 목업 v3 2026-10-20). 색·글꼴은 app.css의 컨텐츠 토큰(--c-*, --s-*)을 그대로 쓴다.
   한계기준 이탈·지연은 주황(--h-dev), 미실시는 빨강(--c-error), 정상은 초록(--c-ok)으로 구분하고 글자로도 함께 적는다. */
:root{--h-dev:#a3410c;--h-dev-tint:#fff4ec;--h-dev-line:#f2cdb5;--h-ok-tint:#e8f4ec;--h-warn-band:#e3f1e7}

.hc-screen{display:flex;flex-direction:column;flex:1;min-height:0;gap:10px}
.hc-screen>.page-breadcrumb{margin:0!important;flex-shrink:0}
.hc-screen>.page-heading{margin:0;padding-bottom:10px;flex-shrink:0}
.hc-head-meta{font-size:12px;color:var(--c-muted);white-space:nowrap}
.hc-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--c-ok);background:var(--h-ok-tint);border-radius:999px;padding:3px 10px;white-space:nowrap}
.hc-live i{width:7px;height:7px;border-radius:50%;background:#1d8a4a}
.hc-live.off{color:var(--c-muted);background:var(--c-readonly)}.hc-live.off i{background:#8a95a6}

/* 패널 */
.hc-panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;min-width:0;min-height:0;display:flex;flex-direction:column}
.hc-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid var(--c-line-soft);flex-shrink:0}
.hc-panel-head h2{margin:0;font-size:14px;font-weight:700;white-space:nowrap}
.hc-panel-head h2 span{color:var(--c-primary);margin-left:4px}
.hc-panel-head small{font-size:12px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-scroll{flex:1;min-height:0;overflow:auto}

/* KPI */
.hc-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;flex-shrink:0}
.hc-kpi{background:var(--c-surface);border:1px solid var(--c-line);border-radius:8px;padding:9px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-kpi-label{font-size:12px;color:var(--c-muted)}
.hc-kpi-value{font:700 22px var(--app-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-kpi-value small{font:500 12px var(--app-font);color:var(--c-muted);margin-left:4px}
.hc-kpi-detail{font-size:12px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-kpi.dev .hc-kpi-value{color:var(--h-dev)}.hc-kpi.err .hc-kpi-value{color:var(--c-error)}
.hc-bar{height:4px;border-radius:2px;background:var(--c-row-line);margin-top:4px}
.hc-bar i{display:block;height:4px;border-radius:2px;background:var(--c-primary)}

/* 본문 두 칸 */
.hc-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:10px;flex:1;min-height:0}
.hc-body.wide-side{grid-template-columns:minmax(0,1fr) 300px}
.hc-col{display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0}

/* 공정 흐름 */
.hc-flow{display:flex;align-items:stretch;gap:4px;padding:10px 14px}
.hc-node{flex:1;min-width:0;border:1px solid var(--c-line-soft);border-radius:6px;padding:7px 9px;background:var(--c-stripe);display:flex;flex-direction:column;gap:1px}
.hc-node .no{font:500 11px var(--app-mono);color:var(--c-subtle)}
.hc-node .name{font-weight:700;font-size:13px;white-space:nowrap}
.hc-node .val{font:600 13px var(--app-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-node .note{font-size:11px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-node.ccp{background:var(--c-surface);border:1.5px solid var(--c-primary)}
.hc-node.ccp.warn{border-color:var(--h-dev);background:var(--h-dev-tint)}
.hc-node.ok .note{color:var(--c-ok)}.hc-node.warn .note{color:var(--h-dev);font-weight:600}
.hc-arrow{align-self:center;color:#9aa7b6;font-size:14px}
.hc-ccp{display:inline-block;font:600 10px var(--app-mono);color:#fff;background:var(--c-primary);border-radius:3px;padding:1px 5px;letter-spacing:.02em}
.hc-node.warn .hc-ccp{background:var(--h-dev)}

/* 그래프 */
.hc-chart{flex:1;min-height:0;padding:4px 10px 6px;display:flex}
.hc-chart svg{width:100%;height:100%;min-height:150px}
.hc-legend{display:flex;gap:12px;font-size:11px;color:var(--c-muted);align-items:center;white-space:nowrap}
.hc-legend i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* 할 일 목록 */
.hc-tasks{list-style:none;margin:0;padding:0}
.hc-tasks li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--c-row-line)}
.hc-tasks li.dev{background:var(--h-dev-tint)}.hc-tasks li.err{background:var(--c-error-tint)}
.hc-tasks a{color:inherit;text-decoration:none;display:contents}
.hc-tasks li:hover{background:var(--c-hover);cursor:pointer}
.hc-tm{font:500 12px var(--app-mono);color:var(--c-muted)}
.hc-tt{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-ts{font-size:11px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-tasks li.err .hc-ts{color:var(--c-error)}

/* 상태 배지(이탈·적합) — StatusBadge의 색 이름에 더한다 */
.status-badge.status-dev{background:var(--h-dev-tint);color:var(--h-dev);border:1px solid var(--h-dev-line)}

/* HACCP 계획 요약 띠 */
.hc-plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,0.8fr) minmax(0,1fr) minmax(0,1.2fr);flex-shrink:0}
.hc-plan>div{padding:8px 14px;border-right:1px solid var(--c-line-soft);min-width:0}
.hc-plan>div:last-child{border-right:0}
.hc-plan .k{font-size:11px;color:var(--c-muted);margin-bottom:2px}
.hc-plan b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-plan .s{display:block;font-size:12px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 세그먼트 단추(CCP 고르기, 적합·부적합 등) */
.hc-seg{display:inline-flex;border:1px solid var(--c-input-line);border-radius:6px;overflow:hidden;flex-shrink:0}
.hc-seg button{height:38px;padding:0 14px;border:0;border-right:1px solid var(--c-input-line);background:#fff;font:600 13px var(--app-font);color:var(--c-muted);cursor:pointer}
.hc-seg button:last-child{border-right:0}
.hc-seg button[aria-pressed=true]{background:var(--c-primary);color:#fff}

/* 표 */
.hc-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.hc-table th{position:sticky;top:0;background:var(--c-head);color:var(--c-muted);font-weight:600;font-size:12px;text-align:center;padding:7px 8px;border-bottom:1px solid var(--c-line);white-space:nowrap;z-index:1}
.hc-table td{padding:6px 8px;border-bottom:1px solid var(--c-row-line);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-table td.l{text-align:left}.hc-table td.n{text-align:right;font-family:var(--app-mono);font-variant-numeric:tabular-nums}
.hc-table td.mono{font-family:var(--app-mono)}
.hc-table tr.dev td{background:var(--h-dev-tint)}.hc-table tr.err td{background:var(--c-error-tint)}
.hc-table tr.planned td{color:#8a95a6}
.hc-table tr.click{cursor:pointer}.hc-table tr.click:hover td{background:var(--c-hover)}
.hc-table td.dev{color:var(--h-dev);font-weight:700}
.hc-src{font-size:11px;color:var(--c-muted);border:1px solid var(--c-line);border-radius:4px;padding:0 5px}
.hc-empty{padding:28px;text-align:center;color:var(--c-muted);font-size:13px}

/* 오른쪽 정보 칸 */
.hc-side{padding:10px 14px}
.hc-side h3{margin:0 0 8px;font-size:13px;font-weight:700}
.hc-kv{display:grid;grid-template-columns:78px minmax(0,1fr);gap:5px 8px;font-size:12px}
.hc-kv dt{color:var(--c-muted)}.hc-kv dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-sign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--c-input-line);border-radius:6px;overflow:hidden;text-align:center;font-size:12px}
.hc-sign>div{border-right:1px solid var(--c-input-line)}.hc-sign>div:last-child{border-right:0}
.hc-sign .h{background:var(--c-head);padding:4px;border-bottom:1px solid var(--c-input-line);font-weight:600;color:var(--c-muted)}
.hc-sign .b{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.hc-sign .b small{font-size:10px;color:var(--c-muted)}

/* 점검표 */
.hc-meta{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex-shrink:0}
.hc-meta>div{padding:8px 14px;border-right:1px solid var(--c-line-soft);min-width:0}
.hc-meta>div:last-child{border-right:0}
.hc-meta .k{font-size:11px;color:var(--c-muted);margin-bottom:2px}
.hc-meta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.hc-check{display:grid;grid-template-columns:40px minmax(0,1.3fr) minmax(0,1fr) 240px;align-items:center;gap:12px;padding:7px 16px;border-bottom:1px solid var(--c-row-line)}
.hc-check.head{background:var(--c-head);font-size:12px;font-weight:600;color:var(--c-muted);padding:8px 16px;text-align:center}
.hc-check.head span:nth-child(2){text-align:left}
.hc-check.bad{background:var(--c-error-tint)}
.hc-check .no{font:500 12px var(--app-mono);color:var(--c-subtle);text-align:center}
.hc-check .crit{font-size:12px;color:var(--c-subtle)}
.hc-check .fix{grid-column:2 / 5;display:grid;grid-template-columns:minmax(0,1fr);margin-top:-2px}
.hc-judge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hc-judge button{height:44px;border:1px solid var(--c-input-line);border-radius:6px;background:#fff;font:600 14px var(--app-font);color:var(--c-muted);cursor:pointer}
.hc-judge button.ok{background:var(--c-ok);border-color:var(--c-ok);color:#fff}
.hc-judge button.ng{background:var(--c-error);border-color:var(--c-error);color:#fff}
.hc-judge button.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.hc-judge button:disabled{cursor:default;opacity:.85}
.hc-num{display:flex;align-items:center;gap:8px}
.hc-num input{width:110px;height:44px;box-sizing:border-box;border:1px solid var(--c-input-line);border-radius:6px;padding:0 10px;font:600 15px var(--app-mono);text-align:right}
.hc-num input:read-only{background:var(--c-readonly)}
.hc-fix-input{height:38px;box-sizing:border-box;border:1px solid var(--c-error);border-radius:6px;padding:0 10px;font:13px var(--app-font);width:100%}
.hc-fix-input:read-only{background:var(--c-readonly);border-color:var(--c-input-line)}
.hc-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}
.hc-progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--c-muted)}
.hc-progress .hc-bar{width:200px;margin:0}
@media (max-width:1500px){.hc-progress .hc-bar{width:120px}}
.hc-pick{display:flex;gap:6px;flex-wrap:wrap}

/* 감도 점검 */
.hc-pieces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:10px 14px}
.hc-piece{border:1px solid var(--c-line-soft);border-radius:8px;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
.hc-piece b{font-size:13px}.hc-piece small{font-size:11px;color:var(--c-muted)}
.hc-piece.bad{border-color:var(--h-dev);background:var(--h-dev-tint)}

/* 개선조치 단계 */
.hc-steps{list-style:none;margin:0;padding:10px 0;background:var(--c-stripe);border-right:1px solid var(--c-line-soft)}
.hc-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:8px 16px;align-items:start}
.hc-steps .c{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 11px var(--app-mono);border:1.5px solid #9aa7b6;color:var(--c-muted);background:#fff}
.hc-steps li.done .c{background:var(--c-ok);border-color:var(--c-ok);color:#fff}
.hc-steps li.cur{background:var(--c-primary-tint)}
.hc-steps li.cur .c{border-color:var(--c-primary);color:var(--c-primary)}
.hc-steps .t{font-weight:600;font-size:13px}
.hc-steps .s{font-size:11px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-event{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--h-dev-tint);border:1px solid var(--h-dev-line);border-radius:6px}
.hc-event>div{padding:7px 12px;border-right:1px solid var(--h-dev-line);min-width:0}
.hc-event>div:last-child{border-right:0}
.hc-event .k{font-size:11px;color:#7c4a2a}
.hc-event b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-guide{border:1px solid var(--c-line-soft);border-radius:6px;padding:8px 12px;background:var(--c-primary-tint);font-size:12px;color:var(--c-text)}
.hc-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hc-option{border:1px solid var(--c-input-line);border-radius:6px;padding:9px 12px;background:#fff;text-align:left;font:13px var(--app-font);color:var(--c-text);cursor:pointer}
.hc-option b{display:block;margin-bottom:2px}.hc-option span{font-size:11px;color:var(--c-muted)}
.hc-option[aria-pressed=true]{border:2px solid var(--c-primary);background:var(--c-primary-tint);padding:8px 11px}
.hc-option:disabled{cursor:default}
.hc-hold{font-size:11px;font-weight:600;color:var(--h-dev);background:#fff;border:1px solid var(--h-dev-line);border-radius:999px;padding:0 7px;margin-left:4px}
.hc-action-body{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:420px}
.hc-action-pane{padding:12px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hc-action-pane h3{margin:0;font-size:15px}
.hc-done-list{display:flex;flex-direction:column;gap:6px;font-size:12px}
.hc-done-list div{display:grid;grid-template-columns:120px minmax(0,1fr) 150px;gap:8px;padding:6px 10px;border:1px solid var(--c-line-soft);border-radius:6px}
.hc-done-list span:last-child{color:var(--c-muted);text-align:right}

/* 팀장 확인 */
.hc-blockers{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--h-dev-tint);border:1px solid var(--h-dev-line);border-radius:8px;font-size:12.5px;flex-shrink:0;min-width:0}
.hc-blockers span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-blockers>b{white-space:nowrap;flex-shrink:0}
.hc-blockers.ok{background:var(--h-ok-tint);border-color:#b9dcc5}
.hc-forms{list-style:none;margin:0;padding:0}
.hc-forms li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;padding:9px 14px;border-bottom:1px solid var(--c-row-line);cursor:pointer}
.hc-forms li:hover{background:var(--c-hover)}
.hc-forms li[aria-selected=true]{background:var(--c-selected);box-shadow:inset 3px 0 0 var(--c-primary)}
.hc-forms .t{font-weight:600;font-size:13px}.hc-forms .s{font-size:11px;color:var(--c-subtle);margin-top:2px}
.hc-forms .i{font-size:11px;color:var(--h-dev);margin-top:1px}
.hc-preview{flex:1;min-height:0;overflow:auto;background:#e9eef3;padding:12px}

/* ── 목업 v3 공통(2026-10-20) ───────────────────────── */
.hc-grow{flex:1;min-height:0}
.hc-body.wide-side{grid-template-columns:minmax(0,1fr) 320px}
.hc-body.wide-detail{grid-template-columns:minmax(0,1fr) 400px}
.hc-body.left-list{grid-template-columns:320px minmax(0,1fr)}
.hc-body.daily{grid-template-columns:400px minmax(0,1fr)}
.hc-body.verify{grid-template-columns:340px minmax(0,1fr) 300px}
.hc-body.emergency{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.hc-body.setup{grid-template-columns:240px minmax(0,1fr) 320px}
.hc-body>.hc-panel,.hc-body>.hc-col{min-height:0}
.hc-kpi.info .hc-kpi-value{color:var(--c-primary)}
.hc-link{color:var(--c-primary);font-size:12px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.hc-link:hover{text-decoration:underline}
.small{font-size:12px}.err{color:var(--c-error)}
.hc-foot-note{margin:0;padding:8px 14px;font-size:12px;color:var(--c-subtle);border-top:1px solid var(--c-line-soft);flex-shrink:0}

/* 조회 줄: 높이 40px, 날짜 160px, 버튼 88px, 간격 12px (UI 기준 조회 조건) */
.hc-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0}
.hc-field{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--c-muted);white-space:nowrap}
.hc-field input,.hc-field select{height:40px;box-sizing:border-box;border:1px solid var(--c-input-line);border-radius:6px;padding:0 10px;font:13px var(--app-font);color:var(--c-text);background:#fff}
.hc-field input[type=date]{width:160px}
.hc-field select{min-width:140px}
.hc-btn{height:40px;min-width:88px}
.hc-chips{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.hc-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--c-readonly);color:var(--c-muted);white-space:nowrap}
.hc-chip.err{background:var(--c-error-tint);color:var(--c-error);font-weight:600}
.hc-chip.dev{background:var(--h-dev-tint);color:var(--h-dev);font-weight:600}

/* 탭 */
.hc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--c-line);flex-shrink:0}
.hc-tabs button{height:36px;padding:0 16px;border:0;background:none;font:600 13px var(--app-font);color:var(--c-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.hc-tabs button[aria-selected=true]{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.hc-tabs .n{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--c-error);color:#fff;font:600 11px var(--app-mono)}

/* 표 행 선택 */
.hc-table tr.sel td{background:var(--c-selected)!important;box-shadow:inset 0 0 0 0 var(--c-primary)}
.hc-table tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--c-primary)}
.hc-table td.hc-editable{cursor:pointer;text-decoration:underline dotted;color:var(--c-primary)}
.hc-table tr.sum td{font-weight:700;background:var(--c-head)}
.hc-table.form td{overflow:visible}
input.cell{width:64px;height:30px;box-sizing:border-box;border:1px solid var(--c-input-line);border-radius:4px;padding:0 6px;font:13px var(--app-font)}
input.cell.n{text-align:right;font-family:var(--app-mono)}
.hc-recall-rows input.cell{width:100%}
input.cell:read-only{background:var(--c-readonly)}
.hc-x{border:0;background:none;color:var(--c-error);font-size:16px;cursor:pointer}

/* 01 모니터링 */
.hc-chart.small svg{min-height:130px;max-height:200px}
/* 2026-10-20 배치: 왼쪽 지점 표(남는 높이) + 공정 흐름, 오른쪽 추이 그래프 : 다음 점검 = 1 : 1. */
.hc-body.monitor{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hc-body.monitor .hc-panel.half{flex:1 1 0;min-height:0}
.hc-chart.fill{padding:8px 12px 6px}
/* 칸 채우기 그래프: 선·띠는 늘어나는 SVG, 눈금·점·이탈 글자는 HTML(%) */
.hc-fchart{position:relative;flex:1;min-height:120px;font:10px var(--app-mono);color:#4a5868}
.hc-fchart .plot{position:absolute;left:40px;right:10px;top:6px;bottom:20px}
.hc-fchart .plot svg{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;display:block}
.hc-fchart .yaxis{position:absolute;left:0;width:34px;top:6px;bottom:20px}
.hc-fchart .yaxis span{position:absolute;right:0;transform:translateY(-50%)}
.hc-fchart .xaxis{position:absolute;left:40px;right:10px;bottom:0;height:16px}
.hc-fchart .xaxis span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.hc-fchart .dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.hc-fchart .dot.cur{width:9px;height:9px;background:#fff;border:2px solid #2f5d8a;box-sizing:border-box}
.hc-fchart .dot.dev{width:10px;height:10px;background:#a3410c}
.hc-fchart .dev-label{position:absolute;transform:translate(9px,-50%);font:700 11px var(--app-font);color:#a3410c;white-space:nowrap}
.hc-fchart .dev-label.left{transform:translate(calc(-100% - 9px),-50%)}
.hc-fchart .lunch{position:absolute;bottom:4px;transform:translateX(-50%);font:10px var(--app-font);color:#5d6b7b}
/* 공정 흐름: 일반 공정만 칸을 나눠 늘이고, CCP 칸(구이 온도·검출 수)은 글자가 잘리지 않게 내용만큼 잡는다. */
.hc-body.monitor .hc-line-row .step{flex:1 0 auto;text-align:center}
.hc-body.monitor .hc-line-rows{min-width:min-content}
.hc-body.monitor .hc-line-row .step.ccp{flex:0 0 auto}
/* 공정 흐름 CCP 값 칸 고정(2026-10-21 사용자 지적): 점심·정지 때 값이 「—」로 바뀌면 칸이 줄어 다른 공정 칸이 늘었다.
   값 너비를 고정한다. 구이 231.7℃ 약 51px, 통과 수 1,892봉 약 51px(12px 고정폭 글꼴). 통과 수가 다섯 자리면 칸이 8px 늘어난다. */
.hc-line-row .step.ccp b{display:inline-block;text-align:center}
.hc-line-row .step.ccp b.v-temp{min-width:52px}.hc-line-row .step.ccp b.v-count{min-width:52px}
.hc-alert-card{background:var(--h-dev-tint);border:1px solid var(--h-dev-line);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex-shrink:0}
.hc-alert-card .t{font-weight:700;color:var(--h-dev);font-size:13px}
.hc-alert-card .s{font-size:12px;color:#5b3a24}
.hc-lines{display:flex;align-items:center;gap:6px;padding:10px 14px;overflow-x:auto}
.hc-lines .hc-node{flex:0 0 auto}
.hc-line-rows{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.hc-line-row{display:flex;align-items:center;gap:4px;font-size:12px;white-space:nowrap}
.hc-line-row .no{font:600 11px var(--app-mono);color:var(--c-subtle);width:36px}
.hc-line-row .step{border:1px solid var(--c-line-soft);border-radius:5px;padding:3px 7px;background:var(--c-stripe)}
.hc-line-row .step.ccp{background:#fff;border:1.5px solid var(--c-primary)}
.hc-line-row .step.ccp.dev{border-color:var(--h-dev);background:var(--h-dev-tint)}
.hc-line-row .step.ccp.warn{border-color:var(--c-warn);background:var(--c-warn-tint)}
.hc-line-row .step b{font-family:var(--app-mono);margin-left:4px}
.hc-line-row .step.dev b{color:var(--h-dev)}
.hc-tasks li.empty{display:block;color:var(--c-muted);font-size:12px;cursor:default}
.hc-tasks li.sel{background:var(--c-selected);box-shadow:inset 3px 0 0 var(--c-primary)}
/* 모니터링 CCP 지점 표(2026-10-21): 현재값(1,842봉 · 검출 2 = 138px, 다섯 자리·검출 두 자리면 약 152px)·한계기준(153px)이 잘리지 않게 칸을 잡고,
   1600px 이하는 지점 이름을 줄인다(1라인 · 온도 등 약 82px). 판정 칸은 「이탈 · 12분째」 배지가 들어가는 너비. */
.hc-body.monitor .hc-table col.c-ccp{width:72px}.hc-body.monitor .hc-table col.c-value{width:170px}
.hc-body.monitor .hc-table col.c-limit{width:168px}.hc-body.monitor .hc-table col.c-judge{width:96px}
.hc-body.monitor .hc-table td .short,.hc-body.setup .hc-table td .short{display:none}
/* 오늘 점검 일정: 끝난 줄은 흐리게 */
.hc-tasks.today li.done .hc-tt,.hc-tasks.today li.done .hc-tm{color:var(--c-muted)}
/* CCP 기록 일지(2026-10-21): O/X 칸은 가운데·본문 글꼴 굵게(고정폭 O가 0처럼 보였다), 좁은 칸이라 안쪽 여백 4px.
   오른쪽 결재 칸은 내용이 길어도 결재란이 눌리지 않게 줄이지 않고 칸 안에서 스크롤한다. */
.hc-table th.ox,.hc-table td.ox{text-align:center;padding-left:4px;padding-right:4px}
.hc-table td.ox{font-family:var(--app-font);font-weight:600}
.hc-table td.muted[colspan]{text-align:center}
.hc-side>*{flex-shrink:0}
/* 날짜 칸 옆 쉬는 날 표시(2026-10-21) */
.hc-dayoff{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:12px;background:var(--c-head);border:1px solid var(--c-line);color:var(--c-muted);font-size:12px;font-weight:600;white-space:nowrap}
.hc-blocker-list .items{display:flex;flex-direction:column;gap:2px;max-height:96px;overflow-y:auto}
.hc-blocker-list .items span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-next-slot{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:10px 12px;border:1px solid var(--c-line-soft);border-radius:6px;background:var(--c-head)}
.hc-next-slot .k{grid-column:1/-1;font-size:11px;color:var(--c-muted)}
.hc-next-slot b{font-size:20px}
.hc-next-slot small{grid-column:1/-1;font-size:12px;color:var(--c-muted)}
.hc-tasks.big li{padding:10px 14px;min-height:52px}

/* 02 일지 · 감도 */
.hc-side h3.mt-3{margin-top:14px}
.hc-blocker-list{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding:8px 10px;background:var(--h-dev-tint);border:1px solid var(--h-dev-line);border-radius:6px;font-size:12px}
.hc-blocker-list b{color:var(--h-dev)}
.hc-note-item{font-size:12px;padding:6px 0;border-bottom:1px solid var(--c-row-line)}
.hc-piece-list{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.hc-piece-row{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--c-line-soft);border-radius:6px}
.hc-piece-row b{display:block;font-size:13px}.hc-piece-row small{font-size:11px;color:var(--c-muted)}
.hc-piece-row.bad{border-color:var(--h-dev);background:var(--h-dev-tint)}
.hc-check-line{display:flex;gap:8px;align-items:center;font-size:13px;padding:6px 2px}
.hc-check-line input{width:18px;height:18px}
.hc-warn-text{font-size:12px;color:var(--h-dev);margin:4px 0}
.hc-miss{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hc-miss input{flex:1;min-width:200px;height:36px;box-sizing:border-box;border:1px solid var(--c-error);border-radius:6px;padding:0 10px;font:13px var(--app-font)}
.hc-blockers .hc-miss{margin-left:auto}
.hc-judge.small button{height:30px;font-size:12px}

/* 03 이탈 · 클레임 */
.hc-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.hc-side-head b{font-size:14px}
.hc-kv dd.wrap{white-space:normal}
.hc-kv.wide{grid-template-columns:110px minmax(0,1fr)}
.hc-steps.compact{background:none;border:0;padding:0}
.hc-steps.compact li{padding:5px 0}
.hc-repeat{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding:9px 12px;border-radius:6px;background:#fff8e6;border:1px solid #f0d58f;font-size:12px}
.hc-repeat b{color:var(--c-warn)}.hc-repeat small{color:var(--c-subtle);font-size:11px}
.hc-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hc-trace{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.hc-trace li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:7px 10px;border:1px solid var(--c-line-soft);border-left:3px solid var(--c-primary-line);border-radius:6px;font-size:12px}
.hc-trace li b{grid-column:1}.hc-trace li span{grid-column:1;color:var(--c-subtle)}
.hc-trace li a{grid-column:2;grid-row:1 / 3;align-self:center}
.hc-trace li.hit{border-left-color:var(--h-dev);background:var(--h-dev-tint)}
.hc-options.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 입력 묶음 */
.hc-form{display:flex;flex-direction:column;gap:8px}
.hc-form.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.hc-form.row{flex-direction:row;align-items:flex-end;gap:12px;padding:10px 14px}
.hc-form .span2{grid-column:1 / 3}
.hc-form .grow{flex:1}
.hc-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--c-muted)}
.hc-form input,.hc-form select,.hc-form textarea{box-sizing:border-box;border:1px solid var(--c-input-line);border-radius:6px;padding:0 10px;font:13px var(--app-font);color:var(--c-text);background:#fff}
.hc-form input,.hc-form select{height:40px}
.hc-form textarea{padding:8px 10px;resize:vertical}
.hc-form input:read-only,.hc-form textarea:read-only{background:var(--c-readonly)}

/* 04 선행요건 */
.hc-check-group{padding:6px 16px;background:var(--c-head);font-size:12px;font-weight:700;color:var(--c-muted);border-bottom:1px solid var(--c-row-line)}
.hc-check-note{padding:10px 16px}
.hc-check-note label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--c-muted)}
.hc-check-note input{flex:1;height:40px;box-sizing:border-box;border:1px solid var(--c-input-line);border-radius:6px;padding:0 10px;font:13px var(--app-font)}
.hc-sign-line{display:flex;align-items:center;gap:12px;min-width:0}
/* 2026-10-20: 1366에서 「작성 완료」가 두 줄로 꺾이고 입력 수·서명 안내가 접혔다. 버튼과 숫자는 줄바꿈하지 않고, 안내 문구만 말줄임한다. */
.hc-sign-line .mud-button-root{white-space:nowrap;flex-shrink:0}
.hc-sign-line>.small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hc-foot>.hc-progress{flex-shrink:0;white-space:nowrap}

/* 05 검증 · 일정 */
.hc-group-title{padding:8px 14px 4px;font-size:12px;font-weight:700;color:var(--c-muted)}
.hc-verify{list-style:none;margin:0 0 4px;padding:0}
.hc-verify li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--c-row-line)}
.hc-verify .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-verify .s{font-size:11px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-cal-nav{display:flex;gap:4px;margin-right:auto}
.hc-cal-nav button{width:28px;height:28px;border:1px solid var(--c-line);border-radius:6px;background:#fff;cursor:pointer}
.hc-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);flex:1;min-height:0;border-top:1px solid var(--c-line-soft)}
.hc-calendar .dow{padding:4px;text-align:center;font-size:11px;font-weight:600;color:var(--c-muted);background:var(--c-head);border-bottom:1px solid var(--c-line-soft)}
.hc-calendar .day{border-right:1px solid var(--c-row-line);border-bottom:1px solid var(--c-row-line);padding:3px 4px;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:58px;overflow:hidden}
.hc-calendar .day.other{background:var(--c-stripe);color:#9aa7b6}
.hc-calendar .day.today{box-shadow:inset 0 0 0 2px var(--c-primary)}
.hc-calendar .d{font:600 11px var(--app-mono)}
.hc-calendar .ev{font-size:10.5px;border-radius:3px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-calendar .more{font-size:10px;color:var(--c-muted)}
.ev.cal{background:#fde7e2;color:#9a2f1a}.ev.edu{background:#e3eefc;color:#1e4c7c}.ev.water{background:#dff4f2;color:#0f625b}
.ev.ver{background:#ece5fb;color:#4f3591}.ev.pest{background:#eef0e2;color:#56601d}
.hc-legend i.ev{width:10px;height:10px;border-radius:2px}
.hc-bundle{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:4px}
.hc-bundle li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--c-row-line)}
.hc-bundle label{display:flex;gap:6px;align-items:center}
.hc-preview{flex:1;min-height:0;overflow:auto;background:#e9eef3;padding:12px;display:flex;justify-content:center;align-items:flex-start}

/* 06 비상 대응 */
.hc-stepbar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex-shrink:0}
.hc-stepbar li{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--c-line);border-radius:8px;background:#fff;min-width:0}
.hc-stepbar li div{display:flex;flex-direction:column;min-width:0}
.hc-stepbar b{font-size:13px}.hc-stepbar small{font-size:11px;color:var(--c-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-stepbar .c{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 11px var(--app-mono);border:1.5px solid #9aa7b6;color:var(--c-muted)}
.hc-stepbar li.done .c{background:var(--c-ok);border-color:var(--c-ok);color:#fff}
.hc-stepbar li.cur{border-color:var(--c-primary);background:var(--c-primary-tint)}
.hc-stepbar li.cur .c{border-color:var(--c-primary);color:var(--c-primary)}
.hc-merge-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line-soft)}
.hc-merge-sum>div{padding:8px 14px;border-right:1px solid var(--c-line-soft);display:flex;flex-direction:column;font-size:12px}
.hc-merge-sum>div:last-child{border-right:0}
.hc-merge-sum span{color:var(--c-subtle)}
.hc-forms li.empty{display:block;color:var(--c-muted);font-size:12px;cursor:default}

/* 07 기준 설정 */
.hc-plan.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-changes{margin:0 0 8px;padding-left:18px;font-size:12px;color:var(--h-dev)}
/* CCP 기준 설정(2026-10-21): 지난 판 보기 띠, 저장 전 안내, 개정 이력 오른쪽(상태·승인 취소) */
.hc-viewing{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px;background:var(--c-selected);border-bottom:1px solid var(--c-line-soft);font-size:12.5px;white-space:nowrap}
.hc-note-warn{margin:6px 0 0;font-size:12px;color:var(--h-dev)}
.hc-version-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px}

/* 상단 종 알림 */
.hc-bell{position:relative;display:inline-flex;align-items:center;margin-right:8px}
.hc-bell-count{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:#52a8c5;color:#fff;font:600 10px/16px Consolas,monospace;text-align:center;padding:0 3px;pointer-events:none}
.hc-bell-count.dev{background:#c4561a}
.hc-bell-panel{position:absolute;top:40px;right:0;width:340px;max-height:420px;overflow:auto;background:#fff;border:1px solid #d8dfe7;border-radius:8px;box-shadow:0 6px 24px #0003;z-index:1400;color:#1b2430;font-family:var(--app-font)}
.hc-bell-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #e4e9ef;font-size:13px}
.hc-bell-head button{border:0;background:none;font-size:16px;cursor:pointer}
.hc-bell-empty{padding:16px;font-size:12px;color:#5d6b7b}
.hc-bell-panel ul{list-style:none;margin:0;padding:0}
.hc-bell-panel li{display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-bottom:1px solid #edf1f5;cursor:pointer;border-left:3px solid #8a95a6}
.hc-bell-panel li:hover{background:#f3f7fb}
.hc-bell-panel li.dev{border-left-color:#a3410c}.hc-bell-panel li.warn{border-left-color:#8a5a12}.hc-bell-panel li.info{border-left-color:#2f5d8a}
.hc-bell-panel li b{font-size:12.5px}.hc-bell-panel li span{font-size:11.5px;color:#5d6b7b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 서식(A4 고정 794×1123 / 가로 1123×794). 미리보기는 transform으로 줄이고 인쇄는 그대로 쓴다. ── */
.hc-a4-frame{flex:0 0 auto}
.hc-a4{box-sizing:border-box;background:#fff;color:#111820;box-shadow:0 1px 4px #0002;padding:38px 40px 30px;display:flex;flex-direction:column;font:11.5px var(--app-font);position:relative;overflow:hidden}
.hc-a4.landscape{padding:30px 38px 26px}
.hc-a4-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px}
.hc-a4-title h1{margin:0;font-size:19px;letter-spacing:.02em;display:inline}
.hc-a4-title .code{margin-left:8px;font:600 13px var(--app-mono);color:#3a4858}
.hc-a4-title .company{font-size:11.5px;color:#3a4858;margin-top:4px}
.hc-a4-approval{border-collapse:collapse}
.hc-a4-approval th,.hc-a4-approval td{border:1px solid #111820;font-size:10.5px;width:72px;padding:2px;text-align:center}
.hc-a4-approval th{background:#eef1f4;font-weight:600}
.hc-a4-approval .v{width:22px;line-height:1.3}
.hc-a4-approval td{height:42px}
.hc-a4-approval td b{display:block;font-size:12px}
.hc-a4-approval td small{display:block;font:10px var(--app-mono);color:#3a4858}
.hc-a4-approval td small.wait{color:#8a95a6;font-family:var(--app-font)}
.hc-a4-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.hc-a4-table{border-collapse:collapse;width:100%;table-layout:fixed}
.hc-a4-table th,.hc-a4-table td{border:1px solid #111820;padding:3px 5px;font-size:11px;text-align:center;overflow:hidden;text-overflow:ellipsis;word-break:keep-all}
.hc-a4-table th{background:#eef1f4;font-weight:600}
.hc-a4-table td{height:20px}
.hc-a4-table td.l{text-align:left}.hc-a4-table td.r{text-align:right}
.hc-a4-table td.mono{font-family:var(--app-mono)}
.hc-a4-table td.bad{color:#b42318;font-weight:700}
.hc-a4-table tr.bad td{background:#fff4ec}
.hc-a4-table tr.sep td,.hc-a4-table tr.sep th{border-top:2px solid #111820}
.hc-a4-table.grid th{width:96px}
.hc-a4-note{margin:0;font-size:10.5px;color:#26313d}
.hc-a4-caption{margin:4px 0 0;font-size:12px;font-weight:700}
.hc-a4-foot{display:flex;justify-content:space-between;font-size:10px;color:#3a4858;margin-top:8px;padding-top:6px;border-top:1px solid #c5cfda}
.hc-print{background:#e9eef3;min-height:100vh;padding:12px 0}
.hc-print .print-toolbar{max-width:1123px;margin:0 auto 10px}
.hc-print-page{display:flex;justify-content:center;margin:0 auto 14px}
@page hcportrait{size:A4 portrait;margin:0}
@page hclandscape{size:A4 landscape;margin:0}
@media print{
 .hc-print{background:#fff;padding:0}
 .hc-print-page{margin:0;break-after:page;page-break-after:always}
 .hc-print-page:last-child{break-after:auto;page-break-after:auto}
 .hc-print-page.portrait{page:hcportrait}
 .hc-print-page.landscape{page:hclandscape}
 .hc-a4{box-shadow:none}
 .hc-a4 th,.hc-a4 td,.hc-a4-table tr.bad td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media(max-width:1500px){
 .hc-body.verify{grid-template-columns:300px minmax(0,1fr) 270px}
 .hc-body.setup{grid-template-columns:210px minmax(0,1fr) 280px}
 .hc-body.wide-detail{grid-template-columns:minmax(0,1fr) 360px}
}

/* MES 표준 검색 영역·페이지(2026-10-20, UI 기준 SEARCH-01·GRID-05·07) */
.hc-screen>.filter-panel{padding:10px 16px;flex-shrink:0}
.hc-panel-head .hc-chips{margin-left:auto;flex-wrap:nowrap;overflow:hidden}
.hc-sticky-first th:first-child,.hc-sticky-first td:first-child{position:sticky;left:0;z-index:1;background:var(--c-surface)}
.hc-sticky-first th:first-child{z-index:2;background:var(--c-head)}
.hc-pager{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:4px 10px;border-top:1px solid var(--c-line-soft);font-size:12px;color:var(--c-muted);flex-shrink:0;white-space:nowrap}
.hc-pager .info{font-family:var(--app-mono);color:var(--c-text);margin-right:4px}
@media (max-width:1600px){
 .hc-body.monitor .hc-table col.c-ccp{width:62px}.hc-body.monitor .hc-table col.c-value{width:148px}.hc-body.monitor .hc-table col.c-limit{width:156px}
 .hc-body.monitor .hc-table td .full,.hc-body.setup .hc-table td .full{display:none}.hc-body.monitor .hc-table td .short,.hc-body.setup .hc-table td .short{display:inline}
 .hc-body.monitor .hc-line-row .step .w,.hc-body.monitor .hc-lines .hc-node .note{display:none}
 .hc-body.monitor .hc-line-row .step{padding:3px 5px}
 .hc-body.monitor .hc-line-row{gap:3px}
 /* 일일 검증 서식 7종이 1366 목록에 다 들어가게(2026-10-21: 404/376px로 마지막 서식이 잘렸다) */
 .hc-forms li{padding:6px 14px}
 .hc-body.monitor .hc-lines{gap:4px;padding:10px 10px}
}

/* GRID-07(2026-10-20): 패널 높이는 내용 높이와 남은 공간 중 작은 쪽. 1920에서 내용 아래가 비지 않게 늘이지 않고,
   내용이 넘치면 패널 안에서 스크롤한다. CCP 모니터링은 그래프·다음 점검 1:1 배치(사용자 결정)라 그대로 둔다. */
.hc-body:not(.monitor){align-items:start}
.hc-body:not(.monitor)>.hc-panel,.hc-body:not(.monitor)>.hc-col{max-height:100%}
.hc-body:not(.monitor) .hc-grow{flex:0 1 auto}
/* 달력은 목록이 아니라 한 달 칸을 채우는 화면이라 남은 높이를 다 쓴다(GRID-07 대상 아님). 요일 줄은 글자 높이만큼(2026-10-20) */
.hc-body>.hc-panel.hc-fill{align-self:stretch}
.hc-calendar{grid-template-rows:auto}
/* CCP 기록 일지: 라인을 고르면 그래프가 칸 폭과 일지 아래 남는 높이를 채운다(2026-10-20). 일지는 내용 높이(GRID-07) */
.hc-body .hc-col>.hc-panel.hc-chartfill{flex:1 1 180px;min-height:180px}
.hc-body>.hc-col:has(.hc-chartfill){align-self:stretch}