/* 공용 대시보드 스타일 */
:root {
  --color-bg:#f4f4f4;
  --color-bg-dark:#121417;
  --color-surface:#ffffff;
  --color-surface-dark:#1f242b;
  --color-text:#222;
  --color-text-muted:#5d6b7a;
  --color-primary:#3498db;
  --color-primary-grad:#2478b9;
  --color-accent:#8e44ad;
  --color-accent-grad:#6d2e8d;
  --radius-lg:14px;
  --shadow:0 6px 14px rgba(0,0,0,0.08);
  --shadow-hover:0 10px 22px rgba(0,0,0,0.28);
  --transition: .25s ease;
  --min-card-width:210px;
}

*{box-sizing:border-box;}
body.dash-body {
  font-family: Arial, sans-serif;
  margin:0;
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}

.dash-container {
  width:90%;
  max-width:1180px;
  margin:40px auto 60px;
  background:var(--color-surface);
  padding:25px 30px 40px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

.dash-title {
  text-align:center;
  margin:5px 0 30px;
  font-size:32px;
  letter-spacing:-1px;
  color:var(--color-text);
}

.section-title {
  font-size:20px;
  font-weight:700;
  margin:35px 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#1f3d60;
}
.section-title:first-of-type { margin-top:5px; }
.section-title.alt { color:#4a1b63; }

.badge {
  font-size:12px;
  padding:2px 8px 3px;
  border-radius:30px;
  letter-spacing:.5px;
  font-weight:600;
}
.badge-offline { background:#1f3d60; color:#fff; }
.badge-online  { background:#6d2e8d; color:#fff; }

.dashboard-group {
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(var(--min-card-width),1fr));
  align-items:stretch;
  margin-bottom:8px;
}

.dashboard-icon {
  position:relative;
  color:#fff;
  padding:18px 18px 16px;
  border-radius:12px;
  min-height:140px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
  outline:none;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-grad));
}
.group-1 .dashboard-icon {}
.group-2 .dashboard-icon { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-grad)); }
.dashboard-icon.violet { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-grad)); }

.dashboard-icon:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
}
.dashboard-icon:active { transform:translateY(-1px); }
.dashboard-icon:focus-visible {
  box-shadow:0 0 0 3px #fff,0 0 0 5px #ffcc32, var(--shadow-hover);
}

.dashboard-icon i {
  font-size:46px;
  opacity:.18;
  position:absolute;
  right:14px;
  bottom:10px;
  pointer-events:none;
}
.dashboard-icon .title {
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}
.dashboard-icon .sub {
  font-size:13px;
  opacity:.85;
  margin-top:8px;
}

/* 로그아웃 버튼 */
.back-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:40px;
  background:#444;
  color:#fff;
  text-decoration:none;
  padding:12px 20px;
  border-radius:8px;
  font-weight:600;
  letter-spacing:.5px;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:background var(--transition);
}
.back-button:hover { background:#000; }

/* 통계 페이지 표 스타일 */
.stats-wrapper h2{
  margin-top:34px;
  font-size:20px;
  color:#1f3d60;
}
.stats-wrapper h2:first-of-type{ margin-top:10px; }
.stats-table{
  width:100%;
  border-collapse:collapse;
  margin:12px 0 10px;
  background:#fff;
  border:1px solid #dbe3ea;
  font-size:14px;
}
.stats-table thead th{
  background:#f5f7fa;
  color:#334;
  font-weight:600;
  padding:8px 10px;
  border:1px solid #dbe3ea;
  text-align:left;
}
.stats-table tbody td{
  padding:8px 10px;
  border:1px solid #e4ebf0;
  vertical-align:top;
  line-height:1.4;
}
.stats-table tbody tr:nth-child(even){
  background:#fbfdff;
}
.stats-table tbody tr:hover{
  background:#f0f8ff;
}
.grand-total-box{
  padding:14px 18px;
  background:#eef6ff;
  border:1px solid #c9e2f7;
  border-radius:10px;
  font-size:18px;
  color:#124d82;
  display:inline-block;
  margin-top:24px;
}

/* 메인 선택 페이지 */
.main-select { max-width:640px; }
.select-buttons{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-top:10px;
}
.select-buttons .select-btn{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-grad));
  color:#fff;
  border:none;
  border-radius:14px;
  padding:18px 16px 20px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:.25s;
  outline:none;
}
.select-buttons .select-btn i{font-size:22px;opacity:.9;}
.select-buttons .select-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.select-buttons .select-btn:active{transform:translateY(-1px);}
.select-buttons .select-btn:focus-visible{
  box-shadow:0 0 0 3px #fff,0 0 0 5px #ffcc32,0 10px 22px rgba(0,0,0,.28);
}
.logo-block{
  margin:40px 0 0;
  display:flex;
  justify-content:center;
}
@media (max-width:560px){
  .select-buttons{gap:14px;}
  .select-buttons .select-btn{font-size:15px;padding:16px 14px;}
  .select-buttons .select-btn i{font-size:20px;}
}

/* 반응형 */
@media (max-width:820px){
  .dashboard-icon{min-height:130px;}
  .dashboard-icon i{font-size:40px;right:12px;bottom:8px;}
}
@media (max-width:560px){
  .dash-title{font-size:26px;margin-bottom:22px;}
  .section-title{font-size:18px;margin:28px 0 12px;}
  .dashboard-icon{padding:16px 16px 14px;min-height:120px;}
  .dashboard-icon .title{font-size:16px;}
  .dashboard-icon .sub{font-size:12px;margin-top:6px;}
}
@media (max-width:400px){
  .dash-container{padding:20px 18px 34px;}
  .dashboard-group{gap:14px;}
  .dashboard-icon{border-radius:10px;}
}
@media (max-width:640px){
  .stats-table thead { display:none; }
  .stats-table tbody tr{
    display:block;
    margin-bottom:10px;
    border:1px solid #dbe3ea;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
  }
  .stats-table tbody td{
    display:flex;
    justify-content:space-between;
    gap:14px;
    border:none;
    border-bottom:1px solid #eef2f5;
    font-size:13px;
    padding:7px 12px;
  }
  .stats-table tbody td:last-child{ border-bottom:none; }
  .stats-table tbody td:before{
    content:attr(data-label);
    font-weight:600;
    color:#345;
    flex:0 0 110px;
  }
}

/* 로그인 박스 */
.login-box{
  max-width:420px;
  padding:42px 46px 48px;
}
@media (max-width:520px){
  .login-box{padding:34px 28px 40px;}
  .login-box .dash-title{font-size:28px;}
}
.login-logo{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.login-logo img{
  width:110px;
  height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.login-form .form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.login-form label{
  font-size:14px;
  font-weight:600;
  color:#1f3d60;
  letter-spacing:.2px;
}
.login-form input[type=text],
.login-form input[type=password]{
  padding:12px 14px;
  border:1px solid #cfd9e2;
  border-radius:10px;
  font-size:15px;
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
  background:#fff;
}
.login-form input:focus{
  outline:none;
  border-color:#3498db;
  box-shadow:0 0 0 3px rgba(52,152,219,.25);
}
.btn-primary{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-grad));
  color:#fff;
  border:none;
  padding:14px 18px;
  font-size:16px;
  font-weight:600;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  transition:.25s;
  letter-spacing:.3px;
}
.btn-primary.full{ width:100%; }
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.btn-primary:active{transform:translateY(-1px);}
.btn-primary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #ffcc32,0 8px 20px rgba(0,0,0,.28);
}

.alert{
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  line-height:1.4;
  margin-bottom:18px;
  background:#f5f7fa;
  border:1px solid #d1dae2;
}
.alert.error{
  background:#ffe8e6;
  border-color:#ffb7af;
  color:#b3281e;
  font-weight:600;
}

.login-footer{
  margin-top:34px;
  text-align:center;
  color:#5d6b7a;
  font-size:12px;
  letter-spacing:.5px;
}

/* 다크 모드 */
@media (prefers-color-scheme:dark){
  body.dash-body{
    background:#ffffff; /* 항상 흰색 */
  }
  .dash-container{
    background:#ffffff;
    box-shadow:0 6px 14px rgba(0,0,0,0.08);
  }
  .dash-title{ color:#222; }
  .section-title{ color:#1f3d60; }
  .badge-offline{ background:#1f3d60; }
  .badge-online{ background:#6d2e8d; }
}

/* 접근성 개선 */
.dashboard-icon:focus { outline:none; }
.stats-table caption{ text-align:left; padding:4px 2px; font-weight:600; }