@charset "utf-8";
/* 통합관제 공통 스타일 */

:root{
  --bg:#20252d;
  --panel:#282e38;
  --panel-head:#2f3641;
  --panel-sub:#242a33;
  --line:#3a424f;
  --line-in:#333a45;
  --txt:#dfe3e8;
  --txt2:#9aa3b0;
  --txt3:#6f7885;
  --pri:#2f6fb5;
  --pri-lt:#4a8ed6;
  --ok:#3f9e5a;
  --warn:#c9922e;
  --err:#c04a45;
  --mono:Consolas,"D2Coding","Courier New",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"맑은 고딕","Malgun Gothic",Dotum,sans-serif;
  font-size:12px;
  background:var(--bg);
  color:var(--txt);
  line-height:1.45;
}
a{color:var(--pri-lt);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse}

/* ── 상단 ─────────────────────────────── */
#gnb{
  height:44px;background:#1a1f26;border-bottom:1px solid #10141a;
  display:flex;align-items:center;padding:0 12px;
}
#gnb .sys{
  font-size:13px;font-weight:bold;color:#fff;letter-spacing:-0.5px;
  padding-right:14px;margin-right:14px;border-right:1px solid #333b45;
}
#gnb .sys span{font-size:11px;font-weight:normal;color:var(--txt3);margin-left:6px}
#gnb nav{display:flex;height:100%}
#gnb nav a{
  display:flex;align-items:center;padding:0 15px;color:var(--txt2);
  font-size:12px;border-bottom:2px solid transparent;
}
#gnb nav a:hover{color:var(--txt);background:#222831;text-decoration:none}
#gnb nav a.sel{color:#fff;border-bottom-color:var(--pri-lt);background:#232a33}
#gnb .rgt{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:11px;color:var(--txt2)}
#gnb .st{display:flex;align-items:center;gap:5px}
#gnb .st b{width:6px;height:6px;border-radius:50%;background:var(--txt3);display:inline-block}
#gnb .st.on b{background:var(--ok)}
#gnb .st.off b{background:var(--err)}
#gnb .tm{font-family:var(--mono);color:#c3cad3;font-size:12px}

/* ── 레이아웃 ─────────────────────────── */
#cont{padding:8px}
.row{display:flex;gap:8px}
.col{display:flex;flex-direction:column;gap:8px;min-width:0}

/* ── 패널 ─────────────────────────────── */
.pnl{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.pnl > h2{
  margin:0;height:29px;flex:0 0 29px;
  background:var(--panel-head);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 9px;
  font-size:12px;font-weight:bold;color:#e8ecf1;letter-spacing:-0.3px;
}
.pnl > h2:before{content:"";width:3px;height:11px;background:var(--pri-lt);margin-right:7px}
.pnl > h2 .ext{margin-left:auto;font-weight:normal;font-size:11px;color:var(--txt2);display:flex;align-items:center;gap:6px}
.pnl > .inr{padding:8px;overflow:auto;flex:1;min-height:0}
.pnl > .inr.np{padding:0}

/* ── 요약 지표 ────────────────────────── */
#sum{display:flex;border:1px solid var(--line);background:var(--panel)}
#sum div{
  flex:1;padding:7px 12px;border-right:1px solid var(--line-in);
  display:flex;align-items:baseline;gap:8px;
}
#sum div:last-child{border-right:0}
#sum dt{font-size:11px;color:var(--txt2);white-space:nowrap}
#sum dd{margin:0;font-family:var(--mono);font-size:19px;font-weight:bold;color:#fff;letter-spacing:-0.5px}
#sum dd small{font-size:11px;color:var(--txt3);font-weight:normal;font-family:inherit}
#sum dd.c-err{color:#e2726d}
#sum dd.c-ok{color:#6ec483}

/* ── 표 ───────────────────────────────── */
table.lst{width:100%;font-size:11px}
table.lst th{
  background:var(--panel-sub);color:var(--txt2);font-weight:normal;
  padding:5px 6px;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;
}
table.lst td{padding:4px 6px;border-bottom:1px solid var(--line-in);white-space:nowrap}
table.lst tbody tr:hover{background:#2f3742;cursor:default}
table.lst tbody tr.new td{background:#2c3a48}
table.lst tbody tr.new{animation:hl 2s ease-out}
@keyframes hl{from{background:#3d5468}to{background:transparent}}
table.lst td.num{text-align:right;font-family:var(--mono)}
table.lst td.ctr{text-align:center}
table.lst .none{padding:26px 0;text-align:center;color:var(--txt3)}

/* ── 상태 표시 ────────────────────────── */
.st-txt{padding:1px 5px;font-size:10px;border:1px solid;white-space:nowrap;display:inline-block;line-height:1.4}
.st-txt.CRITICAL,.st-txt.OFFLINE{color:#e2726d;border-color:#6b3230;background:#39231f}
.st-txt.HIGH{color:#dd9a52;border-color:#6b4c26;background:#392e1f}
.st-txt.MEDIUM,.st-txt.WARNING{color:#d4b45e;border-color:#5e5227;background:#33301f}
.st-txt.LOW{color:#7fa8d4;border-color:#2f4a68;background:#1f2a36}
.st-txt.ONLINE{color:#6ec483;border-color:#2f5c3c;background:#1f3025}

.dot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:4px}
.dot.ONLINE{background:var(--ok)}
.dot.WARNING{background:var(--warn)}
.dot.OFFLINE{background:var(--err)}

/* ── 폼 ───────────────────────────────── */
button,select,input[type=text]{
  font-family:inherit;font-size:11px;color:var(--txt);
  background:#333a45;border:1px solid #454d5a;height:23px;padding:0 8px;
  vertical-align:middle;
}
input[type=text]{background:#1e232b;border-color:#3f4753}
input[type=text]:focus,select:focus{outline:1px solid var(--pri-lt);outline-offset:-1px}
button{cursor:pointer;min-width:52px}
button:hover{background:#3d4552;border-color:#5a6472}
button:active{background:#2b323c}
button.pri{background:var(--pri);border-color:#3a7cc0;color:#fff}
button.pri:hover{background:#3a7cc0}
button.dgr{background:#4d2f2d;border-color:#6b3d3a;color:#e0a5a2}
button.dgr:hover{background:#5c3835}
button:disabled{opacity:.45;cursor:default}
button.sm{height:19px;min-width:0;padding:0 6px;font-size:10px}
label.ck{display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none}

.fld{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fld > label{color:var(--txt2);font-size:11px}
.sep{width:1px;height:15px;background:var(--line);margin:0 3px}

/* ── 정의 목록 ────────────────────────── */
dl.kv{margin:0;font-size:11px}
dl.kv > div{display:flex;padding:3px 0;border-bottom:1px solid var(--line-in)}
dl.kv > div:last-child{border-bottom:0}
dl.kv dt{width:78px;flex:0 0 78px;color:var(--txt2)}
dl.kv dd{margin:0;flex:1;text-align:right;font-family:var(--mono)}

/* ── 게이지 ───────────────────────────── */
.gg{margin-bottom:6px}
.gg .lb{display:flex;justify-content:space-between;font-size:11px;margin-bottom:2px}
.gg .lb span:last-child{font-family:var(--mono)}
.gg .tr{height:9px;background:#1c2128;border:1px solid #363d48}
.gg .tr i{display:block;height:100%;background:var(--pri);transition:width .4s}
.gg .tr i.w{background:var(--warn)}
.gg .tr i.e{background:var(--err)}

/* ── 알림 ─────────────────────────────── */
#alarm{position:fixed;right:9px;bottom:9px;z-index:900;width:296px}
#alarm > div{
  background:#2d343f;border:1px solid #4a535f;border-left:3px solid var(--err);
  margin-top:6px;box-shadow:0 3px 12px rgba(0,0,0,.5);
}
#alarm .hd{
  display:flex;align-items:center;gap:6px;padding:5px 8px;
  background:#353d49;border-bottom:1px solid #454e5a;font-size:11px;font-weight:bold;
}
#alarm .hd .cl{margin-left:auto;cursor:pointer;color:var(--txt3);font-weight:normal;padding:0 2px}
#alarm .hd .cl:hover{color:var(--txt)}
#alarm .bd{padding:7px 8px;font-size:11px;color:var(--txt2)}
#alarm .bd b{color:var(--txt);font-weight:normal}
#alarm dl.kv{margin-top:5px}
#alarm.mute{opacity:.35}

/* ── 유틸 ─────────────────────────────── */
.mono{font-family:var(--mono)}
.dim{color:var(--txt2)}
.dim2{color:var(--txt3)}
.rgt{text-align:right}
.ctr{text-align:center}
.f1{flex:1}
.ml{margin-left:auto}
.nowrap{white-space:nowrap}
hr.d{border:0;border-top:1px solid var(--line-in);margin:7px 0}

::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#1e232b}
::-webkit-scrollbar-thumb{background:#414957;border:3px solid #1e232b}
::-webkit-scrollbar-thumb:hover{background:#4f5866}
::-webkit-scrollbar-corner{background:#1e232b}