/* ============================================================
   5office (파이브오피스) 글로벌 스타일시트
   ============================================================ */

/* 600(Semibold) 필수 — 미포함 시 브라우저 합성 볼드로 작은 한글이 뭉개진다. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

/* ── CSS 변수 ────────────────────────────────────────────── */
:root {
  --primary:        #4F46E5;
  --primary-dark:   #3730A3;
  --primary-light:  #EEF2FF;
  --success:        #10B981;
  --warning:        #F59E0B;
  /* 경고색 '글자용' — --warning(#F59E0B)은 흰 배경 대비가 약 2.1:1 이라 본문/버튼 글자에
     쓰면 읽기 어렵다. 글자·아이콘에는 이 진한 앰버를 쓴다(대비 약 4.6:1, WCAG AA). */
  --warning-text:   #B45309;
  --danger:         #EF4444;
  --info:           #3B82F6;
  --highlight:      #FEF08A;  /* 형광펜(단어 바탕 강조) */

  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;
  --border:         #E5E7EB;
  --bg-base:        #F9FAFB;
  --bg-card:        #FFFFFF;
  --bg-sidebar:     #1E1B4B;
  --bg-sidebar-hover: #312E81;

  --font:           'Noto Sans KR', sans-serif;
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --shadow-card:    none;  /* 콘텐츠 카드는 플랫(테두리+라운드만). 오버레이는 --shadow-md 유지 */
  --shadow-md:      0 4px 20px rgba(0,0,0,.12);

  --sidebar-width:  240px;
  --header-height:  60px;
  --tabbar-height:  62px;
}

/* ── 리셋 & 기본 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

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

/* ── 버튼 ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all 150ms ease;
  padding: 9px 18px;
  /* 아이콘+텍스트 수직 중앙 정렬 통일 (Bootstrap Icons baseline 어긋남 방지).
     아이콘 간격은 기존 me-* 유틸 유지를 위해 gap 미지정. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  /* 버튼 글자는 항상 한 줄 — 좁은 칸/컨테이너에서도 '보관 해\n제'처럼 줄바꿈 금지 */
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.btn-primary:disabled {
  background: #A5B4FC;
  border-color: #A5B4FC;
}
.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  background: var(--primary);
  color: #fff;
}
/* 경고(주황) 아웃라인 버튼 — Bootstrap 기본 노랑(#ffc107)은 흰 배경에서 대비 약 1.6:1 로
   글자가 거의 안 보인다. 디자인 토큰(--warning)으로 테두리를 맞추고, 글자는 대비를 확보한
   진한 앰버(--warning-text)를 쓴다(흰 배경 대비 약 4.6:1 — WCAG AA 충족). */
.btn-outline-warning {
  color: var(--warning-text);
  border-color: var(--warning);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
  background: var(--warning);
  border-color: var(--warning);
  color: #fff;
}
.btn-outline-warning:active,
.btn-check:checked + .btn-outline-warning {
  background: var(--warning-text);
  border-color: var(--warning-text);
  color: #fff;
}
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* ── 폼 ──────────────────────────────────────────────────── */
.form-control, .form-select {
  font-family: var(--font);
  font-size: 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  outline: none;
}
/* sm 변형 — 위 .form-control 패딩(10px)이 -sm까지 덮어써 버튼(.btn-sm)보다 높아지므로
   .btn-sm(padding 6px 12px / 12px)와 같은 크기로 맞춰 필터바 높이를 정렬한다. */
.form-control-sm, .form-select-sm {
  padding: 6px 12px;
  font-size: 12px;
}
.form-control.is-invalid {
  border-color: var(--danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.form-label .required { color: var(--danger); margin-left: 2px; }
.form-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.invalid-feedback { font-size: 12px; color: var(--danger); }

/* ── 카드 ────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  font-weight: 600;
  font-size: 15px;
}
.card-body { padding: 20px; }

/* ── 배지 ────────────────────────────────────────────────── */
.badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 20px;
}

/* ── 알림 토스트 ──────────────────────────────────────────── */
.toast-container { z-index: 1090; }
.toast {
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-md);
  font-size: 13px;
}

/* ============================================================
   인증 화면 (로그인 / 가입)
   ============================================================ */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(135deg, #EEF2FF 0%, #F9FAFB 60%, #E0E7FF 100%);
}

/* 좌측 브랜드 패널 (데스크탑만) */
.auth-brand-panel {
  width: 420px;
  min-height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.auth-brand-panel::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.auth-brand-panel::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,.03);
  border-radius: 50%;
}
.auth-brand-logo {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.auth-brand-logo span { color: #818CF8; }
.auth-brand-tagline {
  color: #A5B4FC;
  font-size: 14px;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 48px;
}
.auth-brand-features { width: 100%; }
.auth-brand-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #C7D2FE;
  font-size: 13px;
}
.auth-brand-feature:last-child { border-bottom: none; }
.auth-brand-feature-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* 가입 흐름 브랜드 패널(join/join_complete/join_unavailable/password_change_first) —
   어두운 패널 위 텍스트가 묻히지 않도록 밝은 색 지정(기존 로그인 패널과 동일 톤). */
.auth-brand-inner {
  width: 100%; max-width: 320px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.auth-logo {
  font-size: 30px; font-weight: 700; letter-spacing: -1px; margin-bottom: 14px;
}
.auth-logo-icon { color: #818CF8; }   /* 브랜드 포인트(인디고) */
.auth-logo-text { color: #fff; }
.auth-brand-title {
  color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  margin: 4px 0 10px; text-align: center;
}
.auth-brand-desc {
  color: #A5B4FC; font-size: 14px; line-height: 1.7; text-align: center; margin-bottom: 28px;
}
.auth-features {
  list-style: none; padding: 0; margin: 0; width: 100%;
}
.auth-features li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  color: #C7D2FE; font-size: 13px; text-align: left;
}
.auth-features li:last-child { border-bottom: none; }
.auth-features li i { color: #A5B4FC; font-size: 15px; flex-shrink: 0; }

/* 우측 폼 영역 */
.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.auth-form-box,
.auth-form-inner {
  width: 100%;
  max-width: 420px;
}
/* 가입 폼은 입력 항목이 많아 살짝 넉넉하게(그래도 과도하게 넓지 않게) */
.auth-form-inner { max-width: 520px; }

/* 인증(로그인·가입) 화면 입력 크기 — "폼이 작아 불편하다"는 사용자 의견 반영.
   전역 .form-control(14px/43px)은 목록·필터 등 화면 전체에 쓰이므로 건드리지 않고,
   입력에 집중하는 인증 화면에서만 키운다.
     · 16px  : 이보다 작으면 iOS Safari 가 입력 포커스 시 화면을 자동 확대해 버린다.
     · 48px  : 터치 기준(44px)보다 넉넉한 높이. 아이콘 칸·버튼도 함께 맞춰진다. */
.auth-wrapper .form-control,
.auth-wrapper .form-select {
  font-size: 16px;
  padding: 12px 14px;
  min-height: 48px;
}
.auth-wrapper .input-group-text {
  font-size: 16px;
  padding: 12px 14px;
}
.auth-wrapper .form-label { font-size: 14px; }
/* 동의 체크박스 — 기본 14px 는 누르기 어렵다(라벨도 함께 눌리지만 표적 자체를 키운다).
   Bootstrap 은 .form-check 의 padding-left 와 input 의 음수 margin-left 가 짝이므로 함께 맞춘다. */
.auth-wrapper .form-check { padding-left: 1.9em; }
.auth-wrapper .form-check-input { width: 20px; height: 20px; margin-left: -1.9em; margin-top: .1em; }
.auth-wrapper .form-check-label { font-size: 14px; }
.auth-form-box .auth-mobile-logo {
  display: none;
  text-align: center;
  margin-bottom: 32px;
}
.auth-mobile-logo .logo-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -1px;
}
.auth-mobile-logo .logo-text span { color: var(--text-secondary); }
.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.auth-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.6;
}
.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  padding: 36px;
}
.auth-divider {
  text-align: center;
  position: relative;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%; width: calc(50% - 24px);
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============================================================
   앱 레이아웃 (로그인 후)
   ============================================================ */

/* 사이드바 */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 역할 그룹별 사이드바 배경(시각적 권한 구분) —
   --bg-sidebar / --bg-sidebar-hover 를 같은 요소에서 덮어 하위(호버 등)까지 일괄 적용 */
/* 플랫폼 운영진(솔루션 관리·고객지원 콘솔) — 밝은 회색(라이트 슬레이트)
   배경만 밝게 바꾸면 흰색 계열 텍스트가 안 보이므로, 아래 블록에서
   사이드바 내부 글자·구분선·호버·활성 색을 어두운 톤으로 일괄 오버라이드한다. */
.sidebar.sidebar-platform,
.sidebar.sidebar-dark {            /* sidebar-dark 하위호환 별칭 */
  --bg-sidebar:       #ECEEF1;
  --bg-sidebar-hover: #E0E3E8;
  background: #ECEEF1;
  border-right: 1px solid #DADEE3;   /* 흰색 콘텐츠 영역과 경계 구분 */
}
/* 플랫폼(밝은 회색) 사이드바 — 내부 요소 어두운 톤 전환 */
.sidebar.sidebar-platform .sidebar-close { color: var(--text-secondary); }
/* 회사명/콘솔 박스 */
.sidebar.sidebar-platform .sidebar-tenant { background: rgba(0,0,0,.04); }
.sidebar.sidebar-platform .sidebar-tenant:hover { background: rgba(0,0,0,.07); }
.sidebar.sidebar-platform .sidebar-tenant.active { background: var(--primary-light); }
.sidebar.sidebar-platform .sidebar-tenant-icon { color: var(--primary); }
.sidebar.sidebar-platform .sidebar-tenant-name { color: var(--text-primary); }
/* 섹션 제목·그룹 소제목·그룹 헤더 */
.sidebar.sidebar-platform .sidebar-section-title { color: var(--text-secondary); border-top-color: rgba(0,0,0,.07); }
.sidebar.sidebar-platform .sidebar-subhead { color: rgba(17,24,39,.5); border-top-color: rgba(0,0,0,.07); }
.sidebar.sidebar-platform .sidebar-group-title { color: rgba(17,24,39,.5); }
/* 메뉴 링크 */
.sidebar.sidebar-platform .sidebar-link { color: #374151; }
.sidebar.sidebar-platform .sidebar-link:hover { background: rgba(0,0,0,.05); color: var(--text-primary); }
/* 활성 메뉴 — 인디고 알약(밝은 회색에서도 뚜렷이) */
.sidebar.sidebar-platform .sidebar-nav .sidebar-link.active,
.sidebar.sidebar-platform .sidebar-settings .sidebar-link.active {
  background: #E0E7FF;
  color: #4338CA;
}
.sidebar.sidebar-platform .sidebar-nav .sidebar-link.active:hover,
.sidebar.sidebar-platform .sidebar-settings .sidebar-link.active:hover {
  background: #C7D2FE;
  color: var(--primary-dark);
}
.sidebar.sidebar-platform .sidebar-item.active > .sidebar-link::before { background: var(--primary); }
/* 서브메뉴 */
.sidebar.sidebar-platform .sidebar-submenu { background: rgba(0,0,0,.03); }
.sidebar.sidebar-platform .sidebar-sublink { color: #4B5563; }
.sidebar.sidebar-platform .sidebar-sublink:hover { color: var(--text-primary); background: rgba(0,0,0,.04); }
.sidebar.sidebar-platform .sidebar-sublink.active { color: #4338CA; background: var(--primary-light); border-left-color: var(--primary); }
/* 업무그룹 스위처 */
.sidebar.sidebar-platform .wg-switcher-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.10); color: var(--text-primary); }
.sidebar.sidebar-platform .wg-switcher-btn:hover { background: rgba(0,0,0,.07); }
/* 설정·푸터 구분선 / 프로필 */
.sidebar.sidebar-platform .sidebar-settings { border-top-color: rgba(0,0,0,.08); }
.sidebar.sidebar-platform .sidebar-footer { border-top-color: rgba(0,0,0,.08); }
.sidebar.sidebar-platform .sidebar-profile-name { color: var(--text-primary); }
.sidebar.sidebar-platform .sidebar-profile-role { color: var(--text-secondary); }
/* 최고관리자·인사관리자 — 딥 네이비 슬레이트 (2026-07-18 사원용과 색 교환) */
.sidebar.sidebar-admin {
  --bg-sidebar:       #16263E;
  --bg-sidebar-hover: #25395A;
  background: #16263E;
}
/* 팀원관리자·일반사원 — 로열 인디고 (2026-07-18 관리자용과 색 교환) */
.sidebar.sidebar-staff {
  --bg-sidebar:       #2A2168;
  --bg-sidebar-hover: #3B309A;
  background: #2A2168;
}
.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.sidebar-logo-text span { color: #818CF8; }
.sidebar-company {
  font-size: 11px;
  color: #6366F1;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  color: #6366F1;
  padding: 16px 20px 6px;
  text-transform: uppercase;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: #C7D2FE;
  font-size: 13px;
  font-weight: 400;
  transition: all 150ms;
  cursor: pointer;
  position: relative;
  border-radius: 0;
  text-decoration: none;
}
.sidebar-item:hover {
  background: var(--bg-sidebar-hover);
  color: #fff;
}
.sidebar-item.active {
  background: rgba(99,102,241,.25);
  color: #fff;
  font-weight: 500;
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: #818CF8;
  border-radius: 0 3px 3px 0;
}
.sidebar-item-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 20px;
  min-width: 18px;
  text-align: center;
}
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user-avatar {
  width: 34px; height: 34px;
  background: #4338CA;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-name  { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role  { font-size: 11px; color: #818CF8; }

/* 메인 콘텐츠 */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 우하단 AI 도우미 FAB(56px+여백)와 페이지 하단 액션 버튼이 겹치지 않도록 안전 여백.
     box-sizing:border-box라 콘텐츠가 짧으면 빈 여백만 생기고 스크롤은 늘지 않는다. */
  padding-bottom: 88px;
}

/* 상단 헤더 */
.topbar {
  height: var(--header-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
  gap: 16px;
}
.topbar-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  padding: 4px;
  cursor: pointer;
}
.topbar-breadcrumb { flex: 1; }
.topbar-breadcrumb .breadcrumb { margin: 0; font-size: 13px; }
.topbar-breadcrumb .breadcrumb-item a { color: var(--text-secondary); }
.topbar-breadcrumb .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-icon-btn {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  position: relative;
  transition: background 150ms;
}
.topbar-icon-btn:hover { background: var(--bg-base); color: var(--text-primary); }
.topbar-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 페이지 콘텐츠 */
.page-content { padding: 24px; flex: 1; }

/* ── 동시 편집 알림 (본문 최상단 고정) ──────────────────────────
   '다른 분이 수정 중' 상태를 편집하는 내내 분명히 알린다.
   기존의 옅은 alert 배너는 눈에 잘 띄지 않아, 굵은 좌측 띠·아이콘·고정 배치로 강조한다. */
.edit-lock-notice {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid; border-left-width: 5px;
  border-radius: var(--radius-md);
  font-size: 13.5px; line-height: 1.5;
}
.edit-lock-notice .eln-icon { font-size: 20px; flex-shrink: 0; }
.edit-lock-notice .eln-body { flex: 1 1 260px; min-width: 0; }
.edit-lock-notice .eln-title { font-weight: 700; margin-bottom: 2px; }
.edit-lock-notice .eln-desc  { opacity: .85; }
/* 읽기 전용 — 저장이 막힌 상태라 가장 강하게(적색 계열) */
.edit-lock-notice[data-variant="readonly"] {
  background: #FEF2F2; border-color: var(--color-danger, #EF4444); color: #7F1D1D;
}
/* 주의 — 수정은 가능하지만 충돌 가능(황색 계열) */
.edit-lock-notice[data-variant="warn"] {
  background: #FFFBEB; border-color: var(--color-warning, #F59E0B); color: #78350F;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.page-title { font-size: 20px; font-weight: 700; margin: 0; color: var(--text-primary); }
.page-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 페이지 헤더 우측 액션 버튼 크기 전체 통일 —
   화면마다 btn/btn-sm이 섞여 크기가 제각각이던 것을, 헤더 액션 영역에서는 한 크기로 맞춘다.
   Bootstrap 5.3 버튼은 --bs-btn-* 변수로 크기가 정해지므로, 더 구체적인 이 선택자가
   .btn-sm 을 덮어써 전 화면에서 동일한 표준 크기로 렌더된다(템플릿 개별 수정 불필요).
   .page-actions 자체가 버튼인 경우(a.btn.page-actions)도 함께 처리.

   예외(탈출구): 특정 헤더 버튼만 자기 크기(btn-sm 등)를 유지해야 하면 .btn-keep-size 를
   붙인다 — :not(.btn-keep-size) 라 이 버튼은 통일 규칙에서 빠지고 btn-sm 등이 그대로 적용된다.
   즉 헤더 밖은 물론 헤더 안에서도 btn-sm 을 '명시적으로' 계속 쓸 수 있다(기본은 통일). */
.page-actions .btn:not(.btn-keep-size),
a.btn.page-actions:not(.btn-keep-size),
button.btn.page-actions:not(.btn-keep-size) {
  --bs-btn-padding-y: .45rem;
  --bs-btn-padding-x: .9rem;
  --bs-btn-font-size: .875rem;
  --bs-btn-border-radius: var(--radius-md);
}

/* 대시보드 피드(공지 등) 행 링크 — 행 전체 클릭, 호버 시 옅은 배경(그림자 없음) */
.dash-feed-row { transition: background 150ms; }
.dash-feed-row:hover { background: var(--bg-base); }
.dash-feed-row:last-child { border-bottom: 0 !important; }

/* 모바일·좁은 화면(<768px): 페이지 헤더의 '보조' 버튼은 아이콘만 표시해 공간을 절약한다.
   - 대상: 페이지 헤더 안의 버튼 중 아이콘(<i class="bi">)이 있고 primary(필수 CTA)가 아닌 것.
   - 필수 액션(.btn-primary)·아이콘 없는 텍스트 버튼은 그대로 텍스트 유지.
   - 라벨은 DOM에 남겨(font-size:0) 스크린리더에는 계속 읽히게 한다(접근성).
   - :has() 미지원 브라우저는 규칙이 무시되어 기존처럼 텍스트가 보인다(점진적 향상). */
@media (max-width: 767.98px) {
  .page-header .btn:not(.btn-primary):has(> i.bi) {
    font-size: 0;
    padding-left: 11px;
    padding-right: 11px;
  }
  .page-header .btn:not(.btn-primary):has(> i.bi) > i.bi {
    font-size: 1rem;
    margin: 0 !important;   /* me-1 등 아이콘-텍스트 간격 제거(아이콘만 가운데) */
  }
}

/* ── 페이지 이용 안내 패널 (공통) ─────────────────────────────
   헤더의 '이용 안내' 버튼(includes/_page_help_button.html)으로 토글되는 맥락형 도움말.
   플랫 표면 원칙: 테두리+라운드, 그림자 없음. 색상은 디자인 토큰만 사용(하드코딩 금지). */
.page-help-card {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-primary);
}
.page-help-title { font-weight: 600; margin-bottom: 8px; color: var(--primary-dark); }
.page-help-list { margin: 0; padding-left: 18px; line-height: 1.9; }
.page-help-list > li { margin-bottom: 2px; }
.page-help-list code {
  background: rgba(79, 70, 229, .10);   /* --primary 10% 틴트 */
  color: var(--primary-dark);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
/* 인라인 강조 — **굵게** / ==형광== (콘솔에서 입력, 화면 전용. AI에는 평문만 전달) */
.page-help-list strong { font-weight: 600; color: var(--text-primary); }
.page-help-mark {
  background: var(--highlight);          /* 형광펜 바탕 */
  color: inherit;
  padding: 0 3px;
  border-radius: var(--radius-sm);
}

/* ── 대시보드 위젯 ────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
/* 통계 카드 내부 — 큰 금액(8자리 이상)이 카드를 넘치지 않게 한다.
   flex 자식의 기본 min-width:auto 때문에 내용이 길면 줄어들지 못하고 넘치므로 min-width:0 필수. */
.stat-card > .d-flex { gap: 8px; }
.stat-card > .d-flex > div:first-child { min-width: 0; flex: 1 1 auto; }
.stat-card-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; margin-bottom: 6px; }
.stat-card-value {
  font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.1;
  overflow-wrap: anywhere;      /* 최후 수단: 넘치느니 줄바꿈(카드 밖 침범 방지) */
}
.stat-card-sub   { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat-card-icon  {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;               /* 아이콘이 찌그러지지 않게 */
}

/* 할 일 카드 */
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.todo-item:last-child { border-bottom: none; padding-bottom: 0; }
.todo-icon { font-size: 18px; flex-shrink: 0; }
.todo-text { flex: 1; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.todo-action { font-size: 12px; color: var(--primary); white-space: nowrap; }
.todo-action:hover { color: var(--primary-dark); }

/* ── 모바일 하단 탭바 ─────────────────────────────────────── */
.mobile-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--tabbar-height);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tabbar-inner {
  display: flex;
  height: 100%;
}
.mobile-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  position: relative;
  transition: color 150ms;
}
.mobile-tab-item.active { color: var(--primary); }
.mobile-tab-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 2px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
}
.mobile-tab-icon { font-size: 20px; }
.mobile-tab-badge {
  position: absolute;
  top: 8px; right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 20px;
  min-width: 16px;
  text-align: center;
}

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* 사이드바 오프캔버스로 전환 */
  .sidebar { transform: translateX(-100%); transition: transform 300ms ease; }
  .sidebar.show { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.2); }

  /* 메인 콘텐츠 전체 너비 — 하단 탭바 + FAB(모바일 bottom:78) 겹침 방지 안전 여백 */
  .main-wrapper { margin-left: 0; padding-bottom: calc(var(--tabbar-height) + 80px); }

  /* 상단 햄버거 표시 */
  .topbar-hamburger { display: flex; }

  /* 하단 탭바 표시 — flex 컨테이너여야 .tabbar-item(flex:1)이 가로로 균등 배치됨 */
  .mobile-tabbar { display: flex; }

  /* 인증 화면 브랜드 패널 숨김 */
  .auth-brand-panel { display: none; }
  .auth-form-box .auth-mobile-logo { display: block; }
  .auth-card { padding: 28px 24px; }
}

@media (max-width: 575.98px) {
  .page-content { padding: 16px; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-end; }
  .auth-form-panel { padding: 24px 16px; }
  /* 통계 카드(모바일) — 2열 배치라 카드 폭이 좁다(≈164px).
     아이콘(44px)이 폭을 차지해 인건비 같은 8자리 이상 금액이 넘치거나 두 줄로 깨졌다.
     → 모바일에서는 장식용 아이콘을 숨겨 숫자에 폭을 몰아준다(라벨이 이미 내용을 설명).
       측정: 아이콘 유지 시 가용 92px(2줄) / 숨김 시 134px(19px로 11자리도 한 줄). */
  .stat-card { padding: 14px; }
  .stat-card-icon  { display: none; }
  .stat-card-value { font-size: 19px; }
  .stat-card-label { font-size: 11.5px; margin-bottom: 4px; }
  .stat-card-sub   { font-size: 11px; }
}

/* ── 사이드바 상세 (layout.html 전용) ───────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 20px 11px;
  flex-shrink: 0;
}
.sidebar-brand-link { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.sidebar-brand-logo { height: 20px; width: auto; max-width: 100%; display: block; }
.sidebar-close { color: rgba(255,255,255,.6); padding: 4px; }

.sidebar-tenant {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 150ms;
}
.sidebar-tenant:hover { background: rgba(255,255,255,.12); }
.sidebar-tenant.active { background: rgba(99,102,241,.30); }
.sidebar-tenant-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; flex-shrink: 0; }
.sidebar-tenant-icon { font-size: 16px; color: #A5B4FC; flex-shrink: 0; }
.sidebar-tenant-name { font-size: 14px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-menu { list-style: none; margin: 0; padding: 6px 0; }
.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #818CF8;
  /* 그룹 위에 여백 + 구분선으로 섹션 경계를 뚜렷하게 */
  margin-top: 14px;
  padding: 14px 22px 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-transform: uppercase;
}
/* 첫 섹션 제목은 위 구분선/여백 제거 */
.sidebar-menu .sidebar-section-title:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 8px;
}
/* 새 사이드바 구조: li가 링크+서브메뉴를 세로로 감싸도록 block 강제
   (구버전 .sidebar-item flex 정의가 서브메뉴를 우측으로 밀어 깨지던 문제 수정) */
.sidebar-menu .sidebar-item {
  display: block;
  position: relative;
  padding: 0;
  margin-bottom: 1px;    /* 메뉴 위아래 간격 최소화 */
}
.sidebar-menu .sidebar-item:hover { background: transparent; }
/* li 단위 active 하이라이트/바 제거 — 강조는 .sidebar-link / .sidebar-sublink 에만 */
.sidebar-menu .sidebar-item.active { background: transparent; color: inherit; }
.sidebar-menu .sidebar-item.active::before { display: none; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px 11px 32px;   /* 좌측 들여쓰기 10px 추가 (22+10) */
  color: #C7D2FE;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
  transition: background 150ms, color 150ms;
  cursor: pointer;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-item.active > .sidebar-link {
  background: rgba(99,102,241,.25);
  color: #fff;
  font-weight: 500;
}
.sidebar-item.active > .sidebar-link::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: #818CF8;
  border-radius: 0 3px 3px 0;
}
/* 메뉴 아이콘 제거 - 메뉴명만 표시 (펼침 화살표는 유지) */
.sidebar-link > i.bi:not(.sidebar-arrow) { display: none; }
.sidebar-arrow { font-size: 11px !important; transition: transform 200ms; margin-left: auto; }
.sidebar-link[aria-expanded="true"] .sidebar-arrow { transform: rotate(180deg); }

.sidebar-submenu {
  list-style: none;
  margin: 0;
  padding: 2px 0 6px;
  background: rgba(0,0,0,.18);
}
.sidebar-sublink {
  display: block;
  padding: 8px 22px 8px 34px;
  color: #A5B4FC;
  font-size: 13px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 150ms, background 150ms, border-color 150ms;
}
.sidebar-sublink:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-sublink.active {
  color: #fff;
  background: rgba(99,102,241,.18);
  border-left-color: #818CF8;
  font-weight: 500;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-profile { display: flex; align-items: center; gap: 10px; }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sidebar-avatar-placeholder {
  width: 34px; height: 34px;
  background: #4338CA;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.sidebar-profile-info { flex: 1; overflow: hidden; }
.sidebar-profile-name { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-role { font-size: 11px; color: #818CF8; }

/* 사이드바 오버레이 */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms;
}
.sidebar-overlay.show { opacity: 1; visibility: visible; }

/* 모바일 사이드바 열기 */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform 300ms ease; z-index: 200; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.25); }
}

/* ── 탑바 상세 ──────────────────────────────────────────────── */
.topbar-toggle { color: var(--text-secondary); font-size: 22px; padding: 4px 8px; }
.topbar-breadcrumb { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar-action-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms;
  padding: 0;
}
.topbar-action-btn:hover { background: var(--bg-base); color: var(--text-primary); }
.topbar-badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 20px;
  min-width: 16px;
  text-align: center;
  display: none;
}
.topbar-badge:not(:empty):not([data-count="0"]) { display: block; }
.topbar-profile-btn { padding: 0; border: none; background: none; }
.topbar-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.topbar-avatar-placeholder {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff;
}

/* 모바일 하단 탭바 */
.mobile-tabbar {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 150;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: color 150ms;
}
.tabbar-item.active { color: var(--primary); }
.tabbar-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
}
.tabbar-item i { font-size: 20px; }

/* ── 스크롤바 커스텀 ──────────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

/* ── 유틸리티 ────────────────────────────────────────────── */
.text-primary-brand { color: var(--primary) !important; }
.bg-primary-light   { background: var(--primary-light) !important; }
.border-primary     { border-color: var(--primary) !important; }
.fw-500 { font-weight: 500; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-15  { font-size: 15px; }
.gap-8  { gap: 8px; }
.cursor-pointer { cursor: pointer; }

/* ============================================================
   UI 다듬기 (2026-06-17) - 빈 상태 / 마이크로 인터랙션 공통 스타일
   ============================================================ */

/* 빈 상태 컴포넌트 - 목록/카드가 비었을 때 일관된 안내 */
.empty-state {
  padding: 48px 20px;
  text-align: center;
}
.empty-state .empty-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light, #EEF2FF);
  color: var(--primary, #4F46E5);
  font-size: 32px;
}
.empty-state h5,
.empty-state h6 { color: var(--text-secondary, #6B7280); margin-bottom: 6px; }
.empty-state p  { color: var(--text-muted, #9CA3AF); font-size: 13px; margin-bottom: 16px; }

/* 카드 hover — 그림자 없이 테두리 강조로 클릭 가능 표시(플랫 디자인) */
.card.board-card,
.card.h-100 a.text-decoration-none { transition: border-color 150ms ease, transform 150ms ease; }
.card.board-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* ── Tom Select (검색 가능한 사원 선택) 인디고 테마 ───────────── */
.ts-wrapper { font-family: var(--font); }
.ts-control {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 38px;
  font-size: 14px;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.ts-wrapper.form-control-sm .ts-control,
.ts-wrapper.form-select-sm .ts-control { min-height: 31px; font-size: 13px; }
.ts-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);   /* 오버레이 — 그림자 허용 */
  font-size: 14px;
}
.ts-dropdown .option { padding: 8px 12px; }
.ts-dropdown .active { background: var(--primary-light); color: var(--primary-dark); }
.ts-dropdown .create:hover, .ts-dropdown .option:hover { background: var(--primary-light); }
/* 다중 선택 칩 — 인디고 톤 */
.ts-wrapper.multi .ts-control > .item {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid transparent;
  border-radius: 6px;
}
.ts-wrapper.multi .ts-control > .item .remove { border-left-color: rgba(79,70,229,.25); }
.ts-no-results { padding: 8px 12px; color: var(--text-secondary); font-size: 13px; }

/* ── Flatpickr 세련된 인디고 테마 (브랜드 톤·플랫·라운드 통일) ───── */
.flatpickr-calendar {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(17, 24, 39, .12), 0 2px 6px rgba(17, 24, 39, .06);
  border: 1px solid var(--border);
  font-family: var(--font);
  padding: 6px;
  width: 320px;
}
/* 달력 하단 액션 버튼(date-picker.js가 삽입) — 시간 포함 달력은 자동으로 안 닫힘 */
.fp-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.fp-close-btn, .fp-copy-btn {
  flex: 1 1 0;
  padding: 8px 6px;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
}
.fp-close-btn { color: #fff; background: var(--color-primary, #4F46E5); }
.fp-close-btn:hover { background: var(--color-primary-dark, #3730A3); }
.fp-copy-btn { color: var(--color-primary, #4F46E5); background: var(--color-primary-light, #EEF2FF); }
.fp-copy-btn:hover { background: #E0E7FF; }
/* 입력칸과 연결되는 삼각형 포인터 제거 — 깔끔한 카드형 */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }

/* 헤더(월/연도 + 이동 화살표) */
.flatpickr-months { padding: 4px 2px 8px; align-items: center; }
.flatpickr-months .flatpickr-month {
  color: var(--text-primary);
  height: 38px;
}
.flatpickr-current-month {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; left: 0; padding-top: 4px;
  font-size: 15px; font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 600; color: var(--text-primary); }
.flatpickr-current-month input.cur-year { font-weight: 600; color: var(--text-primary); }
.flatpickr-monthDropdown-months:hover { background: var(--primary-light); }
/* 이전/다음 달 화살표 — 호버 시 인디고 원형 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  border-radius: 8px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  top: 4px;
  transition: background 120ms ease;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: var(--primary-light); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 13px; }

/* 요일 라벨 */
.flatpickr-weekdays { margin-top: 2px; }
span.flatpickr-weekday {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* 날짜 셀 — 둥근 알약, 부드러운 호버 */
.flatpickr-day {
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  max-width: 39px; height: 38px; line-height: 37px;
  transition: background 120ms ease, color 120ms ease;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: transparent;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-muted, #9CA3AF); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: #D1D5DB; background: transparent; }

/* 오늘 — 인디고 테두리 링(채우지 않음) */
.flatpickr-day.today {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.flatpickr-day.today:hover { background: var(--primary-light); color: var(--primary-dark); }

/* 선택일 — 인디고 채움 + 가독성 */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
/* 범위 선택 중간 — 연한 인디고 띠 */
.flatpickr-day.inRange {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: var(--primary-dark);
  box-shadow: -5px 0 0 var(--primary-light), 5px 0 0 var(--primary-light);
}

/* 시간 선택 */
.flatpickr-time { border-top: 1px solid var(--border); margin-top: 4px; }
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm { color: var(--text-primary); font-weight: 500; }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--primary-light); }

/* ── 월/연도/시간 선택 사용성 개선 ──────────────────────────── */
/* 연도·시간 숫자 입력: 작은 박스처럼 또렷하게, 호버 시 인디고 */
.flatpickr-current-month .numInputWrapper,
.flatpickr-time .numInputWrapper {
  border-radius: 8px;
  transition: background 120ms ease;
}
.flatpickr-current-month .numInputWrapper:hover,
.flatpickr-time .numInputWrapper:hover { background: var(--primary-light); }
.flatpickr-current-month input.cur-year,
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* 숫자 증감(▲▼) — 항상 보이게 + 넓은 히트영역 + 인디고 호버 */
.numInputWrapper span {
  opacity: 1;
  width: 18px;
  border-left: 1px solid var(--border);
}
.numInputWrapper span:hover { background: rgba(79, 70, 229, .12); }
.numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-secondary); }
.numInputWrapper span.arrowDown:after { border-top-color: var(--text-secondary); }
.numInputWrapper:hover span.arrowUp:after { border-bottom-color: var(--primary); }
.numInputWrapper:hover span.arrowDown:after { border-top-color: var(--primary); }

/* 월 드롭다운 — 라운드·패딩·명확한 셰브론으로 '선택'임을 표시 */
.flatpickr-monthDropdown-months {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border-radius: 8px;
  padding: 4px 24px 4px 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.flatpickr-monthDropdown-months:hover { background-color: var(--primary-light); }

/* 시간 선택 행 — 더 크고 누르기 쉽게 */
.flatpickr-time { height: 44px; line-height: 44px; }
.flatpickr-time .numInputWrapper,
.flatpickr-time input { height: 44px; }
.flatpickr-time .flatpickr-time-separator { line-height: 44px; }

/* 연도·시·분 드롭다운(스피너 대체, date-picker.js가 주입) — 토큰 통일 */
.flatpickr-calendar select.fp-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 24px 4px 10px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%236B7280'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  cursor: pointer; line-height: 1.2;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.flatpickr-calendar select.fp-select:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
}
.flatpickr-calendar select.fp-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
/* 월 선택기(monthSelect 플러그인) — 12개월 그리드 셀을 라운드 버튼처럼, 선택월은 인디고 */
.flatpickr-monthSelect-months { padding: 6px 8px 10px; }
.flatpickr-monthSelect-month {
  border-radius: 8px;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 120ms ease, color 120ms ease;
}
.flatpickr-monthSelect-month:hover { background: var(--primary-light); color: var(--primary-dark); }
.flatpickr-monthSelect-month.selected {
  background: var(--primary); color: #fff; font-weight: 600;
}
/* 방어용: 연도 드롭다운 주입이 안 된 환경에서도 연도 숫자가 스피너에 눌리지 않도록 여백 확보 */
.flatpickr-calendar .flatpickr-current-month .numInputWrapper { width: 8ch; }
.flatpickr-calendar .flatpickr-current-month input.cur-year { padding-right: 6px; }

/* 시간 행의 시/분 드롭다운 — 약간 크게, 가운데 정렬 */
.flatpickr-time { display: flex; align-items: center; justify-content: center; gap: 4px; }
.flatpickr-time .fp-select { height: 34px; font-size: 15px; }
.flatpickr-time .flatpickr-time-separator { line-height: 34px; font-weight: 600; }

/* Flatpickr가 적용된 입력칸도 다른 폼 컨트롤과 동일한 포커스 링 */
input.flatpickr-input.form-control:focus,
input.flatpickr-input.form-control-sm:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* 테이블 행 hover 시 부드러운 배경 전환 + 클릭 행 커서 */
.table-hover tbody tr { transition: background-color 120ms ease; }
.table tbody tr[onclick] { cursor: pointer; }

/* 버튼 공통 트랜지션 + 활성 시 살짝 눌리는 느낌 */
.btn { transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; }
.btn:active { transform: translateY(1px); }

/* 배지 세로 정렬 보정 (텍스트와 균형)
   자간은 normal 유지 — 11px 한글에 음수 자간(-0.2px)을 주면 글자가 서로 붙어
   '뭉쳐' 보인다. 음수 자간은 큰 로고·타이틀에만 쓴다. */
.badge { vertical-align: middle; font-weight: 500; letter-spacing: normal; }

/* 경비 유형 배지 — 소프트 톤(옅은 배경 + 진한 동색 글자)로 고대비 가독성 확보.
   ※ Bootstrap엔 .bg-opacity-15 클래스가 없어 bg-primary가 solid로 렌더되던 문제(대비 저하)를
      전용 클래스로 대체한다. */
.badge.badge-exp-corp {
  background: var(--primary-light);            /* 옅은 인디고 */
  color: var(--primary-dark);                  /* 진한 인디고 글자 */
  border: 1px solid rgba(79, 70, 229, .25);
}
.badge.badge-exp-person {
  background: #ECFEFF;                          /* 옅은 청록(cyan-50) */
  color: #0E7490;                              /* 진한 청록 글자(cyan-700) */
  border: 1px solid rgba(6, 182, 212, .30);
}

/* 페이지 헤더 타이틀 간격 통일 */
.page-title { font-size: 22px; font-weight: 700; line-height: 1.3; }

/* 카드 헤더 일관 패딩/굵기 */
.card-header.fw-semibold { padding-top: 14px; padding-bottom: 14px; }

/* 폼 포커스 시 브랜드 컬러 링 */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary, #4F46E5);
  box-shadow: 0 0 0 0.2rem rgba(79,70,229,.12);
}

/* 숫자/금액 셀 탭ular 정렬 (자릿수 흔들림 방지) */
td.text-end, th.text-end { font-variant-numeric: tabular-nums; }

/* 토스트 등장 애니메이션 */
.toast { animation: toastIn 220ms ease; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 진행률 바 부드러운 전환 */
.progress-bar { transition: width 300ms ease; }

/* ============================================================
   목록 테이블 공통 필터·정렬 (table-tools.js)
   ============================================================ */

/* 그리드 카드 — 하단 모서리도 상단처럼 매끄럽게 라운드 */
.grid-card { overflow: hidden; }   /* 테이블 사각 모서리를 카드 라운드로 클리핑 */
/* 드롭다운 포함 그리드: 가로 스크롤(모바일 넘침 방지). 메뉴는 JS가 Popper fixed로 띄워 안 잘림 */
.grid-hscroll { overflow-x: auto; }
/* 드롭다운이 포함된 그리드는 클리핑 대신 마지막 행 모서리만 라운드(메뉴 잘림 방지) */
.grid-card-soft .table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius-lg); }
.grid-card-soft .table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--radius-lg); }

/* 한글 줄바꿈 — 좁은 칸에서 '그/린/데/이'처럼 글자 단위로 깨지지 않게 단어를 유지한다.
   keep-all 이면 한글 단어가 통째로 유지되어 표가 넓어지고, 표는 .table-responsive 로
   가로 스크롤된다(모바일 데이터 표 표준 UX). 전 표 공통 적용. */
.table th, .table td { word-break: keep-all; }

/* 모바일: 데이터 그리드(js-grid)는 컬럼을 찌부러뜨리지 않고 '원본 크기'로 유지한다.
   셀을 nowrap 으로 둬 자연 너비를 확보하고, table-tools.js 가 감싼 .table-responsive 로
   가로 스크롤한다(카드형 전환 대신 표를 그대로 스크롤해서 보는 방식). */
@media (max-width: 767.98px) {
  table.js-grid > thead > tr > th,
  table.js-grid > tbody > tr > td { white-space: nowrap; }
  /* 스크롤 가능한 표 하단에 살짝 여백(스크롤바 가림 방지) */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* 셀 세로 정렬 — 일부 목록은 align-middle 클래스가 없어 상단 정렬되므로 공통 강제 */
table.js-grid > tbody > tr > td,
table.js-grid > thead > tr > th { vertical-align: middle; }

/* 그리드 시작/끝 여백 — 첫·마지막 열이 카드 가장자리에 붙지 않도록 */
table.js-grid > thead > tr > th:first-child,
table.js-grid > tbody > tr > td:first-child { padding-left: 20px; }
table.js-grid > thead > tr > th:last-child,
table.js-grid > tbody > tr > td:last-child  { padding-right: 20px; }

/* 플러시(card-body p-0) 카드 안 일반 테이블도 첫·끝 칸에 좌우 여백을 줘
   카드 헤더(20px)와 정렬하고 내용이 가장자리에 붙지 않게 한다. (js-grid는 위에서 처리) */
.card-body.p-0 table.table:not(.js-grid) > thead > tr > th:first-child,
.card-body.p-0 table.table:not(.js-grid) > tbody > tr > td:first-child,
.card-body.p-0 table.table:not(.js-grid) > tfoot > tr > td:first-child { padding-left: 20px; }
.card-body.p-0 table.table:not(.js-grid) > thead > tr > th:last-child,
.card-body.p-0 table.table:not(.js-grid) > tbody > tr > td:last-child,
.card-body.p-0 table.table:not(.js-grid) > tfoot > tr > td:last-child { padding-right: 20px; }

/* 검색 툴바 — 그리드 상단 헤더 바 (좌우 여백을 표 셀과 정렬) */
.grid-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.grid-search-wrap {
    position: relative;
    width: 280px;
    max-width: 100%;
}
.grid-search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}
.grid-search {
    height: 38px;
    width: 100%;
    padding: 0 14px 0 36px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-base);
    font-size: 13px;
    color: var(--text-primary);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.grid-search::placeholder { color: var(--text-muted); }
.grid-search:focus {
    outline: none;
    background: var(--bg-card);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* 정렬 가능한 헤더 */
th.grid-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}
th.grid-sortable:hover { color: var(--primary); }
/* 기본 상태에서는 정렬 아이콘을 표시하지 않는다. */
/* 클릭하여 정렬된 컬럼에만 삼각형(▲/▼)으로 방향 표시. */
th.grid-sortable.grid-sort-asc::after {
    content: "\25B2";          /* ▲ */
    font-size: 10px;
    margin-left: 6px;
    color: var(--primary);
}
th.grid-sortable.grid-sort-desc::after {
    content: "\25BC";          /* ▼ */
    font-size: 10px;
    margin-left: 6px;
    color: var(--primary);
}
th.grid-sortable:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* 인쇄 시 검색 툴바 숨김 */
@media print {
    .grid-toolbar { display: none !important; }
    th.grid-sortable.grid-sort-asc::after,
    th.grid-sortable.grid-sort-desc::after { content: "" !important; }
}

/* 금액 입력칸 — 우측 정렬 (money-input.js가 실시간 콤마 적용) */
input.js-money { text-align: right; }

/* ============================================================
   상단 메뉴 검색 + 전체 메뉴 모달 (menu-search.js)
   ============================================================ */
.topbar-menu-search {
    position: relative;
    width: 200px;
}
.topbar-menu-search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}
#menuSearchInput, #allMenuSearchInput {
    padding-left: 32px;
    border-radius: 999px;
    background: var(--bg-base);
}
#menuSearchInput:focus, #allMenuSearchInput:focus {
    background: var(--bg-card);
}

/* 검색 결과 드롭다운 */
.topbar-menu-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    z-index: 1050;
    max-height: 360px;
    overflow-y: auto;
}
.topbar-menu-results.show { display: block; }
.topbar-menu-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
}
.topbar-menu-result:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}
.topbar-menu-result .tm-name { font-weight: 500; }
.topbar-menu-result .tm-group {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.topbar-menu-noresult {
    padding: 14px 10px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* 전체 메뉴 모달 */
.allmenu-group { margin-bottom: 18px; }
.allmenu-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.allmenu-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}
.allmenu-item {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    background: var(--bg-card);
    transition: all 150ms ease;
}
.allmenu-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ============================================================
   업무 그룹 기반 Aside 네비게이션 (context_processors.workgroup_nav)
   ============================================================ */

/* 그룹 내 구분 소제목(사원/관리자 영역 분리) — 윗선으로 구역을 나눈다 */
.sidebar-subhead {
  list-style: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: rgba(255,255,255,.42);
  padding: 12px 20px 6px;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-menu > .sidebar-subhead:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

/* 그룹별 액센트 컬러 */
[data-wg-color="slate"]  { --wg-accent: #94A3B8; }
[data-wg-color="blue"]   { --wg-accent: #60A5FA; }
[data-wg-color="green"]  { --wg-accent: #34D399; }
[data-wg-color="teal"]   { --wg-accent: #2DD4BF; }
[data-wg-color="purple"] { --wg-accent: #A78BFA; }
[data-wg-color="amber"]  { --wg-accent: #FBBF24; }
[data-wg-color="indigo"] { --wg-accent: #818CF8; }
[data-wg-color="rose"]   { --wg-accent: #FB7185; }

/* 업무 그룹 스위처 (회사명 아래) */
.wg-switcher { position: relative; margin: 2px 12px 8px; }
.wg-switcher-btn {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.wg-switcher-btn:hover { background: rgba(255,255,255,.15); }
.wg-switcher-btn > i:first-child { font-size: 15px; color: var(--wg-accent, #A5B4FC); }
.wg-switcher-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; }
.wg-switcher-menu { width: 220px; max-height: 62vh; overflow-y: auto; padding: 6px; }
.wg-switcher-menu .dropdown-item { border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; }
.wg-switcher-menu .dropdown-item.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }

/* 그룹 헤더 */
.sidebar-group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: rgba(255,255,255,.45);
  padding: 6px 20px; margin: 2px 0;
  display: flex; align-items: center;
}

/* 새 네비 — 메뉴명만 표시(아이콘 없음) + 링크 단위 active */
/* 위 회사명(.sidebar-tenant)·스위처(.wg-switcher-btn)와 동일한 라운드 인셋(margin+radius)으로 통일.
   들여쓰기는 좌측 padding으로 유지(좌우 margin 12px 만큼 padding 보정). */
.sidebar-nav .sidebar-link,
.sidebar-settings .sidebar-link {
  position: relative;
  margin: 1px 12px;
  border-radius: 10px;
  padding: 7px 12px 7px 22px;
}
/* 선택 메뉴 — 라이트 인디고 알약(연한 톤) + 인디고 텍스트 */
.sidebar-nav .sidebar-link.active,
.sidebar-settings .sidebar-link.active {
  background: #F3F5FF;          /* 아주 연한 인디고 틴트 */
  color: #4F46E5;              /* 브랜드 인디고 텍스트 */
  font-weight: 600;
}
.sidebar-nav .sidebar-link.active:hover,
.sidebar-settings .sidebar-link.active:hover {
  background: #E9EDFF;          /* hover 시 살짝 진하게 */
  color: #4338CA;
}

/* 설정 하단 고정 분리 */
.sidebar-settings {
  margin-top: auto;
  padding: 8px 0 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ============================================================
   고객지원센터 (support) — 플랫 표면 원칙(테두리+라운드, 그림자 없음)
   ============================================================ */
/* 고객지원 메뉴 페이지 공통 폭 — 넓은 화면에서 과도하게 넓어지는 문제 방지(전 페이지 통일) */
.support-page { max-width: 820px; }

/* 페이지네이션 — 번호 패딩·최소폭 확보(좁아 보이지 않게).
   Bootstrap .pagination-sm 의 좁은 패딩을 덮어 클릭 영역을 넉넉히 한다. */
.pagination .page-link {
  padding: 7px 14px;
  min-width: 40px;
  text-align: center;
}

/* Rich Text 본문(FAQ 답변·매뉴얼 단계·공지·메시지) 가독성 */
.support-answer { font-size: 14px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
.support-answer p { margin: 0 0 8px; }
.support-answer img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.support-answer table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.support-answer th, .support-answer td { border: 1px solid var(--border); padding: 6px 10px; }

/* 문의 대화 말풍선 — 발신 주체별 색/정렬 (색+아이콘 병행) */
.support-msg { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; }
.support-msg-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.support-msg-staff    { background: var(--primary-light); border-color: #C7D2FE; }
.support-msg-mine     { background: var(--bg-card); }
.support-msg-internal { background: #FFFBEB; border-color: #FDE68A; }  /* 내부 메모: 앰버 톤 */

/* 진행 이력 타임라인 */
.support-timeline { list-style: none; margin: 0; padding: 0; }
.support-timeline > li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--border); }
.support-timeline > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.support-timeline > li::before {
  content: ''; position: absolute; left: -5px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
}

/* 매뉴얼 단계 번호 뱃지 */
.support-step-no {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* 매뉴얼 카드 hover — 그림자 대신 테두리 강조(플랫) */
.support-guide-card { transition: border-color 150ms ease; }
a:hover > .support-guide-card { border-color: var(--primary); }

/* ============================================================
   분할 뷰 (split-view) — 좌측 트리/목록 + 우측 상세
   플랫 표면: 테두리 1px + 라운드, 그림자 미사용
   ============================================================ */
.split-view {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.split-left {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
}
.split-divider {
  width: 5px; flex: 0 0 5px; cursor: col-resize;
  background: transparent; transition: background 150ms ease;
}
.split-divider:hover { background: var(--primary-light); }
.split-right { flex: 1 1 auto; min-width: 0; }

/* 모바일: 좌우 분할 → 상하 스택, 드래그 핸들 숨김 */
@media (max-width: 767.98px) {
  .split-view { flex-direction: column; height: auto !important; }
  .split-left { width: auto !important; border-right: none; border-bottom: 1px solid var(--border); max-height: 320px; }
  .split-divider { display: none; }
}

/* ============================================================
   조직 트리 (dept-tree) — 좌측 부서 목록
   ============================================================ */
.dept-tree-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 14px 14px 8px;
}
.dept-tree-head .count {
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 999px; padding: 1px 8px;
  letter-spacing: 0;
}
.dept-tree { padding: 4px 8px 12px; }

/* 트리 노드 행 */
.dept-node-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 2px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text-primary); font-size: 13px;
  text-decoration: none; transition: background 120ms ease, border-color 120ms ease;
}
.dept-node-link:hover { background: var(--bg-base); color: var(--text-primary); }
.dept-node-link.is-selected {
  background: var(--primary-light);
  border-color: #C7D2FE;
  color: var(--primary-dark); font-weight: 600;
}
/* 트리 토글/마커 아이콘 */
.dept-node-toggle { width: 14px; flex: 0 0 14px; text-align: center; color: var(--text-muted); font-size: 10px; }
.dept-node-icon {
  width: 24px; height: 24px; flex: 0 0 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: var(--bg-base);
  color: var(--text-secondary); font-size: 13px;
}
.dept-node-link.is-selected .dept-node-icon { background: #fff; color: var(--primary); }
.dept-node-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 부서원 수 배지 */
.dept-node-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-base);
  border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center;
}
.dept-node-link:hover .dept-node-count { background: #fff; }
.dept-node-link.is-selected .dept-node-count { background: #fff; color: var(--primary); }
/* 계층 들여쓰기 가이드 라인 */
.dept-node-children { border-left: 1px solid var(--border); margin-left: 19px; padding-left: 6px; }

/* ====================== PWA 설치 유도 배너 ====================== */
/* 오버레이 성격(떠 있는 안내)이라 그림자 허용 — 콘텐츠 카드 플랫 원칙 예외 */
.pwa-install-banner {
  position: fixed;
  z-index: 1080;                 /* 토스트/탭바 위 */
  right: 20px;
  bottom: 20px;
  width: min(380px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.pwa-install-icon { border-radius: 10px; flex: 0 0 auto; }
.pwa-install-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pwa-install-text strong { font-size: 14px; line-height: 1.3; }
.pwa-install-text span { font-size: 12px; color: var(--text-muted); }
.pwa-install-banner .btn { flex: 0 0 auto; }
.pwa-install-banner .btn-close { flex: 0 0 auto; }

/* 모바일: 탭바 위에 가로로 꽉 차게 */
@media (max-width: 991.98px) {
  .pwa-install-banner {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom));
  }
}

/* 모바일 하단바 '알림' 탭 — 아직 안 켠 기기에 켜기 유도 점(빨간 점) */
.mobile-tabbar .tabbar-push-dot {
  position: absolute; top: 4px; right: 50%; transform: translateX(12px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger, #EF4444);
}

/* ============================================================
   리치 본문 읽기 — 작성 화면(TOAST 에디터)과 동일하게(내 노트·공지·위키·업무요청 등)
     TOAST WYSIWYG 에디터를 실측하니 문단(<p>) 여백이 0 이고 line-height 1.6 이라
     문단·줄바꿈이 모두 같은 간격(줄높이만)으로 촘촘히 붙는다. 읽기(뷰)도 이와 똑같이
     맞춘다 → 작성한 그대로 보인다. (font-size 13 / line-height 1.6 은 본문 div 인라인)
     ※ 개별 클래스+contents 로 지정해 TOAST 뷰어 기본(.toastui-editor-contents p)보다 우선. */
.note-body.toastui-editor-contents p,
.wiki-body.toastui-editor-contents p,
.notice-body.toastui-editor-contents p,
.rich-content p {
  margin: 0;
}

/* ============================================================
   리치 본문 이미지 — 내용 박스를 절대 넘지 않도록(에디터 + 모든 렌더 영역 공통)
   TOAST 에디터 표시부 + 상세/인쇄 등 렌더된 본문 컨테이너에 반응형 max-width 강제.
   ============================================================ */
.toastui-editor-contents img,
.card-body img,
.contract-body img,
.ct-body img,
.wiki-content img,
.notice-content img,
.doc-content img,
.rich-content img {
  max-width: 100%;
  height: auto;
}

/* 이미지 오버플로 강제(!important — TOAST/CDN·플러그인 CSS보다 우선). "절대 박스를 넘지 않음" */
.toastui-editor-contents img,
.toastui-editor-md-preview img,
.card-body img,
.contract-body img,
.ct-body img,
.wiki-content img,
.notice-content img,
.doc-content img,
.rich-content img,
.rich-body img {
  max-width: 100% !important;
  height: auto !important;
}

/* 원형 아바타(프로필 사진) 예외 — 위 리치 본문 규칙(height:auto !important)이 카드 안
   아바타의 height 속성까지 무효화해 비정사각 원본이 찌그러져 보이는 문제 방지.
   aspect-ratio로 항상 정사각을 유지하고 넘치는 부분은 잘라낸다(비율 왜곡 없음). */
img.rounded-circle {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ============================================================
   리치 본문 코드 블록(pre) — 테두리 + 라운드 (에디터 + 렌더 공통)
   ============================================================ */
.toastui-editor-contents pre,
.card-body pre,
.contract-body pre,
.ct-body pre,
.wiki-content pre,
.notice-content pre,
.doc-content pre,
.rich-content pre,
.rich-body pre,
.page-help-card pre {
  /* TOAST 에디터 CSS(.toastui-editor-contents pre)가 뒤에 로드되어 같은 우선순위로 덮으므로
     각진 모서리·배경을 확실히 이기도록 핵심 속성에 !important 를 준다. */
  border: 1px solid var(--bs-border-color, #e5e7eb) !important;
  border-radius: var(--radius-md, 10px) !important;
  background: #f8fafc !important;
  padding: 12px 14px;
  margin: 8px 0;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}
/* 코드 블록 안의 code는 배경 중복 제거 */
.toastui-editor-contents pre code,
.card-body pre code,
.wiki-content pre code,
.notice-content pre code,
.rich-content pre code,
.page-help-card pre code {
  background: transparent;
  padding: 0;
  border: 0;
}
/* 인라인 code — 옅은 배경 + 라운드 */
.card-body :not(pre) > code,
.wiki-content :not(pre) > code,
.notice-content :not(pre) > code,
.rich-content :not(pre) > code,
.page-help-card :not(pre) > code {
  background: #f1f5f9;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
}

/* ============================================================
   리치 본문 표(table) — 테두리 + 헤더 음영 (에디터 + 렌더 공통)
   ※ 데이터 그리드(js-grid) 훼손을 막기 위해 .card-body table 은 대상에서 제외.
     리치 본문 전용 클래스에만 적용한다.
   ============================================================ */
.toastui-editor-contents table,
.contract-body table,
.ct-body table,
.wiki-content table,
.wiki-body table,
.notice-content table,
.notice-body table,
.doc-content table,
.rich-content table,
.rich-body table,
.page-help-card table {
  border-collapse: collapse;
  margin: 10px 0;
  max-width: 100%;
}
.toastui-editor-contents th, .toastui-editor-contents td,
.contract-body th, .contract-body td,
.ct-body th, .ct-body td,
.wiki-content th, .wiki-content td,
.wiki-body th, .wiki-body td,
.notice-content th, .notice-content td,
.notice-body th, .notice-body td,
.doc-content th, .doc-content td,
.rich-content th, .rich-content td,
.rich-body th, .rich-body td,
.page-help-card th, .page-help-card td {
  border: 1px solid var(--bs-border-color, #e5e7eb);
  padding: 6px 10px;
  vertical-align: top;
  word-break: break-word;
}
.toastui-editor-contents th,
.contract-body th,
.ct-body th,
.wiki-content th,
.wiki-body th,
.notice-content th,
.notice-body th,
.doc-content th,
.rich-content th,
.rich-body th,
.page-help-card th {
  background: #f8fafc;
  font-weight: 600;
  text-align: left;
}