
/* ── v-94 실무 기능 띠 · 급여도우미 네 갈래 ── */
.tlbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 16px;padding:6px 8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.tlbar .tlk{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--faint);margin:0 8px 0 6px;white-space:nowrap}
.tlbar .tlc{padding:7px 14px;border-radius:10px;font-size:13px;font-weight:700;color:var(--slate);text-decoration:none;white-space:nowrap;line-height:1.2}
.tlbar .tlc:hover{background:var(--field);color:var(--accent)}
.tlbar .tlc.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(4,112,255,.18)}
.head+.tlbar{margin-top:6px}
.pxown{margin:0 0 12px}
/* 왼쪽 수임처 목록 + 오른쪽 본문 */
.hr-wrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:16px;align-items:start}
.hr-side{position:sticky;top:calc(var(--tbh,74px) + 8px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px;box-shadow:var(--shadow);max-height:calc(100vh - var(--tbh,74px) - 24px);display:flex;flex-direction:column;gap:8px}
.hr-q{padding:8px 11px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--field);font-size:13px;color:var(--ink);font-family:var(--sans);width:100%;box-sizing:border-box}
.hr-q:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hr-own>summary{cursor:pointer;font-size:12px;color:var(--muted);padding:2px 4px}
.hr-own .qzquick{margin:6px 0 2px;gap:5px}
.hr-list{overflow:auto;min-height:120px;margin:0 -4px;padding:0 4px}
.hr-li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding:7px 9px;border-radius:10px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.hr-li b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-li span{grid-column:1;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-li i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.hr-li:hover{background:var(--field)}
.hr-li.on{background:var(--accent-soft);border-color:var(--accent-mid)}
.hr-main{min-width:0}
.pxv .mut:not(tr),.hr-wrap .mut:not(tr){color:var(--faint)}
.hr-intro{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-card);padding:22px 24px}
.hr-intro h3{margin:0 0 6px;font-size:17px}
/* 공통 머리 · 카드 · 절 */
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.tc-h{font-size:21px;font-weight:800;margin:0 0 2px;letter-spacing:-.02em}
.tc-h .ismall{font-weight:500;margin-left:6px}
.tc-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tc-acts .pill{margin-right:4px}
.tc-cards{margin:8px 0 6px}
.tc-cards .icard b{font-variant-numeric:tabular-nums;font-size:clamp(17px,1.55vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxhead h1{white-space:nowrap;flex:0 0 auto}
.tc-sec{font-size:15px;font-weight:800;margin:22px 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;letter-spacing:-.01em}
.tc-sec .n{font-size:11.5px;font-weight:500;color:var(--faint);letter-spacing:0}
.tc-why{border-radius:10px;padding:8px 12px;font-size:12.8px;margin:0 0 8px;background:var(--field);color:var(--slate)}
.tc-why.bad{background:var(--sev3-bg);color:var(--sev3)}
.tc-why.warn{background:var(--sev2-bg);color:var(--sev2)}
.tc-why.ok{background:var(--good-bg);color:var(--good)}
.tc-ul{margin:6px 0;padding-left:18px;font-size:12.8px;line-height:1.7;color:var(--slate)}
.tc-ul li{margin:3px 0}
.tc-notes{margin:18px 0 6px}
.tc-notes>summary{cursor:pointer;font-size:12.5px;color:var(--accent);font-weight:700}
.tc-seed{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--field);font-size:12.3px;line-height:1.7;color:var(--slate)}
/* 표 — 숫자는 오른쪽 */
table.gr.tc-list td,table.gr.tc-list th,table.gr.tc-sc td,table.gr.tc-sc th,table.gr.tc-neo td,table.gr.tc-neo th,table.gr.tc-old td,table.gr.tc-old th,
table.gr.tc-hist td,table.gr.tc-hist th,table.gr.hr-t td,table.gr.hr-t th{text-align:right;font-variant-numeric:tabular-nums}
table.gr.tc-list .l,table.gr.tc-sc .l,table.gr.tc-neo .l,table.gr.tc-old .l,table.gr.tc-hist .l,table.gr.hr-t .l,table.gr.tc-ppl .l,table.gr.tc-mon .l{text-align:left}
table.gr.tc-list td{vertical-align:middle;padding:8px 10px}
table.gr.tc-list sup,table.gr.tc-mon sup,table.gr.tc-old sup{font-size:9.5px;color:var(--sev2);margin-left:2px;font-weight:700}
table.gr.tc-sc tr.tc-now td{background:var(--accent-soft)}
table.gr.tc-ppl td,table.gr.tc-ppl th{text-align:center;vertical-align:middle;padding:6px 10px}
table.gr.tc-ppl tr.mut td{opacity:.55}
/* 월말 인원 — 진할수록 많음, 모서리 표시가 출처 */
table.gr.tc-mon th,table.gr.tc-mon td{text-align:center;padding:6px 4px;font-size:12.5px;font-variant-numeric:tabular-nums}
table.gr.tc-mon th.l{padding-left:10px;white-space:nowrap}
.tcc{position:relative;background:rgba(4,112,255,var(--a,.1));font-weight:700;color:var(--ink);cursor:default;min-width:30px}
.tcc[onclick]{cursor:pointer}
.tcc[onclick]:hover{outline:2px solid var(--accent);outline-offset:-2px}
.tcc.none{background:transparent;color:var(--faint);font-weight:400}
.tcc.g0::after,.tcc.p::after,.tcc.o::after,.tcc.fill::after{content:'';position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%}
.tcc.g0::after{background:var(--sky)} .tcc.p::after{background:var(--orange)} .tcc.o::after{background:var(--good)} .tcc.fill::after{background:var(--faint)}
.tcc.f{background:repeating-linear-gradient(135deg,rgba(4,112,255,.06) 0 4px,transparent 4px 8px);color:var(--muted);font-style:italic;font-weight:600}
.tca{white-space:nowrap;background:var(--surface-2)}
.tc-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin:6px 2px 0}
.tc-legend span{display:inline-flex;align-items:center;gap:5px}
.tc-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;background:rgba(4,112,255,.35)}
.tc-legend .lg.g0{background:var(--sky)} .tc-legend .lg.p{background:var(--orange)} .tc-legend .lg.o{background:var(--good)}
.tc-legend .lg.f{background:repeating-linear-gradient(135deg,rgba(4,112,255,.25) 0 3px,transparent 3px 6px)}
/* 지켜야 할 기준 — 세 칸 */
.tc-need{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.tc-nc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.tc-nc .k{font-size:24px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tc-nc .t{font-size:12.5px;font-weight:700;color:var(--ink);margin:2px 0 6px}
.tc-nc p{margin:0;font-size:12.2px;line-height:1.65;color:var(--slate)}
.tc-nc.bad{border-color:var(--sev3)} .tc-nc.bad .k{color:var(--sev3)}
.tc-nc.warn{border-color:var(--sev2)} .tc-nc.warn .k{color:var(--sev2)}
/* 인사카드 표시 칸(모달) */
.tcf{display:inline-flex;align-items:center;gap:4px;margin-right:10px;font-size:12.5px;cursor:pointer}
.tcf-print{display:none}
/* 인사카드 — 급여 추이 그림 */
.hr-chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:10px 12px 8px;box-shadow:var(--shadow)}
.hr-chart svg{width:100%;height:auto;display:block}
.hr-chart .hrg{stroke:var(--line);stroke-width:1}
.hr-chart .hrl{font-size:10.5px;fill:var(--faint);font-family:var(--sans)}
.hr-chart .hrb rect{fill:var(--accent-mid)}
.hr-chart .hrb.now rect{fill:var(--accent)}
.hr-chart .hrb.draft rect{opacity:.55}
.hr-chart .hrb:hover rect{fill:var(--sky)}
.hr-chart .hrx{font-size:10.5px;fill:var(--muted);font-family:var(--sans)}
.hr-chart .hrn{font-size:9.5px;fill:var(--faint);font-family:var(--sans)}
.hr-cap{font-size:11.8px;color:var(--muted);margin-top:2px}
table.gr.hr-t{min-width:900px}
table.gr.hr-t .tcf{margin:1px 0;font-size:12px}
table.gr.hr-t td{vertical-align:top;padding:8px 10px}
table.gr.hr-t .nw{white-space:nowrap}
table.gr.hr-t .ismall{line-height:1.45}
.hr-li,.hr-li *{text-decoration:none!important}
table.gr.hr-t td .pill{margin:2px 3px 0 0}
table.gr.hr-t tr.mut td{opacity:.62}
/* 퇴직정산 */
.rt-pick{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:4px 0 12px}
.rt-pick .cf{width:auto;min-width:170px}
.rt-pick select{min-width:220px}
.rt-calc .cin{grid-template-columns:repeat(2,minmax(0,1fr))}
.rt-calc .cf i{font-style:normal;font-size:10px;color:var(--sev2);background:var(--sev2-bg);border-radius:6px;padding:0 5px}
.rt-p{color:var(--sev3);font-weight:800}
.rt-m{color:var(--good);font-weight:800}
.rt-sheet{margin-top:6px}
table.gr.rt-st td{padding:7px 12px}
table.gr.rt-st td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.gr.rt-st th{background:var(--surface-2);color:var(--ink);font-size:12px;letter-spacing:0}
table.gr.rt-st tr.rt-tot td{background:var(--accent-soft);font-weight:700}
@media (max-width:1100px){.hr-wrap{grid-template-columns:1fr}.hr-side{position:static;max-height:none}.hr-list{max-height:260px}.tc-need{grid-template-columns:1fr}}
@media (max-width:760px){.tlbar{overflow-x:auto;flex-wrap:nowrap}.rt-calc .cin{grid-template-columns:1fr}}
@media print{.tlbar,.hr-side{display:none!important}}
