:root{--bg:#222427;--panel:#2c2e32;--panel2:#25272a;--line:#3a3d42;--fg:#e8eaed;--mut:#9aa0a8;--blue:#3d9bff;--red:#ff5a3c;--grn:#3ddc84;--yel:#ffc53d;--acc:#4a9cff}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font:13px/1.4 -apple-system,"Malgun Gothic","Noto Sans KR",sans-serif}
a{color:inherit;text-decoration:none}
.top{display:flex;align-items:center;gap:16px;padding:12px 20px;background:#2a2c30;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 #1a1b1d}
/* 로고 */
.logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;color:var(--fg);text-decoration:none}
.logo .lg{width:32px;height:32px;display:block;flex-shrink:0;filter:drop-shadow(0 2px 7px rgba(61,139,255,.38));transition:transform .25s,filter .25s}
.logo:hover .lg{transform:translateY(-1px) rotate(-4deg);filter:drop-shadow(0 3px 10px rgba(61,139,255,.55))}
.logo .lt{display:flex;flex-direction:column;gap:3px;line-height:1}
.logo .lt b{font-size:19px;font-weight:800;letter-spacing:1.6px;background:linear-gradient(180deg,#fff 20%,#a9cdff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.logo .lt small{font-size:8.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.logo.big{flex-direction:column;gap:12px}.logo.big .lg{width:60px;height:60px}.logo.big .lt{align-items:center;gap:6px}.logo.big .lt b{font-size:32px;letter-spacing:3px}.logo.big .lt small{font-size:10.5px;letter-spacing:3px}
.loginlogo{display:flex;justify-content:center;padding:6px 0 10px}
@media(max-width:1450px){.top .logo .lt small{display:none}}
@media(max-width:1100px){.logo .lg{width:28px;height:28px}.logo .lt b{font-size:17px}}
.top nav{display:flex;gap:4px;margin-left:12px}.top nav a{padding:6px 12px;border-radius:6px;color:var(--mut)}.top nav a.on,.top nav a:hover{background:var(--panel);color:var(--fg)}
.top .sp{flex:1}.top .mut{color:var(--mut)}
.grid{display:grid;gap:12px;padding:12px 20px;grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.left{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.p{background:var(--panel);border-radius:2px;padding:16px 18px;min-width:0}
.p h3{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.3px;display:inline-block;border-bottom:2px solid var(--acc);padding-bottom:4px}
.p h3 small{color:var(--mut);font-weight:400;margin-left:6px}
.span3{grid-column:span 3}.span2{grid-column:span 2}
.cards{grid-column:span 3;display:grid;gap:12px;grid-template-columns:1.2fr 1fr 1fr}
.hero{background:var(--acc);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;border-radius:2px}
.hero b{font-size:22px}.hero span{opacity:.85}
.os{display:flex;justify-content:space-around;align-items:center}.os div{text-align:center;color:var(--mut)}.os b{display:block;font-size:30px;color:var(--fg)}
.stat{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}.stat b{font-size:20px}
.netwrap{position:relative}.netwrap canvas{width:100%;height:330px;display:block}
.nowbox{position:absolute;right:14px;top:6px;background:#26282b;padding:14px 22px;text-align:center;display:flex;gap:26px}
.nowbox small{display:block;color:var(--mut);margin-bottom:4px}.nowbox b{font-size:26px;font-weight:600}
.legend{text-align:center;color:var(--mut);margin-top:4px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 12px}
.bars{display:grid;gap:6px}.bar{position:relative;height:42px;background:#1e1f22;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 14px;overflow:hidden}
.bar .fill{position:absolute;left:0;top:0;bottom:0;opacity:.45}.bar .nm{position:absolute;left:10px;z-index:1;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar span{position:relative;z-index:1}.bar span b{font-size:15px}.bar span small{color:var(--mut)}
.right{display:grid;gap:12px;align-content:start}
.cnt{background:var(--panel2);display:grid;grid-template-columns:repeat(5,1fr);text-align:center;padding:16px 6px;color:var(--mut);font-size:12px}
.cnt b{display:block;font-size:22px;color:var(--fg);margin-top:4px}.cnt .c-crit b{color:var(--red)}.cnt .c-warn b{color:var(--yel)}.cnt .c-ok b{color:var(--grn)}
.srv{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 6px;margin-top:14px;justify-items:center}
.srv a{width:38px;height:22px;border:2px solid var(--grn);border-radius:3px;position:relative}
.srv a::after{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:2px;background:currentColor;opacity:.7}
.srv a.warn{border-color:var(--yel)}.srv a.crit{border-color:var(--red);animation:bl 1s infinite}.srv a.off{border-color:#555;opacity:.5}
@keyframes bl{50%{opacity:.35}}
.tabs{display:flex;gap:2px;margin-bottom:0}.tabs button{background:#232427;color:var(--mut);border:0;padding:10px 16px;cursor:pointer;font:inherit}.tabs button.on{background:var(--panel);color:var(--fg)}
table{width:100%;border-collapse:collapse}th{color:var(--mut);font-weight:500;text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
td{padding:9px 4px;border-bottom:1px dotted var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
td.n,th.n{text-align:right}.pill{display:inline-block;min-width:44px;text-align:center;background:var(--blue);border-radius:12px;padding:1px 10px;font-weight:600}
.bottom{grid-column:1/-1;display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr));padding:0 20px 20px}
.hot{color:var(--red)}.mid{color:var(--yel)}.mut{color:var(--mut)}
/* forms / pages */
.wrap{padding:16px 20px;max-width:1200px;margin:auto}
input,select,button.b,textarea{background:#1e1f22;border:1px solid var(--line);color:var(--fg);padding:7px 10px;border-radius:4px;font:inherit}
textarea{line-height:1.5;resize:vertical}textarea::placeholder,input::placeholder{color:#6f7680}
button.b{cursor:pointer;background:var(--acc);border-color:var(--acc);color:#fff}button.b.sec{background:#3a3d42;border-color:#3a3d42}button.b.dng{background:#a33;border-color:#a33}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.badge{padding:2px 8px;border-radius:10px;font-size:12px}
.badge.up{background:#1d5b3a}.badge.down{background:#7a2a2a}.badge.unknown{background:#444}.badge.warn{background:#7a6420}
.login{display:grid;place-items:center;height:100vh}.loginbox{background:var(--panel);padding:28px;border-radius:6px;display:grid;gap:12px;width:300px}
.loginbox h1{margin:0;text-align:center;color:var(--blue)}.err{color:var(--red);margin:0}
@media(max-width:1100px){.grid{grid-template-columns:1fr}.left{grid-template-columns:1fr}.span3,.span2,.cards{grid-column:auto}.cards{grid-template-columns:1fr}.bottom{grid-template-columns:1fr 1fr}.nowbox{position:static;margin-bottom:8px}}
/* server detail */
.sd{display:grid;gap:12px;padding:12px 20px;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr)}
.sd .col{display:grid;gap:12px;align-content:start}
.sd .hero{align-items:flex-start;padding:18px 20px;min-height:110px;justify-content:space-between}
.hero .t{font-weight:700;font-size:15px}.hero .s{opacity:.85;font-size:12px}.hero .u{align-self:flex-end}.hero .u b{font-size:20px}
.ping{display:flex;justify-content:space-between;align-items:center}.ping b{font-size:20px}
.svcs{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:6px}.svc{text-align:center;position:relative;font-size:12px;cursor:default}
.svc i{display:block;width:16px;height:16px;border-radius:50%;background:#555;margin:0 auto 6px}.svc.ok i{background:var(--grn)}.svc.bad i{background:var(--red)}
.svc u{display:none;position:absolute;right:-6px;top:-8px;cursor:pointer;text-decoration:none;color:var(--mut)}.svc:hover u{display:block}
.svc-add{display:flex;gap:6px;margin-top:14px}.svc-add input{width:70px;padding:4px 6px}.svc-add input[type=number]{width:64px}
.alm{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:10px;padding-top:20px}.alm div{color:var(--mut)}.alm b{display:block;color:var(--fg);font-size:15px;margin-top:8px}
.alm small{display:block;margin-top:2px;font-size:11px}
.mets{grid-column:1/-1;display:grid;gap:12px;grid-template-columns:repeat(7,minmax(0,1fr))}
.mc{background:var(--panel);padding:14px 18px;text-align:center;position:relative;min-height:128px}.mc h4{margin:0;text-align:left;font-size:12px;color:var(--mut);font-weight:500}
.mc .v{font-size:30px;color:#9aa0a8;margin:14px 0 8px}.mc .v.hot{color:var(--red)}.mc .v.mid{color:var(--yel)}.mc .v.on{color:var(--fg)}
.mc .d{position:absolute;right:16px;bottom:10px;text-align:right;font-size:11px;color:var(--mut)}.mc .d b{display:block;color:var(--grn);font-size:12px}
.mc.sel{border-bottom:2px solid var(--acc);cursor:pointer}.mc{cursor:pointer}
.low{grid-column:1/-1;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.heat{display:grid;grid-template-columns:34px 1fr;gap:6px}.heat .rows{display:grid;gap:3px}
.heat .r{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}.heat .r i{aspect-ratio:1.5;border-radius:2px;background:#33363a}
.heat .lab{display:grid;gap:3px;color:var(--mut);font-size:11px;text-align:right}.heat .lab span{display:flex;align-items:center;justify-content:flex-end}
.hx{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin:4px 0 0 40px;color:var(--mut);font-size:10px;text-align:center}
.g0{background:var(--blue)!important}.g1{background:var(--grn)!important}.g2{background:var(--yel)!important}.g3{background:var(--red)!important}
.hlegend{display:flex;gap:16px;justify-content:center;color:var(--mut);margin-top:12px}.hlegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.tools{float:right;display:flex;gap:6px}
canvas.cv{width:100%;display:block}
@media(max-width:1100px){.sd{grid-template-columns:1fr}.mets{grid-template-columns:1fr 1fr}.low{grid-template-columns:1fr}}
/* stage 1 */
.nb{background:var(--red);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:3px}
.warnbar{background:#7a5a10;color:#fff;padding:8px 20px;font-size:13px}.warnbar code{background:rgba(0,0,0,.25);padding:1px 5px;border-radius:3px}
.cnt{grid-template-columns:repeat(6,1fr)!important}.cnt .c-maint b{color:var(--blue)}
.srv a.maint{border-color:var(--blue);border-style:dashed}
.badge.maint{background:#1d4a7a}
.chip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px}.chip.crit{background:#7a2a2a}.chip.warn{background:#7a6420}.chip.info{background:#2a4a35}
tr.acked td{opacity:.55}tr.maintrow td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.pager{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--mut)}
.notes{background:#1e1f22;padding:8px 12px;margin:4px 0 8px;border-left:3px solid var(--acc);font-size:12px}.notes div{padding:2px 0}
.mini{padding:2px 8px!important;font-size:12px!important}
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:18px;max-width:420px;width:92%}dialog::backdrop{background:rgba(0,0,0,.6)}
dialog textarea{width:100%;background:#1e1f22;border:1px solid var(--line);color:var(--fg);border-radius:4px;padding:8px;font:inherit}

/* ===== 반응형 ===== */
html{-webkit-text-size-adjust:100%}
.burger{display:none;background:#3a3d42;color:var(--fg);border:0;border-radius:6px;width:40px;height:36px;font-size:20px;line-height:1;cursor:pointer}
.top{flex-wrap:wrap}
.top nav{flex-wrap:wrap;min-width:0}
.tabs{overflow-x:auto;max-width:100%}.tabs button{white-space:nowrap}
.pager{flex-wrap:wrap}
img,canvas,svg{max-width:100%}
@media(max-width:1500px){#clock{display:none}}
@media(max-width:1100px){
 .burger{display:block;order:2}
 .top{padding:10px 14px;gap:10px}
 .top .sp{order:1}.top .logo{order:0}
 .top>.mut,.top>a{order:3}
 .cnt{grid-template-columns:repeat(3,1fr)!important;gap:14px 0}
 .nowbox{flex-wrap:wrap;gap:16px;justify-content:center}
}
@media(max-width:900px){
 .grid,.sd,.mdg{padding:10px 12px}.bottom{padding:0 12px 14px}.wrap{padding:12px}.warnbar{padding:8px 12px}
 .p{padding:14px;overflow-x:auto}
 .p table,.wrap>table,.wrap form>table{min-width:max-content}
 .tools{float:none;margin-bottom:8px;flex-wrap:wrap}
 .svc-add{flex-wrap:wrap}
}
@media(max-width:640px){
 body{font-size:14px}
 .top>.mut{display:none}
 input,select,textarea,dialog textarea{font-size:16px}
 input,select,button.b{padding:9px 10px;max-width:100%}
 button.b.mini,.mini{padding:4px 10px!important}
 .row{gap:8px}.row>input,.row>select{flex:1 1 140px;min-width:0}
 input[style*="min-width"],select[style*="min-width"],textarea[style*="min-width"]{min-width:0!important;flex:1 1 100%!important;width:100%!important}
 [style*="float:right"]{float:none!important;display:block;margin:0 0 8px}
 .bottom{grid-template-columns:1fr}
 .mets{grid-template-columns:1fr 1fr;gap:8px}.mc{padding:12px;min-height:112px}.mc .v{font-size:26px}
 .netwrap canvas{height:240px}
 .nowbox b{font-size:20px}.nowbox{padding:10px 14px}
 .hero b{font-size:20px}.os b{font-size:26px}
 .heat{grid-template-columns:28px 1fr}.hx{margin-left:34px;font-size:9px}.hlegend{flex-wrap:wrap;gap:8px 14px}
 .srv{grid-template-columns:repeat(4,1fr)}
 .svcs{gap:14px 18px}
 .svc u{display:block}
 .bar .nm{max-width:55%}
 .tmap{height:68vh!important;min-height:360px!important}
 .leg{margin-left:0!important;flex-wrap:wrap}
 .login{min-height:100dvh;height:auto;padding:16px}.loginbox{width:min(340px,100%)}
 dialog{width:94%;padding:14px}
 .tabs button{padding:10px 12px}
}
@media(max-width:380px){.mets{grid-template-columns:1fr}.cnt{grid-template-columns:repeat(2,1fr)!important}}
@media(hover:none){.svc u{display:block}}

/* ===== 모바일 메뉴 (드로어) ===== */
.ndr-h,.ngl,.ndr-out,.navbg{display:none}
.burger{position:relative}.burger .bdg{position:absolute;top:-5px;right:-5px;margin:0;pointer-events:none}
@media(max-width:1100px){
 .top nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);margin:0;padding:0 0 calc(12px + env(safe-area-inset-bottom));background:#26282b;z-index:300;overflow-y:auto;overscroll-behavior:contain;transform:translateX(105%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;box-shadow:-8px 0 24px rgba(0,0,0,.45)}
 .top.open nav{transform:none;visibility:visible;transition:transform .22s ease}
 .navbg{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:250;opacity:0;pointer-events:none;transition:opacity .22s}
 .top.open .navbg{opacity:1;pointer-events:auto}
 .ndr-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#2a2c30;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--line)}
 .ndr-h span{display:grid;line-height:1.3}.ndr-h b{font-size:15px}.ndr-h small{color:var(--mut)}
 .ndr-x{background:#3a3d42;color:var(--fg);border:0;border-radius:6px;width:38px;height:36px;font-size:16px;cursor:pointer}
 .ngl{display:block;padding:14px 18px 4px;font-size:11px;letter-spacing:.8px;color:var(--mut);text-transform:uppercase}
 .top nav a{display:flex;align-items:center;gap:8px;padding:13px 18px;margin:0 8px;font-size:15px;border-radius:8px;color:var(--fg)}
 .top nav a.on{background:var(--panel);box-shadow:inset 3px 0 0 var(--acc);font-weight:600}
 .top nav a:active{background:#34373c}
 .top nav a.ndr-out{display:flex;margin:14px 8px 0;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:var(--mut)}
 body.nolock{overflow:hidden}
}
@media(max-width:640px){.top>a[href="logout.php"]{display:none}}
@media(prefers-reduced-motion:reduce){.top nav,.navbg{transition:none!important}}

/* ===== 서버 상세 개선 ===== */
.sd{grid-template-columns:minmax(0,1fr)}
.sd .sdh{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:nowrap;--h1:#27407a;--h2:#3a78d6;background:radial-gradient(900px 220px at 100% 0,rgba(255,255,255,.14),transparent 60%),linear-gradient(135deg,var(--h1),var(--h2));padding:20px 24px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.sd .sdh.st-bad{--h1:#6b2418;--h2:#c4452f}.sd .sdh.st-wn{--h1:#6a4c0d;--h2:#c08f1c}.sd .sdh.st-ok{--h1:#1c4a86;--h2:#2f86e0}.sd .sdh.st-mt{--h1:#223b6e;--h2:#4468b8}.sd .sdh.st-off{--h1:#363a40;--h2:#555b64}
.sd .sdh .hl{flex:1;min-width:0}
.sd .sdh .t{font-size:24px;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.2}.sd .sdh .s{opacity:.92;margin-top:3px;font-size:14px;min-height:1px}.sd .sdh .s:empty{display:none}
.stb{font-size:12px;font-weight:700;padding:3px 11px 3px 9px;border-radius:12px;background:rgba(0,0,0,.28);display:inline-flex;align-items:center;gap:6px}.stb:before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.9}.stb.ok:before{background:#6dffa9;box-shadow:0 0 0 0 rgba(109,255,169,.7);animation:sdp 2s infinite}.stb.bad:before{background:#ffb4a8;animation:sdp2 1.2s infinite}@keyframes sdp{70%{box-shadow:0 0 0 7px rgba(109,255,169,0)}100%{box-shadow:0 0 0 0 rgba(109,255,169,0)}}@keyframes sdp2{50%{opacity:.35}}
.stb.ok{background:#1d7a47}.stb.bad{background:#b3321f}.stb.wn{background:#a67c10}.stb.mt{background:#1d4a7a}.stb.off{background:rgba(0,0,0,.35)}
.jump{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.jump a{background:rgba(0,0,0,.25);padding:3px 11px;border-radius:12px;font-size:12px}.jump a:hover{background:rgba(0,0,0,.45)}
.hk{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}.hk>div{text-align:left;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 14px;min-width:108px}.hk small{display:block;opacity:.78;font-size:10.5px;letter-spacing:.7px;margin-bottom:3px}.hk b{font-size:19px;font-weight:700;white-space:nowrap}.hk b.hot{color:#ffd0c8}
.hk .alc b{font-size:15px;display:flex;gap:6px;flex-wrap:wrap}.hk .alc b span{padding:1px 8px;border-radius:9px;font-size:12.5px}.hk .alc b .c{background:rgba(255,90,60,.55)}.hk .alc b .w{background:rgba(255,197,61,.5);color:#fff}
.sh-ava{width:56px;height:56px;border-radius:15px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.sh-ava svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sh-ava svg .d{fill:#fff;stroke:none}.sh-ava svg .f{fill:#fff;stroke:none}
.sh-mt{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.22);border-radius:10px;padding:2px 9px}
.sh-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.sh-c{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:3px 10px;font-size:12.5px;color:#fff;font-family:inherit;line-height:1.5}.sh-c i{font-style:normal;opacity:.65;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase}.sh-c.ip span{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600}button.sh-c{cursor:pointer}button.sh-c:hover{background:rgba(0,0,0,.38)}
.sh-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}.sh-bar .jump{margin-top:0}
.sh-act{display:flex;gap:6px}.sh-act button,.sh-act a{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}.sh-act button:hover,.sh-act a:hover{background:rgba(255,255,255,.28)}.sh-act button.ok{background:rgba(61,220,132,.35)}.sh-act button.bad{background:rgba(255,90,60,.45)}.sh-act button[disabled]{opacity:.6}
.sd [id^=sec-]{scroll-margin-top:72px}
.sd .hint{grid-column:1/-1;color:var(--mut);font-size:12px;margin:-4px 2px 0}
.sd .main{display:grid;gap:12px;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
.sd .side{display:grid;gap:12px;min-width:0}
.sd .nowbox{position:static;display:flex;gap:28px;background:none;padding:0;margin:2px 0 10px;text-align:left}.sd .nowbox b{font-size:22px}
.cw{position:relative}.cw canvas{touch-action:pan-y}
.cline{position:absolute;width:1px;background:rgba(255,255,255,.35);pointer-events:none}
.ctip{position:absolute;background:#15161a;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:12px;pointer-events:none;white-space:nowrap;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.ctip div{padding:1px 0}.ctip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.mc.nodata .v{color:#555}.mc .d b.up{color:var(--yel)}.mc .d b.dn{color:var(--grn)}.mc:hover{background:#31343a}
.mc .d{position:static;text-align:center;margin-top:8px}.mc .d b{display:inline;margin-right:6px}
.mc{padding:14px 18px 12px}
.mb{height:6px;border-radius:3px;background:#1e1f22;overflow:hidden;margin:0 6px}.mb i{display:block;height:100%;border-radius:3px;background:var(--grn)}.mb i.mid{background:var(--yel)}.mb i.hot{background:var(--red)}
.disks{display:grid;gap:12px}.dk .dh{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}.dk .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dk b.hot{color:var(--red)}.dk b.mid{color:var(--yel)}
.evw{margin-top:14px;max-height:300px;overflow:auto}.evw td{white-space:normal;max-width:none;overflow:visible;font-size:12px;vertical-align:top}
.sd .alm{padding-top:4px}
.svc{min-width:44px}
@media(max-width:1280px){.sd .sdh{flex-wrap:wrap}.hk{justify-content:flex-start;width:100%}}
@media(max-width:1100px){.sd .main{grid-template-columns:minmax(0,1fr)}.sd .sdh{padding:16px}.hk{gap:8px}}
@media(max-width:640px){.sd .sdh .t{font-size:19px}.sh-ava{width:44px;height:44px;border-radius:12px}.sh-ava svg{width:24px;height:24px}.sd .sdh{gap:12px}.hk{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hk>div{min-width:0;padding:8px 10px}.hk b{font-size:15px}.mc .v{font-size:24px}.sd .nowbox{gap:20px}}
.dk{cursor:pointer;padding:8px 10px;margin:0 -10px;border-radius:6px}.dk:hover{background:#31343a}.dk.sel{background:#2f3a4a;box-shadow:inset 3px 0 0 var(--acc)}
.dk .ds{color:var(--mut);font-size:11px;margin-top:5px}

/* ===== 대시보드 정렬/그래프 개선 ===== */
.cdot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#2c2e32;border:2px solid #fff;pointer-events:none;z-index:4}
.ctip b{font-weight:600}
.netwrap .nowbox{position:static;background:none;padding:0;margin:0 0 6px;display:flex;gap:30px;text-align:left;justify-content:flex-start}
.netwrap .nowbox small{display:flex;align-items:center;gap:6px;color:var(--mut);margin-bottom:2px;letter-spacing:.3px}
.netwrap .nowbox small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.netwrap .nowbox>div+div small::before{background:var(--blue)}
.netwrap .nowbox b{font-size:24px;font-weight:600;letter-spacing:.2px}
.netwrap canvas{height:310px}
.netwrap{position:relative}
.netwrap canvas{touch-action:pan-y}
@media(min-width:1101px){
 /* 위쪽 카드 3개를 아래 패널과 같은 3열 격자에 맞춤 (히어로=열1, Linux/Windows=열2, 정상/전체=열3) */
 .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bottom{padding:0}
 .right{align-content:stretch;grid-template-rows:auto auto minmax(0,1fr)}
 .right>.p:last-child{overflow:auto}
 .grid .p,.grid .hero,.grid .cnt{border-radius:10px}
 .grid .p{border:1px solid rgba(255,255,255,.045)}
 .tabs button:first-child{border-radius:10px 0 0 0}.tabs button:last-child{border-radius:0 10px 0 0}
 .tabs+.p{border-top-left-radius:0}
}
.hero{background:linear-gradient(135deg,#2f7fe0,#4a9cff)}

/* 페이지 길이에 따라 스크롤바 유무가 달라도 가로 위치·폭이 변하지 않게 */
html{scrollbar-gutter:stable}

/* 관리자 메뉴 항목이 많아 중간 폭(1101~1700px)에서 줄바꿈되지 않도록 간격 축소 */
@media(min-width:1101px) and (max-width:1700px){.top nav{gap:2px;margin-left:6px}.top nav a{padding:6px 8px}.top{gap:12px}}

/* 상단 메뉴: 구역 사이 구분선 (데스크톱) */
@media(min-width:1101px){.top nav a.gs{margin-left:12px;position:relative}.top nav a.gs::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:1px;background:#4a4e55}.top nav a{white-space:nowrap}}
@media(min-width:1101px) and (max-width:1560px){#clock{display:none}.top nav{margin-left:2px}.top nav a{padding:6px 7px}.top nav a.gs{margin-left:10px}}
@media(min-width:1101px) and (max-width:1560px){.top>.mut{display:none}}
/* 상단 메뉴: 데스크톱에서 항상 한 줄 (넘치면 시계·이름·로고 부제를 순서대로 줄이고, 그래도 넘치면 메뉴만 가로 스크롤) */
@media(min-width:1101px){
 .top{flex-wrap:nowrap}.top .logo{flex-shrink:0}.top nav{flex-wrap:nowrap;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}
 .top .sp{flex:1 1 0;min-width:0}.top>.mut,.top>a{flex-shrink:0;white-space:nowrap}
}
@media(min-width:1101px) and (max-width:2100px){#clock{display:none}.top nav a{padding:6px 9px}}
@media(min-width:1101px) and (max-width:1750px){.top .logo .lt small{display:none}}
@media(min-width:1101px) and (max-width:1560px){.top nav a{padding:6px 7px}}@media(min-width:1101px) and (max-width:1300px){.top nav a{padding:6px 5px;font-size:13px}.top nav a.gs{margin-left:7px}.top nav a.gs::before{left:-5px}}
@media(min-width:1101px) and (max-width:1450px){.top{gap:8px;padding:12px 14px}.top nav a{padding:6px 5px;font-size:13px}.top nav a.gs{margin-left:7px}.top nav a.gs::before{left:-5px}.top .logo .lt b{font-size:17px}}@media(min-width:1101px) and (max-width:1250px){.top nav{scrollbar-width:thin}.top nav::-webkit-scrollbar{display:block;height:4px}}