:root{
  --bg:#0b0f17; --bg2:#0e131e;
  --panel:#121a27; --panel2:#0f1622;
  --line:#1e2a3c; --line2:#26344a;
  --text:#e7edf6; --muted:#8595ab; --muted2:#5f7189;
  --brand:#ec2d63; --brand-soft:rgba(236,45,99,.14);
  --dl:#3ea6ff; --ul:#ff9f43;
  --ok:#31c48d; --bad:#f0616d;
  --radius:14px;
  --mono:"SFMono-Regular",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Pretendard",-apple-system,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(236,45,99,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(62,166,255,.06), transparent 55%),
    var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.app{max-width:1160px; margin:0 auto; padding:28px 22px 60px}

/* ---- topbar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:16px}
.brand-logo{
  display:flex; align-items:center; justify-content:center;
  background:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:0 6px 22px rgba(0,0,0,.35); line-height:0;
}
.brand-logo img{height:34px; display:block}
.brand-text h1{margin:0; font-size:21px; font-weight:800; letter-spacing:-.3px}
.brand-text p{margin:3px 0 0; font-size:12.5px; color:var(--muted)}
.topbar-actions{display:flex; align-items:center; gap:10px}
.pill{
  font-size:12.5px; color:var(--muted); background:var(--panel);
  border:1px solid var(--line); padding:7px 12px; border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.pill-live{color:#cfe9dc; border-color:rgba(49,196,141,.35)}
.pill-live .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:7px; box-shadow:0 0 0 0 rgba(49,196,141,.6); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(49,196,141,.55)}70%{box-shadow:0 0 0 7px rgba(49,196,141,0)}100%{box-shadow:0 0 0 0 rgba(49,196,141,0)}}

/* ---- panel / table ---- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.table-head,.row{
  display:grid;
  grid-template-columns:minmax(190px,1.4fr) 132px 132px minmax(280px,1.3fr);
  gap:20px; align-items:center;
}
.table-head{
  padding:16px 24px; color:var(--muted2);
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.row{padding:22px 24px; border-bottom:1px solid var(--line); transition:background .15s}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(255,255,255,.02)}

.domain-name{font-size:16px; font-weight:800; letter-spacing:-.2px; word-break:break-all; text-transform:uppercase}
.domain-sub{margin-top:4px; font-size:11.5px; color:var(--brand); font-weight:600; letter-spacing:.2px}
.domain-sub .mask{letter-spacing:1px; color:var(--muted2); filter:blur(.3px)}

.ip-current{font-family:var(--mono); font-size:15px; color:#dfe7f2; font-variant-numeric:tabular-nums}

.ip-field{display:flex; gap:8px}
.ip-input{
  flex:1; min-width:0; font-family:var(--mono); font-size:14px;
  color:var(--text); background:#0b111b; border:1px solid var(--line2);
  border-radius:10px; padding:10px 12px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.ip-input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.btn-change{
  flex:0 0 auto; font-family:var(--sans); font-size:13.5px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#f0447a,var(--brand)); border:0; border-radius:10px;
  padding:0 16px; cursor:pointer; transition:filter .15s, transform .05s;
}
.btn-change:hover{filter:brightness(1.06)}
.btn-change:active{transform:translateY(1px)}
.btn-change[disabled]{opacity:.55; cursor:default; filter:grayscale(.3)}
.ip-msg{margin-top:7px; font-size:11.5px; min-height:14px; color:var(--muted)}
.ip-msg.ok{color:var(--ok)} .ip-msg.bad{color:var(--bad)}

/* ---- graph ---- */
.col-graph{min-width:0}
.graph-status{font-size:12px; color:var(--muted); margin-bottom:8px}
.graph-status.live{color:#cfe9dc}
.graph{
  width:100%; height:90px; display:block;
  background:linear-gradient(180deg,#0a1019,#0b111c);
  border:1px solid var(--line); border-radius:10px;
}
.legend{display:flex; gap:18px; margin-top:9px; font-size:11.5px; color:var(--muted)}
.legend b{color:#cdd8e6; font-family:var(--mono); font-weight:600}
.lg{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle}
.lg-dl{background:var(--dl)} .lg-ul{background:var(--ul)}

/* ---- toggle switch ---- */
.switch{
  position:relative; width:52px; height:30px; border-radius:999px; border:1px solid var(--line2);
  background:#0b111b; cursor:pointer; padding:0; transition:background .2s, border-color .2s;
  flex:0 0 auto;
}
.switch .knob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#5f7189; transition:transform .2s, background .2s;
}
.switch.on{background:linear-gradient(180deg,#f0447a,var(--brand)); border-color:transparent; box-shadow:0 6px 16px rgba(236,45,99,.28)}
.switch.on .knob{transform:translateX(22px); background:#fff}
.switch[disabled]{opacity:.6; cursor:default}
/* small variant for table rows */
.switch-sm{width:42px; height:24px}
.switch-sm .knob{width:18px; height:18px}
.switch-sm.on .knob{transform:translateX(18px)}

/* ---- per-row action cell ---- */
.col-act{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.btn-ip{
  font-family:var(--sans); font-size:13px; font-weight:700; color:#ffd7e2;
  background:rgba(236,45,99,.12); border:1px solid rgba(236,45,99,.4);
  border-radius:9px; padding:9px 14px; cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, transform .05s;
}
.btn-ip:hover{background:rgba(236,45,99,.22); border-color:var(--brand); color:#fff}
.btn-ip:active{transform:translateY(1px)}
.row-auto{display:flex; align-items:center; gap:9px}
.row-auto-label{font-size:11.5px; font-weight:700; color:var(--muted2); min-width:48px}
.row-auto-label.on{color:#ffb0c6}

.pill-user{color:#cdd8e6}
.pill-logout{color:#f0a0b2; border-color:rgba(240,97,109,.3); text-decoration:none}
.pill-logout:hover{color:#fff; background:rgba(240,97,109,.15)}

.foot{margin-top:22px; text-align:center; color:var(--muted2); font-size:12px}

/* ---- toast ---- */
.toast-wrap{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:10px; align-items:flex-end}
.toast{display:flex; align-items:center; gap:10px; min-width:220px; max-width:360px;
  background:linear-gradient(180deg,rgba(23,32,47,.98),rgba(15,22,34,.99));
  border:1px solid var(--line2); border-left:3px solid var(--ok); border-radius:12px;
  padding:12px 15px; font-size:13px; color:var(--text); box-shadow:0 14px 40px rgba(0,0,0,.5);
  transform:translateX(20px); opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s}
.toast.show{transform:none; opacity:1}
.toast-ico{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(49,196,141,.16)}
.toast-off{border-left-color:var(--muted2)} .toast-off .toast-ico{background:var(--muted2); box-shadow:0 0 0 4px rgba(95,113,137,.16)}
.toast-bad{border-left-color:var(--bad)} .toast-bad .toast-ico{background:var(--bad); box-shadow:0 0 0 4px rgba(240,97,109,.16)}

/* ---- modal ---- */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,7,12,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.modal-card{
  position:relative; width:100%; max-width:400px;
  background:linear-gradient(180deg,rgba(23,32,47,.98),rgba(15,22,34,.99));
  border:1px solid var(--line2); border-radius:16px; padding:24px 24px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.55); animation:pop .16s ease-out;
}
@keyframes pop{from{transform:translateY(8px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.modal-card h3{margin:0; font-size:17px; font-weight:800; letter-spacing:-.2px}
.modal-host{margin:6px 0 12px; font-family:var(--mono); font-size:13px; color:var(--brand); word-break:break-all; text-transform:uppercase}
.modal-note{margin:0 0 4px; font-size:13px; line-height:1.6; color:var(--muted)}
.modal-note b{color:var(--text); font-weight:700}
.modal-note .mono{font-family:var(--mono); color:#dfe7f2}
.modal-field span{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:7px}
.modal-field input{
  width:100%; font-family:var(--mono); font-size:15px; color:var(--text);
  background:#0a1019; border:1px solid var(--line2); border-radius:10px; padding:12px 13px; outline:none; transition:border-color .15s, box-shadow .15s;
}
.modal-field input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.modal-msg{min-height:16px; margin:9px 2px 0; font-size:12px; color:var(--muted)}
.modal-msg.ok{color:var(--ok)} .modal-msg.bad{color:var(--bad)}
.modal-actions{display:flex; gap:10px; margin-top:16px}
.modal-actions .btn-change{flex:1; padding:11px; font-size:14px}
.btn-ghost{
  flex:0 0 auto; font-family:var(--sans); font-size:14px; font-weight:700; color:var(--muted);
  background:transparent; border:1px solid var(--line2); border-radius:10px; padding:11px 16px; cursor:pointer; transition:color .15s, border-color .15s;
}
.btn-ghost:hover{color:var(--text); border-color:var(--muted2)}

/* ---- login ---- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  background:
    radial-gradient(1000px 600px at 50% -20%, rgba(236,45,99,.16), transparent 60%),
    radial-gradient(700px 500px at 85% 110%, rgba(62,166,255,.08), transparent 55%),
    var(--bg);
}
.login-wrap{width:100%; max-width:392px; display:flex; flex-direction:column; align-items:center}
.login-logo{margin-bottom:22px}
.login-logo img{
  height:68px; background:#fff; padding:16px 20px; border-radius:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04);
}
.login-card{
  position:relative; width:100%; overflow:hidden;
  background:linear-gradient(180deg,rgba(23,32,47,.96),rgba(15,22,34,.98));
  border:1px solid var(--line2); border-radius:18px; padding:30px 30px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:16px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.login-accent{position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand),#ff7aa3,var(--dl))}
.login-head{text-align:center; margin-top:4px}
.login-head h1{margin:0; font-size:23px; font-weight:800; letter-spacing:-.4px}
.login-sub{margin:5px 0 0; font-size:12.5px; color:var(--muted)}

.fld{display:block}
.fld-label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.3px; margin-bottom:7px}
.fld-box{display:flex; align-items:center; gap:9px; background:#0a1019; border:1px solid var(--line2);
  border-radius:11px; padding:0 13px; transition:border-color .15s, box-shadow .15s;}
.fld-box:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.fld-ico{color:var(--muted2); flex:0 0 auto}
.fld-box:focus-within .fld-ico{color:var(--brand)}
.fld-box input{
  flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--text);
  font-family:var(--mono); font-size:14px; padding:12px 0;
}
.fld-box input::placeholder{color:#43526a; font-family:var(--sans)}

.btn-login{
  margin-top:2px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14.5px; font-weight:700; color:#fff; border:0; border-radius:11px; padding:13px;
  background:linear-gradient(180deg,#f0447a,var(--brand)); cursor:pointer;
  box-shadow:0 8px 22px rgba(236,45,99,.32); transition:filter .15s, transform .05s, box-shadow .15s;
}
.btn-login svg{transition:transform .15s}
.btn-login:hover{filter:brightness(1.07); box-shadow:0 10px 26px rgba(236,45,99,.42)}
.btn-login:hover svg{transform:translateX(3px)}
.btn-login:active{transform:translateY(1px)}

.login-error{
  display:flex; align-items:center; gap:9px;
  background:rgba(240,97,109,.12); border:1px solid rgba(240,97,109,.35); color:#ffb3bd;
  font-size:12.5px; padding:11px 13px; border-radius:11px;
}
.i-warn{flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--bad); color:#fff;
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center}
.login-secure{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:2px;
  font-size:11.5px; color:var(--muted2)}
.dot-ok{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px rgba(49,196,141,.15)}
.login-foot{margin:18px 0 0; font-size:11.5px; color:var(--muted2)}

/* ---- responsive ---- */
@media (max-width:920px){
  .table-head{display:none}
  .row{grid-template-columns:1fr; gap:14px; padding:20px 18px}
  .col-ip::before{content:"현재 IP"; display:block; font-size:11px; color:var(--muted2); margin-bottom:4px}
}

/* ---- per-server ICMP ping status (in the domain-sub slot) ---- */
.ping-stat{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-variant-numeric:tabular-nums}
.ping-stat .ping-dot{width:7px; height:7px; border-radius:50%; background:var(--muted2); flex:0 0 auto}
.ping-stat.ok{color:var(--ok)}
.ping-stat.ok .ping-dot{background:var(--ok); box-shadow:0 0 0 0 rgba(49,196,141,.6); animation:pulse 1.8s infinite}
.ping-stat.fail{color:var(--bad)}
.ping-stat.fail .ping-dot{background:var(--bad); box-shadow:0 0 6px rgba(240,97,109,.8)}
.ping-stat.wait{color:var(--muted2)}

/* ---- API docs link in topbar ---- */
.pill-doc{color:#8fe3da; border-color:rgba(45,212,191,.35); text-decoration:none}
.pill-doc:hover{color:#fff; background:rgba(45,212,191,.15)}

/* ---- China reachability status (line under the ping status) ---- */
.china-stat{display:inline-flex; align-items:center; gap:6px; margin-top:3px; font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums; font-weight:600}
.china-stat .china-dot{width:6px; height:6px; border-radius:50%; background:var(--muted2); flex:0 0 auto}
.china-stat.ok{color:#5ed1c0}                       /* 가능: teal-green, ping과 구분되는 색 */
.china-stat.ok .china-dot{background:#5ed1c0; box-shadow:0 0 6px rgba(94,209,192,.6)}
.china-stat.fail{color:#ffab5e}                     /* 불가: amber-orange (ping fail 빨강과 구분) */
.china-stat.fail .china-dot{background:#ffab5e; box-shadow:0 0 6px rgba(255,171,94,.6)}
.china-stat.wait{color:var(--muted2)}