/* ===== CSS Variables ===== */
:root {
  /* Colors — 레퍼런스(뮤트 슬레이트/틸) 디자인 팔레트 */
  --primary: #4a7c91;
  --primary-color: #4a7c91;
  --primary-dark: #3d6a7d;
  --primary-light: #5d92a8;
  --primary-rgb: 74, 124, 145;
  --secondary: #597381;
  --success: #48a67c;
  --success-color: #48a67c;
  --warning: #c78a3a;
  --nav-admin: #9a6515; /* 관리자 패널 네비 — 흰 사이드바 대비용 어두운 골드(대비 ~5:1) */
  --danger: #c75454;
  --danger-color: #c75454;
  /* 막대 채움 전용 — 큰 면색이라 글자/아이콘용 강조색과 분리.
     라이트는 뮤트 톤, 다크는 한 톤 가라앉혀 다크 UI에서 안 튀게 (dept-bar 와 동일 정책). */
  --bar-fill-success: #48a67c;
  --bar-fill-warning: #c78a3a;
  --bar-fill-danger: #c75454;
  --bar-fill-primary: #4a7c91;
  --info: #3a9f96;
  --info-light: #e0f2fe;

  /* Soft 배지/칩 — 라이트 파스텔(다크에서 토큰으로 전환). 라이트값은 기존 하드코딩과 동일 */
  --soft-blue-bg: #dbeafe;   --soft-blue-text: #2563eb;
  --soft-purple-bg: #ede9fe; --soft-purple-text: #7c3aed;
  --soft-amber-bg: #fef3c7;  --soft-amber-text: #d97706;
  --soft-green-bg: #f0fdf4;  --soft-green-text: #16a34a;
  --soft-red-bg: #fef2f2;    --soft-red-text: #dc2626;
  --soft-slate-bg: #f1f5f9;  --soft-slate-text: #475569;

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f6f8;
  --bg-tertiary: #d2dbe0;
  --bg-sidebar: #ffffff;
  --bg-sidebar-hover: #f4f6f8;
  --bg-card: #ffffff;

  /* Text */
  --text-primary: #384048;
  --text-secondary: #597381;
  --text-muted: #839ba9;
  --text-inverse: #ffffff;

  /* Gray Scale — 슬레이트 스케일 */
  --gray-50: #f4f6f8;
  --gray-100: #ebeff1;
  --gray-200: #d2dbe0;
  --gray-300: #adbec7;
  --gray-400: #839ba9;
  --gray-500: #6b8595;
  --gray-600: #597381;
  --gray-700: #4a5e6a;
  --gray-800: #384048;
  --gray-900: #2a3138;

  /* Borders */
  --border-color: #d2dbe0;
  --border: var(--border-color); /* var(--border, #xxx) 폴백 통일용 별칭 — 다크에서 라이트 테두리 방지 */
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* Shadows — 슬레이트 틴트 (레퍼런스) */
  --shadow-sm: 0 1px 3px rgba(56, 64, 72, 0.08);
  --shadow-md: 0 4px 12px rgba(56, 64, 72, 0.10);
  --shadow-lg: 0 8px 24px rgba(56, 64, 72, 0.12);

  /* Spacing */
  --sidebar-width: 260px;
  --header-height: 64px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* ===== Dark Mode (data-theme="dark") ===== */
/* 변수 기반 토큰만 재정의 → chrome(배경/텍스트/테두리/사이드바/버튼/폼/카드) 일괄 전환.
   강조/의미색은 다크 대비를 위해 약간 밝게. gray 스케일은 명암 반전. */
[data-theme="dark"] {
  /* Accent — 다크 대비 위해 약간 밝은 틸 */
  --primary: #6ea6bb;
  --primary-color: #6ea6bb;
  --primary-dark: #5d92a8;
  --primary-light: #8bbccf;
  --primary-rgb: 110, 166, 187;
  --secondary: #adbec7;
  --success: #6ec49a;
  --success-color: #6ec49a;
  --warning: #d9a55c;
  --nav-admin: #d9a55c; /* 다크 사이드바 위에선 밝은 골드 유지 */
  --danger: #d97a7a;
  --danger-color: #d97a7a;
  /* 막대 채움 — 다크 강조색(#6ec49a 등)은 면색으로 쓰면 밝게 튀므로 한 톤 가라앉힘 */
  --bar-fill-success: #479b73;
  --bar-fill-warning: #bd8a44;
  --bar-fill-danger: #c46060;
  --bar-fill-primary: #345a6b;
  --info: #5bbdb4;
  --info-light: rgba(91, 189, 180, 0.16);
  --soft-blue-bg: rgba(99, 148, 191, 0.18);    --soft-blue-text: #a8c6e2;
  --soft-purple-bg: rgba(160, 130, 200, 0.18); --soft-purple-text: #c4a9e8;
  --soft-amber-bg: rgba(201, 138, 58, 0.18);   --soft-amber-text: #e0b277;
  --soft-green-bg: rgba(110, 196, 154, 0.16);  --soft-green-text: #88d3ab;
  --soft-red-bg: rgba(201, 84, 84, 0.18);      --soft-red-text: #e09a9a;
  --soft-slate-bg: var(--bg-tertiary);         --soft-slate-text: var(--text-secondary);

  /* Backgrounds — 슬레이트 다크 */
  --bg-primary: #20262c;
  --bg-secondary: #161b1f;
  --bg-tertiary: #2c343b;
  --bg-sidebar: #1a2024;
  --bg-sidebar-hover: #2a323a;
  --bg-card: #20262c;

  /* Text */
  --text-primary: #e8edf0;
  --text-secondary: #a9bac4;
  --text-muted: #7a8e9a;
  --text-inverse: #ffffff;

  /* Gray Scale — 명암 반전 (light↔dark) */
  --gray-50: #161b1f;
  --gray-100: #20262c;
  --gray-200: #2c343b;
  --gray-300: #3a444c;
  --gray-400: #5a6b76;
  --gray-500: #839ba9;
  --gray-600: #adbec7;
  --gray-700: #c4d0d7;
  --gray-800: #dde4e8;
  --gray-900: #eef2f4;

  /* Borders */
  --border-color: #333d45;

  /* Shadows — 다크에서 더 깊게 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50);
}
html[data-theme="dark"] { background-color: #161b1f; }

/* ===== Dark Mode — 컴포넌트 톤다운 ===== */
/* 밝은 강조색의 솔리드 채움/배지/진행바가 다크에서 글레어를 만들어 차분한 톤으로 조정.
   변수 토큰만으로 안 잡히는 컴포넌트는 선택자별로 재정의(명도/채도 ↓). */

/* 네이티브 폼 컨트롤(시계/달력 아이콘·스크롤바·셀렉트)을 다크 UA로 → 아이콘 가독성 확보 */
html[data-theme="dark"] { color-scheme: dark; }

/* 활성 메뉴 / 주요 버튼 / 토글 — 강조 틸이 너무 밝아 차분한 틸로 */
[data-theme="dark"] .nav-item.active { background: #345a6b; }
[data-theme="dark"] .settings-nav-item.active { background: #345a6b; }
/* 다크에서 color-scheme:dark 로 인한 네이티브 버튼 테두리 제거 (의도된 테두리 아님) */
[data-theme="dark"] .btn { -webkit-appearance: none; appearance: none; }
[data-theme="dark"] .btn-primary { background: #345a6b; }
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #2d4f5d; }
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider,
[data-theme="dark"] .toggle input:checked + .toggle-slider { background-color: #5d92a8; }

/* 진행바 — 밝은 그라데이션/라이트 프라이머리 → 차분한 단색 */
[data-theme="dark"] .progress-bar-fill,
[data-theme="dark"] .progress-fill { background: #345a6b; }
[data-theme="dark"] .progress-bar-fill.active,
[data-theme="dark"] .progress-fill.active { background-color: #345a6b; }
[data-theme="dark"] .progress-bar-fill.completed { background: linear-gradient(90deg, #3f7f5e, #4f9a73); }
[data-theme="dark"] .progress-bar-fill.paused { background: linear-gradient(90deg, #9a6f33, #b5894a); }
[data-theme="dark"] .progress-bar-fill.scheduled { background: #3a444c; }

/* 배지 — 정보 배지 텍스트가 하드코딩 다크라 안 보임 / 보조 배지 평탄 보정 */
[data-theme="dark"] .badge-info { background: rgba(91, 189, 180, 0.16); color: #7fd3cb; }
[data-theme="dark"] .badge-secondary { background: var(--bg-tertiary); color: var(--text-secondary); }

/* 캠페인 카드 배지 — 라이트 파스텔 → 다크 반투명 + 라이트 텍스트 */
[data-theme="dark"] .send-type-badge { background: rgba(99, 148, 191, 0.20); color: #a8c6e2; }
[data-theme="dark"] .smtp-badge { background: rgba(150, 120, 200, 0.22); color: #c6abe8; }
[data-theme="dark"] .template-badge { background: rgba(201, 138, 58, 0.20); color: #e0b277; }
[data-theme="dark"] .landing-page-badge { background: rgba(110, 196, 154, 0.18); color: #88d3ab; }

/* 진행바 트랙 — 라이트 회색(#f1f5f9) → 다크 */
[data-theme="dark"] .progress-bar,
[data-theme="dark"] .progress-track { background: var(--bg-tertiary); }

/* 트래킹 소스 / 신고 채널 배지 — 라이트 파스텔 → 다크 반투명 */
[data-theme="dark"] .tracking-source-badge { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); }
[data-theme="dark"] .tracking-source-user { background: rgba(99, 148, 191, 0.18); color: #a8c6e2; border-color: rgba(99, 148, 191, 0.32); }
[data-theme="dark"] .tracking-source-report,
[data-theme="dark"] .report-channel-badge { background: rgba(91, 189, 180, 0.16); color: #7fd3cb; border-color: rgba(91, 189, 180, 0.32); }
[data-theme="dark"] .report-channel-badge:hover { background: rgba(91, 189, 180, 0.26); border-color: rgba(91, 189, 180, 0.48); color: #9bdcd5; }
[data-theme="dark"] .tracking-source-sandbox { background: rgba(201, 138, 58, 0.18); color: #e0b277; border-color: rgba(201, 138, 58, 0.32); }
[data-theme="dark"] .tracking-source-excluded { background: rgba(201, 84, 84, 0.18); color: #e09a9a; border-color: rgba(201, 84, 84, 0.32); }
[data-theme="dark"] .tracking-source-test { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); }

/* 상세(캠페인) 탭 배지 숫자만 더 어둡게 */
[data-theme="dark"] .detail-tab .tab-badge { background: #2d4f5d; }
/* admin 탭 카운트 배지 — 다크에서 풀채도 의미색 대신 차분한 soft 칩 (의미는 유지) */
[data-theme="dark"] .tab-btn .tab-badge { background: var(--soft-slate-bg); color: var(--text-secondary); }
[data-theme="dark"] .tab-btn .tab-badge[style*="--success"] { background: var(--soft-green-bg) !important; color: var(--soft-green-text) !important; }
[data-theme="dark"] .tab-btn .tab-badge[style*="--danger"] { background: var(--soft-red-bg) !important; color: var(--soft-red-text) !important; }

/* 랜딩 옵션 카드 — 흰 배경 → 카드 배경 */
[data-theme="dark"] .landing-option-card { background: var(--bg-card); }
[data-theme="dark"] .landing-option-card:hover { background: rgba(110, 166, 187, 0.08); }
[data-theme="dark"] .landing-option-card.selected { background: rgba(110, 166, 187, 0.14); }

/* 태그 / 카운트 / 유형 배지 — 라이트 인디고·회색 → 다크 반투명 */
[data-theme="dark"] .badge-tag,
[data-theme="dark"] .template-card-tag { background: rgba(110, 166, 187, 0.16); color: #a9c6d4; }
[data-theme="dark"] .badge-field-count { background: var(--bg-tertiary); color: var(--text-secondary); }
[data-theme="dark"] .badge-type { background: rgba(160, 130, 200, 0.18); color: #c4a9e8; }

/* 썸네일 하단 페이드 오버레이 — 흰색 페이드라 다크 카드에서 흰 띠가 생김 → 카드색으로 페이드 */
[data-theme="dark"] .scenario-thumbnail::after,
[data-theme="dark"] .template-card-thumbnail::after,
[data-theme="dark"] .unified-card-thumbnail::after,
[data-theme="dark"] .notice-thumbnail::after,
[data-theme="dark"] .layout-card .layout-thumbnail::after { background: linear-gradient(to bottom, transparent, var(--bg-card)); }

/* 시나리오 프리뷰 폴백 배경(라이트 핑크) → 다크 */
[data-theme="dark"] .scenario-preview { background: var(--bg-secondary); }

/* 위저드 단계 번호(활성) — 강조 틸이 밝아 차분하게 */
[data-theme="dark"] .wizard-step.active .wizard-step-number { background: #345a6b; border-color: #345a6b; }

/* 의미색 배지 — 다크에서 더 또렷하게(soft 토큰) */
[data-theme="dark"] .badge-success { background: var(--soft-green-bg); color: var(--soft-green-text); }
[data-theme="dark"] .badge-warning { background: var(--soft-amber-bg); color: var(--soft-amber-text); }
[data-theme="dark"] .badge-danger { background: var(--soft-red-bg); color: var(--soft-red-text); }
[data-theme="dark"] .badge-primary { background: rgba(110, 166, 187, 0.16); color: #a9c6d4; }

/* 콘텐츠 리스트 번호 원형 — 다크에서 밝은 칩색 대신 차분한 솔리드(흰 숫자 유지) */
[data-theme="dark"] .content-list-item > span:first-child { background: #345a6b !important; }

/* 태그 입력 칩 — 라이트 회색(#f1f5f9) → 다크 슬레이트 */
[data-theme="dark"] .tag-input-tag { background: var(--soft-slate-bg); color: var(--text-secondary); }
[data-theme="dark"] .tag-input-tag:hover { background: var(--bg-tertiary); border-color: var(--border-color); }

/* 활성 필터/디바이스 탭 버튼 — 밝은 프라이머리 채움 → 차분한 다크 틸 */
[data-theme="dark"] .monitor-date-btn.active { background: #345a6b !important; border-color: #345a6b !important; }
[data-theme="dark"] .scenario-device-tab.active { background: #345a6b; }

/* 템플릿 태그 칩 안전망 — 인라인 하드코딩 라이트색을 다크 soft 칩으로 (소스 토큰화 누락분 보강) */
[data-theme="dark"] .template-card-tag[style*="#f1f5f9"] { background: var(--soft-slate-bg) !important; color: var(--soft-slate-text) !important; }
[data-theme="dark"] .template-card-tag[style*="#dbeafe"] { background: var(--soft-blue-bg) !important; color: var(--soft-blue-text) !important; }
[data-theme="dark"] .template-card-tag[style*="#ede9fe"] { background: var(--soft-purple-bg) !important; color: var(--soft-purple-text) !important; }
[data-theme="dark"] .template-card-tag[style*="#fef3c7"] { background: var(--soft-amber-bg) !important; color: var(--soft-amber-text) !important; }
[data-theme="dark"] .template-card-tag[style*="#f0fdf4"] { background: var(--soft-green-bg) !important; color: var(--soft-green-text) !important; }

/* AI 생성 버튼(인디고→바이올렛 그라데이션) — 다크에서 살짝 깊게 (흰 글자 유지) */
[data-theme="dark"] .btn[style*="#6366f1"] { background: linear-gradient(135deg, #5257bd 0%, #7754bd 100%) !important; }

/* 템플릿 유형 배지(교육형/퀴즈형/경각심 등) — 라이트 솔리드 → 다크 뮤트 솔리드 (흰 글자 유지, 썸네일 위 가독성) */
[data-theme="dark"] .template-type-badge.email,
[data-theme="dark"] .template-type-badge.education { background: #3f6e80; }
[data-theme="dark"] .template-type-badge.sms,
[data-theme="dark"] .template-type-badge.quiz { background: #3f7f5e; }
[data-theme="dark"] .template-type-badge.scenario,
[data-theme="dark"] .template-type-badge.alert { background: #9a4f4f; }
[data-theme="dark"] .template-type-badge.hybrid { background: #6b5294; }

/* 솔리드 데인저 버튼(일괄 삭제 등) — 다크에서 밝은 빨강 → 뮤트 (흰 글자 유지). outline-danger 는 뒤 규칙이 유지 */
[data-theme="dark"] .btn-danger { background: #b05656; border-color: #b05656; }
[data-theme="dark"] .btn-danger:hover:not(:disabled),
[data-theme="dark"] .btn-danger:hover { background: #984848; border-color: #984848; }

/* 퀴즈 문제 선택기(관리 모달) — 인라인 하드코딩 라이트색 다크 대응. .question-item /
   .selected-question-item 은 관리 모달 전용 클래스라 안전하게 !important 로 덮음 */
[data-theme="dark"] .selected-question-item,
[data-theme="dark"] .question-item[style*="background:#fff"],
[data-theme="dark"] .question-item[style*="background:white"] { background: var(--bg-card) !important; }
[data-theme="dark"] .question-item [style*="#334155"],
[data-theme="dark"] .selected-question-item [style*="#334155"] { color: var(--text-primary) !important; }
[data-theme="dark"] .question-item [style*="#94a3b8"],
[data-theme="dark"] .selected-question-item [style*="#94a3b8"] { color: var(--text-muted) !important; }

/* 카드 액션 아이콘 버튼 hover — 밝은 프라이머리/데인저 채움 → 차분한 다크 톤 */
[data-theme="dark"] .card-actions button:not(.btn):hover,
[data-theme="dark"] .template-card-actions button:not(.btn):hover,
[data-theme="dark"] .education-card-actions button:not(.btn):hover,
[data-theme="dark"] .quiz-layout-actions button:not(.btn):hover { background: #345a6b; }
[data-theme="dark"] .card-actions button.danger:hover,
[data-theme="dark"] .template-card-actions button.danger:hover,
[data-theme="dark"] .education-card-actions button.danger:hover,
[data-theme="dark"] .quiz-layout-actions button.danger:hover { background: #b05656; }

/* 시나리오/이메일 변수 태그 — 일반 hover 톤다운 + 후속안내 전용(라이트 크림) 다크 대응 */
[data-theme="dark"] .scenario-variable-tag:hover { background: #345a6b; border-color: #345a6b; }
[data-theme="dark"] .scenario-variable-tag.followup-variable { background: var(--soft-amber-bg); color: var(--soft-amber-text); border-color: rgba(201, 138, 58, 0.35); }
[data-theme="dark"] .scenario-variable-tag.followup-variable:hover { background: #b5894a; color: #fff; border-color: #b5894a; }

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  background-color: #f4f6f8; /* 초기 로드 시 깜빡임 방지 */
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
}

/* Consistent font for code, pre, and form inputs */
code, pre, kbd, samp {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: inherit;
}

input[type="time"],
input[type="date"],
input[type="datetime-local"] {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== Layout ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--text-secondary);
  border-right: 1px solid var(--border-color);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal);
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  min-height: 65px;  /* 고정 높이로 레이아웃 시프트 방지 */
  box-sizing: border-box;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-user-info .user-email {
  color: var(--text-secondary);
  font-size: 13px;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* 좌상단 사용자 영역 → 내 계정 설정 링크 */
.sidebar-user-info .user-account-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-user-info .user-account-link:hover {
  background: var(--bg-sidebar-hover);
}

.sidebar-user-info .user-account-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

/* 사이드바 헤더 우측 액션 그룹 (알림 벨 + 로그아웃) — 이메일과 간격 유지 */
.sidebar-user-info .sidebar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-notification-slot {
  display: inline-flex;
  align-items: center;
}

.btn-logout {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-logout:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-primary);
}

.btn-logout svg {
  width: 18px;
  height: 18px;
}

/* 테마 토글 버튼 — btn-logout 스타일 공유, 해/달 아이콘 전환 (라이트=달, 다크=해) */
.btn-theme-toggle .icon-sun { display: none; }
.btn-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .btn-theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .btn-theme-toggle .icon-moon { display: none; }

/* Legacy styles - can be removed if not used elsewhere */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.sidebar-logo-text {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 0;
}

.nav-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 0 12px;
  margin-bottom: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 4px;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--primary);
  color: var(--text-inverse);
}

.nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item-icon svg {
  width: 20px;
  height: 20px;
}

.nav-item-text {
  font-size: 14px;
  font-weight: 500;
}

.nav-item-badge {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  min-width: 16px;
  text-align: right;
}

.nav-item.active .nav-item-badge {
  color: rgba(255, 255, 255, 0.9);
}

/* 경고가 필요한 배지 (가입 승인 대기 등) */
.nav-item-badge.badge-warning {
  color: #a8721e;
  background: transparent !important;
}

.nav-item.active .nav-item-badge.badge-warning {
  color: #d9a55c; /* 활성 상태에서도 경고 배지 색상 유지 (밝은 주황) */
}

.nav-item-badge:empty {
  display: none;
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* Copyright Overlay - 메인 콘텐츠 하단 고정 */
.copyright-overlay {
  position: fixed;
  bottom: 12px;
  left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2);
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 40;
}

@media (max-width: 1024px) {
  .copyright-overlay {
    left: 50%;
  }
}

/* Header */
.header {
  height: var(--header-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.header-breadcrumb span {
  color: var(--text-muted);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  position: relative;
  transition: all var(--transition-fast);
}

.header-icon-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.header-icon-btn .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.user-menu:hover {
  background: var(--bg-secondary);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.user-info {
  text-align: left;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.user-role {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Page Content */
.page-content {
  flex: 1;
  padding: 24px;
}

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.card-header {
  padding: 12px 20px;
  min-height: 56px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.card-body {
  padding: 20px;
  flex: 1;
}

.card-body.p-0 {
  padding: 0;
}

.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

/* ===== Stat Cards ===== */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* Stat Card - Mini Icon Style */
.stat-card {
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-card-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.stat-card-icon svg {
  width: 20px;
  height: 20px;
}

.stat-card-icon.blue { color: var(--primary); }
.stat-card-icon.green { color: var(--success); }
.stat-card-icon.orange { color: var(--warning); }
.stat-card-icon.red { color: var(--danger); }
.stat-card-icon.cyan { color: var(--info); }
.stat-card-icon.purple { color: #8b5cf6; }

.stat-card-content {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== Tables ===== */
.table-wrapper {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.card-body.p-0 .table th:first-child,
.card-body.no-padding .table th:first-child {
  border-radius: var(--border-radius-lg) 0 0 0;
}

.card-body.p-0 .table th:last-child,
.card-body.no-padding .table th:last-child {
  border-radius: 0 var(--border-radius-lg) 0 0;
}

.table tbody tr:hover {
  background: var(--bg-secondary);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Table cell content alignment */
.table td {
  text-align: left;
  vertical-align: middle;
}

/* Table badge alignment - offset left padding for visual alignment */
.table td .badge {
  margin-left: -10px;
}

/* Table action buttons container alignment */
.table td .action-buttons,
.table td .btn-group {
  margin-left: -6px;
}

/* Table code/ip-address alignment */
.table td code,
.table td .ip-address {
  margin-left: -8px;
}

/* Table action button - smaller padding for alignment */
.btn-table-action {
  padding: 6px 6px !important;
}

/* Table action button - danger hover for delete buttons */
.btn-table-action.btn-danger-hover:hover {
  color: var(--color-error);
  background-color: rgba(199, 84, 84, 0.1);
}

/* Table action button alignment when directly in td (not wrapped in container) */
.table td > .btn-table-action:first-child,
.data-table td > .btn-table-action:first-child {
  margin-left: -6px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--border-color);
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: #9c3a3a;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--border-radius);
}

/* ===== Choice Button Group ===== */
.choice-button-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.choice-button-group.nowrap {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.choice-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.choice-button:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.choice-button.active,
.choice-button[aria-pressed="true"] {
  background: rgba(74, 124, 145, 0.08);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 2px rgba(74, 124, 145, 0.08);
}

.choice-button-group.choice-success .choice-button:hover:not(:disabled) {
  background: #f0fdfa;
  border-color: #5eead4;
  color: #0f766e;
}

.choice-button-group.choice-success .choice-button.active,
.choice-button-group.choice-success .choice-button[aria-pressed="true"] {
  background: #ecfdf5;
  border-color: #5eead4;
  color: #0f766e;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.12);
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 10px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.form-label .required,
.required {
  color: var(--danger);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 124, 145, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
}

.form-textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.form-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

/* Number input spinner - visible */
input[type="number"].form-input {
  -moz-appearance: auto;
  -webkit-appearance: auto;
  appearance: auto;
}

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
}

.badge-primary { background: rgba(74, 124, 145, 0.1); color: var(--primary); }
.badge-success { background: rgba(72, 166, 124, 0.1); color: var(--success); }
.badge-warning { background: rgba(199, 138, 58, 0.1); color: var(--warning); }
.badge-danger { background: rgba(199, 84, 84, 0.1); color: var(--danger); }
.badge-secondary { background: var(--bg-secondary); color: var(--text-secondary); }
.badge-info { background: rgba(58, 159, 150, 0.1); color: #1e6d66; }

/* ===== 감사로그 작업(Action) 배지 색상 ===== */
/* CRUD 작업 */
.badge-action-create { background: rgba(72, 166, 124, 0.12); color: #2f7a55; }
.badge-action-update { background: rgba(74, 124, 145, 0.12); color: #3d6a7d; }
.badge-action-delete { background: rgba(199, 84, 84, 0.12); color: #9c3a3a; }

/* 인증 관련 */
.badge-action-login { background: rgba(95, 106, 204, 0.12); color: #404a9e; }
.badge-action-logout { background: rgba(107, 114, 128, 0.12); color: var(--text-secondary); }
.badge-action-login_failed { background: rgba(199, 84, 84, 0.15); color: #9c3a3a; }
.badge-action-otp_verify { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.badge-action-password_reset { background: rgba(236, 72, 153, 0.12); color: #db2777; }

/* 승인/거부 */
.badge-action-approve { background: rgba(16, 185, 129, 0.12); color: #059669; }
.badge-action-reject { background: rgba(199, 84, 84, 0.12); color: #9c3a3a; }

/* 캠페인 제어 */
.badge-action-start { background: rgba(72, 166, 124, 0.12); color: #2f7a55; }
.badge-action-pause { background: rgba(199, 138, 58, 0.12); color: #a8721e; }
.badge-action-resume { background: rgba(58, 159, 150, 0.12); color: #1e6d66; }

/* 데이터 작업 */
.badge-action-import { background: rgba(14, 165, 233, 0.12); color: #0284c7; }
.badge-action-export { background: rgba(168, 85, 247, 0.12); color: #9333ea; }

/* 일괄 작업 */
.badge-action-bulk_delete { background: rgba(199, 84, 84, 0.15); color: #b91c1c; }
.badge-action-bulk_update { background: rgba(74, 124, 145, 0.15); color: #33596a; }

/* ===== Status ===== */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot.active { background: var(--success); }
.status-dot.pending { background: var(--warning); }
.status-dot.failed { background: var(--danger); }
.status-dot.draft { background: var(--text-muted); }

/* ===== Event Stream ===== */
.event-stream {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
}

/* Dashboard Card Height Alignment */
.grid-2 {
  align-items: stretch;
}

.grid-2 > .card {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Grid item 축소 허용 (canvas/chart 포함 시 필수) */
}

.grid-2 > .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid-2 > .card .card-body .event-stream,
.grid-2 > .card .card-body .table-wrapper {
  flex: 1;
  max-height: 320px;
  overflow-y: auto;
}

.event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.event-item:last-child {
  border-bottom: none;
}

.event-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-icon.open { background: rgba(74, 124, 145, 0.1); color: var(--primary); }
.event-icon.click { background: rgba(199, 138, 58, 0.1); color: var(--warning); }
.event-icon.submit { background: rgba(199, 84, 84, 0.1); color: var(--danger); }
.event-icon.sent { background: rgba(72, 166, 124, 0.1); color: var(--success); }
.event-icon.send_failed { background: rgba(199, 84, 84, 0.1); color: var(--danger); }
.event-icon.landing { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.event-icon.download { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.event-icon.form_view { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }
.event-icon.confirm_view { background: rgba(72, 166, 124, 0.1); color: var(--success); }
.event-icon.education_start { background: rgba(95, 106, 204, 0.1); color: #5f6acc; }
.event-icon.education_complete { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.event-content {
  flex: 1;
  min-width: 0;
}

.event-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
}

.event-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.event-time {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Charts placeholder ===== */
.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  color: var(--text-muted);
}

/* ===== Login Page ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 라이트 모드: 밝은 배경. 다크 모드는 head 스니펫의 body{background:#161b1f} 가
     더 높은 우선순위로 적용되어 기존 다크 배경이 그대로 유지된다. */
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  padding: 20px;
}

.auth-container {
  width: 100%;
  max-width: 420px;
}

.auth-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-header {
  padding: 32px 32px 24px;
  text-align: center;
}

.auth-logo {
  width: 56px;
  height: 56px;
  background: var(--primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  font-weight: 700;
  color: white;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

.auth-body {
  padding: 0 32px 32px;
}

.auth-footer {
  padding: 20px 32px;
  background: var(--bg-secondary);
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-footer .divider {
  color: var(--text-muted);
  margin: 0 8px;
}

.auth-container .app-footer {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
}

.auth-container .app-footer p {
  font-size: 12px;
  color: var(--text-muted);
}

/* 다크 모드: 인증 화면 배경은 어두우므로 푸터(© 문구)를 다시 밝게 */
[data-theme="dark"] .auth-container .app-footer p {
  color: rgba(255, 255, 255, 0.5);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* ===== Modal ===== */
/* Modal container - covers full screen */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

/* Modal backdrop - dark overlay */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* Modal content - the actual dialog box */
.modal-content {
  position: relative;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform var(--transition-normal);
  z-index: 1;
  margin: 0 auto;
}

.modal.active .modal-content:not(.dragged) {
  transform: translateY(0);
}

/* 드래그 중인 모달은 CSS transform 무시하고 JS에서 제어 */
.modal.active .modal-content.dragged,
.modal-content.dragged {
  transition: none !important;
}

/* Modal size variants - 150px interval system */
/* XS: Delete confirmations, simple alerts */
.modal-content.modal-xs {
  max-width: 400px;
}

/* SM: Simple forms */
.modal-content.modal-sm {
  max-width: 500px;
}

/* MD: General forms, uploads */
.modal-content.modal-md {
  max-width: 650px;
}

/* LG: Import modals, editors */
.modal-content.modal-lg {
  max-width: 800px;
}

/* XL: Previews, complex editors */
.modal-content.modal-xl {
  max-width: 950px;
}

/* 2XL: Large editors (scenario, layout) */
.modal-content.modal-2xl {
  max-width: 1100px;
}

/* Full: Full-screen editors */
.modal-content.modal-full {
  max-width: 1400px;
  width: 90vw;
  max-height: 95vh;
  margin: 0 auto;
}

/* Backward compatibility alias */
.modal-content.modal-xxl {
  max-width: 1100px;
}

/* Responsive modal adjustments */
@media (max-width: 1200px) {
  .modal-content.modal-2xl,
  .modal-content.modal-xxl {
    max-width: 95vw;
  }
}

@media (max-width: 1000px) {
  .modal-content.modal-xl {
    max-width: 95vw;
  }
}

@media (max-width: 850px) {
  .modal-content.modal-lg {
    max-width: 95vw;
  }
}

@media (max-width: 700px) {
  .modal-content.modal-md {
    max-width: 95vw;
  }
}

/* Modal position variants */
/* Top-fixed modal with full height (95vh fixed) */
/* 상단 고정 + 고정 높이: 위저드, 멀티스텝 폼 등에 적합 */
.modal.modal-top-full {
  align-items: flex-start;
  padding-top: 20px;
}

.modal.modal-top-full .modal-content {
  display: flex;
  flex-direction: column;
  height: calc(95vh - 40px);
  max-height: calc(95vh - 40px);
}

.modal.modal-top-full .modal-body {
  flex: 1;
  min-height: 0; /* 중요: flex 컨테이너 중첩 시 축소 허용 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* modal-body 내에서 남은 공간을 채우는 요소 */
.modal.modal-top-full .modal-body .flex-fill {
  flex: 1 1 0; /* grow:1, shrink:1, basis:0 - 나머지 공간만 채움 */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* flex-fill 내부 label은 축소되지 않도록 */
.modal.modal-top-full .modal-body .flex-fill > .form-label {
  flex-shrink: 0;
}

.modal.modal-top-full .modal-body .flex-fill > .checkbox-list,
.modal.modal-top-full .modal-body .flex-fill > .list-container,
.modal.modal-top-full .modal-body .flex-fill.step-builder > .step-list {
  flex: 1 1 0;
  min-height: 100px;
  max-height: calc(100% - 26px); /* label 높이(~24px) + 여백 고려 */
  overflow-y: auto;
}

/* step-builder가 flex-fill일 때 내부 레이아웃 */
.modal.modal-top-full .modal-body .step-builder.flex-fill {
  display: flex;
  flex-direction: column;
}

/* flex-fill 뒤에 오는 요소들은 축소되지 않도록 */
.modal.modal-top-full .modal-body .flex-fill ~ * {
  flex-shrink: 0;
}

.modal.modal-top-full .modal-footer {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .modal.modal-top-full {
    padding-top: 10px;
  }
  .modal.modal-top-full .modal-content {
    height: calc(98vh - 20px);
    max-height: calc(98vh - 20px);
  }
}

/* Legacy support for modal-overlay pattern */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  /* 닫힌 상태에서는 마우스 이벤트를 받지 않음.
     내부 .modal이 visibility:visible로 재정의되어 있어 이게 없으면
     투명한 모달이 화면 중앙에서 클릭/커서(cursor:move)를 가로챔. */
  pointer-events: none;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-overlay .modal {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  opacity: 1;
  visibility: visible;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform var(--transition-normal);
  z-index: auto;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-primary);
  cursor: move;
  user-select: none;
}

.modal-header:active {
  cursor: grabbing;
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

/* 드래그 중인 모달 스타일 */
.modal-content.dragging {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
  transition: none;
}

.modal-content.dragging .modal-header {
  background: var(--bg-secondary);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 140px);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: var(--bg-secondary);
}

/* ===== Pagination - 이전 스타일 제거됨, 공통 컴포넌트로 통합 (line 2802+) ===== */

/* ===== Empty State ===== */
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Empty State Compact - 카드 내부용 */
.empty-state-compact {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-compact svg {
  margin-bottom: 12px;
  opacity: 0.5;
}

.empty-state-compact p {
  margin: 0;
  font-size: 14px;
}

/* 차트 빈 상태 오버레이 (공통) — components.js 의 amtpChartEmpty 전역 플러그인이 주입한다.
   .empty-state-compact 와 동일 톤(흐린 아이콘 + 안내문, 가운데 정렬)으로 통일. */
.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}
.chart-empty svg { opacity: 0.5; }
.chart-empty p { margin: 0; font-size: 13px; }

/* ===== Grid Layouts ===== */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Grid item 축소 허용 - canvas/chart 등 intrinsic width가 있는 콘텐츠의 축소 보장 */
.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
  min-width: 0;
}

/* Split row - 좌우 분할 레이아웃 */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.split-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.split-right {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.split-left > *,
.split-right > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .split-row {
    grid-template-columns: 1fr;
  }
}

/* ===== Utilities ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

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

  .main-content {
    margin-left: 0;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .header {
    padding: 0 16px;
  }

  .page-content {
    padding: 16px;
  }

  .user-info {
    display: none;
  }
}

@media (max-width: 480px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Admin Panel Styles ===== */

/* Admin Sidebar */
.sidebar.sidebar-admin {
  background: var(--bg-sidebar);
}

.sidebar-admin .tenant-badge {
  background: var(--danger) !important;
  color: white;
}

.sidebar-admin .user-avatar {
  background: var(--danger) !important;
}

/* Tenant Context (사이드바 테넌트 표시) */
.sidebar-tenant-context {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  min-height: 85px;  /* 고정 높이로 레이아웃 시프트 방지 */
  box-sizing: border-box;
}

.tenant-context-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
  height: 15px;  /* 고정 높이 - 텍스트 변경 시 레이아웃 시프트 방지 */
  line-height: 15px;
}

.tenant-context-value {
  position: relative;
  height: 36px;  /* dropdown/display 고정 높이 */
}

/* 테넌트 드롭다운 (Super Admin용) */
.sidebar-tenant-context .tenant-dropdown {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23597381' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.sidebar-tenant-context .tenant-dropdown:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--gray-300);
}

.sidebar-tenant-context .tenant-dropdown:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.sidebar-tenant-context .tenant-dropdown option {
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 8px;
}

/* 테넌트명 읽기 전용 표시 (Tenant Admin/Operator/Viewer용) */
.tenant-name-display {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid transparent;  /* dropdown과 동일한 높이 확보 */
  border-radius: 6px;
}

/* Admin Nav Badge */
.nav-item .nav-badge {
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}

/* Admin Stats Grid - 5 columns, responsive */
.stat-cards.stat-cards-5 {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

@media (max-width: 480px) {
  .stat-cards.stat-cards-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Alert Stat Card */
.stat-card.stat-card-alert {
  border-left: 4px solid var(--warning);
}

.stat-card-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
}

.stat-card-link:hover {
  text-decoration: underline;
}

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}

.dashboard-grid > .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dashboard-grid > .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Grid 내부 카드는 margin-top 제외 */
.dashboard-grid > .card + .card {
  margin-top: 0;
}

@media (max-width: 480px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Header with Link */
.card-header .card-link {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
}

.card-header .card-link:hover {
  text-decoration: underline;
}

/* Last Updated Text */
.last-updated {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Compact Table */
.table.table-compact th,
.table.table-compact td {
  padding: 10px 12px;
  font-size: 13px;
}

/* Single-line Table: 모든 셀 한 줄 표시 */
.table-single-line {
  table-layout: auto;
}

.table-single-line > thead > tr > th,
.table-single-line > tbody > tr > td,
.table-single-line > tfoot > tr > td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
}

/* 체크박스/액션/뱃지/버튼 셀은 truncation 제외 */
.table-single-line .th-checkbox,
.table-single-line .th-action,
.table-single-line > tbody > tr > td:has(input[type="checkbox"]),
.table-single-line > tbody > tr > td:has(.action-buttons),
.table-single-line > tbody > tr > td:has(.btn-group),
.table-single-line > tbody > tr > td:has(.approval-actions),
.table-single-line > tbody > tr > td:has(.badge),
.table-single-line > tbody > tr > td:has(.btn) {
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  width: auto;
}

/* Status Dot */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-dot.status-active {
  background: var(--success);
}

.status-dot.status-suspended {
  background: var(--danger);
}

.status-dot.status-pending {
  background: var(--warning);
}

/* Alert List */
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.alert-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.alert-item.alert-warning {
  border-left: 3px solid var(--warning);
}

.alert-item.alert-info {
  border-left: 3px solid var(--info);
}

.alert-item.alert-success {
  border-left: 3px solid var(--success);
}

.alert-item.alert-danger {
  border-left: 3px solid var(--danger);
}

.alert-item-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.alert-item-content {
  flex: 1;
  min-width: 0;
}

.alert-item-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.alert-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.alert-item-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* System Health Grid */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

@media (max-width: 480px) {
  .health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.health-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}

.health-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.health-icon.health-success {
  background: rgba(72, 166, 124, 0.1);
  color: var(--success);
}

.health-icon.health-warning {
  background: rgba(199, 138, 58, 0.1);
  color: var(--warning);
}

.health-icon.health-danger {
  background: rgba(199, 84, 84, 0.1);
  color: var(--danger);
}

.health-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.health-name {
  font-weight: 500;
  font-size: 14px;
}

.health-status {
  font-size: 12px;
  color: var(--text-secondary);
}

.health-detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* Tenant Info Cell */
.tenant-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tenant-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

.tenant-icon.tenant-suspended {
  background: var(--danger);
}

.tenant-icon.tenant-pending {
  background: var(--warning);
}

.tenant-details {
  display: flex;
  flex-direction: column;
}

.tenant-name {
  font-weight: 600;
}

.tenant-id {
  font-size: 12px;
  color: var(--text-muted);
}

/* User Info Cell */
.user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.user-avatar-sm.user-disabled {
  background: var(--text-muted);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 500;
}

.user-email {
  font-size: 12px;
  color: var(--text-muted);
}

/* User Profile Modal */
.user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  margin-bottom: 24px;
}

.user-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
}

.user-profile-info h4 {
  margin-bottom: 4px;
}

.user-profile-info p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Button Group */
.btn-group {
  display: flex;
  gap: 4px;
}

/* Row States */
.table tbody tr.row-disabled {
  background: rgba(148, 163, 184, 0.05);
  color: var(--text-muted);
}

.table tbody tr.row-warning {
  background: rgba(199, 138, 58, 0.05);
}

.table tbody tr.row-pending {
  background: rgba(74, 124, 145, 0.05);
}

/* Bulk Actions Bar */
.bulk-actions {
  position: fixed;
  bottom: 24px;
  left: calc(50% + 130px); /* Center in main-content area (accounting for 260px sidebar) */
  transform: translateX(-50%) translateY(100px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.bulk-actions.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.bulk-count {
  font-weight: 600;
  color: var(--primary);
}

@media (max-width: 768px) {
  .bulk-actions {
    left: 16px;
    right: 16px;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Input with Suffix */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-suffix {
  padding: 0 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Input with Button */
.input-with-btn {
  display: flex;
  gap: 8px;
}

.input-with-btn .form-input {
  flex: 1;
}

/* Info List */
.info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 1rem;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--text-secondary);
  font-size: 14px;
}

.info-value {
  font-weight: 500;
  text-align: left;
}

/* Tenant Detail Grid */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.detail-section {
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
}

.detail-section h4 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Usage Stats */
.usage-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.usage-item {
  text-align: center;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: var(--border-radius);
}

.usage-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary);
}

.usage-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.activity-time {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.activity-text {
  font-size: 14px;
}

/* Filter Group */
.filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-group .form-select,
.filter-group .form-input {
  width: auto;
  min-width: 150px;
}

@media (max-width: 768px) {
  .filter-group {
    width: 100%;
  }

  .filter-group .form-select,
  .filter-group .form-input {
    width: 100%;
  }
}

/* Approval Card Simple (legacy) */
.approval-card-simple {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 16px;
}

.approval-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.approval-content {
  flex: 1;
  min-width: 0;
}

.approval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.approval-title {
  font-weight: 600;
  font-size: 16px;
}

.approval-date {
  font-size: 12px;
  color: var(--text-muted);
}

.approval-detail-item {
  display: flex;
  flex-direction: column;
}

.approval-detail-label {
  font-size: 12px;
  color: var(--text-muted);
}

.approval-detail-value {
  font-size: 14px;
  font-weight: 500;
}

/* Log Entry */
.log-entry {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.log-icon.log-success {
  background: rgba(72, 166, 124, 0.1);
  color: var(--success);
}

.log-icon.log-warning {
  background: rgba(199, 138, 58, 0.1);
  color: var(--warning);
}

.log-icon.log-danger {
  background: rgba(199, 84, 84, 0.1);
  color: var(--danger);
}

.log-icon.log-info {
  background: rgba(74, 124, 145, 0.1);
  color: var(--primary);
}

.log-content {
  flex: 1;
}

.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.log-action {
  font-weight: 500;
}

.log-time {
  font-size: 12px;
  color: var(--text-muted);
}

.log-details {
  font-size: 13px;
  color: var(--text-secondary);
}

.log-meta {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Admin Link in User Sidebar */
.nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 16px 12px;
}

.nav-section-admin {
  margin: 0;
  padding: 0;
}

.nav-section-admin .nav-item {
  color: var(--nav-admin);
}

.nav-section-admin .nav-item .nav-item-icon {
  color: var(--nav-admin);
}

.nav-section-admin .nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--nav-admin);
}

.nav-section-admin .nav-item:hover .nav-item-icon {
  color: var(--nav-admin);
}

.nav-section-admin .nav-item.active {
  background: rgba(199, 138, 58, 0.14);
  color: var(--nav-admin);
}

.nav-section-admin .nav-item.active .nav-item-icon {
  color: var(--nav-admin);
}

/* Enhanced Log Entries for Audit Log Page */
.log-entries {
  padding: 0 24px;
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-entry-warning {
  background: rgba(199, 138, 58, 0.05);
  margin: 0 -24px;
  padding: 16px 24px;
}

.log-entry-error {
  background: rgba(199, 84, 84, 0.05);
  margin: 0 -24px;
  padding: 16px 24px;
}

.log-time {
  min-width: 80px;
  text-align: right;
}

.log-date {
  font-size: 12px;
  color: var(--text-muted);
}

.log-timestamp {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.log-status {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.log-status.log-success {
  background: rgba(72, 166, 124, 0.1);
  color: var(--success);
}

.log-status.log-warning {
  background: rgba(199, 138, 58, 0.1);
  color: var(--warning);
}

.log-status.log-error {
  background: rgba(199, 84, 84, 0.1);
  color: var(--danger);
}

.log-content {
  flex: 1;
  min-width: 0;
}

.log-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.log-badge {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
}

.log-badge-create {
  background: rgba(72, 166, 124, 0.1);
  color: var(--success);
}

.log-badge-update {
  background: rgba(74, 124, 145, 0.1);
  color: var(--primary);
}

.log-badge-delete {
  background: rgba(199, 84, 84, 0.1);
  color: var(--danger);
}

.log-badge-login {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.log-badge-export {
  background: rgba(199, 138, 58, 0.1);
  color: var(--warning);
}

.log-badge-send {
  background: rgba(58, 159, 150, 0.1);
  color: #3a9f96;
}

.log-badge-security {
  background: rgba(156, 58, 58, 0.1);
  color: var(--danger);
}

/* 카테고리별 배지 색상 */
.log-badge-auth {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.log-badge-user {
  background: rgba(74, 124, 145, 0.1);
  color: var(--primary);
}

.log-badge-tenant {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.log-badge-campaign {
  background: rgba(199, 138, 58, 0.1);
  color: var(--warning);
}

.log-badge-template {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.log-badge-training {
  background: rgba(58, 159, 150, 0.1);
  color: #3a9f96;
}

.log-badge-recipient {
  background: rgba(95, 106, 204, 0.1);
  color: #5f6acc;
}

.log-badge-settings {
  background: rgba(107, 114, 128, 0.1);
  color: var(--text-secondary);
}

.log-badge-system {
  background: rgba(55, 65, 81, 0.1);
  color: var(--text-secondary);
}

.log-badge-default {
  background: var(--gray-100);
  color: var(--text-secondary);
}

/* 상태 도트 아이콘 */
.status-dot {
  font-size: 16px;
  cursor: default;
  line-height: 1;
}

.status-dot.status-success {
  color: var(--success);
}

.status-dot.status-failure {
  color: var(--danger);
}

.status-dot.status-warning {
  color: var(--warning);
}

/* 작업별 배지 색상 */
.log-badge-action {
  background: var(--gray-100);
  color: var(--text-secondary);
}

.log-text {
  font-weight: 500;
  color: var(--text-primary);
}

.log-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.log-user,
.log-tenant,
.log-target,
.log-ip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.log-user svg {
  color: var(--text-muted);
}

.log-ip code {
  font-size: 12px;
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: 4px;
}

.log-actions {
  flex-shrink: 0;
}

/* 테이블 행 상태 스타일 */
.table-row-error {
  background: rgba(199, 84, 84, 0.05);
}

.table-row-error:hover {
  background: rgba(199, 84, 84, 0.1) !important;
}

.table-row-warning {
  background: rgba(199, 138, 58, 0.05);
}

.table-row-warning:hover {
  background: rgba(199, 138, 58, 0.1) !important;
}

/* 텍스트 말줄임 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 테이블 셀 말줄임 유틸리티
 * - td.cell-truncate: 컬럼 폭에 맞춰 내부 컨텐츠를 한 줄로 자르고 … 표시
 * - 제목 + 부제목 스택 (예: 캠페인명 + 발송방식)은 strong·div를 block-ellipsis로 각자 한 줄 처리
 * - 제목 + 인라인 뱃지 (예: 이름 + "나" 뱃지)는 .cell-truncate-row 래퍼로 같은 줄 유지
 * - title 속성과 함께 사용하여 hover 툴팁으로 전체 내용 노출 권장
 * - max-width:0 + overflow:hidden은 table이 열 폭을 비례 분배하게 하는 공식 트릭 */
.cell-truncate {
  max-width: 0;
  overflow: hidden;
}
.cell-truncate > strong,
.cell-truncate > a,
.cell-truncate > p,
.cell-truncate > span:not(.badge):not([class*="badge-"]),
.cell-truncate > div:not(.cell-truncate-row):not([class*="badge"]) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 이름 + 인라인 뱃지 레이아웃 (같은 줄, 이름만 말줄임) */
.cell-truncate-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.cell-truncate-row > strong,
.cell-truncate-row > .cell-truncate-text {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-truncate-row > .badge,
.cell-truncate-row > svg {
  flex: 0 0 auto;
}

/* Filter Row Styles */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-range span {
  color: var(--text-muted);
}

.filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Settings Layout */
.settings-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.settings-nav-item:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: var(--primary);
  color: white;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-section {
  scroll-margin-top: 24px;
}

.settings-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

/* Toggle Switch */
.toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-300);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--bg-card);
  transition: 0.3s;
  border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
  background-color: var(--primary);
}

.toggle input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

.toggle-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Input Group */
.input-group {
  display: flex;
  align-items: stretch;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-group-inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
}

.checkbox-group-inline .form-checkbox {
  gap: 5px;
}

.checkbox-group-inline .form-checkbox input {
  width: 16px;
  height: 16px;
}

/* Backup List */
.backup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: var(--border-radius);
}

.backup-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.backup-name {
  font-size: 13px;
  color: var(--text-primary);
}

.backup-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.backup-actions {
  display: flex;
  gap: 4px;
}

/* Approval Card Enhancements */
.approval-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.approval-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.approval-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-color);
}

.approval-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-time {
  font-size: 13px;
  color: var(--text-muted);
}

.approval-card-body {
  padding: 16px;
}

.approval-info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.approval-company {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 200px;
}

.approval-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
}

.approval-details {
  display: flex;
  flex-direction: column;
}

.approval-name {
  font-weight: 600;
  font-size: 16px;
}

.approval-email {
  font-size: 14px;
  color: var(--text-secondary);
}

.approval-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  flex: 1;
}

.approval-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

/* Mobile responsive for approval info */
@media (max-width: 768px) {
  .approval-info {
    flex-direction: column;
    gap: 16px;
  }

  .approval-company {
    min-width: auto;
  }

  .approval-meta {
    gap: 12px 16px;
  }
}

.approval-meta-label {
  font-size: 12px;
  color: var(--text-muted);
}

.approval-meta-value {
  font-size: 14px;
  font-weight: 500;
}

.approval-message {
  margin-top: 16px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--border-radius);
  font-size: 14px;
}

.approval-message strong {
  color: var(--text-secondary);
}

.approval-message p {
  margin: 4px 0 0 0;
  color: var(--text-primary);
}

.approval-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--gray-50);
}

.approval-actions {
  display: flex;
  gap: 8px;
}

/* Pagination - 공통 컴포넌트 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn svg {
  stroke-width: 2.5;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--primary);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-info {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 100px;
  text-align: center;
}

/* ===== Utility Classes ===== */

/* Display Utilities */
.hidden {
  display: none !important;
}

.visible {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

/* Width Utilities */
.w-auto {
  width: auto !important;
}

.w-full {
  width: 100% !important;
}

.w-120 {
  width: 120px !important;
}

.w-140 {
  width: 140px !important;
}

.w-150 {
  width: 150px !important;
}

.w-200 {
  width: 200px !important;
}

.w-280 {
  width: 280px !important;
}

.w-300 {
  width: 300px !important;
}

.max-w-280 {
  max-width: 280px !important;
}

.max-w-300 {
  max-width: 300px !important;
}

/* Padding Utilities */
.p-0 {
  padding: 0 !important;
}

.p-2 {
  padding: 8px !important;
}

.p-3 {
  padding: 12px !important;
}

.p-4 {
  padding: 16px !important;
}

/* Margin Utilities */
.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mt-5 {
  margin-top: 24px !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

/* Text Utilities */
.text-center {
  text-align: center !important;
}

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

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

.text-sm {
  font-size: 12px !important;
}

.text-base {
  font-size: 14px !important;
}

.text-lg {
  font-size: 16px !important;
}

.font-mono {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-bold {
  font-weight: 700 !important;
}

/* Color Utilities */
.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-white {
  color: #ffffff !important;
}

/* Background Utilities */
.bg-primary {
  background-color: var(--bg-primary) !important;
}

.bg-secondary {
  background-color: var(--bg-secondary) !important;
}

.bg-success-light {
  background-color: rgba(72, 166, 124, 0.1) !important;
}

.bg-warning-light {
  background-color: rgba(199, 138, 58, 0.1) !important;
}

.bg-danger-light {
  background-color: rgba(199, 84, 84, 0.1) !important;
}

.bg-info-light {
  background-color: rgba(58, 159, 150, 0.1) !important;
}

/* Border Utilities */
.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-lg {
  border-radius: var(--border-radius-lg) !important;
}

.rounded-full {
  border-radius: 50% !important;
}

/* Flexbox Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.gap-1 {
  gap: 4px !important;
}

.gap-2 {
  gap: 8px !important;
}

.gap-3 {
  gap: 12px !important;
}

.gap-4 {
  gap: 16px !important;
}

/* Table Column Width Utilities */
.th-checkbox {
  width: 40px !important;
}

.th-sm {
  width: 80px !important;
}

.th-md {
  width: 120px !important;
}

.th-lg {
  width: 160px !important;
}

.th-xl {
  width: 200px !important;
}

/* ===== Component Modifier Classes ===== */

/* Auth Logo Variants */
.auth-logo.success {
  background: var(--success);
}

.auth-logo.warning {
  background: var(--warning);
}

.auth-logo.danger {
  background: var(--danger);
}

.auth-logo.info {
  background: var(--info);
}

/* Card Body Variants */
.card-body.no-padding {
  padding: 0;
}

/* Form Select Width Variants */
.form-select.w-auto {
  width: auto;
}

.form-input.w-auto {
  width: auto;
}

/* Risk Indicator Dots */
.risk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.risk-dot.success {
  background: var(--success);
}

.risk-dot.warning {
  background: var(--warning);
}

.risk-dot.danger {
  background: var(--danger);
}

/* Code Block Styles */
.code-block {
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: var(--border-radius);
  font-size: 13px;
}

.code-sm {
  font-size: 12px;
}

/* Footer Copyright */
.footer-copyright {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Nav Badge (sidebar) */
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Section Subheading */
.section-subheading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Detail Section Spacing */
.detail-section.mt-large {
  margin-top: 1.5rem;
}

/* Settings Subtitle Spacing */
.settings-subtitle.mt-large {
  margin-top: 2rem;
}

/* Mobile Menu Toggle (hidden by default on desktop) */
.menu-toggle-mobile {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle-mobile {
    display: flex;
  }
}

/* ===== Enhanced Admin Navigation ===== */
/* 다른 사이드바 섹션과 동일한 스타일 유지 */

/* ===== Toggle Switch (Complete System) ===== */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.3s ease;
  border-radius: 26px;
}

.toggle-switch .toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--bg-card);
  transition: 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--primary);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px) translateY(-50%);
  /* 48px - 20px - 4px - 4px = 20px 이동으로 양쪽 4px 여백 */
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: none;
  outline: none;
}

.toggle-switch input:focus {
  outline: none;
}

.toggle-switch .toggle-slider {
  outline: none;
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Quiz Settings Row ===== */
.quiz-settings-row {
  gap: 40px !important;
  align-items: end;
}

.quiz-settings-row .form-group {
  display: flex;
  flex-direction: column;
}

.quiz-settings-row .form-input {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.quiz-settings-row .input-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
}

.quiz-settings-row .input-group .form-input {
  height: 32px;
  flex: none;
  border-radius: 0 !important;
}

/* Number input wrapper with custom buttons */
.number-input-wrapper {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
}

.number-input-wrapper .form-input {
  width: 50px !important;
  border-radius: 0 !important;
  border-left: none;
  border-right: none;
  -moz-appearance: textfield;
}

.number-input-wrapper .form-input::-webkit-outer-spin-button,
.number-input-wrapper .form-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-btn {
  width: 28px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  padding: 0;
  line-height: 1;
}

.number-btn:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.number-btn:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.number-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.number-btn:active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.quiz-settings-row .input-group-addon {
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  padding-bottom: 2px;
}

/* Toggle Row (toggle + label inline) */
.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}

.toggle-row .toggle-text {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Small Toggle Switch (fits 32px row) */
.toggle-switch.toggle-sm {
  width: 44px;
  height: 24px;
}

.toggle-switch.toggle-sm .toggle-slider:before {
  height: 18px;
  width: 18px;
  left: 3px;
}

.toggle-switch.toggle-sm input:checked + .toggle-slider:before {
  transform: translateX(20px) translateY(-50%);
}

.toggle-switch.toggle-xs {
  width: 34px;
  height: 18px;
}

.toggle-switch.toggle-xs .toggle-slider:before {
  height: 12px;
  width: 12px;
  left: 3px;
  box-shadow: none;
}

.toggle-switch.toggle-xs input:checked + .toggle-slider:before {
  transform: translateX(16px) translateY(-50%);
}

/* ===== Toggle Input Box (Toggle inside input-like container) ===== */
.toggle-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.toggle-input-box:hover {
  border-color: var(--primary-light);
}

.toggle-input-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.toggle-input-box .toggle-switch {
  width: 40px;
  height: 22px;
}

.toggle-input-box .toggle-switch .toggle-slider:before {
  height: 16px;
  width: 16px;
  left: 3px;
}

.toggle-input-box .toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(18px) translateY(-50%);
}

/* ===== Enhanced Button System ===== */
/* Base Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Button Variants */
.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--border-color);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
}

.btn-outline-primary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--primary);
  color: #ffffff;
}

.btn-danger {
  background: var(--danger);
  color: #ffffff;
  border: 1px solid var(--danger);
}

.btn-danger:hover:not(:disabled) {
  background: #9c3a3a;
  border-color: #9c3a3a;
}

.btn-outline-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.btn-outline-danger:hover:not(:disabled) {
  background: var(--danger);
  color: #ffffff;
}

/* outline + danger 조합 = 아웃라인 데인저. (.btn-danger 가 뒤에서 솔리드로 덮어써 한 쌍의 버튼이 어긋나던 것 교정) */
.btn-outline.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-outline.btn-danger:hover:not(:disabled) {
  background: var(--danger);
  color: #ffffff;
}

.btn-success {
  background: var(--success);
  color: #ffffff;
  border: 1px solid var(--success);
}

.btn-success:hover:not(:disabled) {
  background: #2f7a55;
  border-color: #2f7a55;
}

.btn-outline-success {
  background: transparent;
  color: var(--success);
  border: 1px solid var(--success);
}

.btn-outline-success:hover:not(:disabled) {
  background: var(--success);
  color: #ffffff;
}

.btn-warning {
  background: var(--warning);
  color: #ffffff;
  border: 1px solid var(--warning);
}

.btn-warning:hover:not(:disabled) {
  background: #a8721e;
  border-color: #a8721e;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-link {
  background: transparent;
  color: var(--primary);
  border: none;
  padding: 0;
}

.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

/* Button Sizes */
.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-xs svg {
  width: 14px;
  height: 14px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
}

.btn-lg svg {
  width: 18px;
  height: 18px;
}

/* Icon Button */
.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn-icon.btn-xs {
  width: 28px;
  height: 28px;
}

.btn-icon.btn-lg {
  width: 44px;
  height: 44px;
}

/* Button with Badge */
.btn .btn-badge {
  background: var(--danger);
  color: #ffffff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}

/* ===== Enhanced Input Group ===== */
.input-group {
  display: flex;
  align-items: stretch;
}

/* Input group in form-row */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.form-row .input-group {
  flex: 1;
  min-width: 150px;
}

.form-row .form-group {
  flex: 1;
  min-width: 150px;
  margin-bottom: 0;
}

/* ===== Enhanced Header Styles ===== */
.header {
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-title h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.header-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 400;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Page Header ===== */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header-title h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.page-header-title p {
  color: var(--text-secondary);
  font-size: 14px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ===== Enhanced Card Spacing ===== */
.card + .card {
  margin-top: 24px;
}

/* Grid 내부 카드는 margin-top 제외 (gap으로 처리) */
.grid-2 > .card + .card,
.grid-3 > .card + .card {
  margin-top: 0;
}

.card-header {
  padding: 12px 20px;
  min-height: 56px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.card-header .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.card-header .card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card header controls - unified height */
.card-header .form-select,
.card-header .btn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
}

.card-header .btn-sm {
  height: 28px;
  font-size: 12px;
}

.card-body {
  padding: 20px;
}

.card-body.p-0,
.card-body.no-padding {
  padding: 0;
}

/* Card body with chart - consistent padding */
.card-body .chart-wrapper {
  padding: 16px;
  height: 200px;
  min-height: 180px;
  position: relative;
}

@media (max-width: 768px) {
  .card-body .chart-wrapper {
    height: 220px;
  }
}

/* Card spacing within approval list */
.approval-list .card,
.approval-list .approval-card {
  margin-bottom: 16px;
}

.approval-list .card:last-child,
.approval-list .approval-card:last-child {
  margin-bottom: 0;
}

/* Tab content card spacing */
.tab-content .card + .card {
  margin-top: 24px;
}

/* ===== Settings Row Enhancement ===== */
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 24px;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-vertical {
  display: block !important;
}

.settings-row-vertical > .settings-row-label {
  flex: unset;
  width: 100%;
  margin-bottom: 12px;
}

.settings-row-label {
  flex: 0 0 280px;
}

.settings-row-label .form-label {
  margin-bottom: 4px;
}

.settings-row-label .form-hint {
  margin-top: 0;
}

.settings-row-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-row-content .form-input,
.settings-row-content .form-select {
  max-width: 300px;
}

/* 입력 필드 크기 변형 클래스 */
.settings-row-content .form-input-sm,
.settings-row-content .form-select-sm {
  max-width: 100px;
}

.settings-row-content .form-input-md,
.settings-row-content .form-select-md {
  max-width: 200px;
}

.settings-row-content .form-input-lg,
.settings-row-content .form-select-lg {
  max-width: 400px;
}

/* ===== Modal Enhancement (consolidated into main modal section ~line 1161) ===== */
/* Note: Additional modal-full body height calculation */
.modal-content.modal-full .modal-body {
  max-height: calc(95vh - 140px);
  height: calc(95vh - 140px);
}

/* modal-xl 본문 높이 (flex 확장용) */
.modal-content.modal-xl .modal-body {
  max-height: calc(90vh - 140px);
  height: calc(90vh - 140px);
}

/* 미리보기 모달 본문 높이 (콘텐츠/레이아웃 미리보기용) */
/* CSS 우선순위를 높이기 위해 더 구체적인 셀렉터 사용 */
/* 미리보기 모달 body - 전체 높이를 채우도록 flex 레이아웃 */
.modal-content.modal-xl .modal-body.preview-modal-body {
  padding: 0;
  max-height: calc(90vh - 180px);
  height: calc(90vh - 180px);
  display: flex;
  flex-direction: column;
}

/* 미리보기 iframe wrapper - 남은 공간을 모두 채움 */
.preview-modal-body .preview-iframe-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 미리보기 iframe - wrapper의 전체 높이를 사용 */
.preview-modal-body .preview-iframe-wrapper iframe,
.preview-modal-body .preview-iframe-wrapper .preview-iframe {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
}

/* 에디터 모달 - 폼과 에디터 영역 유연하게 확장 */
/* 이메일 템플릿, 교육형 콘텐츠, 퀴즈형 레이아웃, 경각심형 시나리오, 입력 양식 편집 모달 공통 적용 */
#editorModal .modal-body,
#contentEditorModal .modal-body,
#layoutEditorModal .modal-body,
#scenarioEditorModal .modal-body,
#inputFormEditorModal .modal-body,
#landingEditorModal .modal-body {
  display: flex;
  flex-direction: column;
}

#editorModal .modal-body form,
#contentEditorModal .modal-body form,
#layoutEditorModal .modal-body form,
#scenarioEditorModal .modal-body form,
#inputFormEditorModal .modal-body form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#editorModal .modal-body form > .grid-2,
#contentEditorModal .modal-body form > .grid-2,
#layoutEditorModal .modal-body form > .grid-2,
#scenarioEditorModal .modal-body form > .grid-2,
#inputFormEditorModal .modal-body form > .grid-3,
#inputFormEditorModal .modal-body form > .grid-4 {
  flex-shrink: 0;
}

/* 레이아웃 에디터 모달의 상단 그리드 (form 없이 직접 자식) */
#layoutEditorModal .modal-body > .grid-3 {
  flex-shrink: 0;
}

/* 레이아웃/시나리오/입력양식/이메일 템플릿 편집 모달 - grid 레이아웃 유지 (좌우 분할) */
#layoutEditorModal .scenario-code-editor-container,
#noticeLayoutEditorModal .scenario-code-editor-container,
#scenarioEditorModal .scenario-code-editor-container,
#inputFormEditorModal .scenario-code-editor-container,
#editorModal .scenario-code-editor-container {
  /* grid 레이아웃 유지 (좌우 분할) */
  flex: 1;
  min-height: 350px;
  height: auto;
}

/* 교육 콘텐츠 편집 모달 - flex 레이아웃 */
#contentEditorModal .scenario-code-editor-container {
  display: flex;
  flex: 1;
  min-height: 350px;
  height: auto;
}

#editorModal .scenario-variables-section,
#editorModal .attachment-section,
#contentEditorModal .scenario-variables-section,
#contentEditorModal .attachment-section,
#layoutEditorModal .scenario-variables-section,
#layoutEditorModal .attachment-section,
#noticeLayoutEditorModal .scenario-variables-section,
#noticeLayoutEditorModal .attachment-section,
#scenarioEditorModal .scenario-variables-section,
#scenarioEditorModal .attachment-section {
  flex-shrink: 0;
}

/* 입력 양식 편집 모달 - 폼 필드 목록과 미리보기 영역 확장 */
#inputFormEditorModal .scenario-code-editor-pane,
#inputFormEditorModal .scenario-preview-pane {
  display: flex;
  flex-direction: column;
}

#inputFormEditorModal .input-form-fields-list,
#inputFormEditorModal .input-form-preview-container {
  flex: 1;
  min-height: 300px;
  overflow-y: auto;
}

/* 미리보기 영역도 에디터와 함께 확장되도록 */
#editorModal .scenario-preview-frame-container,
#contentEditorModal .scenario-preview-frame-container,
#layoutEditorModal .scenario-preview-frame-container,
#noticeLayoutEditorModal .scenario-preview-frame-container,
#scenarioEditorModal .scenario-preview-frame-container {
  display: flex;
  flex-direction: column;
}

#editorModal .scenario-preview-frame-wrapper,
#contentEditorModal .scenario-preview-frame-wrapper,
#layoutEditorModal .scenario-preview-frame-wrapper,
#noticeLayoutEditorModal .scenario-preview-frame-wrapper,
#scenarioEditorModal .scenario-preview-frame-wrapper {
  flex: 1;
  min-height: 0;
}

#editorModal .scenario-preview-frame-wrapper iframe,
#contentEditorModal .scenario-preview-frame-wrapper iframe,
#layoutEditorModal .scenario-preview-frame-wrapper iframe,
#noticeLayoutEditorModal .scenario-preview-frame-wrapper iframe,
#scenarioEditorModal .scenario-preview-frame-wrapper iframe {
  height: 100%;
  min-height: 350px;
}

/* 에디터 모달 좁은 화면 대응 (이메일/교육/퀴즈/경각심/입력양식) */
@media (max-width: 1024px) {
  #editorModal .scenario-code-editor-container,
  #contentEditorModal .scenario-code-editor-container,
  #layoutEditorModal .scenario-code-editor-container,
  #noticeLayoutEditorModal .scenario-code-editor-container,
  #scenarioEditorModal .scenario-code-editor-container,
  #inputFormEditorModal .scenario-code-editor-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  #editorModal .scenario-code-editor-pane,
  #editorModal .scenario-preview-pane,
  #contentEditorModal .scenario-code-editor-pane,
  #contentEditorModal .scenario-preview-pane,
  #layoutEditorModal .scenario-code-editor-pane,
  #layoutEditorModal .scenario-preview-pane,
  #noticeLayoutEditorModal .scenario-code-editor-pane,
  #noticeLayoutEditorModal .scenario-preview-pane,
  #scenarioEditorModal .scenario-code-editor-pane,
  #scenarioEditorModal .scenario-preview-pane,
  #inputFormEditorModal .scenario-code-editor-pane,
  #inputFormEditorModal .scenario-preview-pane {
    width: 100% !important;
    flex-shrink: 0;
  }

  #editorModal .scenario-preview-frame-wrapper iframe,
  #contentEditorModal .scenario-preview-frame-wrapper iframe,
  #layoutEditorModal .scenario-preview-frame-wrapper iframe,
  #noticeLayoutEditorModal .scenario-preview-frame-wrapper iframe,
  #scenarioEditorModal .scenario-preview-frame-wrapper iframe {
    min-height: 300px;
  }

  #inputFormEditorModal .input-form-fields-list,
  #inputFormEditorModal .input-form-preview-container {
    min-height: 250px;
  }
}

/* ===== Tab System Enhancement ===== */
.tabs,
.tab-buttons {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
}

.tab-btn {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* 에러 로그 탭(텍스트 버튼형) — 활성 탭을 또렷하게: primary 색 + 굵게 (밑줄은 인라인) */
.error-logs-tab { color: var(--text-secondary); }
.error-logs-tab.active { color: var(--primary); font-weight: 600; }
.error-logs-tab:hover { color: var(--text-primary); }

.tab-badge {
  margin-left: 8px;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.tab-count {
  margin-left: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  transition: all var(--transition-fast);
}

.tab-btn.active .tab-count {
  background: rgba(74, 124, 145, 0.15);
  color: var(--primary);
}

.tab-btn svg {
  margin-right: 6px;
  vertical-align: -2px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ===== Search Input ===== */
.search-input {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-input .form-input {
  padding-left: 40px;
}

/* ===== Form Static Text ===== */
.form-static {
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  font-size: 14px;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* ===== Detail Item Enhancement ===== */
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.detail-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ===== Activity Item Enhancement ===== */
.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.activity-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }

  .header-title h1 {
    font-size: 18px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-row .input-group,
  .form-row .form-group {
    min-width: 100%;
  }

  .settings-row {
    flex-direction: column;
    gap: 12px;
  }

  .settings-row-label {
    flex: none;
    width: 100%;
  }

  .settings-row-content {
    width: 100%;
  }

  .settings-row-content .form-input,
  .settings-row-content .form-select {
    max-width: 100%;
  }

  .btn-group {
    flex-wrap: wrap;
  }
}

/* ===== Toast Notifications ===== */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-message {
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

.toast-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.toast-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.toast-success {
  border-left: 4px solid var(--success);
}

.toast-success .toast-message::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 600;
}

.toast-error {
  border-left: 4px solid var(--danger);
}

.toast-error .toast-message::before {
  content: "✕ ";
  color: var(--danger);
  font-weight: 600;
}

.toast-warning {
  border-left: 4px solid var(--warning);
}

.toast-warning .toast-message::before {
  content: "⚠ ";
  color: var(--warning);
  font-weight: 600;
}

.toast-info {
  border-left: 4px solid var(--primary);
}

.toast-info .toast-message::before {
  content: "ℹ ";
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .toast-container {
    top: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* ===== Enhanced Filter Layout ===== */
.filter-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}

.filter-bar > * {
  flex-shrink: 0;
}

.filter-bar .search-box {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

.filter-bar .form-select {
  min-width: 130px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

.filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-range span {
  color: var(--text-muted);
}

.date-range .form-input {
  width: auto;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-box .form-input {
  padding-left: 40px;
  min-width: 200px;
}

/* Admin User Filter Row */
.card-header .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.card-header .filter-row .form-select {
  min-width: 140px;
}

.card-header .filter-row .search-box .form-input {
  min-width: 180px;
}

@media (max-width: 1024px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    min-width: 100%;
  }

  .filter-actions {
    flex-direction: row;
    width: 100%;
  }

  .filter-actions .btn {
    flex: 1;
  }

  .date-range {
    flex-wrap: wrap;
  }

  .date-range .form-input {
    flex: 1;
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px;
    gap: 10px;
  }

  .filter-bar .search-box {
    max-width: none;
    width: 100%;
  }

  .filter-bar .search-box .form-input {
    width: 100%;
  }

  .filter-bar .form-select {
    width: 100%;
  }

  .filter-bar .date-range {
    width: 100%;
  }

  .filter-bar .date-range .form-input {
    flex: 1;
  }

  .card-header .filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  .card-header .filter-row .form-select,
  .card-header .filter-row .search-box,
  .card-header .filter-row .search-box .form-input {
    min-width: 100%;
    width: 100%;
  }
}

/* ===== Global Page Animations ===== */

/* Page header animation */
.page-header {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.page-header.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Stat cards animation */
.stat-card,
.summary-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stat-card.animated,
.summary-card.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Card animation */
.card {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.card.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Table row animation */
.table tbody tr,
.data-table tbody tr {
  opacity: 0;
  transform: translateX(-10px);
  /* 진입 stagger 는 opacity/transform 에만. background 를 빼서 hover 하이라이트가
     행마다 누적된 inline transition-delay(index*0.03~0.05s)의 영향을 받지 않고 즉시 반응하도록 함. */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.table tbody tr.animated,
.data-table tbody tr.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Filter bar animation */
.filter-bar,
.page-filters {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.filter-bar.animated,
.page-filters.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Training/Campaign card animation */
.training-card,
.campaign-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.training-card.animated,
.campaign-card.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Template card - 기본적으로 보이도록 설정 (깜빡임 방지) */
.template-card {
  opacity: 1;
  transform: scale(1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Info list animation - 특정 컨테이너 내에서만 애니메이션 적용 */
.animate-items .info-item {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.animate-items .info-item.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Settings section animation */
.settings-section,
.detail-section {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.settings-section.animated,
.detail-section.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Modal animation enhancement */
.modal.active .modal-content {
  animation: modalSlideIn 0.3s ease forwards;
}

/* Modal 내부 요소는 애니메이션 없이 바로 표시 */
.modal .detail-section,
.modal .info-item,
.modal .usage-item,
.modal .template-card {
  opacity: 1;
  transform: none;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Chart container animation */
.chart-container,
.chart-container-sm {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.chart-container.animated,
.chart-container-sm.animated {
  opacity: 1;
}

/* Pagination animation */
.pagination {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pagination.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Bulk actions animation */
.bulk-actions {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-header,
  .stat-card,
  .summary-card,
  .card,
  .table tbody tr,
  .data-table tbody tr,
  .filter-bar,
  .page-filters,
  .training-card,
  .campaign-card,
  .template-card,
  .info-item,
  .settings-section,
  .detail-section,
  .chart-container,
  .chart-container-sm,
  .pagination {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .modal.active .modal-content {
    animation: none;
  }
}

/* ===== Write Access Required Elements ===== */
/* 기본적으로 액션 버튼 숨김 - 권한 확인 후 표시 (깜빡임 방지) */
/* Default: hidden, Show only for users with write access */

/* Page header action buttons - hidden by default */
.page-header-actions.auth-required {
  display: none !important;
}

/* Bulk action bar - hidden by default */
#bulkActions.auth-required {
  display: none !important;
}

/* Generic auth-required class - hidden by default */
.auth-required {
  display: none !important;
}

/* Show elements when user has write access */
body.has-write-access .page-header-actions.auth-required {
  display: flex !important;
}

body.has-write-access #bulkActions.auth-required {
  display: flex !important;
}

body.has-write-access .auth-required {
  display: initial !important;
}

body.has-write-access button.auth-required,
body.has-write-access a.auth-required {
  display: inline-flex !important;
}

/* Card action buttons - higher specificity for template cards */
body.has-write-access .template-card-actions button.auth-required,
body.has-write-access .unified-card-actions button.auth-required,
body.has-write-access .card-actions button.auth-required,
body.has-write-access .education-card-actions button.auth-required {
  display: inline-flex !important;
}