/* ============================================================
   components.css — 공통 컴포넌트 (버튼·카드·칩·사이드바 등)
   ------------------------------------------------------------
   ⚠ 이 파일은 tokens.css 와 "함께" 링크해야 한다(변수는 tokens.css에 있음).
     login.html / deptwork-client 처럼 시안 구조를 쓰는 화면용.
   ⚠ 간트(gantt.html)는 자체 .btn/table/.spacer 등과 이름이 겹쳐 레이아웃이 깨지므로
     이 파일을 링크하지 않는다(tokens.css만 링크).

   폰트 TODO(자체호스팅 미적용): Pretendard woff2를 /ui/fonts/ 에 두고 아래를 활성화하면
   회사망에서도 선명. 외부 CDN은 CSP·회사망 차단으로 불가 → 반드시 자체호스팅.
   @font-face{ font-family:'Pretendard'; font-weight:45 920; font-display:swap;
     src:url('/ui/fonts/PretendardVariable.woff2') format('woff2-variations'); }
   ============================================================ */

/* ── 베이스 ── */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:13.5px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
button,input,select{font-family:inherit;font-size:inherit;color:inherit;}

/* ── 앱 레이아웃 (사이드바 + 메인) ── */
.app{display:flex;height:100vh;overflow:hidden;}
.sb{width:242px;flex-shrink:0;background:var(--sb-bg);border-right:1px solid var(--sb-line);display:flex;flex-direction:column;transition:background .2s;}
.sb-logo{display:flex;align-items:center;gap:11px;padding:18px;border-bottom:1px solid var(--sb-line);}
.sb-mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,var(--pri),var(--sec));display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(var(--pri-rgb),.4);}
.sb-mark svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sb-nm{font-size:14px;font-weight:800;color:var(--sb-brand);letter-spacing:-.3px;}
.sb-nav{flex:1;overflow-y:auto;padding:14px 12px;}
.sb-g{margin-bottom:14px;}
.sb-h{display:flex;align-items:center;gap:9px;padding:8px 10px 6px;font-size:13.5px;font-weight:800;letter-spacing:-.2px;color:var(--sb-h1);}
.sb-h svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.9;flex-shrink:0;}
.sb-items{margin-left:19px;padding-left:9px;border-left:1.5px solid var(--sb-rail);display:flex;flex-direction:column;gap:2px;}
.sb-i{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;text-align:left;cursor:pointer;padding:7px 11px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--sb-item);transition:.13s;}
.sb-i:hover{background:var(--sb-item-h);color:var(--sb-ink);}
.sb-i.on{background:var(--sb-act-bg);color:var(--sb-act-tx);}
.sb-i svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.6;flex-shrink:0;}
.sb-i:hover svg,.sb-i.on svg{opacity:1;}
.sb-badge{margin-left:auto;font-size:9px;font-weight:800;background:var(--pri);color:#fff;padding:1px 6px;border-radius:5px;}
.sb-i.on .sb-badge,.sb-i .sb-badge.warn{background:rgba(255,255,255,.25);}
.sb-badge.warn{background:var(--red);}
.sb-ft{padding:12px 14px;border-top:1px solid var(--sb-line);display:flex;align-items:center;gap:10px;}
.sb-uav{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--sec));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.sb-un{font-size:12.5px;font-weight:700;color:var(--sb-brand);}.sb-ur{font-size:10.5px;color:var(--sb-uln);}
.sb-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:var(--sb-item-h);border:1px solid var(--sb-line);color:var(--sb-item);border-radius:20px;padding:5px 8px;cursor:pointer;font-size:11px;font-weight:700;}
.sb-toggle:hover{color:var(--sb-ink);}
.sb-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.top{display:flex;align-items:center;gap:14px;padding:15px 26px;background:var(--surface);border-bottom:1px solid var(--line);flex-shrink:0;}
.top-crumb{font-size:11.5px;color:var(--muted);font-weight:600;}
.top-title{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin-top:1px;}
.top-r{margin-left:auto;display:flex;align-items:center;gap:16px;}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600;}
.sync .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l);}
.top-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pri),var(--sec));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.content{flex:1;overflow-y:auto;padding:22px 26px 44px;}

/* ── KPI 카드 ── */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:16px;}
.kpis.k4{grid-template-columns:repeat(4,1fr);}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 15px;box-shadow:var(--sh);}
.kpi .kt{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.kpi .kt .cdot{width:6px;height:6px;border-radius:50%;}
.kpi .kv{font-size:20px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink);}
.kpi .ks{font-size:10.5px;color:var(--muted-2);margin-top:3px;}
.kpi.hero{background:linear-gradient(135deg,var(--pri),var(--pri-d));border-color:transparent;}
.kpi.hero .kt,.kpi.hero .kv{color:#fff;}.kpi.hero .kt{color:rgba(255,255,255,.85);}.kpi.hero .ks{color:rgba(255,255,255,.7);}
.mini-bar{height:4px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden;}.mini-bar>i{display:block;height:100%;border-radius:3px;background:var(--green);}
/* ── 탭(페이지) ── */
.tabs{display:flex;gap:22px;border-bottom:1.5px solid var(--line);margin-bottom:16px;}
.tab{padding:9px 1px 12px;font-size:13.5px;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;position:relative;display:flex;align-items:center;gap:6px;}
.tab:hover{color:var(--ink-2);}.tab.on{color:var(--pri-d);}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2.5px;background:var(--pri);border-radius:2px;}
.tab .lock{font-size:10px;color:var(--muted-2);font-weight:600;}
/* ── 필터바 + 컨트롤 ── */
.fbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;}
.fs{-webkit-appearance:none;appearance:none;border:1.5px solid var(--line-2);background:var(--surface);padding:8px 32px 8px 13px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%239AA4B5' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='1.5,3.5 5,7 8.5,3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
.fsrch{min-width:180px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--surface);padding:8px 14px 8px 34px;font-size:12.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none' stroke='%239AA4B5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='5.5' cy='5.5' r='4'/%3E%3Cline x1='8.5' y1='8.5' x2='11.5' y2='11.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 13px center;}
.fs:focus,.fsrch:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-l);}
/* ── 버튼 ── */
.btn{border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-weight:600;font-size:12.5px;padding:8px 14px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn:hover{border-color:var(--muted-2);}
.btn-pri{border:none;background:var(--pri);color:#fff;font-weight:700;font-size:12.5px;padding:9px 17px;border-radius:10px;cursor:pointer;box-shadow:0 3px 10px rgba(var(--pri-rgb),.32);}
.btn-pri:hover{background:var(--pri-d);}
.spacer{margin-left:auto;}
/* ── 카드 + 표 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden;}
table{border-collapse:collapse;width:100%;}
thead th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:12px 15px;background:var(--tbl-head-bg);border-bottom:1px solid var(--line-2);white-space:nowrap;}
tbody td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13px;}
tbody tr:last-child td{border-bottom:none;}tbody tr:hover td{background:var(--tbl-row-hover);}
.grp td{background:var(--tbl-row-grp)!important;padding:9px 15px;font-weight:800;color:var(--ink-2);font-size:12px;}
.grp .c{color:var(--muted);font-weight:600;margin-left:7px;}
.count{padding:12px 15px;font-size:12px;color:var(--muted);text-align:right;border-top:1px solid var(--line);}.count b{color:var(--ink);}
.tt{font-weight:700;color:var(--ink);}.td{color:var(--muted);font-size:12px;margin-top:2px;}
/* ── 상태 칩 ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap;}
.chip .d{width:6px;height:6px;border-radius:50%;}
.c-blue{background:var(--blue-l);color:#1e46b8;}.c-blue .d{background:var(--blue);}
.c-green{background:var(--green-l);color:#137a37;}.c-green .d{background:var(--green);}
.c-amber{background:var(--amber-l);color:#9a5b06;}.c-amber .d{background:var(--amber);}
.c-red{background:var(--red-l);color:#b91c1c;}.c-red .d{background:var(--red);}
.c-slate{background:var(--slate-l);color:#475569;}.c-slate .d{background:var(--slate);}
.c-indigo{background:var(--pri-l);color:var(--pri-d);}.c-indigo .d{background:var(--pri);}
/* ── 담당자·아바타 ── */
.mgr{display:flex;align-items:center;gap:8px;}
.av{width:26px;height:26px;border-radius:50%;background:var(--pri-l);color:var(--pri-d);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;}
/* ── 체크 라벨 / 토글칩 ── */
.fchk{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;}
.tgl{display:inline-flex;gap:4px;}
.tg{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--muted-2);cursor:pointer;user-select:none;}
.tg.on{background:var(--pri-l);border-color:transparent;color:var(--pri-d);}
/* ── 스위치(편집권한) ── */
.sw{width:36px;height:20px;border-radius:20px;background:var(--pri);position:relative;cursor:pointer;border:none;flex-shrink:0;}
.sw.off{background:var(--line-2);}
.sw::after{content:"";position:absolute;top:2px;left:18px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.sw.off::after{left:2px;}
/* ── 역할 배지 ── */
.role{padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;}
.role.admin{background:var(--pri-l);color:var(--pri-d);}.role.user{background:var(--slate-l);color:var(--slate);}
/* ── 섹션 헤더 / 번호칩 ── */
.sechead{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.3px;}
.rnum{width:23px;height:23px;border-radius:50%;background:var(--pri);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}
/* ── 뷰 pills / 부서 pill / 부서탭 ── */
.pills{display:flex;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;}
.pill{border:none;background:none;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;}
.pill.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.dptabs{display:flex;gap:3px;}
.dpt{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line-2);background:var(--surface);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;}
.dpt .d{width:8px;height:8px;border-radius:50%;}
.dpt.on{border-color:var(--pri);color:var(--pri-d);background:var(--pri-l);}
/* ── 모달 (공통) ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,35,51,.45);align-items:center;justify-content:center;z-index:100;}
.modal-overlay.open{display:flex;}
.modal-card{background:var(--surface);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:28px 26px 22px;}