:root {
  --bg: #eef3f8;
  --bg-grad-a: #edf1f8;
  --bg-grad-b: #eef7f3;
  --panel: rgba(255,255,255,.84);
  --panel-strong: rgba(255,255,255,.94);
  --line: rgba(117,132,160,.18);
  --line-strong: rgba(117,132,160,.28);
  --text: #142033;
  --muted: #67768b;
  --primary: #24324d;
  --primary-2: #2d6cdf;
  --ok: #24b38a;
  --ok-soft: #d9f4ec;
  --warn: #e5a21a;
  --warn-soft: #f8ecd4;
  --danger: #e45858;
  --danger-soft: #fae0e0;
  --violet: #8d6bf7;
  --violet-soft: #ece6ff;
  --nav-pill: #25324b;
  --shadow: 0 16px 40px rgba(51,68,97,.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --font-scale: 1;
  --content-max: 1460px;
}
body[data-theme="dark"] {
  --bg: #0f1724;
  --bg-grad-a: #101a28;
  --bg-grad-b: #13232a;
  --panel: rgba(19,28,44,.88);
  --panel-strong: rgba(23,34,54,.96);
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);
  --text: #edf3fb;
  --muted: #9dafc7;
  --primary: #dfe7f5;
  --primary-2: #79a8ff;
  --ok: #34d3a5;
  --ok-soft: rgba(52,211,165,.18);
  --warn: #f4b43f;
  --warn-soft: rgba(244,180,63,.18);
  --danger: #ff7272;
  --danger-soft: rgba(255,114,114,.18);
  --violet: #b59cff;
  --violet-soft: rgba(181,156,255,.18);
  --nav-pill: #dfe7f5;
  --shadow: 0 18px 44px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale)); }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(90deg, var(--bg-grad-a), var(--bg-grad-b));
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { max-width: var(--content-max); margin: 0 auto; padding: 18px 18px 28px; }
.topbar {
  display: grid; grid-template-columns: 1.2fr auto; gap: 20px; align-items: start;
}
.brand h1 { margin: 0; font-size: 2rem; line-height: 1.08; letter-spacing: -.03em; }
.brand p { margin: 6px 0 0; color: var(--muted); font-size: .96rem; }
.nav-cluster { display: flex; align-items: center; gap: 16px; justify-content: flex-end; flex-wrap: wrap; }
.top-nav {
  display: inline-flex; padding: 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); backdrop-filter: blur(14px); box-shadow: var(--shadow); gap: 6px;
}
.top-nav a {
  padding: 14px 18px; border-radius: 999px; font-weight: 800; color: var(--primary);
}
.top-nav a.active { background: var(--nav-pill); color: #fff; }
body[data-theme="dark"] .top-nav a.active { color: #182335; background: var(--nav-pill); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn, .scale-pill, .btn, .menu-card, .subnav-card, .stat-card, .mini-card, .action-card, .wall-card, .list-row, .log-box, .detail-box, .filter-box, .summary-card, .metric-box {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.icon-btn {
  width: 54px; height: 54px; border-radius: 18px; background: var(--panel-strong); color: var(--text); font-size: 1.15rem;
}
.font-box { display: flex; align-items: center; gap: 12px; }
.font-presets {
  display: inline-flex; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-strong);
}
.font-presets button {
  padding: 14px 18px; border: 0; background: transparent; color: var(--text); font-weight: 900;
}
.font-presets button.active { background: rgba(45,108,223,.12); color: var(--primary-2); }
.font-range { display: flex; align-items: center; gap: 10px; }
.font-range label { color: var(--muted); font-size: .9rem; font-weight: 800; }
.font-range input { width: 200px; }
.action-buttons { display: flex; gap: 12px; }
.btn {
  padding: 16px 20px; border-radius: 18px; font-weight: 900; color: var(--text);
}
.btn.primary { border-color: rgba(45,108,223,.34); background: rgba(45,108,223,.10); }
.btn.warn { border-color: rgba(229,162,26,.34); background: rgba(229,162,26,.10); }
.btn.ok { border-color: rgba(36,179,138,.34); background: rgba(36,179,138,.10); }
.layout {
  display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 18px; margin-top: 18px;
}
.sidebar { display: grid; gap: 16px; align-content: start; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-title h2, .panel-title h3 { margin: 0; font-size: 1.65rem; letter-spacing: -.02em; }
.panel-title .sub { color: var(--muted); font-size: .95rem; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: .77rem; font-weight: 900; border: 1px solid var(--line-strong);
}
.tag.live { background: rgba(45,108,223,.10); color: var(--primary-2); }
.tag.queue { background: rgba(141,107,247,.10); color: var(--violet); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.sidebar-block, .content-block { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); border-radius: var(--radius-xl); }
.sidebar-header, .block-header { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.sidebar-content, .block-content { padding: 16px 18px 18px; }
.menu-list, .subnav-list, .filter-list { display: grid; gap: 12px; }
.menu-card, .subnav-card {
  padding: 18px; border-radius: var(--radius-lg); transition: transform .15s ease, border-color .15s ease; display: block;
}
.menu-card:hover, .subnav-card:hover, .list-row:hover, .wall-card:hover { transform: translateY(-1px); }
.menu-card.active, .subnav-card.active {
  border-color: rgba(45,108,223,.38); background: rgba(45,108,223,.10);
}
.menu-card strong, .subnav-card strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.menu-card .meta, .subnav-card .meta { margin-top: 6px; color: var(--muted); font-size: .95rem; }
.menu-card .row, .subnav-card .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.main { display: grid; gap: 18px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.summary-card { padding: 22px; border-radius: var(--radius-xl); min-height: 148px; }
.summary-card.em-ok { border-color: rgba(36,179,138,.34); }
.summary-card.em-warn { border-color: rgba(229,162,26,.34); }
.summary-card.em-violet { border-color: rgba(141,107,247,.30); }
.summary-card .k { color: var(--muted); font-size: 1.08rem; font-weight: 800; }
.summary-card .v { margin-top: 10px; font-size: 3rem; line-height: 1; font-weight: 950; letter-spacing: -.03em; }
.summary-card .s { margin-top: 8px; color: var(--muted); font-size: .98rem; }
.block-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.block-header h3 { margin: 0; font-size: 1.6rem; letter-spacing: -.02em; }
.block-header p { margin: 6px 0 0; color: var(--muted); font-size: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card-stack { display: grid; gap: 16px; }
.action-card, .metric-box { padding: 18px; border-radius: var(--radius-lg); }
.action-card strong, .metric-box strong { display: block; font-size: 1.6rem; }
.action-card p, .metric-box p { margin: 6px 0 0; color: var(--muted); font-size: .96rem; }
.action-row, .mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mini-card { padding: 16px; border-radius: var(--radius-lg); min-height: 126px; }
.mini-card .k { color: var(--muted); font-size: 1rem; font-weight: 800; }
.mini-card .v { margin-top: 8px; font-size: 2.25rem; font-weight: 950; }
.mini-card .s { margin-top: 6px; color: var(--muted); font-size: .96rem; }
.ctrl-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ctrl-row .btn { flex: 1; min-width: 170px; }
.log-box { padding: 0; border-radius: var(--radius-xl); overflow: hidden; }
.log-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #03112c; color: #eaf0ff;
  padding: 16px; min-height: 360px; max-height: 520px; overflow: auto; line-height: 1.6; font-size: .95rem;
}
body[data-theme="dark"] .log-area { background: #071126; }
.wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wall-card { padding: 18px; border-radius: var(--radius-xl); }
.wall-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.wall-card h4 { margin: 0; font-size: 1.34rem; }
.wall-card p { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.progress {
  margin-top: 14px; height: 14px; background: rgba(103,118,139,.14); border-radius: 999px; overflow: hidden;
}
.progress > div { height: 100%; border-radius: 999px; }
.progress.ok > div { background: var(--ok); }
.progress.warn > div { background: var(--warn); }
.progress.danger > div { background: #ef4545; }
.wall-note { margin-top: 10px; color: var(--muted); font-size: .95rem; }
.cell-grid {
  margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.cell-grid span { height: 12px; border-radius: 999px; background: #d2d6db; }
.cell-grid span.on { background: #67d2b2; }
.cell-grid span.off { background: #cfd4d9; }
.cell-grid span.warn { background: #ffd276; }
.action-row .btn.small, .wall-card .btn.small { padding: 14px 16px; border-radius: 16px; }
.wave-detail-grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: 18px; }
.detail-box { padding: 18px; border-radius: var(--radius-xl); }
.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.kv-item { padding: 14px 16px; border-radius: 18px; background: rgba(103,118,139,.06); border: 1px solid var(--line); }
.kv-item .k { color: var(--muted); font-size: .92rem; }
.kv-item .v { margin-top: 6px; font-size: 1.24rem; font-weight: 900; }
.product-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.product-table th, .product-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .97rem; }
.product-table th { color: var(--muted); font-size: .9rem; }
.filter-box { padding: 18px; border-radius: var(--radius-xl); }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: .92rem; font-weight: 800; }
.field input, .field select {
  height: 56px; border: 1px solid var(--line-strong); border-radius: 16px; padding: 0 16px; background: var(--panel-strong); color: var(--text);
}
.list-panel { display: grid; gap: 12px; }
.list-row {
  padding: 16px 18px; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.list-row strong { font-size: 1.18rem; }
.list-row .meta { margin-top: 4px; color: var(--muted); font-size: .95rem; }
.row-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dot { width: 16px; height: 16px; border-radius: 999px; background: #d5dae2; flex: 0 0 auto; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.danger { background: var(--danger); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.page-head .left h2 { margin: 0; font-size: 1.8rem; }
.page-head .left p { margin: 6px 0 0; color: var(--muted); }
.subpage-links { display: flex; gap: 10px; flex-wrap: wrap; }
.subpage-links a { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-weight: 800; }
.subpage-links a.active { color: var(--primary-2); border-color: rgba(45,108,223,.34); background: rgba(45,108,223,.10); }
.footer-note { color: var(--muted); font-size: .92rem; }
@media (max-width: 1320px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr 1fr; }
  .summary-grid, .wall-grid, .grid-3, .filter-grid, .wave-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .topbar, .page-head, .block-header { grid-template-columns: 1fr; display: grid; }
  .nav-cluster { justify-content: flex-start; }
  .summary-grid, .grid-2, .grid-3, .wall-grid, .wave-detail-grid, .filter-grid, .action-row, .mini-grid, .kv-grid, .sidebar { grid-template-columns: 1fr; }
  .top-nav { overflow: auto; max-width: 100%; }
}