:root{
  --on-pri:#FFFFFF;--dim:#F3F4F6;--paper:#FFFFFF;--paper-ink:#1B2129;--paper-mute:#66707D;--paper-mute-2:#7A828D;--paper-line:#C9D2DD;--paper-head:#F2F5F9;--paper-tot:#F6F9FC;--paper-accent:#2456B3;--paper-red:#B23030;--paper-green:#1C7A44;

  --pri-50:#EFF5FE;--pri-100:#D6E6FC;--pri-400:#4A8FEB;--pri:#175CD3;--pri-700:#12489F;
  --ink:#111827;--ink-2:#4B5563;--ink-3:#6B7280;--ink-4:#9CA3AF;
  --bg:#F6F7F9;--surface:#FFFFFF;--surface-2:#FAFBFC;--line:#E5E7EB;--line-2:#D1D5DB;
  --ok:#0F7B4F;--ok-bg:#E6F5EE;--warn:#B45309;--warn-bg:#FEF3E2;
  --err:#B42318;--err-bg:#FEECEB;--lock:#5B21B6;--lock-bg:#F3EEFE;--ok-ink:#085041;--warn-ink:#7C3F06;--err-ink:#7A1E15;--ok-bd:#A8DCC4;--warn-bd:#F5D9A8;--err-bd:#F5C2BE;--lock-bd:#CBB6F5;--hl:#FFF3C4;--dim:#F3F4F6;
  --f:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;
  --row:36px;--ctl:32px;--rad:6px;--nav-w:216px;--top-h:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit}
button{cursor:pointer;border:none;background:none}
table{border-collapse:collapse;width:100%}
.wrap{display:flex;min-height:100vh}
/* 사이드바 */
.nav{width:var(--nav-w);background:var(--surface);border-right:1px solid var(--line);padding:14px 8px;flex-shrink:0}
.nav .brand{display:flex;align-items:center;gap:8px;padding:0 8px 16px}
.nav .brand b{font-size:15px;color:var(--pri);letter-spacing:-.4px}
.nav .brand .beta{font-size:11px;color:var(--ink-4);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.nav .g{font-size:11px;color:var(--ink-4);padding:12px 10px 5px;font-weight:500}
.nav a{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--rad);font-size:13px;color:var(--ink-2);text-decoration:none;margin-bottom:1px}
.nav a.sub{padding-left:22px;font-size:12px}
.nav a.on{background:var(--pri-50);color:var(--pri-700);font-weight:500}
.nav a .n{margin-left:auto;font-size:11px;color:var(--ink-4)}
/* 본문 */
.main{flex:1;min-width:0;padding:20px 28px 60px}
.gnb{display:flex;justify-content:flex-end;margin-bottom:10px}
.flag{background:var(--err-bg);border:1px solid var(--err-bd);color:var(--err);font-size:12px;font-weight:500;padding:6px 12px;border-radius:20px;cursor:pointer}
.crumb{font-size:11px;color:var(--ink-4);margin-bottom:8px}
.hdr{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hdr h1{font-size:20px;font-weight:600;letter-spacing:-.3px}
.hdr .desc{font-size:12px;color:var(--ink-3);margin-top:4px}
.hdr .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{height:var(--ctl);padding:0 12px;border-radius:var(--rad);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.btn.sm{height:26px;padding:0 9px;font-size:12px}
.btn.gh{border-color:transparent;background:transparent;color:var(--ink-3)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{background:var(--err);border-color:var(--err);color:var(--on-pri)}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:10px 12px;cursor:pointer}
.kpi.on{border-color:var(--pri-400);background:var(--pri-50)}
.kpi .l{font-size:11px;color:var(--ink-3)}
.kpi .v{font-size:20px;font-weight:600;letter-spacing:-.4px;line-height:1.25;margin-top:2px}
.kpi.on .v{color:var(--pri-700)}
.kpi .s{font-size:11px;color:var(--ink-4)}
/* 칩 */
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:11px;color:var(--ink-3)}
.chip{border:1px solid var(--line-2);border-radius:20px;padding:3px 10px;background:var(--surface);cursor:pointer;font-size:11px;color:var(--ink-2)}
.chip.warn{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn)}
.chip.err{border-color:var(--err-bd);background:var(--err-bg);color:var(--err)}
.chip.ok{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok)}
.chip.on{border-color:var(--pri-400);background:var(--pri-50);color:var(--pri-700);font-weight:500}
/* 그룹 카드 */
.grp{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.grp .gh{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid transparent}
.grp.open .gh{border-bottom-color:var(--line)}
.grp .gh .nm{font-size:14px;font-weight:500}
.grp .gh .meta{font-size:11px;color:var(--ink-4)}
.grp .gh .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.grp .gb{padding:0}
/* 표 */
.tbl{width:100%;font-size:13px}
.tbl th{text-align:left;padding:0 10px;height:32px;background:var(--surface-2);color:var(--ink-3);font-weight:500;font-size:11px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:0 10px;height:var(--row);border-bottom:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--pri-50)}
.tbl td.k{color:var(--ink);font-weight:500}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .id{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-3)}
.tbl tr.sel td{background:var(--pri-50)}
/* 배지 */
.b{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:4px;font-size:11px;font-weight:500}
.b.ok{background:var(--ok-bg);color:var(--ok)}.b.warn{background:var(--warn-bg);color:var(--warn)}
.b.err{background:var(--err-bg);color:var(--err)}.b.info{background:var(--pri-50);color:var(--pri-700)}
.b.mut{background:var(--dim);color:var(--ink-3)}.b.lock{background:var(--lock-bg);color:var(--lock)}
/* 스텝 */
.steps{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:14px;flex-wrap:wrap;gap:2px}
.steps .s{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-4);cursor:pointer;padding:2px 6px;border-radius:var(--rad);white-space:nowrap}
.steps .s:hover{background:var(--surface-2)}
.steps .s .n{width:21px;height:21px;border-radius:50%;background:var(--dim);color:var(--ink-4);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.steps .s.done .n{background:var(--ok-bg);color:var(--ok)}.steps .s.done{color:var(--ink-2)}
.steps .s.on .n{background:var(--pri);color:var(--on-pri)}.steps .s.on{color:var(--pri-700);font-weight:600}
.steps .bar{flex:1;height:1px;background:var(--line);margin:0 6px;min-width:10px}
.steps .div{width:1px;height:22px;background:var(--line-2);margin:0 10px}
.steps .mode{font-size:11px;color:var(--ink-4);font-weight:500;padding:0 4px}
/* 패널 */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
.panel>.ph{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.panel>.ph .t{font-size:12px;font-weight:600;color:var(--ink-2)}
.panel>.ph .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.panel>.pb{padding:14px}
.panel>.pb.flush{padding:0}
.note{font-size:12px;color:var(--ink-3);line-height:1.8}
.note b{color:var(--ink);font-weight:500}
.hint{font-size:11px;color:var(--ink-4);line-height:1.7;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.box{border-radius:var(--rad);padding:10px 12px;font-size:12px;line-height:1.75}
.box.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-ink)}
.box.err{background:var(--err-bg);border:1px solid var(--err-bd);color:var(--err-ink)}
.box.info{background:var(--pri-50);border:1px solid var(--pri-100);color:var(--pri-700)}
.box.ok{background:var(--ok-bg);border:1px solid var(--ok-bd);color:var(--ok-ink)}
/* 입력 */
.inp{height:var(--ctl);border:1px solid var(--line-2);border-radius:var(--rad);padding:0 9px;font-size:13px;background:var(--surface);color:var(--ink);width:100%}
.inp.num{text-align:right;font-variant-numeric:tabular-nums}
.inp.ro{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
.stepnote{font-size:11px;color:var(--ink-4);margin-top:2px}
.inp.sm{height:26px;font-size:12px;padding:0 7px}
.inp:focus{outline:2px solid var(--pri-100);border-color:var(--pri-400)}
.inp:disabled{background:var(--surface-2);color:var(--ink-4)}
.fg{display:grid;grid-template-columns:120px 1fr;gap:10px 12px;align-items:center;font-size:13px}
.fg label{color:var(--ink-2);font-size:12px}
.req{color:var(--err)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* 모달·드로어 */
.ov{position:fixed;inset:0;background:rgba(17,24,39,.4);z-index:80;display:flex;align-items:center;justify-content:center;padding:24px}
.mdl{background:var(--surface);border-radius:10px;width:560px;max-width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(17,24,39,.2)}
.mdl.wide{width:880px}
.mdl .mh,.drw .mh{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-shrink:0;background:var(--surface);border-radius:10px 10px 0 0}
.drw .mh{border-radius:0}
.mdl .mh h3,.drw .mh h3{font-size:15px;font-weight:600;line-height:1.5;min-width:0}
.mdl .mh .x,.drw .mh .x{margin-left:auto;color:var(--ink-4);font-size:15px;flex-shrink:0;width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mdl .mh .x:hover,.drw .mh .x:hover{background:var(--surface-2);color:var(--ink-2)}
.mdl .mb,.drw .mb{padding:18px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;background:var(--bg)}
.mdl .mb>.panel:last-child,.drw .mb>.panel:last-child{margin-bottom:0}
.mdl .mf,.drw .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;justify-content:flex-end;background:var(--surface);flex-shrink:0;border-radius:0 0 10px 10px;flex-wrap:wrap}
.drw .mf{border-radius:0}
.drw{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:100%;background:var(--surface);border-left:1px solid var(--line-2);z-index:81;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(17,24,39,.08)}

.undo{display:flex;align-items:center;gap:6px;margin-right:10px}
.undo b{font-size:11px;color:var(--ink-4);font-weight:400}
.undo button{height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:5px;background:var(--surface);font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.undo button:hover:not(:disabled){border-color:var(--pri);color:var(--pri);background:var(--pri-50)}
.undo button:disabled{opacity:.4;cursor:default}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--on-pri);font-size:13px;padding:10px 18px;border-radius:22px;z-index:90;box-shadow:0 6px 20px rgba(17,24,39,.25)}
.empty{padding:40px 20px;text-align:center;color:var(--ink-4);font-size:13px;line-height:1.9}
.empty b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:4px;font-weight:500}
.dt{font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.sub{font-size:11px;color:var(--ink-4)}
.tabs{display:flex;gap:1px;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.tabs button{padding:8px 12px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent}
.tabs button.on{color:var(--pri);border-bottom-color:var(--pri);font-weight:500}
.sp{margin-left:auto}
.hl{background:var(--hl);border-radius:2px;padding:0 2px}
/* ══ 셸 v2 — 시각 폴리시 · 전역 검색 · 상단바 ══ */
.gnb{display:flex;align-items:center;gap:10px;justify-content:flex-start;margin-bottom:14px;
 position:sticky;top:0;z-index:60;background:var(--bg);padding:10px 0 8px;border-bottom:1px solid var(--line)}
.gnb .pgttl{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.gnb .pgttl .ico{font-size:15px}
.gsearch{flex:1;max-width:430px;height:32px;display:flex;align-items:center;gap:8px;padding:0 11px;
 border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--ink-4);
 font-size:12px;cursor:pointer;user-select:none}
.gsearch:hover{border-color:var(--pri);color:var(--ink-3)}
.gsearch .kbd{margin-left:auto;font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--surface-2);color:var(--ink-4)}
.gnb .sp2{margin-left:auto}
/* 사이드바 다듬기 */
.nav a{display:flex;align-items:center;gap:7px;border-radius:6px;margin:1px 8px;padding:6px 10px;transition:background .1s}
.nav a:hover{background:var(--pri-50)}
.nav a.on,.nav a.sub.on{background:var(--pri-50);color:var(--pri-700);font-weight:600;box-shadow:inset 2px 0 0 var(--pri)}
.nav .g{margin:12px 18px 4px;font-size:11px;letter-spacing:.8px}
.nav a .mi{width:16px;height:16px;flex-shrink:0;color:var(--ink-4);vertical-align:-3px}
.nav a:hover .mi{color:var(--ink-3)}
.nav a.on .mi{color:var(--pri)}
.gnb .pgttl .mi{width:17px;height:17px;color:var(--ink-3);vertical-align:-3px}
.pal .it .mi{width:15px;height:15px;color:var(--ink-4);vertical-align:-2px}
/* 표·카드 폴리시 */
.tbl tbody tr{transition:background .08s}
.tbl tbody tr:hover{background:var(--pri-50)}
.tbl thead th{position:sticky;top:0;background:var(--surface-2);z-index:2}
.panel{box-shadow:0 1px 2px rgba(17,24,39,.04)}
.kpi{transition:box-shadow .12s,border-color .12s}
.kpi:hover{border-color:var(--pri-400);box-shadow:0 2px 8px rgba(23,92,211,.10)}
.btn.pri{box-shadow:0 1px 2px rgba(23,92,211,.25)}
/* 검색 팔레트 */
.pal-ov{position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:120;display:flex;justify-content:center;align-items:flex-start;padding-top:11vh}
.pal{width:560px;max-width:92vw;background:var(--surface);border-radius:12px;box-shadow:0 24px 64px rgba(17,24,39,.28);overflow:hidden}
.pal input{width:100%;height:48px;border:none;outline:none;padding:0 18px;font-size:15px;font-family:inherit;border-bottom:1px solid var(--line)}
.pal .list{max-height:52vh;overflow:auto;padding:6px}
.pal .gr{font-size:11px;color:var(--ink-4);letter-spacing:.6px;padding:8px 12px 3px;font-weight:600}
.pal .it{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:13px}
.pal .it .mi{width:20px;text-align:center}
.pal .it .d{font-size:11px;color:var(--ink-4);margin-left:auto;white-space:nowrap}
.pal .it.sel{background:var(--pri-50);color:var(--pri-700)}
.pal .ft{padding:8px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-4);display:flex;gap:14px;background:var(--surface-2)}
.pal .empty2{padding:28px;text-align:center;color:var(--ink-4);font-size:13px}



























































































































































































































































/* ── 자료 등록 〔D-178-1〕 ── */
.dcbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* ── 거르개 두 줄 〔D-187-12〕 ─────────────────────────────────
   지적: 「자료등록에서 전체로 하면 버튼이 아래칸으로 밀려나옴」.
   한 줄에 드롭다운 둘·칩 다섯·찾는 칸·보기 칩 셋을 다 담았던 탓이다 —
   건물이 「전체 (3곳)」이 되면 글이 길어져 **오른쪽 칩 하나가 혼자 다음 줄로 떨어졌다.**
   위 줄은 「어디를 볼까」(건물·갈래·찾는 말), 아래 줄은 「어떻게 볼까」(칩·보기)로 가르고,
   ① 찾는 칸이 위 줄의 남는 자리를 먹어(flex:1 1 · min-width:0) 줄이 늘 꽉 차게 하고
   ② 아래 줄의 묶음 둘(.dcset·.dcvw)이 각자 통째로 접히게 해서
   좁은 폭에서도 **단추 하나만 외따로 떨어지는 모습**이 생기지 않게 한다. */
.dcbar2{margin-top:-4px}
/* 〔D-187-10〕 「누르면 어떻게 되는지」 — 설명 줄과 나란히 서되 한 눈에 갈라 보이게 */
.dchow{color:var(--ink-4)}
.dchow b{color:var(--ink-3);font-weight:600}
.dcbar .dcq{flex:1 1 200px;min-width:0;max-width:none}
.dcbar .dcset{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.dcbar .dcvw{margin-left:auto;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 〔D-180-1〕 건물 채움 카드(.dcfill/.dcf)는 표로 바뀌었다 — 카드는 3곳에서만 보기 좋았다 */
.dcblock{margin-bottom:12px}
.dcblock ul{margin:6px 0 0 0;padding:0;list-style:none}
.dcblock li{font-size:12px;line-height:1.8;padding-left:12px;position:relative}
.dcblock li:before{content:"·";position:absolute;left:2px}
.dcgrp .gh .cnt{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.dcnm{color:var(--ink);font-weight:500}
.dcuse{color:var(--ink-3);font-size:12px}
.dcdz{border:2px dashed var(--line-2);border-radius:10px;padding:26px;text-align:center;background:var(--surface-2)}
.dcdz.on{border-color:var(--pri);background:var(--pri-50)}
.dcdz .t{font-size:13px;color:var(--ink-2)}
.dcpick{display:none}
.dcmat{width:100%;font-size:12px;table-layout:fixed;border-collapse:collapse}   /* 〔D-186-4〕 칸마다 그리던 테두리를 합친다 —
   따로 그리면 붙박이 첫 열의 배경이 이웃 칸의 선을 덮어 **표 아래 테두리가 끊겨** 보였다 */
.dcmat th,.dcmat td{border:1px solid var(--line);padding:0 10px;height:38px;text-align:center;white-space:nowrap}
.dcmat th{background:var(--surface-2);color:var(--ink-3);font-weight:500;font-size:11px}
.dcmat td.k{text-align:left;color:var(--ink);font-weight:500}
.dcmat td.g{text-align:left;background:var(--surface-2);color:var(--ink-3);font-size:11px;font-weight:500}
.dcmat td.miss{background:var(--err-bg);color:var(--err);font-weight:600}
.dcmat td.none{color:var(--ink-4)}
.dcmat td.part{background:var(--warn-bg);color:var(--warn);font-weight:600}
.dcmat td.has{background:var(--ok-bg);color:var(--ok);font-weight:600}
/* ── 건물이 몇 곳이든 견디게 〔D-180〕 ── */
/* 전체 한 줄 — 화면 맨 위에서 「지금 어디까지 왔나」 */
.dcsum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:9px 14px;margin-bottom:10px;font-size:12px;color:var(--ink-3)}
.dcsum b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.dcsep{width:1px;height:16px;background:var(--line-2);margin:0 2px}
/* 건물 채움 표 — 카드가 하던 일(큰 숫자)을 칸 안에서 한다 */
.dcfil td.dcn{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dcfil td.dcn small{font-size:11px;color:var(--ink-4);font-weight:500}
.dcfil td.dcn.err{color:var(--err)}
.dcfil td.dcn.ok{color:var(--ok)}
.dclink{color:var(--pri-700);cursor:pointer;font-weight:500}
/* 막히는 일 — 막는 정도로 가른 묶음 머리 */
.dcsev td{background:var(--surface-2);color:var(--ink-3);font-size:11px;font-weight:500}
.dcbex td{background:var(--surface-2);white-space:normal;padding:10px 12px;height:auto}
.dcbb{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--surface);padding:2px 4px 2px 10px;margin:0 6px 6px 0;font-size:12px;color:var(--ink-2)}
/* 건물 × 자료 — 건물 이름 열을 고정하고 세로로만 흐른다.
   열 클래스는 b가 아니라 nm이다 — 공용 배지 클래스 .b(display:inline-flex,height:20px)와
   이름이 겹치면 이 칸까지 가로 배치를 물려받아 이름·배지가 나란히 붙고 두 번째 줄이 잘린다. */
.dcmat th.nm{width:32%}
.dcmat td.nm{text-align:left;white-space:normal;word-break:keep-all;line-height:1.4;padding:7px 10px}
.dcmat td.nm .sub{display:block;margin-top:2px}
.dcmat th.nm,.dcmat td.nm{position:sticky;left:0;background:var(--surface);z-index:1}
.dcmat thead th.nm{background:var(--surface-2);z-index:4}
.dcmat td.cell small{font-size:11px;color:var(--ink-4);font-weight:500}
.dcmex td{background:var(--surface-2);text-align:left;white-space:normal;padding:10px 12px;height:auto}
/* ── 올린 자료가 어디로 갔는지 〔D-183-2·3〕 — 방금 올린 띠 · 노란 줄 · 파일 이름 · 자리 없는 붉은 줄 ── */
.dcjust{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--rad);padding:10px 14px;margin-bottom:12px}
.dcjust .x{cursor:pointer;color:var(--ink-3);font-size:14px;padding:0 4px}
.dcjr{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px dashed var(--line-2);font-size:12px}
.dcjr .fn{font-weight:600;color:var(--ink);max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl tr.dcnew td{background:var(--warn-bg)}
.tbl td.dcst{white-space:normal;height:auto;padding-top:6px;padding-bottom:6px;line-height:1.4}
.dcfn{display:block;margin-top:2px;font-size:12px;color:var(--pri-700);cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:300px}
.tbl tr.dcnos td{background:var(--err-bg)}
.tbl tr.dcnos td .inp{border-color:var(--err)}
/* ── 매트릭스 감싸개 〔D-186-4〕 — 가로 스크롤 안에서도 표의 네 변이 다 보이게 ── */
.dcmatbox{padding-bottom:14px}
.dcmatbox .dcmat{border:1px solid var(--line)}
.dcul{margin:6px 0 4px 16px;padding:0;line-height:1.7}
.dcul li{list-style:disc}
/* ── 한 파일 여러 자료 〔D-185〕 ── */
.dcalso .x{cursor:pointer;margin-left:2px}
.dcmn th.p46{width:46%}
/* ── 건별 목록 · 직접 넣기 〔D-184〕 ── */
.dcmn th.p8{width:8%}.dcmn th.p40{width:40%}.dcmn th.p22{width:22%}
.dcfn2{color:var(--pri-700);cursor:pointer}
.dcfill{display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.dcfill .inp{width:180px}
.dcrd tr.fill td{background:var(--ok-bg)}
/* ── 반영 내역 · 내려받기 · 달별 목록 〔D-181〕 ── */
/* 반영 내역 — 모달 안의 세 층. 층 머리는 표와 같은 눈금을 쓴다 */
.dcly{font-size:12px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px;
  margin:14px 0 6px}
.dcly:first-child{margin-top:0}
.dcly .no{width:18px;height:18px;border-radius:50%;background:var(--dim);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.dcly .r{margin-left:auto;display:flex;align-items:center;gap:6px;font-weight:500}
/* 읽은 것 표 — 표 폭 규율: 비율 합 100% 〔L0-5 6.12〕 */
.dcrd{width:100%;font-size:12px;table-layout:fixed;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.dcrd th{text-align:left;padding:0 10px;height:30px;background:var(--surface-2);color:var(--ink-3);
  font-weight:500;font-size:11px;border-bottom:1px solid var(--line)}
.dcrd td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top;white-space:normal;word-break:keep-all;line-height:1.5}
.dcrd tr:last-child td{border-bottom:none}
.dcrd td.k{color:var(--ink);font-weight:500}
.dcrd td .sub{display:block;font-size:11px;color:var(--ink-4);margin-top:2px}
/* 비율 이름은 p를 붙인다 — 공용 .w26 등은 px에 !important라 이름이 겹치면 26px로 눌린다 */
.dcrd th.p22{width:22%}.dcrd th.p26{width:26%}.dcrd th.p34{width:34%}.dcrd th.p18{width:18%}
.dcrd tr.miss td{background:var(--err-bg)}
.dcrd tr.miss td.k{color:var(--err)}
.dcrd tr.miss td .sub{color:var(--err-ink)}
.dcrd tr.edit td{background:var(--warn-bg)}
.dcrd tr.edit td .sub{color:var(--warn-ink)}
.dcrd tr.na td{background:var(--dim)}
.box.mut{background:var(--dim);border:1px solid var(--line);color:var(--ink-2)}
/* 달별 목록 — 자료 한 줄을 펴면 달이 늘어선다 */
.dcmx td{background:var(--surface-2);white-space:normal;padding:10px 12px;height:auto}
.dcmn{width:100%;font-size:12px;table-layout:fixed;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.dcmn th{text-align:left;padding:0 10px;height:28px;background:var(--surface-2);color:var(--ink-3);
  font-weight:500;font-size:11px;border-bottom:1px solid var(--line)}
.dcmn td{padding:0 10px;height:32px;border-bottom:1px solid var(--line);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcmn tr:last-child td{border-bottom:none}
.dcmn td.k{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.dcmn tr.none td{background:var(--err-bg)}
.dcmn tr.none td.k{color:var(--err)}
.dcmn th.p14{width:14%}.dcmn th.p36{width:36%}.dcmn th.p20{width:20%}
.dcmn th.p12{width:12%}.dcmn th.p18{width:18%}
/* 〔D-188-2 · D-188-7〕 건별 목록·달 칸 목록이 쓰는 비율 — 표 폭 규율: 한 표의 합이 100% 〔L0-5 6.12〕 */
.dcmn th.p6{width:6%}.dcmn th.p10{width:10%}.dcmn th.p16{width:16%}
.dcmn th.p26{width:26%}.dcmn th.p30{width:30%}
/* 〔D-188-2〕 지적 「표도 UI 개선해서 유저가 쉽게 이해하도록」 —
   전에는 머리 줄의 굵은 글과 파란 「한 건 더 올리기」가 크게 서고 정작 목록이 눈에 안 들어왔다.
   머리줄은 한 줄로 낮게 깔고(주인공은 표다) 단추도 작게 둔다. */
.dcmnh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.dcmnh b{color:var(--ink-2)}
.dccar{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.dccar .ar{color:var(--ink-4);font-size:11px;width:9px;display:inline-block}
/* 내려받기 고르는 창 — 무엇을 받을지 한 줄에 하나 */
.dcpk{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;margin-bottom:6px;cursor:pointer;background:var(--surface)}
.dcpk.on{border-color:var(--pri-400);background:var(--pri-50)}
.dcpk b{font-size:12px;font-weight:600;color:var(--ink);display:block}
.dcpk .sub{font-size:11px;color:var(--ink-3);line-height:1.6;display:block;margin-top:2px}
.dcpk .n{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;flex-shrink:0}
.dcfold{border:1px dashed var(--line-2);border-radius:var(--rad);background:var(--surface-2);
  padding:8px 11px;font-size:11px;color:var(--ink-3);line-height:1.8;
  font-family:ui-monospace,Menlo,monospace}
/* 달마다 오는 자료 모아 보기 — 건물이 행 · 달이 열 〔D-180-3과 같은 축〕 */
.dcmat td.mm{font-variant-numeric:tabular-nums}
.dcmat td.mm.part{background:var(--warn-bg);color:var(--warn)}
/* 〔D-188-7〕 칸이 눌린다 — 칸 전체가 손잡이인 곳은 글자를 물들이지 않고
   **손가락 커서와 테두리**로 알린다 〔D-187-10 셋째 규칙 · .dcmat td.cell과 같은 모습〕 */
.dcmat td.mm.dcclk{cursor:pointer}
.dcmat td.mm.dcclk:hover{box-shadow:inset 0 0 0 2px var(--pri-400)}
/* ── 원본 미리보기 〔D-187-B〕 — 그림은 팝업 안에서 바로 보인다 ── */
.dcimg{display:block;margin-top:6px;max-width:100%;max-height:320px;
  border:1px solid var(--line);border-radius:var(--rad);background:var(--surface-2)}
.dcraw{display:block}
/* ── 눌리는 글자 〔D-187-10〕 ─────────────────────────────────
   지적: 「자료등록에서 텍스트가 클릭이 되는 것과 안 되는 것의 글자색이나 표시 등 UI 차이가 있어야 함」.
   밑줄이 hover에만 있으면 **가만히 있을 때는 구분이 안 된다** — 마우스를 대 봐야 안다.
   그래서 규칙을 둘로 못 박고, 이 화면의 모든 눌리는 글자를 여기에 맞춘다:
     · 파란 글자 + 옅은 실선 밑줄 = 눌러서 **다른 자리로 간다** (.dclink · .dcfn · .dcfn2)
     · 잿빛 글자 + 점선 밑줄 + ▸ = 눌러서 **이 자리에서 펼친다** (.dccar)
   줄·칸 전체가 눌리는 곳은 글자를 물들이지 않고 **줄에** 손가락 커서와 hover 배경으로 알린다
   (표 안에서 파란 글자를 늘리면 어디를 눌러야 하는지가 도리어 흐려진다). */
.dclink,.dcfn,.dcfn2{color:var(--pri-700);cursor:pointer;font-weight:500;
  text-decoration:underline;text-decoration-color:var(--pri-400);
  text-decoration-thickness:1px;text-underline-offset:2px}
.dclink:hover,.dcfn:hover,.dcfn2:hover{text-decoration-color:var(--pri-700)}
.dccar{border-bottom:1px dashed var(--ink-4);padding-bottom:1px}
.dccar:hover{color:var(--pri-700);border-bottom-color:var(--pri-400)}
.dccar:hover .ar{color:var(--pri-700)}
.tbl tr.dcrow{cursor:pointer}
.tbl tr.dcrow:hover td{background:var(--pri-50)}
.dcmat td.cell:hover{box-shadow:inset 0 0 0 2px var(--pri-400)}














/* ◆◆ 저장소 CSS 시작 ◆◆ */
/* ── 저장소 배지 〔D-80〕 ── */
.stbar{display:flex;align-items:center;gap:4px;margin-right:2px}
.stb{height:26px;padding:0 9px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface);
  font-size:11px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.stb:hover{border-color:var(--pri-400);color:var(--pri-700)}
.stb b{font-variant-numeric:tabular-nums}
.stb.gh{border-color:transparent;background:transparent;color:var(--ink-4)}
.stb.gh:hover{color:var(--err)}
.stb .dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex-shrink:0}
.stb .dot.on{background:var(--ok)}
.stwarn{font-size:11px;color:var(--warn);border:1px solid var(--warn-bd);background:var(--warn-bg);
  border-radius:20px;padding:2px 8px;cursor:pointer}
.stmode{font-size:11px;color:var(--lock);border:1px solid var(--lock-bd);background:var(--lock-bg);
  border-radius:20px;padding:3px 9px;cursor:pointer;white-space:nowrap;font-weight:500}
/* 판 고르기 〔D-84〕 */
.stmodes{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.stmt{font-size:11px;color:var(--ink-4);margin-bottom:7px}
.stmr{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.stmb{text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:6px;
  padding:9px 11px;display:block}
.stmb:hover{border-color:var(--pri-400)}
.stmb.on{border-color:var(--pri);background:var(--pri-50)}
.stmb b{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:3px}
.stmb.on b{color:var(--pri-700)}
.stmb span{display:block;font-size:11px;color:var(--ink-3);line-height:1.55}
.stq{font-size:12px;color:var(--ink-2);line-height:1.7;margin-bottom:10px}
.stq2{font-size:12px;color:var(--ink-4);margin-bottom:4px}
.stempty{padding:28px 8px;text-align:center;font-size:12px;color:var(--ink-4);line-height:1.8}
.stlog{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  max-height:380px;overflow-y:auto}
.sti{display:flex;align-items:baseline;gap:9px;padding:7px 11px;border-bottom:1px solid var(--line);font-size:12px}
.sti:last-child{border-bottom:none}
.sti .n{font-size:11px;color:var(--ink-4);min-width:20px;font-variant-numeric:tabular-nums}
.sti .pg{font-size:11px;color:var(--pri-700);background:var(--pri-50);border-radius:4px;
  padding:1px 6px;white-space:nowrap;flex-shrink:0}
.sti .lb{color:var(--ink);flex:1;min-width:0}
.sti .tm{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums;flex-shrink:0}



/* ══════════ 디자인 토큰 v2 〔D-145〕 ══════════
   화면이 「관리자 템플릿」처럼 보이던 까닭은 색이 아니라 **글자**였다 —
   Pretendard를 쓰겠다고 적어 두고 정작 싣지 않아 시스템 기본 글꼴로 떨어졌고,
   글자 크기는 스무 종이 뒤섞여 어디를 먼저 볼지 화면이 말해 주지 못했다.
   여기서 계단을 일곱으로 줄이고, 숫자·초점·그림자에 규칙을 준다. */
:root{
  --fs-cap:11px;    /* 캡션·보조 */
  --fs-lbl:12px;    /* 라벨 */
  --fs-tbl:13px;    /* 표·컨트롤 */
  --fs-body:14px;   /* 본문 */
  --fs-sec:15px;    /* 소제목 */
  --fs-h1:20px;     /* 화면 제목 */
  --fs-num:26px;    /* 큰 수치 */
  --e1:0 1px 2px rgba(16,24,40,.06);
  --e2:0 10px 28px rgba(16,24,40,.14);
  --ring:0 0 0 3px rgba(23,92,211,.25);
  /* 〔B-6 · D-149〕 팔레트 밖 hex 0 — 흰 글자·종이 문서 색도 토큰으로 */
  --on-pri:#FFFFFF;--dim:#F3F4F6;--paper:#FFFFFF;--paper-ink:#1B2129;--paper-mute:#66707D;--paper-mute-2:#7A828D;--paper-line:#C9D2DD;--paper-head:#F2F5F9;--paper-tot:#F6F9FC;--paper-accent:#2456B3;--paper-red:#B23030;--paper-green:#1C7A44;
}
body{font-size:var(--fs-body);letter-spacing:-.005em}
/* 제목은 조금 좁게 — 한글은 자간이 넓으면 흐트러져 보인다 */
h1,h2,h3,.hdr h1,.kpi .v{letter-spacing:-.02em}
/* 읽는 글은 넉넉히, 어절 단위로 끊는다 */
.hint,.desc,.box,.sub,.note,.empty,p{line-height:1.65;word-break:keep-all}
.tbl td.k,.grp .gh .nm{word-break:keep-all}
/* 숫자는 자릿수가 흔들리지 않게 — 금액 비교는 세로로 한다 */
.num,.dt,.kpi .v,.tbl td.num,.tbl th.num,.b{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
/* 키보드로 다니는 사람 — 지금까지 초점 표시가 하나도 없었다 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--pri);
  outline-offset:1px;box-shadow:var(--ring);border-radius:4px}
::selection{background:var(--pri-100);color:var(--pri-700)}
/* 그림자는 두 단계뿐 — 떠 있는 것은 「지금 다루는 것」 하나여야 한다 */
.mdl{box-shadow:var(--e2)}
.rowmenu,.menu,.pop,.dd,.cal{box-shadow:var(--e2)}
.kpi,.grp,.panel{box-shadow:var(--e1)}

/* ── 인쇄면 〔D-142〕 — 종이에는 문서만 나간다 ──
   printDoc()이 문서 부분만 떼어 #prPaper에 담아 몸통 끝에 붙인다.
   화면에서는 안 보이고, 인쇄할 때만 이것만 남는다. */
#prPaper{display:none}
@media print{
  @page{size:A4;margin:14mm 12mm}
  html,body{background:var(--paper)!important}
  body.prdoc>*{display:none!important}
  body.prdoc>#prPaper{display:block!important}
  #prPaper{color:var(--paper-ink);font-size:11pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #prPaper .noprint{display:none!important}
  /* 종이에는 화면용 테두리·둥근 모서리·여백이 필요 없다 — 문서 몸통에만 적용 */
  #prPaper>*{border:none!important;border-radius:0!important;padding:0!important;background:var(--paper)!important}
  #prPaper *{box-shadow:none!important}
  #prPaper table{page-break-inside:auto}
  #prPaper tr{page-break-inside:avoid;break-inside:avoid}
  #prPaper thead{display:table-header-group}
  #prPaper .prfoot{margin-top:10mm;font-size:9pt;color:var(--paper-mute);text-align:right}
}

/* ── 흐름 띠 〔D-82〕 — 색은 「어디를 먼저 볼지」에만 쓴다 ── */
.flowbar{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--pri-400);
  border-radius:6px;margin-bottom:12px;overflow:hidden}
.flowbar .fh{display:flex;align-items:center;gap:10px;padding:7px 12px}
.flowbar.fold .fb{display:none}
.flowbar .fl{font-size:11px;color:var(--ink-4);flex-shrink:0}
.flowbar .fsteps{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.flowbar .fs{font-size:12px;color:var(--ink-3);text-decoration:none;padding:1px 7px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap}
.flowbar .fs:hover{color:var(--pri-700);background:var(--pri-50)}
.flowbar .fs.on{color:var(--pri-700);font-weight:600;border-color:var(--pri-400);background:var(--pri-50)}
.flowbar .fa{font-size:11px;color:var(--line-2)}
.flowbar .fside{font-size:11px;color:var(--ink-4);border:1px dashed var(--line-2);border-radius:20px;
  padding:1px 8px;margin-left:4px}
.flowbar .ffold{margin-left:auto;font-size:11px;color:var(--ink-4);flex-shrink:0}
.flowbar .ffold:hover{color:var(--ink-2)}
.flowbar .fb{padding:0 12px 9px;display:flex;flex-direction:column;gap:4px}
.flowbar .fr{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-2);line-height:1.65}
.flowbar .fi{font-size:11px;color:var(--ink-4);min-width:44px;flex-shrink:0}
.flowbar .fr b{font-weight:600;color:var(--ink)}
.flowbar .fgo{font-size:11px;color:var(--pri-700);text-decoration:none;white-space:nowrap;flex-shrink:0;
  margin-left:auto;border-bottom:1px solid var(--pri-100)}
.flowbar .fgo:hover{border-bottom-color:var(--pri)}

/* ── 빈 상태 안내 〔D-89〕 ── */
.eguide{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--pri);
  border-radius:6px;padding:16px 18px;margin-bottom:14px}
.eguide .et{font-size:15px;font-weight:600;letter-spacing:-.2px}
.eguide .em{font-size:13px;color:var(--ink-2);line-height:1.75;margin-top:6px}
.eguide .ea{font-size:13px;color:var(--ink);line-height:1.75;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line)}
.eguide .em b,.eguide .ea b{font-weight:600;color:var(--ink)}
.eguide .eg{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.eguide .eg .btn{text-decoration:none}

/* ══════════ 표·인스펙터 패턴 〔D-148 · UI 2단계〕 ══════════
   골든 스크린(퇴실정산 목록) 한 장에서 정한 규칙을 전 화면이 나눠 쓴다.
   ① 표 머리는 스크롤해도 남는다 ② 열은 사람이 고른다 ③ 행을 누르면 오른쪽에 펼친다 ④ 행에는 다음 할 일 하나 */
:root{--gnb-h:51px;--insp-w:400px}
/* ① .grp의 overflow:hidden이 스크롤 컨테이너가 되어 sticky가 죽어 있었다 — clip은 자르되 컨테이너가 되지 않는다.
   머리는 상단바(.gnb) 아래에 붙는다. 팝업·서랍 안 표는 그 안에서 top:0 */
.grp,.panel{overflow:clip}
/* 스크롤 컨테이너(overflow:auto·hidden) 안의 표는 그 안에서 top:0 — 창 기준 51px을 주면 머리가 첫 줄 위로 밀려 내려와 글자를 덮는다(D-151 지적).
   stickyFix()가 표마다 어느 쪽인지 재서 --th-top을 단다 */
.tbl thead th{position:sticky;top:var(--th-top,var(--gnb-h));z-index:3;box-shadow:inset 0 -1px 0 var(--line)}
.mb .tbl thead th,.drw .tbl thead th,.mdl .tbl thead th,.ov .tbl thead th,#prPaper .tbl thead th,#insp .tbl thead th{top:0}
/* ①-1 접히는 칸 〔D-176-1〕 — .tbl 기본은 한 줄(nowrap)이다.
   이름이 길어 다른 칸을 밀어내는 자리만 이 표시를 달아 두 줄로 접는다 */
.tbl td.wr,.tbl th.wr{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
/* ①-2 눌러서 정렬하는 열 머리 〔D-176-2〕 — 누를 수 있다는 것이 보여야 누른다 */
.tbl th.srt{cursor:pointer;user-select:none}
.tbl th.srt:hover{color:var(--pri)}
.tbl th.srt.on{color:var(--pri)}
.tbl th.srt .ar{font-size:11px;color:var(--ink-4);margin-left:2px}
.tbl th.srt.on .ar{color:var(--pri)}
/* ② 열 고르기 팝업 */
.colpop{position:fixed;z-index:70;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;
  box-shadow:var(--e2);padding:6px;min-width:176px}
.colpop .ct{font-size:11px;color:var(--ink-4);padding:4px 8px 6px;white-space:nowrap}
.colpop label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);padding:5px 8px;
  border-radius:5px;cursor:pointer;white-space:nowrap}
.colpop label:hover{background:var(--pri-50)}
.colpop label.fixed{color:var(--ink-4);cursor:default}
.colpop .cf{display:flex;gap:4px;padding:6px 6px 2px;border-top:1px solid var(--line);margin-top:4px}
/* ③ 인스펙터 — 목록을 떠나지 않고 한 건을 본다 */
#insp{position:fixed;top:0;right:0;bottom:0;width:var(--insp-w);max-width:92vw;background:var(--surface);
  border-left:1px solid var(--line-2);z-index:55;display:none;flex-direction:column;box-shadow:-6px 0 20px rgba(16,24,40,.06)}
body.insp-open #insp{display:flex}
body.insp-open .main{padding-right:calc(var(--insp-w) + 16px)}
/* 〔D-154-11〕 인스펙터 옷 — 바탕은 옅고 구획은 카드. 첫 카드(상태)는 푸른 띠, 값은 줄마다 가는 선, 숫자는 오른쪽·굵게 */
#insp{background:var(--surface-2)}
#insp .ih{display:flex;align-items:flex-start;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--line);min-height:56px;background:var(--surface)}
#insp .ih .it{font-size:var(--fs-sec);font-weight:700;letter-spacing:-.3px;min-width:0;line-height:1.35;overflow-wrap:anywhere}
#insp .ih .is{font-size:var(--fs-cap);color:var(--ink-4);margin-top:3px}
#insp .ih .ix{margin-left:auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-3);font-size:var(--fs-tbl);cursor:pointer;padding:0;flex-shrink:0}
#insp .ih .ix:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-2)}
#insp .ib{flex:1;overflow:auto;padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
#insp .if{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:6px;flex-wrap:wrap;background:var(--surface)}
#insp .if .btn.pri{height:32px;padding:0 14px;font-weight:600}
.insp-sec{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px 11px;box-shadow:var(--e1)}
.insp-sec .st{font-size:var(--fs-cap);color:var(--ink-3);font-weight:600;letter-spacing:.2px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px}
.insp-sec .st .r{margin-left:auto;font-weight:500}
.insp-sec:first-child{border-color:var(--pri-100);background:var(--pri-50);box-shadow:none}
.insp-sec:first-child .st{border-bottom-color:var(--pri-100);color:var(--pri-700)}
.insp-sec .steps{flex-wrap:wrap}
.insp-sec .sub{color:var(--ink-3)}
.kv{display:grid;grid-template-columns:96px 1fr;gap:0 10px;font-size:var(--fs-lbl)}
.kv>div{padding:5px 0;border-bottom:1px dashed var(--line);display:flex;align-items:center;min-height:26px}
.kv>div:nth-last-child(-n+2){border-bottom:none}
.kv .k{color:var(--ink-4);font-size:var(--fs-cap)}
.kv .v{color:var(--ink);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.kv .v.num{justify-content:flex-end;text-align:right;font-weight:600}
.kv .v.err{color:var(--err)}
.kv .v.ok{color:var(--ok)}
.kv .v.warn{color:var(--warn-ink,var(--warn))}
.insp-li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-lbl)}
.insp-li:last-child{border-bottom:none}
.insp-li .sp{margin-left:auto;font-variant-numeric:tabular-nums}
.insp-li .b{flex-shrink:0}
/* 〔D-154-4〕 정보 화면 — 타일 + 묶음 카드 */
.itiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.itile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-width:0}
.itile .l{font-size:var(--fs-cap);color:var(--ink-4)}
.itile .v{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.4px;margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}
.itile .v small{font-size:var(--fs-lbl);font-weight:500;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.itile .s{font-size:var(--fs-cap);color:var(--ink-3);margin-top:3px}
.itile.warn{border-color:var(--warn);background:var(--warn-bg)}
.itile.err{border-color:var(--err);background:var(--err-bg)}
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px}
.ig{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px 11px;min-width:0}
.ig .igt{font-size:var(--fs-cap);font-weight:600;color:var(--ink-3);padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.ig .igt .r{margin-left:auto;font-weight:500;display:flex;gap:4px}
.ig .kv{grid-template-columns:112px 1fr}
.ig .igf{margin-top:8px;font-size:var(--fs-cap);color:var(--ink-4)}
/* ④ 고른 행 — 왼쪽 띠 하나로 알린다 */
.tbl tr.sel td{background:var(--pri-50)}
.tbl tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--pri)}
.tbl tr.picked td{background:var(--pri-50)}
.tbl tbody tr[data-id]{cursor:pointer}


/* ══════════ 유틸 클래스 〔D-153 · UI 3단계 ②〕 — 인라인 style을 흡수한다.
   인라인과 같은 힘을 갖도록 !important. 규칙: 같은 스타일이 세 번 이상 나오면 여기로 ══════════ */
.mt10{margin-top:10px!important}
.mt8{margin-top:8px!important}
.mt12{margin-top:12px!important}
.mt6{margin-top:6px!important}
.mt4{margin-top:4px!important}
.mt3{margin-top:3px!important}
.mt5{margin-top:5px!important}
.mb10{margin-bottom:10px!important}
.mb12{margin-bottom:12px!important}
.mb8{margin-bottom:8px!important}
.ml6{margin-left:6px!important}
.ml8{margin-left:8px!important}
.mr5{margin-right:5px!important}
.mx14b{margin:0 14px 14px!important}
.mw120{max-width:120px!important}
.mw150{max-width:150px!important}
.mw160{max-width:160px!important}
.mw170{max-width:170px!important}
.mw220{max-width:220px!important}
.mw560{max-width:560px!important}
.c-err{color:var(--err)!important}
.c-warn{color:var(--warn)!important}
.c-warn-ink{color:var(--warn-ink)!important}
.c-mut{color:var(--ink-4)!important}
.c-pri{color:var(--pri)!important}
.c-pri7{color:var(--pri-700)!important}
.cp{cursor:pointer!important}
.f1{flex:1!important}
.fs11{font-size:var(--fs-cap)!important}
.fs12{font-size:var(--fs-lbl)!important}
.fw6{font-weight:600!important}
.bg2{background:var(--surface-2)!important}
.fw{flex-wrap:wrap!important}
.gap6{gap:6px!important}
.gap14{gap:14px!important}
.minw0{min-width:0!important}
.p12{padding:12px!important}
.p16{padding:16px!important}
.p0{padding:0!important}
.tbl tr.late td{background:var(--warn-bg)}
.tdn{text-decoration:none!important}
.rel-ib{position:relative!important;display:inline-block!important}
.sub2{font-size:var(--fs-tbl)!important;color:var(--ink-2)!important}
.hint2{margin-top:5px!important;line-height:1.85!important}
.lblrow{gap:6px!important;cursor:pointer!important;font-size:var(--fs-lbl)!important}
.z97{z-index:97!important}
.w40{width:40px!important}
.w60{width:60px!important}
.w70{width:70px!important}
.w78{width:78px!important}
.w80{width:80px!important}
.w86{width:86px!important}
.w90{width:90px!important}
.w96{width:96px!important}
.w100{width:100px!important}
.w110{width:110px!important}
.w120{width:120px!important}
.w130{width:130px!important}
.w140{width:140px!important}
.w150{width:150px!important}
.w160{width:160px!important}
.w170{width:170px!important}
.w180{width:180px!important}
.w190{width:190px!important}
.w200{width:200px!important}
.mt2{margin-top:2px!important}
.mt14{margin-top:14px!important}
.mb6{margin-bottom:6px!important}
.ai-start{align-items:flex-start!important}
.gap12{gap:12px!important}
.bg-bg{background:var(--bg)!important}
.mw110{max-width:110px!important}
.f14{flex:1.4!important}
.ml4{margin-left:4px!important}
.ml5{margin-left:5px!important}
.m0{margin:0!important}
.flush12{margin:12px -18px 0!important}
.m6-18{margin:6px 0 0 18px!important}
.mw165{max-width:165px!important}
.mw200{max-width:200px!important}
.mw520{max-width:520px!important}
.c-ok{color:var(--ok)!important}
.c-ink{color:var(--ink)!important}
.c-inh{color:inherit!important}
.c-ink2{color:var(--ink-2)!important}
.fs13{font-size:var(--fs-tbl)!important}
.fw4{font-weight:400!important}
.bg-pri50{background:var(--pri-50)!important}
.bg-warn{background:var(--warn-bg)!important}
.gap4{gap:4px!important}
.gap8{gap:8px!important}
.p14{padding:14px!important}
.ta-r{text-align:right!important}
.ox-auto{overflow-x:auto!important}
.h16{height:16px!important}
.h56{height:56px!important}
.z96{z-index:96!important}
.totrow{border-top:2px solid var(--line)!important;background:var(--surface-2)!important}
.lnk-inv{color:var(--pri-100)!important;margin-left:10px!important;text-decoration:underline!important}
.w13p{width:13%!important}
.w5p{width:5%!important}
.w6p{width:6%!important}
.w7p{width:7%!important}
.w8p{width:8%!important}
.w9p{width:9%!important}
.w10p{width:10%!important}
.w11p{width:11%!important}
.w12p{width:12%!important}
.w14p{width:14%!important}
.w15p{width:15%!important}
.w26{width:26px!important}
.w56{width:56px!important}
.w64{width:64px!important}
.w85{width:85px!important}
.w65{width:65px!important}
.w75{width:75px!important}
.w95{width:95px!important}
.w104{width:104px!important}
.w105{width:105px!important}
.w220{width:220px!important}
/* ══════════ 팝업 규격 〔D-153 · UI 3단계 ④〕 — 크기는 넷뿐: s 480 · (기본) 560 · md 680 · wide 880 · xwide 1200 ══════════ */
.mdl.s{width:480px}
.mdl.md{width:min(680px,94vw);max-width:94vw}
.mdl.mwide{width:min(880px,94vw)}
.mdl.tall{height:calc(100vh - 40px)}
/* 〔D-155-1〕 넓은 창 두 단계는 공용으로 — xwide 1200(문서·보고서) · ws 1560(작업대: 대사 워크스페이스). 화면마다 정의하면 빠진 화면에서 560으로 쪼그라든다 */
.mdl.xwide{width:min(1200px,94vw);max-width:94vw}
.mdl.ws{width:min(1560px,97vw);max-width:97vw}
/* 〔D-171-③ⓐ〕 팝업은 세 층이다 — [제목줄 고정] / [내용: 여기만 스크롤] / [단추줄 고정].
   내용이 제목줄 뒤로 파고들어 목록 윗줄이 반쯤 가려 보이던 일을 막는다.
   ① 제목줄·단추줄은 줄어들지 않고(flex:none) 배경이 **불투명**하다 — 뒤가 비치지 않게.
   ② 스크롤은 .mb 하나만 — 창 자체는 스크롤하지 않는다(그래야 제목줄이 늘 보인다).
   ③ .mb 안 표머리는 sticky(z-index:3)라 제목줄보다 위에 그려질 수 있었다 — 제목줄을 더 위로 올린다.
   화면 파일에 같은 규칙을 또 적지 않는다. 여기 하나가 모든 팝업에 걸린다. */
.mdl{display:flex;flex-direction:column}
.mdl>.mh,.drw>.mh{flex:none;position:relative;z-index:4;background:var(--surface)}
.mdl>.mf,.drw>.mf{flex:none;position:relative;z-index:4;background:var(--surface)}
.mdl>.mb,.drw>.mb{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
/* ══════════ 선 아이콘 〔D-153 · UI 3단계 ③〕 — 이모지 대신. 글자 색·크기를 따르는 마스크 아이콘 ══════════
   쓰는 법: <i class="ic ic-warn"></i>  (1em, currentColor). 상태 뜻은 색이 아니라 배지·글이 말한다 */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.15em;background-color:currentColor;flex-shrink:0;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic.lg{width:1.25em;height:1.25em;vertical-align:-.25em}
.ic-alarm{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M12%208v4%27/%3E%3Cpath%20d=%27M12%2016h.01%27/%3E%3C/svg%3E")}
.ic-warn{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%209v4%27/%3E%3Cpath%20d=%27M10.4%203.5%202.3%2017.5a2%202%200%200%200%201.7%203h16a2%202%200%200%200%201.7-3L13.6%203.5a2%202%200%200%200-3.2%200z%27/%3E%3Cpath%20d=%27M12%2017h.01%27/%3E%3C/svg%3E")}
.ic-lock{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%275%27%20y=%2711%27%20width=%2714%27%20height=%2710%27%20rx=%272%27/%3E%3Cpath%20d=%27M8%2011V7a4%204%200%200%201%208%200v4%27/%3E%3C/svg%3E")}
.ic-file{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M14%203v4a1%201%200%200%200%201%201h4%27/%3E%3Cpath%20d=%27M17%2021H7a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h7l5%205v11a2%202%200%200%201-2%202z%27/%3E%3C/svg%3E")}
.ic-receipt{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16l-3-2-3%202-3-2-3%202z%27/%3E%3Cpath%20d=%27M9%208h6%27/%3E%3Cpath%20d=%27M9%2012h6%27/%3E%3C/svg%3E")}
.ic-money{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%276%27%20width=%2718%27%20height=%2712%27%20rx=%272%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%272%27/%3E%3Cpath%20d=%27M6%2012h.01%27/%3E%3Cpath%20d=%27M18%2012h.01%27/%3E%3C/svg%3E")}
.ic-clip{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M15%207l-6.5%206.5a2%202%200%200%200%203%203L18%2010a4%204%200%200%200-6-6L5.5%2010.5a6%206%200%200%200%208.5%208.5L20%2013%27/%3E%3C/svg%3E")}
.ic-folder{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%204h4l3%203h7a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2%27/%3E%3C/svg%3E")}
.ic-key{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%278%27%20cy=%2715%27%20r=%274%27/%3E%3Cpath%20d=%27M10.85%2012.15%2019%204%27/%3E%3Cpath%20d=%27M18%205l2%202%27/%3E%3Cpath%20d=%27M15%208l2%202%27/%3E%3C/svg%3E")}
.ic-building{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M3%2021h18%27/%3E%3Cpath%20d=%27M9%208h1%27/%3E%3Cpath%20d=%27M9%2012h1%27/%3E%3Cpath%20d=%27M9%2016h1%27/%3E%3Cpath%20d=%27M14%208h1%27/%3E%3Cpath%20d=%27M14%2012h1%27/%3E%3Cpath%20d=%27M14%2016h1%27/%3E%3Cpath%20d=%27M5%2021V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v16%27/%3E%3C/svg%3E")}
.ic-gear{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%273%27/%3E%3Cpath%20d=%27M12%202v3%27/%3E%3Cpath%20d=%27M12%2019v3%27/%3E%3Cpath%20d=%27M2%2012h3%27/%3E%3Cpath%20d=%27M19%2012h3%27/%3E%3Cpath%20d=%27M4.9%204.9l2.1%202.1%27/%3E%3Cpath%20d=%27M17%2017l2.1%202.1%27/%3E%3Cpath%20d=%27M4.9%2019.1%207%2017%27/%3E%3Cpath%20d=%27M17%207l2.1-2.1%27/%3E%3C/svg%3E")}
.ic-bell{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M10%205a2%202%200%201%201%204%200a7%207%200%200%201%204%206v3a4%204%200%200%200%202%203H4a4%204%200%200%200%202-3v-3a7%207%200%200%201%204-6%27/%3E%3Cpath%20d=%27M9%2017v1a3%203%200%200%200%206%200v-1%27/%3E%3C/svg%3E")}
.ic-pin{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%2021s-6-5.7-6-11a6%206%200%201%201%2012%200c0%205.3-6%2011-6%2011z%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2710%27%20r=%272%27/%3E%3C/svg%3E")}
.ic-check{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%2012l5%205L20%207%27/%3E%3C/svg%3E")}
.ic-info{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M12%208h.01%27/%3E%3Cpath%20d=%27M11%2012h1v4h1%27/%3E%3C/svg%3E")}
.ic-send{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M10%2014L21%203%27/%3E%3Cpath%20d=%27M21%203l-6.5%2018a.55.55%200%200%201-1%200L10%2014l-7-3.5a.55.55%200%200%201%200-1L21%203%27/%3E%3C/svg%3E")}
.ic-user{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%277%27%20r=%274%27/%3E%3Cpath%20d=%27M6%2021v-2a4%204%200%200%201%204-4h4a4%204%200%200%201%204%204v2%27/%3E%3C/svg%3E")}
.ic-calendar{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%274%27%20y=%275%27%20width=%2716%27%20height=%2716%27%20rx=%272%27/%3E%3Cpath%20d=%27M16%203v4%27/%3E%3Cpath%20d=%27M8%203v4%27/%3E%3Cpath%20d=%27M4%2011h16%27/%3E%3C/svg%3E")}
.ic-print{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M17%2017h2a2%202%200%200%200%202-2v-4a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202v4a2%202%200%200%200%202%202h2%27/%3E%3Cpath%20d=%27M17%209V5a2%202%200%200%200-2-2H9a2%202%200%200%200-2%202v4%27/%3E%3Crect%20x=%277%27%20y=%2713%27%20width=%2710%27%20height=%278%27%20rx=%271%27/%3E%3C/svg%3E")}
.ic-download{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%2017v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d=%27M7%2011l5%205%205-5%27/%3E%3Cpath%20d=%27M12%204v12%27/%3E%3C/svg%3E")}
.ic-upload{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%2017v2a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-2%27/%3E%3Cpath%20d=%27M7%209l5-5%205%205%27/%3E%3Cpath%20d=%27M12%204v12%27/%3E%3C/svg%3E")}
.ic-search{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2710%27%20cy=%2710%27%20r=%277%27/%3E%3Cpath%20d=%27M21%2021l-6-6%27/%3E%3C/svg%3E")}
.ic-x{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M18%206%206%2018%27/%3E%3Cpath%20d=%27M6%206l12%2012%27/%3E%3C/svg%3E")}
.ic-mail{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%273%27%20y=%275%27%20width=%2718%27%20height=%2714%27%20rx=%272%27/%3E%3Cpath%20d=%27M3%207l9%206%209-6%27/%3E%3C/svg%3E")}
.ic-phone{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2%27/%3E%3C/svg%3E")}
.ic-clock{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%279%27/%3E%3Cpath%20d=%27M12%207v5l3%203%27/%3E%3C/svg%3E")}
.ic-bolt{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M13%203l-8%2010h6l-1%208%208-10h-6z%27/%3E%3C/svg%3E")}
.ic-columns{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%274%27%20y=%274%27%20width=%2716%27%20height=%2716%27%20rx=%272%27/%3E%3Cpath%20d=%27M10%204v16%27/%3E%3Cpath%20d=%27M16%204v16%27/%3E%3C/svg%3E")}
.ic-filter{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%204h16v2.2a2%202%200%200%201-.6%201.4L14%2013v6l-4%202v-8L4.6%207.6A2%202%200%200%201%204%206.2z%27/%3E%3C/svg%3E")}
.ic-plus{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M12%205v14%27/%3E%3Cpath%20d=%27M5%2012h14%27/%3E%3C/svg%3E")}
.ic-chevron-right{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M9%206l6%206-6%206%27/%3E%3C/svg%3E")}
.ic-external{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M11%207H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h9a2%202%200%200%200%202-2v-5%27/%3E%3Cpath%20d=%27M10%2014L20%204%27/%3E%3Cpath%20d=%27M15%204h5v5%27/%3E%3C/svg%3E")}
.ic-trash{--ic:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M4%207h16%27/%3E%3Cpath%20d=%27M10%2011v6%27/%3E%3Cpath%20d=%27M14%2011v6%27/%3E%3Cpath%20d=%27M5%207l1%2012a2%202%200%200%200%202%202h8a2%202%200%200%200%202-2l1-12%27/%3E%3Cpath%20d=%27M9%207V4a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v3%27/%3E%3C/svg%3E")}
/* ══════════ 설정 표 〔D-151〕 — 알림 설정·건물 설정·관리설정이 같은 모양 ══════════ */
.cfg{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.cfg-menu{width:170px;flex-shrink:0;border:1px solid var(--line);border-radius:6px;overflow:clip;background:var(--surface)}
.cfg-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:8px 10px;
  font-size:var(--fs-lbl);border-bottom:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.cfg-menu button:last-child{border-bottom:none}
.cfg-menu button:hover{background:var(--pri-50)}
.cfg-menu button.on{background:var(--pri-50);color:var(--pri-700);font-weight:600}
.cfg-menu .n{font-size:var(--fs-cap);color:var(--ink-4);font-weight:400}
.cfg-menu .n.diff{color:var(--warn)}
.cfg-body{flex:1;min-width:360px}
.cfg-sep{color:var(--line-2);margin:0 2px}
.cfg-note{margin:0 0 10px}
.cfg-tbl td{white-space:normal;height:auto;padding:7px 10px;vertical-align:middle}
.cfg-tbl tr.own td{background:var(--warn-bg)}
.cfg-tbl tr.miss td.k{color:var(--err)}
.cfg-tbl .cfg-hint{font-size:var(--fs-cap);margin-top:2px;font-weight:400}
.cfg-tbl .cfg-v .row{gap:6px;flex-wrap:wrap}
.cfg-tbl .cfg-v .inp{height:28px}
.cfg-undo{height:22px;padding:0 7px;font-size:var(--fs-cap)}
.cfg-go{font-size:var(--fs-cap);color:var(--pri-700);white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--pri-100)}
.cfg-go:hover{border-bottom-color:var(--pri)}
/* ══════════ 그래프 — 선·도넛 〔D-156-13·14 · D-157 재작성〕 ══════════
   ① 크기 — 높이 속성 = viewBox 높이라 **1배를 넘지 않는다**. 넓은 화면에서 글씨가 두 배로 커지던 것.
   ② 색 — 있는 토큰만 쓴다. 없는 이름(--pri-500)을 쓰면 var()가 무효가 되어 **검게** 칠해진다.
   ③ 이 CSS는 주입 블록 안에 둔다 — 화면 파일에 직접 쓰면 다음 주입 때 지워진다. */
/* 〔D-158-4〕 표에서 지금 보는 기간 열 — 그래프의 강조와 같은 자리 */
.tbl th/* 〔D-158-14〕 업무내역 — 구분 묶음·읽기 기본·단추 고정 열
   〔D-160-3〕 표가 내용 길이를 따라 늘어나 오른쪽 단추가 화면 밖으로 나갔다 — **폭을 고정**하고 글을 접는다 */
.wktbl{table-layout:fixed;width:100%}
.wktbl td,.wktbl th{word-break:keep-all;overflow-wrap:anywhere;white-space:normal}
.wktbl td{vertical-align:middle}          /* 〔D-165-1〕 글은 세로 가운데 — 위로 붙으면 줄이 어긋난다 */
.wktbl tr.picked td{vertical-align:top}   /* 고치는 줄(입력칸)만 위 정렬 */
.wktbl tr.bg2 td{vertical-align:middle}
.wktbl tr.bg2 td{padding-top:7px;padding-bottom:7px}
.wktx{font-size:var(--fs-tbl);line-height:1.6;word-break:keep-all;cursor:text;min-height:20px;padding:1px 2px;border-radius:3px}
.wktx:hover{background:var(--pri-50);box-shadow:inset 0 0 0 1px var(--pri-100)}
.nowrapc{white-space:nowrap}
/* 〔D-160-5〕 공문 문안 — 어느 메뉴에서 쓰든 같은 규격 */
.doc-body{height:320px;line-height:1.85;font-family:inherit;resize:vertical}
.doc-pre{white-space:pre-wrap;font-family:inherit;font-size:var(--fs-tbl);line-height:1.85;margin:0}
/* 〔D-161-4〕 일정관리 업무내역은 훑어보는 자리 — 한 줄로 줄이고 세로 가운데 */
.wkro td{vertical-align:middle !important;height:34px}
.wk1{overflow:hidden}
.wk1t{display:inline-block;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.wkro tr.cp:hover{background:var(--pri-50)}
/* 〔D-164-2〕 여러 줄이 섞인 표는 글을 **세로 가운데**로 — 위로 붙으면 읽는 줄이 어긋난다 */
.tbl.vmid td{vertical-align:middle}
/* 〔D-166-3〕 도구줄 — 고르는 것들을 한 줄에 · 좁을 때만 접힌다 */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px}
.toolbar .chips{display:inline-flex;gap:4px;flex-wrap:nowrap}
.toolbar .nw{white-space:nowrap}
.tsep{width:1px;height:16px;background:var(--line);flex:none}
/* 〔D-177-3〕 표를 보는 방식(정렬·열)은 **표 쪽 오른쪽 끝**에 모은다 —
   거르개와 섞어 도구줄에 두니 줄이 길어져 두 개만 다음 줄로 밀렸다.
   표 제목줄(.ph .r)·탭 줄(.tabs)이 없는 화면은 표 위 얇은 줄에 이 자리를 둔다. */
.tview{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
/* 〔D-166-1〕 렌트롤은 면을 나눠 폭 안에 들어간다 — 가로로 밀지 않는다 */
.tipw{border-bottom:1px dotted var(--ink-3);cursor:help}
/* 〔D-169-3〕 설정 범위 고르기 — 건물이 늘어도 한 줄 */
.cfg-scope{min-width:180px;max-width:280px}
.cfg-diffn{margin-left:6px}
/* 〔D-171〕 표시 기준 칩(공급가액 / 부가세 포함) — 모양·크기의 정본은 여기 하나다.
   화면마다 크기를 따로 적으면 같은 장치가 화면마다 달라 보인다.
   〔D-171-③①〕 자리에 따라 커지던 것을 막는다 — 탭 줄(.tabs button{font-size:13px;padding:8px 12px})이나
   패널 머리처럼 **단추를 따로 꾸미는 자리**에 놓으면 그 규칙이 .chip을 눌러 칩이 제목만큼 커졌다.
   이 칩은 보는 방식을 고르는 보조 장치이지 주된 정보가 아니므로, 어느 자리에 놓든 한 모습이어야 한다.
   그래서 .vatchip 안쪽은 클래스를 하나 더 얹어(우선순위 확보) 상자를 통째로 되돌린다. */
.vatchip{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:none}
.vatchip>.sub{margin-right:2px;font-size:var(--fs-cap);color:var(--ink-4);font-weight:400}
.vatchip .chip{height:22px;padding:0 9px;font-size:var(--fs-cap);line-height:1;font-weight:400;
  display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface);color:var(--ink-2);cursor:pointer}
.vatchip .chip.on{border:1px solid var(--pri-400);background:var(--pri-50);color:var(--pri-700);font-weight:500}
/* 〔D-169-2〕 아직 조건을 내놓지 않은 줄은 한 톤 낮춘다 — 눈이 「팔 수 있는 방」에 먼저 간다 */
.tbl tr.dim td{color:var(--ink-3)}
.tbl tr.dim td.k{color:var(--ink-2)}
.tbl.mkt{table-layout:fixed;width:100%}
.tbl.mkt td,.tbl.mkt th{word-break:keep-all;overflow-wrap:anywhere;padding-left:9px;padding-right:9px}
.tbl.mkt tfoot td{border-top:1px solid var(--line-2);background:var(--surface-2)}
.tbl.rr{table-layout:fixed;width:100%}
/* 〔D-171-5〕 white-space:normal이 빠져 있어 .tbl 기본값(nowrap)이 그대로 살아 있었다 —
   폭을 고정해도 글이 접히지 않아 칸 밖으로 흘러 표가 화면을 넘어갔다. 글을 접게 한다. */
.tbl.rr td,.tbl.rr th{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;padding-left:9px;padding-right:9px}
.wkro{table-layout:fixed;width:100%}
.wkro td,.wkro th{word-break:keep-all;overflow-wrap:anywhere;white-space:normal;vertical-align:top}
.wkrep{padding:4px 2px 8px}
.wkrep h4{font-size:var(--fs-sec);font-weight:700;color:var(--ink);margin:16px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.wkrep h4:first-child{margin-top:0}
.wkrep ol{margin:0;padding-left:20px}
.wkrep li{font-size:var(--fs-tbl);line-height:1.75;word-break:keep-all;margin:3px 0;color:var(--ink-2)}
.hl-col{background:var(--pri-50);color:var(--pri-700)}
.tbl tbody td.hl-col{background:var(--pri-50)}
.chart{padding:2px 2px 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chlg{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0 0 8px 2px;font-size:var(--fs-cap);color:var(--ink-2)}
.chlg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chlg i{width:12px;height:3px;border-radius:2px;display:inline-block}
.chlg .s1{background:var(--pri)}.chlg .s2{background:var(--ink-4)}.chlg .s3{background:var(--err)}.chlg .s4{background:var(--ok)}
.ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ln1{stroke:var(--pri)}.ln2{stroke:var(--ink-4)}.ln3{stroke:var(--err)}.ln4{stroke:var(--ok)}
.ar1{fill:var(--pri);opacity:.07}.ar3{fill:var(--err);opacity:.06}.ar4{fill:var(--ok);opacity:.07}
.pt{stroke:var(--surface);stroke-width:1.6}
.pt1{fill:var(--pri)}.pt2{fill:var(--ink-4)}.pt3{fill:var(--err)}.pt4{fill:var(--ok)}
.gridl{stroke:var(--line)}.axisl{stroke:var(--line-2)}
.axy{fill:var(--ink-4);font-size:var(--fs-cap)}.axx{fill:var(--ink-3);font-size:var(--fs-cap)}
.axx.on{fill:var(--pri-700);font-weight:600}
.chart .hit{fill:transparent}.chart .hit:hover{fill:var(--pri-50);opacity:.55}
.donut{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.donut svg{flex:0 0 auto}
.donut .tbl{flex:1;min-width:260px}
.dnc{fill:var(--ink);font-size:var(--fs-sec);font-weight:600}.dncs{fill:var(--ink-4);font-size:var(--fs-cap)}
.dnseg{stroke:var(--surface);stroke-width:1.5}
.dn1{fill:var(--pri)}.dn2{fill:var(--pri-400)}.dn3{fill:var(--pri-100)}.dn4{fill:var(--ok)}
.dn5{fill:var(--warn)}.dn6{fill:var(--err)}.dn7{fill:var(--lock)}.dn8{fill:var(--ink-4)}
.dnl td{padding-top:5px;padding-bottom:5px}
.dnl i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.dnl .dn1{background:var(--pri)}.dnl .dn2{background:var(--pri-400)}.dnl .dn3{background:var(--pri-100)}.dnl .dn4{background:var(--ok)}
.dnl .dn5{background:var(--warn)}.dnl .dn6{background:var(--err)}.dnl .dn7{background:var(--lock)}.dnl .dn8{background:var(--ink-4)}

/* ── 도구줄 〔D-177〕 — 제목줄 바로 아래 한 줄.
   왼쪽부터 [기준월 바] [건물] [그 밖의 거르개] [검색] … 오른쪽 끝 [표시 기준 칩] [보조 단추].
   전 화면이 같은 차례를 지킨다 ── */
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools>.mbar:first-child{margin-right:2px}
/* ── 기준월 바 〔D-177〕 — 전 화면 한 모양. 도구줄 맨 왼쪽에 선다 ── */
.mbar{display:inline-flex;align-items:center;height:var(--ctl);flex-shrink:0;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:visible}
.mbar>button{height:100%;color:var(--ink-3);background:transparent;border:0;cursor:pointer}
.mbar .mlbl{padding:0 9px 0 11px;font-size:11px;color:var(--ink-4);white-space:nowrap;align-self:center;
  border-right:1px solid var(--line);height:100%;display:inline-flex;align-items:center}
.mbar .nv{width:28px;font-size:11px}
.mbar .nv:hover{background:var(--surface-2);color:var(--ink)}
.mbar .nv:disabled{color:var(--line-2);cursor:default;background:transparent}
.mbar .mmw{display:inline-flex;align-items:center;height:100%}
.mbar select.mm{height:100%;min-width:74px;max-width:230px;padding:0 18px 0 8px;border:0;outline:0;
  background:transparent;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:-.2px;
  font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;text-align:center;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.mbar select.mm:hover{color:var(--pri-700)}
.mbar select.mm:focus{outline:2px solid var(--pri-400);outline-offset:-2px;border-radius:4px}
.mbar .mm.mstat{padding:0 12px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.mbar .nw{padding:0 11px;font-size:11px;border-left:1px solid var(--line)}
.mbar .nw:hover{background:var(--pri-50);color:var(--pri-700)}
/* 〔D-178〕 주황 「앞선 달」 꼬리표(.mfut)는 없앴다 — 군더더기라는 지적. 마우스오버 title 한 줄로 대신한다(ux_block.js monthBar) */
.mbar+.rseg{margin-left:6px}
.rseg{display:inline-flex;height:var(--ctl);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;flex-shrink:0}
.rseg button{padding:0 11px;height:100%;font-size:11px;color:var(--ink-3);background:transparent;border:0;cursor:pointer}
.rseg button+button{border-left:1px solid var(--line)}
.rseg button:hover{background:var(--surface-2)}
.rseg button.on{background:var(--pri-50);color:var(--pri-700);font-weight:600}

/* ── 이어받은 범위 띠 〔D-182〕 ──
   다른 화면에서 건물·기준월을 이어받아 왔음을 한 줄로 알린다.
   돌아가기 띠(backbar)와 같은 자리·같은 높이 — 다만 색을 낮춰 두 줄이 겹쳐도 시끄럽지 않게 한다. */
.scopebar{display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 12px;margin-bottom:10px;
  font-size:12px;color:var(--ink-2)}
.scopebar b{color:var(--ink);font-weight:600}
.scopebar .sp{flex:1}
.scopebar .ic{width:14px;height:14px;flex-shrink:0;color:var(--ink-4)}
.scopebar.miss{background:var(--warn-bg);border-color:var(--warn-bd);color:var(--warn)}
.scopebar.miss .ic{color:var(--warn)}

/* ◆◆ 저장소 CSS 끝 ◆◆ */