:root{
  --bg:#071019;
  --panel:#0d1a26;
  --panel-2:#102331;
  --line:#1d3444;
  --line-soft:#162a38;
  --text:#e9f2f7;
  --muted:#8aa3b2;
  --dim:#617b8c;
  --mint:#33d6b0;
  --mint-2:#1da98b;
  --blue:#53a9ff;
  --amber:#f4bf6a;
  --red:#ff7a8a;
  --purple:#b49bff;
  --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(900px 500px at 75% -10%,rgba(51,214,176,.08),transparent 55%),
    radial-gradient(800px 500px at 10% 110%,rgba(83,169,255,.07),transparent 55%),
    var(--bg);
  color:var(--text);font-family:Inter,"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button{cursor:pointer}
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,rgba(14,31,44,.96),rgba(7,16,25,.98));
  border-right:1px solid var(--line-soft);padding:22px 14px 16px;display:flex;flex-direction:column;gap:18px;
  position:sticky;top:0;height:100vh;overflow:auto;
}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:0 8px}
.brand-mark{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:900;
  color:#04130f;background:linear-gradient(135deg,var(--mint),#84f0d3);box-shadow:0 0 26px rgba(51,214,176,.22)
}
.brand strong{display:block;font-size:16px;letter-spacing:.01em}
.brand span{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;margin-top:2px;text-transform:uppercase}
.brand-logo{display:block;width:100%;max-width:210px;height:auto;object-fit:contain;background:transparent;border-radius:0;padding:0;box-shadow:none}
.brand-sub{display:block;color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.env{
  margin:0 4px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(255,255,255,.025);
  color:var(--muted);font-size:12px;letter-spacing:.08em;display:flex;align-items:center;gap:7px
}
.env b{margin-left:auto;color:var(--mint);font-size:12px;border:1px solid rgba(51,214,176,.25);padding:2px 5px;border-radius:5px}
.dot,.mini-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(51,214,176,.6);display:inline-block}
#nav{display:flex;flex-direction:column;gap:2px}
.nav-group{margin:9px 9px 3px;color:var(--dim);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.nav-group-wrap{margin:2px 0}
.nav-group-btn{
  width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid transparent;
  border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:750;letter-spacing:.13em;
  text-transform:uppercase;text-align:left;transition:.16s
}
.nav-group-btn:hover{background:rgba(255,255,255,.035);color:var(--text)}
.nav-group-btn.has-active,.nav-group-wrap.has-active .nav-group-btn{color:#dffff6;background:rgba(51,214,176,.07);border-color:rgba(51,214,176,.16)}
.nav-group-btn .group-label{flex:1}
.nav-group-btn .group-count{font-size:12px;color:var(--dim);letter-spacing:0;border:1px solid var(--line);padding:1px 4px;border-radius:4px}
.nav-group-btn .chev{font-size:13px;color:var(--dim);transition:transform .18s}
.nav-group-btn.open .chev{transform:rotate(180deg);color:var(--mint)}
.nav-children{display:none;flex-direction:column;gap:2px;margin:2px 0 5px}
.nav-children.open{display:flex}
.nav-children .nav-item{padding-left:16px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:13px;border:1px solid transparent;transition:.16s}
.nav-item:hover{background:rgba(255,255,255,.035);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(51,214,176,.14),rgba(51,214,176,.03));border-color:rgba(51,214,176,.2);color:#dffff6}
.nav-item .ico{width:17px;text-align:center;color:var(--dim);font-size:14px}
.nav-item.active .ico{color:var(--mint)}
.nav-item .code{margin-left:auto;font-size:12px;color:var(--dim);letter-spacing:.04em}
.side-foot{margin-top:auto;padding:11px 10px;border-top:1px solid var(--line-soft);color:var(--dim);font-size:12px;line-height:1.6}
.side-foot b{color:var(--amber);font-weight:600}
.side-foot small{color:#496474}
.main{min-width:0}
.topbar{
  min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 34px;
  border-bottom:1px solid var(--line-soft);background:rgba(7,16,25,.66);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5
}
.crumb{color:var(--dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
h1{font-size:24px;line-height:1.2;margin:0;letter-spacing:-.02em}
.top-actions{display:flex;align-items:center;gap:8px}
.chip{font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;color:var(--muted);background:rgba(255,255,255,.02)}
.chip.live{color:var(--mint);border-color:rgba(51,214,176,.25);background:rgba(51,214,176,.06)}
.chip.live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:6px;box-shadow:0 0 8px var(--mint)}
.icon-btn,.avatar{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:7px;width:32px;height:32px}
.icon-btn:hover,.avatar:hover{color:var(--text);border-color:#2d5065}
.avatar{background:linear-gradient(135deg,#173b4a,#0e2734);color:var(--mint);font-size:12px;font-weight:800}
.view{padding:26px 34px 45px;width:100%;max-width:none}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}
.page-head h2{font-size:20px;margin:0 0 5px;letter-spacing:-.01em}
.page-head p{margin:0;color:var(--dim);font-size:13px;line-height:1.5}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--text);padding:8px 12px;border-radius:7px;font-size:12px;transition:.16s}
.btn:hover{border-color:#31586d;background:rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(135deg,var(--mint-2),var(--mint));color:#041712;border-color:transparent;font-weight:750}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--red);border-color:rgba(255,122,138,.2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:linear-gradient(160deg,rgba(16,35,49,.92),rgba(10,23,34,.92));border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-40px;top:-45px;background:radial-gradient(circle,rgba(51,214,176,.12),transparent 65%)}
.kpi .label{font-size:12px;color:var(--dim);letter-spacing:.06em;margin-bottom:8px}
.kpi .value{font-size:29px;font-weight:800;letter-spacing:-.04em;line-height:1}
.kpi .value em{font-size:13px;font-style:normal;color:var(--muted);font-weight:500;margin-left:4px}
.kpi .sub{margin-top:9px;font-size:12px;color:var(--muted)}
.kpi .sub b{color:var(--mint);font-weight:600}
.kpi.amber .value{color:var(--amber)}.kpi.red .value{color:var(--red)}.kpi.blue .value{color:var(--blue)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:14px;margin-bottom:14px}
.panel{background:linear-gradient(165deg,rgba(14,31,44,.9),rgba(8,20,30,.92));border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line-soft)}
.panel-head h3{margin:0;font-size:14px}.panel-head p{margin:4px 0 0;color:var(--dim);font-size:12px}
.link{color:var(--mint);font-size:12px;text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline}
.panel-body{padding:14px 16px;min-width:0;flex:1}
.table-wrap{width:100%;min-width:0}
.toolbar{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.search{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:7px;color:var(--text);padding:8px 10px;min-width:220px;font-size:12px;outline:none}
.search:focus{border-color:rgba(51,214,176,.45)}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.filter{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;padding:6px 9px;border-radius:6px}
.filter.active{background:rgba(51,214,176,.09);border-color:rgba(51,214,176,.28);color:var(--mint)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;color:var(--dim);font-weight:600;letter-spacing:.05em;font-size:12px;text-transform:uppercase;padding:10px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid rgba(29,52,68,.55);color:var(--muted);white-space:nowrap}
tbody tr:hover{background:rgba(255,255,255,.022)}
td strong{color:var(--text);font-weight:600}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#a8cbf5}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:5px;font-size:12px;border:1px solid;font-weight:600}
.badge:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.b-green{color:var(--mint);border-color:rgba(51,214,176,.24);background:rgba(51,214,176,.06)}
.b-amber{color:var(--amber);border-color:rgba(244,191,106,.24);background:rgba(244,191,106,.06)}
.b-red{color:var(--red);border-color:rgba(255,122,138,.24);background:rgba(255,122,138,.06)}
.b-blue{color:var(--blue);border-color:rgba(83,169,255,.24);background:rgba(83,169,255,.06)}
.b-gray{color:var(--dim);border-color:var(--line);background:rgba(255,255,255,.02)}
.actions-cell{display:flex;gap:5px}
.mini-btn{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;padding:4px 7px;border-radius:5px}
.mini-btn:hover{color:var(--text);border-color:#31586d}
.empty{padding:50px 20px;text-align:center;color:var(--dim);font-size:13px}
.empty strong{display:block;color:var(--muted);font-size:15px;margin-bottom:6px}
.activity{display:flex;flex-direction:column;gap:12px}
.act{display:flex;gap:9px;align-items:flex-start}
.act .ico{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:12px;background:rgba(51,214,176,.08);color:var(--mint);flex:none}
.act p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}
.act small{color:var(--dim);font-size:12px}
.bars{display:flex;align-items:flex-end;gap:12px;height:140px;padding:10px 4px 0}
.bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bar{width:100%;max-width:25px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--mint),rgba(51,214,176,.16));min-height:4px}
.bar-col span{font-size:12px;color:var(--dim)}
.bar-col b{font-size:12px;color:var(--muted);font-weight:500}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.small-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mini-card{border:1px solid var(--line);background:rgba(255,255,255,.022);border-radius:9px;padding:13px}
.mini-card span{display:block;color:var(--dim);font-size:12px;letter-spacing:.05em;margin-bottom:6px}
.mini-card strong{font-size:20px;letter-spacing:-.03em}
.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line-soft);padding:0 14px}
.tab{border:0;background:transparent;color:var(--dim);font-size:12px;padding:11px 9px;border-bottom:2px solid transparent}
.tab.active{color:var(--mint);border-bottom-color:var(--mint)}
.inspection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.insp-card{border:1px solid var(--line);border-radius:10px;padding:15px;background:linear-gradient(160deg,rgba(16,35,49,.9),rgba(9,22,32,.95))}
.insp-card .code{font-size:12px;color:var(--dim);letter-spacing:.08em}
.insp-card h3{font-size:15px;margin:8px 0 6px}
.insp-card p{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 13px;min-height:30px}
.insp-card .count{font-size:23px;font-weight:800;color:var(--mint)}
.insp-card .count small{font-size:12px;color:var(--dim);font-weight:500;margin-left:4px}
.toast{position:fixed;right:24px;bottom:24px;background:#0e2a28;border:1px solid rgba(51,214,176,.3);color:#dffff6;padding:12px 15px;border-radius:9px;font-size:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.inspection-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}
@media(max-width:800px){
  .shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;z-index:10;width:252px;transition:.2s}.sidebar.open{left:0}
  .topbar{padding:16px 18px;min-height:78px}.view{padding:18px}.top-actions .chip{display:none}
  .kpis{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.inspection-grid{grid-template-columns:1fr 1fr}
  h1{font-size:20px}.page-head{flex-direction:column}.search{min-width:160px;width:100%}
}
@media(max-width:480px){.kpis{grid-template-columns:1fr}.inspection-grid{grid-template-columns:1fr}.small-kpis{grid-template-columns:1fr}}

/* Light theme */
html[data-theme="light"]{
  --bg:#f3f7fa;
  --panel:#ffffff;
  --panel-2:#f7fafc;
  --line:#dbe7ee;
  --line-soft:#e8f0f4;
  --text:#11232f;
  --muted:#526c7b;
  --dim:#7d94a1;
  --shadow:0 12px 35px rgba(24,55,74,.08);
}
html[data-theme="light"] body{
  background:
    radial-gradient(900px 500px at 75% -10%,rgba(51,214,176,.10),transparent 55%),
    radial-gradient(800px 500px at 10% 110%,rgba(83,169,255,.08),transparent 55%),
    var(--bg);
}
html[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,#f7fbfd,#edf4f8);
  border-right-color:#dbe7ee;
}
html[data-theme="light"] .brand-mark{color:#fff;background:linear-gradient(135deg,#129b7f,#39c9a8)}
html[data-theme="light"] .env{background:#fff;border-color:#dbe7ee;color:#607b8a}
html[data-theme="light"] .nav-item{color:#607b8a}
html[data-theme="light"] .nav-item:hover{background:#eef6f9;color:#11232f}
html[data-theme="light"] .nav-item.active{background:linear-gradient(90deg,rgba(18,155,127,.12),rgba(18,155,127,.02));border-color:rgba(18,155,127,.22);color:#0d6f5c}
html[data-theme="light"] .nav-group-btn{color:#4e6877}
html[data-theme="light"] .nav-group-btn:hover{background:#eef6f9;color:#11232f}
html[data-theme="light"] .nav-group-btn.has-active,
html[data-theme="light"] .nav-group-wrap.has-active .nav-group-btn{
  color:#0d6f5c;background:#e9faf5;border-color:#bceee3;
}
html[data-theme="light"] .nav-group-btn .group-count{color:#607b8a;border-color:#cfe0e8;background:#fff}
html[data-theme="light"] .nav-group-btn .chev{color:#7d94a1}
html[data-theme="light"] .nav-group-btn.open .chev{color:#0d8d73}
html[data-theme="light"] .nav-children .nav-item{color:#526c7b}
html[data-theme="light"] .nav-children .nav-item:hover{background:#eef6f9;color:#11232f}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.82);border-bottom-color:#dbe7ee}
html[data-theme="light"] .chip{background:#fff;border-color:#dbe7ee;color:#607b8a}
html[data-theme="light"] .chip.live{background:#effcf8;border-color:#bceee3;color:#0d8d73}
html[data-theme="light"] .icon-btn,html[data-theme="light"] .avatar{background:#fff;border-color:#dbe7ee;color:#526c7b}
html[data-theme="light"] .icon-btn:hover,html[data-theme="light"] .avatar:hover{border-color:#a9c3d0;color:#11232f}
html[data-theme="light"] .kpi{background:linear-gradient(160deg,#fff,#f9fcfe);border-color:#dbe7ee}
html[data-theme="light"] .kpi:after{background:radial-gradient(circle,rgba(51,214,176,.10),transparent 65%)}
html[data-theme="light"] .panel{background:linear-gradient(165deg,#fff,#fbfdfe);border-color:#dbe7ee}
html[data-theme="light"] .panel-head,html[data-theme="light"] .toolbar,html[data-theme="light"] .tabs,html[data-theme="light"] .mini-card{border-color:#e8f0f4}
html[data-theme="light"] .mini-card,html[data-theme="light"] .insp-card{background:#fff;border-color:#dbe7ee}
html[data-theme="light"] .search{background:#fff;border-color:#dbe7ee;color:#11232f}
html[data-theme="light"] .filter{color:#607b8a}
html[data-theme="light"] .filter.active{background:#eafaf6;border-color:#b8e9de;color:#0d8d73}
html[data-theme="light"] td{border-bottom-color:#eef4f7;color:#526c7b}
html[data-theme="light"] tbody tr:hover{background:#f5fbfc}
html[data-theme="light"] .badge.b-gray{color:#7d94a1;border-color:#dbe7ee;background:#f8fbfc}
html[data-theme="light"] .badge.b-blue{color:#2779bd;border-color:#bddcf4;background:#eff8ff}
html[data-theme="light"] .badge.b-green{color:#0b8d72;border-color:#bceee3;background:#effcf8}
html[data-theme="light"] .badge.b-amber{color:#a66a13;border-color:#f2d6a7;background:#fff8e9}
html[data-theme="light"] .badge.b-red{color:#c94d5d;border-color:#f2c2c8;background:#fff1f2}
html[data-theme="light"] .bar{background:linear-gradient(180deg,#1fc9a3,#b3f2e4)}
html[data-theme="light"] .act .ico{background:#eafaf6}
html[data-theme="light"] .toast{background:#fff;border-color:#bceee3;color:#0d6f5c}
html[data-theme="light"] .theme-btn{color:#f0a928}
html[data-theme="dark"] .theme-btn{color:#f2c55b}