/* ═══════════════════════════════════════════════════════════════
   saas.css — Phase 2: 사이드바 + 탑바 SaaS 스타일 오버라이드
   기존 .sidebar / .header 클래스를 새 룩으로 교체
   common.css, dashboard.css, dashboard-premium.css 뒤에 로드
   ═══════════════════════════════════════════════════════════════ */

/* ── 스크롤바 폭 항상 예약: 모달 열 때 overflow:hidden 이 스크롤바를 없애도
   폭 변화→reflow 가 안 생기게 함 (수백 행 페이지에서 모달 열/닫기 버벅임 제거) ─── */
html { scrollbar-gutter: stable; }

/* ── 모달 미활성 시 강제 숨김 (click 막힘 방지) ─── */
.modal:not(.active) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* 모달 활성 시 무조건 보이게 (다른 CSS가 hidden 강제해도 무력화) */
.modal.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2000 !important;
}
/* 모달 컨텐츠는 중앙 표시 */
.modal.active .modal-content {
  position: relative !important;
  z-index: 2001 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* tutorial 관련은 자체 CSS(.visible 등) 사용 — saas.css 간섭 X */
/* subExpiryModal 등 ID별 강제 숨김 제거 — .modal:not(.active) 일반 룰로 충분 */
/* 풀스크린 fixed 요소 광역 차단 룰 제거 — 정상 모달까지 잡아 클릭이 뒤로 통과하던 버그 원인 */

/* ── 다크모드 캘린더뷰 그룹명 흰 막 제거 ──
   dashboard.css:1227 의 .data-table tr.is-expanded td { background: var(--dark-bg) }가
   다크모드에서 row 배경에 미세한 색상 차이 만들어 "막" 같이 보임 → 투명 처리. */
[data-theme="dark"] .data-table tr.is-expanded td {
  background: transparent !important;
}


/* ── 캡처모드 캘린더 셀 빠른 마스킹 (Option A) ──────────────────
   진단(Performance 녹화): 렌더링 3349ms / 페인팅 250ms / 스크립트 154ms.
   원인: 캘린더 셀마다 데이터 span/div 5~6개에 filter:blur 적용 → 100 places × 15 cells × N spans
   = 4500+ GPU 합성 레이어. 레이어당 0.7ms 컴파일 = 3초+ freeze.
   해결: span/div 개별 마스킹 대신 부모 컨테이너(cell-details, cell-scores-container) 단위에서
   filter:blur 적용. 레이어 수 4500 → 3000으로 33% 감소. 시각 결과는 동일 (방/블/저/점수
   모두 가림). JS는 td 만 마스킹하도록 위에서 동시 변경. */
body.capture-mode:not(.capture-keep-stats) .data-table .calendar-cell .cell-details,
body.capture-mode:not(.capture-keep-stats) .data-table .calendar-cell [data-column="savecount"] {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none !important;
  pointer-events: none !important;
  contain: paint;
}


/* ── 모달 렉 최적화 ───────────────────────────────────────
   .modal 자체 애니메이션 + backdrop-filter 제거 — 백드롭 합성 첫 프레임이
   가장 무거웠음. 백그라운드 색만 남김. .modal-content는 GPU 레이어로
   미리 올려서 transform+opacity만 짧게 애니메이션. */
.modal {
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.modal-content {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.modal.active .modal-content {
  animation: saasModalIn 0.16s cubic-bezier(.22,.61,.36,1) both !important;
}
@keyframes saasModalIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,    0); }
}

/* [perf 2026-07-26] backdrop-filter 전면 제거(데스크탑 포함) — 사이트 전반 굼뜸·스크롤 렉의 1번 원인.
   근거: --glass-bg 가 라이트 rgba(255,255,255,.88)(88% 불투명)·다크 #0d1117(100% 불투명)이라
   블러가 거의/전혀 안 보이는데(다크는 완전 무효과), 헤더·사이드바 등 *항상 화면에 뜬* 큰 요소가
   스크롤/애니 매 프레임마다 뒤 영역을 blur(12~20px)로 재합성 → GPU 부담. 블러만 끄고 불투명 배경은
   유지 → 룩은 사실상 그대로, 속도 대폭↑. (반경²에 비례하는 blur(20px) 헤더·사이드바가 최악이었음) */
.modal, .sidebar, .header, .stat-card, .tabs-container, .chart-container,
.notification-panel, .theme-toggle, .svg-loading-overlay,
.glass, .glass-card, .card, .premium-card, .metric-card, .kpi-card, .tab-content {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* [모바일 모달 정리 2026-07-26] 모달이 폰 화면에 *가로 슬라이더 없이 한눈에* 들어오게.
   원인은 모달 폭(이미 90%)이 아니라, 모달 안의 다단 그리드·표·고정폭 요소가 모달보다 넓어
   생기는 가로 스크롤. 내부 요소를 폭 안에 가두고, 표만 표 안에서 가로 스크롤(모달 전체가 아니라). */
@media (max-width: 768px) {
  .modal-content {
    width: 94% !important;
    max-width: 94% !important;
    padding: 18px 16px !important;
    overflow-x: hidden !important;      /* 모달 자체 가로 슬라이더 제거 */
    box-sizing: border-box !important;
  }
  /* 다단 그리드 → 1열 (인라인 grid-template-columns 포함) */
  .modal-content [style*="grid-template-columns"],
  .modal-content .form-grid, .modal-content .form-row-2,
  .modal-content .grid-2, .modal-content .grid-3, .modal-content .grid-4,
  .modal-content [class*="cols-2"], .modal-content [class*="cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 폼 컨트롤·이미지·pre 는 모달 폭을 넘지 않게 */
  .modal-content input, .modal-content select, .modal-content textarea,
  .modal-content .form-input, .modal-content img, .modal-content pre {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 긴 텍스트 강제 줄바꿈(URL·ID 등이 모달 밀어내는 것 방지) */
  .modal-content { overflow-wrap: anywhere; word-break: break-word; }
  /* 표는 표 안에서만 가로 스크롤(모달 전체가 슬라이드되지 않게) */
  .modal-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 안 접히는 가로 flex 줄 방어 */
  .modal-content .modal-tabs, .modal-content .modal-actions,
  .modal-content .form-row, .modal-content .btn-group { flex-wrap: wrap; }
}

/* footer 강제 표시 룰 제거 — 닫히지 않은 모달이 footer를 가리던 진짜 원인이 PHP 페이지 div 누락이었음. 그 버그 수정 후엔 force-show 불필요 */
/* 헤더 버튼 클릭 강제 보장 */
.header .btn-icon, .header-icon-group .btn-icon {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 2 !important;
}
/* 버튼 안 자식(i 아이콘 등)이 click을 가로채지 않도록 — 부모 button이 받게 */
.btn-icon > *, .btn-icon i, .btn-icon svg, .btn-icon span {
  pointer-events: none !important;
}

/* 헤더 다음 형제 (공지 배너 등)와 충분한 여백 */
.main-content > .header + * {
  margin-top: 16px !important;
}

/* ── 모든 섹션 좌우 padding 통일 (칼각 정렬) ── */
.banner-section-wrapper {
  margin: 8px 0 20px 0 !important;
  padding: 0 !important;
}
.banner-section-header {
  padding: 0 16px !important;
}
.banner-container {
  padding: 0 !important;
}
/* main-content 내 모든 섹션의 좌우 가장자리는 main-content padding 기준으로 통일 */
.main-content > .section,
.main-content > .banner-section-wrapper,
.main-content > .hero-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 카드 콘텐츠 시작점(16px)과 동일하게 정렬되어야 하는 텍스트 영역들 */
.banner-section-title,
.dash-hero-title,
.hero-greeting {
  padding-left: 0 !important;
}

/* ── 글로벌 SVG 아이콘 ───────────────────────────── */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
button .svg-icon, a .svg-icon { pointer-events: none; }

/* ── SVG 스피너 (로딩 애니메이션) ───────────────── */
@keyframes svg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.svg-spin {
  animation: svg-spin 0.9s linear infinite;
  transform-origin: center;
}
@keyframes svg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.svg-pulse { animation: svg-pulse 1.5s ease-in-out infinite; }

/* 멋진 dual-ring 스피너 컴포넌트 */
.dual-ring-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
}
.dual-ring-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: svg-spin 0.9s linear infinite;
}
.dual-ring-spinner.is-sm { width: 16px; height: 16px; }
.dual-ring-spinner.is-lg { width: 36px; height: 36px; }

/* 풀스크린 로딩 오버레이 */
.svg-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: var(--primary, #6B6198);
}
[data-theme="light"] .svg-loading-overlay {
  background: rgba(255,255,255,0.6);
}


/* ── 사이드바 컨테이너 재설계 ───────────────────────── */
/* 사이드바 전용 보라 액센트 — 본문과 분리, 밝은 보라 유지 */
.sidebar {
  --sb-accent: #9580F0;
  --sb-accent-soft: rgba(149,128,240,0.12);
}
[data-theme="light"] .sidebar {
  --sb-accent: #6C5CE7;
  --sb-accent-soft: rgba(108,92,231,0.10);
}

.sidebar {
  width: 240px !important;
  background: var(--card-bg) !important;
  border-right: 1px solid var(--border) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .sidebar { background: #FFFFFF !important; }
[data-theme="dark"] .sidebar { background: var(--card-bg) !important; }

/* 브랜드 영역 */
.sidebar .sidebar-header {
  padding: 14px 14px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  margin: 0 !important;
}
.sidebar .sidebar-header img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  object-fit: contain !important;
}
.sidebar .sidebar-brand-link {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary, var(--text-white)) !important;
  text-decoration: none !important;
}
.sidebar .sidebar-brand-sub {
  font-size: 11px !important;
  color: var(--text-secondary, var(--text-muted)) !important;
  margin-top: 2px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 네비 영역 */
.sidebar .nav-menu {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 10px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  /* 스크롤바 시각만 숨김 — 스크롤 작동은 그대로 */
  scrollbar-width: none !important;            /* Firefox */
  -ms-overflow-style: none !important;          /* IE/Edge */
}
.sidebar .nav-menu::-webkit-scrollbar {         /* Chrome/Safari/WebKit */
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* 그룹 (네이버 / 쇼핑 / 도구 / 커뮤니티) */
.sidebar .nav-group {
  margin: 4px 0 2px !important;
}
/* 단독 nav-item (그룹 바깥, 예: 공지/고객지원) — 시각적 호흡 확보 */
.sidebar .nav-menu > .nav-item {
  margin-top: 4px !important;
}
.sidebar .nav-menu > .nav-item:first-child {
  margin-top: 0 !important;
}
.sidebar .nav-group-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-tertiary, var(--text-dim)) !important;
  padding: 12px 11px 5px !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}
.sidebar .nav-group-title:hover { color: var(--text-secondary) !important; }
.sidebar .nav-group-title > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
}
.sidebar .nav-group-title > span:first-child i {
  display: none !important;  /* 그룹 헤더 아이콘 숨김 — 라벨로만 */
}
.sidebar .nav-group-arrow {
  font-size: 9px !important;
  color: var(--text-muted) !important;
  transition: transform 200ms ease !important;
}
.sidebar .nav-group.closed .nav-group-arrow { transform: rotate(-90deg) !important; }
.sidebar .nav-group-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  max-height: 1000px !important;
  overflow: hidden !important;
  transition: max-height 240ms ease !important;
}
.sidebar .nav-group.closed .nav-group-items { max-height: 0 !important; }

/* nav-item — SaaS 스타일 (중간 사이즈, 글씨 또렷하게) */
.sidebar .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  color: var(--text-primary, var(--text-white)) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease !important;
  position: relative !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  opacity: 0.92 !important;
}
.sidebar .nav-item:hover { opacity: 1 !important; }
.sidebar .nav-item.active { opacity: 1 !important; }
.sidebar .nav-item::before { display: none !important; }
.sidebar .nav-item:hover {
  background: var(--card-hover, var(--card-alt)) !important;
  color: var(--text-primary, var(--text-white)) !important;
  transform: none !important;
  box-shadow: none !important;
}
.sidebar .nav-item.active {
  background: var(--sb-accent-soft) !important;
  color: var(--sb-accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar .nav-item .nav-icon {
  width: 19px !important;
  height: 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  color: inherit !important;
  opacity: 0.85 !important;
  background: transparent !important;
  border: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
.sidebar .nav-item .nav-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.75 !important;
}
.sidebar .nav-item:hover .nav-icon { opacity: 1 !important; }
.sidebar .nav-item.active .nav-icon { color: var(--sb-accent) !important; opacity: 1 !important; }
.sidebar .nav-item.active .nav-icon svg { stroke-width: 2 !important; }

/* admin 섹션 */
.sidebar .sidebar-admin-section {
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--border) !important;
}
.sidebar .nav-item-admin .admin-badge {
  margin-left: auto !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: rgba(248,113,113,0.15) !important;
  color: var(--danger, #F87171) !important;
  border: 1px solid rgba(248,113,113,0.25) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* 1:1 문의 배너 (단순화) — 사이드바 보라 톤 */
.sidebar .sidebar-banner-group {
  padding: 8px !important;
  margin: 8px 0 4px !important;
}
.sidebar .s-banner.qna {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: var(--sb-accent-soft) !important;
  border: 1px solid var(--sb-accent-soft) !important;
  text-decoration: none !important;
  transition: background 120ms ease !important;
}
.sidebar .s-banner.qna:hover { background: var(--sb-accent-soft) !important; filter: brightness(1.15) !important; }
.sidebar .s-banner.qna .s-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  background: var(--sb-accent) !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.sidebar .s-banner.qna .s-txt strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-primary, var(--text-white)) !important;
  display: block !important;
  line-height: 1.3 !important;
}
.sidebar .s-banner.qna .s-txt span {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* 카카오 오픈채팅 배너 — 브랜드 보라 톤으로 통일(qna와 한 쌍) */
.sidebar .s-banner.openchat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  background: var(--sb-accent-soft) !important;
  border: 1px solid var(--sb-accent-soft) !important;
  text-decoration: none !important;
  transition: background 120ms ease, filter 120ms ease !important;
  margin-top: 6px !important;
}
.sidebar .s-banner.openchat:hover {
  background: var(--sb-accent-soft) !important;
  filter: brightness(1.05) !important;
}
.sidebar .s-banner.openchat .s-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  background: var(--sb-accent) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
.sidebar .s-banner.openchat .s-txt strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-primary, var(--text-white)) !important;
  display: block !important;
  line-height: 1.3 !important;
}
.sidebar .s-banner.openchat .s-txt span {
  font-size: 11px !important;
  color: var(--text-tertiary) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   탑바 (.header) 재설계
   ═══════════════════════════════════════════════════════════════ */
.main-content {
  margin-left: 240px !important;
  min-height: 100vh !important;
  background: var(--dark-bg) !important;
  /* 헤더가 static이므로 padding-top 제거 — 헤더는 페이지 흐름 안에서 자연스러움 */
  padding: 0 14px 24px !important;
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 240ms ease; }
  .sidebar.active { transform: translateX(0); }
  /* 모바일은 헤더가 정적이므로 padding-top 불필요 */
  .main-content { margin-left: 0 !important; padding-top: 0 !important; }

  /* ── 모바일 사이드바 컴팩트 — 카카오 배너까지 한 화면에 다 보이게 ── */
  .sidebar .sidebar-header { padding: 12px 12px 8px !important; }
  .sidebar .sidebar-header img { height: 28px !important; }
  .sidebar .nav-menu { padding: 6px 6px 4px !important; gap: 0 !important; }
  .sidebar .nav-group { margin: 2px 0 1px !important; }
  .sidebar .nav-group-title {
    font-size: 10px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
  }
  .sidebar .nav-item {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
  }
  .sidebar .nav-item .nav-icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 13px !important;
  }
  /* 배너 그룹 — 컴팩트 + 항상 하단 sticky로 노출 보장 */
  .sidebar .sidebar-banner-group {
    padding: 6px !important;
    margin: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    border-top: 1px solid var(--border) !important;
  }
  .sidebar .s-banner.qna,
  .sidebar .s-banner.openchat {
    padding: 8px 10px !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }
  .sidebar .s-banner.qna .s-icon,
  .sidebar .s-banner.openchat .s-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .sidebar .s-banner.qna .s-txt strong,
  .sidebar .s-banner.openchat .s-txt strong {
    font-size: 11.5px !important;
  }
  .sidebar .s-banner.qna .s-txt span,
  .sidebar .s-banner.openchat .s-txt span {
    font-size: 10.5px !important;
  }
}

/* 데스크톱: static 헤더 (스크롤하면 사라짐, 페이지 흐름 따라감) — 좌우 margin 0 (다른 섹션과 일자 정렬) */
.header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 8px 0 32px 0 !important;
  z-index: 50 !important;
  height: 56px !important;
  padding: 0 16px !important;
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  /* PC에서 사이드바와 떨어진 floating 카드 형태 — 4면 모두 둥글게 */
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
/* 모바일: static 헤더 (스크롤하면 사라짐, 평범한 페이지 흐름) */
@media (max-width: 768px) {
  .header {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--card-bg) !important;
    /* dashboard.css의 flex-direction: column 무력화 — 가로 + wrap */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    /* 헤더 사이즈 — 검색바 + 액션 한 카드 안 (살짝 컴팩트하게) */
    height: auto !important;
    min-height: 92px !important;
    gap: 10px !important;
    padding: 8px 14px 12px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 1px) !important;
    border-radius: 12px !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  }
  .header-left {
    width: 100% !important;
    max-width: none !important;
    order: 1 !important;
    flex: 0 0 100% !important;
  }
  /* 검색바 없는 페이지: 햄버거 토글 살짝 위로 통일 (2026-06-06) */
  .header-left:not(:has(.search-bar)) .toggle-sidebar { margin-top: -4px !important; }
  .header-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    order: 2 !important;
    flex: 0 0 100% !important;
  }
  /* 헤더 우측 아이콘 그룹 강제 표시 (캡처/테마/물음표/워터마크/공유) */
  .header-icon-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    border-left: none !important;
  }
  .header-icon-group .btn-icon {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* 모바일 .main-content는 헤더가 static이라 위 여백 불필요, 좌우만 */
  .main-content {
    padding-top: 0 !important;
  }
  /* 헤더 아래에 여백 — 공지 배너 등 콘텐츠와 호흡 확보 */
  .main-content > .header {
    margin-bottom: 24px !important;
  }
}
[data-theme="light"] .header { background: rgba(255,255,255,0.85) !important; }
[data-theme="dark"] .header { background: rgba(22,27,34,0.85) !important; }

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  max-width: 520px !important;
}
.toggle-sidebar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 120ms ease !important;
  padding: 0 !important;
}
.toggle-sidebar:hover { background: var(--card-hover) !important; }
/* PC에서도 토글 버튼 표시 — 사이드바 collapsed 모드 토글용 */
@media (min-width: 769px) {
  .toggle-sidebar { display: inline-flex !important; }
}

/* 검색바 */
.search-bar {
  flex: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.search-bar-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-tertiary) !important;
  font-size: 12px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.search-bar input {
  width: 100% !important;
  height: 34px !important;
  padding: 0 80px 0 34px !important;
  background: var(--input-bg, var(--card-bg-elevated)) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text-primary, var(--text-white)) !important;
  font-size: 13px !important;
  outline: none !important;
  font-family: inherit !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.search-bar input::placeholder { color: var(--text-tertiary) !important; }
.search-bar input:hover { border-color: var(--border-strong, var(--border)) !important; box-shadow: none !important; }
.search-bar input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(108,92,231,0.20) !important;
}
.search-bar button {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 26px !important;
  padding: 0 12px !important;
  /* background는 dashboard-premium.css의 그라데이션 사용 */
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: -0.01em !important;
}

/* 헤더 우측 액션 */
.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* 한도 표시 박스 — 컴팩트 */
.header-limit-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  background: var(--card-bg-elevated, var(--card-alt)) !important;
  border: 1px solid var(--border-light, var(--border)) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.header-limit-box .limit-text { font-size: 11px !important; color: var(--text-secondary) !important; }
.header-limit-box .limit-text strong { color: var(--text-primary, var(--text-white)) !important; }
.header-limit-box .limit-divider {
  width: 1px !important;
  height: 12px !important;
  background: var(--border) !important;
  display: inline-block !important;
}
@media (max-width: 1280px) and (min-width: 769px) { .header-limit-box { display: none !important; } }

/* 등급 디스플레이 — 컴팩트 칩 */
.user-grade-display {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  background: var(--card-bg-elevated, var(--card-alt)) !important;
  border: 1px solid var(--border-light, var(--border)) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.user-grade-display .grade-display-label { display: none !important; }
.user-grade-display .grade-display-icon { font-size: 12px !important; line-height: 1 !important; }
.user-grade-display .grade-display-name {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* EXP 버튼 */
.header-exp-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 28px !important;
  padding: 0 10px !important;
  background: var(--card-bg-elevated, var(--card-alt)) !important;
  border: 1px solid var(--border-light, var(--border)) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background 120ms ease !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.header-exp-btn:hover { background: var(--card-hover) !important; transform: none !important; box-shadow: none !important; }
.header-exp-btn .exp-level-badge {
  font-size: 10px !important;
  padding: 1px 5px !important;
  /* background는 dashboard-premium.css의 그라데이션 사용 (덮어쓰지 않음) */
  color: white !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
}
.header-exp-btn .exp-text { color: var(--text-secondary) !important; }

/* 사용자명 */
.header-username {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  padding: 0 8px !important;
}
@media (max-width: 1100px) { .header-username { display: none !important; } }

/* 헤더 네비 링크 (내 설정) */
.header-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  height: 28px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.header-nav-link:hover { background: var(--card-hover) !important; color: var(--text-primary, var(--text-white)) !important; }
.header-nav-link .nav-icon { width: auto !important; height: auto !important; font-size: 11px !important; background: transparent !important; }
.header-nav-link span:not(.nav-icon) { font-size: 12px !important; }
@media (max-width: 1100px) { .header-nav-link span:not(.nav-icon) { display: none !important; } }

/* 로그아웃 버튼 보정 */
.header-actions form .btn-secondary {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.header-actions form .btn-secondary:hover { background: var(--card-hover) !important; color: var(--text-primary, var(--text-white)) !important; }

/* 아이콘 버튼 그룹 */
.header-icon-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0 !important;
  margin-left: 8px !important;
  border-left: none !important;
}
.header-icon-group .btn-icon {
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.header-icon-group .btn-icon:hover { background: var(--card-hover) !important; color: var(--text-primary, var(--text-white)) !important; transform: none !important; }
.header-icon-group .theme-icon { font-size: 13px !important; line-height: 1 !important; }

/* 모바일 헤더 — 한도(맨위) / 등급+레벨+톱니+닉네임+로그아웃 / 액션버튼 */
@media (max-width: 768px) {
  .header {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
  }
  .search-bar input { font-size: 14px !important; }

  .header-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 6px !important;
    justify-content: flex-end !important;
    align-items: center !important;
    overflow: visible !important;
  }
  .header-actions > * {
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  /* 1줄: 한도박스 — 한 줄 통째 */
  .header-limit-box {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-basis: 100% !important;
    width: 100% !important;
    font-size: 10.5px !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    order: 0 !important;
    justify-content: center !important;
  }
  .header-limit-box .limit-text { font-size: 10.5px !important; }
  .header-limit-box .limit-divider { display: none !important; }

  /* 톡/크레딧 없는 짧은 한도박스(일일분석 페이지) = lim-inline → 한 줄 강제 해제, 인라인 컴팩트 */
  .header-limit-box.lim-inline {
    flex-basis: auto !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  /* 2줄: 등급 → 레벨 → 톱니 → 닉네임 → 로그아웃 (우측정렬) */
  .user-grade-display {
    display: inline-flex !important;
    padding: 4px 8px !important;
    order: 1 !important;
  }
  .header-exp-btn {
    display: inline-flex !important;
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    order: 2 !important;
  }
  .header-exp-btn .exp-level-badge { font-size: 9px !important; padding: 1px 4px !important; }
  .header-exp-btn .exp-text { font-size: 10px !important; white-space: nowrap !important; }

  .header-nav-link {
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    justify-content: center !important;
    order: 3 !important;
  }
  .header-nav-link span:not(.nav-icon) { display: none !important; }

  .header-username {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
    color: var(--text-secondary) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 4 !important;
  }

  .header-actions form {
    order: 5 !important;
  }

  /* 3줄: 액션 버튼 그룹 (강제 다음 줄 + 우측 정렬) */
  .header-icon-group {
    flex-wrap: wrap !important;
    flex-basis: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
    order: 6 !important;
  }
  .header-icon-group .btn-icon { width: 32px !important; height: 32px !important; }
}

/* 사이드바 오버레이 (모바일) */
#sidebar-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 99 !important;
  display: none !important;
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
}
#sidebar-overlay.active { display: block !important; opacity: 1 !important; }
@media (min-width: 769px) { #sidebar-overlay { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════
   Hero / KPI 섹션 — SaaS 톤 재디자인
   ═══════════════════════════════════════════════════════════════ */
.hero-section {
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border-bottom: none !important;
}
/* hero-title 텍스트 시작점을 KPI 카드 콘텐츠 시작점과 일치시킴 (카드 padding 16px 만큼) */
.hero-section .hero-top {
  padding: 0 16px !important;
}
.hero-top { margin-bottom: 18px !important; }
.hero-date {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}
.dash-hero-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em !important;
}
.hero-accent {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* KPI 그리드 — PC: 4열 / 모바일: 2열 */
.hero-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
@media (max-width: 768px) {
  .hero-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* KPI 카드 — 깔끔한 토스풍 (라벨 + 숫자 + 추이선만) */
.hero-kpi {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: border-color 150ms ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.hero-kpi::before { display: none !important; }
/* 상단 아이콘 박스 완전 제거 — 라벨만 남김 */
.hero-kpi .kpi-head .kpi-ico,
.hero-kpi .kpi-label .kpi-ico { display: none !important; }
.hero-kpi .kpi-ico svg { display: none !important; }
.hero-kpi:hover {
  border-color: var(--border-strong, #D1D5DB) !important;
  transform: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .hero-kpi:hover {
  border-color: #3A3D44 !important;
  box-shadow: none !important;
}

/* 헤드 영역 (라벨 + 우측 작은 아이콘) */
.hero-kpi .kpi-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin: 0 !important;
}
.hero-kpi .kpi-label-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

/* KPI별 액센트 (아이콘·스파크라인 색에만 적용, 카드는 통일) */
.hero-kpi[data-kpi="top5"] { --kpi-accent: #6B6198; }
.hero-kpi[data-kpi="up"]   { --kpi-accent: #EF4444; }
.hero-kpi[data-kpi="down"] { --kpi-accent: #3B82F6; }
.hero-kpi[data-kpi="avg"]  { --kpi-accent: #F59E0B; }

/* 작은 미니멀 아이콘 (박스 X, 옅은 컬러만) */
.hero-kpi .kpi-ico {
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  color: var(--kpi-accent, var(--text-tertiary)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
}
.hero-kpi .kpi-ico svg {
  width: 14px !important;
  height: 14px !important;
}

/* 큰 숫자 — 깔끔 */
.hero-kpi .kpi-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  font-variant-numeric: tabular-nums !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  font-family: 'Pretendard', -apple-system, sans-serif !important;
  margin-top: 0 !important;
}
/* 라벨 영역 단순화 — 텍스트만, 아이콘 X */
.hero-kpi .kpi-label,
.hero-kpi .kpi-head {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.hero-kpi .kpi-label-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
}
.hero-kpi .kpi-unit {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-tertiary, var(--text-secondary)) !important;
  letter-spacing: -0.01em !important;
}

/* 스파크라인 — 색상별 강조 (또렷하게) */
.hero-kpi { --kpi-accent: var(--primary, #6B6198); }
.hero-kpi[data-kpi="top5"], .hero-kpi:has(.kpi-ico-primary), .hero-kpi:has(.kpi-ico-ok) { --kpi-accent: #6B6198; }
.hero-kpi[data-kpi="up"],   .hero-kpi:has(.kpi-ico-up)      { --kpi-accent: #EF4444; }
.hero-kpi[data-kpi="down"], .hero-kpi:has(.kpi-ico-down)    { --kpi-accent: #3B82F6; }
.hero-kpi[data-kpi="avg"]                                    { --kpi-accent: #F59E0B; }

.hero-kpi .kpi-spark {
  width: 100% !important;
  height: 32px !important;
  display: block !important;
  margin-top: 4px !important;
  overflow: visible !important;
  opacity: 0.9 !important;
  color: var(--kpi-accent, var(--primary, #6B6198)) !important;
  stroke: var(--kpi-accent, var(--primary, #6B6198)) !important;
  fill: none !important;
}
/* 추이선: 색상은 JS에서 KPI별로 직접 지정 (line === fill === 통일된 색) */
.hero-kpi .kpi-spark path,
.hero-kpi .kpi-spark polyline,
.hero-kpi .kpi-spark line {
  stroke-width: 1.5 !important;
  fill: none !important;
}
/* 추이선 꼭짓점 동그라미 완전 숨김 — opacity:0은 pointer event 유지하므로 호버 툴팁 OK */
.hero-kpi .kpi-spark circle {
  opacity: 0 !important;
  fill: transparent !important;
  stroke: none !important;
}

/* ── 햄버거 토글 버튼 + 우측 아이콘 그룹 강제 표시 ── */
.toggle-sidebar {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 34px !important;
  height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.toggle-sidebar:hover { background: var(--card-hover, #f4f4f6) !important; color: var(--text-primary) !important; }

.header-icon-group {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 2px !important;
  margin-left: 8px !important;
}
.header-icon-group .btn-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.header-icon-group .btn-icon:hover {
  background: var(--card-hover, #f4f4f6) !important;
  color: var(--text-primary) !important;
}
.header-icon-group .btn-icon svg { width: 16px; height: 16px; }
.hero-kpi .kpi-spark-empty { display: none !important; }

/* 모바일 */
@media (max-width: 768px) {
  .hero-section { padding: 0 !important; margin-bottom: 12px !important; }
  .hero-kpi-grid { gap: 8px !important; }
  .hero-kpi { padding: 12px 14px !important; gap: 6px !important; border-radius: 10px !important; }
  .hero-kpi .kpi-value { font-size: 18px !important; }
  .hero-kpi .kpi-label-text { font-size: 11px !important; }
  .hero-kpi .kpi-spark { height: 18px !important; }
  .dash-hero-title { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PC 사이드바 collapsed 모드 — 240px → 64px (아이콘만)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .sidebar {
    transition: width 220ms ease !important;
  }
  .sidebar.collapsed {
    width: 64px !important;
    /* dashboard.css의 translateX(-200px) 무력화 — 화면에 그대로 두고 폭만 줄임 */
    transform: none !important;
  }
  /* 브랜드 영역 — 로고만 가운데 */
  .sidebar.collapsed .sidebar-header {
    padding: 14px 8px !important;
    justify-content: center !important;
  }
  .sidebar.collapsed .sidebar-header > div {
    display: none !important;
  }
  /* 그룹 라벨 숨김 */
  .sidebar.collapsed .nav-group-title {
    display: none !important;
  }
  .sidebar.collapsed .nav-menu {
    padding: 10px 6px !important;
  }
  /* nav-item — 아이콘만, 텍스트 숨김 */
  .sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding: 9px 0 !important;
    gap: 0 !important;
  }
  .sidebar.collapsed .nav-item > span:not(.nav-icon) {
    display: none !important;
  }
  .sidebar.collapsed .admin-badge {
    display: none !important;
  }
  /* 1:1 문의 배너 숨김 */
  .sidebar.collapsed .sidebar-banner-group {
    display: none !important;
  }
  /* 본문·헤더 위치 보정 */
  .sidebar.collapsed ~ .main-content,
  body:has(.sidebar.collapsed) .main-content {
    margin-left: 64px !important;
    transition: margin-left 220ms ease !important;
  }
  .sidebar.collapsed ~ .main-content .header,
  body:has(.sidebar.collapsed) .header {
    left: 64px !important;
    transition: left 220ms ease !important;
  }
  /* hover 시 텍스트 살짝 보이는 툴팁 (간단 버전) */
  .sidebar.collapsed .nav-item:hover {
    position: relative !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   빈 결과 상태 (Empty State) — 검색/필터 결과 없음
   ═══════════════════════════════════════════════════════════════ */
.empty-state-cell {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 320px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  color: var(--text-secondary);
  background: transparent;
}
.empty-state-grid {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  grid-column: 1 / -1;
}
.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--card-hover, #f4f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 26px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}
.empty-state-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
}
[data-theme="dark"] .empty-state-grid {
  background: var(--card-bg, #161b22);
  border-color: var(--border, #30363d);
}
[data-theme="dark"] .empty-state-icon {
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 768px) {
  .empty-state {
    padding: 56px 16px;
    min-height: 240px;
  }
  .empty-state-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
    margin-bottom: 16px;
  }
  .empty-state-title {
    font-size: 15px;
    margin-bottom: 6px;
  }
  .empty-state-desc {
    font-size: 12.5px;
    max-width: 260px;
  }
}
@media (max-width: 480px) {
  .empty-state {
    padding: 44px 14px;
    min-height: 200px;
  }
  .empty-state-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
    margin-bottom: 14px;
  }
  .empty-state-desc {
    font-size: 12px;
    max-width: 220px;
  }
}

/* 모바일에서 dashboard.css의 tr→grid 변환 룰을 빈 결과 행에서는 무력화
   (그렇지 않으면 td가 30px 첫 컬럼에 쳐박혀 좌측 정렬됨) */
@media (max-width: 768px) {
  #places-section .data-table tbody tr.empty-result-row,
  .data-table tbody tr.empty-result-row {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }
  #places-section .data-table tbody tr.empty-result-row td.empty-state-cell,
  .data-table tbody tr.empty-result-row td.empty-state-cell {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   공통 빈 상태 — SaaS 미니멀 톤
   큰 FA 아이콘 + 짧은 설명만 박혀있던 헤더를
   라벨 + 제목 + 부제 + 예시 칩 4단 구조로 교체
   사용처: place_comparison.php / place_stats.php / s_comparison.php
   ═══════════════════════════════════════════════════════════════ */
.empty-soft { text-align: center; padding: 56px 24px 40px; max-width: 720px; margin: 0 auto; }
.empty-soft-mark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: rgba(139,126,200,0.08); color: var(--primary);
  border: 1px solid rgba(139,126,200,0.22); border-radius: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  margin-bottom: 16px;
}
.empty-soft-mark i { font-size: 10px; }
.empty-soft-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 10px 0; letter-spacing: -0.4px; line-height: 1.3; }
.empty-soft-sub { color: var(--text-secondary); font-size: 13px; line-height: 1.7; margin: 0 auto; max-width: 460px; }

.empty-soft-actions { margin-top: 24px; }
.empty-soft-actions-label { font-size: 11px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.8px; margin-bottom: 10px; text-transform: uppercase; }
.empty-soft-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.empty-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--card-bg); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
  font-family: inherit; letter-spacing: -0.2px;
}
.empty-chip:hover { border-color: rgba(139,126,200,0.45); background: rgba(139,126,200,0.06); color: var(--primary); }
.empty-chip i { font-size: 10px; color: var(--text-tertiary); transition: color 0.15s; }
.empty-chip:hover i { color: var(--primary); }

/* 미리보기 3-스텝 카드 (네이버 연동 등 단계형 빈 상태) */
.empty-soft-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
@media (max-width: 720px) { .empty-soft-steps { grid-template-columns: 1fr; } }
.empty-step-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); padding: 18px 16px; text-align: left; transition: border-color 0.15s; }
.empty-step-card:hover { border-color: rgba(139,126,200,0.35); }
.empty-step-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(139,126,200,0.12); color: var(--primary); font-size: 12px; font-weight: 800; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.empty-step-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.2px; }
.empty-step-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 640px) {
  .empty-soft { padding: 40px 16px 30px; }
  .empty-soft-title { font-size: 20px; }
  /* 모바일에서도 2줄 강제 — 폰트 줄이고 한국어 어절 단위 줄바꿈 */
  .empty-soft-sub {
    font-size: 11px;
    line-height: 1.55;
    max-width: 320px;
    margin: 0 auto;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
@media (max-width: 380px) {
  /* 매우 좁은 화면 추가 보정 */
  .empty-soft-sub { font-size: 10.5px; max-width: 280px; }
}

/* ═══════════════════════════════════════════════════════════════
   SaaS 페이지 툴바 (검색 + 컨트롤 카드)
   place_comparison · keyword_viewer 등 분석 페이지 상단 카드에 사용
   ═══════════════════════════════════════════════════════════════ */
.saas-toolbar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-bottom: 20px;
  box-shadow: none;
}
.saas-toolbar-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.saas-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.saas-toolbar-title i {
  color: var(--primary);
  font-size: 12px;
}
.saas-toolbar-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: -0.1px;
  margin-left: 4px;
}
.saas-toolbar-body {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.saas-toolbar-body .form-input,
.saas-toolbar-body input[type="text"],
.saas-toolbar-body input[type="date"] {
  flex: 1;
  min-width: 220px;
}
.saas-toolbar-body .form-select { width: auto; }
.saas-toolbar-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-secondary);
}
.saas-toolbar-foot .saas-toolbar-foot-label {
  color: var(--text-tertiary);
  font-weight: 600;
  margin-right: 8px;
}
@media (max-width: 640px) {
  .saas-toolbar { padding: 14px 14px 16px; }
  .saas-toolbar-title { font-size: 12.5px; }
  .saas-toolbar-sub { font-size: 11.5px; width: 100%; margin-left: 0; }
  .saas-toolbar-body { gap: 8px; }
  .saas-toolbar-body .form-input,
  .saas-toolbar-body input[type="text"],
  .saas-toolbar-body input[type="date"] { min-width: 100%; flex: 1 1 100%; }
}



/* 일일분석 페이지(lim-row): 모바일에서 햄버거(토글)와 한도박스를 같은 줄에 — 헤더 가로배치 */
@media (max-width: 768px) {
  body.lim-row .header { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; column-gap: 8px !important; row-gap: 6px !important; }
  body.lim-row .header .header-left { flex: 0 0 auto !important; width: auto !important; max-width: none !important; order: 0 !important; }
  body.lim-row .header .header-actions { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; order: 1 !important; }
  /* 한도박스가 header-actions 첫 줄을 혼자 차지 → 등급/레벨/아이디는 다음 줄로 */
  body.lim-row .header .header-actions > .header-limit-box { flex: 0 0 100% !important; width: 100% !important; justify-content: center !important; }
}


/* ═══ SaaS 폴리시: KPI 카드 고급화 — 숫자 강조 + 지표별 상단 컬러 액센트 ═══ */
.hero-kpi {
  border-radius: 14px !important;
  padding: 18px 18px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  position: relative !important;
}
.hero-kpi::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--border) !important;
}
.hero-kpi:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
.kpi-label { font-size: 12px !important; font-weight: 600 !important; }
.kpi-ico { width: 30px !important; height: 30px !important; border-radius: 8px !important; font-size: 13px !important; }
.kpi-value { font-size: 30px !important; font-weight: 800 !important; }
.kpi-unit { font-size: 13px !important; margin-left: 3px !important; font-weight: 600 !important; }
.kpi-spark { height: 34px !important; margin-top: 8px !important; }
/* 지표별 상단 컬러 액센트 (:has 미지원 브라우저는 회색 액센트로 graceful) */
.hero-kpi:has(.kpi-ico-ok)::before      { background: #6B6198 !important; }
.hero-kpi:has(.kpi-ico-up)::before      { background: #E74C3C !important; }
.hero-kpi:has(.kpi-ico-down)::before    { background: #3498DB !important; }
.hero-kpi:has(.kpi-ico-primary)::before { background: var(--primary) !important; }/* [2026-08-08] 전역 토큰은 css/tokens.css 로 이관. 여기서 재정의하지 말 것. *//* [2026-08-08] 전역 토큰은 css/tokens.css 로 이관. 여기서 재정의하지 말 것. */

/* ── 2. 배경 메시 제거 — radial gradient 장식은 구식, 플랫하게 ── */
body::before {
  background: none !important;
}

/* ── 3. 타이포 폴리시 — 헤딩 자간 죄어 또렷하게 ── */
h1, h2, h3 { letter-spacing: -0.02em; }

/* ── 4. 버튼 폴리시 — 라운드 축소(덜 둥글둥글) + 액센트 포커스 링 ── */
.btn { border-radius: 9px !important; }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.btn-secondary {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover {
  background: var(--card-hover) !important;
  border-color: var(--border) !important;
}

/* ── 5. 테이블 폴리시 — 행마다 깔리던 그림자 제거(노이즈), 헤더 차분하게 ── */
.data-table tbody tr { box-shadow: none !important; }
.data-table th {
  font-size: 12px !important;
  font-weight: 600;
  color: var(--text-tertiary) !important;
  letter-spacing: 0.01em;
}

/* ── 6. 인풋/셀렉트 폴리시 — 포커스 시 액센트 링 (페이지 CSS가 덮을 수 있게 !important 없음) ── */
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="search"]:focus, input[type="date"]:focus,
input[type="tel"]:focus, input[type="url"]:focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── 7. 모달 폴리시 — 라운드·보더·그림자 통일 ── */
.modal-content {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── 8. stat-icon — 구식 그라데이션 → 플랫 액센트 틴트 ── */
.stat-icon {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

/* ── 9. 스크롤바 — 얇고 무채색 (사이드바 nav는 기존 숨김 룰이 더 구체적이라 유지됨) ── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* ── 10. 텍스트 선택 색 — 액센트 틴트 ── */
::selection { background: var(--primary-soft); }

/* ── 11. 캘린더뷰 저장수 폰트 — 캘린더뷰만 대상(목록 표·그리드는 건드리지 않음) ──
   PC 10px, 모바일 9.5px (직전 9/8.5 에서 조금 키움). */
.calendar-cell div[data-column="savecount"],
.calendar-cell div[data-column="savecount"] span {
  font-size: 10px !important;
}
@media (max-width: 768px) {
  .calendar-cell div[data-column="savecount"],
  .calendar-cell div[data-column="savecount"] span {
    font-size: 9.5px !important;
  }
}

/* ── 11-1. 캘린더뷰 블↔저 간격 = 3px ──
   .cell-scores-container 의 top 여백이 결정(JS 인라인 margin/padding 각 2px=4px).
   이 값은 저가 없는 셀의 블↔점(점수) 간격과 동일 — 같은 컨테이너 여백이라 분리 불가.
   저↔점수 간격(savecount margin-bottom 2px)은 원래대로 유지. */
.calendar-cell .cell-scores-container {
  margin-top: 3px !important;
  padding-top: 0 !important;
}
/* 저 ↔ 점수 간격 (savecount margin-bottom 4 + 점수 div 인라인 1 = 총 5px. 직전 7px에서 미세 축소) */
.calendar-cell div[data-column="savecount"] {
  margin-bottom: 4px !important;
}
/* 저가 없는 셀: 블↔점수(종) 간격 — 점수 div 가 first-child 일 때만 적용
   (저가 있을 땐 savecount 가 first-child 라 이 규칙 미적용 → 위 규칙과 충돌 없음).
   점수 div 인라인 margin-top:1px 덮음. 총 블↔종 = 컨테이너 3px + 3px = 6px (직전 8px에서 미세 축소). */
.calendar-cell .cell-scores-container > div:first-child:not([data-column="savecount"]) {
  margin-top: 3px !important;
}