/* ============================================================
   NAUS 공무팀 업무일지 — 스타일
   색·폰트는 통합관리 대시보드(naus-schedule-program-5e9a6)에서
   실제로 뽑아낸 값입니다. 통합관리에 끼워 넣었을 때 이질감이 없도록
   같은 토큰을 씁니다. 값을 바꾸면 통합관리와 어긋납니다.
   ============================================================ */

:root{
  /* --- 통합관리에서 가져온 토큰 (변경 금지) --- */
  --bg:#f8fafc;
  --card:#fff;
  --text:#0f172a;
  --sub:#64748b;
  --line:#e2e8f0;
  --soft:#f1f5f9;
  --badge:#e2e8f0;
  --layout-navy:#0b1220;
  --layout-side:#0f172a;
  --layout-side-line:rgba(255,255,255,.10);
  --layout-blue:#1d4ed8;
  --layout-blue-dark:#0f2f6e;
  --pri:#0f766e;
  --pri2:#134e4a;
  --statusRun:#f59e0b;
  --statusDone:#22c55e;

  /* --- 이 화면에서 추가한 토큰 --- */
  --statusHold:#ef4444;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04);
  --side-w:236px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Arial,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.is-hidden{display:none !important}

/* ===== 레이아웃 ===== */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);
  background:var(--layout-side);color:#e2e8f0;
  display:flex;flex-direction:column;
  padding:18px 14px;gap:22px;
}

.brand{display:flex;align-items:center;gap:10px;padding:6px 6px 16px;border-bottom:1px solid var(--layout-side-line)}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:var(--layout-blue);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:17px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text strong{font-size:14px;color:#fff}
.brand-text span{font-size:9.5px;letter-spacing:.09em;color:#94a3b8}

.side-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
.nav-item{
  text-align:left;background:transparent;border:0;cursor:pointer;width:100%;
  color:#cbd5e1;padding:10px 12px;border-radius:var(--radius-sm);
  font-size:13.5px;transition:background .12s,color .12s;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.is-active{background:var(--layout-blue);color:#fff;font-weight:700}

.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group + .nav-group{margin-top:16px}

/* ===== 사이드바 접기 / 펼치기 (2026-08-28) =====
   그룹 제목이 버튼이다. 누르면 아래 목록이 접혔다 펼쳐진다.
   기본은 전부 접힌 상태이고, 지금 보고 있는 화면이 든 그룹만 app.js 가 펼친다. */
/* 2026-08-28 수정 (2차) — 그룹 헤더와 그 아래 항목이 구분이 안 된다는 지적.
   세 가지를 동시에 준다: ① 헤더를 더 크고 굵고 밝게 ② 항목은 한 단 작게·연하게
   ③ 항목 왼쪽에 세로 가이드선을 그어 "이 헤더에 속한다"를 눈으로 보이게. */
.nav-group-title{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:14.5px;font-weight:800;letter-spacing:.01em;
  color:#f8fafc;padding:11px 12px 8px;
  transition:color .12s;
}
.nav-group-title:hover{color:#fff}
/* ▸ / ▾ 표시 — 접힘 상태에 따라 회전한다 */
.nav-group-title::before{
  content:"▾";font-size:10px;line-height:1;color:#7c8db0;
  transition:transform .15s;display:inline-block;width:10px;flex:0 0 10px;
}
.nav-group.is-collapsed .nav-group-title::before{transform:rotate(-90deg)}

/* 항목 묶음 — 왼쪽 세로선으로 헤더에 딸린 것임을 보여 준다 */
.nav-group-body{
  display:flex;flex-direction:column;gap:2px;overflow:hidden;
  margin:2px 0 4px 19px;padding-left:7px;
  border-left:1px solid rgba(255,255,255,.12);
}
.nav-group.is-collapsed .nav-group-body{display:none}
/* 항목은 헤더보다 한 단 작고 연하게 */
.nav-group-body .nav-item{
  font-size:12.8px;font-weight:400;color:#b8c4d8;padding:8px 11px;
}
.nav-group-body .nav-item:hover{color:#fff}
.nav-group-body .nav-item.is-active{color:#fff;font-weight:700}
/* 그룹 사이 간격을 넓혀 덩어리로 보이게 */
.nav-group + .nav-group{margin-top:10px}

/* 가스 아래 소헤더(공장동·사무동) — 한 단계 더 들어간 구조 */
.nav-sub{display:flex;flex-direction:column;gap:3px}
.nav-sub-title{display:flex;align-items:center;gap:7px}
.nav-sub-title::before{
  content:"▾";font-size:9px;line-height:1;color:#94a3b8;
  transition:transform .15s;display:inline-block;width:9px;flex:0 0 9px;text-align:center;
}
.nav-sub.is-collapsed .nav-sub-title::before{transform:rotate(-90deg)}
.nav-sub-body{display:flex;flex-direction:column;gap:3px}
.nav-sub.is-collapsed .nav-sub-body{display:none}
/* 소헤더 아래 항목에도 같은 점을 붙이고 한 단 더 들여쓴다 (2026-08-28).
   .nav-group-body .nav-item 의 padding 단축속성보다 우선하도록 선택자를 깊게 쓴다. */
.nav-group-body .nav-sub-body .nav-item{padding-left:28px}

/* ★ 사이드바 항목 앞 점(·) — 2026-08-28 확정 규칙. 바꾸지 말 것.
   '가스'에는 펼침 표시(▾)가 있고 전기·수도에는 없어서 글자가 어긋나 보인다는
   지적에서 시작했다. 이제 .nav-group-body / .nav-sub-body 안에 class="nav-item"
   으로 버튼을 넣기만 하면 점과 정렬이 자동으로 붙는다.
   → 메뉴를 새로 만들 때 기호를 글자로 직접 쓰지 말 것.
     (▣ ▧ ▤ 같은 걸 붙였다가 "난잡하다"는 지적으로 전부 걷어낸 이력 있음)
     자세한 틀은 index.html 사이드바 위 주석 참고. */
.nav-group-body > .nav-item,
.nav-sub-body > .nav-item{display:flex;align-items:center;gap:7px}
.nav-group-body > .nav-item::before,
.nav-sub-body > .nav-item::before{
  content:"·";font-size:13px;line-height:1;color:#94a3b8;
  display:inline-block;width:9px;flex:0 0 9px;text-align:center;
}

/* 브랜드를 홈 버튼으로 (2026-08-28) */
.brand-home{
  width:100%;background:none;border:0;border-bottom:1px solid var(--layout-side-line);
  cursor:pointer;font:inherit;text-align:left;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:background .12s;
}
.brand-home:hover{background:rgba(255,255,255,.06)}
.nav-group-export{margin-top:auto;padding-top:14px;border-top:1px solid var(--layout-side-line)}
.nav-item-header{font-weight:700;color:#e2e8f0}
.nav-item-header:hover{color:#fff}
.nav-item-header.is-active{background:var(--layout-blue);color:#fff}

.nav-item-admin{
  margin-top:10px;border:1px dashed var(--layout-side-line);
  color:#fcd34d;font-weight:700;
}
.nav-item-admin:hover{background:rgba(252,211,77,.1);color:#fde68a}
.nav-item-admin.is-active{background:var(--layout-blue);color:#fff;border-color:transparent}

/* ===== 로그인 게이트 ===== */
.login-gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--layout-navy),var(--layout-side));
  padding:20px;
}
.login-card{
  position:relative;
  background:var(--card);border-radius:var(--radius);padding:34px 32px;
  width:min(400px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-gate-close{
  position:absolute;top:10px;right:10px;background:none;border:0;cursor:pointer;
  font-size:15px;color:var(--sub);line-height:1;padding:6px;border-radius:50%;
}
.login-gate-close:hover{background:var(--soft);color:var(--text)}
.login-brand{justify-content:center;border-bottom:0;padding-bottom:6px}
.login-brand .brand-text strong,.login-brand .brand-text span{color:var(--text)}
.login-brand .brand-text span{color:var(--sub)}
.login-card h1{font-size:19px;margin:14px 0 4px}
.login-card p{font-size:13px;color:var(--sub);margin-bottom:18px}
.google-signin-slot{display:flex;justify-content:center;min-height:44px}
.login-error{color:var(--statusHold);font-size:12.5px;margin-top:14px}
.login-pending{color:var(--pri);font-size:12.5px;margin-top:14px}
#loginGate .login-banner{
  background:#fef3c7;color:#92400e;font-weight:700;font-size:12.5px;
  padding:10px 12px;border-radius:9px;margin:18px 0 0;white-space:nowrap;
}

/* ===== 사용자 박스 로그아웃 ===== */
.user-box{position:relative}
.logout-link{
  position:absolute;top:11px;right:11px;background:none;border:0;cursor:pointer;
  color:#94a3b8;font-size:10.5px;padding:2px 4px;
}
.logout-link:hover{color:#fff;text-decoration:underline}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.user-box{
  background:rgba(255,255,255,.05);border:1px solid var(--layout-side-line);
  border-radius:var(--radius-sm);padding:11px 12px;
  display:flex;flex-direction:column;line-height:1.4;
}
.user-box strong{font-size:13px;color:#fff}
.user-box span{font-size:11.5px;color:#94a3b8}
.user-box-in,.user-box-out{display:flex;flex-direction:column;gap:2px}
.user-box-out{gap:6px}
.btn-login{
  margin-top:4px;padding:7px 10px;font-size:12px;font-weight:700;
  background:#fff;color:var(--layout-blue);border:1px solid var(--layout-side-line);
}
.btn-login:hover{background:#f1f5f9}
.side-note{font-size:11px;color:#94a3b8;line-height:1.6;padding:0 4px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--statusRun);margin-right:5px;vertical-align:1px}

.main{flex:1;min-width:0;padding:22px 26px 60px;display:flex;flex-direction:column;gap:20px}

/* ===== 헤더 ===== */
.page-hero{
  background:linear-gradient(120deg,var(--layout-blue-dark),var(--layout-blue));
  color:#fff;border-radius:var(--radius);padding:26px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.hero-eyebrow{font-size:10.5px;letter-spacing:.16em;color:#bfdbfe;margin-bottom:6px}
.page-hero h1{font-size:26px;margin-bottom:5px}
.hero-sub{font-size:12.5px;color:#cbd5e1}
.hero-date{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:7px 15px;font-size:12.5px;white-space:nowrap;
}

/* ===== 패널 ===== */
.panel{display:flex;flex-direction:column;gap:16px}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.panel-head h2{font-size:18px}
.panel-sub{font-size:12.5px;color:var(--sub);margin-top:3px}
/* 2026-09-10 추가 — 공무팀 대시보드 "전체 N건의 내역" 옆에 붙는 안내 문구.
   같은 글씨체·크기를 쓰되 opacity로만 더 연하게 뺐다(요청: "글씨체나 크기
   똑같이 연하게"). */
.kpi-scope-note{opacity:.55}

/* 뒤로가기 버튼이 있는 패널(일지 목록·설비별 이력) — 버튼 줄을 맨 위에 두고
   제목·설명은 그 아래 줄에 둔다 */
.panel-head-stack{flex-direction:column;align-items:stretch;gap:10px}
.panel-head-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:34px}
.btn-back{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;padding:7px 13px}

/* ===== 버튼 ===== */
.btn{
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:9px 16px;cursor:pointer;font-size:13.5px;font-weight:700;
  transition:filter .12s,background .12s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.06)}
.btn-primary{background:var(--layout-blue);color:#fff}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--text);font-weight:400}
.btn-ghost:hover{background:var(--soft)}
.btn-danger{background:#fff;border-color:var(--statusHold);color:var(--statusHold)}
.file-btn{display:inline-block}
.link-btn{background:none;border:0;color:var(--layout-blue);cursor:pointer;font-size:12.5px;padding:0}
.icon-btn{background:none;border:0;cursor:pointer;font-size:17px;color:var(--sub);line-height:1;padding:4px}

/* ===== KPI ===== */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}

/* KPI 4칸 + 무고장 연속일수를 한 줄에 절반씩 — 2026-09-04 요청.
   .dash-top-row 안에서는 kpi-row가 절반 너비만 쓰므로 190px 최소폭을 버리고
   4칸을 그 너비 안에서 강제로 한 줄 유지시킨다. */
.dash-top-row{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}
.dash-top-row .kpi-row{grid-template-columns:repeat(4,1fr)}
.dash-top-row .kpi{padding:14px 10px}
.dash-top-row .kpi-value{font-size:23px}
.dash-top-row .kpi-label{font-size:11px;white-space:nowrap}
.dash-top-row .kpi-foot{font-size:10.5px}
.kpi{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--sub);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;cursor:pointer;
  transition:box-shadow .12s,transform .12s;
}
.kpi:hover{box-shadow:0 4px 16px rgba(15,23,42,.1);transform:translateY(-1px)}
.kpi-static{cursor:default}
.kpi-static:hover{box-shadow:var(--shadow);transform:none}
.kpi-blue{border-left-color:var(--layout-blue)}
.kpi-amber{border-left-color:var(--statusRun)}
.kpi-green{border-left-color:var(--statusDone)}
.kpi-red{border-left-color:var(--statusHold)}
.kpi-label{font-size:12px;color:var(--sub)}
.kpi-value{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kpi-value i{font-size:13px;font-weight:400;font-style:normal;color:var(--sub);margin-left:3px}
.kpi-foot{font-size:11.5px;color:var(--sub)}

/* ===== 카드 ===== */
.split{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-head h3{font-size:14.5px}
.card-title-btn{
  background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:var(--text);
  cursor:pointer;text-decoration:none;
}
.card-title-btn:hover{color:var(--pri);text-decoration:underline}
.card-note{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:11px}
.card-note-label{font-size:11.5px;color:var(--sub)}
.card-note strong{font-size:15px;color:var(--pri)}

.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.recent-list li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.recent-list li:last-child{border-bottom:0}
.recent-list li[data-edit]{cursor:pointer}
.recent-date{color:var(--sub);font-size:12px;flex:0 0 46px}
.recent-equip{font-weight:700;flex:0 0 92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#334155}

/* ===== 막대 그래프 ===== */
.bar-chart{display:flex;flex-direction:column;gap:9px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.bar-name{flex:0 0 66px;color:var(--sub)}
.bar-track{display:block;flex:1;height:9px;background:var(--soft);border-radius:999px;overflow:hidden}
.bar-fill{display:block;height:100%;min-width:3px;background:var(--pri);border-radius:999px}
.bar-num{flex:0 0 30px;text-align:right;font-weight:700}

/* ===== 설비 관제 대시보드 — 2026-09-02 추가 ===== */
.card-head-note{font-size:11px;font-weight:500;color:var(--sub);margin-left:6px}

/* 분기 이동 — 팀별 설비표·고장 빈도 랭킹 카드 우측 상단(2026-10-01 추가,
   요청: "우측 상단 끝에 '<,2026년 1분기,>'로 세팅"). .card-head가 이미
   space-between이라 h3 옆에 두면 자동으로 맨 오른쪽에 붙는다. */
.dash-q-nav{display:flex;align-items:center;gap:2px;flex-shrink:0}
.dash-q-arrow{
  border:1px solid var(--line);background:var(--card);border-radius:6px;
  width:22px;height:22px;font-size:13px;line-height:1;cursor:pointer;color:var(--sub);
}
.dash-q-arrow:hover{background:var(--soft)}
.dash-q-arrow:disabled{opacity:.35;cursor:default}
.dash-q-arrow:disabled:hover{background:var(--card)}
.dash-q-label{
  border:0;background:none;font-size:12px;font-weight:700;color:var(--text);
  cursor:pointer;padding:0 6px;white-space:nowrap;font:inherit;
}
.dash-q-label:hover{text-decoration:underline}

/* 분기 선택 팝업(dashModalOverlay의 html 모드로 띄움) 안 목록 */
.dash-qpick-list{display:flex;flex-direction:column;gap:2px}
.dash-qpick-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid transparent;background:none;border-radius:8px;padding:9px 10px;
  font:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:left;
}
.dash-qpick-row:hover{background:var(--soft)}
.dash-qpick-row.is-on{border-color:var(--pri);background:var(--soft);font-weight:700}
.dash-qpick-count{color:var(--sub);font-size:12px}

.feed-list{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.feed-list::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:2px;background:var(--line)}
.feed-list li{position:relative;padding:0 0 14px;cursor:pointer;border-radius:6px}
.feed-list li:last-child{padding-bottom:0}
.feed-list li:hover{background:var(--soft)}
.feed-list li::before{content:"";position:absolute;left:-18px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--dot,var(--pri));border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.feed-time{font-size:11px;color:var(--sub)}
.feed-row{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:2px}
.feed-what{font-size:12.5px;color:var(--text)}
.feed-kind{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px;color:#fff;background:var(--dot,var(--pri))}
.feed-empty{color:var(--sub);font-size:12.5px;padding:6px 0}

.bar-row[data-detail]{cursor:pointer;padding:3px 4px;margin:-3px -4px;border-radius:6px}
.bar-row[data-detail]:hover{background:var(--soft)}

#teamBoardBody tr[data-detail]{cursor:pointer}
#teamBoardBody tr[data-detail]:hover{background:var(--soft)}
.rk-chip{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:9px;display:inline-block}
.rk-chip.good{background:#dcfce7;color:#16803c}
.rk-chip.warn{background:#fef3c7;color:#b45309}
.rk-chip.bad{background:#fee2e2;color:#b91c1c}

.parts-list .row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.parts-list .row:hover{background:var(--soft)}
.parts-list .row:last-child{border-bottom:0}
.parts-list .row .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.parts-list .row .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parts-list .row .days{font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px}
/* 부품 교체 주기 — 이름·경과일 사이 여백이 너무 넓다는 요청으로, 한 줄을 내용
   너비에 맞춰 촘촘하게 줄이고 그만큼 칸을 늘려 더 많은 부품이 한 화면에 보이게
   했다(2026-09-04). 2026-09-17 — 한 페이지 노출수 12개→15개로 늘리면서 4칸
   x 3줄 대신 5칸 x 3줄로(칸 폭을 그만큼 더 줄임) 바꿨다. */
.parts-list.multi-col{display:grid;grid-template-columns:repeat(5,1fr);gap:0 16px}
.parts-list.multi-col .row{border-bottom:1px solid var(--line)}
@media (max-width:1100px){ .parts-list.multi-col{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .parts-list.multi-col{grid-template-columns:1fr} }

.mini{display:flex;align-items:flex-end;gap:2px;height:20px}
.mini i{width:4px;background:var(--pri);border-radius:1px;display:block}
.trend-arrow{font-size:11px;font-weight:700}
.trend-arrow.up{color:var(--statusDone)} .trend-arrow.down{color:var(--statusHold)} .trend-arrow.flat{color:var(--sub)}

.streak-row{display:flex;flex-wrap:wrap;gap:6px}
.streak-chip{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:12px;cursor:pointer;white-space:nowrap}
.streak-chip:hover{background:var(--soft)}
.streak-chip .dot{width:8px;height:8px;border-radius:50%}
.streak-chip .days{color:var(--sub)}

/* ===== 필터 ===== */
.filter-bar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;box-shadow:var(--shadow);
}
.filter-bar label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--sub)}
.filter-bar .grow{flex:1;min-width:180px}
.filter-bar .range{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub)}
.filter-bar .search-with-btn{display:flex;gap:6px}
.filter-bar .search-with-btn input{flex:1;min-width:0}
.filter-bar .search-with-btn .btn{padding:7px 12px;white-space:nowrap}
.filter-bar input,.filter-bar select{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 9px;font-size:13px;background:#fff;min-width:0;
}
.filter-bar input:focus,.filter-bar select:focus{outline:2px solid #bfdbfe;outline-offset:-1px}

/* ===== 표 ===== */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:var(--shadow)}
.log-table{width:100%;border-collapse:collapse;font-size:13px;min-width:920px}
.log-table thead th{
  background:var(--soft);color:var(--sub);font-size:11.5px;font-weight:700;
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.log-table tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.log-table tbody tr:last-child td{border-bottom:0}
.log-table tbody tr{cursor:pointer}
.log-table tbody tr:hover{background:#fafbfc}
.log-table.is-static tbody tr{cursor:default}
.log-table.is-static tbody tr:hover{background:none}
.log-table tbody tr.group-head{cursor:default}
.log-table tbody tr.group-head:hover{background:none}
.log-table tbody tr.group-head td{background:var(--pri);color:#fff;font-weight:700;font-size:13px;padding:9px 12px}
.log-table tbody tr.group-sub{cursor:default}
.log-table tbody tr.group-sub:hover{background:none}
.log-table tbody tr.group-sub td{background:var(--soft);color:var(--sub);font-weight:700;font-size:12px;padding:7px 12px}
.cell-content{display:block;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-note{display:block;font-size:11.5px;color:var(--sub);margin-top:3px;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 표에서 줄바꿈을 막을 칸 — 날짜·팀·설비처럼 짧은 값이 두 줄로 접히면
   읽기 나빠진다. 2026-08-28 추가. */
.log-table th.nw, .log-table td.nw{white-space:nowrap}
/* 설비명이 아주 길면 줄바꿈 대신 말줄임으로 */
.log-table td.nw{max-width:170px;overflow:hidden;text-overflow:ellipsis}

.tag{display:inline-block;background:var(--badge);color:#334155;border-radius:999px;padding:2px 9px;font-size:11.5px;white-space:nowrap}

/* 일지 목록 "상세" 모드 페이지 번호 — 2026-09-07 추가. 검색 결과가 많을 때
   한 번에 다 뿌리지 않고 페이지로 나눠 보여준다. */
.row-pagination{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;padding:16px 12px 4px}
.row-pagination button{
  min-width:30px;height:30px;padding:0 7px;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:var(--text);font-size:12.5px;cursor:pointer;
}
.row-pagination button:hover{background:var(--soft)}
.row-pagination button.is-on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.row-pagination button:disabled{opacity:.4;cursor:default}
.row-pagination button:disabled:hover{background:#fff}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.empty{padding:38px;text-align:center;color:var(--sub);font-size:13px}

/* ============================================================
   일일 업무현황 — 하루치를 팀별로 묶어 보는 화면
   ============================================================ */

.day-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.day-actions input[type=month]{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font-size:13.5px;font-weight:700;
  background:#fff;
}

.day-bar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;box-shadow:var(--shadow);
}
.day-bar input[type=date]{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font-size:13.5px;font-weight:700;
}
.day-nav{
  width:30px;height:30px;flex:0 0 30px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--radius-sm);cursor:pointer;font-size:17px;line-height:1;color:var(--sub);
}
.day-nav:hover{background:var(--soft);color:var(--text)}
.day-summary{margin-left:auto;font-size:12.5px;color:var(--sub)}
.day-summary b{color:var(--text);font-size:14px}

.day-card{padding:18px 20px}
.day-teams{display:flex;flex-direction:column;gap:16px}

/* ============================================================
   일일 업무현황 — 그룹웨어 '공무일일업무현황' 양식과 같은 표 (2026-08-28)
   생산기계설비점검 : 생산팀 | 실시사항 | 업체명
   일반설비(전기/기계) : 장소 | 실시사항 | 업체명
   ※ 예정사항 칸은 쓰지 않는다 (박시현 차장 요청)
   ============================================================ */
.gw-doc{display:flex;flex-direction:column;gap:18px}
.gw-head{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.gw-head-row{display:flex;border-bottom:1px solid var(--line);font-size:13px}
.gw-head-row:last-child{border-bottom:0}
.gw-head-row dt{
  flex:0 0 130px;background:var(--soft);color:var(--sub);font-weight:700;
  padding:9px 14px;margin:0;border-right:1px solid var(--line);
}
.gw-head-row dd{flex:1;margin:0;padding:9px 14px;font-weight:700}

.gw-sec{display:flex;flex-direction:column;gap:8px}
.gw-sec-title{
  display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--text);
}
.gw-sec-title::before{
  content:"";width:7px;height:7px;border-radius:2px;background:var(--layout-blue);
}
.gw-sec-count{font-size:11.5px;font-weight:400;color:var(--sub);margin-left:2px}

.gw-table{width:100%;border-collapse:collapse;font-size:13px;background:var(--card)}
.gw-table th{
  background:var(--soft);color:var(--text);font-weight:700;font-size:12.5px;
  padding:9px 12px;border:1px solid var(--line);text-align:center;white-space:nowrap;
}
.gw-table td{padding:9px 12px;border:1px solid var(--line);vertical-align:top}
.gw-table tbody tr{cursor:pointer}
.gw-table tbody tr:hover{background:#fafbfc}
.gw-team{width:110px;text-align:center;font-weight:700;white-space:nowrap}
/* 2026-09-28: 업체명이 길면 두 줄로 접히지 않고, 실시사항 칸(고정폭 없음)의
   남는 공간을 자동으로 끌어써서 한 줄로 보이게 한다(표 레이아웃이 auto라
   내용이 길어지면 옆 칸 폭이 저절로 줄어듦). */
/* 2026-09-29 — 실시사항만 빼고 전체 가운데 정렬(요청: "실시사항을 제외하고
   전체 가운데 정렬"). team·설비위치(.gw-team)·작성자(.gw-worker)는 이미
   가운데 정렬이라 업체명만 추가. */
.gw-vendor{width:150px;color:var(--pri);white-space:nowrap;text-align:center}
.gw-worker{width:110px;text-align:center}
.gw-th-sub{font-weight:400;color:var(--sub);font-size:11px}
.gw-content-sub{display:block;font-size:11.5px;color:var(--sub);margin-top:3px}
.gw-flag{
  display:inline-block;font-size:10.5px;font-weight:700;border-radius:4px;
  padding:1px 6px;margin-right:5px;vertical-align:1px;
}
.gw-flag.is-plan{color:#92400e;background:#fef3c7}
.gw-flag.is-hold{color:#b91c1c;background:#fee2e2}
.gw-empty td{color:var(--sub);text-align:center;padding:22px;cursor:default}
.gw-table tbody tr.gw-empty:hover{background:none}

/* 일지 목록 — 일자별 / 상세 모드 전환 버튼 */
.list-mode-tabs{display:flex;gap:6px}
.list-mode-tabs .btn{padding:7px 14px;font-size:12.5px}
.list-mode-tabs .btn.is-on{background:var(--layout-blue);color:#fff;border-color:transparent;font-weight:700}
.day-row-date{font-weight:700}
.day-row-teams{color:var(--sub);font-size:12.5px}

.day-team{border-left:3px solid var(--layout-blue);padding-left:13px}
.day-team-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.day-team-head h4{margin:0;font-size:13.5px}
.day-team-count{font-size:11px;color:var(--sub);background:var(--soft);border-radius:999px;padding:1px 8px}

.day-group{margin-bottom:8px}
.day-group:last-child{margin-bottom:0}
.day-group-label{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--pri);background:#ccfbf1;border-radius:4px;padding:1px 7px;margin-bottom:4px;
}
.day-group-label.is-plan{color:#92400e;background:#fef3c7}

.day-items{list-style:none;margin:0;padding:0}
.day-items li{
  display:flex;align-items:flex-start;gap:11px;font-size:13px;cursor:pointer;
  padding:6px 8px;border-radius:var(--radius-sm);border-bottom:1px solid var(--line);
}
.day-items li:last-child{border-bottom:0}
.day-items li:hover{background:#fafbfc}

.di-equip{flex:0 0 132px;font-weight:700;word-break:break-all}
.di-body{flex:1;min-width:0;display:flex;flex-direction:column}
.di-content{color:#334155;line-height:1.5}
.di-sub{font-size:11.5px;color:var(--sub);margin-top:2px}
.di-vendor{flex:0 0 104px;font-size:11.5px;color:var(--pri);text-align:right;word-break:keep-all}
.di-meta{flex:0 0 152px;font-size:11.5px;color:var(--sub);text-align:right}
.di-status{flex:0 0 54px;justify-content:flex-end}

@media (max-width:900px){
  .day-items li{flex-wrap:wrap}
  .di-equip{flex:0 0 100%}
  .di-vendor,.di-meta,.di-status{flex:0 0 auto;text-align:left}
}

/* ===== 설비별 — 팀 탭을 한 줄로, 고른 팀 하나의 설비만 아래에 보여준다 ===== */
.equip-team-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.equip-team-title{
  display:flex;align-items:center;gap:8px;
  background:var(--layout-blue);color:#fff;border:0;cursor:pointer;
  font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;
  letter-spacing:.02em;width:auto;opacity:.62;
  transition:opacity .12s,filter .12s;
}
.equip-team-title:hover{filter:brightness(1.08);opacity:.85}
.equip-team-title.is-open{opacity:1;box-shadow:0 0 0 2px rgba(29,78,216,.25)}
.equip-team-meta{font-weight:400;font-size:11.5px;color:rgba(255,255,255,.8);margin-left:2px}
/* 설비 목록 — 정비 임박순 리스트. 카드 그리드 대신 한 줄짜리 행으로
   압축하고, "다음 예상 점검일"이 지났거나 가까운 순으로 정렬해서
   지금 챙겨야 할 설비가 맨 위에 오게 한다. 2026-08-19 개편. */
.equip-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.equip-row{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line);
  padding:11px 16px;text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.equip-row:last-child{border-bottom:0}
.equip-row:hover{background:var(--soft)}
.equip-row-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-row-count{flex:0 0 auto;font-size:12px;color:var(--sub)}
.equip-badge{
  flex:0 0 auto;min-width:70px;text-align:center;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
.equip-badge.is-overdue{background:rgba(239,68,68,.13);color:#b91c1c}
.equip-badge.is-soon{background:rgba(245,158,11,.16);color:#92400e}
.equip-badge.is-far{background:var(--soft);color:var(--sub)}
.equip-badge.is-unknown{background:var(--soft);color:var(--sub);opacity:.7}
.equip-list-note{font-size:11.5px;color:var(--sub);margin:8px 2px 0}

/* ===== 협력업체현황 — 업체 이력 / 발주서 (2026-08-25) ===== */
.vendor-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:2px 2px 10px;
}
.vendor-toolbar-title{font-size:13px;color:var(--sub)}
.vendor-toolbar-title strong{color:var(--ink);font-size:14px}
.vendor-toolbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 업체 안 검색·팀 필터 — 2026-08-28 추가 */
.vendor-q{
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font:inherit;font-size:12.5px;background:var(--card);min-width:320px;
}
.vendor-q:focus{outline:2px solid #bfdbfe;outline-offset:-1px}
.vendor-team-sel{
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;
  font:inherit;font-size:12.5px;background:var(--card);
}
.vendor-toolbar-actions input[type="date"]{
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:12.5px;background:var(--card);
}
.vendor-tilde{color:var(--sub);font-size:12px}

.btn-mini{
  border:1px solid var(--line);background:var(--card);border-radius:7px;
  padding:3px 8px;font:inherit;font-size:11.5px;cursor:pointer;color:var(--pri);white-space:nowrap;
}
.btn-mini:hover{background:var(--soft)}
.btn-mini-danger{color:#b91c1c;margin-left:6px}

.order-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.order-head{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.order-head label,.order-note{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--sub)}
.order-head input,.order-note input{
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;background:var(--card);color:var(--ink);
}
.order-table input{
  width:100%;border:1px solid transparent;border-radius:6px;padding:5px 7px;
  font:inherit;font-size:12.5px;background:var(--soft);color:var(--ink);
}
.order-table input:focus{border-color:var(--pri);background:var(--card);outline:none}
.order-table tbody tr{cursor:default}
.order-table tbody tr:hover{background:none}
.order-table .order-no{text-align:center;color:var(--sub);font-size:12px}
.order-table .order-amount{text-align:right;font-weight:700;font-size:12.5px;white-space:nowrap}
.order-table .order-del{display:flex;align-items:center;gap:0}
.order-table .order-empty td{color:var(--sub);font-size:12.5px;text-align:center;padding:18px 12px}
.order-table tfoot td{background:var(--soft);border-top:1px solid var(--line);padding:10px 12px}
.order-total-label{text-align:center;font-weight:700;font-size:12.5px}
.order-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}

/* 입·출고 현황 팝업 표 — 2026-09-30 추가. order-table과 같은 방식(줄 클릭
   비활성화 + 칸 안 입력칸 스타일)에 select까지 같이 다듬는다. */
.io-table input,.io-table select{
  width:100%;border:1px solid transparent;border-radius:6px;padding:5px 7px;
  font:inherit;font-size:12.5px;background:var(--soft);color:var(--ink);
}
.io-table input:focus,.io-table select:focus{border-color:var(--pri);background:var(--card);outline:none}
.io-table select:disabled{opacity:.5}
.io-table tbody tr{cursor:default}
.io-table tbody tr:hover{background:none}
/* 2026-09-30 추가 — 요청: "품목과 상세의 글씨가 안 짤리게". table-layout:fixed로
   칸 너비(th/td의 style="width:...")를 그대로 지키게 한다 — 안 그러면 자동
   레이아웃이 칸 폭을 줄여서 입력칸 글자가 잘렸다. 표 자체의 폭은 app.js가
   칸 너비 합을 계산해 style="width:..."로 직접 넣어준다(width:auto면
   table-layout:fixed라도 브라우저가 모달 폭에 맞춰 도로 줄여버림) —
   모달 폭보다 커지면 기존 table-wrap 가로 스크롤이 그대로 받는다. */
.io-table{table-layout:fixed}
/* 2026-09-30 추가, 2026-10-01 수정 — 요청: "드래그 안 하고 한 눈에 보이게".
   처음엔 1400px로 고정해 뒀는데, 그 뒤 칸 너비를 늘릴 때 이 숫자를 같이 안
   고쳐서 표가 팝업보다 커지는 문제가 재발했다(사용자 지적: "팝업 자체의
   최대 너비를 사용자가 지정한 적이 없어. 임의 작업 좀 안하면 좋겠네").
   그래서 고정 px 대신 --io-modal-w 커스텀 프로퍼티를 쓴다 — app.js가 표를
   그릴 때마다 칸 너비 합 그대로 이 변수에 넣어 주므로, 칸 너비가 바뀌어도
   팝업 폭이 항상 자동으로 맞는다. 화면보다 커지는 것만 96vw로 막는다. */
#ioModalOverlay.wd-modal-overlay .wd-modal.wd-modal-wide{max-width:min(var(--io-modal-w, 1100px), 96vw)}
/* 2026-09-30 추가 — 연도 탭(요청: "년도별로 분리, 처음 눌러서 들어왔을땐 최근년도로") */
.io-year-bar{margin:0 0 10px}
/* 2026-10-01 — 최종 수정자는 제목-닫기 줄에 둔다(요청: "X표 옆에 붙힌다며").
   .wd-modal-head가 space-between이라 셋째 칸을 그냥 넣으면 가운데쯤 뜨길래,
   margin-left:auto로 남는 공간을 이 칸 앞으로 몰아서 닫기 버튼 바로 옆에
   붙게 했다. */
.io-last-editor{font-size:12px;font-weight:400;color:var(--sub);white-space:nowrap;margin-left:auto}
/* 입·출고 현황 "품목 추가" 팝업은 그 밑에 이미 떠 있는 입·출고 현황
   팝업(.wd-modal-overlay, z-index:200)보다 위에 있어야 한다. */
#ioAddModal{z-index:300}
.order-foot .order-note{flex:1;min-width:220px}

/* ===== 설비별 — 월별 부자재 준비 시기 카드 (팀 하나를 펼쳤을 때만) ===== */
.parts-forecast{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px 14px;margin-bottom:14px;box-shadow:var(--shadow);
}
.parts-forecast-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:13px;flex-wrap:wrap}
.parts-forecast-head h4{font-size:13.5px}
.parts-forecast-head span{font-size:11.5px;color:var(--sub)}
.parts-forecast-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end}
.pf-month{display:flex;flex-direction:column;align-items:center;gap:5px}
.pf-count{font-size:12px;font-weight:700;color:var(--text)}
.pf-bar-track{width:100%;height:64px;display:flex;align-items:flex-end;background:var(--soft);border-radius:4px;overflow:hidden}
.pf-bar-fill{width:100%;background:var(--layout-blue);border-radius:4px 4px 0 0;min-height:4px}
.pf-month.is-top .pf-count{color:var(--statusHold)}
.pf-month.is-top .pf-bar-fill{background:var(--statusHold)}
.pf-label{font-size:11px;color:var(--sub)}
@media (max-width:760px){
  .parts-forecast-grid{grid-template-columns:repeat(6,1fr);row-gap:14px}
}

/* ===== 데이터 로딩 상태 ===== */
.load-status{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(11,18,32,.45);padding:20px;
}
.load-card{
  background:var(--card);border-radius:var(--radius);padding:28px 32px;
  width:min(320px,100%);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.load-card p{font-size:13px;color:var(--text);line-height:1.5}
.load-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--layout-blue);
  animation:load-spin .8s linear infinite;
}
.load-status.is-error .load-spinner{display:none}
.load-status.is-error .load-card{border:1px solid var(--statusHold)}
@keyframes load-spin{to{transform:rotate(360deg)}}
/* 2026-09-17 추가 — 업무일지 대량복원 진행률 막대 */
.load-progress{width:100%;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.load-progress-fill{height:100%;background:var(--layout-blue);border-radius:4px;transition:width .2s ease}

/* ===== 내보내기 ===== */
.export-card{display:flex;flex-direction:column;gap:13px;max-width:720px}
.export-card p{font-size:13px;color:#334155;line-height:1.65}
.export-title{font-size:14.5px}
.export-btns{display:flex;gap:9px;flex-wrap:wrap}
.warn{font-size:12px;color:var(--statusHold)}
.hint{font-size:12px;color:var(--sub) !important;background:var(--soft);border-radius:var(--radius-sm);padding:10px 13px}

.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.btn-export{
  display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;transition:border-color .12s,box-shadow .12s,transform .12s;
}
.btn-export:hover{border-color:var(--layout-blue);box-shadow:var(--shadow);transform:translateY(-1px)}
.ex-ico{
  width:32px;height:32px;flex:0 0 32px;border-radius:var(--radius-sm);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;
}
.ex-xls{background:#16794a}
.ex-doc{background:#1d4ed8}
.ex-pdf{background:#b91c1c}
.ex-csv{background:#475569}
.ex-txt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ex-txt strong{font-size:13.5px;color:var(--text)}
.ex-txt em{font-style:normal;font-size:11px;color:var(--sub)}

/* ===== 모달 ===== */
.modal-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.55);display:grid;place-items:center;padding:20px;z-index:60}
.modal{background:var(--card);border-radius:var(--radius);width:min(680px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(15,23,42,.3)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px}
.modal-body{padding:20px 22px;overflow:auto;display:flex;flex-direction:column;gap:14px}
/* label 은 block 으로 둔다. flex-column 으로 하면 라벨 글자와 필수표시(*)가
   서로 다른 줄로 떨어진다. */
.modal-body label{display:block;font-size:12px;color:var(--sub);font-weight:700}
.modal-body label > input,
.modal-body label > select,
.modal-body label > textarea{margin-top:5px}
.modal-body input,.modal-body select,.modal-body textarea{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 11px;font-size:13.5px;font-weight:400;color:var(--text);background:#fff;width:100%;
}
.modal-body textarea{resize:vertical;line-height:1.6}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{outline:2px solid #bfdbfe;outline-offset:-1px}
.modal-body input[readonly]{background:var(--soft);color:var(--sub)}
.req{color:var(--statusHold)}
.field-note{display:block;font-size:11.5px;font-weight:400;color:var(--sub);padding-top:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.modal-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:16px;margin-top:2px}
.spacer{flex:1}

/* ===== 토스트 ===== */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);
  background:var(--layout-navy);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:13px;z-index:80;box-shadow:0 8px 24px rgba(15,23,42,.28);
}

/* ============================================================
   인쇄 (PDF로 저장)
   평소에는 #printArea 가 숨어 있고, 인쇄할 때만 이것만 나옵니다.
   ============================================================ */

.print-area{display:none}

@media print{
  @page{size:A4 landscape;margin:10mm}

  /* 인쇄 중에는 화면 UI 를 전부 감추고 인쇄 영역만 보여준다 */
  body.printing .app-shell,
  body.printing .mobile-menu-btn,
  body.printing .sidebar-overlay,
  body.printing .modal-backdrop,
  body.printing .toast,
  body.printing .load-status{display:none !important}

  body.printing .print-area{display:block}

  body{background:#fff}

  .print-head{margin-bottom:10px}
  .print-head h1{font-size:17pt;margin-bottom:3px}
  .print-head p{font-size:9pt;color:#475569;margin:0}
  .print-meta{margin-top:2px !important}

  .print-table{width:100%;border-collapse:collapse;font-size:7.6pt;table-layout:fixed}
  .print-table th{
    background:#0f2f6e !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    border:1px solid #d9e2ec;padding:4px 5px;text-align:left;font-weight:700;
  }
  .print-table td{
    border:1px solid #d9e2ec;padding:4px 5px;vertical-align:top;
    word-break:break-all;overflow-wrap:anywhere;
  }
  .print-table thead{display:table-header-group}  /* 쪽 넘어가도 머리글 반복 */

  /* 2026-09-29 추가 — 일일 업무현황 전용 인쇄(export.js dailyPdf()).
     화면(gwTable)과 같은 기준으로, 실시사항만 왼쪽 정렬하고 나머지는
     가운데 정렬한다(요청: "실시사항을 제외하고 전체 가운데 정렬"). 구획별
     표 사이에 제목을 넣는다("생산기계설비점검 (8건)" 처럼). */
  .print-sec-title{font-size:11pt;font-weight:700;margin:14px 0 5px;color:#0f2f6e}
  .print-sec-title:first-of-type{margin-top:0}
  .daily-table{font-size:8.4pt}
  .daily-table th{text-align:center}
  .daily-table td.daily-center{text-align:center}
  .daily-table td.daily-content{text-align:left}
  .print-note-block{
    border:1px solid #d9e2ec;padding:6px 8px;font-size:8.4pt;
    white-space:pre-line;page-break-inside:avoid;
  }
  .print-table tr{page-break-inside:avoid}

  /* 발주서(거래명세표 형식) — 2026-08-25.
     업무일지 표보다 글씨를 키우고, 공급자·공급받는자를 좌우로 나눈다. */
  .order-title{text-align:center;margin-bottom:12px}
  .order-title h1{font-size:24pt;letter-spacing:.45em;margin:0 0 0 .45em}

  .order-party,.order-dates{font-size:9.5pt;table-layout:fixed;margin-bottom:6px}
  .order-party .party-head{
    background:#0f2f6e !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    text-align:center;font-size:10pt;padding:5px;
  }
  .party-label{
    background:#eef2f7 !important;color:#0f172a !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    text-align:center;font-weight:700;padding:5px 6px;
  }
  .party-value{padding:5px 9px;font-size:10pt;word-break:keep-all}
  /* 상호 줄(2번째)만 업체 이름이 확실히 눈에 띄게 키운다 */
  .order-party tbody tr:nth-child(2) .party-value{font-size:12.5pt;font-weight:700}

  .order-dates{margin-bottom:12px}
  .order-lead{font-size:9.5pt;margin:0 0 8px;text-align:center;color:#334155}
  .order-note{margin-top:10px;font-size:9.5pt}
  .order-total td{background:#eef2f7 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== 모바일 ===== */
.mobile-menu-btn,.sidebar-overlay{display:none}

@media (max-width:1040px){
  .split{grid-template-columns:1fr}
}

@media (max-width:860px){
  .mobile-menu-btn{
    display:grid;place-items:center;position:fixed;top:14px;left:14px;z-index:50;
    width:40px;height:40px;border-radius:var(--radius-sm);
    background:var(--layout-side);color:#fff;border:0;cursor:pointer;font-size:17px;
  }
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:55;transform:translateX(-100%);transition:transform .2s}
  .sidebar.is-open{transform:none}
  .sidebar-overlay.is-open{display:block;position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:52}
  .main{padding:66px 16px 50px}
  .page-hero{padding:20px}
  .page-hero h1{font-size:21px}
  .grid-2,.grid-3{grid-template-columns:1fr}
}


/* 등록창 '등록 구분' 아래 안내 한 줄 — .field-note 는 2단 그리드 정렬용이라
   위 여백이 크다. 여기서는 바로 밑에 붙게 줄인다. (2026-08-31) */
#wScopeNote{padding-top:5px}


/* ==========================================================================
   폐수시설관리 — 운영기록부 (물환경보전법 시행규칙 [별지 제20호서식])
   종이 서식 느낌을 살리되, 칸은 전부 입력창이라 바로 고쳐 쓸 수 있다.
   ========================================================================== */

.wl-card{padding:12px 12px 8px;margin-top:12px}
.wl-formno{font-size:10.5px;color:var(--sub);margin:0 0 4px}
.wl-title{display:flex;align-items:baseline;gap:10px;border-top:2px solid #0f172a;
  border-bottom:1px solid #0f172a;padding:6px 4px}
.wl-year{font-size:12.5px;font-weight:700;white-space:nowrap}
.wl-name{flex:1;text-align:center;font-size:16px;font-weight:800;letter-spacing:2px;
  white-space:nowrap}
.wl-calc{width:230px;font-size:11px;padding:3px 5px;border:1px solid var(--line);
  border-radius:5px;background:#fff;color:var(--sub);text-align:center}
.wl-sub{font-size:10.5px;color:var(--sub);text-align:center;margin:4px 0 7px}

.wl-scroll{overflow-x:auto;border:1px solid #0f172a}
.wl-table{border-collapse:collapse;width:100%;min-width:1040px;table-layout:fixed;background:#fff}
.wl-table th,.wl-table td{border:1px solid #94a3b8;padding:0;vertical-align:middle}
.wl-table thead th{background:#eef2f7;color:#0f172a;font-size:10.5px;font-weight:700;
  padding:3px 3px;text-align:center;line-height:1.25}
.wl-th-sub{display:block;font-size:9.5px;font-weight:400;color:#475569}

.wl-date{background:#f8fafc;font-size:10.5px;text-align:center;padding:0 3px;
  white-space:nowrap;position:relative}
.wl-date span{font-weight:600}
.wl-dow{font-style:normal;font-size:10px;margin-left:2px}
.wl-off-btn{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;line-height:1;border:1px solid var(--line);border-radius:3px;
  background:#fff;color:#94a3b8;font-size:9px;cursor:pointer;padding:0}
.wl-off-btn:hover{border-color:#64748b;color:#334155}
.wl-off-btn.is-on{background:#0f172a;border-color:#0f172a;color:#fff}

.wl-in{width:100%;border:0;background:transparent;padding:2px 3px;font-size:10.5px;
  color:#0f172a;font-family:inherit;text-align:center}
.wl-in:focus{outline:2px solid var(--brand);outline-offset:-2px;background:#f8fbff}
.wl-in[readonly]{color:#475569}
.wl-row-off{background:#f8fafc}
.wl-in-off{color:#64748b;font-size:10.5px;text-align:center}


.wl-remark{margin-top:10px}
.wl-remark label{display:block;font-size:11.5px;font-weight:600;color:#334155}
.wl-remark textarea{width:100%;margin-top:3px;border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font-size:11.5px;font-family:inherit;resize:vertical}
.wl-paper{font-size:10.5px;color:var(--sub);text-align:right;margin:8px 0 0}
.wl-help{font-size:11px;color:var(--sub);line-height:1.6;margin:8px 2px 0}

#wlSave.is-dirty{background:#b45309}
.panel-tools input[type=month]{border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;font-size:13px;font-family:inherit}

/* 운영기록부 — 달력과 같은 요일 색. 일요일·공휴일 빨강, 토요일 파랑. (2026-08-31) */
.wl-date.is-sun,.wl-date.is-sun .wl-dow{color:#dc2626}
.wl-date.is-sat,.wl-date.is-sat .wl-dow{color:#2563eb}
.wl-date .wl-dow{color:var(--sub)}
.wl-date.is-sun{background:#fef2f2}
.wl-date.is-sat{background:#eff6ff}

/* 표 전체 가운데 정렬 — 머리글·본문·휴무행 모두 */
.wl-table th,.wl-table td{text-align:center}

/* 한 화면에 31일이 다 들어오게 행을 더 조인다 (2026-08-31) */
.wl-table td{height:17px}
.wl-in{padding:1px 3px;font-size:10px;line-height:1.15}
.wl-date{font-size:10px;line-height:1.15}
.wl-table thead th{padding:2px 3px;font-size:10px}
.wl-card{padding:10px 10px 6px}
.wl-help{display:none}

/* 행 높이를 결정하던 것은 연월일 칸(글자+휴 버튼)과 머리글 줄수였다.
   둘 다 조여서 31일이 한 화면에 들어오게 한다. (2026-08-31) */
.wl-table td{height:16px}
.wl-date{line-height:1.1;padding:0 2px}
.wl-date span{display:inline-block;line-height:1.1}
.wl-dow{margin-left:1px}
.wl-off-btn{width:13px;height:13px;font-size:8px;right:1px}
.wl-table thead th{font-size:9.5px;line-height:1.1;padding:2px}
.wl-th-sub{font-size:9px;line-height:1.1}
.wl-in{height:14px}

/* 입력칸이 inline-block 이라 칸마다 글줄 여백이 9px 씩 더 붙고 있었다.
   block 으로 바꾸면 칸 높이가 입력칸 높이 그대로가 된다. (2026-08-31) */
.wl-in{display:block}
.wl-table td{height:auto}

/* 휴무행 메모만 왼쪽 정렬 — 행 전체(1000px)를 가로지르는 칸이라 가운데에 두면
   가로로 스크롤해야 글자가 보인다. 엑셀에서도 병합칸 왼쪽에 붙는다. (2026-08-31) */
.wl-in-off{text-align:left;padding-left:6px}

/* 마지막 조임 — 31일 + 머리글이 한 화면에 들어오도록 (2026-08-31) */
.wl-in{height:13px;font-size:9.5px}
.wl-date{font-size:9.5px}
.wl-dow{font-size:9px}
.wl-table thead th{font-size:9px;padding:1px 2px}
.wl-th-sub{font-size:8.5px}
.wl-off-btn{width:12px;height:12px;font-size:7.5px}
.wl-paper{display:none}
.wl-remark textarea{font-size:11px;padding:4px 7px}
.wl-title{padding:4px}
.wl-sub{margin:3px 0 5px}
.wl-card{padding:8px 10px 6px;margin-top:10px}

/* ── 운영기록부 최종 크기 (2026-08-31) ──────────────────────────
   · 요일 표시는 뺐다 — 엑셀 원본에 없는 것이었다.
   · 너무 작다는 지적에 따라 글자를 다시 키웠다.
   · 휴무행 메모도 다른 칸과 같이 가운데 정렬.
   여기가 가장 마지막 블록이라 위의 값들을 덮어쓴다. */
.wl-in{height:17px;font-size:11.5px;padding:1px 4px}
.wl-in-off{text-align:center;padding-left:4px;font-size:11.5px}
.wl-date{font-size:11.5px;padding:0 4px}
.wl-dow{display:none}
.wl-table thead th{font-size:11px;padding:3px;line-height:1.2}
.wl-th-sub{font-size:10px}
.wl-off-btn{width:15px;height:15px;font-size:9px;right:2px}
.wl-calc{font-size:11.5px;width:245px}
.wl-name{font-size:18px}
.wl-year{font-size:13.5px}
.wl-sub{font-size:11px}
.wl-formno{font-size:11px}
.wl-remark textarea{font-size:12px}
.wl-remark label{font-size:12px}

/* 용수 계산값 — 엑셀은 M2:O3 두 행을 병합하고 자동 줄바꿈이라 2줄로 보인다.
   여기서도 폭을 좁혀 2줄로 접히게 한다. (2026-08-31) */
#wlCalc{
  width:172px;height:34px;resize:none;overflow:hidden;line-height:1.35;
  font-family:inherit;text-align:center;
}

/* 자동계산 안내 한 줄은 보이게 둔다 (2026-08-31) */
.wl-help{display:block;font-size:11px;color:var(--sub);line-height:1.6;margin:6px 2px 0}

/* ── 용수 계산값 나눗수 구간 (2026-08-31) ────────────────────────
   상단 우측의 "용수(수위계) 계산값 : 6.02" 자리는 이제 요약 표시만 하고,
   달력 단추를 누르면 구간 목록 팝업이 열린다. */
.wl-calc-box{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--sub);white-space:nowrap;
}
.wl-calc-btn{
  width:22px;height:22px;flex:0 0 22px;border:1px solid var(--line);border-radius:5px;
  background:#fff;cursor:pointer;font-size:12px;line-height:1;padding:0;
}
.wl-calc-btn:hover{background:var(--soft)}
.wl-calc-btn.is-on{background:var(--brand);border-color:var(--brand)}
.wl-calc-label{font-weight:600;color:#334155}
.wl-calc-summary{color:var(--sub)}

.wl-calc-panel{
  margin:0 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--soft);
}
.wl-calc-panel-title{font-size:11px;color:var(--sub);margin:0 0 8px}
.wl-calc-list{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.wl-calc-list:empty::before{content:"등록된 구간이 없습니다.";font-size:11.5px;color:var(--sub)}
.wl-calc-row{
  display:flex;align-items:center;gap:8px;font-size:11.5px;background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:5px 9px;
}
.wl-calc-row .wl-calc-range{flex:1;color:#334155}
.wl-calc-row .wl-calc-value{font-weight:700;color:var(--text);min-width:44px;text-align:right}
.wl-calc-row.is-seed{background:#f8fafc}
.wl-calc-row.is-seed .wl-calc-tag{font-size:10px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.wl-calc-row .wl-calc-del{
  width:20px;height:20px;flex:0 0 20px;border:1px solid var(--line);border-radius:5px;
  background:#fff;color:#dc2626;cursor:pointer;font-size:12px;line-height:1;padding:0;
}
.wl-calc-row .wl-calc-del:hover{background:#fef2f2;border-color:#dc2626}

.wl-calc-add{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px dashed var(--line)}
.wl-calc-add input[type=date],.wl-calc-row input[type=date]{
  border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:11.5px;font-family:inherit;
}
.wl-calc-add input[type=number],.wl-calc-row input[type=number]{
  width:78px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:11.5px;font-family:inherit;
}
.wl-calc-tilde{color:var(--sub);font-size:11px}

/* 이미 추가한 구간을 그 자리에서 직접 고칠 때 (2026-08-31) */
.wl-calc-row input[type=date]{flex:1;min-width:0}
.wl-calc-row input[type=number]{width:70px;text-align:right}
.wl-calc-row input:disabled{background:#f8fafc;color:var(--sub)}


/* ==========================================================================
   폐수시설관리 — 폐수배출현황 (2026-08-31)
   폐수배출연황.xlsx 원본 그대로. 총합계(CC)를 위, 1~12월 상세를 아래로 뒀다
   (원본 엑셀은 반대 순서). 단가 구간 팝업은 운영기록부와 같은 부품(.wl-calc-*)을 쓴다.
   ========================================================================== */

.wd-card{padding:14px 16px 12px;margin-top:12px}
.wd-title{display:flex;align-items:baseline;gap:10px;border-top:2px solid #0f172a;
  border-bottom:1px solid #0f172a;padding:6px 4px;margin-bottom:8px}
.wd-name{font-size:17px;font-weight:800;color:#0f172a}

/* 원본 우측상단 메모 — 톤당 단가 원문 + 부가 메모. 계산에는 안 쓰고 참고용. */
.wd-refnotes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.wd-refnote-chip{background:var(--soft);border:1px solid var(--line);border-radius:8px;
  padding:7px 11px;font-size:11.5px;color:#475569;white-space:pre-line;line-height:1.5}
.wd-refnote-chip b{color:#0f172a;font-weight:700}

.wd-cc-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.wd-cc-table th,.wd-cc-table td{border:1px solid var(--line);padding:6px 8px;
  font-size:12.5px;text-align:center}
.wd-cc-table thead th{background:#eef2f7;font-weight:700;color:#0f172a}
.wd-cc-table td:first-child{font-weight:600;background:#f8fafc}
.wd-cc-table input.wl-in{text-align:center}
.wd-cc-total td{background:#eef2f7;font-weight:800;color:#0f172a}

.wd-chart-wrap{overflow-x:auto;padding-top:4px}
.wd-chart{display:block;min-width:640px;width:100%;height:280px;border:1.5px solid #000;box-sizing:border-box}
/* 2026-09-02 — 그래프 위 숫자가 흐릿해 보인다는 지적. 굵기는 그대로 두고
   (진하게 X) 벡터 글자가 화면 배율에 맞춰 또렷하게 그려지도록만 손봤다(선명하게 O).
   숫자에 잘 맞는 화면용 글꼴(맑은 고딕 대신 Segoe UI)도 같이 적용했다. */
.wd-chart text, .wd-chart tspan{
  font-family:"Segoe UI",Arial,"Malgun Gothic","맑은 고딕",sans-serif;
  text-rendering:optimizeLegibility;
}
.wd-chart{shape-rendering:geometricPrecision}
/* 2026-09-01 — 가장 진한 색이 너무 어둡다는 지적으로, 유틸리티 그래프와 같이
   한 단계씩 밝아진 파란색 3단계로 다시 교체.
   배출횟수(연하게) → 배출량 → 금액(진하게) 순으로 짙어진다. */
.wd-bar-count{fill:#c3d3f5}
.wd-bar-ton{fill:#7f9de8}
.wd-bar-amt{fill:#4a72d8}
.wd-chart-label{font-size:12px;fill:#334155;font-family:inherit}
.wd-chart-amtlabel{font-size:11px;font-weight:700;fill:#7c2d12;font-family:inherit}
.wd-chart-axis{stroke:var(--line);stroke-width:1}
.wd-legend{display:flex;gap:16px;justify-content:center;margin-top:6px;font-size:11.5px;color:var(--sub)}
.wd-legend span{display:inline-flex;align-items:center;gap:5px}

/* 3개년 비교 그래프 — 숫자가 촘촘히 겹쳐 안 보인다는 지적(2026-09-01)으로
   훨씬 크게 키우고, 범례 글씨도 키운다. */
.wd-chart-compare{height:460px;min-width:760px}
.wd-legend-lg{font-size:13px;font-weight:600;gap:22px;margin-top:10px}
.wd-chart-subtitle{font-size:16px;font-weight:800;color:#0f172a;margin:18px 0 6px}
.wd-legend-lg i{width:13px;height:13px}
.wd-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* 1~12월 상세 — 월별 카드, 주차별 표 (엑셀 4개월씩 3블록 구조를 그대로 살리되
   화면 폭에 맞게 4열 그리드로 배치한다) */
.wd-detail-card{padding:14px 16px}
.wd-detail-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wd-month{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wd-month-head{background:#0f172a;color:#fff;font-size:12.5px;font-weight:700;
  padding:6px 10px;display:flex;justify-content:space-between;align-items:center}
.wd-month-head .wd-month-total{font-weight:400;font-size:11px;color:#cbd5e1}
.wd-month table{width:100%;border-collapse:collapse}
.wd-month th,.wd-month td{border-bottom:1px solid var(--line);padding:3px 5px;
  font-size:10.5px;text-align:center}
.wd-month thead th{background:#f8fafc;color:#475569;font-weight:600}
.wd-month td input.wl-in{font-size:10px;padding:1px 2px;height:15px;display:block;text-align:center}
.wd-month tr.wd-week-first td:first-child{border-top:2px solid #cbd5e1}

@media (max-width: 1100px){
  .wd-detail-blocks{grid-template-columns:repeat(2,1fr)}
}


/* ── 유틸리티 현황(전기/가스/수도) 표 — 첫 칸(지표명)이 세로로 안 깨지게 (2026-08-31) */
.wd-cc-table th:first-child, .wd-cc-table td:first-child{
  white-space:nowrap; width:auto; min-width:140px;
}

/* 2026-09-02 — 표마다 칸 너비가 그 표 안 숫자 길이에 따라 제각각 정해져서,
   표를 여러 개 세로로 이어 놓으면(예: 가스요금 표 밑에 가스사용량 표) 같은 달
   칸인데도 폭이 서로 안 맞았다. table-layout:fixed 로 내용과 상관없이 첫 칸·
   합계 칸·월 칸 비율을 표마다 똑같이 고정해서, 어떤 표든 항상 같은 폭으로
   나란히 맞춰지게 한다. 첫 칸(연도·지표명)은 글자 수가 적어 넓을 필요가 없다. */
/* 2026-09-09 — 월 칸 폭이 %만으로 정해져서 카드가 좁으면 7자리 넘는 금액이
   앞에서부터 잘려 보였다("6,543,21" 식으로 뒷자리가 안 보임). 표 자체에
   최소 폭(min-width)을 주고 감싸는 div에서 가로 스크롤 되게 해서, 카드가
   좁아도 숫자가 잘리지 않고 다 보이게 한다(요청). */
.util-table-scroll{overflow-x:auto}
.util-table{table-layout:fixed; min-width:1360px}
.util-table th:first-child, .util-table td:first-child{
  width:8%; min-width:0; white-space:nowrap;
}
.util-table th:last-child, .util-table td:last-child{
  width:13%; white-space:nowrap;
}
/* 2026-09-09 — 좁은 칸 안에서 상속받은 표 기본 padding(8px)이 실제 입력칸
   너비의 상당 부분을 잡아먹어(칸 59px 중 입력칸 42px만 남음), min-width를
   늘려도 여전히 숫자가 잘렸다. 월 칸만 좌우 여백을 줄인다. */
.util-table td{padding:6px 3px}
.util-table th{padding:6px 3px}
.util-table td:first-child, .util-table th:first-child{padding-left:8px}
.util-bar-modal-table{table-layout:fixed}
.util-bar-modal-table th:first-child, .util-bar-modal-table td:first-child{
  width:42%; min-width:0;
}
.util-bar-modal-table td:last-child{
  white-space:nowrap;
}
.util-table-caption{font-size:12.5px;font-weight:700;color:var(--sub);margin:14px 0 6px}

/* ── 접고 펼치는 섹션 — 폐수배출현황 총합계/월간상세 (2026-09-01) ────── */
.wd-collapse{padding:0;margin-top:12px;overflow:hidden}
.wd-collapse-head{
  width:100%;display:flex;align-items:baseline;gap:10px;border-top:2px solid #0f172a;
  border-bottom:1px solid #0f172a;padding:12px 16px;margin:0;background:#fff;border-left:0;border-right:0;
  cursor:pointer;font:inherit;text-align:left;
}
.wd-collapse-arrow{font-size:11px;color:var(--sub);transition:transform .15s;flex:0 0 auto}
.wd-collapse.is-collapsed .wd-collapse-arrow{transform:rotate(-90deg)}
.wd-collapse-body{padding:0 16px 12px}
.wd-collapse.is-collapsed .wd-collapse-body{display:none}
.wd-collapse .wd-title{border:0;padding:0;margin:0}

/* 막대그래프 — 달 막대를 누르면 상세 팝업이 뜬다 */
.wd-chart-bar{cursor:pointer}
.wd-chart-bar:hover{opacity:.75}
.wd-chart-hit{fill:transparent;cursor:pointer}

/* ── 막대 클릭 팝업 (2026-09-01) ─────────────────────────────────── */
.wd-modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.wd-modal-overlay.is-hidden{display:none}
.wd-modal{
  background:#fff;border-radius:12px;max-width:520px;width:100%;max-height:80vh;
  overflow-y:auto;padding:16px 18px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
/* 표가 든 팝업은 내용이 한 줄로 안 잘리게, 필요한 만큼 화면 폭까지 넓어지게
   한다 — 가로 스크롤 대신 팝업 자체를 키운다(2026-09-04). */
.wd-modal.wd-modal-wide{max-width:min(1100px,92vw)}
/* 2026-09-17 추가 — "최근이력" 등 목록형 팝업(dashDetailRows, 표가 아님)도
   기존 520px에서는 내용이 길면 2줄로 줄바꿈됐다(요청: "내용이 1줄로 다
   보이게 너비를 늘리되 양쪽 여백은 충분히 남게"). 실제 전체 기록 중 가장 긴
   작업내용(약 90자) 기준으로 필요한 폭을 재서 정했다 — 표 팝업(1100px)만큼
   넓히면 짧은 목록에도 과하게 여백이 남아서, 표보다는 좁고 기존보다는
   넉넉하게 잡는다. */
.wd-modal.wd-modal-list{max-width:min(820px,92vw)}
.wd-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:16px;font-weight:800;color:#0f172a;margin-bottom:12px;
  border-bottom:2px solid #0f172a;padding-bottom:8px;
}
.wd-modal-head button{
  border:0;background:none;font-size:16px;color:var(--sub);cursor:pointer;line-height:1;padding:2px 4px;
}
.wd-modal-head button:hover{color:#0f172a}
/* 2026-09-10 추가 — 팝업 안에서 한 번 더 들어간 상세에 붙는 "이전" 버튼과
   제목을 한 줄에 붙여 놓는다. */
.wd-modal-head-title{display:flex;align-items:center;gap:6px;min-width:0}
.wd-modal-head-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 대시보드 팝업 안의 표 — 2026-09-04. 본문 .log-table(min-width:920px)은
   좁은 팝업 안에서 강제로 가로 스크롤이 생겨서, 팝업 폭에 맞는 별도 표를 쓴다. */
.dash-modal-table-wrap{overflow-x:auto}
.dash-modal-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dash-modal-table th{
  background:var(--soft);color:var(--sub);font-size:11px;font-weight:700;
  text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.dash-modal-table td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
.dash-modal-table tbody tr:last-child td{border-bottom:0}
/* 2026-09-10 추가 — 팝업 표 안에서 한 번 더 들어갈 수 있는 행(예: 장기
   무고장 설비의 "팀·호기" → 그 설비 최근 이력) 표시. */
.dash-modal-table tbody tr.is-clickable{cursor:pointer}
.dash-modal-table tbody tr.is-clickable:hover td{background:var(--soft)}
/* 2026-09-10 추가 — 대시보드 팝업(폭 520px)은 좁아서 페이지 번호가
   |< < 1~10 > >| 전부 들어가면 2줄로 넘어간다(요청: "2줄로 안넘게 1줄로
   고정"). 줄바꿈만 막고 가운데 정렬(.row-pagination 기본값)은 그대로
   둔다 — 페이지 수가 적어 한 줄에 다 들어갈 때는 가운데 정렬로 보이고
   (요청: "1~10 버튼 가운데 정렬"), 페이지가 많아 넘칠 때만 가로
   스크롤로 한 줄을 유지한다. */
.wd-modal #dashModalPagination{flex-wrap:nowrap;overflow-x:auto}
/* 2026-09-10 추가 — 설비 최근 이력 팝업 행(관리자 전용, dashDetailRows 참고)
   클릭 표시. */
.wd-cc-row.is-clickable{cursor:pointer}
.wd-cc-row.is-clickable:hover{background:var(--soft)}

/* ── 운영기록부 날짜 설정 팝업 (2026-09-02) ──────────────────────── */
.wl-date-clickable{cursor:pointer}
.wl-date-clickable:hover{filter:brightness(.96)}
.wl-day-modal{max-width:360px}
.wl-day-modal-body{display:flex;flex-direction:column;gap:12px}
.wl-day-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wl-day-row-label{font-size:12.5px;font-weight:700;color:var(--sub);min-width:64px}
.wl-day-radio{display:inline-flex;align-items:center;gap:4px;font-size:13px;cursor:pointer}
#wlDayOffLabel{flex:1;min-width:120px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px}
#wlDayColor{width:40px;height:28px;padding:0;border:1px solid var(--line);border-radius:6px;cursor:pointer}
#wlDayColor:disabled{cursor:not-allowed;opacity:.5}
.wl-day-hint{font-size:11.5px;color:var(--sub);margin:0}
.wl-day-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ── 베트남 — 발송의뢰서 · 부품일지 (2026-09-18) ──────────────────── */
.btn-icon-del{
  width:22px;height:22px;flex:0 0 22px;border:1px solid var(--line);border-radius:5px;
  background:#fff;color:#dc2626;cursor:pointer;font-size:12px;line-height:1;padding:0;
}
.btn-icon-del:hover{background:#fef2f2;border-color:#dc2626}

.vs-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px;align-items:start}
@media (max-width:1000px){.vs-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vs-items{grid-template-columns:minmax(0,1fr)}}
.vs-item{
  position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px;
}
.vs-photo-cell{
  position:relative;flex:none;width:100%;aspect-ratio:4 / 3;border:1px dashed var(--line);border-radius:8px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.vs-photo-img{display:block;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.vs-photo-img.is-hidden,.vs-photo-add.is-hidden,.vs-photo-change.is-hidden{display:none}
.vs-photo-add{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--sub);cursor:pointer}
.vs-photo-add input[type=file],.vs-photo-change input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.vs-photo-change{position:absolute;right:6px;bottom:6px;padding:3px 9px;font-size:11px;font-weight:700;color:var(--text);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:6px;cursor:pointer;overflow:hidden}
.vs-item-imgonly .vs-photo-cell{aspect-ratio:auto;border:0;background:transparent}
.vs-item-imgonly .vs-photo-img{height:auto;object-fit:initial}
.vs-items.is-imgonly{grid-template-columns:repeat(auto-fill,minmax(min(100%,760px),1fr))}
.vs-notice{margin-top:14px;padding:10px 14px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:8px;font-size:13px;font-weight:700}
.vs-photo-placeholder{font-size:11.5px;color:var(--sub)}
.vs-fields{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px}
.vs-fields label{display:flex;flex-direction:column;gap:2px;font-size:10.5px;color:var(--sub);min-width:0}
.vs-fields .vs-wide{grid-column:1 / -1}
.vs-in{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12.5px;font-family:inherit;color:var(--text)}
.vs-in:focus{outline:2px solid var(--layout-blue);outline-offset:-1px}
.vs-item .btn-icon-del{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.92)}
.vs-date-sel{min-width:300px;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font-size:13px;font-family:inherit;background:#fff;white-space:nowrap}
.day-nav:disabled{opacity:.4;cursor:default}

/* 발송의뢰서 품목 추가 팝업 */
.vs-modal{width:min(560px,100%)}
.vsf-photo-title{display:block;font-size:12px;color:var(--sub);font-weight:700;margin-bottom:5px}
.modal-body .vsf-photo{position:relative;display:flex;align-items:center;justify-content:center;height:160px;border:1px dashed var(--line);border-radius:8px;background:var(--soft);cursor:pointer;overflow:hidden;font-weight:400}
.modal-body .vsf-photo > input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;padding:0;border:0}
.vsf-photo-img{width:100%;height:100%;object-fit:contain}

.vp-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:960px}
.vp-table th,.vp-table td{border:1px solid var(--line);padding:5px 6px;text-align:center}
.vp-table thead th{background:var(--soft);color:var(--sub);font-weight:700;font-size:11.5px}
.vp-no{color:var(--sub)}
.vp-in{width:100%;border:0;background:transparent;padding:3px 4px;font-size:12.5px;font-family:inherit;text-align:center}
.vp-in:focus{outline:2px solid var(--layout-blue);outline-offset:-2px;background:#f8fbff}
.vp-in[readonly]{color:#475569}
.vp-table tfoot td{background:var(--soft);font-weight:700}
.vp-table td.vp-date.sd-datecell{cursor:pointer;white-space:nowrap}
.vp-table td.vp-date.sd-datecell:hover{background-image:linear-gradient(rgba(29,78,216,.10),rgba(29,78,216,.10))}
.vp-sum-label{text-align:right}
.vp-years{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.vp-year{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer}
.vp-year.is-on{background:var(--layout-blue);border-color:var(--layout-blue);color:#fff}
.vp-pager{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:14px 0 4px}
.vp-pg{min-width:34px;height:32px;border:1px solid var(--line);background:#fff;border-radius:6px;font-size:13px;cursor:pointer}
.vp-pg.is-on{background:var(--layout-blue);border-color:var(--layout-blue);color:#fff;font-weight:700}
.vp-pg:disabled{opacity:.4;cursor:default}
.vp-page-note{width:100%;border:0;background:transparent;font-family:inherit;font-size:12.5px;resize:vertical;padding:4px 6px}
.vp-page-note:focus{outline:2px solid var(--layout-blue);outline-offset:-2px;background:#f8fbff}

/* 발송의뢰서 삭제 확인 · 사진 크게 보기 */
.vs-confirm{width:min(420px,100%)}
.vs-confirm-msg{font-size:14px;line-height:1.7;margin:0}
.vs-confirm-msg span{color:var(--sub);font-size:12.5px}
.vs-viewer{position:fixed;inset:0;z-index:80;background:rgba(11,18,32,.88);display:flex;flex-direction:column}
.vs-view-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(15,23,42,.95)}
.vs-view-bar .btn-ghost{background:#fff}
.vs-view-pct{min-width:52px;text-align:center;color:#fff;font-size:13px;font-weight:700}
.vs-view-box{flex:1;min-height:0;overflow:auto;display:flex;padding:8px}
.vs-view-box img{margin:auto;flex:none;max-width:none;background:#fff}

/* 베트남 대시보드 — 막대 파랑은 버튼·활성 탭과 같은 var(--layout-blue), 발송 횟수는 연한 파랑 */
.vd-card{padding:18px 20px;margin-top:14px}
.vd-h{font-size:15px;margin:0 0 6px}
.vd-note{font-size:12px;color:var(--sub);margin:0}
.vd-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--sub);margin:0 0 6px}
.vd-dot{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--layout-blue);margin-right:6px;vertical-align:-1px}
.vd-dot-days{background:#7db2f5}
.vd-bars{display:flex;align-items:stretch;gap:18px;height:320px;margin-top:6px}
.vd-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;background:none;border:0;border-radius:8px;padding:0 4px 6px;cursor:pointer;font-family:inherit}
.vd-bar-days{cursor:pointer}
.vd-bar-days:hover{filter:brightness(.93)}
.vd-col:hover{background:var(--soft)}
.vd-col.is-on{background:#eff6ff}
.vd-track{flex:1;width:100%;min-height:0;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding-top:28px;border-bottom:1px solid var(--line)}
.vd-bar{position:relative;flex:1;max-width:64px;background:var(--layout-blue);border-radius:6px 6px 0 0}
.vd-bar-days{background:#7db2f5}
.vd-val{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-size:12px;font-weight:700;color:var(--text);white-space:nowrap}
.vd-year{padding-top:8px;font-size:13px;font-weight:700;color:var(--sub)}
.vd-col.is-on .vd-year{color:var(--layout-blue)}
.vd-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.vd-table{width:100%;border-collapse:collapse;font-size:13px}
.vd-table th,.vd-table td{border:1px solid var(--line);padding:8px 10px;text-align:center}
.vd-table thead th{background:var(--soft);color:var(--sub);font-weight:700;font-size:12px}
.vd-table td.vd-name,.vd-table td.vd-left{text-align:left}
.vd-rank{color:var(--sub)}
.vd-row{cursor:pointer}
.vd-row:hover td{background:#f8fbff}
.vd-table tfoot td{background:var(--soft);font-weight:700}
.vd-modal{width:min(820px,100%)}

.vd-days-modal{width:min(560px,100%)}
.vd-days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vd-day{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);font-size:13px;font-weight:700;text-align:center}
.vd-day em{font-style:normal;font-weight:400;color:var(--sub)}
@media (max-width:560px){.vd-days{grid-template-columns:repeat(2,minmax(0,1fr))}}

.vd-year-nav{display:flex;align-items:center;gap:8px}
.vd-year-nav .vd-h{margin:0}
.vd-year-label{min-width:64px;text-align:center;font-size:16px;font-weight:800}

.vd-day small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--layout-blue)}

.vd-refs-title{margin:18px 0 8px;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;font-weight:800}
.vd-refs-title span{font-weight:400;font-size:12px;color:var(--sub)}
.vd-refs{display:flex;flex-direction:column;gap:8px}
.vd-ref{padding:9px 12px;border:1px solid #fde68a;background:#fffbeb;border-radius:8px;font-size:13px}
.vd-ref b{display:block;color:#92400e}
.vd-ref span{display:inline-block;margin-top:2px;font-size:12px;color:var(--sub)}
.vd-ref small{display:block;margin-top:2px;font-size:12px;color:var(--text)}

.vp-years:has(.vp-year-sel){margin-bottom:12px}
.vp-year-sel{height:38px;min-width:130px;padding:0 34px 0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-size:14px;font-weight:800;font-family:inherit;cursor:pointer}
.vp-year-sel:focus{outline:2px solid var(--layout-blue);outline-offset:-1px}

/* 발송 날짜 팝업: 날짜 버튼 / 그 날짜의 발송의뢰서 작은 팝업 */
button.vd-day{width:100%;font-family:inherit;color:var(--text);cursor:pointer}
button.vd-day:hover{background:#e0ecff;border-color:#93b4f0}
.vd-shipday-back{z-index:70}
.vd-shipday{width:min(520px,100%)}
.vd-shipday .modal-body{gap:10px}
#vdShipDayBody{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow:auto}
.vd-noreq{margin:6px 0;padding:22px 12px;text-align:center;font-size:14px;font-weight:700;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px}
.vd-sd-item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.vd-sd-thumb{flex:none;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--soft)}
.vd-sd-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.vd-sd-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.vd-sd-text b{font-size:13.5px}
.vd-sd-text span{font-size:12px;color:var(--sub);line-height:1.5}
.vd-sd-imgonly{padding:0;border:0}
.vd-sd-imgonly img{display:block;width:100%;height:auto;border-radius:8px}

.vd-sd-note{margin:0 0 4px;font-size:12px;color:var(--sub)}
.vd-sd-block{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
.vd-sd-block:last-child{border-bottom:0;margin-bottom:0}
.vd-sd-head{font-size:13px;font-weight:800}
.vd-sd-head em{font-style:normal;font-weight:400;color:var(--sub)}
.vd-sd-imgnote{margin:0;padding:6px 10px;border:1px solid #fde68a;background:#fffbeb;color:#92400e;border-radius:6px;font-size:12px;font-weight:700}

.vd-sd-shift{margin:0;font-size:12px;color:var(--layout-blue)}

.vd-sd-refline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:8px;margin-bottom:4px;font-size:12.5px}
.vd-sd-refline b{margin-right:2px;color:var(--layout-blue)}
.vd-chip{display:inline-block;padding:2px 9px;border:1px solid #93b4f0;background:#fff;border-radius:999px;font-size:12px;font-weight:700;color:var(--text)}
.vd-sd-refhead{margin:0;font-size:12px;font-weight:700;color:var(--sub)}

/* 발송의뢰서 작은 팝업 카드: 썸네일 칸 고정 + 글자 줄바꿈 */
.vd-sd-item{align-items:center;min-height:82px}
.vd-sd-thumb{cursor:zoom-in}
.vd-sd-thumb.is-empty{display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--sub);cursor:default;border:1px dashed var(--line)}
.vd-sd-text{flex:1;overflow-wrap:anywhere}
.vd-sd-imgonly img{cursor:zoom-in}

/* 부품일지: 최종수정자는 머리줄 오른쪽, 행 추가 버튼은 연도 선택 줄 오른쪽 끝 */
.vp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vp-toolbar .vp-years{margin:0}
#vpLastEditor{margin-top:0}

/* ===== 양식 유지 문서 화면(sheetdoc.js) — 가스·보일러·GHP·지게차·공조기 ===== */
.sd-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.sd-bar .spacer{flex:1}
.sd-chips{display:flex;gap:6px;flex-wrap:wrap}
.sd-del{color:#b91c1c}
.sd-title{display:flex;align-items:baseline;gap:12px;margin:2px 0 8px;font-size:15px}
.sd-save{font-size:12px;color:var(--sub)}
.sd-tabs{margin:0 0 10px}
.sd-scroll{overflow:auto;max-width:100%;max-height:calc(100vh - 300px);border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px}
.sd-empty{padding:40px 10px;text-align:center;color:var(--sub);font-size:14px}
.sd-table{border-collapse:collapse;table-layout:fixed;background:#fff;color:#000;font-size:14.6px;line-height:1.25}
.sd-table td{padding:1px 3px;box-sizing:border-box;outline:none}
.sd-table td[contenteditable]:hover{background-image:linear-gradient(rgba(29,78,216,.06),rgba(29,78,216,.06))}
.sd-table td[contenteditable]:focus{box-shadow:inset 0 0 0 2px var(--layout-blue);background-image:none}
.sd-modal{width:min(460px,100%)}
.sd-modal-msg{font-size:14px;line-height:1.7;margin:0 0 12px}
.sd-modal-msg span{color:var(--sub);font-size:13px}
.sd-modal select,.sd-modal input[type=text]{width:100%}

/* 점검일지 표 맞춤 · 페이지 추가 팝업(날짜 고르기) */
.sd-scroll.sd-fit{max-height:none;overflow-y:visible;overflow-x:auto;padding:10px}
.sd-modal{width:min(720px,96vw)}
.sd-modal-msg.sd-oneline{white-space:nowrap;font-size:13.5px}
.sd-dates-head{display:flex;align-items:baseline;gap:10px;margin:12px 0 6px;font-size:14px}
.sd-dates-head span{color:var(--sub);font-size:12.5px}
.sd-dates{display:flex;flex-wrap:wrap;gap:6px}
.sd-day{width:48px;padding:5px 0;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:inherit;color:var(--sub)}
.sd-day b{font-size:14px;color:inherit}
.sd-day span{font-size:11px}
.sd-day.is-on{background:var(--layout-blue);border-color:var(--layout-blue);color:#fff}
.sd-dates-hint{margin:8px 0 10px;font-size:12.5px;color:var(--sub)}
.sd-empty-note{padding:14px 10px;font-size:13.5px}

.sd-scroll.sd-fit .sd-table{margin:0 auto}

.sd-table td.sd-datecell{cursor:pointer}
.sd-table td.sd-datecell:hover{background-image:linear-gradient(rgba(29,78,216,.10),rgba(29,78,216,.10))}

/* 점검관리자 칸("정 : 이름"/"부 : 이름") — 라벨은 칸 왼쪽 고정, 이름은 남은 자리에서 가운데(2026-09-22) */
.sd-lblwrap{display:flex;align-items:center;width:100%;height:100%}
.sd-lblfix{flex:none;white-space:pre}
.sd-lblname{flex:1;text-align:center}

/* 한 페이지 안에서 연도가 바뀌는 경계에 넣는 구분줄(콤프레샤, 2026-09-22) — DB는 그대로,
   화면에서만 표시. 표 칸선과 안 겹치게 위아래 여백만 살짝 준다. */
.sd-table tr.sd-yeardiv td{background:var(--soft);color:var(--sub);font-weight:700;font-size:11.5px;text-align:center;padding:3px 0;border:0}

/* 지게차 3종(1F/3F/토비카) — 표 너비를 서로 맞춘 뒤 화면 가운데로(2026-09-28 요청) */
[data-panel="forklift-1f"] .sd-table,
[data-panel="forklift-3f"] .sd-table,
[data-panel="forklift-tb"] .sd-table{margin:0 auto}

/* GHP·공조기 표도 화면 가운데로(2026-09-28 요청) */
[data-panel="facility-ghp"] .sd-table,
[data-panel="facility-hvac"] .sd-table{margin:0 auto}

/* 날짜 고르기 달력(가운데 팝업) */
.sd-cal{width:min(340px,94vw);padding:16px}
.sd-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:16px}
.sd-cal-nav{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:18px;cursor:pointer}
.sd-cal-week,.sd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.sd-cal-week span{font-size:12px;color:var(--sub);padding:4px 0}
.sd-cal-week span:first-child{color:#dc2626}.sd-cal-week span:last-child{color:#2563eb}
.sd-cal-day{height:38px;border:1px solid transparent;background:#fff;border-radius:8px;font-size:14px;font-family:inherit;cursor:pointer}
.sd-cal-day:hover{background:#e0ecff}
.sd-cal-day.is-sun{color:#dc2626}.sd-cal-day.is-sat{color:#2563eb}
.sd-cal-day.is-on{background:var(--layout-blue);color:#fff}
.sd-cal-foot{display:flex;gap:6px;margin-top:12px}.sd-cal-foot .spacer{flex:1}

/* 지게차 날짜 칸용 — 누른 칸 바로 옆에 뜨는 작은 달력(2026-09-22) */
.sd-cal-pop{position:fixed;width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:12px;z-index:460}
.sd-cal-pop.is-hidden{display:none}
.sd-cal-pop .sd-cal-head{font-size:14px;margin-bottom:8px}
.sd-cal-pop .sd-cal-nav{width:28px;height:28px;font-size:15px}
.sd-cal-pop .sd-cal-day{height:28px;font-size:12.5px;border-radius:6px}
.sd-cal-pop .sd-cal-foot{margin-top:8px}
.sd-cal-pop .sd-cal-foot .btn{padding:6px 10px;font-size:12.5px}