/* Pretendard (오프라인 자체호스팅 — 외부 CDN 없이 서버 폴더에서 로드) */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url('fonts/PretendardVariable.woff2') format('woff2-variations');
}
:root{
  color-scheme: light;          /* 브라우저 강제 다크모드로 색이 뒤집히는 것 방지 */
  --bg:#F3F1EA; --surface:#fff; --surface-2:#FAF9F5; --border:#E7E3D8; --border-strong:#D9D4C6;
  --text:#26231E; --text-2:#6B6660; --text-3:#9A948B;
  --accent:#C96442; --accent-soft:#F4E4DC; --accent-ink:#A24E32;
  --green:#5B8A5A; --green-soft:#E4EEE3; --blue:#4A6FA5; --blue-soft:#E2E9F2;
  --amber:#C08A2D; --amber-soft:#F5EAD3; --red:#B5503F; --red-soft:#F4E0DC;
  --shadow:0 1px 2px rgba(38,35,30,.04),0 4px 16px rgba(38,35,30,.06); --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Malgun Gothic','맑은 고딕',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.01em}
button,input,select{font-family:inherit}
.hidden{display:none!important}
.muted{color:var(--text-3)}

/* 로그인 */
/* 로그인 — 작은 화면에서 카드가 잘리지 않게 flex + min() 사용
   (grid+place-items는 트랙이 내용 크기로 잡혀 max-width:100%가 안 먹었음) */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;background:linear-gradient(135deg,#F3F1EA,#EDE7DA)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  box-shadow:0 24px 60px rgba(38,35,30,.15);padding:38px 34px;width:min(380px,100%)}
.login-card .logo{width:52px;height:52px;border-radius:14px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--accent),#E08763);display:grid;place-items:center;color:#fff;font-weight:800;font-size:24px;box-shadow:0 4px 14px rgba(201,100,66,.4)}
.login-card h1{font-size:20px;font-weight:800;text-align:center;letter-spacing:-.3px}
.login-card p.sub{text-align:center;color:var(--text-3);font-size:12.5px;margin-top:4px;margin-bottom:26px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);font-size:14px;outline:none}
.field input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{font-size:14px;font-weight:700;padding:11px 16px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.full{width:100%}
.btn.lg{padding:14px;font-size:15px}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:#9E4335}
/* 회사 순서변경 컨트롤 */
.ord-ctl{display:inline-flex;flex-direction:column;gap:2px}
.ord-btn{width:26px;height:18px;line-height:1;padding:0;border:1px solid var(--border);background:var(--surface-2);color:var(--text-2);border-radius:5px;cursor:pointer;font-size:9px;display:grid;place-items:center}
.ord-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft)}
.ord-btn:disabled{opacity:.3;cursor:default}
.del-warn{background:var(--red-soft);border:1px solid var(--red);border-radius:11px;padding:13px 15px;font-size:13.5px;line-height:1.6}
/* 업무 프로세스 (= 인수인계 문서 = AI 대본) */
.proc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.proc-card{border:1px solid var(--border);border-radius:13px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:8px}
.proc-head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.proc-head b{font-size:14px;font-weight:800}
.proc-desc{font-size:12px;color:var(--text-2);line-height:1.6;flex:1;margin:0}
.proc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid var(--border);font-size:11.5px}
.proc-steps{display:flex;flex-direction:column;gap:8px}
.proc-step{display:flex;gap:10px;border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:var(--surface)}
.proc-step.now{border-color:var(--accent);background:var(--accent-soft)}
.proc-step.done{opacity:.72}
.proc-step.skip{opacity:.55}
.proc-ord{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.proc-ord.done{background:var(--green-soft);color:var(--green);border-color:var(--green-soft)}
.proc-ord.now{background:var(--accent);color:#fff;border-color:var(--accent)}
.proc-ord.skip{background:var(--surface-2);color:var(--text-3)}
.proc-sbody{flex:1;min-width:0}
.proc-sbody b{font-size:13.5px;font-weight:800;display:block}
.proc-sbody p{font-size:12.5px;color:var(--text-2);line-height:1.7;margin:5px 0 0;white-space:pre-line}
.proc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;font-size:11.5px}
.pd-step{border:1px solid var(--border);border-radius:11px;padding:10px;margin-bottom:8px;background:var(--surface-2)}
.pd-row{display:flex;align-items:center;gap:7px}
.pd-row input{flex:1;min-width:0}
.pd-row2{display:grid;grid-template-columns:1fr 1fr 92px 76px;gap:6px;margin-top:5px}
@media(max-width:700px){ .pd-row2{grid-template-columns:1fr 1fr} }
/* 문서 전환 체인 */
.doc-chain{display:flex;align-items:stretch;gap:4px;overflow-x:auto;padding-bottom:4px}
.doc-step{flex:1;min-width:150px;display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);font-family:inherit;text-align:left}
.doc-step:hover{border-color:var(--accent-soft);background:var(--surface-2)}
.doc-step.on{border-color:var(--accent);background:var(--accent-soft)}
.doc-step-n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-3);font-size:11px;font-weight:800;border:1px solid var(--border)}
.doc-step.on .doc-step-n{background:var(--accent);color:#fff;border-color:var(--accent)}
.doc-step-b{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-step-b b{font-size:13px;font-weight:800}
.doc-step-b span{font-size:10.5px}
.doc-step-v{text-align:right;font-size:12px;font-weight:800;display:flex;flex-direction:column}
.doc-step-v span{font-size:10.5px;font-weight:600}
.doc-arrow{align-self:center;color:var(--text-3);font-size:17px;flex:none}
/* 품목 줄 — 화면이 좁아지면 자동으로 접힌다(가로 스크롤 없음) */
.doc-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.doc-line select{flex:4 1 160px;min-width:0}
.doc-line input{flex:1 1 66px;min-width:0}
.doc-line .doc-amt{flex:1 1 78px;min-width:0;font-size:12.5px;font-weight:800;text-align:right;white-space:nowrap}
.doc-line .ibtn{flex:0 0 28px}
/* 문서 입력은 품목 줄이 있어 여유 폭이 필요하다 */
.modal.doc{width:min(640px,100%)}
.doc-sum{display:flex;gap:16px;justify-content:flex-end;align-items:center;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.doc-sum .tot{font-size:14px;color:var(--text)}
.dv-prog{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dv-step{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.dv-step.done{background:var(--green-soft);color:var(--green);border-color:var(--green-soft)}
.dv-step.now{background:var(--accent);color:#fff;border-color:var(--accent)}
.dv-sep{color:var(--text-3)}
.dv-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px}
.dv-head>div{display:flex;flex-direction:column;gap:2px}
.dv-head span.muted{font-size:11px}
.dv-head b{font-size:13.5px}
@media(max-width:700px){
  .doc-chain{gap:6px}
  .doc-sum{flex-wrap:wrap;gap:8px 14px}
}
/* 통신 중 상단 진행바 + 표 도구(검색·더보기) */
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--accent),#E08763);opacity:0;transition:width .2s,opacity .3s}
#loadbar.on{opacity:1}
.tbl-tools{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.tbl-search{flex:1;max-width:280px;display:flex;align-items:center;gap:6px;padding:7px 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text-3)}
.tbl-search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--text)}
.tbl-count{font-size:11.5px;color:var(--text-3);font-weight:600;white-space:nowrap}
.tbl-more{width:100%;margin-top:8px}
/* 로그 조회 */
.log-tr td{vertical-align:top}
.log-tr code{font-size:11px;color:var(--text-2);white-space:pre-wrap;word-break:break-all}
.set-row{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:14px;background:var(--surface-2)}
/* 테넌트(회사) 준비상태 배너 */
.tn-warn{background:var(--amber-soft);border:1px solid var(--amber);border-radius:12px;padding:12px 15px;margin-bottom:14px;font-size:13px;line-height:1.6}
.tn-ok{background:var(--green-soft);border:1px solid var(--green-soft);color:var(--green);border-radius:12px;padding:10px 15px;margin-bottom:14px;font-size:12.5px;font-weight:700}
/* 전자결재 */
.ap-line{margin-bottom:8px;min-height:22px}
.ap-body{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:12px 14px;font-size:13.5px;line-height:1.7;white-space:normal}
/* 여신한도 초과 경고 — 결재자가 모르고 승인하는 일이 없게 */
.ap-warn{background:var(--red-soft);border:1.5px solid var(--red);border-radius:11px;
  padding:12px 14px;margin-bottom:10px;font-size:13px;line-height:1.65;color:var(--text)}
.ap-warn>b{display:block;color:var(--red);font-size:13.5px;margin-bottom:5px}
.ap-warn-note{margin-top:7px;padding-top:7px;border-top:1px solid rgba(181,80,63,.3);font-size:12px;color:var(--text-2)}
.ap-steps{display:flex;flex-direction:column;gap:7px}
.ap-step{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:11px;padding:9px 12px;background:var(--surface)}
.ap-ord{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.ap-ord.ok{background:var(--green-soft);color:var(--green);border-color:var(--green-soft)}
.ap-ord.bad{background:var(--red-soft);color:var(--red);border-color:var(--red-soft)}
.ap-ord.now{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft)}
.ap-sinfo{flex:1;min-width:0}
.ap-sinfo b{display:block;font-size:13px}
/* 통합 현황 대시보드 */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ov-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:16px;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.ov-card:hover{border-color:var(--accent-soft);transform:translateY(-2px);box-shadow:0 8px 24px rgba(38,35,30,.10)}
.ov-head{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.ov-head b{font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-body{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
.ov-stat{display:flex;flex-direction:column;gap:2px}
.ov-lb{font-size:11px;color:var(--text-3);font-weight:600}
.ov-v{font-size:15px;font-weight:800;color:var(--text)}
.ov-v.amber{color:var(--amber)} .ov-v.red{color:var(--red)}
.ov-foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--border);font-size:11px;color:var(--text-3);font-weight:600}
/* 비밀번호 보기(눈) 버튼 + Caps Lock 경고 — 로그인 실패 1위 원인이 오타 */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;padding-right:44px!important}
.pw-eye{position:absolute;right:6px;width:32px;height:32px;cursor:pointer;border-radius:8px;
  border:1px solid transparent;background:none;color:var(--text-3);display:grid;place-items:center;transition:.15s}
.pw-eye:hover{background:var(--surface-2);color:var(--text-2)}
/* 눌린 상태(비밀번호 보이는 중) — 아이콘·색·배경·테두리가 함께 바뀌어 구분이 확실하다 */
.pw-eye.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-ink)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pw-caps{display:none;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--amber)}
.pw-caps.on{display:block}
.login-err{color:var(--red);font-size:12.5px;font-weight:600;text-align:center;margin-top:10px;min-height:16px;line-height:1.5}
.login-hint{margin-top:22px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-3);line-height:1.7}

/* 앱 레이아웃 */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 8px 14px}
.brand .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#E08763);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(201,100,66,.35)}
.brand b{font-size:14px;font-weight:800;display:block;letter-spacing:-.2px}
.brand span{font-size:10.5px;color:var(--text-3);font-weight:600}
/* 회사 전환기 */
.co-switcher{position:relative;padding:2px 4px 6px}
.co-btn{width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer;font-family:inherit;text-align:left}
.co-btn:hover{background:var(--surface);border-color:var(--border-strong)}
.co-mark{width:24px;height:24px;border-radius:7px;flex:none;background:linear-gradient(135deg,var(--accent),#E08763);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center}
.co-name{flex:1;font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-btn svg{flex:none;color:var(--text-3);transition:.15s}
.co-switcher.open .co-btn svg{transform:rotate(180deg)}
.co-menu{display:none;position:absolute;left:4px;right:4px;top:calc(100% + 2px);z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 14px 36px rgba(38,35,30,.22)}
.co-switcher.open .co-menu{display:block}
.co-head{font-size:10.5px;font-weight:800;color:var(--text-3);padding:6px 10px 4px}
.co-item{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;border:none;background:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);text-align:left}
.co-item:hover{background:var(--surface-2);color:var(--text)}
.co-item.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:800}
.co-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent)}
.co-row{display:flex;gap:6px;align-items:stretch}
.co-row .co-btn{flex:1;min-width:0}
.co-add{flex:none;width:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-3);cursor:pointer;display:grid;place-items:center;transition:.15s}
.co-add:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft)}
.co-sep{height:1px;background:var(--border);margin:5px 8px}
.co-add-row{color:var(--accent-ink);font-weight:700}
.co-plus{width:16px;height:16px;border-radius:5px;flex:none;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:13px;line-height:1}
/* 클로브식 워크스페이스 드롭다운 */
.co-menu{padding:8px}
.co-search{display:flex;align-items:center;gap:7px;padding:7px 9px;margin-bottom:6px;border-radius:9px;background:var(--surface-2);color:var(--text-3)}
.co-search input{flex:1;border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--text)}
.co-badge{flex:none;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;background:#E8EEF7;color:#3B6BB0;letter-spacing:.2px}
.co-badge.ind{background:#EFEAF7;color:#7A5AB0}
.co-ws{display:flex;align-items:center;gap:8px}
.co-wsname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-check{color:var(--accent);flex:none}
.co-create{color:var(--accent-ink);font-weight:700;margin-top:2px}
.co-empty{padding:12px 10px;font-size:12px;color:var(--text-3);text-align:center}
.co-mng{color:var(--text-2);font-weight:600}
.co-logout{color:var(--red)}
.co-user{display:flex;align-items:center;gap:9px;padding:8px 10px 6px}
.co-uav{width:30px;height:30px;border-radius:8px;flex:none;background:var(--surface-2);color:var(--text-2);display:grid;place-items:center;font-size:11px;font-weight:800}
.co-uinfo{min-width:0}
.co-uinfo b{display:block;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-uinfo span{font-size:11px;color:var(--text-3)}
.acct-me{display:flex;align-items:center;gap:12px}
.acct-me .av-lg{width:44px;height:44px;border-radius:11px;flex:none;background:linear-gradient(135deg,var(--accent),#E08763);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800}
.acct-me b{display:block;font-size:14px;font-weight:800}
.acct-me span{font-size:12px}
.nav-label{font-size:10.5px;font-weight:700;color:var(--text-3);padding:12px 10px 6px;letter-spacing:.4px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:none;border-radius:9px;color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent-ink)}
.nav-item .ic{width:17px;height:17px;flex:none}
.side-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px}
.who{display:flex;align-items:center;gap:10px;padding:8px 10px}
.who .av{width:34px;height:34px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:12px}
.who b{font-size:13px;display:block}
.who span{font-size:11px;color:var(--text-3)}

.main{overflow-y:auto}
.top{position:sticky;top:0;background:rgba(243,241,234,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:16px 28px}
.top h2{font-size:19px;font-weight:800;letter-spacing:-.3px}
.top .date{font-size:12.5px;color:var(--text-3);font-weight:600;margin-top:2px}
.content{padding:24px 28px 50px;max-width:1180px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:22px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:360px 1fr}
/* 햄버거 버튼 — 넓은 화면에선 숨김 */
.top{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;align-items:center;justify-content:center}
.menu-btn:hover{background:var(--surface-2)}
.side-dim{display:none}

/* ── 모바일·태블릿: 사이드바를 서랍(drawer)으로 ── */
@media(max-width:900px){
  .g2{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .menu-btn{display:flex}
  .side{position:fixed;top:0;left:0;bottom:0;width:264px;z-index:80;
        transform:translateX(-100%);transition:transform .22s ease;
        box-shadow:0 0 40px rgba(38,35,30,.25);overflow-y:auto}
  .app.side-open .side{transform:translateX(0)}
  .app.side-open .side-dim{display:block;position:fixed;inset:0;z-index:70;background:rgba(38,35,30,.38)}
  .content{padding:16px}
  .top{padding:12px 16px}
  .co-menu{max-height:70vh;overflow-y:auto}
  .modal{max-height:88vh;overflow-y:auto}
  .frow{grid-template-columns:1fr!important}
  .perm-grid,.co-perm-grid{grid-template-columns:1fr 1fr!important}
  table{font-size:12.5px}
}
@media(max-width:480px){
  .kpis{grid-template-columns:1fr}
  .ov-grid{grid-template-columns:1fr}
  .perm-grid,.co-perm-grid{grid-template-columns:1fr!important}
  /* 로그인 카드 여백 줄여 한 화면에 들어오게 */
  .login-wrap{padding:12px}
  .login-card{padding:26px 20px;border-radius:16px}
  .login-card .logo{width:44px;height:44px;margin-bottom:12px}
  .login-card h1{font-size:18px}
  .login-card p.sub{margin-bottom:18px}
  .login-hint{margin-top:16px;padding-top:12px}
  .btn.lg{padding:13px}
}

/* 출퇴근 카드 */
.clock{font-size:38px;font-weight:800;text-align:center;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.clock-date{text-align:center;color:var(--text-3);font-size:12.5px;font-weight:600;margin-bottom:18px}
.cc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.cc-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.cc-box .lb{font-size:11.5px;color:var(--text-3);font-weight:700;margin-bottom:5px}
.cc-box .tm{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.cc-box.in .tm{color:var(--green)} .cc-box.out .tm{color:var(--blue)}
.gps{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px;margin-top:12px}
.gps .dotg{width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.gps.ok .dotg{background:var(--green)} .gps.err .dotg{background:var(--red)} .gps.wait .dotg{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h3{font-size:15px;font-weight:800}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.3px;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.t-green{background:var(--green-soft);color:var(--green)} .t-blue{background:var(--blue-soft);color:var(--blue)}
.t-amber{background:var(--amber-soft);color:var(--amber)} .t-red{background:var(--red-soft);color:var(--red)} .t-gray{background:var(--surface-2);color:var(--text-2)}
.loc-link{color:var(--accent);font-weight:700;text-decoration:none;font-size:12px}
.loc-link:hover{text-decoration:underline}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.input{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13px;outline:none}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.grow{flex:1}
.empty{padding:44px;text-align:center;color:var(--text-3)}
.perm-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--surface-2);color:var(--text-2);margin:2px}

/* 모달 */
/* flex + min() — grid+place-items는 트랙이 내용 크기로 잡혀 max-width:100%가 무효가 된다
   (좁은 화면에서 모달이 화면보다 넓어져 가로 스크롤이 생기던 원인) */
.backdrop{position:fixed;inset:0;background:rgba(38,35,30,.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;overflow-y:auto}
.modal{background:var(--surface);border-radius:18px;width:min(460px,100%);
  max-height:calc(100dvh - 60px);overflow:auto;box-shadow:0 24px 70px rgba(38,35,30,.35)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:16px;font-weight:800}
.modal-head .x{width:30px;height:30px;border:none;background:var(--surface-2);border-radius:8px;cursor:pointer;font-size:17px;color:var(--text-2)}
.modal-body{padding:18px 20px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);
  flex-wrap:wrap}
/* 🎨 좁은 폭에서 버튼 글자가 「삭 제」처럼 세로로 쪼개지던 것 방지 (2026-08-02) */
.btn{white-space:nowrap}
@media(max-width:640px){
  .modal-foot{padding:12px 14px;gap:7px}
  .modal-foot .btn{padding:10px 12px;font-size:13px}
}
.modal.wide{width:min(860px,100%)}
/* 모달 안 요소가 넘치지 않게 */
.modal-body select,.modal-body input,.modal-body textarea{max-width:100%}
.frow{min-width:0}
.frow>*{min-width:0}
/* 제조기록서(EBR) — 화면에서는 문서처럼, 인쇄하면 종이 서식 그대로 */
.ebr{font-size:12.5px}
.ebr h2{font-size:17px;font-weight:800;text-align:center;letter-spacing:2px;margin-bottom:4px}
.ebr .ebr-sub{text-align:center;color:var(--text-3);font-size:11.5px;margin-bottom:14px}
.ebr .ebr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
.ebr .ebr-grid>div{padding:8px 10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.ebr .ebr-grid>div:nth-child(4n){border-right:none}
.ebr .ebr-grid .k{background:var(--surface-2);font-weight:700;color:var(--text-2)}
.ebr h4{font-size:13px;font-weight:800;margin:16px 0 6px}
.ebr table{font-size:12px}
.ebr .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.ebr .sign div{border:1px solid var(--border);border-radius:10px;padding:10px;height:74px}
.ebr .sign .lb{font-size:11px;color:var(--text-3);font-weight:700}
@media print{
  body>*{display:none !important}
  .backdrop{display:block !important;position:static !important;background:none !important;
    backdrop-filter:none !important;padding:0 !important}
  .modal{width:100% !important;max-width:100% !important;max-height:none !important;
    box-shadow:none !important;border-radius:0 !important;overflow:visible !important}
  .modal-head,.modal-foot{display:none !important}
  .modal-body{padding:0 !important}
  .ebr table{page-break-inside:auto}
  .ebr tr{page-break-inside:avoid}
}
/* ───────── 문서 인쇄 (견적서·거래명세서·발주서 A4 서식) ─────────
   화면에서는 #print-area 를 숨겨두고, 인쇄할 때만 이것만 나오게 한다.
   미리보기는 같은 HTML을 모달 안에 복사해 보여주므로 "보이는 대로 나온다". */
#print-area{display:none}
.pr-modal{width:min(880px,100%)}
.pr-preview{overflow-x:auto;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:14px}
.pr-back .modal-foot{flex-wrap:wrap;gap:8px}
.pr-back .modal-foot .btn{white-space:nowrap}
.pr-hint{margin-right:auto;font-size:12px;line-height:1.5}
@media(max-width:620px){ .pr-hint{flex:1 0 100%;margin-right:0;order:-1} }
.pr-preview .pr-sheet{background:#fff;box-shadow:0 2px 10px rgba(38,35,30,.12)}
/* A4 한 장 (210mm). 좁은 화면에서는 위 .pr-preview 안에서만 가로 스크롤된다 */
.pr-sheet{width:186mm;min-width:186mm;margin:0 auto;padding:2mm 0;color:#000;
  font-family:'Pretendard Variable',Pretendard,system-ui,'Malgun Gothic','맑은 고딕',sans-serif;
  font-size:11.5px;line-height:1.45;position:relative;z-index:0}   /* z-index:0 = 워터마크(z-index:-1)가 종이 배경 위·글자 아래에 놓이는 기준 */
/* 인쇄 창 안내 — 머리글·바닥글을 끄지 않으면 서버 주소가 문서에 찍힌다 */
.pr-tip{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:9px;padding:9px 12px;margin-bottom:10px;font-size:12.5px;line-height:1.55}
@media print{ .pr-tip{display:none !important} }
/* 미확정 워터마크 — 글자를 가리지 않도록 본문 '뒤'에 깔린다(z-index:-1).
   표 칸은 배경이 없어 워터마크가 비쳐 보이고, 품명·금액 글씨는 그 위에 또렷하게 남는다. */
.pr-draft{position:absolute;top:44%;left:0;right:0;text-align:center;font-size:56px;font-weight:800;
  color:rgba(181,80,63,.16);letter-spacing:10px;transform:rotate(-16deg);pointer-events:none;z-index:-1;
  white-space:nowrap;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* 제목은 '종이의 한가운데'에 와야 한다.
   flex 로 짜면 로고가 없을 때 왼쪽 칸이 0이 되어 제목이 왼쪽으로 밀린다(실제로 그랬음).
   → 좌·우 칸을 같은 너비로 고정한 3열 격자로 만들어 로고 유무와 무관하게 정중앙에 오게 한다. */
.pr-head{display:grid;grid-template-columns:44mm 1fr 44mm;align-items:start;gap:3mm;margin-bottom:6mm}
.pr-logo{max-height:16mm;max-width:44mm;object-fit:contain}
/* 자간(letter-spacing)은 마지막 글자 뒤에도 붙어서, 가운데정렬해도 글자가 왼쪽으로 치우쳐 보인다.
   text-indent 는 중심을 그 값의 '절반'만큼 밀므로  오차 = 보정/2 − 자간/2  →  보정 = 자간 일 때 0.
   (측정으로 확인: 자간 2.5mm, 보정 2.5mm → 글자 중심 오차 0.0px) */
.pr-title{text-align:center;font-size:27px;font-weight:800;margin:0;
  letter-spacing:2.5mm;text-indent:2.5mm}
.pr-no{font-size:10.5px;text-align:right;line-height:1.7;white-space:nowrap}
/* 🔴 인쇄 테두리는 반드시 mm(실제 길이) 로 준다.
   px 는 화면 단위라 프린터 해상도로 환산할 때 어떤 선은 1점, 어떤 선은 2점으로 반올림돼
   굵기가 들쭉날쭉해진다. mm 로 주면 어느 프린터에서도 같은 굵기로 나온다. */
.pr-sheet{--prline:0.25mm solid #333}
/* 🔴 앱 화면용 표 규칙이 인쇄 서식으로 새어 들어오는 것을 차단한다.
   특히 `tbody tr:last-child td{border-bottom:none}`(화면 표를 깔끔하게 보이려는 규칙)이
   인쇄 표의 **맨 아랫줄 가로선을 통째로 지우고** 있었다. 선택자 우선순위가 더 높아서 이긴다.
   인쇄 서식은 앱 화면과 완전히 다른 물건이므로 여기서 확실히 끊어준다. */
.pr-sheet table tbody tr:last-child td,
.pr-sheet table tbody tr:last-child th{border-bottom:var(--prline)}
.pr-sheet tbody tr:hover{background:none}
/* 공급받는자·공급자 = 한 개의 표 (같은 줄이므로 높이가 어긋날 수 없다) */
.pr-parties{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:4mm}
.pr-parties td,.pr-parties th{border:var(--prline);padding:1.4mm 1.6mm;font-size:9.5px;
  vertical-align:middle;height:6.5mm}
.pr-parties .pr-vlabel{background:#f2f2f2;font-weight:800;font-size:10.5px;
  writing-mode:vertical-rl;text-orientation:upright;letter-spacing:1px;white-space:nowrap;padding:0}
.pr-parties .k{background:#f7f7f7;font-weight:700;text-align:center;white-space:nowrap;font-size:9.5px}
.pr-parties .v{word-break:break-all;overflow-wrap:anywhere}
.pr-sign{position:relative;overflow:hidden}
.pr-stamp{position:absolute;right:1.5mm;top:50%;transform:translateY(-50%);
  height:11mm;width:11mm;object-fit:contain;mix-blend-mode:multiply}
.pr-inkbox{color:#888;margin-left:4px}
.pr-amt{border:var(--prline);padding:2.4mm 3mm;margin-bottom:4mm;font-size:12.5px;text-align:center;background:#fafafa}
.pr-amt b{font-weight:800;letter-spacing:1px}
.pr-amt-num{margin-left:6px;color:#444;font-size:11px}
.pr-items{width:100%;border-collapse:collapse;table-layout:fixed}
.pr-items th,.pr-items td{border:var(--prline);padding:1.5mm 2mm;font-size:10.5px;height:7mm}
.pr-items thead th{background:#f2f2f2;font-weight:800;text-align:center;letter-spacing:1px}
.pr-items td.c{text-align:center} .pr-items td.r,.pr-items .r{text-align:right;font-variant-numeric:tabular-nums}
.pr-items .k{background:#f7f7f7;font-weight:700}
.pr-items tfoot td{background:#fafafa;height:6.5mm}
.pr-items tfoot .pr-tot td{font-weight:800;font-size:12px;background:#f0f0f0}
.pr-code{color:#777;font-size:9.5px;margin-left:5px}
.pr-memo{border:var(--prline);border-top:none;padding:2mm 3mm;font-size:10.5px}
.pr-memo b{margin-right:6px}
.pr-sign-line{text-align:center;margin-top:7mm;font-size:12px;font-weight:700;letter-spacing:1px}
.pr-foot{margin-top:4mm;text-align:center;color:#777;font-size:9.5px;border-top:1px solid #ddd;padding-top:2mm}
@media print{
  /* 문서 인쇄 모드일 때만 적용 — 제조기록서(EBR) 인쇄 규칙과 섞이지 않게 분리 */
  body.printing-doc>*{display:none !important}
  body.printing-doc .backdrop{display:none !important}
  body.printing-doc #print-area{display:block !important}
  /* 종이 여백은 @page 가 아니라 서식 안쪽 padding 으로 준다 — 아래 @page 설명 참조 */
  body.printing-doc .pr-sheet{width:auto;min-width:0;box-shadow:none;padding:13mm 12mm}
  .pr-items tr,.pr-parties tr{page-break-inside:avoid}
  .pr-items thead{display:table-header-group}
}
/* 🔴 여백을 0으로 두는 이유 — 브라우저가 종이 위아래에 찍는
   '인쇄 날짜 · MAPLE ERP · 서버주소 · 1/1' 을 없애기 위해서다.
   그 머리글·바닥글은 @page 여백 공간에 그려지므로, 여백이 없으면 찍히지 않는다.
   실제 종이 여백은 위 print 규칙의 .pr-sheet padding 이 담당한다. */
@page{size:A4;margin:0}
/* 관리자 — 로고·인감 업로드 */
.pi-img{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pi-prev{width:96px;height:64px;flex:none;border:1px dashed var(--border-strong);border-radius:10px;
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:12px}
.pi-prev img{max-width:100%;max-height:100%;object-fit:contain}
.pi-btns{display:flex;gap:8px;flex-wrap:wrap}
.pi-btns .btn{padding:8px 13px;font-size:13px}

/* ───────── 오늘 할 일 (통합 알림) ───────── */
.todo-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.todo-row{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid var(--border);
  border-radius:11px;background:var(--surface);border-left-width:4px}
.todo-row.lv-bad{border-left-color:var(--red);background:linear-gradient(90deg,var(--red-soft) 0%,var(--surface) 40%)}
.todo-row.lv-warn{border-left-color:var(--amber);background:linear-gradient(90deg,var(--amber-soft) 0%,var(--surface) 40%)}
.todo-row.lv-info{border-left-color:var(--border-strong)}
.todo-tag{flex:none;margin-top:2px}
.todo-body{flex:1;min-width:0}
.todo-body b{font-size:13.5px;font-weight:800;display:block}
.todo-body p{font-size:12.5px;color:var(--text-2);line-height:1.6;margin:3px 0 0}
.todo-act{display:flex;gap:6px;flex:none;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){
  .todo-row{flex-wrap:wrap}
  .todo-act{width:100%;justify-content:flex-start;margin-top:4px}
}

/* ───────── 🏃 업무 바통 (부서간 자동 연결) ─────────
   "지금 누구 차례인가"를 색으로 즉시 구분한다.
   파랑=내 차례 / 회색=남의 차례 / 빨강=받을 사람이 없어 멈춤 */
.baton-me,.baton-other,.baton-stuck{
  border-radius:11px;padding:11px 13px;font-size:13px;line-height:1.65;
  border:1px solid var(--border);border-left-width:4px}
.baton-me{border-left-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.baton-other{border-left-color:var(--border-strong);background:var(--surface-2);color:var(--text-2)}
.baton-stuck{border-left-color:var(--red);background:var(--red-soft);color:var(--text)}
.baton-me b,.baton-stuck b{font-weight:800}
/* 🏃 좌측 메뉴 빨간 숫자 배지 — "내 차례"가 몇 건인지 화면을 안 봐도 알게 */
.nav-badge{margin-left:auto;flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center}
.nav-item.on .nav-badge{background:#fff;color:var(--red)}

/* 📎 첨부파일 목록 */
.fl-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface-2);margin-bottom:5px;font-size:12.5px}
.fl-ic{flex:none;font-size:14px}
.fl-name{flex:1;min-width:0;font-weight:700;color:var(--accent-ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-name:hover{text-decoration:underline}
.fl-meta{flex:none;font-size:11px}
@media(max-width:640px){ .fl-meta{display:none} }

/* 📜 인증·특허 목록 — 표로 하면 폰에서 글자가 세로로 쪼개져서 줄(카드) 형태로 만든다 */
.cert-list{display:flex;flex-direction:column;gap:7px}
.cert-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--border);border-left-width:4px;background:var(--surface);cursor:pointer}
.cert-row:hover{border-color:var(--border-strong)}
.cert-row.bad{border-left-color:var(--red);background:var(--red-soft)}
.cert-row.warn{border-left-color:var(--amber);background:var(--amber-soft)}
.cert-main{flex:1;min-width:0}
.cert-top{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.cert-top b{font-size:13.5px;font-weight:800}
.cert-sub{font-size:12px;color:var(--text-2);line-height:1.6;margin-top:3px;word-break:keep-all}
.cert-day{flex:none;font-size:13px;text-align:right;min-width:64px}

/* 🏢 표준 부서 묶음(템플릿) 선택 카드 */
.tpl-card{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:10px;background:var(--surface)}
.tpl-card:has(.tpl-one:checked){border-color:var(--accent)}
.tpl-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px}
.tpl-head input{width:auto;flex:none;cursor:pointer}
.tpl-head b{flex:1;min-width:0}
.tpl-list{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.tpl-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;
  padding:5px 6px;border-radius:8px;cursor:pointer}
.tpl-item:hover{background:var(--surface-2)}
.tpl-item input{width:auto;flex:none;cursor:pointer}
.tpl-item:has(.tpl-one:checked){background:var(--accent-soft)}
.tpl-item.has{opacity:.45;cursor:default}
.tpl-item.has:hover{background:transparent}
.tpl-name{font-weight:700;min-width:96px}
.tpl-mods{display:flex;flex-wrap:wrap;gap:3px}

/* 💾 백업 상태 카드 */
.bk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 13px;border-radius:11px;
  border:1px solid var(--border);border-left-width:4px;background:var(--surface);margin-bottom:10px}
.bk-row.ok{border-left-color:var(--green,#4F8A5B);background:var(--green-soft,var(--surface-2))}
.bk-row.bad{border-left-color:var(--red);background:var(--red-soft)}
.bk-row b{font-weight:800}

/* 📌 바통 쪽지 — 다음 담당자가 알아야 할 것(품목·수량·문서·납기) */
.baton-note{border-radius:11px;padding:10px 13px;font-size:12.5px;line-height:1.6;margin-bottom:8px;
  border:1px dashed var(--border-strong);background:var(--surface-2);color:var(--text-2)}
.baton-note b{color:var(--text);font-weight:800}

/* 📋 흐름 현황판 (칸반) — 단계별 세로줄 */
.flow-wrap{margin-bottom:18px}
.flow-title{font-size:13.5px;font-weight:800;margin-bottom:8px}
.flow-board{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.flow-col{flex:0 0 200px;min-width:200px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:9px}
.flow-colhead{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.flow-colname{font-size:12px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flow-cards{display:flex;flex-direction:column;gap:7px}
.flow-empty{text-align:center;color:var(--text-3,var(--text-2));font-size:12px;padding:8px 0;opacity:.5}
.flow-card{background:var(--surface);border:1px solid var(--border);border-left-width:3px;
  border-radius:9px;padding:8px 10px;cursor:pointer}
.flow-card:hover{border-color:var(--border-strong)}
.flow-card b{font-size:12.5px;font-weight:700;display:block;line-height:1.45}
.flow-card.mine{border-left-color:var(--accent);background:var(--accent-soft)}
.flow-card.late{border-left-color:var(--red)}
.flow-card.stuck{border-left-color:var(--red);background:var(--red-soft)}
.flow-ctx{font-size:11.5px;color:var(--text-2);margin-top:4px;line-height:1.5}
.flow-meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px;font-size:11px}
.flow-late{color:var(--red);font-weight:700}
@media(max-width:640px){ .flow-col{flex:0 0 170px;min-width:170px} }

/* ───────── 마케팅 (예산 과속 신호등 · 월별 집행) ───────── */
.mk-chart{margin-top:6px}
.mk-bars{display:flex;align-items:flex-end;gap:5px;height:120px;padding:0 2px}
.mk-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px}
.mk-bar-f{width:100%;background:var(--accent-soft);border:1px solid var(--accent-soft);
  border-bottom:none;border-radius:5px 5px 0 0;min-height:2px}
.mk-bar span{font-size:10.5px;color:var(--text-3);font-weight:700}
/* 집행률 막대 + 기간진행률 표시선 — 막대가 선보다 앞서면 '과속' */
.mk-pace{display:flex;align-items:center;gap:7px}
.mk-pace-b{position:relative;flex:1;min-width:52px;height:10px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;overflow:hidden}
.mk-pace-f{height:100%;background:var(--green);opacity:.75}
.mk-pace-f.warn{background:var(--amber)} .mk-pace-f.bad{background:var(--red)}
.mk-pace-m{position:absolute;top:-2px;width:2px;height:calc(100% + 4px);background:var(--text);
  border-radius:2px;transform:translateX(-1px)}
.mk-share{height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden;min-width:60px;margin-bottom:3px}
.mk-share>div{height:100%;background:var(--accent);opacity:.7}

/* ───────── 교육 (연간 현황판) ───────── */
.edu-tbl{font-size:12.5px}
.edu-tbl th.edu-mh{width:30px;text-align:center;padding:8px 2px}
.edu-tbl td.edu-m{text-align:center;padding:6px 2px;font-weight:800;font-size:13px;color:var(--text-3)}
.edu-m.plan{background:var(--surface-2);color:var(--text-3)}
.edu-m.sched{background:var(--amber-soft);color:var(--amber)}
.edu-m.done{background:var(--green-soft);color:var(--green)}
.edu-m.late{background:var(--red-soft);color:var(--red)}
.edu-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:12px;color:var(--text-2)}
.edu-legend i{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:5px;font-style:normal;font-weight:800;margin-right:5px;vertical-align:middle}
@media(max-width:640px){ .edu-tbl th.edu-mh{width:24px} .edu-tbl td.edu-m{font-size:11px} }

/* ───────── 일정 (월간 달력) ───────── */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:5px}
.cal-head>div{text-align:center;font-size:12px;font-weight:800;color:var(--text-2);padding:5px 0}
.cal-head .sun,.cal-d.sun{color:var(--red)} .cal-head .sat,.cal-d.sat{color:var(--blue)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{min-height:92px;border:1px solid var(--border);border-radius:10px;background:var(--surface);
  padding:5px 6px;cursor:pointer;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-cell:hover{border-color:var(--accent-soft);background:var(--surface-2)}
.cal-cell.out{background:var(--surface-2);border-style:dashed;opacity:.5;cursor:default}
.cal-cell.out:hover{background:var(--surface-2);border-color:var(--border)}
.cal-cell.today{border-color:var(--accent);background:var(--accent-soft)}
.cal-d{font-size:12.5px;font-weight:800}
.cal-cell.today .cal-d{color:var(--accent-ink)}
.cal-evs{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-ev{font-size:10.5px;font-weight:600;padding:2px 5px;border-radius:5px;background:var(--surface-2);
  border-left:3px solid var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.k-회의{border-left-color:var(--blue);background:var(--blue-soft)}
.cal-ev.k-출장{border-left-color:var(--amber);background:var(--amber-soft)}
.cal-ev.k-휴가{border-left-color:var(--green);background:var(--green-soft)}
.cal-ev.k-교육{border-left-color:var(--accent);background:var(--accent-soft)}
.cal-ev.k-납기{border-left-color:var(--red);background:var(--red-soft)}
.cal-more{font-size:10px;color:var(--text-3);font-weight:700;padding-left:3px}
/* 폰에서는 칸을 낮추고 글자를 줄여 7칸이 가로로 다 들어가게 */
@media(max-width:640px){
  .cal-cell{min-height:76px;padding:3px 4px;border-radius:8px}
  .cal-d{font-size:11px}
  /* 🎨 폰에서 일정 제목이 "여…" 처럼 한 글자만 보이던 문제 —
     한 줄로 자르지 말고 **두 줄까지** 보여준다. 칸 높이를 조금 키워 자리를 만들었다. */
  .cal-ev{font-size:9px;padding:2px 3px;border-left-width:2px;
    white-space:normal;line-height:1.25;word-break:break-all;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cal-head>div{font-size:11px}
}

.perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.perm-toggle{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:600;background:var(--surface-2)}
.perm-toggle.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-ink)}
.co-perm{border:1px solid var(--border);border-radius:11px;padding:11px 13px;margin-bottom:9px;background:var(--surface)}
.co-perm label.co-perm-head,.co-perm-head{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;margin-bottom:0}
.co-perm-head b{font-weight:700}
.co-perm-head input{width:auto;margin:0}
.co-perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--text);color:#fff;padding:13px 18px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:200}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.kpi .lb{font-size:12px;color:var(--text-2);font-weight:600}
.kpi .v{font-size:24px;font-weight:800;margin-top:6px}

/* 재고 화면 */
.inv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px}
.seg{display:inline-flex;flex-wrap:wrap;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px}
.seg-btn{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-2);border:none;background:none;padding:6px 12px;border-radius:8px;cursor:pointer}
.seg-btn.on{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow)}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.ibtn{border:none;background:var(--surface-2);border-radius:7px;width:28px;height:28px;cursor:pointer;font-size:13px;margin-left:3px}
.ibtn:hover{background:var(--border)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:5px}
.fld .input,.frow .input{width:100%}
select.input{appearance:auto}