* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, "Noto Sans KR", sans-serif;
    color: #1f2933;
    background: #eef2f6;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 28px;
    background: #17212b;
    color: #fff;
}
.topbar h1 { margin: 0 0 4px; font-size: 24px; }
.topbar p { margin: 0; color: #b8c2cc; font-size: 13px; }
.topbar a { color: #fff; text-decoration: none; margin-left: 16px; font-weight: 700; }
main { padding: 22px; }
.panel {
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
h2 { margin: 0 0 16px; font-size: 18px; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
th, td {
    border-bottom: 1px solid #e5e9f0;
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #52606d;
    background: #f8fafc;
    font-size: 12px;
    white-space: nowrap;
}
td span { color: #697586; font-size: 12px; }
.table-wrap {
    max-height: calc(100vh - 265px);
    overflow: auto;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
}
.status-table th, .status-table td { min-width: 92px; }
.status-table th:first-child, .status-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    min-width: 120px;
}
.status-table th:first-child { z-index: 3; background: #f8fafc; }
.server-cell strong { display: block; font-size: 15px; color: #17212b; }
.server-cell span { display: block; margin-top: 3px; white-space: nowrap; }
.badge {
    display: inline-block;
    min-width: 72px;
    padding: 5px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}
.badge.ok { background: #d8f3dc; color: #1b7f3a; }
.badge.high { background: #ffd6d6; color: #b42318; }
.badge.medium { background: #fff3bf; color: #946200; }
.badge.low { background: #dbeafe; color: #1d4ed8; }
.badge.unknown { background: #e6e8eb; color: #52606d; }
.cell-high {
    background: #fff1f1 !important;
    color: #9f1239;
    font-weight: 700;
}
.cell-medium {
    background: #fff8db !important;
    color: #7c4a03;
    font-weight: 700;
}
.cell-low {
    background: #eff6ff !important;
    color: #1e40af;
}
.cell-ok {
    background: #f7fdf9 !important;
}
.kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 74px;
    line-height: 1.55;
}
.kv b {
    color: #52606d;
    font-size: 11px;
}
.time-cell {
    min-width: 136px;
    white-space: nowrap;
    color: #52606d;
}
.metric { min-width: 128px; }
.metric-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 5px;
}
.metric-line strong {
    font-size: 12px;
    white-space: nowrap;
}
.metric-line span {
    color: #52606d;
    font-weight: 700;
}
.bar {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e2ec;
}
.bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
}
.bar i.ok { background: #2f9e44; }
.bar i.low { background: #3b82f6; }
.bar i.medium { background: #f59f00; }
.bar i.high { background: #e03131; }
.disk-stack {
    display: grid;
    gap: 4px;
    min-width: 160px;
}
.resource-stack {
    min-width: 150px;
}
.resource-stack .disk-row {
    grid-template-columns: 40px minmax(80px, 1fr);
}
.load-stack {
    min-width: 132px;
}
.load-stack .disk-row {
    grid-template-columns: 36px minmax(70px, 1fr);
}
.load-stack .load-max span {
    color: #52606d;
}
.load-stack .load-max::after {
    content: "";
}
.process-stack {
    display: grid;
    gap: 2px;
    min-width: 126px;
}
.proc-kv {
    min-width: 118px;
}
.proc-kv b {
    flex: 0 0 16px;
}
.disk-row {
    display: grid;
    grid-template-columns: 34px minmax(80px, 1fr);
    gap: 6px;
    align-items: center;
    font-size: 12px;
}
.disk-row b {
    color: #52606d;
    font-size: 11px;
}
.disk-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #17212b;
    font-weight: 700;
}
.disk-row em {
    grid-column: 2;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e2ec;
}
.disk-row i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #2f9e44;
}
.disk-row.low i { background: #3b82f6; }
.disk-row.medium i { background: #f59f00; }
.disk-row.high i { background: #e03131; }
.legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
    flex-wrap: wrap;
}
.chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.chip.ok { background: #d8f3dc; color: #1b7f3a; }
.chip.high { background: #ffd6d6; color: #b42318; }
.chip.medium { background: #fff3bf; color: #946200; }
.chip.low { background: #dbeafe; color: #1d4ed8; }
.chip.reset { background: #eef2f7; color: #243b53; text-decoration: none; }
.hint { color: #697586; font-size: 13px; }
.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.summary-card {
    border-radius: 6px;
    border: 1px solid #d9e2ec;
    background: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: inherit;
    text-decoration: none;
}
.summary-card span { color: #52606d; font-weight: 700; }
.summary-card strong { font-size: 28px; }
.summary-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
}
.summary-card.active {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px #2563eb;
}
.summary-card.total strong { color: #243b53; }
.summary-card.good strong { color: #1b7f3a; }
.summary-card.normal strong { color: #946200; }
.summary-card.danger strong { color: #b42318; }
.summary-card.unknown strong { color: #52606d; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.notice {
    margin: -4px 0 16px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 13px;
}
.value-changed {
    position: relative;
    animation: valuePulse 2.8s ease-out 1;
}
@keyframes valuePulse {
    0% { background-color: #dbeafe; box-shadow: inset 0 0 0 3px #2563eb; }
    55% { background-color: #fef3c7; box-shadow: inset 0 0 0 2px #f59e0b; }
    100% { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0); }
}
button, .button {
    display: inline-block;
    border: 0;
    border-radius: 5px;
    padding: 9px 13px;
    background: #1463ff;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
    background: #94a3b8;
    color: #f8fafc;
}
.button.ghost {
    background: #eef2f7;
    color: #243b53;
}
.grid-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
label { display: block; font-size: 13px; font-weight: 700; color: #52606d; }
input, textarea, select {
    width: 100%;
    margin-top: 5px;
    border: 1px solid #bcccdc;
    border-radius: 5px;
    padding: 9px;
    font: inherit;
    background: #fff;
}
textarea { min-height: 70px; }
.wide { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 8px; padding-top: 24px; }
.check input { width: auto; }
.actions { display: flex; gap: 8px; }
.filter-form {
    display: flex;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.filter-form label {
    min-width: 180px;
}
.filter-form button {
    min-width: 84px;
}
.trend-summary .summary-card strong {
    font-size: 24px;
}
.trend-wrap {
    max-height: calc(100vh - 315px);
}
.trend-table th,
.trend-table td {
    min-width: 96px;
}
.trend-table td:nth-child(2) {
    min-width: 120px;
}
.trend-pair {
    display: grid;
    gap: 3px;
    min-width: 94px;
}
.trend-pair span,
.trend-pair em {
    color: #52606d;
    font-size: 12px;
    font-style: normal;
}
.trend-pair strong {
    color: #17212b;
    font-size: 13px;
    white-space: nowrap;
}
.fail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 3px 8px;
    min-width: 100px;
}
.fail-grid span {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #17212b;
    font-size: 12px;
}
.fail-grid b {
    color: #52606d;
    font-size: 11px;
}
@media (max-width: 1100px) {
    main { padding: 14px; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .grid-form { grid-template-columns: 1fr; }
    .status-table { min-width: 900px; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    main { padding: 12px; }
    .panel {
        padding: 12px;
        border-radius: 6px;
    }
    .summary-grid {
        grid-template-columns: 1fr;
    }
    .toolbar {
        flex-direction: column;
    }
    .toolbar button,
    .toolbar .button {
        width: 100%;
        text-align: center;
    }
    .filter-form {
        display: grid;
        grid-template-columns: 1fr;
    }
    .filter-form label,
    .filter-form button {
        width: 100%;
        min-width: 0;
    }
    .table-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }
    .status-table,
    .trend-table {
        display: block;
        min-width: 0;
        border-collapse: separate;
        font-size: 13px;
    }
    .status-table thead,
    .trend-table thead {
        display: none;
    }
    .status-table tbody,
    .trend-table tbody {
        display: grid;
        gap: 10px;
    }
    .status-table tr,
    .trend-table tr {
        display: block;
        overflow: hidden;
        border: 1px solid #e5e9f0;
        border-radius: 6px;
        background: #fff;
    }
    .status-table td,
    .status-table td:first-child,
    .trend-table td {
        position: static;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
        min-width: 0;
        padding: 10px 12px;
        border-bottom: 1px solid #eef2f7;
        background: inherit;
        align-items: start;
    }
    .status-table td:last-child,
    .trend-table td:last-child {
        border-bottom: 0;
    }
    .status-table td::before,
    .trend-table td::before {
        content: attr(data-label);
        color: #697586;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }
    .status-table .server-cell {
        grid-template-columns: 1fr;
        padding: 13px 12px;
        background: #f8fafc !important;
    }
    .status-table .server-cell::before {
        display: none;
    }
    .server-cell strong {
        font-size: 16px;
    }
    .server-cell span {
        white-space: normal;
    }
    .kv,
    .proc-kv {
        min-width: 0;
    }
    .disk-stack,
    .resource-stack,
    .load-stack,
    .process-stack {
        min-width: 0;
        width: 100%;
    }
    .time-cell {
        min-width: 0;
        white-space: normal;
    }
}