:root {
--ink:#17212b;
--muted:#6f7c87;
--line:#dde3e8;
--navy:#142f45;
--blue:#1d6fa5;
--cyan:#22a4bb;
--paper:#f4f7f9}
* {
box-sizing:border-box}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font:16px Arial,"Noto Sans KR",sans-serif}
aside {
position:fixed;
inset:0 auto 0 0;
width:220px;
background:var(--navy);
color:#fff;
padding:28px 20px;
display:flex;
flex-direction:column}
.brand {
display:flex;
align-items:center;
gap:12px;
font-size:20px}
.brand span,.login-brand {
display:grid;
place-items:center;
background:var(--cyan);
color:#fff;
font-weight:800;
border-radius:10px}
.brand span {
width:38px;
height:38px}
nav {
display:grid;
gap:8px;
margin-top:50px}
nav a {
color:#b9cad6;
text-decoration:none;
padding:12px 14px;
border-radius:7px}
nav a:hover {
background:#21445f;
color:#fff}
aside small {
margin-top:auto;
color:#91a9b9;
border-top:1px solid #2d4a60;
padding-top:18px}
main {
margin-left:220px;
padding:34px 38px 56px;
max-width:1680px}
header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px}
header p {
font-size:12px;
letter-spacing:.16em;
color:var(--blue);
font-weight:700;
margin:0 0 7px}
h1 {
font-size:28px;
margin:0}
h2 {
font-size:17px;
margin:0}
#status {
font-size:13px;
background:#e9f7f1;
color:#14714a;
padding:9px 13px;
border-radius:20px}
.header-actions {
display:flex;
align-items:center;
gap:10px}
.header-actions form {
margin:0}
.logout {
border:1px solid var(--line);
background:#fff;
color:var(--ink);
border-radius:20px;
padding:8px 13px;
cursor:pointer}
.filters {
display:flex;
gap:12px;
align-items:end;
background:#fff;
border:1px solid var(--line);
padding:15px 18px;
margin-bottom:18px}
.filters label {
display:grid;
gap:6px;
color:var(--muted);
font-size:13px}
.filters input,.filters select {
height:40px;
border:1px solid #ccd5dc;
border-radius:5px;
padding:0 11px;
background:#fff;
font-size:14px;
min-width:160px}
.filters button {
height:40px;
border:0;
border-radius:5px;
padding:0 25px;
background:var(--blue);
color:#fff;
font-weight:700}
.kpis {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px}
.kpis article,.panel {
background:#fff;
border:1px solid var(--line);
box-shadow:0 2px 8px #142f4508}
.kpis article {
padding:20px;
border-top:3px solid var(--blue)}
.kpis span {
display:block;
color:var(--muted);
font-size:13px}
.kpis strong {
display:block;
font-size:27px;
margin:13px 0 7px}
.kpis small,.title span {
color:#94a0a9}
.grid {
display:grid;
grid-template-columns:2fr 1fr;
gap:14px;
margin:14px 0}
.panel {
padding:20px;
margin-bottom:14px}
.title {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px}
.title span {
font-size:12px}
.chart {
height:250px;
display:flex;
align-items:end;
gap:8px;
border-bottom:1px solid var(--line);
padding:16px 8px 0}
.column {
flex:1;
min-width:10px;
background:linear-gradient(var(--cyan),var(--blue));
position:relative}
.column label {
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
font-size:11px;
white-space:nowrap}
.column small {
position:absolute;
bottom:-28px;
left:50%;
transform:translateX(-50%);
font-size:11px;
color:var(--muted)}
.bars {
display:grid;
gap:18px}
.bar {
display:grid;
grid-template-columns:90px 1fr 50px;
gap:10px;
align-items:center;
font-size:13px}
.track {
height:9px;
background:#edf1f4}
.fill {
height:100%;
background:var(--cyan)}
table {
width:100%;
border-collapse:collapse;
font-size:14px}
th,td {
padding:11px 12px;
border-bottom:1px solid #edf0f2;
text-align:left;
white-space:nowrap}
th {
font-size:12px;
color:#66737e}
.table {
overflow:auto}
.empty {
text-align:center;
color:var(--muted);
padding:28px}
.login-body {
min-height:100vh;
background:linear-gradient(135deg,#10283b,#1d6fa5);
display:grid;
place-items:center}
.login-main {
margin:0;
padding:24px;
width:100%;
max-width:450px}
.login-card {
background:#fff;
padding:38px;
border-radius:12px;
box-shadow:0 24px 60px #06131d55}
.login-brand {
width:46px;
height:46px}
.login-card>p {
font-size:12px;
letter-spacing:.14em;
color:var(--blue);
margin:22px 0 7px}
.login-card h1 {
margin-bottom:25px}
.login-card form {
display:grid;
gap:17px}
.login-card label {
display:grid;
gap:7px;
font-size:14px;
color:var(--muted)}
.login-card input {
height:46px;
border:1px solid #cbd5dc;
border-radius:6px;
padding:0 13px;
font-size:16px}
.login-card button {
height:46px;
border:0;
border-radius:6px;
background:var(--blue);
color:#fff;
font-weight:700;
font-size:15px}
.login-error {
background:#fff0f0;
color:#ad3030;
padding:11px 13px;
margin-bottom:17px;
border-radius:6px;
font-size:14px}
@media(max-width:1000px) {
aside {
position:static;
width:auto;
flex-direction:row;
align-items:center}
nav {
display:flex;
margin:0 0 0 auto}
aside small {
display:none}
main {
margin:0;
padding:24px}
.login-main {
margin:0}
.kpis {
grid-template-columns:repeat(2,1fr)}
.grid {
grid-template-columns:1fr}
}
@media(max-width:650px) {
nav {
display:none}
.filters {
flex-direction:column;
align-items:stretch}
.kpis {
grid-template-columns:1fr 1fr}
.kpis strong {
font-size:21px}
.header-actions {
align-items:flex-end;
flex-direction:column}
}