/* ============================================================
 * maintenance.css — 예방정비/부품교체 모듈 스타일
 * 제본 생산관리(디지털제본) 앱 디자인 컨셉에 통일:
 *   파랑 #2563eb 포인트 · system 폰트 · 흰 패널 · 그레이 배경
 * 정비 페이지(cover1/bq500)와 허브(index.html)가 공유.
 * ============================================================ */
:root{
  --bg:#f5f6f8; --panel:#ffffff; --border:#e5e7eb; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --primary-d:#1d4ed8; --success:#059669; --danger:#dc2626; --warn:#d97706;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(0,0,0,.04);
  --r:10px; --maxw:1120px;
  --f:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:14px;line-height:1.55}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- 상단바 ---------- */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.top .in{max-width:var(--maxw);margin:0 auto;padding:10px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:center}
.brand{font-weight:700;font-size:18px;color:var(--text);line-height:1.2}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--muted);letter-spacing:.02em;margin-top:2px}
.hublink{color:var(--primary);text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap;justify-self:start}
.hublink:hover{color:var(--primary-d);text-decoration:underline}
.who{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.who label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.who input{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;min-width:120px}
.who input[type=date]{min-width:150px}
.who input:read-only{background:#f9fafb;color:var(--muted)}
#userInfo{font-size:12px;color:var(--muted);white-space:nowrap}
.actions{display:flex;gap:6px}
.actions button,.who button{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-size:13px}
.actions button:hover,.who button:hover{border-color:var(--primary);color:var(--primary)}
.prog{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.bar{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--primary);transition:width .25s ease}
.pct{font-size:13px;color:var(--muted);white-space:nowrap}
.pct b{color:var(--primary)}

/* ---------- 필터 ---------- */
.filters{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:var(--top-h,64px);z-index:19}
.filters .in{max-width:var(--maxw);margin:0 auto;padding:8px 16px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filters .lbl{font-size:12px;color:var(--muted);margin-right:4px}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.only{margin-left:auto;background:#f3f4f6}
.chip.only[aria-pressed="true"]{background:var(--success);color:#fff;border-color:var(--success)}

/* ---------- 장비 머리말 ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:20px 16px 80px}
.mh{padding:12px 0 6px}
.eyebrow{font-size:12px;color:var(--muted);margin:0 0 6px}
.mh h1{font-size:clamp(22px,3.4vw,30px);line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.lead{max-width:760px;color:var(--muted);margin:0 0 14px}
.toc{display:flex;flex-wrap:wrap;gap:8px}
.toc a{text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.toc a:hover{border-color:var(--primary);color:var(--primary)}
.toc a b{font-weight:600;color:var(--muted);font-size:12px}

/* ---------- 안전 경고 배너(LOTO) ---------- */
.loto{display:flex;align-items:stretch;background:#fffbeb;color:#7a5b00;border:1px solid #fde68a;border-left:4px solid var(--warn);border-radius:var(--r);overflow:hidden;margin:16px 0 24px}
.loto .stripe{display:none}
.loto div{padding:12px 16px}
.loto strong{color:var(--warn);font-weight:700;font-size:12.5px;letter-spacing:.02em}
.loto p{margin:4px 0 0;font-size:14px;line-height:1.5;color:#78560a}

/* ---------- 유닛 / 그룹 ---------- */
.unit{margin:0 0 30px}
.uh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:14px}
.uh h2{margin:0;font-size:18px;letter-spacing:-.01em}
.uh .sub{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.ucnt{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.ucnt.done{color:var(--success)}
.fgroup{margin:0 0 16px}
.fhead{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.fhead .basis{font-size:12.5px;color:var(--muted)}
.fhead .cnt{margin-left:auto;font-size:12.5px;color:var(--muted)}

/* ---------- 주기 태그 (소프트 배지) ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.01em;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tag i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.7}
.tag .alt{font-weight:400;opacity:.75;margin-left:2px}
.tag-daily{background:#dbeafe;color:#1e40af}
.tag-weekly{background:#e0f2fe;color:#0369a1}
.tag-biweekly{background:#cffafe;color:#0e7490}
.tag-monthly{background:#f3e8ff;color:#6b21a8}
.tag-quarterly{background:#dcfce7;color:#166534}
.tag-semiannual{background:#fef3c7;color:#92400e}
.tag-asneeded{background:#f3f4f6;color:#374151}

/* ---------- 항목 카드 ---------- */
.item{display:grid;grid-template-columns:56px 1fr;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);margin:0 0 10px;overflow:hidden;box-shadow:var(--shadow);transition:background .2s,border-color .2s}
.item.hide{display:none}
.chk{display:flex;align-items:flex-start;justify-content:center;padding:18px 0;cursor:pointer;background:#f9fafb;border-right:1px solid var(--border)}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk .box{width:26px;height:26px;border:2px solid #cbd5e1;border-radius:6px;background:#fff;position:relative;transition:all .15s}
.chk input:checked + .box{background:var(--primary);border-color:var(--primary)}
.chk input:checked + .box::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg)}
.chk input:focus-visible + .box{outline:2px solid var(--primary);outline-offset:2px}
.item.done{background:#f0fdf4;border-color:#bbf7d0}
.item.done .chk{background:#dcfce7;border-right-color:#bbf7d0}
.item.done h3{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.3);text-decoration-thickness:1.5px}
.body{padding:14px 16px 16px;min-width:0}
.ih{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ih h3{margin:0;font-size:16px;line-height:1.35;flex:1 1 340px}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ref{font-size:12px;color:var(--muted);background:#f3f4f6;padding:4px 8px;border-radius:6px;white-space:nowrap}
.warn{margin:10px 0 0;background:#fee2e2;color:#991b1b;border-left:4px solid var(--danger);padding:7px 10px;border-radius:6px;font-weight:600;font-size:13.5px}
.steps{margin:10px 0 0;padding-left:22px;color:#374151}
.steps li{margin:4px 0;padding-left:4px}
.steps li::marker{font-weight:700;color:var(--primary)}
.photos{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.ph{margin:0;flex:0 1 auto;max-width:100%;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
.ph img{display:block;max-width:100%;max-height:320px;width:auto;height:auto;cursor:zoom-in}
@media (max-width:700px){.ph img{max-height:260px}}
.item.done .photos{opacity:.55}
.memo{margin:12px 0 0}
.memo label{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.memo .hint{font-weight:400;color:var(--muted)}
.memo textarea{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px 10px;resize:vertical;background:#fff}
.memo textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ---------- 부품 교체 ---------- */
.parts{margin:34px 0}
.parts h2{font-size:18px;border-bottom:1px solid var(--border);padding-bottom:8px;margin:0 0 14px}
.parts .wrap{overflow-x:auto}
.parts table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.parts th,.parts td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13.5px;white-space:nowrap}
.parts th{background:#f9fafb;font-size:12px;color:var(--muted);font-weight:600}
.parts tr:last-child td{border-bottom:0}
.parts td.mono{font-variant-numeric:tabular-nums}
.parts tr.row-over td{background:#fef2f2}
.parts .btn-repl{border:1px solid var(--border);background:#fff;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:600;cursor:pointer}
.parts .btn-repl:hover{border-color:var(--primary);color:var(--primary)}
#parts-empty{padding:20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--border);border-radius:var(--r)}

/* ---------- 상태 알약 ---------- */
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600}
.pill-ok{background:#d1fae5;color:#065f46}
.pill-soon{background:#fef3c7;color:#92400e}
.pill-over{background:#fee2e2;color:#991b1b}
.pill-none{background:#f3f4f6;color:#374151}

/* ---------- 라이트박스 ---------- */
.lb{position:fixed;inset:0;background:rgba(17,24,39,.85);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}

/* ---------- 기타 ---------- */
footer{max-width:var(--maxw);margin:0 auto;padding:0 16px 40px;color:var(--muted);font-size:13px}
footer p{margin:4px 0}
.empty{display:none;text-align:center;padding:40px 16px;color:var(--muted);background:#fff;border:1px dashed var(--border);border-radius:var(--r)}
body.readonly .chk{cursor:default}

@media (max-width:700px){
  .top .in{grid-template-columns:1fr;gap:8px}
  .hublink{justify-self:start}
  .who{justify-content:flex-start}
  .item{grid-template-columns:48px 1fr}
  .body{padding:12px 12px 14px}
  .ih h3{font-size:15.5px}
  .filters{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 인쇄 ---------- */
.print-head{display:none;border-bottom:2px solid #000;margin-bottom:10px;padding-bottom:6px;font-size:12px}
.print-head span{margin-right:24px}
@media print{
  .top,.filters,.chip,.lb,.actions,.parts,.hublink{display:none!important}
  body{background:#fff;font-size:11.5px}
  main{padding:0;max-width:none}
  .item{break-inside:avoid;border-color:#999;margin-bottom:6px;box-shadow:none}
  .item.hide{display:none}
  .chk .box{border-color:#000}
  .photos{gap:6px}
  .ph{flex:1 1 180px;max-width:300px}
  .tag{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-head{display:block!important}
}