/* ═══════════════════════════════════════════════════════════════════════════
   법인카드 경비관리 — Corporate Card Expense Manager
   Aesthetic: Swiss banking precision × Korean institutional clarity
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Pretendard';
  src: local('Pretendard'), local('Pretendard Variable');
  font-display: swap;
}

:root {
  /* ── Core palette ── */
  --navy-950: #0a0f1e;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --navy-600: #475569;
  --navy-500: #64748b;
  --navy-400: #94a3b8;
  --navy-300: #cbd5e1;
  --navy-200: #e2e8f0;
  --navy-100: #f1f5f9;
  --navy-50:  #f8fafc;

  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-100: #d1fae5;
  --emerald-50:  #ecfdf5;

  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;
  --amber-50:  #fffbeb;

  --red-700: #b91c1c;
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-100: #fee2e2;

  --blue-600: #2563eb;
  --blue-100: #dbeafe;

  --surface: #ffffff;
  --page-bg: var(--navy-50);
  --text-primary: var(--navy-900);
  --text-secondary: var(--navy-500);
  --text-muted: var(--navy-400);
  --border: var(--navy-200);
  --border-light: var(--navy-100);

  /* ── Brand palette (ePapyrus) ──
     사이트 전체 색상 통일을 위한 변수. 새로운 코드는 가능한
     `--brand-*` / `--status-*` / `--neutral-*`를 사용한다. */
  --brand-primary:        #F26522;   /* 메인 오렌지(로고) */
  --brand-primary-light:  #FF8C42;   /* 보조 오렌지 */
  --brand-primary-dark:   #d3540f;   /* hover/active */
  --brand-primary-soft:   #fde6d8;   /* 옅은 오렌지(hover bg) */
  --brand-secondary:      #2C3E50;   /* 네이비 (TOTAL EXPENSES 카드·주요 액션 버튼 톤) */
  --brand-secondary-dark: #22303d;   /* 네이비 hover/active */
  --brand-tertiary:       #34495E;   /* 다크 그레이 */
  --brand-sidebar:        #1A1A1A;   /* 사이드바(유지) */

  --status-success:       #27AE60;
  --status-warning:        #F39C12;
  --status-danger:         #E74C3C;
  --status-info:           #3498DB;

  --neutral-bg-light:     #F8F9FA;
  --neutral-bg-gray:      #ECF0F1;
  --neutral-text-dark:    #2C3E50;
  --neutral-text-gray:    #7F8C8D;
  --neutral-border:       #E0E0E0;

  /* 차트 공통 팔레트 (`getComputedStyle`으로 JS에서도 참조 가능). */
  --chart-c1: #F26522;  /* 오렌지(브랜드) */
  --chart-c2: #2C3E50;  /* 네이비 */
  --chart-c3: #27AE60;  /* 그린 */
  --chart-c4: #E74C3C;  /* 레드 */
  --chart-c5: #9B59B6;  /* 퍼플 */
  --chart-c6: #34495E;  /* 다크 그레이 */
  --chart-c7: #F39C12;  /* 앰버 */
  --chart-c8: #16A085;  /* 틸 */

  /* ── Layout ── */
  --sidebar-w: 232px;
  --sidebar-collapsed: 0px;
  --header-h: 0px;
  /* 모든 조회 페이지의 콘텐츠 상한. 좌우 여백은 .page-header/.page-body 의
     padding 32px 로 통일한다. */
  --content-max: 1800px;

  /* ── Typography ── */
  --font-sans: 'Pretendard', -apple-system, 'Noto Sans KR', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.2s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--text-primary);
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════════════════ */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(14,26,54,0.03) 0%, transparent 50%),
    linear-gradient(175deg, var(--navy-50) 0%, #fff 40%, var(--navy-100) 100%);
}

.login-container {
  width: 380px;
  max-width: 92vw;
}

.login-brand {
  text-align: center;
  margin-bottom: 36px;
}

.login-brand-icon {
  width: 48px;
  height: 48px;
  background: var(--brand-secondary);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* 로고 이미지 자체 사용 — 배경/박스 제거하고 더 큰 사이즈로 노출. */
.login-brand-icon.login-brand-icon--logo {
  width: 72px;
  height: 72px;
  background: transparent;
  border-radius: 0;
}
.login-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.login-brand-icon svg { width: 26px; height: 26px; }

.login-brand h1 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.login-brand p {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}

.login-card--google-only {
  text-align: center;
  padding: 28px 32px 32px;
}

.login-card .login-alert {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0 4px;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  color: #b91c1c;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-field { display: flex; flex-direction: column; gap: 5px; }

.login-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.login-field input {
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.93rem;
  line-height: 1.5;
  font-family: var(--font-sans);
  background: var(--navy-50);
  color: var(--text-primary);
  transition: border-color var(--duration), background var(--duration);
}

.login-field input:focus {
  outline: none;
  border-color: var(--navy-700);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30,41,59,0.06);
}

.login-submit {
  margin-top: 4px;
  padding: 11px;
  background: var(--brand-secondary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--duration), transform 0.1s;
}

.login-submit:hover { background: var(--brand-secondary-dark); }
.login-submit:active { transform: scale(0.985); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Google 공식 라이트 버튼 — 이메일 input 과 동일 높이·컴팩트 너비 */
.login-google-wrap {
  display: flex;
  justify-content: flex-start;
}

.login-google-wrap--center {
  justify-content: center;
}

/* 카드 배경과 분리 — 그림자만 (볼드·트랙 배경 없음) */
.login-google-toggle {
  display: inline-flex;
  padding: 0;
  background: transparent;
}

.login-google-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: 100%;
  min-height: calc(0.93rem * 1.5 + 20px + 2px);
  padding: 0 12px 0 10px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #fff;
  color: #3c4043;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: "Roboto", var(--font-sans);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  transition: box-shadow 0.15s, transform 0.1s;
}
.login-google-btn:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.login-google-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}
.login-google-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.login-google-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #3c4043;
}
.login-google-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.4;
}

.login-google-hint--center {
  margin: 10px 0 0;
  padding: 0 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7280;
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-config-missing {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — Sidebar + Main
   ═══════════════════════════════════════════════════════════════════════════ */

.layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-900);
  color: var(--navy-300);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  transition: transform 0.3s var(--ease-out);
}

.sidebar-brand {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* 사이드바 brand 영역 상단 ePapyrus 로고. 본문 텍스트와 시각적 위계가
   맞도록 50px 높이로 둔다. */
.sidebar-brand-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.sidebar-brand-logo img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* 워드마크(가로형: 로고+ePapyrus) 버전 — 본문 텍스트와 시각적 위계를
   맞추기 위해 높이 기준으로 컴팩트하게 둔다(약 28px). 가로폭은 비율로
   자동 결정. 검정 배경은 투명 처리되어 사이드바와 자연스럽게 이어진다. */
.sidebar-brand-logo.sidebar-brand-logo--wordmark img {
  height: 28px;
  width: auto;
  max-width: 100%;
}

.sidebar-brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sidebar-brand-sub {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy-500);
  font-weight: 500;
  margin-top: 3px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 0.87rem;
  color: var(--navy-400);
  text-decoration: none;
  transition: all 0.15s;
  font-weight: 500;
}

.sidebar-link:hover {
  color: var(--navy-200);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
}

.sidebar-link.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  opacity: 0.55;
  flex-shrink: 0;
}

.sidebar-link.active svg { opacity: 0.9; }

.sidebar-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy-600);
  padding: 16px 12px 6px;
  font-weight: 600;
}

.sidebar-user {
  padding: 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
}

.sidebar-user-name {
  font-size: 0.82rem;
  color: var(--navy-200);
  font-weight: 600;
}

.sidebar-user-dept {
  font-size: 0.7rem;
  color: var(--navy-500);
}

.sidebar-logout {
  font-size: 0.75rem;
  color: var(--navy-500);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
}

.sidebar-logout:hover { color: var(--navy-300); text-decoration: none; }

/* ── Mobile toggle ── */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 40px;
  height: 40px;
  background: var(--navy-900);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle svg { width: 20px; height: 20px; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
}

/* ── Main content ── */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

.page-header {
  /* 1800px 로 상한을 두되 가운데 정렬. 좌우 32px 여백 유지. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 24px 32px 0;
}

.page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

.page-title small {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 8px;
}

.page-body {
  /* 헤더와 동일한 너비 상한을 공유해서 조회 결과가 좌우로 정렬되도록 한다. */
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 32px 40px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

/* 섹션 자체의 margin-bottom 을 제거해서 인접 형제의 margin-top 과 collapse
   되지 않도록 한다(이전에는 max(28, 14)=28px 이 적용되어 그룹 안/사이 차이가
   미미했음). 이제 인접 형제 margin-top 만으로 간격이 단일 제어된다. */
.dashboard-section { margin: 0; }
/* 같은 그룹 안 섹션끼리는 거의 붙어있게 (예: 내 개인경비 ↔ 내 카드). */
.dashboard-section + .dashboard-section { margin-top: 8px; }
/* 그룹 시작 섹션은 이전 그룹과 확실히 분리되도록 위 간격을 매우 크게
   (예: 내 카드 ↔ 전사 개인경비). 인접 셀렉터(0,2,0) 에 한 클래스 추가로
   특이도(0,3,0) 우선 적용. */
.dashboard-section + .dashboard-section.dashboard-section--group-start {
  margin-top: 96px;
}
/* 대시보드 한정 — 카드 그리드의 기본 margin-bottom(16px)을 제거.
   다른 페이지의 .card-grid 는 그대로(16px) 유지. 그룹 안 간격이
   8(인접) + 16(grid mb) + 4(quick-links mt) ≈ 28px 로 부풀던 문제 해소. */
.dashboard-section .card-grid { margin-bottom: 0; }

.section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* 5칸 고정 그리드 — 개인경비(4개 카드)를 카드 섹션(5개 카드) 1칸 폭과 동일하게
   맞추기 위해 사용. 마지막 1칸은 자연스럽게 비어 카드 너비가 균일해진다. */
.card-grid--quint {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* 컴팩트 높이 — 위/아래 18→8px, 좌우 20→16px 로 축소 (약 2/3 높이). */
  padding: 8px 16px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--navy-300);
  border-radius: 3px 0 0 3px;
}

.card-accent-emerald::before { background: var(--emerald-500); }
.card-accent-amber::before { background: var(--amber-500); }
.card-accent-navy::before { background: var(--navy-700); }

.card-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  /* 컴팩트 — 라벨↔값 간격 축소 (6→3px). */
  margin-bottom: 3px;
}

.card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.text-warn { color: var(--amber-600); }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--duration);
  white-space: nowrap;
}

.btn:hover { background: var(--navy-100); text-decoration: none; }

.btn-primary {
  background: var(--brand-secondary);
  color: #fff;
  border-color: var(--brand-secondary);
}
.btn-primary:hover { background: var(--brand-secondary-dark); border-color: var(--brand-secondary-dark); }

.btn-emerald {
  background: var(--emerald-600);
  color: #fff;
  border-color: var(--emerald-600);
}
.btn-emerald:hover { background: var(--emerald-700); }

.btn-outline {
  border-color: var(--navy-700);
  color: var(--navy-700);
}
.btn-outline:hover { background: var(--navy-100); }

.btn-danger {
  background: var(--red-600);
  color: #fff;
  border-color: var(--red-600);
}
.btn-danger:hover { background: var(--red-700); }

.btn-sm { padding: 5px 11px; font-size: 0.75rem; border-radius: 6px; }

.btn-icon {
  padding: 6px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ── Form controls in toolbar ── */
.input-control {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.82rem;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--duration);
}

.input-control:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 2px rgba(30,41,59,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  background: var(--navy-50);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 14px;
  font-size: 0.84rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:hover { background: var(--navy-50); }
.data-table tbody tr:last-child td { border-bottom: none; }

.text-right { text-align: right !important; }

.td-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge-todo {
  background: var(--amber-100);
  color: var(--amber-700);
}

.badge-done {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.badge-reject {
  background: var(--red-100);
  color: var(--red-700);
}

.badge-step {
  background: var(--blue-100);
  color: var(--blue-600);
}

.badge-warn {
  background: #fff3cd;
  color: #856404;
}

.badge-normal {
  background: var(--navy-200, #e2e8f0);
  color: var(--navy-700, #334155);
}

.badge-pe-draft {
  background: var(--navy-200);
  color: var(--navy-700);
}

.badge-pe-pending {
  background: var(--amber-100);
  color: var(--amber-700);
}

.badge-pe-approved {
  background: var(--emerald-100);
  color: var(--emerald-700);
}

.badge-pe-rejected {
  background: var(--red-100);
  color: var(--red-700);
}

.sidebar-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--amber-500);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TABS
   ═══════════════════════════════════════════════════════════════════════════ */

.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--navy-100);
  border-radius: 9px;
  width: fit-content;
}

.tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  border: none;
}

.tab:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.6);
  text-decoration: none;
}

.tab-active {
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlay-in 0.2s ease;
}

@keyframes overlay-in { from { opacity: 0; } }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  width: 440px;
  max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  animation: modal-in 0.25s var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

.modal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--navy-900);
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-group select,
.form-group textarea,
.form-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.86rem;
  font-family: var(--font-sans);
  background: var(--navy-50);
  color: var(--text-primary);
  transition: border-color var(--duration), background var(--duration);
}

.form-group select:focus,
.form-group textarea:focus,
.form-group input:focus {
  outline: none;
  border-color: var(--navy-500);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(30,41,59,0.06);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.modal-info {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--navy-50);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-info strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  z-index: 200;
  animation: toast-in 0.35s var(--ease-out);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.toast-success {
  background: var(--brand-secondary);
  color: #fff;
  border-left: 4px solid var(--emerald-500);
}

.toast-error {
  background: var(--brand-secondary);
  color: #fff;
  border-left: 4px solid var(--red-500);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUICK LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

.quick-links {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.empty-state a { color: var(--blue-600); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════
   APPROVAL TRAIL (compact inline)
   ═══════════════════════════════════════════════════════════════════════════ */

.approval-trail {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.approval-trail .step { display: inline-flex; align-items: center; gap: 2px; }
.approval-trail .step-done { color: var(--emerald-600); }
.approval-trail .sep { margin: 0 2px; }

/* 승인/반려 코멘트 — 뱃지·결재 단계 hover 시 즉시 표시 (브라우저 title 보다 빠름) */
.approval-tip-target {
  position: relative;
  cursor: help;
}
.approval-tip-target::after {
  content: attr(data-approval-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 200;
  min-width: 120px;
  max-width: min(340px, 92vw);
  padding: 7px 10px;
  border-radius: 6px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.approval-tip-target:hover::after,
.approval-tip-target:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.data-table td:has(.approval-tip-target),
.data-table th:has(.approval-tip-target) {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APPROVAL GROUPS
   ═══════════════════════════════════════════════════════════════════════════ */

.approval-group {
  margin-bottom: 24px;
  position: relative;
}
/* 마지막 행의 승인/반려 코멘트 툴팁이 다음 그룹에 가려지지 않도록 hover 시 위로 끌어올림 */
.approval-group:hover,
.approval-group:focus-within {
  z-index: 20;
}

.approval-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--navy-100);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.approval-group-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.approval-group-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy-900);
}

.approval-group-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.approval-group .data-table {
  border-radius: 0 0 10px 10px;
  border-top: none;
  /* 마지막 행의 코멘트 툴팁이 테이블 밖(아래)으로 나갈 수 있도록 클리핑 해제 */
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD FORM PANEL (admin inline forms)
   ═══════════════════════════════════════════════════════════════════════════ */

.add-form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.add-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}

.add-form-grid .form-group { margin-bottom: 0; }
.add-form-grid .input-control { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHARTS (pure CSS horizontal bars)
   ═══════════════════════════════════════════════════════════════════════════ */

.chart-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.chart-bar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chart-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-bar-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 64px;
  text-align: right;
  flex-shrink: 0;
}

.chart-bar-track {
  flex: 1;
  height: 24px;
  background: var(--navy-100);
  border-radius: 4px;
  display: flex;
  overflow: hidden;
}

.chart-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s var(--ease-out);
  min-width: 2px;
}

/* Stacked-bar 전용 wrapper — 외곽 막대 길이는 max_total 기준,
   내부 두 색(법인카드/개인경비) 분할은 그 row 의 total 기준으로 한다.
   외곽 막대 자체에 min-width 를 줘서 row total 이 max 대비 매우 작아도 보인다. */
.chart-bar-stack {
  display: flex;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  min-width: 24px;
}

.chart-bar-fill-navy { background: var(--navy-700); }
.chart-bar-fill-stack-0 { background: var(--navy-700); }
.chart-bar-fill-stack-1 { background: var(--emerald-500); }
.chart-bar-fill-stack-2 { background: var(--amber-500); }
/* 누적 분할 시 작은 값(예: 0.2%) 도 색이 식별되도록 최소 가시 너비 보장.
   .chart-bar-fill 보다 뒤에 선언되어 min-width 가 8px 로 override 된다. */
.chart-bar-fill-stack-0,
.chart-bar-fill-stack-1,
.chart-bar-fill-stack-2 { min-width: 8px; }

.chart-bar-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 100px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.chart-legend-dot-0 { background: var(--navy-700); }
.chart-legend-dot-1 { background: var(--emerald-500); }
.chart-legend-dot-2 { background: var(--amber-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   통계대시보드 (/stats-dashboard) — 스프레드시트 느낌의 밀집 표
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 20px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
}

.stats-dash-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 12px;
  font-family: var(--font-sans);
}

.stats-dash-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.stats-dash-mode-btn:hover {
  border-color: #2c3e50;
  color: #2c3e50;
}

.stats-dash-mode-btn--active {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
}

.stats-dash-mode-btn--active:hover {
  color: #fff;
  border-color: #2c3e50;
}

.stats-dash-mode-bar__sep {
  flex: 1 1 12px;
  min-width: 8px;
}

.stats-dash-toolbar__tilde {
  font-weight: 600;
  color: var(--text-muted);
  align-self: flex-end;
  padding-bottom: 8px;
}

.stats-dash-mode-bar__legacy {
  margin-left: auto;
}

.stats-dash-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.stats-dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-sans);
}

.stats-dash-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.stats-dash-kpi .lbl {
  /* 라벨(법인카드/개인경비/총합, 자산/비용/총합) 가독성 보강 — 기존 0.68rem
     muted 회색에서 본문 색상으로 키우고 굵게. uppercase 는 한글에서 효과
     없으니 letter-spacing 만 약간 유지. */
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stats-dash-kpi .val {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.stats-dash-scroll {
  overflow: auto;
  max-height: min(70vh, 720px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.stats-dash-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
}

.stats-dash-grid thead th,
.stats-dash-grid thead th.text-right {
  /* 모든 도표 헤더(부서/법인카드/개인경비/합계/전월/증감/증감%)는 가운데 정렬.
     전역 ``.text-right { text-align: right !important }`` 가 헤더에도 걸려
     있어서 셀렉터를 명시 결합 + !important 로 강제 오버라이드한다.
     본문 셀(text-right)은 그대로 우측 정렬 유지. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--brand-secondary);
  color: #fff;
  font-weight: 600;
  text-align: center !important;
  padding: 8px 10px;
  border-bottom: 2px solid var(--navy-700);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.stats-dash-grid thead th:hover {
  background: var(--navy-800);
}

.stats-dash-grid tbody td.text-right {
  text-align: right;
}

/* 줄무늬 비사용: `.stats-dash-grid tbody tr:nth-child(even)` 두지 않음
   (숨겨진 드릴 자식 행 때문에 nth 줄무늬가 어긋남). 자식은 .dash-drill-child 배경으로 구분. */

.stats-dash-grid tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.stats-dash-grid tbody tr:hover td {
  background: rgba(59, 130, 246, 0.06);
}

.stats-dash-footnote {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
  font-family: var(--font-sans);
}

.stats-dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--navy-100, #f1f5f9);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
}

.stats-dash-tab {
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
}

.stats-dash-tab:hover {
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
}

/* TOTAL EXPENSES 카드(`.exec-dash-kpi-card--total` = #2c3e50)와 동일한 네이비로
   톤 통일. `var(--brand-secondary)` = #2C3E50 변수를 사용해 한 곳에서 관리. */
.stats-dash-tab--active {
  background: var(--brand-secondary);
  color: #fff !important;
  border-color: var(--brand-secondary);
}

.stats-dash-chart-wrap {
  position: relative;
  height: 260px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.stats-dash-scroll--excel {
  background: #fff;
}

.stats-dash-grid--excel {
  border: 1px solid #94a3b8;
}

.stats-dash-grid--excel thead th {
  background: #334155;
}

.stats-dash-grid--excel td,
.stats-dash-grid--excel thead th,
.stats-dash-grid--excel tfoot th {
  border: 1px solid #cbd5e1;
}

.stats-dash-tfoot-sum th {
  background: #e2e8f0;
  font-weight: 700;
  color: var(--navy-900);
}

/* Executive / VBA-style strip (통합 슬라이서 + KPI + 3 charts) */
.exec-dash {
  margin-bottom: 22px;
  padding: 16px 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-sans);
}

.exec-dash-title {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #2c3e50;
  font-family: var(--font-sans);
}

.exec-dash-sub {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.exec-dash-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.exec-dash-kpi-card {
  min-width: 180px;
  padding: 10px 16px 12px;
  border-radius: 6px;
  color: #fff;
}

.exec-dash-kpi-card--total {
  background: var(--brand-secondary);
}

.exec-dash-kpi-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 4px;
}

.exec-dash-kpi-val {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.exec-dash .stats-dash-tabs.exec-dash-tabs {
  margin-bottom: 12px;
}

.exec-dash .stats-dash-kpis.exec-dash-summary-kpis {
  margin-bottom: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exec-dash .exec-dash-summary-kpis .stats-dash-kpi .lbl {
  font-size: 0.72rem;
}

.exec-dash .exec-dash-summary-kpis .stats-dash-kpi .val {
  font-size: 1.12rem;
}

.exec-dash-line-wrap {
  position: relative;
  height: 220px;
  margin-bottom: 16px;
  padding: 8px 10px 4px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
}

.exec-dash-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 220px);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1100px) {
  .exec-dash-bottom-grid {
    grid-template-columns: 1fr;
  }
}

.exec-dash-chart-cell {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px 4px;
  background: #fafafa;
}

.exec-dash-chart-cap {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.exec-dash-chart-hint {
  margin: 0 0 6px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.exec-dash-line-head {
  margin-bottom: 6px;
}

.exec-dash-line-head .exec-dash-chart-cap {
  margin-bottom: 2px;
}

.exec-dash-unit {
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 6px;
}

/* 비교(전월·누적 대비) — 상단 요약과 동일하게 가로 3열, 카드 내부도 한 줄로 압축 */
.exec-dash .stats-dash-kpi-deep-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .exec-dash .stats-dash-kpi-deep-row {
    grid-template-columns: 1fr;
  }
  .exec-dash .exec-dash-summary-kpis.stats-dash-kpis {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* 비교 블록(전월/누적 대비) — Total Expenses 카드를 제거한 이후
   유일한 상단 정보 영역이라 시각 비중을 키운다. 회색 톤은 가독성이
   부족해서 보조 라벨도 좀 더 진한 네이비로 끌어올린다. */
.exec-dash .stats-dash-kpi--detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  min-width: 0;
}

.exec-dash .stats-dash-kpi--detail .lbl {
  margin-bottom: 0;
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 700;
}

.exec-dash .stats-dash-kpi--detail .meta {
  margin-top: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--navy-700);
  word-break: break-word;
}

.exec-dash .stats-dash-kpi-detail-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 4px;
}

.exec-dash .stats-dash-kpi-detail-foot .lbl-sub {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-700);
}

.exec-dash .stats-dash-kpi-detail-foot .diffline {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stats-dash-kpi-deep-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.stats-dash-kpi--detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}

.stats-dash-kpi--detail .lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.stats-dash-kpi--detail .meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
  word-break: break-all;
}

.stats-dash-kpi--detail .lbl-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 600;
}

.stats-dash-kpi--detail .diffline {
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.stats-dash-pct {
  font-weight: 700;
  margin-left: 4px;
}

/* 자산·비용·총합 KPI val 옆에 표시되는 (XX.X%) 표기. 본 금액보다는 약하지만
   회색 톤은 잘 보이지 않아서 네이비 700 으로 살짝 약하게 처리. */
.stats-dash-ae-pct {
  font-weight: 700;
  font-size: 0.78em;
  color: var(--navy-700);
  margin-left: 4px;
  white-space: nowrap;
}

/* ── 통합 KPI 카드 ───────────────────────────────────────────────
   "법인·개인·총합" / "자산·비용·총합" 탭에서 기존엔 KPI 행 + 비교 행
   두 줄이었지만 한 줄(3 카드)로 합치고, 각 카드 안에 메인 금액 + 전월
   금액 + 증감(원+%) 까지 모두 담는다. 사용자 사진 디자인과 동일. */
.stats-dash-kpis.stats-dash-kpis--merged {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stats-dash-kpi.stats-dash-kpi--merged {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  min-width: 0;
}
.stats-dash-kpi.stats-dash-kpi--merged .lbl {
  /* "법인카드/개인경비/총합" 등 카드 상단 라벨 — 회색·소형이라 잘 안 보이던
     것을 본문 색상 + 굵기/크기 ↑ 로 가독성 보강. */
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.stats-dash-kpi.stats-dash-kpi--merged .val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stats-dash-kpi.stats-dash-kpi--merged .stats-dash-kpi-merge-meta {
  font-size: 0.78rem;
  color: var(--navy-700);
  font-weight: 600;
  margin-top: 2px;
}
.stats-dash-kpi.stats-dash-kpi--merged .stats-dash-kpi-merge-diff {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.stats-dash-kpi-merge-foot {
  /* "전월 = YYYY-MM" — 비교 KPI 보조 라벨. 회색 + 작은 글씨로 KPI 카드와
     동일한 시각 그룹임을 표현하되, 아래 차트 캡션("월별 지출 추이")과 시각적
     으로 분리되도록 bottom margin 을 충분히 두어 차트와 붙어 보이지 않게 한다. */
  font-size: 0.75rem;
  margin: 8px 2px 18px;
}

@media (max-width: 900px) {
  .stats-dash-kpis.stats-dash-kpis--merged {
    grid-template-columns: 1fr;
  }
}

/* 페이지네이션 — 현재 페이지(active) 는 브랜드 오렌지로 강조.
   .btn-primary 의 navy 배경을 오버라이드하기 위해 자손 셀렉터로 우선순위 확보. */
.pagination-bar .btn.pagination-current,
.pagination-bar .btn-primary.pagination-current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.pagination-bar .btn.pagination-current:hover,
.pagination-bar .btn-primary.pagination-current:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}


.stats-dash-pct-badge {
  margin-left: 6px;
  font-size: 0.6rem !important;
}

.stats-dash-detail-unit-note {
  margin: 0 0 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.exec-dash-chart-canvas {
  position: relative;
}

.exec-dash-chart-canvas--bar {
  min-height: 152px;
}

.exec-dash-chart-canvas--pie {
  height: 240px;
}

/* ── 항목별 비중 파이 + HTML 범례 ─────────────────────────────────────────
   Chart.js 기본 범례 대신 차트 옆에 그리드 기반 HTML 범례를 배치한다.
   3열(이름 | 금액 | 비율) 그리드로 만들어, 계정과목 이름 길이가 달라도
   금액·비율 컬럼이 항상 같은 가로 위치에 정렬되도록 한다(요구사항 1). */
.exec-dash-pie-wrap {
  display: grid;
  /* 파이 + 범례 두 묶음을 컨테이너 안에서 가운데 정렬.
     컬럼을 auto 로 두고 justify-content: center 로 전체를 중앙에 배치한다. */
  grid-template-columns: 240px auto;
  justify-content: center;
  gap: 72px;
  align-items: center;
}

.exec-dash-pie-legend {
  display: grid;
  /* 이름·금액·비율을 각자 내용 크기에 맞춰 좌측 정렬해 사이 공백을 최소화.
     이전엔 이름 컬럼이 1fr 이라 남는 공간을 모두 차지해 금액과의 간격이
     과도하게 벌어졌다(사용자 피드백). */
  grid-template-columns: max-content max-content max-content;
  justify-content: start;
  row-gap: 4px;
  column-gap: 14px;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans);
  color: var(--text-primary);
}

.exec-dash-pie-legend-row {
  display: contents;
}

.exec-dash-pie-legend-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exec-dash-pie-legend-chip {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  display: inline-block;
}

.exec-dash-pie-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exec-dash-pie-legend-amt {
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}

.exec-dash-pie-legend-pct {
  text-align: right;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 56px;
}

@media (max-width: 900px) {
  .exec-dash-pie-wrap {
    grid-template-columns: 1fr;
  }
}

/* ── 통계대시보드 부서별/사용자별 드릴다운 ────────────────────────────────
   stats.html 의 acct-row / dept-row 패턴을 그대로 재사용. 부모 행을 클릭하면
   해당 부서/사용자가 사용한 계정과목 분포가 펼쳐진다. */
.stats-dash-grid tr.dash-drill-row { cursor: pointer; }
.stats-dash-grid tr.dash-drill-row td { transition: background-color 0.15s ease; }
.stats-dash-grid tr.dash-drill-row:hover td { background: var(--navy-100); }

.stats-dash-grid tr.dash-drill-row .dash-drill-toggle {
  display: inline-block;
  width: 18px;
  color: var(--navy-700);
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  margin-right: 4px;
  transition: color 0.15s ease;
}

.stats-dash-grid tr.dash-drill-row.expanded td { background: var(--navy-100); }
.stats-dash-grid tr.dash-drill-row.expanded td:first-child {
  box-shadow: inset 3px 0 0 0 var(--navy-700);
  font-weight: 700;
}
.stats-dash-grid tr.dash-drill-row.expanded .dash-drill-toggle { color: var(--navy-900); }
.stats-dash-grid tr.dash-drill-row.expanded:hover td { background: var(--navy-200); }

.stats-dash-grid tr.dash-drill-child {
  display: none;
  background: var(--navy-50);
  font-size: 0.88em;
}
.stats-dash-grid tr.dash-drill-child:hover td {
  background: var(--navy-100);
}
.stats-dash-grid tr.dash-drill-child.show { display: table-row; }
.stats-dash-grid tr.dash-drill-child td {
  border-top: 1px dashed var(--border-light);
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 400;
}
.stats-dash-grid tr.dash-drill-child td.dash-drill-name {
  padding-left: 40px;
  color: var(--text-secondary);
  text-align: left;
}
.stats-dash-grid tr.dash-drill-child td.dash-drill-name .dash-drill-bullet {
  color: var(--navy-400);
  margin-right: 6px;
  font-weight: 700;
}
.stats-dash-grid tr.dash-drill-child.dash-drill-last td {
  border-bottom: 2px solid var(--navy-200);
}
.stats-dash-grid tr.dash-drill-child .dash-asset-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: #fde68a;
  color: #92400e;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 600;
}


.exec-dash-slicers {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.exec-slicer + .exec-slicer {
  margin-top: 14px;
}

.exec-slicer-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}

.exec-slicer select {
  width: 100%;
}

/* Choices.js 슬라이서 — 부서·항목·자산·비용 필터 서체·크기 통일 */
.exec-slicer .choices {
  width: 100%;
  max-width: 320px;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-family: var(--font-sans);
}

.exec-slicer .choices__inner {
  min-height: 38px;
  padding: 4px 8px;
  border-color: var(--border-color, #d1d5db);
  border-radius: 6px;
  background: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-sans);
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

/* 빈 다중선택 placeholder = 단일선택 선택값 과 동일한 톤 */
.exec-slicer .choices__placeholder,
.exec-slicer .choices__list--single .choices__item,
.exec-slicer .choices__list--single .choices__item.is-selected {
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-sans);
  color: var(--text-muted);
  opacity: 1;
  padding: 0;
  background: transparent;
  line-height: 1.4;
}

.exec-slicer .choices__list--single {
  padding: 0;
}

/* 단일선택 화살표 제거 — 다중선택과 박스 형태 통일 */
.exec-slicer .choices[data-type*="select-one"]::after {
  display: none;
}

.exec-slicer .choices__list--multiple .choices__item {
  background: var(--navy-500, #1e3a5f);
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: #fff;
}

.exec-slicer .choices__input {
  background: transparent;
  margin-bottom: 0;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  .main {
    margin-left: 0;
  }

  .page-header, .page-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-header { padding-top: 56px; }

  .data-table { font-size: 0.8rem; }
  .data-table th, .data-table td { padding: 8px 10px; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid--quint { grid-template-columns: repeat(2, 1fr); }

  .tab-bar { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME DASHBOARD v2 ("dash2-*")
   ─────────────────────────────────────────────────────────────────────────
   /dashboard 홈 화면의 새 디자인 — 사진 목표(흰 카드 + 우상단 컬러 아이콘
   + 합계금액에 전월 대비 트렌드 + 우측 5개월 미니차트 사이드 카드).
   기존 ``.card / .card-grid / .section-title`` 위에 ``.dash2-*`` 셀렉터로
   덧씌워 cascade 로 우선권을 갖는다(파일 끝 위치). 사이드바·기타 페이지
   에는 영향 없음.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 페이지 헤더 부제(예: "2026.05") ──────────────────────────────────── */
.dash2-page-sub {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── 레이아웃 — 위쪽 전체너비 + 아래쪽 2단(전사 섹션 + 데이터 요약) ─────
   목표 디자인:
     ┌────────────────────────────────────────────────┐
     │ 내 개인경비   [버튼]                            │ ← .dash2-top (전체 너비)
     │ [카드][카드][카드][카드]                        │
     │ 내 법인카드   [버튼]                            │
     │ [카드][카드][카드][카드][카드]                  │
     ├──────────────────────────────┬─────────────────┤
     │ 전사 개인경비 [버튼]          │  데이터 요약    │ ← .dash2-bottom (좌우)
     │ [카드][카드][카드][카드]      │  [라인 차트]    │
     │ 전사 법인카드 [버튼]          │  [라인 차트]    │
     │ [카드][카드][카드][카드][카드]│                 │
     └──────────────────────────────┴─────────────────┘
   admin 이 아닌 일반 사용자는 .dash2-bottom 자체를 렌더하지 않음. */
/* 위쪽 영역 — "내 개인경비" + "내 법인카드" 두 섹션을 한 구역(패널)으로 묶음.
   사용자 그림(파란 박스 3개) 의도: 큰 테두리로 구역 분리. 흰 배경 + 보더
   ``var(--border)`` (한 단계 진한 톤) + 둥근 모서리. */
.dash2-top {
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 22px;
}

/* 하단 영역 — 좌측 패널(전사 섹션 2개) + 우측 카드(데이터 요약). gap 24px. */
.dash2-bottom {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.dash2-bottom > .dash2-bottom-main {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 22px;
}
.dash2-bottom > .dash2-bottom-side {
  width: 320px;
  flex-shrink: 0;
}

/* ── 섹션 헤더 — 작은 아이콘 + 제목 ──────────────────────────────────── */
.dash2-section { margin-top: 18px; }
.dash2-section:first-child { margin-top: 0; }

/* 같은 패널 안 섹션 사이 — 옅은 hairline 으로 공간 분리. 보더 색은 패널과
   동일 톤(``var(--border)``). 패널 padding 좌우(22px) 만큼 라인을 안쪽으로
   살짝 들이지 않고 패널 폭 가득 가로질러 그어 명확한 구분선이 되도록. */
.dash2-section + .dash2-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.dash2-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.dash2-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--navy-100);
  color: var(--navy-700);
  flex: 0 0 22px;
}
.dash2-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── 카드 그리드(섹션 안 KPI 배치) — 4·5열 ──────────────────────────────
   가용 폭을 가득 채우도록 1fr 분할. 우측 빈 여백 없음. */
.dash2-cards {
  display: grid;
  gap: 12px;
}
.dash2-cards.dash2-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash2-cards.dash2-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── 카드 본체 ────────────────────────────────────────────────────────
   기존 ``.card`` 의 좌측 컬러바(::before)는 새 디자인에서 우상단 원형
   아이콘으로 대체되므로 숨기고, 패딩/모서리/그림자만 새로 부여. */
.card.dash2-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 16px 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 12px rgba(15, 23, 42, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card.dash2-card::before { display: none !important; }
.card.dash2-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 18px rgba(15, 23, 42, 0.06);
  border-color: var(--navy-200);
}

/* ── 카드 헤더(라벨 + 우상단 아이콘) ──────────────────────────────────── */
.dash2-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.dash2-card .dash2-card-label {
  /* 기존 .card-label 의 uppercase·letter-spacing 을 한글 친화적으로 완화 */
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* ── 우상단 컬러 아이콘 원 ────────────────────────────────────────────
   사진의 톤: 강조 색상이 들어가는 건 "합계금액(amber)"과 "승인금액(green)"
   정도. 나머지는 차분한 회색. 미처리(clock) 도 회색 유지하되 카드 자체에
   warn 클래스가 붙으면 살짝 강조. 브랜드 오렌지는 트렌드 "신규" 배지에만
   포인트로 사용. */
.dash2-card-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.14);
  color: var(--navy-500);
}
.dash2-card-icon--gray   { background: rgba(148, 163, 184, 0.14); color: var(--navy-500); }
.dash2-card-icon--amber  { background: rgba(245, 158, 11, 0.16);  color: #b45309; }
.dash2-card-icon--green  { background: rgba(16, 185, 129, 0.16);  color: #047857; }
.dash2-card-icon--orange { background: rgba(242, 101, 34, 0.14);  color: var(--brand-primary); }

/* ── 카드 값(큰 숫자) ────────────────────────────────────────────────── */
.card.dash2-card .card-value.dash2-card-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 0;
}

/* warn 강조: 미처리·결재대기 카드 값이 0이 아닐 때만 적용(템플릿 매크로 조건).
   카드 외곽도 살짝 강조. */
.card.dash2-card.dash2-card--warn {
  background: linear-gradient(180deg, #fff8eb 0%, #ffffff 60%);
  border-color: #fde6c4;
}
.card.dash2-card.dash2-card--warn .dash2-card-icon { background: rgba(245, 158, 11, 0.18); color: #b45309; }

/* ── 전월 대비 트렌드 (합계금액 4 카드만 노출) ────────────────────────── */
.dash2-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 2px 8px 2px 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.dash2-trend .dash2-trend-label {
  color: var(--text-muted);
  font-weight: 500;
}
.dash2-trend .dash2-trend-arrow {
  font-size: 0.85rem;
  line-height: 1;
}
/* 시스템 컨벤션(stats_dashboard 와 동일) — "비용" 관점:
   증가(up) = 적신호 → red, 감소(down) = 호신호 → blue. */
.dash2-trend--up   { color: #dc2626; }
.dash2-trend--down { color: #2563eb; }
.dash2-trend--flat { color: var(--text-muted); }
.dash2-trend--new  { color: var(--brand-primary); }
.dash2-trend--new .dash2-trend-badge {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-dark);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.7rem;
}

/* ── 섹션 하단 quick-links 간격 (기존 클래스 보존) ────────────────────── */
.dash2-quicklinks { margin-top: 12px; }

/* 섹션 헤더(제목 줄) 안에 인라인으로 들어간 quick-links — 카드 그리드 위 */
.dash2-section-head .dash2-quicklinks--inline {
  /* 사용자 요청: 제목 우측 끝까지 밀지 말고 제목 바로 옆에 붙여라 */
  margin: 0 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* 인라인 quick-link 버튼은 제목 줄 높이에 맞춰 컴팩트하게 */
.dash2-section-head .dash2-quicklinks--inline .btn.btn-sm {
  font-size: 0.72rem;
  padding: 4px 10px;
  line-height: 1.4;
}

/* ── 우측 사이드: 데이터 요약 카드 ───────────────────────────────────── */
.card.dash2-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: none;
}
.card.dash2-summary-card::before { display: none !important; }
.dash2-summary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dash2-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(52, 152, 219, 0.14);
  color: #1d4ed8;
}
.dash2-summary-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}
.dash2-summary-mini {
  padding: 10px 0;
  border-top: 1px dashed var(--border-light);
}
.dash2-summary-mini:first-of-type { border-top: none; padding-top: 4px; }
.dash2-summary-mini-cap {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.dash2-summary-mini-chart {
  position: relative;
  height: 110px;
}

/* ── 푸터 ──────────────────────────────────────────────────────────── */
.dash2-footnote {
  margin: 12px 2px 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── 반응형 ────────────────────────────────────────────────────────────
   1024px 이하: 우측 사이드 카드가 메인 아래로 내려가 1열. 카드 그리드도
   한 단계 좁힘(5열·4열 → 3열) — 좁은 폭에서 라벨이 줄바꿈되는 문제 해결.
   768px 이하: 카드 그리드가 2열로 단순화 — 모바일 가독성 확보. */
@media (max-width: 1024px) {
  /* 하단 2단 → 1단(세로 적층)으로 무너뜨림. 데이터 요약은 전사 섹션 아래로 이동. */
  .dash2-bottom {
    flex-direction: column;
  }
  .dash2-bottom > .dash2-bottom-side {
    width: 100%;
    max-width: 480px;  /* 1단으로 떨어질 때 데이터 요약이 화면 가득 늘어나지 않도록 */
  }
  /* 1024 이하에선 카드가 너무 좁아 라벨 깨지지 않도록 3열로 축소(공통). */
  .dash2-cards.dash2-cards--4,
  .dash2-cards.dash2-cards--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 좁은 화면에선 헤더의 quick-links 가 줄바꿈되어도 카드 위에 좌측 정렬 유지 */
  .dash2-section-head { flex-wrap: wrap; row-gap: 6px; }
}

@media (max-width: 768px) {
  .dash2-cards.dash2-cards--4,
  .dash2-cards.dash2-cards--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card.dash2-card { padding: 12px 14px 10px; }
  .card.dash2-card .card-value.dash2-card-value { font-size: 1.35rem; }
  .dash2-card-icon { width: 28px; height: 28px; }
  /* 모바일: quick-links 가 제목 줄 아래로 자연 줄바꿈되며 좌측으로 정렬 */
  .dash2-section-head .dash2-quicklinks--inline {
    margin-left: 0;
    width: 100%;
  }
  .dash2-bottom > .dash2-bottom-side { max-width: none; }
}