/* ============================================================
   공통 컴포넌트
   · 버튼 / 입력 / 칩 / 테이블 / 상태배지 / KPI / 차트 / 범례
   ============================================================ */
.btn{font-family:inherit;font-size:12.5px;font-weight:600;border-radius:8px;padding:7px 13px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.blue{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:4.5px 10px;font-size:11.5px}
.btn.danger{color:var(--vac);border-color:color-mix(in srgb,var(--vac) 40%,var(--line))}
.btn:disabled{opacity:.4;cursor:not-allowed}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:13px 16px}
.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:10.5px;letter-spacing:.08em;color:var(--muted);font-weight:600}
select.sel,input.inp,textarea.inp{font-family:inherit;border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:8px;padding:6.5px 10px;font-size:12.5px;min-width:110px}
input.inp[type=date]{font-variant-numeric:tabular-nums}
input.inp[type=color]{padding:2px;min-width:44px;height:30px}
textarea.inp{min-height:110px;font-size:12px;font-family:ui-monospace,monospace}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:6px;padding:2.5px 8px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:2px;flex:0 0 7px;display:inline-block}
table.tb{width:100%;border-collapse:collapse;font-size:12.5px}
.tb th{font-size:11px;color:var(--muted);font-weight:700;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap}
.tb td{padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;vertical-align:middle}
.tb tr:hover td{background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}
.tb .num{font-variant-numeric:tabular-nums}
.tb .r{text-align:right}
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px}
.st.run{background:color-mix(in srgb,var(--poc) 14%,transparent);color:var(--poc)}
.st.plan{background:color-mix(in srgb,var(--exp) 16%,transparent);color:color-mix(in srgb,var(--exp) 70%,var(--ink))}
.st.done{background:color-mix(in srgb,var(--etc) 18%,transparent);color:var(--ink2)}
.st.fix{background:var(--brand-blue-soft);color:var(--brand-blue)}
.st.est{background:transparent;color:var(--ink2);border:1px dashed var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.kpi .k{font-size:11px;color:var(--muted);font-weight:700}
.kpi .v{font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi .d{font-size:11.5px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.grid2b{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
.bars-v{display:flex;align-items:flex-end;gap:8px;height:180px;padding:6px 4px 0;position:relative}
.bars-v .target{position:absolute;left:0;right:0;border-top:2px dashed color-mix(in srgb,var(--ink2) 55%,transparent);font-size:10px;color:var(--muted)}
.bv{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bv i{width:100%;max-width:30px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--accent) 78%,transparent)}
.bv i.now{background:var(--accent);outline:2px solid color-mix(in srgb,var(--today) 80%,transparent)}
.bv i.fut{background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-bottom:0}
.bv .val{font-size:10px;color:var(--ink2);font-weight:700;font-variant-numeric:tabular-nums}
.bv .lb{font-size:10.5px;color:var(--muted)}
.bars-h{display:flex;flex-direction:column;gap:9px;padding:4px 2px}
.bh{display:grid;grid-template-columns:110px 1fr 60px;gap:10px;align-items:center;font-size:12px}
.bh .lb{color:var(--ink2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh .tr2{height:13px;background:var(--line2);border-radius:4px;overflow:hidden}
.bh .tr2 i{display:block;height:100%;border-radius:4px 0 0 4px}
.bh .vv{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:700;font-size:11.5px}
.heat{border-collapse:collapse;font-size:11px}
.heat th{font-weight:700;color:var(--muted);padding:5px 6px;text-align:center;font-size:10.5px}
.heat td{text-align:center;padding:0;border:2px solid var(--surface)}
.heat td .c{display:block;padding:6px 2px;border-radius:5px;font-weight:600;min-width:33px;font-variant-numeric:tabular-nums}
.heat td.name{font-weight:600;color:var(--ink2);text-align:left;padding:0 8px;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:11.5px;color:var(--ink2);padding:10px 16px;border-top:1px solid var(--line2)}
.legend .it{display:flex;align-items:center;gap:6px}
.legend .sw{width:13px;height:13px;border-radius:4px}

/* ============================================================
   Resource Planning 그리드 · 모달 · 토스트 · 탭 · 반응형
   ============================================================ */
/* RP grid */
.rp-wrap{overflow-x:auto}
.rp{border-collapse:separate;border-spacing:0;font-size:11.5px;min-width:100%}
.rp th,.rp td{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);padding:0}
.rp thead th{background:var(--surface2);color:var(--muted);font-size:10.5px;font-weight:700;position:sticky;top:0;z-index:4}
.rp .fix-col{position:sticky;background:var(--surface);z-index:5}
.rp thead .fix-col{background:var(--surface2);z-index:6}
.rp .c0{left:0;min-width:32px;text-align:center}.rp .c1{left:32px;min-width:84px}.rp .c2{left:116px;min-width:56px}.rp .c3{left:172px;min-width:50px}.rp .c4{left:222px;min-width:46px}.rp .c5{left:268px;min-width:46px}.rp .c6{left:314px;min-width:48px;border-right:2px solid var(--line)}
.rp .mh{padding:5px 6px;text-align:left}
.rp thead .dc{min-width:32px;width:32px;text-align:center;padding:3px 0;font-variant-numeric:tabular-nums}
.rp thead .dow{font-size:9.5px;padding-bottom:5px}
.rp td.meta{padding:7px 8px;white-space:nowrap}
.rp td.meta.pct{font-weight:800;font-variant-numeric:tabular-nums}
.rp td.meta.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)}
.rp .we{background:var(--cell-weekend)}.rp .hol{background:var(--cell-holiday)}
.rp thead .sun{color:var(--vac)}.rp thead .sat{color:var(--brand-blue)}.rp thead .hol{color:var(--vac)}
.rp thead .today-col .dnum{background:var(--today);color:#fff;border-radius:5px;padding:1px 4px;font-weight:800}
.rp tbody .today-col{box-shadow:inset 2px 0 0 var(--today),inset -2px 0 0 var(--today)}
.rp td.day{height:34px;min-width:32px;position:relative;cursor:pointer}
.seg{position:absolute;inset:4px 0px;display:flex;align-items:center;overflow:hidden}
.seg.start{border-radius:5px 0 0 5px;left:2px}.seg.end{border-radius:0 5px 5px 0;right:2px}.seg.start.end{border-radius:5px}
.seg .cap{font-size:9.5px;font-weight:700;white-space:nowrap;padding-left:5px;position:relative;z-index:2}
.seg.est{border-top:1.5px dashed;border-bottom:1.5px dashed}
.seg.est.start{border-left:1.5px dashed}.seg.est.end{border-right:1.5px dashed}
.half{position:absolute;left:0;right:0;display:flex;align-items:center;overflow:hidden}
.half.t{top:2px;height:14px}.half.b{bottom:2px;height:14px}
.ovl{position:absolute;top:-5px;right:-4px;z-index:6;background:var(--warn-bd);color:#4A3400;font-size:9px;font-weight:800;border-radius:99px;padding:0 4px;border:1.5px solid var(--surface)}
/* modal & toast */
.ovl-bg{position:fixed;inset:0;background:rgba(10,18,30,.45);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.ovl-bg.on{display:flex}
.modal{width:560px;max-width:96vw;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(10,18,35,.3);overflow:hidden}
.modal .mh{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.modal .mh h3{margin:0;font-size:13.5px}
.modal .mh .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:15px;background:none;border:0}
.modal .mb{padding:14px 16px;max-height:62vh;overflow:auto}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line2);background:var(--surface2)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px}
.form .fw{grid-column:1/-1}
.f label .req{color:var(--vac)}
.alert{border:1px solid var(--warn-bd);background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:10px 13px;font-size:12px;margin-top:10px}
.alert.err{border-color:var(--vac);background:color-mix(in srgb,var(--vac) 10%,transparent);color:var(--vac)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--nav-active);color:var(--surface);padding:10px 18px;border-radius:10px;font-size:12.5px;font-weight:600;z-index:200;box-shadow:var(--shadow);opacity:0;transition:opacity .25s;pointer-events:none;max-width:80vw}
:root[data-theme="dark"] .toast{background:#EAEDF0;color:#101820}
.toast.on{opacity:1}
.tabs{display:flex;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--line);background:var(--surface);border-radius:var(--radius) var(--radius) 0 0}
.tab{font-family:inherit;border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;padding:9px 14px;cursor:pointer;border-radius:8px 8px 0 0;border-bottom:2px solid transparent}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:10px 14px;font-size:12.5px;color:var(--ink2)}
.hint{font-size:11px;color:var(--muted)}
.duo{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;align-items:start}
.tg{width:34px;height:19px;border-radius:99px;background:var(--poc);position:relative;display:inline-block;cursor:pointer;vertical-align:middle}
.tg::after{content:"";position:absolute;top:2.5px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.tg.off{background:var(--etc)}.tg.off::after{right:auto;left:3px}
.drop{border:1.5px dashed color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent-soft) 55%,transparent);border-radius:12px;padding:14px;font-size:12.5px;color:var(--ink2)}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.grid2b,.duo{grid-template-columns:1fr}}