/* ============================================
   관리자 콘솔 — 공통 스타일시트 (정보 최적화 안)
   admin.html에서 <link rel="stylesheet" href="admin-styles.css">로 import
   ============================================ */

/* === 베이스 — 가독성 강화 === */
body {
  font-family: 'Pretendard', system-ui, sans-serif;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
::selection { background: #DBEAFE; color: #1E3A8A; }

/* === 탭 === */
.tab {
  transition: all .15s;
  font-size: 15px;
  border-bottom-width: 3px;
}
.tab:hover:not(.active) { background: #F1F5F9; color: #334155; }
.tab.active { color: #4F46E5; border-color: #4F46E5; background: #FAFAFE; }

/* === 칩 === */
.chip {
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* === 테이블 — 가독성 핵심 === */
.th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: none;        /* uppercase 제거 — 한글에 적합 */
  letter-spacing: 0;
  padding: 12px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}
.td {
  padding: 14px 18px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
  font-size: 14.5px;
  color: #1E293B;
}
tbody tr { transition: background .12s; }
tbody tr:hover .td { background: #F8FAFC; }

/* === 입력 === */
input[type=text], input[type=number], input[type=date], select, textarea {
  background: white; border: 1px solid #CBD5E1; border-radius: 8px;
  padding: 9px 14px; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}

/* === 버튼 === */
.btn {
  padding: 9px 18px; border-radius: 8px;
  font-weight: 600; font-size: 14px;
  transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: #4F46E5; color: white; box-shadow: 0 1px 2px rgba(79,70,229,.2); }
.btn-primary:hover { background: #4338CA; }
.btn-ghost { background: white; border: 1px solid #E2E8F0; color: #0F172A; }
.btn-ghost:hover { background: #F8FAFC; border-color: #CBD5E1; }
.btn-danger { background: white; border: 1px solid #FECACA; color: #DC2626; }
.btn-danger:hover { background: #FEF2F2; }

/* === 페이지 헤딩 === */
.page-title {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-subtitle {
  font-size: 14.5px;
  color: #64748B;
  margin-top: 6px;
  line-height: 1.5;
}
.section-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}

/* === KPI 카드 === */
.kpi-value {
  font-size: 36px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 8px;
}
.kpi-label {
  font-size: 12px;
  color: #64748B;
  font-weight: 700;
  text-transform: none;       /* uppercase 제거 */
  letter-spacing: 0;
}
.kpi-trend-up { color: #059669; font-size: 13px; font-weight: 600; }
.kpi-trend-down { color: #DC2626; font-size: 13px; font-weight: 600; }
.kpi-card {
  background: white; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 22px 22px 20px;
  transition: border-color .15s, box-shadow .15s;
}
.kpi-card:hover { border-color: #CBD5E1; box-shadow: 0 1px 3px rgba(15,23,42,.04); }

/* === details 토글 === */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* === 드롭존 === */
.drop-zone {
  border: 2px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC;
  transition: all .15s;
}
.drop-zone:hover { border-color: #4F46E5; background: #EEF2FF; }

/* === 탭 패널 === */
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; }

/* === 카드 — h2 섹션 헤더 가독성 === */
h2.font-bold { font-size: 16.5px; letter-spacing: -0.005em; }