/* sAgent 현황판 — 확정된 화면 시안(web/index.html)의 스타일을 그대로 가져오고, 맨 아래에 실제 화면에서 더한 것을 붙였다.
   바깥 글꼴은 받지 않는다(내부망). PC 에 깔린 글꼴을 쓴다. */
/* 배치: 상단 요약 띠(고정) → 업무 지시(제목·상세·첨부) → 조직도 그대로의 3개 본부 열 → [지시·보고 흐름 | 상세 지시 및 검토 의견 피드백] → 업무 현황 */
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45;padding-inline:16px;padding-block:0 40px}
.wrap{max-width:1560px;margin-inline:auto;display:flex;flex-direction:column;gap:14px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 상단 요약 띠 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:12px 10px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.brand{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
.brand h1{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.brand .sub{color:var(--muted);font-size:12px}
.counts{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.count{display:flex;align-items:center;gap:6px;font-size:13px}
.count b{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;min-width:1.4ch;text-align:right}
.clock{font-family:var(--mono);color:var(--muted);font-size:12px}
.mock{font-size:11px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:1px 8px}

/* 상태등 */
.lamp{width:11px;height:11px;border-radius:50%;flex:none;background:var(--idle);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.lamp.working{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft),0 0 8px var(--ok);animation:pulse 1.6s ease-in-out infinite}
.lamp.error{background:var(--err);box-shadow:0 0 0 3px var(--err-soft),0 0 8px var(--err);animation:blink .9s steps(2,jump-none) infinite}
@keyframes pulse{50%{opacity:.55}}
@keyframes blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lamp{animation:none!important}.bar i{transition:none!important}}

/* 업무 지시 */
.order{padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:end}
.order label.f{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);min-width:0}
.order select,.order input[type=text],textarea{border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 8px;font-size:13px;color:var(--ink);min-width:0;width:100%}
.order select,.order input[type=text],.order input[type=datetime-local]{height:34px}
.order input[type=datetime-local]{border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 8px;font-size:13px;color:var(--ink);width:100%}
.order .f-due{flex:0 1 200px}
textarea{padding:7px 8px;resize:vertical;line-height:1.45;display:block}
.order .f-title{flex:1 1 240px}
.order .f-sel{flex:0 1 190px}
.order .f-detail{flex:1 1 100%}
.btn{height:34px;padding:0 14px;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.warn{background:transparent;border-color:var(--err);color:var(--err)}
.btn:active{transform:translateY(1px)}
.auto{display:flex;align-items:center;gap:6px;height:34px;font-size:13px;cursor:pointer}
.attach{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0}
.att{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--line);background:var(--sunken);border-radius:4px;padding:3px 4px 3px 6px;font-size:12px;min-width:0}
.att img{width:26px;height:26px;object-fit:cover;border-radius:3px;flex:none}
.att .nm{min-width:0;overflow-wrap:anywhere}
.att .sz{color:var(--muted);font-family:var(--mono);font-size:11px;white-space:nowrap}
.att .rm{border:0;background:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:2px 5px}
.order .msg{flex:1 1 100%;font-size:12px;color:var(--muted);min-height:1.2em}
.order .msg.bad{color:var(--err)}

/* 조직 보드 */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
.div>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.div h2{font-size:15px;font-weight:700;margin:0}
.div header span{font-size:12px;color:var(--muted)}
.teams{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.team{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.team h3{font-size:12px;font-weight:600;color:var(--muted);margin:0;letter-spacing:.02em}
.members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-left:14px;border-left:2px solid var(--line)}

/* 포틀릿 */
.p{display:flex;flex-direction:column;text-align:left;width:100%;min-width:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;overflow:hidden}
.p:hover{border-color:var(--accent)}
.p .tag{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--idle-soft);border-bottom:1px solid var(--line);min-width:0}
.p[data-s=working] .tag{background:var(--ok-soft)}
.p[data-s=error] .tag{background:var(--err-soft)}
.p[data-s=error]{border-color:var(--err)}
.p .who{font-weight:700;font-size:13px;white-space:nowrap}
.p .role{font-size:11.5px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.p .st{margin-left:auto;font-size:11px;font-weight:600;white-space:nowrap;color:var(--idle)}
.p[data-s=working] .st{color:var(--ok)}
.p[data-s=error] .st{color:var(--err)}
.p .body{display:flex;flex-direction:column;gap:6px;padding:8px 9px 9px;min-width:0}
.p .task{font-size:12.5px;min-height:3.9em;overflow-wrap:anywhere}
.p[data-s=idle] .task{color:var(--muted)}
.bar{height:4px;border-radius:2px;background:var(--idle-soft);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .5s linear}
.p[data-s=error] .bar i{background:var(--err)}
.p .foot{display:flex;gap:8px;justify-content:space-between;font-size:11px;color:var(--muted);min-width:0}
.p .foot .last{min-width:0;overflow-wrap:anywhere}
.p .foot .dn{white-space:nowrap;font-family:var(--mono)}
.p.head .who{font-size:14px}
.p.head{border-width:1px 1px 1px 4px;border-left-color:var(--accent)}
.p.head[data-s=error]{border-left-color:var(--err)}

/* 흐름 창 + 검토 창 (같은 크기) */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0;display:flex;flex-direction:column}
.duo .panel{height:520px}
.panel>h2{font-size:14px;font-weight:700;margin:0;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;align-items:baseline;flex:none}
.panel>h2 small{font-weight:400;color:var(--muted);font-size:11.5px}
.scroll{flex:1 1 auto;overflow-y:auto;min-height:0}
.feed{list-style:none;margin:0;padding:0}
.feed li{border-bottom:1px solid var(--line)}
.fi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:7px 12px;font-size:12.5px;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;cursor:pointer}
.fi:hover{background:var(--sunken)}
.fi[aria-current=true]{background:var(--accent-soft);border-left-color:var(--accent)}
.fi time{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.fi .route{font-weight:600}
.fi .route i{font-style:normal;color:var(--muted);font-weight:400;padding:0 3px}
.fi .txt{grid-column:2;color:var(--muted);overflow-wrap:anywhere}
.chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:3px;padding:0 5px;margin-left:6px;background:var(--accent-soft);color:var(--accent);vertical-align:1px;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.err{background:var(--err-soft);color:var(--err)}
.chip.wait{background:var(--accent);color:var(--on-accent)}
.chip.end{background:var(--idle-soft);color:var(--muted)}
.empty{padding:16px 12px;color:var(--muted);font-size:12.5px}

/* 검토 창 내용 */
.rv{padding:12px;display:flex;flex-direction:column;gap:12px;font-size:13px}
.rv h3{font-size:12px;color:var(--muted);margin:0 0 5px;font-weight:600;letter-spacing:.02em}
.rv .hd{display:flex;flex-direction:column;gap:3px}
.rv .hd .t{font-weight:700;font-size:14px;overflow-wrap:anywhere}
.rv .hd .m{color:var(--muted);font-size:12px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;font-size:12.5px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
pre.doc{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:10px;white-space:pre-wrap;overflow-wrap:anywhere}
.box{background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:8px 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.link{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.link.plain{font-family:var(--sans)}
.jl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.jl li{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:4px;padding:7px 9px;min-width:0}
.jl .r1{display:flex;gap:8px;justify-content:space-between;align-items:baseline}
.jl .r1 span:first-child{min-width:0;overflow-wrap:anywhere}
.rvfoot{flex:none;border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.rvfoot label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.rvfoot .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.rvfoot .hint{margin-right:auto;font-size:12px;color:var(--err);min-width:0}
.rvfoot .attach{flex:1 1 auto}
.rvfoot label.btn{flex-direction:row;font-size:13px;color:var(--accent)}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.tl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:12.5px}
.tl time{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.tl li.now{font-weight:600}

/* 업무 현황 */
.works{list-style:none;margin:0;padding:0}
.works>li{border-bottom:1px solid var(--line)}
.works>li:last-child{border-bottom:0}
.works summary,.wh{display:grid;grid-template-columns:5.5em minmax(0,2fr) minmax(0,1.3fr) 8.4em 8.4em 7em minmax(80px,.9fr) 6.5em;gap:6px 12px;align-items:center;padding:9px 12px;cursor:pointer;font-size:12.5px;list-style-position:outside}
.works summary:hover{background:var(--sunken)}
.works summary .c-st{order:9;justify-self:end}
.wh{gap:6px 12px;padding:6px 12px;font-size:11.5px;color:var(--muted);font-weight:600;background:var(--sunken);border-bottom:1px solid var(--line)}
.wh span:last-child{justify-self:end}
.dt{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt em{display:none;font-style:normal;font-family:var(--sans);color:var(--muted);margin-right:6px}
.dt.early{color:var(--ok);font-weight:500}
.dt.late{color:var(--err);font-weight:500}
.works .ttl{font-weight:600;min-width:0;overflow-wrap:anywhere}
.works summary .c-bar{display:flex;flex-direction:column;gap:3px;min-width:0}
.works .meta{color:var(--muted);font-size:11.5px;min-width:0;overflow-wrap:anywhere}
.works .wd{padding:4px 12px 14px;display:flex;flex-direction:column;gap:12px;font-size:12.5px;background:var(--sunken)}
.works .wd h3{font-size:12px;color:var(--muted);margin:0 0 5px;font-weight:600}
.wt{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface)}
.wt th,.wt td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.wt th{font-size:11.5px;color:var(--muted);font-weight:600;background:var(--sunken);white-space:nowrap}
.wt td.f{min-width:220px}
.tscroll{overflow-x:auto}

/* 창 (구성원 상세, 파일 열람) */
dialog{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px));max-height:min(94vh,980px);overflow:hidden}
dialog.sm{width:min(360px,calc(100vw - 32px))}
.dtf{display:flex;flex-wrap:wrap;gap:10px}
.dtf label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);flex:1 1 130px}
.dtf input{height:36px;border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 8px;font-size:14px;color:var(--ink);width:100%}
.dthint{font-size:12px;color:var(--err);min-height:1.3em}
.btn .v{font-weight:400;font-family:var(--mono);font-size:12px}
.chip.sched{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
dialog.wide{width:min(820px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(8,14,20,.55)}
.dlg{display:flex;flex-direction:column;max-height:calc(min(94vh,980px) - 2px)}
.dlg header{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dlg header h2{margin:0;font-size:16px;overflow-wrap:anywhere}
.dlg header>div{min-width:0}
.dlg header .org{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.dlg header .x{margin-left:auto;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);padding:4px 8px;flex:none}
.dlg .in{padding:12px 14px;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:14px}
.dlg h3{font-size:12px;color:var(--muted);margin:0 0 6px;font-weight:600;letter-spacing:.02em}
.dlg .now{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:7px}
.dlg .acts{display:flex;flex-wrap:wrap;gap:8px}
.dlg .hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.dlg .hist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:12.5px}
.dlg .hist time{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:2px}
.gl{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.dlg .note,.note{font-size:11.5px;color:var(--muted)}
.dlg img.view{max-width:100%;border:1px solid var(--line);border-radius:4px}

@media (max-width:1100px){
  .board{grid-template-columns:minmax(0,1fr)}
  .teams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:minmax(0,1fr)}
  .duo .panel{height:460px}
}
@media (max-width:1000px){
  .wh{display:none}
  .works summary{grid-template-columns:5.5em minmax(0,1fr) auto}
  .works summary .c-st{order:0}
  .works summary .c-who,.works summary .c-bar,.works summary .dt{grid-column:2 / -1}
  .dt em{display:inline-block;min-width:5.5em}
}
@media (max-width:640px){
  .teams{grid-template-columns:minmax(0,1fr)}
  .order .f-sel{flex:1 1 140px}
  .brand .sub{display:none}
}


/* ───────── 실제 화면에서 더한 것 ───────── */
html{-webkit-text-size-adjust:100%}
body{margin:0}
[hidden]{display:none!important}
.chip{margin-left:6px}
td .chip,.r1>.chip,.kv .chip,.works summary .chip{margin-left:0}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.tools form{margin:0;display:flex;align-items:center;gap:6px}
.count.sep{padding-left:14px;border-left:1px solid var(--line)}
.count b.hot{color:var(--accent);font-weight:700}
.count b.bad{color:var(--err);font-weight:700}
.clock.off{color:var(--err)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn.mini{height:24px;padding:0 8px;font-size:11.5px;font-weight:500}
a.btn{text-decoration:none}
.order .f-half{flex:1 1 320px}
.order .brk{flex:1 1 100%;height:0;margin-top:-8px}
.attach.grow{flex:1 1 auto}
.att.bad{border-color:var(--err);color:var(--err)}

/* 포틀릿: 카드 본문(누르면 상세)과 '턴 1회 실행' 줄 */
.p{cursor:default}
.pmain{display:flex;flex-direction:column;text-align:left;width:100%;min-width:0;padding:0;margin:0;background:none;border:0;cursor:pointer;flex:1 1 auto}
.pact{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 9px 6px;border-top:1px dashed var(--line);font-size:11px;color:var(--muted)}
.pact .due{color:var(--accent);font-weight:600}

/* 흐름·상세 */
#rv{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.fi.plain{cursor:default}
.fi.plain:hover{background:none}
.fi .mono{font-size:11px}
.sec{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.sec h4{margin:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.box.lines{margin:0;padding:8px 10px 8px 26px;white-space:normal}
.box.lines li{white-space:pre-wrap}
.plainbox{background:var(--surface)}
.warnbox{border-color:var(--err);color:var(--err)}
.jl .sec{margin-top:4px}
.rv h3 .chip{vertical-align:0}
.rvfoot form{display:flex;flex-direction:column;gap:8px;margin:0}
.rvfoot .hint .ok{color:var(--ok)}
.h2sub{font-weight:400;font-size:13px}

/* 보완 요청 창 */
.frow{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px 10px;margin:0 0 10px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px 10px;min-width:0}
.frow legend{font-size:12px;font-weight:600;padding:0 6px;color:var(--muted)}
.frow legend .rm{border:0;background:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:0 4px}
.frow label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);min-width:0}
.frow label.w{grid-column:1 / -1}
.frow input,.frow select,label.due input{height:34px;border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 8px;font-size:13px;color:var(--ink);width:100%;min-width:0}
label.due{flex-direction:row!important;align-items:center;gap:8px!important;font-size:12px!important;margin-left:auto}
label.due input{width:auto}
#rvz-msg .m{font-size:12px}

/* 안내 문구 */
.m.ok{color:var(--ok)}
.m.bad{color:var(--err)}
.ml{font-size:12px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.toast{position:fixed;left:16px;bottom:16px;z-index:30;width:min(520px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r);padding:10px 12px;font-size:13px;box-shadow:0 6px 24px rgba(8,14,20,.22);overflow-wrap:anywhere;cursor:pointer}
.toast:empty{display:none}
.dlgmsg{font-size:12.5px;min-height:1.2em;overflow-wrap:anywhere}

/* 로그인 */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.login-card{width:min(360px,100%);padding:22px;gap:12px}
.login-card h1{font-size:18px;margin:0}
.login-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.login-card input[type=text],.login-card input[type=password]{height:38px;border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 10px;font-size:14px;color:var(--ink)}
.login-card .btn{justify-content:center;height:38px}
.login-err{color:var(--err);font-size:13px}
.login-card form{margin:0}

@media (max-width:640px){
  .top{position:static}
  .count.sep{padding-left:0;border-left:0}
  .members{padding-left:8px;gap:6px}
  .pact{padding:5px 6px 6px}
  .p .tag{flex-wrap:wrap;gap:3px 6px}
  .frow{grid-template-columns:minmax(0,1fr)}
  .duo .panel{height:480px}
  label.due{margin-left:0}
}
.members .p .foot{flex-direction:column;gap:2px}
.members .p .foot .dn{align-self:flex-end}
.wt{min-width:560px}
.wt td:nth-child(2){min-width:170px}

/* ── 로그인 화면 — sNexus 관리 콘솔 로그인과 같은 구성·치수·색 (토큰 값은 sNexus frontend/src/styles/tokens 에서 옮김) ── */
.snx-login{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:auto;background:#fff;color:#464c53;
  font-family:"Pretendard GOV Variable","Pretendard GOV","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic",Roboto,sans-serif}
.snx-main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0}
.snx-col{width:100%;max-width:480px;padding:0 24px}
.snx-brand{margin:0 0 40px}
.snx-brand h1{margin:0;font-size:40px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:#1e2124}
.snx-form{display:flex;flex-direction:column;margin:0}
.snx-field{display:flex;align-items:center;height:54px;margin-top:12px;box-sizing:border-box;padding:0 8px 0 16px;border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 1px #cdd1d5;transition:box-shadow .15s;cursor:text}
.snx-form>.snx-field:first-child,.snx-form>input[type=hidden]+.snx-field{margin-top:0}
.snx-field:hover{box-shadow:inset 0 0 0 1px var(--info)}
.snx-field:focus-within{box-shadow:inset 0 0 0 2px var(--info)}
.snx-field.is-error,.snx-field.is-error:hover,.snx-field.is-error:focus-within{box-shadow:inset 0 0 0 2px #e71825}
.snx-field .snx-grow{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;margin:0;cursor:text}
.snx-label{font-size:13px;font-weight:500;line-height:1.3;color:#58616a}
.snx-field input{width:100%;min-width:0;margin:0;padding:0;border:0;outline:0;background:transparent;color:#1e2124;font:inherit;font-size:17px;line-height:1.4;appearance:none}
.snx-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;-webkit-text-fill-color:#1e2124}
.snx-eye{flex:none;height:32px;padding:0 10px;border:0;border-radius:16px;background:transparent;color:#58616a;font:inherit;font-size:13px;cursor:pointer}
.snx-eye:hover{background:#f4f5f6;color:#1e2124}
.snx-eye:focus-visible{outline:0;box-shadow:0 0 0 2px var(--info)}
.snx-help{margin:6px 0 0 16px;font-size:13px;color:#ba1722}
.snx-err{margin:16px 0 0;padding:8px 12px;border-radius:6px;background:var(--err-soft);color:#ba1722;font-size:15px;line-height:1.5}
.snx-btn{width:100%;margin-top:24px;padding:14px 20px;border:0;border-radius:12px;background:var(--info);color:#fff;font:inherit;font-size:19px;font-weight:500;line-height:28px;cursor:pointer;transition:background-color .15s}
.snx-btn:hover{background:#0b50d0}
.snx-btn:active{background:#083891}
.snx-btn:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--info)}
.snx-btn:disabled{background:#cdd1d5;color:#8a949e;cursor:not-allowed}
.snx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px;padding:12px 24px;border-top:1px solid #e6e8ea;font-size:13px;color:#8a949e}
.snx-foot b{margin-left:4px;font-weight:400;color:#58616a;font-variant-numeric:tabular-nums}
.snx-foot i{width:1px;height:12px;background:#b1b8be}
@media (prefers-reduced-motion:reduce){.snx-field,.snx-btn{transition:none}}
@media (max-width:480px){.snx-foot i{display:none}}

/* ── 포틀릿의 액션 대기/휴식 스위치 ── */
.p .act{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.p .act.on{color:var(--info)}
.p .act.off{color:var(--ok)}
.sw{position:relative;flex:none;width:34px;height:20px;padding:0;border:0;border-radius:999px;background:var(--idle);cursor:pointer;transition:background-color .15s}
.sw i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw[aria-checked=true]{background:var(--info)}
.sw[aria-checked=true] i{transform:translateX(14px)}
.sw:disabled{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.sw,.sw i{transition:none}}
.pact{flex-wrap:wrap;row-gap:4px}
.p .tag{flex-wrap:wrap;gap:4px 7px}
.phead{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;padding:0;margin:0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.p .tag .act{margin-left:auto}
.p .act .st{margin-left:0;font-size:12px}
.p .act.on .st{color:var(--info)}
.p .act.off .st{color:var(--ok)}
.auto.mdl{flex:none;white-space:nowrap;margin-left:10px}
.auto.mdl select{width:auto}
.ops{gap:12px!important}
.opsg{border:1px solid var(--line);border-radius:var(--r);padding:8px 12px 12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.opsg legend{font-size:12px;font-weight:600;padding:0 6px;color:var(--muted)}
.opsf{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:3px 12px;align-items:center;font-size:13px}
.opsf .l{font-weight:600}
.opsf .v{display:flex;align-items:center;gap:6px}
.opsf input,.opsf select{height:34px;border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:0 8px;font-size:13px;color:var(--ink);width:100%;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.opsf select{text-align:left}
.opsf .u{font-size:12px;color:var(--muted);flex:none;min-width:2em}
.opsf .note{grid-column:1 / -1}
@media (max-width:520px){.opsf{grid-template-columns:minmax(0,1fr)}}
.count.plan .rs{font-style:normal;font-size:inherit;color:var(--muted);margin-left:0}
.count.plan b{margin-left:2px}

/* ── 자원 모니터링 현황 (secmon) ── */
.monh,.monr{display:grid;grid-template-columns:minmax(150px,1.5fr) 6.5em minmax(84px,.8fr) minmax(84px,.8fr) minmax(84px,.8fr) minmax(0,1.7fr) 6.5em minmax(8em,1fr) 8.6em;gap:6px 12px;align-items:center;padding:8px 12px;font-size:12.5px}
.monh{font-size:11.5px;color:var(--muted);font-weight:600;background:var(--sunken);border-bottom:1px solid var(--line)}
.mon{list-style:none;margin:0;padding:0}
.mon>li{border-bottom:1px solid var(--line)}
.monr{width:100%;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;font-size:12.5px}
.monr:hover{background:var(--sunken)}
.monr .c-name{display:flex;flex-direction:column;min-width:0}
.monr .c-name small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.monr .c-top,.monr .c-none{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.monr .c-none{grid-column:span 4}
.monr .c-at{font-family:var(--mono);font-size:11px;color:var(--muted)}
.monr .c-at.stale{color:var(--err)}
.mon-empty{padding:14px 12px;color:var(--muted);font-size:12.5px}
.monf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;font-size:11.5px;color:var(--muted)}
.monf b{color:var(--ink);font-family:var(--mono);font-weight:500}
.monf b.bad{color:var(--err);font-weight:700}
.meter{position:relative;display:block;height:16px;background:var(--sunken);border:1px solid var(--line);border-radius:3px;overflow:hidden;min-width:60px}
.meter i{position:absolute;inset:0 auto 0 0;background:#7fa8e8;max-width:100%}
.meter.ok i{background:#7cc3a1}.meter.warn i{background:#e6b85c}.meter.err i{background:#e07a6f}.meter.mem i{background:#b59ad8}
.meter b{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:5px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink)}
.meter.big{height:22px}
.chip.warn{background:var(--warn-soft);color:#8a5a00}
dialog.wide:has(.monin){width:min(980px,calc(100vw - 32px))}
.mon2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mon2 h3 small,.monin h3 small{font-weight:400;margin-left:6px}
.spark{width:100%;height:44px;background:var(--sunken);border:1px solid var(--line);border-radius:4px}
.spark polyline{fill:none;stroke:var(--info);stroke-width:1.5;vector-effect:non-scaling-stroke}
.spark.mem polyline{stroke:#7a52b8}
.mt{width:100%;border-collapse:collapse;font-size:12px}
.mt th{text-align:left;font-size:11px;color:var(--muted);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--line);background:var(--sunken)}
.mt td{padding:4px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.mt td.n{font-family:var(--mono)}
.mt td .meter{min-width:110px}
.mon-item{border:1px solid var(--line);border-radius:var(--r);margin:0 0 6px;background:var(--surface)}
.mon-item summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 10px;cursor:pointer;font-size:12.5px}
.mon-item summary .k{font-size:11px;color:var(--muted)}
.mon-item summary .note{margin-left:auto}
.mon-item>*:not(summary){margin:0 10px 8px}
.mon-item .view{font-size:12.5px;background:var(--sunken);border-left:3px solid var(--err);padding:6px 9px;border-radius:0 4px 4px 0}
.pb{padding-left:20px;font-size:12.5px;display:flex;flex-direction:column;gap:5px}
.pb b{display:inline-block;min-width:2.6em;color:var(--accent)}
.pb code{display:block;margin-top:3px;padding:4px 7px;background:var(--sunken);border:1px solid var(--line);border-radius:4px;font-family:var(--mono);font-size:11.5px;overflow-wrap:anywhere;white-space:pre-wrap}
.mon-notify{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column-reverse;gap:8px;width:min(400px,calc(100vw - 32px));max-height:80vh;overflow:hidden}
.mon-notify:empty{display:none}
.mon-pop{position:relative;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--warn);border-radius:6px;box-shadow:0 8px 24px rgba(8,14,20,.22);padding:10px 30px 9px 12px;font-size:12.5px}
.mon-pop.crit{border-left-color:var(--err)}
.mon-pop .x{position:absolute;top:4px;right:6px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px}
.mon-pop .t{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.mon-pop .b{font-weight:600;overflow-wrap:anywhere}
.mon-pop .s{margin-top:4px;color:var(--muted);font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mon-pop .f{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
@media (max-width:900px){
  .monh{display:none}
  .monr{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .monr .c-name{grid-column:1}.monr .c-top,.monr .c-none{grid-column:1 / -1}
  .monr .meter{grid-column:1 / -1}
  .mon2{grid-template-columns:minmax(0,1fr)}
}
.monr .chip,.mon-item .chip,.mon-pop .chip{margin-left:0}
.chip.idle{background:var(--idle-soft);color:var(--muted)}
.mon-notify .mon-pop:nth-child(n+4){display:none}
.mon-pending{border-top:1px solid var(--line);padding:8px 14px;font-size:12px;color:var(--muted)}
.mon-pending summary{cursor:pointer}
.mon-pending-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.mon-pending-list span{color:var(--text,inherit)}
.mon-pending-list small{color:var(--muted)}

/* ── IT자산 모니터링 페이지 ── */
.mon-kpi{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:10px 0 14px}
@media(max-width:1200px){.mon-kpi{grid-template-columns:repeat(5,1fr)}}
@media(max-width:700px){.mon-kpi{grid-template-columns:repeat(2,1fr)}}
.kpi-item{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 6px;text-align:center;min-width:0}
.kpi-item b{display:block;font-size:20px;font-family:var(--mono);line-height:1.1}
.kpi-item span{display:block;font-size:11px;color:var(--muted);line-height:1.25;word-break:keep-all}
.kpi-item b.bad{color:var(--err)} .kpi-item b.warnn{color:var(--warn)}
.src-on-n{color:var(--ok);font-weight:700} .src-off-n{color:var(--idle);font-weight:700}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px}
.asset-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--idle);border-radius:7px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.asset-card.lv-ok{border-left-color:var(--ok)} .asset-card.lv-warn{border-left-color:var(--warn)} .asset-card.lv-err{border-left-color:var(--err)}
.asset-card header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.asset-name{flex:1;min-width:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;padding:0;display:flex;flex-direction:column}
.asset-name b{font-size:14px} .asset-name small{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snx{font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;border:1px solid var(--line)}
.snx.src-on{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.snx.src-off{color:var(--idle);background:var(--idle-soft);border-color:transparent}
.snx.src-local{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.meters{display:flex;flex-direction:column;gap:4px}
.meter-row{display:flex;align-items:center;gap:8px}
.meter-row label{width:40px;font-size:11px;color:var(--muted);flex:none}
.meter{position:relative;flex:1;height:16px;background:var(--sunken);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--ok);opacity:.55}
.meter.warn i{background:var(--warn)} .meter.err i{background:var(--err)}
.meter b{position:absolute;right:6px;top:0;line-height:16px;font-size:10.5px;font-family:var(--mono)}
.top-proc{font-size:11px;color:var(--muted);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-none{font-size:12px;color:var(--muted);padding:6px 0}
.cnts{display:flex;gap:8px;flex-wrap:wrap}
.cnt{font-size:11.5px;border:1px solid var(--line);border-radius:4px;padding:1px 7px;color:var(--muted)}
.cnt.has{color:var(--ink)} .cnt.bad{color:var(--err);border-color:var(--err)}
.cnt em{color:var(--err);font-style:normal}
.mini{background:var(--sunken);border-radius:5px;padding:6px 8px}
.mini-h{font-size:10.5px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.mini-row{display:flex;align-items:center;gap:5px;font-size:12px;padding:1px 0}
.mini-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-act{flex:none;font-size:11px}
.sev{font-size:10px;font-weight:700;border-radius:3px;padding:0 5px;flex:none;color:#fff}
.sev.s-critical{background:var(--sev-critical)} .sev.s-high{background:var(--err)} .sev.s-medium{background:var(--warn)} .sev.s-low{background:var(--sev-low)} .sev.s-info{background:var(--idle)}
.sev.s-medium{color:#fff}
.tag-kev{font-size:9.5px;font-weight:700;color:#fff;background:var(--sev-critical);border-radius:3px;padding:0 4px;flex:none}
.tag-exp{font-size:9.5px;color:var(--err);border:1px solid var(--err);border-radius:3px;padding:0 4px;flex:none}
.tag-att{font-size:9.5px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 4px;font-family:var(--mono);flex:none}
.asset-foot{margin-top:auto} .note.stale{color:var(--err)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}
.soc-box{display:flex;flex-direction:column;gap:10px}
.soc-flow{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap}
.pstage{flex:1;min-width:92px;background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.pstage.on{border-color:var(--ok);background:var(--ok-soft)} .pstage.off{opacity:1;border-style:dashed}
.pstage .pn{font-size:10px;color:var(--muted);font-family:var(--mono)}
.pstage b{font-size:12px} .pstage em{font-size:10px;color:var(--muted);font-style:normal}
.parrow{align-self:center;color:var(--muted)}
.soc-q-h,.feat-h{font-size:12px;font-weight:600;margin-bottom:5px;display:flex;justify-content:space-between}
.soc-item,.act .act-h{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 0;border-top:1px solid var(--line)}
.soc-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-note{font-size:11px;color:var(--muted);margin-top:4px}
.act-list{list-style:none;display:flex;flex-direction:column;gap:6px}
#mon-page-body .act{border:1px solid var(--line);border-radius:6px;padding:7px 9px}
.act-state{font-size:10.5px;font-weight:700;border-radius:3px;padding:1px 7px;color:#fff;flex:none}
.act-state.s-open{background:var(--idle)} .act-state.s-mitigating{background:var(--warn)} .act-state.s-verifying{background:var(--accent)}
.act-state.s-done{background:var(--ok)} .act-state.s-accepted{background:var(--accent-2)} .act-state.s-wont{background:var(--idle)}
.act-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-d{font-size:11.5px;color:var(--muted);margin:4px 0;white-space:pre-wrap}
.act-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:8px;flex-wrap:wrap}
.act-btns{display:flex;gap:10px} .ok-link{color:var(--ok)}
.act-done{margin-top:8px} .act-done summary{cursor:pointer;font-size:12px;color:var(--muted)}
.act-done-row{display:flex;gap:8px;align-items:center;font-size:12px;padding:2px 0}
.act-done-form{margin-top:6px;max-height:320px;overflow-y:auto}
.act-done-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;padding:4px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.act-done-all{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted)}
.act-done-tools{display:inline-flex;gap:12px}
.act-done-row{padding:4px 0;border-bottom:1px solid var(--line)}
.act-done-row .act-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.act-done-row .note{white-space:nowrap}
.act-done-row input,.act-done-all input{margin:0;flex:none}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:2px;columns:2;column-gap:20px}
@media(max-width:700px){.feat-list{columns:1}}
.feat-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 0;break-inside:avoid}
.fstate{font-size:9.5px;font-weight:700;border-radius:3px;padding:0 5px;flex:none;color:#fff}
.fstate.s-on{background:var(--ok)} .fstate.s-planned{background:var(--accent)} .fstate.s-off{background:var(--idle)}
.fgrp{font-size:10px;color:var(--muted);flex:none;width:92px}
.fname{flex:1;min-width:0} .feat-row.f-off .fname{color:var(--muted)}
.pstage.off b,.pstage.off em,.pstage.off .pn{color:var(--muted)}
.muted-note{color:var(--muted);font-size:13px;padding:6px 0}

/* ── 공격 사슬 · 방어 점검 · 모의 공격 ── */
.kpi-item .pt{font-size:11px;font-weight:400;color:var(--muted)}
.ap-legend{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.apn{width:11px;height:11px;border-radius:50%;display:inline-block;margin-left:6px}
.apn.entry{background:var(--warn)} .apn.reached{background:var(--err)} .apn.crown{background:var(--accent-2)} .apn.safe{background:var(--ok)}
.ap-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--sunken)}
.ap-svg{width:100%;min-width:600px;display:block}
.ap-edge{stroke:var(--err);stroke-width:1.5;opacity:.5} .ap-edge.shared{stroke-dasharray:4 3;opacity:.8}
.ap-node circle{stroke:var(--surface);stroke-width:2;fill:var(--ok)}
.ap-node.entry circle{fill:var(--warn)} .ap-node.reached circle{fill:var(--err)} .ap-node.crown circle{fill:var(--accent-2)}
.ap-node text{font-size:11px;fill:var(--ink)}
.choke-h{font-size:12px;font-weight:600;margin:8px 0 4px;color:var(--err)}
.choke-list{list-style:none;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.choke-list .mono{font-family:var(--mono);color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:3px;padding:0 4px}
.def-sum,.def-none{font-size:12px;color:var(--muted);margin-bottom:6px}
.def-list{list-style:none;display:flex;flex-direction:column;gap:3px}
.def-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.grade{font-weight:800;font-size:12px;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.g-A{background:var(--ok)} .g-B{background:#5a9a4a} .g-C{background:var(--warn)} .g-D{background:var(--warn)} .g-F{background:var(--err)} .g-none{background:var(--idle)}
.def-name{flex:1;min-width:0;display:flex;flex-direction:column} .def-name small{color:var(--muted);font-size:11px}
.def-bar{width:120px;height:8px;background:var(--sunken);border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
.def-bar i{display:block;height:100%;background:var(--ok)}
.def-sc{font-family:var(--mono);font-size:12px;width:24px;text-align:right}
.def-cnt{font-size:11px;color:var(--muted);flex:none}
.tag-dt{font-size:9.5px;color:var(--accent-2);border:1px solid var(--accent-2);border-radius:3px;padding:0 4px;font-style:normal}
.tag-sim{font-size:9.5px;font-weight:700;color:#fff;background:var(--accent-2);border-radius:3px;padding:0 4px;flex:none}
.emu-f{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);margin-bottom:8px}
.emu-f select{border:1px solid var(--line);border-radius:4px;background:var(--sunken);padding:4px 8px;font-size:13px;color:var(--ink)}
.emu-scn{display:flex;flex-wrap:wrap;gap:6px}
.emu-btn{height:auto;padding:5px 10px;flex-direction:column;align-items:flex-start;gap:0}
.emu-btn small{font-weight:400;color:var(--muted);font-size:10px}
.emu-foot{margin-top:8px;font-size:12px;display:flex;gap:10px;align-items:center}
.toast-msg{padding:8px 12px;border-radius:6px;font-size:13px}
.toast-msg.err{background:var(--err-soft);color:var(--err)}

/* ── 외부 점검 결과 연동 · 위험 코드 유형 ── */
.fi-import{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.fi-import textarea{flex:1;border:1px solid var(--line);border-radius:5px;background:var(--sunken);padding:6px 8px;font-size:12px;color:var(--ink);font-family:var(--mono);resize:vertical}
.fi-sum{font-size:12px;color:var(--muted);margin-bottom:8px}
.vc-corroborated{color:var(--err)} .vc-fp{color:var(--ok)} .vc-review{color:var(--warn)}
.fi-list{list-style:none;display:flex;flex-direction:column;gap:6px}
#mon-page-body .fi{display:block;cursor:default;border:1px solid var(--line);border-left:4px solid var(--idle);border-radius:6px;padding:7px 9px}
#mon-page-body .fi.corroborated{border-left-color:var(--err)} #mon-page-body .fi.likely{border-left-color:var(--warn)} #mon-page-body .fi.likely_fp{border-left-color:var(--ok)} #mon-page-body .fi.needs_review{border-left-color:var(--warn)}
.fi-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fi-t{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-reasons{list-style:none;margin:5px 0 0;padding-left:0;display:flex;flex-direction:column;gap:1px}
.fi-reasons li{font-size:11.5px;padding-left:16px;position:relative;color:var(--muted)}
.fi-reasons li.ok:before{content:"✓";position:absolute;left:0;color:var(--ok)}
.fi-reasons li.no:before{content:"·";position:absolute;left:4px;color:var(--muted)}
.fi-pat{font-size:11px;color:var(--muted);margin-top:4px}
.fi-pat .mono,.cp .mono{font-family:var(--mono);border:1px solid var(--line);border-radius:3px;padding:0 4px;margin-left:4px;font-size:10.5px}
.fi-foot{margin-top:5px;display:flex;gap:12px}
.fi-missed{margin-top:10px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.cp{border:1px solid var(--line);border-left:4px solid var(--idle);border-radius:7px;padding:9px 11px}
.cp.s-critical{border-left-color:var(--sev-critical)} .cp.s-high{border-left-color:var(--err)} .cp.s-medium{border-left-color:var(--warn)}
.cp header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.cp header b{font-size:13px}
.cp-why{font-size:12px;color:var(--ink);margin:0 0 6px}
.cp-col{font-size:11.5px;margin-top:4px} .cp-col>b{font-size:11px;color:var(--muted)}
.cp-col ul{margin:2px 0 0;padding-left:16px} .cp-col li{margin:1px 0}
.cp-col.safe>b{color:var(--ok)}

/* ── 계정-자산 접근 관계 (측면 이동) ── */
.apl-acc{display:inline-block;width:16px;height:0;border-top:2px dashed var(--accent-2);vertical-align:middle;margin-left:6px}
.ap-acc{stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 3;opacity:.55}
.ap-acc.risky{stroke:var(--err);opacity:.8}
.acc-sum{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acc-h,.acc-row{display:grid;grid-template-columns:1.6fr .8fr .9fr .8fr 2fr;gap:8px;align-items:center}
.acc-h{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:0 0 4px;border-bottom:1px solid var(--line)}
.acc-list{list-style:none}
.acc-row{font-size:12.5px;padding:4px 0;border-bottom:1px solid var(--line)}
.acc-row .bad{color:var(--err);font-weight:600}
.tag-over{font-size:9.5px;color:var(--err);border:1px solid var(--err);border-radius:3px;padding:0 4px;font-style:normal}
.acc-ids{display:flex;flex-wrap:wrap;gap:3px}
.acc-ids .mono{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:3px;padding:0 4px;color:var(--muted)}

/* ── AI SOC 자동 분류·제안 ── */
.triage-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-top:6px}
.triage{border:1px solid var(--line);border-left:4px solid var(--idle);border-radius:6px;padding:7px 9px}
.triage.d-incident{border-left-color:var(--err)} .triage.d-remediate{border-left-color:var(--warn)} .triage.d-training{border-left-color:var(--accent-2)}
.triage-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.triage-h .soc-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.triage-why{list-style:none;margin:5px 0 0;padding-left:0;display:flex;flex-direction:column;gap:1px}
.triage-why li{font-size:11.5px;color:var(--muted);padding-left:14px;position:relative}
.triage-why li:before{content:"·";position:absolute;left:4px}
.triage-prop{font-size:12px;margin-top:5px;background:var(--sunken);border-radius:4px;padding:4px 7px}
.triage-prop b{color:var(--accent);margin-right:4px}
.triage-foot{display:flex;gap:12px;margin-top:5px}

/* ═══════════════════════════════════════════════════════════════════════════
   sAgent 디자인 시스템 — 컴포넌트 정규화 (tokens.css 변수만 참조)
   흩어져 있던 상태색·심각도·버튼·칩·등급·태그를 토큰으로 통일하고, 대비·초점·간격을 다듬는다.
   cascade 상 뒤에 와서 앞의 개별 규칙을 덮어쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 초점: 키보드 사용자에게 또렷한 포커스 링(접근성) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

/* 표면·타이포 위계 — 현황판은 원래의 컴팩트 패널을 유지한다(래퍼 패딩·그림자·h2 아래 여백 없음,
   h2 는 전폭 구분선). 과거 리뉴얼이 .panel 에 padding/box-shadow 를, h2 에 margin 을 덧대 "이중 여백"이
   생겼던 것을 되돌린다. 모니터링 전용 여백은 아래 #mon-page-body 규칙에서만 따로 준다. */
.brand h1{letter-spacing:-.02em}
.note,.muted-note,.sub{color:var(--muted)}

/* 버튼 */
:where(#mon-page-body,.monin) .btn{height:34px;padding:0 var(--sp-4);border-radius:var(--r-sm);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:var(--fw-med);font-size:var(--fs-base);cursor:pointer;transition:filter var(--dur) var(--ease)}
.btn:hover{filter:brightness(1.06)} .btn:active{filter:brightness(.94)}
.btn.ghost{background:transparent;color:var(--accent)} .btn.ghost:hover{background:var(--accent-soft)}
.btn.warn{background:transparent;border-color:var(--err);color:var(--err)}
.link.plain{color:var(--accent);cursor:pointer} .link.plain:hover{text-decoration:underline} .ok-link{color:var(--ok)}

/* 칩(상태 배지) — 연한 배경 + 읽히는 글자 */
:where(#mon-page-body,.monin) .chip{border-radius:var(--r-pill);padding:1px 9px;font-size:var(--fs-sm);font-weight:var(--fw-med);border:1px solid transparent;display:inline-flex;align-items:center;gap:4px}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.err{background:var(--err-soft);color:var(--err)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.idle{background:var(--idle-soft);color:var(--muted)}
.chip.sched,.chip.info{background:var(--info-soft);color:var(--info)}

/* 심각도(채움·흰 글자) */
.sev{font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--r-sm);padding:0 6px;color:#fff}
.sev.s-critical{background:var(--sev-critical)} .sev.s-high{background:var(--sev-high)}
.sev.s-medium{background:var(--sev-medium)} .sev.s-low{background:var(--sev-low)} .sev.s-info{background:var(--sev-info)}

/* 램프(데몬 상태) */
.lamp{background:var(--idle)} .lamp.working{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.lamp.error{background:var(--err);box-shadow:0 0 0 3px var(--err-soft)}

/* 자동 실행 On/Off 토글(상태 표시) */
.swi{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.swi i{position:relative;width:30px;height:16px;border-radius:var(--r-pill);background:var(--idle);flex:none;transition:background var(--dur) var(--ease)}
.swi i:before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left var(--dur) var(--ease)}
.swi.on i{background:var(--ok)} .swi.on i:before{left:16px}
.swi em{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);letter-spacing:.02em}
.swi.on em{color:var(--ok)}

/* KPI 띠 */
.kpi-item{border-radius:var(--r);box-shadow:var(--sh-1)}
.kpi-item b{font-weight:var(--fw-bold)} .kpi-item b.bad{color:var(--err)} .kpi-item b.warnn{color:var(--warn)}
.src-on-n{color:var(--ok)} .src-off-n{color:var(--idle)}

/* 자산 카드 상태 테두리 */
.asset-card.lv-ok{border-left-color:var(--ok)} .asset-card.lv-warn{border-left-color:var(--warn)} .asset-card.lv-err{border-left-color:var(--err)}
.meter.warn i{background:var(--warn)} .meter.err i{background:var(--err)} .meter i{background:var(--ok)}

/* sNexus 출처 배지 */
.snx.src-on{color:var(--ok);background:var(--ok-soft)} .snx.src-off{color:var(--idle);background:var(--idle-soft)} .snx.src-local{color:var(--accent);background:var(--accent-soft)}

/* 태그류 */
.tag-kev{background:var(--sev-critical);color:#fff} .tag-exp{color:var(--err);border-color:var(--err)}
.tag-att{color:var(--muted);border-color:var(--line-strong)} .tag-sim{background:var(--accent-2);color:#fff}
.tag-over{color:var(--err);border-color:var(--err)} .tag-dt{color:var(--accent-2);border-color:var(--accent-2)}

/* 방어 점검 등급 A~F (ok→err 스케일) */
.grade{font-weight:var(--fw-bold)} .g-A{background:var(--ok)} .g-B{background:var(--c2)} .g-C{background:var(--warn)} .g-D{background:var(--sev-medium)} .g-F{background:var(--err)} .g-none{background:var(--idle)}

/* 공격 사슬 그래프 노드/간선 */
.apn.entry,.ap-node.entry circle{background:var(--warn)} .ap-node.entry circle{fill:var(--warn)}
.apn.reached,.ap-node.reached circle{background:var(--err)} .ap-node.reached circle{fill:var(--err)}
.apn.crown,.ap-node.crown circle{background:var(--accent-2)} .ap-node.crown circle{fill:var(--accent-2)}
.apn.safe{background:var(--ok)} .ap-node circle{fill:var(--ok)}
/* 수집 전(미연결) = 아직 활성 아님: 빈 원·회색 점선으로 '진짜 안전'과 구분한다(색 채움 규칙보다 뒤라 이긴다) */
.ap-node.off circle{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:2.5 2}
.ap-node.off text{fill:var(--faint)}
.ap-off-t{fill:var(--faint);font-size:10px}
.apn.off{background:var(--surface);border:1.5px dashed var(--line-strong);box-sizing:border-box}
.ap-edge{stroke:var(--err)} .ap-acc{stroke:var(--accent-2)} .ap-acc.risky{stroke:var(--err)} .apl-acc{border-top-color:var(--accent-2)}

/* 조치·판정·분류 상태색 */
.act-state.s-mitigating{background:var(--warn)} .act-state.s-verifying{background:var(--accent)}
.act-state.s-done{background:var(--ok)} .act-state.s-accepted{background:var(--accent-2)} .act-state.s-open,.act-state.s-wont{background:var(--idle)}
.vc-corroborated{color:var(--err)} .vc-fp{color:var(--ok)} .vc-review{color:var(--warn)}
#mon-page-body .fi.corroborated{border-left-color:var(--err)} #mon-page-body .fi.likely,#mon-page-body .fi.needs_review{border-left-color:var(--warn)} #mon-page-body .fi.likely_fp{border-left-color:var(--ok)}
.triage.d-incident{border-left-color:var(--err)} .triage.d-remediate{border-left-color:var(--warn)} .triage.d-training{border-left-color:var(--accent-2)}
.triage-prop b,.cp-why b{color:var(--accent)}
.pstage.on{border-color:var(--ok);background:var(--ok-soft)}
.fstate.s-on{background:var(--ok)} .fstate.s-planned{background:var(--accent)} .fstate.s-off{background:var(--idle)}
.cp.s-critical{border-left-color:var(--sev-critical)} .cp.s-high{border-left-color:var(--err)} .cp.s-medium{border-left-color:var(--warn)}

/* 코드 패턴·접근 과다 강조 */
.acc-row .bad,.def-cnt b.bad,.cnt.bad{color:var(--err)}

/* ═══════════════════════════════════════════════════════════════════════════
   IT자산 모니터링 — 디자인 정리(여백·가독성·그래프·팝업 일괄)
   현황판과 같은 토큰을 쓰되, 모니터링 페이지의 표/카드/그래프에 숨 쉴 여백과 구분선을 준다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 페이지 리듬 — 현황판과 같은 컴팩트 여백으로 통일(패널 24px→12px, 헤더는 전폭 구분선 유지) */
#mon-page-body{display:flex;flex-direction:column;gap:var(--sp-3)}
#mon-page-body .panel{padding:0}
#mon-page-body .panel>h2{font-size:14px;font-weight:700;margin:0;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
#mon-page-body .panel>:not(h2){padding-left:var(--sp-3);padding-right:var(--sp-3)}
#mon-page-body .panel>*:nth-child(2){padding-top:var(--sp-3)}
#mon-page-body .panel>*:last-child{padding-bottom:var(--sp-3)}
.two-col{gap:var(--sp-3)}
.mon-kpi{gap:var(--sp-2);margin:0 0 var(--sp-2)}
.kpi-item{padding:var(--sp-3) var(--sp-2)}

/* ── 공격 사슬 분석 그래프 ── */
.ap-howto{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh);margin:0 0 var(--sp-3);max-width:90ch}
.ap-howto b{color:var(--ink)}
.ap-legend{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.ap-legend span{display:inline-flex;align-items:center;gap:var(--sp-1)}
.ap-legend .apn{width:12px;height:12px;border-radius:50%;display:inline-block;margin:0}
.ap-legend-sep{color:var(--ink)}
.ap-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);padding:var(--sp-2)}
.ap-svg{width:100%;max-width:1320px;min-width:720px;display:block;margin:0 auto}
.ap-col{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
.ap-axis{fill:var(--faint);font-size:13px;font-weight:var(--fw-med);text-anchor:middle}
.ap-axis.on{fill:var(--ink)}
.ap-node circle{stroke:var(--surface);stroke-width:2.5}
.ap-node text{fill:var(--ink);font-size:13.5px;dominant-baseline:middle}
.ap-edge{stroke:var(--err);stroke-width:1.6;opacity:.6}
.ap-acc{stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 3;opacity:.6}
.ap-acc.risky{stroke:var(--err);opacity:.85}
.choke-h{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--err);margin:var(--sp-3) 0 var(--sp-2)}
.choke-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.choke-list li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-base)}
.choke-t{color:var(--muted)}

/* ── 방어 점검 표 ── */
.def-sum{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.def-list{display:flex;flex-direction:column}
.def-row{display:grid;grid-template-columns:22px minmax(0,1.6fr) 120px 34px auto;gap:var(--sp-3);align-items:center;padding:var(--sp-2) 0;border-top:1px solid var(--line)}
.def-row:first-child{border-top:0}
.grade{width:22px;height:22px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-sm)}
.def-name b{font-size:var(--fs-base)} .def-name small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.def-bar{height:8px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.def-bar i{display:block;height:100%;background:var(--ok)}
.def-sc{font-family:var(--mono);font-size:var(--fs-sm);text-align:right}
.def-cnt{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.def-none{color:var(--muted);font-size:var(--fs-sm)}
/* 행 클릭 → 모의 공격 대상 선택 (글자는 드래그 복사 가능하도록 선택 허용) */
.def-row.def-pick{cursor:pointer;border-radius:var(--r-sm);transition:background var(--dur) var(--ease)}
.def-row.def-pick:hover{background:var(--accent-soft)}
.def-row.def-pick.sel{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.def-row .def-name,.def-row .def-name *{user-select:text;cursor:text}

/* ── 모의 공격 ── */
.emu{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.emu-target{font-size:var(--fs-base);display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap}
.emu-target b{color:var(--accent);font-weight:var(--fw-bold)}
.emu-target-hint{font-size:var(--fs-xs);color:var(--muted)}
.emu-f{gap:var(--sp-1)} .emu-f select{height:32px}
.emu-scn{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.emu-btn{height:auto;padding:var(--sp-2) var(--sp-3);line-height:1.3}
.emu-foot{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);margin-top:var(--sp-2)}

/* ── 외부 점검 결과 연동 ── */
.fi-import{display:flex;gap:var(--sp-2);align-items:stretch;margin-bottom:var(--sp-3)}
.fi-import textarea{flex:1;min-height:60px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);font-family:var(--mono);font-size:var(--fs-sm)}
.fi-sum{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-3)}
.fi-list{display:flex;flex-direction:column;gap:var(--sp-2)}
#mon-page-body .fi{border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:var(--sp-3)}
.fi-h{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fi-reasons{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.fi-reasons li{font-size:var(--fs-sm);padding-left:18px;position:relative;color:var(--muted);line-height:var(--lh)}
.fi-reasons li.ok{color:var(--ink)} .fi-reasons li.ok:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:var(--fw-bold)}
.fi-reasons li.no:before{content:"–";position:absolute;left:2px;color:var(--faint)}
.fi-pat{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2)}
.fi-foot{margin-top:var(--sp-2);display:flex;gap:var(--sp-4)}
.fi-missed{margin-top:var(--sp-4)}

/* ── 보안 조치·AI SOC·완료 목록 공통 간격 ── */
.act-list{display:flex;flex-direction:column;gap:var(--sp-2)}
#mon-page-body .act{padding:var(--sp-3)} .act-h{gap:var(--sp-2)} .act-foot{margin-top:var(--sp-2)}
.triage-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.triage{padding:var(--sp-3);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r)}
.triage-ctx{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);margin-top:var(--sp-2)}
.ctx-tag{font-size:var(--fs-xs);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 6px;color:var(--muted);background:var(--sunken)}
.ctx-tag.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)} .ctx-tag.err{color:var(--err);border-color:var(--err);background:var(--err-soft)}
.triage-h{gap:var(--sp-2)} .triage-why{margin-top:var(--sp-2)} .triage-prop{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--sunken);border-radius:var(--r-sm)}
.triage-foot{margin-top:var(--sp-2);display:flex;gap:var(--sp-4)}
.soc-flow{gap:var(--sp-2);margin-bottom:var(--sp-3)}
.pstage{padding:var(--sp-2) var(--sp-3)}
.soc-note{font-size:var(--fs-sm);color:var(--muted);line-height:var(--lh);margin-top:var(--sp-3)}

/* ── 위험 코드 유형 플레이북 (빨간 배경 X → 밝은 카드 + 색 테두리 + 배지) ── */
.cp-grid{gap:var(--sp-3)}
.cp{background:var(--surface);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:var(--sp-2) var(--sp-3)}
.cp header{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.cp header b{color:var(--ink);font-size:var(--fs-base)}
.cp header .mono{font-size:var(--fs-xs);color:var(--muted)}
.cp-why{color:var(--ink);font-size:var(--fs-sm);line-height:var(--lh);margin:0 0 var(--sp-2)}
.cp-col{font-size:var(--fs-sm);margin-top:var(--sp-2)} .cp-col>b{display:block;color:var(--muted);font-size:var(--fs-xs);margin-bottom:2px}
.cp-col.safe>b{color:var(--ok)} .cp-col ul{margin:0;padding-left:16px;line-height:var(--lh)}

/* 기능 목록 간격 */
.feat-list{gap:var(--sp-1)} .feat-row{padding:3px 0}
.mon-pending{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line)}

/* ── 격리 랩 업로드·샘플 분석 ── */
.lab-up{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.lab-up-row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.lab-up-row input[type=text],.lab-up-row select{flex:0 1 240px;min-width:0;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2);background:var(--surface);color:var(--ink);font:inherit}
/* 파일 입력: 네이티브 컨트롤은 숨기고, 파일명(왼쪽, 넉넉한 폭) + 「파일 선택」 라벨 버튼(가장 오른쪽)으로 대체 */
.lab-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.lab-file-name{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.lab-filebtn{flex:none;width:86px;height:34px;justify-content:center;text-align:center}
.lab-file-input:focus-visible+.lab-filebtn{outline:2px solid var(--accent);outline-offset:2px}
/* 붙여넣기 입력창 + 「정적 분석」 버튼 한 줄 — 버튼 높이는 입력창 초기 높이와 같게(입력창은 아래로 더 늘릴 수 있음) */
.lab-up-main{display:flex;gap:var(--sp-2);align-items:flex-start}
.lab-up textarea{flex:1 1 auto;min-width:0;box-sizing:border-box;height:68px;min-height:68px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);font-family:var(--mono);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);resize:vertical}
.lab-run{flex:none;width:86px;height:68px;justify-content:center;text-align:center}
.lab-up-foot{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.lab-list{margin-top:var(--sp-2)} .lab-list>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--muted);padding:var(--sp-1) 0}
.lab-item{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-3);margin-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2)}
.lab-h{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} .lab-h b{font-size:var(--fs-base)} .lab-at{margin-left:auto}
.lab-note{font-size:var(--fs-sm);color:var(--muted)}
.lab-sec{font-size:var(--fs-sm);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-2)} .lab-sec>b{color:var(--ink);margin-right:var(--sp-1)} .lab-sec>b small{font-weight:var(--fw-reg);color:var(--muted)}
.lab-chip{font-size:var(--fs-xs);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:0 6px;color:var(--muted);background:var(--sunken)} .lab-chip em{font-style:normal;font-weight:var(--fw-bold);color:var(--ink)}
.lab-chip.s-critical{border-color:var(--sev-critical);color:var(--sev-critical);background:var(--err-soft)} .lab-chip.s-high{border-color:var(--err);color:var(--err);background:var(--err-soft)} .lab-chip.s-medium{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.lab-cov{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%} .lab-cov li{font-size:var(--fs-sm)} .lab-cov-k{font-weight:var(--fw-bold)} .lab-cov li.ok .lab-cov-k{color:var(--ok)} .lab-cov li.no .lab-cov-k{color:var(--err)}
.lab-impact{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);width:100%}
.lab-judge{display:flex;align-items:center;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:var(--sp-2);font-size:var(--fs-sm)}
.lab-judge-l{color:var(--muted)} .lab-judge label{display:inline-flex;align-items:center;gap:4px} .lab-judge input[type=text]{flex:1 1 160px;min-width:0;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--sp-2);background:var(--surface);color:var(--ink);font:inherit}
.lab-judge select{height:28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit}
.lab-verdict{font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--r-sm);padding:1px 7px;color:#fff} .lab-verdict.v-y{background:var(--err)} .lab-verdict.v-n{background:var(--ok)} .lab-verdict.v-u{background:var(--idle)}
.lab-x{margin-left:var(--sp-2)}

/* ── 상세 팝업(#viewer) 가독성·여백 ── */
#viewer.wide .dlg:has(.monin){max-width:980px;padding:0}
/* 앞의 '.dlg .in{padding}' 이 더 구체적이라 .monin 만으로는 여백이 먹지 않았다 → 선택자를 맞춘다. 하단은 표 아래 5줄(약 96px) 여백 */
.dlg .in.monin{padding:var(--sp-4) var(--sp-4) 96px;display:flex;flex-direction:column;gap:var(--sp-4)}
.monin>div>h3{font-size:var(--fs-base);font-weight:var(--fw-bold);margin:0 0 var(--sp-2);padding-bottom:var(--sp-1);border-bottom:1px solid var(--line)}
.monin>div>h3 small{font-weight:var(--fw-reg);color:var(--muted);font-size:var(--fs-xs)}
.mon2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.mon2 h3{border:0;margin-bottom:var(--sp-1)}
.spark{width:100%;height:44px} .spark polyline{fill:none;stroke:var(--c1);stroke-width:2} .spark.mem polyline{stroke:var(--c4)}
.mt{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.mt th{text-align:left;color:var(--muted);font-weight:var(--fw-med);font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line-strong)}
.mt td{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--line)}
.mt td.n{font-family:var(--mono);color:var(--muted)}
.meter.big{height:14px}
.mon-item{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.mon-item summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;flex-wrap:wrap}
.mon-item summary .k{font-size:var(--fs-xs);color:var(--muted)}
.mon-item summary b{font-size:var(--fs-base)}
.pb{margin:var(--sp-2) 0 0;padding-left:18px;display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm)}
.pb b{color:var(--accent);margin-right:4px}
.pb code{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--fs-xs);background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:2px var(--sp-2);overflow-x:auto}
.monin .kv{display:grid;grid-template-columns:auto 1fr;gap:2px var(--sp-3);margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}
.monin .kv dt{color:var(--muted)} .monin .kv dd{margin:0;font-family:var(--mono);overflow-wrap:anywhere}
.monin .view{font-size:var(--fs-sm);line-height:var(--lh);margin:var(--sp-1) 0} .monin .view b{color:var(--err)}
.monin .acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)} .monin .btn.mini{height:26px;padding:0 var(--sp-2);font-size:var(--fs-xs)}

/* ── 오른쪽 아래 알림 팝업 ── */
.mon-pop{padding:var(--sp-3);border-radius:var(--r);box-shadow:var(--sh-2)}
.mon-pop .b{line-height:var(--lh)} .mon-pop .s{color:var(--muted);line-height:var(--lh)}

/* ───────────── 헤르메스 · 학습 ───────────── */
.pmetrics{display:flex;align-items:center;gap:6px;padding:4px 9px;border-top:1px dashed var(--line);font-size:11px;color:var(--muted);flex-wrap:wrap}
.pmetrics .lv{font-weight:700;color:var(--accent);white-space:nowrap}
.lmeter{flex:1 1 40px;min-width:40px;height:5px;border-radius:3px;background:var(--idle-soft);overflow:hidden}
.lmeter i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s linear}
.pmetrics .lsc{font-family:var(--mono);font-weight:600;color:var(--ink)}
.pmini{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 100%}
.pmini b{font-weight:500;color:var(--muted);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.lmeter i{transition:none!important}}

.hz{border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--surface)}
.hz>h3{margin-top:0}
.hz-top{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hz-score{display:flex;flex-direction:column;gap:3px;min-width:120px;flex:0 0 auto}
.hz-num{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.hz-num span{font-size:13px;color:var(--muted);font-weight:600}
.hz-lv{font-size:12px;color:var(--ink);font-weight:600}
.lmeter.big{height:7px;width:100%;flex:none}
.hz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px;margin:0;flex:1 1 220px}
.hz-grid>div{display:flex;flex-direction:column;gap:1px}
.hz-grid dt{font-size:10.5px;color:var(--muted)}
.hz-grid dd{margin:0;font-size:15px;font-weight:700;font-family:var(--mono);color:var(--ink)}
.hz-comp{margin-top:7px}
.hz-aspects{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.asp{font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--sunken)}
.asp.on{border-color:var(--accent);color:var(--accent)}
.hz-model{margin-top:6px}
.hz-learn{margin-top:9px;border-top:1px solid var(--line);padding-top:8px}
.hz-learn summary{cursor:pointer;font-weight:600;font-size:12.5px;color:var(--ink)}
.hz-learn form{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.hz-learn-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hz-learn-foot .grow{flex:1 1 auto;min-width:0}
.hz-hist{margin-top:9px}
.hz-hist h4{margin:0 0 5px;font-size:12px;color:var(--muted)}
.learn-done{margin-top:8px;border:1px solid var(--ok);border-radius:var(--r);padding:8px;background:var(--ok-soft)}
.learn-head{font-size:13px}
.delta{font-weight:700;margin-left:4px;color:var(--muted)}
.delta.up{color:var(--ok)}
.learn-nums{font-size:12px;color:var(--muted);margin:4px 0 6px}
.learn-sum{margin-top:6px}
.learn-sum h5{margin:0 0 3px;font-size:11.5px;color:var(--muted)}
.learn-sum pre{margin:0;white-space:pre-wrap;font-family:var(--sans);font-size:12px;background:var(--sunken);border:1px solid var(--line);border-radius:4px;padding:6px;max-height:160px;overflow:auto}

/* 헤르메스 — 추이 스파크라인 · 사용자 선호 */
.spark{width:120px;height:28px;margin-top:5px;overflow:visible}
.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.sparknote{margin-top:2px}
.hz-prefs{margin-top:7px;font-size:12px}
.hz-prefs b{font-size:11.5px;color:var(--muted)}
.hz-prefs ul{margin:3px 0 0;padding-left:16px}
.hz-prefs li{margin:1px 0}