/* FNA Smart HACCP · 스마트해썹 웹 포털 스타일 */
/* 팔레트 → tokens.css (--fna-*) 로 이동. 자체 팔레트 블록(--primary·--bg·…)은 제거됨 */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fna-font-family);background:var(--fna-bg);color:var(--fna-text);font-size:var(--fna-font-size-base);line-height:1.45}
button{font-family:inherit;cursor:pointer;border:none;border-radius:var(--fna-radius-sm);font-size:var(--fna-font-size-md);font-weight:700}
button:disabled{opacity:.45;cursor:default}
input,select,textarea{font-family:inherit;font-size:var(--fna-font-size-base);padding:8px 12px;border:1px solid var(--fna-border);border-radius:var(--fna-radius-sm);background:var(--fna-surface);color:var(--fna-text)}
textarea{width:100%;resize:vertical;min-height:72px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fna-primary);outline-offset:-1px}
input[type=checkbox]{width:17px;height:17px;padding:0;vertical-align:middle;accent-color:var(--fna-primary)}
a{color:var(--fna-primary);text-decoration:none}
a:hover{text-decoration:underline}

.btn{background:var(--fna-primary);color:var(--fna-primary-on);padding:9px 16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;border-radius:var(--fna-radius-sm);transition:background .15s}
.btn:hover{background:var(--fna-primary-dark);text-decoration:none}
.btn.ghost{background:var(--fna-surface-container);color:var(--fna-primary)}
.btn.ghost:hover{background:var(--fna-surface-high)}
.btn.danger{background:var(--fna-error-container);color:var(--fna-error)}
.btn.danger:hover{background:var(--fna-danger-container)}
.btn.pass{background:var(--fna-success-text);color:var(--fna-text-inverse)}
.btn.pass:hover{background:var(--fna-success-on-container)}
.btn.review{background:var(--fna-review);color:var(--fna-text-inverse)}
.btn.sm{padding:5px 10px;font-size:var(--fna-font-size-sm);border-radius:var(--fna-radius-xs)}

table{width:100%;border-collapse:collapse;background:var(--fna-surface)}
th{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);text-align:left;padding:10px 12px;border-bottom:2px solid var(--fna-border);white-space:nowrap;background:var(--fna-surface-low)}
td{padding:10px 12px;border-bottom:1px solid var(--fna-border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.off td{color:var(--fna-text-muted);background:var(--fna-surface-low)}
tr.bad td{background:var(--fna-error-container)}

.card{background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);overflow:hidden;margin-bottom:18px;box-shadow:var(--fna-shadow-card)}
.card h3{font-size:var(--fna-font-size-base);padding:14px 18px;border-bottom:1px solid var(--fna-border);display:flex;align-items:center;gap:var(--fna-space-sm);flex-wrap:wrap;background:var(--fna-surface)}
.card .body{padding:18px}
.card .scroll{overflow-x:auto}

.badge{display:inline-block;padding:3px 10px;border-radius:var(--fna-radius-pill);font-size:var(--fna-font-size-xs);font-weight:700;white-space:nowrap}
.badge.on{background:var(--fna-success-container);color:var(--fna-success-text)}
.badge.off{background:var(--fna-neutral-container);color:var(--fna-text-muted)}
.badge.warn{background:var(--fna-error-container);color:var(--fna-error)}
.badge.req{background:var(--fna-warning-container);color:var(--fna-warning-text)}
.badge.rev{background:var(--fna-review-container);color:var(--fna-review)}
.badge.info{background:var(--fna-surface-container);color:var(--fna-primary)}
.muted{color:var(--fna-text-muted);font-size:var(--fna-font-size-sm)}
.row{display:flex;gap:var(--fna-space-sm);flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.hidden{display:none!important}
.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* 로그인 */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center, var(--fna-brand-navy) 0%, var(--fna-side-bg) 100%)}
#login .panel{width:360px;background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-xl);padding:34px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--fna-shadow-modal)}
#login p{text-align:center;color:var(--fna-text-muted);font-size:var(--fna-font-size-md);margin-bottom:6px}
.logo-h{height:68px;display:block;margin:0 auto 6px}
.login-sublinks{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px;font-size:var(--fna-font-size-sm)}
.backlink{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}

/* 앱 레이아웃 */
#app{display:flex;min-height:100vh;align-items:stretch}
/* 사이드바 안쪽 스크롤바는 보이지 않게 — 휠·터치로는 그대로 움직인다 */
#side{scrollbar-width:none}
#side::-webkit-scrollbar{display:none}
#side{width:252px;flex:0 0 252px;background:var(--fna-side-bg);color:var(--fna-side-text);display:flex;flex-direction:column;gap:var(--fna-space-md);padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 6px;color:var(--fna-side-strong)}
.brand span{display:block;font-size:var(--fna-font-size-lg);font-weight:900;letter-spacing:.02em;color:var(--fna-side-strong);overflow-wrap:anywhere}
.brand .subbrand{font-size:var(--fna-font-size-sm);color:var(--fna-side-text);font-weight:600;letter-spacing:.02em}
.logo-box{display:block;background:#fff;border-radius:var(--fna-radius-sm);padding:4px 6px;flex:0 0 auto}
.logo-box img{height:36px;max-width:84px;object-fit:contain;display:block}

.side-selects{background:var(--fna-side-surface);border:1px solid var(--fna-side-line);border-radius:var(--fna-radius-md);padding:10px;display:flex;flex-direction:column;gap:var(--fna-space-xs)}
.side-label{font-size:var(--fna-font-size-md);font-weight:800;color:var(--fna-side-text)}
#side select{width:100%;background:var(--fna-side-hover);border:1px solid var(--fna-side-line);color:var(--fna-side-strong);font-size:var(--fna-font-size-base);font-weight:700;border-radius:var(--fna-radius-xs);padding:8px 8px}
/* 사이드바는 어두운 바탕이다 — 본문용 흐린 글자색(.muted)을 그대로 쓰면 안 보인다 */
#side .muted{color:var(--fna-side-muted)}

#nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
/* 묶음(접힘) — 관제 웹 사이드바와 같은 구조 */
#topbar .crumb{font-size:var(--fna-font-size-md);font-weight:700;color:var(--fna-text-muted);display:flex;align-items:center;min-width:0}
#topbar .crumb a{color:var(--fna-text)}
#topbar .crumb .crumb-detail{color:var(--fna-primary)}
body.senior-mode #topbar .crumb{font-size:var(--fna-font-size-lg)}
.navlabel{font-size:var(--fna-font-size-xs);font-weight:800;letter-spacing:.14em;color:var(--fna-side-muted);padding:10px 10px 4px;text-transform:uppercase}
:where(#nav) button:where(:not(.nav-label)){display:flex;align-items:center;gap:8px;background:none;color:var(--fna-side-text);padding:10px 12px;border-radius:var(--fna-radius-sm);text-align:left;font-size:var(--fna-font-size-base);font-weight:600;transition:all .15s}
:where(#nav) button:where(:not(.nav-label)):hover{background:var(--fna-side-hover);color:var(--fna-side-strong)}
#nav button.active{background:var(--fna-primary);color:var(--fna-primary-on)}

.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:var(--fna-font-size-md);color:var(--fna-side-text);padding-top:14px;border-top:1px solid var(--fna-side-line)}
/* 내 이름 — 누르면 «내 정보» */
.who-btn{background:none;border:0;padding:4px 0;text-align:left;font:inherit;font-weight:700;color:var(--fna-side-strong);cursor:pointer;overflow-wrap:anywhere}
.who-btn:hover{text-decoration:underline}

#content{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{background:var(--fna-surface);border-bottom:1px solid var(--fna-border);padding:0 24px;display:flex;align-items:center;gap:14px;height:56px;position:sticky;top:0;z-index:10}
#topbar h2{font-size:var(--fna-font-size-xl);font-weight:800;letter-spacing:-0.2px}
.top-tools{display:flex;align-items:center;gap:var(--fna-space-sm)}
main{max-width:1360px;width:100%;margin:0 auto;padding:24px}

/* 요약 카드 */
.sumrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--fna-space-md);margin-bottom:18px}
.sumcard{background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);padding:16px 20px;box-shadow:var(--fna-shadow-card)}
.sumcard .n{font-size:var(--fna-font-size-4xl);font-weight:900;line-height:1.2;margin-bottom:2px}
.sumcard .t{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:700}
.sumcard.crit .n{color:var(--fna-error)} .sumcard.warn .n{color:var(--fna-warning-text)}
.sumcard.info .n{color:var(--fna-primary)} .sumcard.okall .n{color:var(--fna-success-text)}

/* 센서 그리드 */
.sensor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:12px}
.sensor-card{background:var(--fna-surface);border:1.5px solid var(--fna-border);border-radius:var(--fna-radius-lg);padding:16px;box-shadow:var(--fna-shadow-card);transition:transform .15s,box-shadow .15s}
.sensor-card:hover{transform:translateY(-2px);box-shadow:var(--fna-shadow-raised)}
.sensor-card.dev{border-color:var(--fna-error);background:var(--fna-error-container)}
.sensor-card.warn{border-color:var(--fna-border);background:var(--fna-surface-low)}
.sensor-card.caution{border-color:var(--fna-warning-text);background:var(--fna-warning-container)}
.sensor-card.ok{border-color:var(--fna-success-text)}
.sensor-header{display:flex;justify-content:space-between;align-items:flex-start}
.sensor-header h4{font-size:var(--fna-font-size-lg);font-weight:800;color:var(--fna-text)}
.sensor-zone{font-size:var(--fna-font-size-xs);color:var(--fna-text-muted);margin-top:2px}
/* 홈 화면 배치(보드) — «화면 편집»에서 카드를 끌어다 놓는다 */
.board-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:var(--fna-font-size-md);color:var(--fna-text-muted)}
.board-bar+.dashboard-split{margin-top:8px}
.board-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.board-col>.board-item>.board-body>.card,.board-col>.board-item>.board-body>.cal-card{margin:0}
.board-editing .board-col{min-height:120px;padding:10px;border:2px dashed var(--fna-border-strong);border-radius:var(--fna-radius-lg);background:var(--fna-surface-low)}
.board-item.editing{cursor:grab;border:1.5px solid var(--fna-primary);border-radius:var(--fna-radius-lg);background:var(--fna-surface);overflow:hidden}
.board-item.editing .board-body{pointer-events:none;opacity:.6;max-height:220px;overflow:hidden}
.board-item.dragging{opacity:.35}
.board-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;background:var(--fna-surface-container);font-size:var(--fna-font-size-md)}
.board-grip{display:inline-flex;color:var(--fna-text-muted)}
.board-drop{height:6px;border-radius:var(--fna-radius-pill);background:var(--fna-primary)}
.board-empty{margin:auto;color:var(--fna-text-muted);font-size:var(--fna-font-size-md)}
.board-tray{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;border:1px dashed var(--fna-border-strong);border-radius:var(--fna-radius-lg);font-size:var(--fna-font-size-md)}
/* 가열 설비 가동 창 — 설비마다 하나. 가동 중이면 경과 시간이 흐른다. 4대를 넘으면 돌아가며(.heat-nav) */
.heat-timer{display:flex;align-items:baseline;gap:6px;margin:12px 0 4px}
.heat-timer .temp-val{font-variant-numeric:tabular-nums}
.heat-fill{background:var(--fna-warning-text)}
.heat-fill.reached{background:var(--fna-success)}
.heat-fill.over{background:var(--fna-error)}
.heat-sub{font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);min-height:18px}
.heat-acts{margin:10px 0 12px}
/* 돌아가는 슬라이드 — 설비 카드는 한 줄만. 한 줄에 들어가는 만큼 보이고 나머지는 넘긴다(.slide-page 는 스크립트가 폭에 맞춰 나눈다) */
.slide-stage{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.slide-page{margin-top:0}
/* hidden 속성은 display 규칙(.sensor-grid 등)보다 세다 — 숨긴 묶음·칸이 보이지 않게 */
[hidden]{display:none!important}
.slide-nav{display:flex;align-items:center;gap:8px;margin-top:12px}
.slide-dot{width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid var(--fna-border-outline);background:none;cursor:pointer}
.slide-dot.on{background:var(--fna-primary);border-color:var(--fna-primary)}
/* 금속검출 모니터링: 검출률 한 줄 + 검출기 카드의 숫자 두 개(실공정 횟수 · 시편검사 수) */
.mon-rate{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1.5px solid var(--fna-border);border-radius:var(--fna-radius-lg);background:var(--fna-surface-low)}
.mon-rate.ok{border-color:var(--fna-success-text)}
.mon-rate.dev{border-color:var(--fna-error);background:var(--fna-error-container)}
.mon-rate__label{font-size:var(--fna-font-size-lg);font-weight:800;color:var(--fna-text)}
.mon-rate__label small{font-size:var(--fna-font-size-sm);font-weight:600;color:var(--fna-text-muted);margin-left:6px}
.mon-rate__value{font-size:var(--fna-font-size-metric);font-weight:900;line-height:1.15;letter-spacing:-.5px;color:var(--fna-success-text)}
.mon-rate__value span{font-size:var(--fna-font-size-xl);font-weight:700;margin-left:2px}
.mon-rate.dev .mon-rate__value{color:var(--fna-error)}
.mon-rate.none .mon-rate__value{color:var(--fna-text-muted)}
.mon-rate__meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:var(--fna-font-size-md);color:var(--fna-text)}
.mon-pair{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 12px}
.mon-pair .temp-val{font-size:var(--fna-font-size-3xl)}
.mon-pair .temp-unit{font-size:var(--fna-font-size-md)}
.mon-pair>div{padding:10px 10px;border-radius:var(--fna-radius-md);background:var(--fna-surface-low);border:1px solid var(--fna-border)}
.mon-pair__t{font-size:var(--fna-font-size-sm);font-weight:700;color:var(--fna-text-muted);margin-top:2px}
/* 온도 추이 그래프(창) — .fna-chart 위에 한계기준선·정상 구간·이탈 점 */
#modal .mcard.wide{width:860px}
.trend .zone{fill:var(--fna-success);opacity:.1}
.trend .limit{stroke:var(--fna-chart-deviation-line);stroke-width:1.5;stroke-dasharray:6 4;fill:none}
.trend text.limit-t{fill:var(--fna-error);font-size:11px;font-weight:700}
.trend .marker.dev{fill:var(--fna-error)}
.trend-legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:8px;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted)}
.trend-legend .lg{display:inline-block;width:18px;height:10px;margin-right:6px;vertical-align:middle;border-radius:2px}
.trend-legend .lg.line{height:0;border-top:2px solid var(--fna-primary)}
.trend-legend .lg.band{background:var(--fna-primary);opacity:.18}
.trend-legend .lg.zone{background:var(--fna-success);opacity:.25}
.trend-legend .lg.limit{height:0;border-top:2px dashed var(--fna-chart-deviation-line)}
.trend-legend .lg.dev{width:10px;border-radius:50%;background:var(--fna-error)}
/* 날짜 검색 막대(공용) — 기간 · 빠른 선택 · 앞뒤 이동 */
.datebar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.datebar input[type=date]{min-width:0}
/* CCP·CP 일지: 일자별 표에서 지금 보는 날 */
#cj-days tr.cur td{background:var(--fna-surface-container)}
.heat-trend+.heat-trend{margin-top:16px;padding-top:14px;border-top:1px solid var(--fna-border)}
/* 카드를 누르면 상세로 간다 */
.sensor-card[role=link],.mon-rate[role=link]{cursor:pointer}
.sensor-card[role=link]:focus-visible,.mon-rate[role=link]:focus-visible{outline:2px solid var(--fna-primary);outline-offset:2px}
/* 센서가 여러 개 달린 설비 — 카드 하나에 센서별 게이지를 나란히 */
.sensor-card.multi{grid-column:span 2}
@media(max-width:860px){.sensor-card.multi{grid-column:auto}}
.multi-gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.multi-gauges .mg{padding:8px 6px 10px;border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface);text-align:center}
.multi-gauges .mg.dev{border-color:var(--fna-error)}
.multi-gauges .mg.caution{border-color:var(--fna-warning-text)}
.mg-name{font-size:var(--fna-font-size-md);font-weight:800;color:var(--fna-text)}
.mg-foot{font-size:var(--fna-font-size-xs);color:var(--fna-text-muted)}
/* 온도 카드: 게이지(.fna-gauge) 아래 한계기준 한 줄 */
.sensor-card .fna-gauge{margin:6px auto 0}
.sensor-limit{text-align:center;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);margin:2px 0 10px}
.sensor-limit b{color:var(--fna-error);font-weight:800}
.temp-val{font-size:var(--fna-font-size-4xl);font-weight:900;letter-spacing:-0.5px}
.temp-unit{font-size:var(--fna-font-size-lg);font-weight:700;color:var(--fna-text-muted);margin-left:2px}
.sensor-range-track{width:100%;height:8px;background:var(--fna-surface-container);border-radius:var(--fna-radius-pill);overflow:hidden;margin:6px 0 10px}
.sensor-range-fill{height:100%;background:var(--fna-success);border-radius:var(--fna-radius-pill);transition:width .3s ease}
.sensor-footer{display:flex;justify-content:space-between;align-items:center;font-size:var(--fna-font-size-xs);color:var(--fna-text-muted);padding-top:8px;border-top:1px solid var(--fna-border)}

/* 대시보드 2분할 (위젯 + 캘린더) */
.dashboard-split{display:grid;grid-template-columns:1fr 350px;gap:18px;margin-top:16px}
@media(max-width:1060px){.dashboard-split{grid-template-columns:1fr}}
.dashboard-split--wide{grid-template-columns:1fr}

/* 캘린더 & 할 일 위젯 */
.cal-card{background:var(--fna-surface);border:1px solid var(--fna-border);border-radius:var(--fna-radius-lg);overflow:hidden;box-shadow:var(--fna-shadow-card)}
.cal-header{padding:14px 16px;border-bottom:1px solid var(--fna-border);display:flex;justify-content:space-between;align-items:center}
.cal-table{width:100%;text-align:center;border-collapse:separate;border-spacing:3px;padding:8px}
.cal-table th{text-align:center;font-size:var(--fna-font-size-xs);padding:6px;color:var(--fna-text-muted);background:none;border-bottom:none}
.cal-table td{padding:7px 3px;border-radius:var(--fna-radius-sm);font-weight:700;font-size:var(--fna-font-size-sm);cursor:pointer;border:none}
.cal-table td:hover{background:var(--fna-surface-container)}
.cal-table td.today{background:var(--fna-primary);color:var(--fna-primary-on)}
.cal-table td.has-dot{position:relative}
.cal-table td.has-dot::after{content:'';display:block;width:4px;height:4px;background:var(--fna-success);border-radius:50%;margin:2px auto 0}

.todo-list{display:flex;flex-direction:column}
.todo-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--fna-border);gap:10px}
.todo-item:last-child{border-bottom:none}
.todo-info{flex:1;min-width:0}
.todo-title{font-size:var(--fna-font-size-md);font-weight:700;color:var(--fna-text);margin-bottom:2px}
.todo-sub{font-size:var(--fna-font-size-xs);color:var(--fna-text-muted)}

/* 긴급 알림 배너 */
.alert-banner{background:var(--fna-error-container);border:1.5px solid var(--fna-error);border-radius:var(--fna-radius-md);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;color:var(--fna-danger-on-container)}
.alert-banner b{font-size:var(--fna-font-size-base);display:flex;align-items:center;gap:6px}

/* 지원 및 A/S 배너 */
.support-bar{background:linear-gradient(135deg, var(--fna-side-bg), var(--fna-side-hover));color:var(--fna-side-strong);border-radius:var(--fna-radius-lg);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:22px}
.support-bar b{font-size:var(--fna-font-size-lg);color:var(--fna-side-strong)}
.support-bar p{font-size:var(--fna-font-size-sm);color:var(--fna-side-muted);margin-top:2px}

/* 결재선 & 서명 */
.dochead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.dochead .title{flex:1;min-width:260px}
.dochead .title .big{font-size:var(--fna-font-size-2xl);font-weight:900;margin-bottom:6px}
.signline{display:flex;border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);overflow:hidden}
.signline .cell{width:124px;border-left:1px solid var(--fna-border);text-align:center;background:var(--fna-surface)}
.signline .cell:first-child{border-left:none}
.signline .t{font-size:var(--fna-font-size-xs);font-weight:800;color:var(--fna-text-muted);background:var(--fna-surface-low);padding:5px 0;border-bottom:1px solid var(--fna-border)}
.signline .s{height:58px;display:flex;align-items:center;justify-content:center}
.signline .s img{max-height:52px;max-width:114px;object-fit:contain}
.signline .n{font-size:var(--fna-font-size-sm);font-weight:700;padding:3px 4px 0}
.signline .d{font-size:var(--fna-font-size-xs);color:var(--fna-text-muted);padding:0 4px 6px;min-height:18px}
/* 선행일지 항목관리 — 구역 카드와 항목 표(입력 칸이 칸을 가득 채운다) */
.pi-sec{margin-bottom:var(--fna-space-md)}
.pi-sec h3{gap:var(--fna-space-sm)}
.pi-sec-title{flex:1;min-width:200px;max-width:520px;font-weight:700}
.pi-items td{padding:6px 8px;vertical-align:middle}
.pi-items td input:not([type=checkbox]),.pi-items td select{width:100%;min-width:0}
.pi-items td .row input{flex:1}
.pi-preview label{display:inline-flex;flex-direction:row;align-items:center;gap:4px;margin:0 12px 0 0;white-space:nowrap}
.pi-preview input[type=radio]{width:auto;margin:0}
.rejectbox{margin-top:12px;background:var(--fna-error-container);border-radius:var(--fna-radius-md);padding:10px 14px;font-size:var(--fna-font-size-md);color:var(--fna-error)}

/* 전자 서명 모달 */
#sig-modal{position:fixed;inset:0;background:var(--fna-overlay);display:flex;align-items:center;justify-content:center;z-index:80}
.sig-card{background:#fff;border-radius:var(--fna-radius-lg);padding:22px 24px;width:480px;max-width:95vw;box-shadow:var(--fna-shadow-modal)}
.sig-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.canvas-wrap{border:2px dashed var(--fna-border-strong);border-radius:var(--fna-radius-md);background:var(--fna-surface-low);margin:14px 0;touch-action:none;display:flex;justify-content:center}
#sig-canvas{background:#fff;border-radius:var(--fna-radius-md);cursor:crosshair}

/* 기본 모달 */
#modal{position:fixed;inset:0;background:var(--fna-overlay);display:flex;align-items:center;justify-content:center;z-index:70}
#modal .mcard{background:var(--fna-surface);border-radius:var(--fna-radius-lg);padding:20px 22px;width:520px;max-width:94vw;max-height:88vh;overflow:auto}
#modal h3{font-size:var(--fna-font-size-lg);margin-bottom:12px}
#modal #m-body{display:flex;flex-direction:column;gap:var(--fna-space-md);font-size:var(--fna-font-size-md)}
#modal #m-body input,#modal #m-body select,#modal #m-body textarea{width:100%}
.mfoot{margin-top:16px}

/* 토스트 */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--fna-text);color:var(--fna-side-strong);padding:12px 24px;border-radius:var(--fna-radius-md);font-size:var(--fna-font-size-md);font-weight:700;opacity:0;transition:opacity .25s;pointer-events:none;z-index:99;white-space:pre-line;box-shadow:var(--fna-shadow-toast)}
#toast.show{opacity:1}
#toast.err{background:var(--fna-error)}

/* 폼 요소 */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--fna-space-md);align-items:end}
label.f{display:flex;flex-direction:column;gap:var(--fna-space-xs);font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:700}
.seg{display:inline-flex;border:1px solid var(--fna-border);border-radius:var(--fna-radius-sm);overflow:hidden}
.seg button{background:var(--fna-surface);color:var(--fna-text-muted);border-radius:0;padding:8px 14px}
.seg button.on{background:var(--fna-primary);color:var(--fna-primary-on)}
.empty{padding:30px;text-align:center;color:var(--fna-text-muted)}
.off-note{padding:40px;text-align:center;color:var(--fna-text-muted);background:var(--fna-surface);border:1px dashed var(--fna-border);border-radius:var(--fna-radius-lg)}

/* ============================================================ */
/* 👓 시니어 / 고령자 친화 큰글씨 모드 (Senior Mode)           */
/* ============================================================ */
body.senior-mode{font-size:var(--fna-font-size-xl)}
body.senior-mode button{font-size:var(--fna-font-size-lg);padding:12px 18px}
body.senior-mode .btn.sm{padding:8px 14px;font-size:var(--fna-font-size-base)}
body.senior-mode input,body.senior-mode select,body.senior-mode textarea{font-size:var(--fna-font-size-lg);padding:10px 14px}
body.senior-mode #nav .nav-items>button,body.senior-mode #nav .nav-items>a{font-size:var(--fna-font-size-xl);padding:13px 14px}
body.senior-mode #nav .nav-label{padding:13px 14px 4px}
body.senior-mode .sumcard .n{font-size:var(--fna-font-size-metric)}
body.senior-mode .sumcard .t{font-size:var(--fna-font-size-base)}
body.senior-mode .temp-val{font-size:var(--fna-font-size-metric)}
body.senior-mode .temp-unit{font-size:var(--fna-font-size-2xl)}
body.senior-mode .sensor-header h4{font-size:var(--fna-font-size-xl)}
body.senior-mode .badge{font-size:var(--fna-font-size-md);padding:4px 12px}
body.senior-mode #topbar{height:66px}
body.senior-mode #topbar h2{font-size:var(--fna-font-size-2xl)}
body.senior-mode .cal-table th{font-size:var(--fna-font-size-md)}
body.senior-mode .cal-table td{font-size:var(--fna-font-size-lg);padding:10px 4px}
body.senior-mode .todo-title{font-size:var(--fna-font-size-lg)}

/* 기준정보·설정 화면 (v4): 메뉴 하위 항목(종류별 개수), 체크 묶음, 설정 표, 이력 내용 */
#nav .nav-cnt{margin-left:auto;font-size:var(--fna-font-size-xs);color:var(--fna-side-text);opacity:.75;font-weight:600}
#nav button.active .nav-cnt{color:inherit;opacity:1}
.fbox{display:flex;flex-direction:column;gap:var(--fna-space-xs);font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:700}
.chk{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--fna-text);font-size:var(--fna-font-size-sm);white-space:nowrap}
.seg button small{font-weight:600;opacity:.8;font-size:var(--fna-font-size-xs)}
.seg{max-width:100%;overflow-x:auto}
.seg button{white-space:nowrap}
table.kv td{vertical-align:top}
table.kv td input:not([type=time]),table.kv td select,table.kv td textarea{width:100%;min-width:180px}
table.kv td textarea{min-height:56px}
.detail-json{white-space:pre-wrap;word-break:break-all;font-family:var(--fna-font-family-mono,ui-monospace,monospace);font-size:var(--fna-font-size-xs);max-width:440px;max-height:220px;overflow:auto;color:var(--fna-text-muted)}
details summary{cursor:pointer;color:var(--fna-primary)}
#modal .formgrid{grid-template-columns:1fr 1fr}
@media (max-width: 480px){#modal .formgrid{grid-template-columns:1fr}}

/* ── 리포트 문서(A4) — 일지 한 건을 따로 낸다. 색은 토큰만 쓴다(바탕 surface · 글자 text · 선 border-outline) ── */
#report-view{position:fixed;inset:0;z-index:80;background:var(--fna-overlay);overflow:auto;padding:0 16px 32px}
#report-view.hidden{display:none}
.rpt-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:0 -16px 20px;padding:10px 16px;background:var(--fna-surface);border-bottom:1px solid var(--fna-border);font-size:var(--fna-font-size-lg)}
.rpt-sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-sizing:border-box;width:210mm;max-width:100%;min-height:297mm;margin:0 auto;padding:14mm;background:var(--fna-surface);color:var(--fna-text);font-size:12px;line-height:1.5;box-shadow:var(--fna-shadow-modal)}
.rpt-sheet+.rpt-sheet{margin-top:24px}
.rpt-body h2 small{font-size:11px;font-weight:600}
.rpt-head{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:end;padding-bottom:10px;border-bottom:2px solid var(--fna-text)}
.rpt-head h1{grid-column:1;font-size:20px;font-weight:900;line-height:1.3;color:var(--fna-text)}
.rpt-head .signline{grid-column:2;grid-row:1 / span 2;border-color:var(--fna-border-outline);border-radius:0}
.rpt-org{grid-column:1;display:flex;align-items:center;gap:10px}
.rpt-org img{max-height:40px;max-width:150px;object-fit:contain}
.rpt-org b{display:block;font-size:14px}
.rpt-org small{display:block;font-size:11px;color:var(--fna-neutral-on-container)}
.rpt-sheet .signline .cell{width:92px;background:var(--fna-surface);border-color:var(--fna-border-outline)}
.rpt-sheet .signline .t{background:var(--fna-neutral-container);color:var(--fna-text);border-color:var(--fna-border-outline);font-size:11px}
.rpt-sheet .signline .n{font-size:11px;color:var(--fna-text)}
.rpt-sheet .signline .d{font-size:10px;color:var(--fna-neutral-on-container)}
.rpt-sheet table{width:100%;border-collapse:collapse;margin:0}
.rpt-sheet th,.rpt-sheet td{border:1px solid var(--fna-border-outline);padding:5px 7px;font-size:12px;text-align:left;color:var(--fna-text);background:var(--fna-surface);vertical-align:top}
.rpt-sheet th{background:var(--fna-neutral-container);font-weight:800;white-space:nowrap}
.rpt-sheet tbody tr:last-child>td,.rpt-sheet tbody tr:last-child>th{border-bottom:1px solid var(--fna-border-outline)}
.rpt-meta{margin-top:10px!important}
.rpt-meta th{width:13%}
.rpt-body h2,.rpt-body>b{display:block;margin:14px 0 6px!important;font-size:13px!important;font-weight:900;color:var(--fna-text)}
.rpt-box{border:1px solid var(--fna-border-outline);padding:8px 10px;min-height:34px;white-space:pre-wrap}
.rpt-sheet .badge,.rpt-sheet .fna-source-badge{background:none;border:0;padding:0;color:var(--fna-text);font-weight:800;font-size:12px}
.rpt-sheet .empty{text-align:center;color:var(--fna-neutral-on-container)}
.rpt-foot{margin-top:16px;font-size:11px;color:var(--fna-neutral-on-container)}
.rpt-criteria{border:1px solid var(--fna-border-outline);padding:6px 8px;margin-bottom:6px;white-space:pre-wrap}
.rpt-stamp{text-align:right}
@media screen and (max-width:860px){.rpt-sheet{padding:16px}.rpt-head{grid-template-columns:1fr}.rpt-head .signline{grid-column:1;grid-row:auto}}

/* 인쇄 */
@media print{
  /* 리포트가 떠 있으면 그 문서만 낸다 */
  body.report-open #app{display:none!important}
  body.report-open #report-view{position:static;background:none;padding:0;overflow:visible}
  body.report-open .rpt-sheet{width:auto;max-width:none;min-height:0;margin:0;padding:0;box-shadow:none}
  body.report-open .rpt-sheet tr{break-inside:avoid}
  body.report-open .rpt-sheet+.rpt-sheet{break-before:page;margin-top:0}
  /* 종이 폭은 좁은 화면 규칙(≤860px)에 걸린다 — 결재 칸은 제목 오른쪽에 그대로 둔다 */
  body.report-open .rpt-head .signline{flex-wrap:nowrap}
  body.report-open .rpt-sheet .signline .cell{flex:0 0 92px;width:92px}
  @page{size:A4;margin:14mm}
  #side,#topbar,#tabstrip,#toast,#modal,#sig-modal,.support-bar,.noprint,button{display:none!important}
  body{background:var(--fna-surface)} main{padding:0;max-width:none} .card{break-inside:avoid;border-color:#bbb;box-shadow:none}
}

/* 사이드바는 기본으로 닫혀 있다(넓은 화면) — 상단 «메뉴»로 열고, 연 상태는 기억한다(ccp.html 의 스크립트) */
@media (min-width: 861px) { body.side-closed #side { display: none; } }

/* ── 모바일·태블릿 세로(≤860px): 사이드바는 드로어, 표는 가로 스크롤 — 관제 웹(style.css)의 rail/드로어 규칙과 같은 패턴 ── */
@media (max-width: 860px) {
  #app { display: block; }
  #side { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; width: min(280px, 84vw); z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  body.side-open #side { transform: none; box-shadow: var(--fna-shadow-modal, 0 8px 24px rgba(10,16,40,.35)); }
  #side-veil { display: none; position: fixed; inset: 0; background: var(--fna-overlay); z-index: 55; }
  body.side-open #side-veil { display: block; }
  #sidebar-toggle { display: inline-flex !important; }
  #topbar { padding: 0 12px; gap: 8px; height: auto; min-height: 56px; flex-wrap: wrap; }
  #topbar h2 { font-size: var(--fna-font-size-lg); }
  #main { padding: 12px !important; }
  .card h3 { padding: 12px 14px; }
  .scroll, .card .body, .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll table { min-width: 560px; }
  table { table-layout: auto; }
  .dashboard-split, .left-col, .right-col { min-width: 0; }
  .signline { flex-wrap: wrap; }
  .signline .cell { flex: 1 1 33%; }
  .formgrid { grid-template-columns: 1fr 1fr; }
  .sumrow { grid-template-columns: 1fr 1fr; }
  .support-bar, .alert-banner { flex-direction: column; align-items: flex-start; }
  #modal .panel, #sig-modal .panel { width: calc(100vw - 24px) !important; max-width: none; }
}
@media (max-width: 480px) {
  .formgrid, .sumrow { grid-template-columns: 1fr; }
}

/* ── 사업장(공장) 정보: 일지 머리의 상호·로고, 설정 화면 로고 칸, 등록 서명 보기 ── */
.docorg{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--fna-border)}
.docorg img{max-height:44px;max-width:160px;object-fit:contain}
.docorg b{display:block;font-size:var(--fna-font-size-lg)}
.docorg small{display:block;color:var(--fna-text-muted);font-size:var(--fna-font-size-sm)}
.logobox{width:180px;height:72px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface-low)}
.logobox img{max-width:164px;max-height:60px;object-fit:contain}
.sigview{display:flex;align-items:center;justify-content:center;min-height:120px;border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface);margin-bottom:10px}
.sigview img{max-width:100%;max-height:160px}
/* 로트번호 규칙 편집: 조각 한 줄 */
.lr-token{flex-wrap:nowrap;padding:6px 0;border-bottom:1px solid var(--fna-border)}
.lr-token:last-child{border-bottom:0}

.mono{font-family:var(--fna-font-family-mono,ui-monospace,monospace)}
/* 수기일지 목록: 일지 하나에 한 줄 — 줄 전체가 그 일지의 페이지로 가는 링크 */
.pq-row{cursor:pointer}
.pq-row:hover td{background:var(--fna-surface-low)}
.pq-row:focus-visible{outline:2px solid var(--fna-focus);outline-offset:-2px}
.pq-go{display:inline-block;width:8px;height:8px;border-right:2px solid var(--fna-text-muted);border-bottom:2px solid var(--fna-text-muted);transform:rotate(-45deg)}
/* 사업장 설정 «홈 카드 순서»: 카드를 켜고 위·아래로 옮기는 목록 */
.st-order{display:flex;flex-direction:column;min-width:260px;max-width:420px;border:1px solid var(--fna-border);border-radius:var(--fna-radius-md);background:var(--fna-surface)}
.st-order__row{display:flex;align-items:center;gap:var(--fna-space-xs);padding:6px 10px;border-top:1px solid var(--fna-border)}
.st-order__row:first-child{border-top:0}
.st-order__row:first-child [data-move="-1"],.st-order__row:last-child [data-move="1"]{opacity:.35}

/* 개인설정 › 환경설정(prefs.js) — 한 줄에 «이름 · 설명 | 고르기» */
.prefs{display:flex;flex-direction:column}
.prefs-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(240px,420px);gap:var(--fna-space-lg);align-items:center;padding:var(--fna-space-md) 0;border-top:1px solid var(--fna-border)}
.prefs-row:first-child{border-top:0;padding-top:0}
.prefs-row__t{display:flex;flex-direction:column;gap:2px}
.prefs-row__t .muted{font-size:var(--fna-font-size-sm)}
.prefs-row__c{display:flex;flex-direction:column;gap:var(--fna-space-xs)}
.prefs-row__c select,.prefs-row__c textarea{width:100%}
.prefs-row__c textarea{resize:vertical}
.prefs-row__c .seg{align-self:flex-start}
.prefs-row--memo{align-items:start}
.prefs-row--memo #prefs-memo-left{align-self:flex-end;font-size:var(--fna-font-size-sm)}
.prefs-actions{padding-top:var(--fna-space-md);border-top:1px solid var(--fna-border);align-items:center;gap:var(--fna-space-md)}
@media (max-width:760px){.prefs-row{grid-template-columns:1fr;gap:var(--fna-space-sm)}}

/* 항목관리 — 목록 머리의 거르기(품목 구분 · 찾기). MES 가 있는 업체의 품목 관리 */
.ms-q{width:200px;max-width:100%;font-weight:400}
/* 칸이 많은 표(품목 관리)는 줄을 바꾸지 않고 옆으로 민다 */
table.ms-wide th,table.ms-wide td{white-space:nowrap}
.ms-sub{display:block;font-size:var(--fna-font-size-sm);color:var(--fna-text-muted);font-weight:400}