:root {
    --dp-primary: #1565C0;
    --dp-dark: #0D3F8C;
    --dp-ok: #2E7D32;
    --dp-warn: #F57C00;
    --dp-err: #E53935;
    --dp-bg: #F5F7FA;
    --dp-card-bg: #FFFFFF;
    --dp-border: #E0E5EB;
}

html, body {
    margin: 0; padding: 0;
    background: var(--dp-bg);
    font-family: -apple-system, "Segoe UI", "Malgun Gothic", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

.dp-page {
    display: flex; flex-direction: column;
    min-height: 100vh;
}

.dp-header {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--dp-primary);
    color: white;
    padding: 12px 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky; top: 0; z-index: 10;
}
.dp-brand {
    color: white; font-weight: 700; text-decoration: none; font-size: 17px;
}
.dp-user {
    color: white; font-size: 13px; opacity: 0.9;
    margin-right: 8px;
}

.dp-navbar {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--dp-border);
    overflow-x: auto;
}
.dp-nav-item {
    flex: 1 1 auto;
    padding: 14px 12px;
    text-align: center;
    color: #455A64;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.dp-nav-item.active {
    color: var(--dp-primary);
    border-bottom-color: var(--dp-primary);
    background: #E3F2FD;
}

.dp-content {
    padding: 16px;
    max-width: 980px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.dp-card {
    background: var(--dp-card-bg);
    border: 1px solid var(--dp-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.dp-card h3 { font-size: 16px; margin: 0 0 8px 0; }

.dp-kpi { display: flex; gap: 8px; margin: 8px 0; }
.dp-kpi-cell {
    flex: 1;
    background: #ECEFF1; border-radius: 8px; padding: 8px 10px; text-align: center;
}
.dp-kpi-cell .label { font-size: 11px; color: #546E7A; }
.dp-kpi-cell .value { font-size: 20px; font-weight: 700; }

.dp-status-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}
.status-online  { background: var(--dp-ok); }
.status-offline { background: #9E9E9E; }
.status-error   { background: var(--dp-err); }
.status-pending { background: #BDBDBD; }

.dp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--dp-border);
}
.dp-row:last-child { border-bottom: 0; }
.dp-row .title { font-weight: 600; color: #263238; }
.dp-row .sub   { font-size: 12px; color: #78909C; }

.dp-btn-primary {
    background: var(--dp-primary); color: white; border: none;
    padding: 10px 16px; border-radius: 6px; font-weight: 600; cursor: pointer;
    width: 100%;
}
.dp-btn-primary:disabled { opacity: 0.6; }

.dp-btn-secondary {
    background: white; color: var(--dp-primary); border: 1px solid var(--dp-primary);
    padding: 8px 14px; border-radius: 6px; font-weight: 500; cursor: pointer;
}

@media (min-width: 480px) {
    .dp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (min-width: 768px) {
    .dp-navbar { justify-content: center; }
    .dp-nav-item { flex: 0 0 auto; min-width: 120px; }
}

.dp-alert {
    padding: 12px; border-radius: 6px;
    background: #FFF3E0; color: #E65100; border: 1px solid #FFCC80;
    margin: 10px 0;
}
.dp-loading { text-align: center; padding: 24px; color: #78909C; }

.blazor-error-boundary {
    padding: 1rem; color: white; background: #b32121;
}
.blazor-error-boundary::after { content: "오류가 발생했습니다."; }