*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',sans-serif;background:#f0f2f5;color:#333}

/* ── 로그인 ──────────────────────────────── */
.login-wrapper{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1a3a5c 0%,#0d7377 100%)}
.login-box{background:white;padding:40px;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.2);width:400px;max-width:90vw}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo-img{width:220px;height:auto}

/* ── 레이아웃 ────────────────────────────── */
.layout{display:flex;min-height:100vh}
.sidebar{width:220px;background:#1a3a5c;color:white;flex-shrink:0;display:flex;flex-direction:column;transition:width 0.25s ease;overflow:hidden}
.sidebar.sidebar-collapsed{width:64px}
.logo{padding:20px;border-bottom:1px solid rgba(255,255,255,0.1);text-align:center;height:72px;display:flex;align-items:center;justify-content:center}
.logo-img{width:100%;max-width:180px;height:auto}
.logo-letter{font-size:28px;font-weight:700;color:#4fc3f7}

/* el-menu 사이드바 스타일 */
.sidebar-menu{border-right:none!important;flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar-menu:not(.el-menu--collapse){width:220px}
.sidebar-menu .el-menu-item,.sidebar-menu .el-sub-menu__title{height:44px;line-height:44px;font-size:13px}
.sidebar-menu .el-sub-menu .el-menu-item{padding-left:52px!important;height:40px;line-height:40px;font-size:13px}
.sidebar-menu .el-menu-item.is-active{background:rgba(79,195,247,0.15)!important;border-right:3px solid #4fc3f7}

/* 사이드바 하단 영역 */
.sidebar-footer{padding:12px 0;border-top:1px solid rgba(255,255,255,0.1);display:flex;flex-direction:column;align-items:center;gap:8px}
.logout-btn{width:calc(100% - 24px);margin:0 12px}
.sidebar-collapsed .logout-btn{width:40px;padding:8px}
.collapse-toggle{cursor:pointer;color:rgba(255,255,255,0.5);padding:6px;transition:color 0.2s}
.collapse-toggle:hover{color:white}

/* ── 메인 영역 ────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column}
.header{background:white;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.header h2{font-size:18px;color:#1a3a5c}
.header-right{display:flex;align-items:center;gap:12px;font-size:13px;color:#666}
.page{padding:24px;overflow-y:auto}

/* ── KPI 카드 ─────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi-card{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-left:4px solid #1a3a5c}
.kpi-card.success{border-left-color:#2ecc71}
.kpi-card.warning{border-left-color:#f39c12}
.kpi-card.danger{border-left-color:#e74c3c}
.kpi-label{font-size:12px;color:#888;margin-bottom:8px}
.kpi-value{font-size:32px;font-weight:700;color:#1a3a5c}

/* ── 차트/테이블 ──────────────────────────── */
.chart-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.chart-box{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.chart-box h3{font-size:14px;color:#555;margin-bottom:16px}
.table-box{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.table-box h3{font-size:14px;color:#555;margin-bottom:16px}

/* ── 폼 ──────────────────────────────────── */
.form-box{background:white;padding:24px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08);max-width:600px}
.form-box h3{font-size:16px;color:#1a3a5c;margin-bottom:20px}

/* ── 반응형 ──────────────────────────────── */
@media (max-width:768px) {
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .chart-grid{grid-template-columns:1fr}
  .sidebar{width:64px}
  .sidebar .logo-img{display:none}
  .sidebar .logo-letter{display:block}
}