/* ============================================================
   매출관리 — App Styles
   Bootstrap override + design-system integration
   ============================================================ */

/* ── 액센트 바 그라데이션 ──────────────────────────────────────
   코랄 → 세이지. 앱 전체의 액센트 바(히어로 상단, KPI 좌측,
   월별요약 카드 상단, ML 카드)는 모두 이 토큰을 사용한다. */
:root {
  --accent-bar:   linear-gradient(90deg, var(--accent1) 0%, var(--accent3) 100%);
  --accent-bar-v: linear-gradient(180deg, var(--accent1) 0%, var(--accent3) 100%);
}

/* ── 다크 모드 토큰 오버라이드 ────────────────────────────────── */
html[data-theme="dark"] {
  --bg:        #1a1614;       /* 깊은 다크 브라운 (cream의 다크 버전) */
  --surface:   #221d1a;       /* 카드 배경 */
  --surface2:  #2a2422;       /* 중첩 표면 */
  --text:      #F2EBE3;       /* 본문 — 따뜻한 화이트 */
  --text-sub:  #B0A299;       /* 보조 텍스트 */
  --border:        rgba(160,130,110,0.16);
  --border-strong: rgba(160,130,110,0.30);
  --accent1-bg-soft:   rgba(200,90,66,0.14);
  --accent1-bg-mid:    rgba(200,90,66,0.20);
  --accent1-bg-strong: rgba(200,90,66,0.30);
  --accent1-border:    rgba(200,90,66,0.40);
  --accent1-focus:     rgba(200,90,66,0.20);
  --accent3-bg-soft:   rgba(61,122,101,0.22);
  --accent3-bg-mid:    rgba(61,122,101,0.30);
  --accent3-border:    rgba(61,122,101,0.55);
}
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-muted.small {
  color: var(--text-sub) !important;
}
/* Bootstrap 5.3은 data-bs-theme="dark"가 켜지면 자기 변수(--bs-table-bg 등)를
   쿨 그레이 톤으로 자동 전환. 우리 따뜻한 브라운 팔레트에 맞도록 토큰을 덮어씀. */
html[data-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,0.025);
  --bs-table-hover-bg: var(--surface2);
  --bs-emphasis-color: var(--text);
  --bs-emphasis-color-rgb: 242, 235, 227;
}
html[data-theme="dark"] .table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .form-select option { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .badge.bg-light { background: var(--surface2) !important; color: var(--text-sub) !important; }
html[data-theme="dark"] .meta-pill { background: rgba(61,122,101,0.28); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--text-sub); }
html[data-theme="dark"] .pagination .page-link {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-sub) !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background: var(--accent1) !important;
  border-color: var(--accent1) !important;
  color: white !important;
}
html[data-theme="dark"] code {
  background: rgba(200,90,66,0.12);
  color: var(--accent1);
  padding: 1px 5px;
  border-radius: 4px;
}
/* KPI 카드 우상단 그라디언트 다크 톤 */
html[data-theme="dark"] .row-kpi > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(200,90,66,0.18), transparent 70%); }
html[data-theme="dark"] .row-kpi-warning > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(196,136,42,0.16), transparent 70%); }
html[data-theme="dark"] .row-kpi-success > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(61,122,101,0.18), transparent 70%); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] thead.table-light {
  background: var(--surface2) !important;
  color: var(--text-sub) !important;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';   /* 가독성 향상 */
}

/* 텍스트 선택 시 코랄 톤 */
::selection { background: var(--accent1-bg-mid); color: var(--text); }

main.container-fluid {
  max-width: 1400px;
  padding-top: var(--space-8) !important;       /* 32px - 진입 호흡감 */
  padding-bottom: var(--space-12) !important;   /* 48px */
}

/* ── 페이지 헤더 영역 — 더 강하게 ───────────────────────────── */
h1.h3 {
  font-size: var(--fs-2xl) !important;          /* 26px */
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.028em;
  line-height: 1.2;
  margin-bottom: 0.25rem !important;
}
h1.h4 {
  font-size: var(--fs-xl) !important;           /* 22px */
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
/* 페이지 부제 (h1 바로 아래 .text-muted.small) */
h1 + p.text-muted.small,
h1.h3 + p.text-muted.small {
  font-size: 0.82rem !important;
  font-weight: 500;
  color: var(--text-sub) !important;
  letter-spacing: 0;
  text-transform: none;
}

/* ── 섹션 간 호흡 강화 ───────────────────────────────────── */
.row.mb-3 + .row.mb-3 { margin-top: var(--space-2); }   /* KPI 행끼리는 살짝 가깝게 */

/* ── 페이지 헤더 영역 ──────────────────────────────────────── */
.page-header { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.page-header h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.2 !important;
}
.page-header-meta { display: inline-flex; align-items: center; gap: var(--space-3); }
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--accent3-bg-soft);
  color: var(--accent3);
  border: 1px solid var(--accent3-border);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}
.meta-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent3);
  box-shadow: 0 0 0 3px var(--accent3-bg-soft);
  animation: meta-pulse 2s ease-in-out infinite;
}
@keyframes meta-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.meta-divider { width: 1px; height: 14px; background: var(--border-strong); }

/* ── 사이드바 레이아웃 ──────────────────────────────────────
   데스크톱: 좌측 240px 고정 사이드바 + 우측 main
   모바일:    사이드바 슬라이드 인 (햄버거 토글)
*/
:root {
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 52px;
}
body.has-sidebar { padding-left: var(--sidebar-w); transition: padding-left 0.22s ease-out; }
body.has-sidebar.sidebar-collapsed { padding-left: var(--sidebar-w-collapsed); }
body.has-sidebar .app-main {
  max-width: 1400px;
  padding-left: var(--space-8) !important;
  padding-right: var(--space-8) !important;
}

.app-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: width 0.22s ease-out;
}
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.sidebar-top {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-right: var(--space-3);
}
.sidebar-collapse-btn {
  background: none;
  border: none;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--text-sub);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease-out;
}
.sidebar-collapse-btn:hover { background: var(--surface2); color: var(--text); }
body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-5) var(--space-5);
  text-decoration: none;
  color: var(--text);
  flex: 1;
  border-bottom: none;
}
.sidebar-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--accent1);
  color: white;
  border-radius: 8px;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.sidebar-brand-text {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sidebar-brand:hover .sidebar-brand-text { color: var(--accent1); }

.sidebar-nav { flex: 1; padding: var(--space-3) var(--space-3); }
.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub);
  padding: var(--space-4) var(--space-3) var(--space-2);
  margin-top: var(--space-2);
}
.sidebar-section-label:first-child { margin-top: 0; padding-top: var(--space-2); }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-sub);
  text-decoration: none;
  margin-bottom: 1px;
  transition: all 0.15s ease-out;
  position: relative;
}
.sidebar-link i {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.sidebar-link:hover {
  background: var(--surface2);
  color: var(--text);
}
.sidebar-link:hover i { opacity: 1; }
.sidebar-link.active {
  background: var(--accent1-bg-soft);
  color: var(--accent1);
  font-weight: 600;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--accent1);
  border-radius: 2px;
}
.sidebar-link.active i { opacity: 1; color: var(--accent1); }
.sidebar-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  background: var(--surface2);
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.sidebar-link.active .sidebar-count { background: var(--accent1-bg-soft); color: var(--accent1); }
body.sidebar-collapsed .sidebar-count { display: none; }

/* ── Collapse 상태 — 아이콘만 표시 ──────────────────────────── */
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .sidebar-link span,
body.sidebar-collapsed .sidebar-user-info,
body.sidebar-collapsed .sidebar-search-kbd,
body.sidebar-collapsed .sidebar-search input,
body.sidebar-collapsed .sidebar-collapse-btn { display: none; }
body.sidebar-collapsed .sidebar-brand { padding: var(--space-5) 0; justify-content: center; }
body.sidebar-collapsed .sidebar-search { padding: var(--space-2); justify-content: center; }
body.sidebar-collapsed .sidebar-search-icon { position: static; }
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px; }
body.sidebar-collapsed .sidebar-section-label { padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--border); margin-top: 0; }
body.sidebar-collapsed .sidebar-section-label::after { content: '·'; display: block; text-align: center; }
body.sidebar-collapsed .sidebar-user { padding: 4px; justify-content: center; }
body.sidebar-collapsed .sidebar-user-avatar { margin: 0; }
body.sidebar-collapsed .sidebar-logout { display: none; }

/* Collapsed 사이드바 메뉴 hover 시 우측 floating tooltip */
body.sidebar-collapsed .sidebar-link {
  position: relative;
  overflow: visible;
}
body.sidebar-collapsed .sidebar-link::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--text);
  color: var(--surface);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(28,23,20,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  z-index: 200;
}
body.sidebar-collapsed .sidebar-link::before {
  content: '';
  position: absolute;
  left: calc(100% + 3px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  z-index: 200;
}
body.sidebar-collapsed .sidebar-link:hover::after,
body.sidebar-collapsed .sidebar-link:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── 사이드바 검색 ────────────────────────────────────────── */
.sidebar-search {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.sidebar-search input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 32px 7px 30px;
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  transition: all 0.15s ease-out;
}
.sidebar-search input::placeholder { color: var(--text-sub); }
.sidebar-search input:focus {
  background: var(--surface);
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px var(--accent1-focus);
}
.sidebar-search-icon {
  position: absolute;
  left: calc(var(--space-4) + 10px);
  top: 50%; transform: translateY(-50%);
  color: var(--text-sub);
  font-size: 0.85rem;
  pointer-events: none;
}
.sidebar-search-kbd {
  position: absolute;
  right: calc(var(--space-4) + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-sub);
  pointer-events: none;
}
.sidebar-search-results {
  display: none;
  position: absolute;
  top: 100%; left: var(--space-3); right: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28,23,20,0.12);
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 110;
}
.sidebar-search-results.show { display: block; }
.sidebar-search-result-group {
  padding: var(--space-2) var(--space-3) 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-sub);
}
.sidebar-search-result-item {
  display: block;
  padding: 7px var(--space-3);
  font-size: 0.82rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  margin: 0 4px;
}
.sidebar-search-result-item:hover,
.sidebar-search-result-item.is-active { background: var(--accent1-bg-soft); color: var(--accent1); }
.sidebar-search-result-item.is-active { outline: 1.5px solid var(--accent1-border); outline-offset: -1.5px; }
.sidebar-search-result-item .text-muted { font-size: 0.7rem; }
.sidebar-search-empty {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--text-sub);
  font-size: 0.78rem;
}

.sidebar-footer { border-top: 1px solid var(--border); padding: var(--space-3); }
.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: none; border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  margin-bottom: var(--space-2);
  transition: all 0.15s ease-out;
}
.theme-toggle:hover { background: var(--surface2); color: var(--text); border-color: var(--border-strong); }
.theme-toggle.is-active {
  background: var(--accent1-bg-soft);
  color: var(--accent1);
  border-color: var(--accent1-border);
}
.theme-toggle .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; }
body.sidebar-collapsed .theme-toggle { padding: 7px; justify-content: center; }
body.sidebar-collapsed .theme-toggle span { display: none; }
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface2);
}
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
  text-transform: uppercase;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-meta { font-size: 0.68rem; color: var(--text-sub); }
.sidebar-logout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: var(--text-sub);
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s ease-out;
}
.sidebar-logout:hover { background: var(--accent1-bg-soft); color: var(--accent1); }

/* ── 모바일 토글 ────────────────────────────────────────── */
.mobile-topbar {
  position: sticky; top: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  z-index: 90;
}
.sidebar-toggle {
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: 8px;
  font-size: 1.3rem;
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-toggle:hover { background: var(--surface2); }
.mobile-topbar-title { font-size: 0.95rem; font-weight: 700; }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(28,23,20,0.4);
  z-index: 99;
}

@media (max-width: 767px) {
  body.has-sidebar { padding-left: 0; }
  body.has-sidebar .app-main {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
    padding-top: var(--space-4) !important;
  }
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
}
@media (min-width: 768px) {
  .mobile-topbar { display: none; }
}

/* ── Cards (3-tier elevation) ─────────────────────────────────
   - 기본 카드: 가벼운 그림자
   - .row-kpi 안 카드: 중간 그림자 (정보 강조)
   - .card-feature: 가장 깊은 그림자 (메인 KPI 등)
*/
/* 기본: 보더만으로 카드 정의 (정보 카드는 정적이므로 그림자 X)
   강조는 KPI 좌측 컬러바, 호버 시 그림자, 차트/테이블 카드 깊이로 분리 */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out;
}
/* KPI 카드 — 보더는 동일, 좌측 컬러바와 우상단 그라디언트로만 강조 */
.row-kpi .card,
.row-kpi-warning .card,
.row-kpi-success .card {
  border-color: var(--border-strong) !important;
}
/* 그라데이션 제외 카드 — flat, 차트, 테이블 */
.card.card-flat,
.card:has(canvas),
.card:has(.table-responsive) {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 1px 2px rgba(28,23,20,0.03), 0 8px 24px -12px rgba(28,23,20,0.08) !important;
}
html .card.card-flat { background: var(--surface) !important; border-color: var(--border-strong) !important; }

/* ── KPI 카드 (.row-kpi / .row-kpi-warning) ─────────────────
   좌측 컬러 바 + 옅은 background tint로 시각적 리듬 추가 */
.row-kpi > [class*="col"] > .card,
.row-kpi-warning > [class*="col"] > .card,
.row-kpi-success > [class*="col"] > .card {
  border-left: none !important;
  position: relative;
  overflow: hidden;
}
/* 우상단에 brand color 점진 그라디언트 — 매우 옅은 시각적 깊이 */
.row-kpi > [class*="col"] > .card::before,
.row-kpi-warning > [class*="col"] > .card::before,
.row-kpi-success > [class*="col"] > .card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(35%, -35%);
  opacity: 0.35;
}
/* 좌측 액센트 바 — 코랄→세이지 그라데이션 (::before는 우상단 글로우가 쓰고 있음) */
.row-kpi > [class*="col"] > .card::after,
.row-kpi-warning > [class*="col"] > .card::after,
.row-kpi-success > [class*="col"] > .card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent-bar-v);
  pointer-events: none;
}
.row-kpi > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(200,90,66,0.10), transparent 70%); }
.row-kpi-warning > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(196,136,42,0.09), transparent 70%); }
.row-kpi-success > [class*="col"] > .card::before { background: radial-gradient(circle, rgba(61,122,101,0.10), transparent 70%); }
/* KPI 카드 안 모든 콘텐츠는 ::before 위에 (z-index) */
.row-kpi .card-body, .row-kpi-warning .card-body, .row-kpi-success .card-body { position: relative; z-index: 1; }

/* ── 카드 안 섹션 제목 액센트 ──────────────────────────────
   사이드바 active 바와 동일한 시각 언어. 에디토리얼한 톤. */
.card h2.h6 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.card h2.h6::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.95em;
  border-radius: 2px;
  background: var(--accent1);
  flex-shrink: 0;
}

/* ── 섹션 라벨 (페이지 안 그룹 구분) ───────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.section-label.section-label-warning { color: var(--text-sub); }
.section-label.section-label-warning::after { background: var(--border-strong); opacity: 1; }

/* ── Dashboard first screen ────────────────────────────────── */
.dashboard-hero {
  display: block;
}
.dashboard-hero-main,
.dashboard-filter-panel {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(28,23,20,0.05), 0 12px 28px -16px rgba(28,23,20,0.18);
}
.dashboard-hero-main {
  padding: clamp(20px, 2.1vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 226px;
  overflow: hidden;
  position: relative;
}
.dashboard-hero-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-bar);
  pointer-events: none;
}
.dashboard-hero-main::after {
  content: '';
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 180px;
  height: 180px;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.35;
  transform: translate(28%, 32%);
  pointer-events: none;
}
.dashboard-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.dashboard-eyebrow span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-sub);
  background: color-mix(in srgb, var(--surface2) 78%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
}
.dashboard-revenue-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.hero-kpi-stack {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  gap: 8px;
}
.hero-kpi-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  /* 보고서 매출액 컬럼과 같은 연하고 가는 사선 해칭 */
  background-color: color-mix(in srgb, var(--surface2) 58%, transparent);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(200,90,66,0.045) 0,
    rgba(200,90,66,0.045) 1px,
    transparent 1px,
    transparent 4px
  );
  min-width: 0;
}
.hero-kpi-item:first-child {
  border-color: rgba(200,90,66,0.32);
  background-color: var(--accent1-bg-soft);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(200,90,66,0.06) 0,
    rgba(200,90,66,0.06) 1px,
    transparent 1px,
    transparent 4px
  );
}
.hero-kpi-item span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}
.hero-kpi-item strong {
  font-size: clamp(1.4rem, 1.95vw, 2.1rem);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.05em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-kpi-ratio {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
  margin-left: 6px;
  letter-spacing: 0;
}
.dashboard-label {
  color: var(--text-sub);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.dashboard-revenue {
  color: var(--text);
  font-size: 3.15rem;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0;
  font-variant-numeric: normal;
  font-feature-settings: 'pnum' 1, 'kern' 1;
}
.dashboard-currency {
  display: inline-block;
  font-size: 0.84em;
  font-weight: 650;
  margin-right: 0;
}
.dashboard-revenue-trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--text-sub);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.dashboard-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface2);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-trend.is-up {
  color: var(--accent3);
  background: var(--accent3-bg-soft);
}
.dashboard-trend.is-down {
  color: var(--accent1);
  background: var(--accent1-bg-soft);
}
.dashboard-trend.is-neutral {
  color: var(--text-sub);
}
.dashboard-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.dashboard-hero-stats div {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.dashboard-hero-stats span {
  display: block;
  color: var(--text-sub);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 5px;
}
.dashboard-hero-stats strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: normal;
  font-feature-settings: 'pnum' 1, 'kern' 1;
}
/* ── Dashboard hero split (회사별 분할) ──────────────────────── */
.dashboard-hero-split {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.dashboard-hero-left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.dashboard-hero-right {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--space-6);
  margin-left: var(--space-6);
  border-left: 1px solid var(--border);
}
.dashboard-company-bar {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface2) 58%, transparent);
}
.dashboard-bd-labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 7px;
}
.dashboard-bd-label-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.dashboard-bd-label-right {
  flex-direction: row-reverse;
}
.dashboard-bd-divider {
  color: var(--border);
  font-weight: 300;
  font-size: 0.72rem;
}
.dashboard-bd-amount {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dashboard-bd-combined-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.dashboard-bd-combined-bar div {
  height: 100%;
  border-radius: 999px;
}
.dashboard-breakdown-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.dashboard-bd-row {
  margin-bottom: var(--space-4);
}
.dashboard-bd-row:last-child {
  margin-bottom: 0;
}
.dashboard-bd-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.dashboard-bd-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dashboard-bd-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.dashboard-bd-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
}
.dashboard-bd-bar-wrap {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.dashboard-bd-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.dashboard-bd-sub {
  font-size: 0.68rem;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.dashboard-filter-panel {
  padding: var(--space-3) var(--space-4);
}
.dashboard-filter-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dashboard-filter-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.dashboard-filter-title i {
  color: var(--accent1);
}
.dashboard-filter-controls {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.dashboard-filter-field {
  width: 160px;
  min-width: 140px;
}
.dashboard-filter-action {
  width: 92px;
  flex-shrink: 0;
}
.dashboard-filter-switch {
  display: flex;
  align-items: center;
  min-height: 31px;
  position: relative;
  padding: 7px 12px 7px 58px;
  margin: 0 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.dashboard-filter-switch .form-check-input {
  position: absolute;
  left: 12px;
  top: 50%;
  margin-left: 0;
  margin-top: 0;
  transform: translateY(-50%);
}
.dashboard-filter-switch .form-check-label {
  color: var(--text-sub);
  font-weight: 700;
}

/* ── ML 예측 섹션 ───────────────────────────────────── */
.dashboard-ml .card,
.dashboard-ml-empty .card {
  position: relative;
}
.dashboard-ml .card::after,
.dashboard-ml-empty .card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent-bar-v);
  pointer-events: none;
}
.ml-kpi-card {
  padding: 14px 16px;
  /* hero KPI 카드와 같은 연하고 가는 사선 해칭 */
  background-color: var(--surface2, rgba(0,0,0,0.02));
  background-image: repeating-linear-gradient(
    135deg,
    rgba(200,90,66,0.045) 0,
    rgba(200,90,66,0.045) 1px,
    transparent 1px,
    transparent 4px
  );
  border-radius: 10px;
  height: 100%;
}
.ml-kpi-card-cur { border-left: 4px solid var(--accent1); }
.ml-kpi-card-rem { border-left: 4px solid var(--accent4, #C4882A); }
.ml-kpi-card-nxt { border-left: 4px solid var(--accent3, #3D7A65); }
.ml-kpi-card-acc { border-left: 4px solid var(--muted, #8A7A72); }
.ml-kpi-label {
  font-size: 0.72rem;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 6px;
}
.ml-kpi-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ml-kpi-meta {
  font-size: 0.72rem;
  color: var(--text-sub);
  margin-top: 4px;
}
.ml-progress-bar {
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ml-progress-fill {
  height: 100%;
  background: var(--accent1);
  border-radius: 999px;
  transition: width 0.3s;
}
.ml-by-company .ml-co-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface2, rgba(0,0,0,0.02));
  border-radius: 6px;
  font-size: 0.82rem;
}
.ml-co-name {
  font-weight: 700;
  color: var(--text);
}
.ml-co-figures {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

/* KPI 카드 톤 — 대시보드 카드의 리듬(여백/라벨/숫자)을 모든 페이지에 동일 적용 */
.row-kpi .card-body,
.row-kpi-warning .card-body,
.row-kpi-success .card-body {
  min-height: 126px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* 3번째 이후 요소(배지+스파크라인, 캡션)만 바닥으로 밀어냄.
   라벨+숫자 2개뿐인 카드는 위쪽에 붙어 이미지와 같은 리듬이 된다. */
.row-kpi .card-body > :nth-child(n+3):last-child,
.row-kpi-warning .card-body > :nth-child(n+3):last-child,
.row-kpi-success .card-body > :nth-child(n+3):last-child {
  margin-top: auto;
}
.row-kpi .card,
.row-kpi-warning .card,
.row-kpi-success .card,
.dashboard-cost-kpi .card,
.card:has(#yearlyChart),
.card:has(#combinedChart),
.card:has(#dowChart),
.card:has(#originChart),
.card:has(#cutChart),
.card:has(.table.table-sm) {
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(28,23,20,0.04), 0 10px 24px -20px rgba(28,23,20,0.32) !important;
}
.row-kpi .card,
.row-kpi-warning .card,
.row-kpi-success .card {
  transition: transform 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out;
}
/* 호버 리프트는 클릭 가능한 KPI 카드(대시보드)에만 */
.dashboard-kpi .card:hover {
  transform: translateY(-1px);
  border-color: rgba(200,90,66,0.26) !important;
  box-shadow: 0 4px 14px rgba(28,23,20,0.08), 0 14px 28px -20px rgba(28,23,20,0.34) !important;
}
.row-kpi .text-muted.small:first-child,
.row-kpi-warning .text-muted.small:first-child,
.row-kpi-success .text-muted.small:first-child,
.dashboard-cost-kpi .text-muted.small:first-child {
  color: var(--text-sub) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.row-kpi .card-body > .h4,
.row-kpi-warning .card-body > .h4,
.row-kpi-success .card-body > .h4 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2) !important;
  font-size: 1.48rem !important;
  font-weight: 800 !important;
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
/* 스파크라인/추이 배지 없는 단순 KPI 행 — 여백 축소 */
.row-kpi-compact .card-body {
  min-height: 0;
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}
.row-kpi-compact .card-body > .h4 {
  margin-top: 0;
  margin-bottom: 0 !important;
  font-size: 1.28rem !important;
}
.dashboard-kpi .kpi-icon {
  width: 24px;
  height: 24px;
  font-size: 0.82rem;
  border-radius: 7px;
}
.dashboard-cost-kpi .card {
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(28,23,20,0.04), 0 1px 2px rgba(28,23,20,0.03) !important;
}
.dashboard-cost-kpi .card-body {
  min-height: 120px;
}
.dashboard-cost-kpi .h4.mb-1 {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: 0;
}

/* ── 수익성 요약 ───────────────────────────────────────────── */
.section-label-profit {
  color: var(--text-sub);
}
.profitability-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.profitability-main {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.profitability-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(180px, 0.7fr) minmax(200px, 1fr) minmax(200px, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: stretch;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}
.profitability-eyebrow {
  color: var(--text-sub);
  font-size: 0.76rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.profitability-label {
  color: var(--text-sub);
  font-size: 0.82rem;
  font-weight: 700;
}
.profitability-value {
  margin-top: 2px;
  color: var(--text);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.12;
}
.profitability-badge {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2);
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.profitability-badge.is-good,
.profitability-company-head .is-good {
  color: var(--accent3);
}
.profitability-badge.is-steady,
.profitability-company-head .is-steady {
  color: var(--text);
}
.profitability-badge.is-watch,
.profitability-company-head .is-watch {
  color: #B7791F;
}
.profitability-badge.is-loss,
.profitability-company-head .is-loss {
  color: var(--accent1);
}
.profitability-badge.is-empty,
.profitability-company-head .is-empty {
  color: var(--text-sub);
}
.profitability-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profitability-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
}
.profitability-metrics div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.profitability-metrics div:last-child {
  border-bottom: 0;
}
.profitability-metrics span {
  color: var(--text-sub);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.profitability-metrics strong {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
}
/* 스파크 2개를 메인 그리드의 3·4열로 직접 배치 (래퍼는 레이아웃에서 투명하게) */
.profitability-sparks {
  display: contents;
}
.profitability-spark-item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  border: 1px solid var(--border);
}
.profitability-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
}
.profitability-spark-head > span:first-child {
  color: var(--text-sub);
  font-size: 0.75rem;
  font-weight: 700;
}
.profitability-spark-canvas {
  display: block;
  width: 100%;
  height: 62px;
}
.profitability-side {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.profitability-company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}
.profitability-company-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 0.9rem;
  white-space: nowrap;
}
.profitability-company-head span {
  font-weight: 800;
}
.profitability-company-body {
  display: flex;
  gap: var(--space-3);
}
.profitability-company-body span {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .dashboard-filter-inner,
  .dashboard-filter-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .dashboard-filter-title {
    width: 100%;
  }
  .dashboard-filter-field {
    flex: 1 1 160px;
    width: auto;
  }
  .dashboard-filter-action {
    flex: 0 0 100px;
    width: auto;
  }
  .dashboard-filter-switch {
    margin-left: 0;
  }
  .profitability-main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .profitability-side {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 호버 효과는 클릭 가능한 카드(링크 안에 든 카드)에만 적용해 정보 카드와 구분 */
a .card:hover,
.card.card-clickable:hover {
  border-color: var(--accent1-border) !important;
  box-shadow: 0 8px 24px -8px rgba(28,23,20,0.12) !important;
  transform: translateY(-2px);
  cursor: pointer;
}
.card-body { padding: var(--space-5) var(--space-6) !important; }

/* ── 마이크로 인터랙션 — 통일된 transition ────────────────────── */
.btn, .form-select, .form-control, .page-link, .ds-app-nav-link, .badge {
  transition: all 0.18s ease-out !important;
}
.btn:active { transform: translateY(1px); }
.form-select:focus, .form-control:focus {
  border-color: var(--accent1) !important;
  box-shadow: 0 0 0 3px var(--accent1-focus) !important;
}
/* 버튼 호버 살짝 떠오름 */
.btn-dark:hover, .btn-outline-success:hover, .btn-outline-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(28,23,20,0.18) !important;
}

/* ── 키보드 포커스 — 통일된 코랄 링 (접근성) ─────────────────── */
.btn:focus-visible,
a:focus-visible,
.page-link:focus-visible,
.sidebar-link:focus-visible,
.theme-toggle:focus-visible,
.sidebar-collapse-btn:focus-visible,
.sidebar-toggle:focus-visible,
.upload-dropzone:focus-within {
  outline: 2px solid var(--accent1) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent1-focus) !important;
  border-radius: var(--radius-sm);
}
/* 마우스 클릭 후 잔류 포커스는 끔 (focus-visible만 표시) */
.btn:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.page-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none !important;
}
/* 카드 안 섹션 타이틀 (<h2 class="h6">) — 라벨이 아니라 타이틀로 읽히도록 키움.
   div.h6 (KPI 값 표시 등)는 영향 받지 않게 h2로만 스코프. */
h2.h6 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ── KPI Cards ────────────────────────────────────────────── */
.h4.mb-1, .h4.mb-0 {
  font-size: var(--fs-3xl) !important;         /* 32px */
  font-weight: 600 !important;                 /* 모던/우아 */
  color: var(--text) !important;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'cv11' 1;
}
.h5.mb-0, .h5.mb-1 {
  font-weight: 600 !important;
  letter-spacing: -0.035em;
  font-feature-settings: 'tnum' 1;
}
/* KPI 값 안의 ₩, kg, 건, 곳 등 단위 텍스트 — 약간 가볍게 */
.h4 small,
.h4 .kpi-unit {
  font-weight: 400;
  font-size: 0.7em;
  color: var(--text-sub);
  margin-left: 2px;
  letter-spacing: 0;
}
/* 일반 .text-muted.small — 차분하게 */
.text-muted.small {
  font-size: var(--fs-xs) !important;
  color: var(--text-sub) !important;
  font-weight: 500;
}
/* KPI 카드의 첫 번째 라벨에만 강조 (uppercase + 진한색) — 시선 유도 */
.row-kpi .card-body > .text-muted.small:first-child,
.row-kpi-warning .card-body > .text-muted.small:first-child,
.row-kpi-success .card-body > .text-muted.small:first-child {
  font-size: 0.7rem !important;
  color: #6B5A50 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
/* 다크모드 — 위 하드코딩 색이 다크 배경에서 저대비가 되므로 밝은 웜 톤으로 덮음 */
html[data-theme="dark"] .row-kpi .card-body > .text-muted.small:first-child,
html[data-theme="dark"] .row-kpi-warning .card-body > .text-muted.small:first-child,
html[data-theme="dark"] .row-kpi-success .card-body > .text-muted.small:first-child {
  color: #C9BAB0 !important;
}

/* ── Badges (trend) ───────────────────────────────────────── */
.badge.bg-success-subtle {
  background: var(--accent3-bg-soft) !important;
  color: var(--accent3) !important;
  border: 1px solid var(--accent3-border);
  font-weight: 600;
}
.badge.bg-danger-subtle {
  background: var(--accent1-bg-soft) !important;
  color: var(--accent1) !important;
  border: 1px solid var(--accent1-border);
  font-weight: 600;
}
.badge.bg-light { background: var(--surface2) !important; color: var(--text-sub) !important; }
.badge.bg-secondary { background: rgba(0,0,0,0.1) !important; color: var(--text) !important; }
.badge.bg-success { background: var(--accent3) !important; }
.badge.bg-warning { background: var(--accent4) !important; color: #fff !important; }
.badge.bg-danger  { background: var(--accent1) !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-dark {
  background: var(--accent1) !important;
  border-color: var(--accent1) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition-fast) !important;
}
.btn-dark:hover {
  background: var(--accent2) !important;
  border-color: var(--accent2) !important;
}
.btn-outline-secondary {
  border-color: var(--border-strong) !important;
  color: var(--text-sub) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-outline-secondary:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.btn-outline-success {
  border-color: var(--accent3-border) !important;
  color: var(--accent3) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-outline-success:hover {
  background: var(--accent3-bg-soft) !important;
  color: var(--accent3) !important;
}

/* ── Forms ────────────────────────────────────────────────── */
/* 입력 컨트롤은 클릭 가능함이 분명히 보이도록 --border-strong 사용
   (정적 카드는 --border, 인터랙티브 요소는 --border-strong) */
.form-select, .form-control {
  border-color: var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
  font-family: var(--font-sans);
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}
.form-select:hover, .form-control:hover {
  border-color: var(--text-sub) !important;
}
.form-select:focus, .form-control:focus {
  border-color: var(--accent1) !important;
  box-shadow: 0 0 0 3px var(--accent1-focus) !important;
}
.form-label.small {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  letter-spacing: 0;
}
.form-text { color: var(--text-sub) !important; font-size: var(--fs-xs) !important; }

/* ── Tables ───────────────────────────────────────────────── */
.table {
  color: var(--text) !important;
  font-size: var(--fs-sm) !important;
  margin-bottom: 0 !important;
}
.table thead th {
  background: var(--surface2) !important;
  color: var(--text-sub) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  border-bottom: 1px solid var(--border-strong) !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  white-space: nowrap;
}
/* 카드가 .table-responsive를 직접 감싼 큰 목록 테이블 — sticky thead */
.card > .table-responsive {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}
.card > .table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
/* zebra 행 — 짝수 행에 밝은 회색 */
.table tbody tr:nth-child(even) td {
  background: #f7f7f7;
}
.table tbody tr:hover td,
.table-hover tbody tr:hover td {
  background: var(--surface2) !important;
  cursor: default;
}
.table tbody tr:has(a):hover td,
.table-hover tbody tr:has(a):hover td {
  background: var(--accent1-bg-soft) !important;
}
.table td {
  border-color: var(--border) !important;
  color: var(--text);
  vertical-align: middle;
  transition: background-color 0.12s ease-out;
}
/* 링크가 들어간 행은 커서 포인터 */
.table tbody tr:has(a) td:has(a:not([class*="text-decoration"])) { cursor: pointer; }
/* table-sm는 패딩 조정 */
.table-sm td, .table-sm th { padding: 0.5rem 0.625rem; }

/* 카드가 .table-responsive를 직접 감싼 경우 — 카드 모서리와 셀이 붙지 않도록 좌우 패딩 부여 */
.card > .table-responsive .table > thead > tr > th:first-child,
.card > .table-responsive .table > tbody > tr > td:first-child,
.card > .table-responsive .table > tfoot > tr > td:first-child {
  padding-left: var(--space-5) !important;
}
.card > .table-responsive .table > thead > tr > th:last-child,
.card > .table-responsive .table > tbody > tr > td:last-child,
.card > .table-responsive .table > tfoot > tr > td:last-child {
  padding-right: var(--space-5) !important;
}

/* ── Progress Bars ────────────────────────────────────────── */
.progress { background: var(--surface2) !important; border-radius: var(--radius-pill) !important; }
.progress-bar.bg-dark { background: var(--accent1) !important; border-radius: var(--radius-pill) !important; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert-success {
  background: var(--accent3-bg-soft) !important;
  border-color: var(--accent3-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.alert-danger {
  background: var(--accent1-bg-soft) !important;
  border-color: var(--accent1-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
}
.alert-warning {
  background: rgba(196,136,42,0.08) !important;
  border-color: rgba(196,136,42,0.3) !important;
  border-radius: var(--radius) !important;
}

/* ── Numeric cells ──────────────────────────────────────────
   .text-end / .text-num이 붙은 셀과 .text-num 클래스는 자동 tabular.
   별도 클래스 없이도 우측 정렬 = 숫자라는 관례를 디자인 시스템 차원에서 지원. */
.table td.text-end,
.table th.text-end,
.table td.text-num,
.table th.text-num,
.text-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.text-num {
  text-align: right;
  font-family: var(--font-mono);
}

/* ── Footer ───────────────────────────────────────────────── */
footer.text-center {
  color: var(--text-sub) !important;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.05em;
}

/* ── 월별 요약 표 (대시보드) ─────────────────────────────────── */
.report-card {
  border-color: var(--border-strong) !important;
  overflow: hidden;
  margin-bottom: var(--space-5) !important;
}
.report-card .card-body {
  padding: 0 !important;
}
.report-card .card-body:has(.monthly-summary-tbl) {
  padding: 0 !important;
}
.report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.report-card-header h2.h6 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.report-card-header h2.h6 span {
  color: var(--text-sub);
  font-size: 0.88rem;
  font-weight: 600;
}
.report-date {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-sub);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.report-card .table-responsive {
  padding: var(--space-4);
  padding-top: var(--space-3);
}
.monthly-summary-tbl {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.monthly-summary-tbl th,
.monthly-summary-tbl td {
  white-space: nowrap;        /* 숫자/% 줄바꿈 방지 */
}
.monthly-summary-tbl thead th {
  font-size: 0.7rem !important;
  letter-spacing: 0;
  padding: 0.75rem 0.5rem !important;
  vertical-align: middle;
  line-height: 1.2;
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  color: var(--text-sub) !important;
  font-weight: 800;
}
.monthly-summary-tbl tbody td {
  font-size: 0.74rem;
  padding: 0.55rem 0.5rem;
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}
/* border-collapse:separate 라 마지막 행의 border-bottom과 tfoot의 border-top이
   합쳐지지 않고 두 겹으로 보인다 — 구분선은 tfoot 쪽 하나만 남긴다 */
.monthly-summary-tbl tbody tr:last-child td {
  border-bottom: 0;
}
.monthly-summary-tbl tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface2) 55%, transparent) !important;
}
.monthly-summary-tbl tbody tr:hover td {
  background: var(--accent1-bg-soft) !important;
}
.monthly-summary-tbl thead th.monthly-revenue-cell,
.monthly-summary-tbl tbody td.monthly-revenue-cell,
.monthly-summary-tbl tbody tr:nth-child(even) td.monthly-revenue-cell,
.monthly-summary-tbl tbody tr:hover td.monthly-revenue-cell,
.monthly-summary-tbl tfoot td.monthly-revenue-cell {
  background-color: rgba(32,36,42,0.028) !important;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(200,90,66,0.055) 0,
    rgba(200,90,66,0.055) 1px,
    transparent 1px,
    transparent 4px
  ) !important;
  border-left: 1px solid rgba(200,90,66,0.16);
  border-right: 1px solid rgba(200,90,66,0.16);
}
.monthly-summary-tbl thead th.monthly-revenue-cell,
.monthly-summary-tbl tfoot td.monthly-revenue-cell {
  background-color: rgba(32,36,42,0.052) !important;
}
html[data-theme="dark"] .monthly-summary-tbl tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.06) !important;
}
.monthly-summary-tbl tfoot td {
  background: var(--surface2) !important;
  border-top: 1px solid var(--border-strong) !important;
  font-size: 0.78rem;
  padding: 0.8rem 0.5rem;
  vertical-align: middle;
}
/* 카드 좌우 패딩 줄여서 표가 더 넓게 */
.card-body:has(.monthly-summary-tbl) {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}
/* 첫 컬럼(월) sticky — 가로 스크롤 시 라벨이 따라옴 */
.monthly-summary-tbl thead th:first-child,
.monthly-summary-tbl tbody td:first-child,
.monthly-summary-tbl tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}
.monthly-summary-tbl thead th:first-child {
  background: var(--surface2) !important;
  z-index: 3;
  box-shadow: 1px 0 0 var(--border);
}
.monthly-summary-tbl tbody td:first-child {
  background: var(--surface) !important;
  box-shadow: 1px 0 0 var(--border);
  font-weight: 700;
}
.monthly-summary-tbl tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--surface2) 55%, transparent) !important;
}
.monthly-summary-tbl tbody tr:hover td:first-child {
  background: var(--accent1-bg-soft) !important;
}
html[data-theme="dark"] .monthly-summary-tbl tbody tr:nth-child(even) td:first-child {
  background: rgba(255,255,255,0.06) !important;
}
.monthly-summary-tbl tfoot td:first-child {
  background: var(--surface2) !important;
  z-index: 2;
  box-shadow: 1px 0 0 var(--border-strong);
}
.monthly-summary-tbl tfoot td:first-child {
  color: var(--accent1);
  letter-spacing: 0;
  font-weight: 700;
}
@media (max-width: 767px) {
  .report-card-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .report-card .table-responsive {
    padding: var(--space-3);
    padding-top: var(--space-2);
  }
  .profitability-company {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ── Upload Dropzone ──────────────────────────────────────── */
.upload-dropzone {
  display: block;
  position: relative;
  background: var(--surface2);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  cursor: pointer;
  transition: all 0.18s ease-out;
  text-align: center;
  margin: 0;
}
.upload-dropzone input[type="file"] {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.upload-dropzone:hover {
  border-color: var(--accent1);
  background: var(--accent1-bg-soft);
}
.upload-dropzone.drag-over {
  border-color: var(--accent1);
  background: var(--accent1-bg-mid);
  transform: scale(1.005);
  box-shadow: 0 8px 24px -8px rgba(200,90,66,0.25);
}
.upload-dropzone-icon {
  font-size: 2.4rem;
  color: var(--accent1);
  display: block;
  margin-bottom: var(--space-3);
}
.upload-dropzone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.upload-dropzone-sub {
  font-size: 0.8rem;
  color: var(--text-sub);
}
.upload-dropzone.has-files {
  padding: var(--space-5);
  text-align: left;
}
.upload-dropzone.has-files .upload-dropzone-inner {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.upload-dropzone.has-files .upload-dropzone-icon {
  font-size: 1.4rem; margin-bottom: 0;
}
.upload-dropzone.has-files .upload-dropzone-title { font-size: 0.9rem; margin-bottom: 0; }
.upload-dropzone.has-files .upload-dropzone-sub { font-size: 0.72rem; }
.upload-dropzone-files {
  display: flex; flex-direction: column; gap: 6px;
}
.upload-file-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
}
.upload-file-chip i { color: var(--accent3); }
.upload-file-name { flex: 1; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-size { font-size: 0.72rem; color: var(--text-sub); font-family: var(--font-mono); }

/* ── KPI Sparkline ─────────────────────────────────────────── */
.kpi-spark {
  display: block;
  opacity: 0.85;
  flex-shrink: 0;
  max-width: 80px;
  height: 28px;
}
@media (max-width: 767px) {
  /* 모바일에서는 sparkline이 너무 작아 가독성 떨어짐 → 숨김 */
  .kpi-spark { display: none; }
}

/* KPI 링크 — 카드 전체 클릭 가능, 텍스트 색 상속 */
.kpi-link, .kpi-link:hover, .kpi-link:focus {
  color: inherit !important;
  display: block;
  height: 100%;
}
.kpi-link .card { height: 100%; }

/* ── KPI 트렌드 배지 옆 작은 설명 ────────────────────────────── */
.trend-note {
  font-size: 0.62rem;
  color: var(--text-sub);
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 1px;
  white-space: nowrap;
  display: inline-block;
}

/* ── KPI 카드 아이콘 (선택적, .kpi-icon 클래스로 표시) ───────────── */
.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent1-bg-soft);
  color: var(--accent1);
  font-size: 0.95rem;
  margin-right: var(--space-2);
  vertical-align: -6px;
}
.row-kpi-warning .kpi-icon {
  background: rgba(196,136,42,0.10);
  color: var(--accent4);
}
.row-kpi-success .kpi-icon {
  background: var(--accent3-bg-soft);
  color: var(--accent3);
}

/* ── 인사이트 페이지 ───────────────────────────────────────────
   대시보드 패턴(.dashboard-*, .row-kpi, .section-label)을 재사용하되
   분석 개요 헤로(.insights-overview-*)만 자체 스타일을 가집니다.
   대시보드의 "현재 상태" 헤로와 달리 분석 narrative + 전년 비교 구조입니다. */

.hhi-meter strong { letter-spacing: -0.02em; }

/* 분석 개요 헤로 — 좌: 헤드라인+순수익+비중바 / 우: 전년 동기 비교 */
.insights-overview {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(28,23,20,0.05), 0 12px 28px -16px rgba(28,23,20,0.18);
  padding: var(--space-5) var(--space-6) var(--space-5);
}
.insights-overview-headline {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.01em;
}
.insights-overview-headline .text-success { color: var(--accent3) !important; }
.insights-overview-headline .text-danger  { color: var(--accent1) !important; }

/* 지표 스트립 — 4개 지표 (값 + 전년 증감 인라인 + 보조 한 줄) */
.insights-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.insights-hero-stats > div {
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--border);
}
.insights-hero-stats > div:first-child { padding-left: 0; border-left: 0; }
.insights-hero-stats > div > span {
  display: block;
  color: var(--text-sub);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.insights-hero-stats .ihs-val {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.insights-hero-stats .ihs-val strong {
  color: var(--text);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.insights-hero-stats .ihs-val strong.text-danger { color: var(--accent1) !important; }
.insights-hero-stats .ihs-val em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.insights-hero-stats > div > small {
  display: block;
  margin-top: 4px;
  color: var(--text-sub);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 헤로 하단 풀폭 비중 바 (수수료 / 보관료 / 순수익) */
.insights-composition {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
}
.insights-composition-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-4);
  font-size: 0.72rem;
  margin-top: 6px;
}
.insights-composition-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-sub);
  font-weight: 700;
}
.insights-composition-item i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.insights-composition-item strong {
  color: var(--text);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.insights-composition-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.insights-composition-bar > div {
  height: 100%;
  transition: width 0.4s ease;
}
.insights-composition-bar > div:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.5);
}

@media (max-width: 991px) {
  .insights-hero-stats { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .insights-hero-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
  .insights-overview { padding: var(--space-4); }
  .insights-overview-headline { font-size: 1.1rem; }
}

/* ── 모바일 반응형 ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
  .dashboard-hero-main,
  .dashboard-filter-panel {
    padding: var(--space-4);
  }
  .dashboard-revenue-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-kpi-stack {
    width: 100%;
    flex-direction: column;
  }
  .hero-kpi-item {
    width: 100%;
    padding: 12px 14px;
  }
  .hero-kpi-item strong {
    font-size: 1.72rem;
  }
  .dashboard-revenue-trend {
    align-items: flex-start;
  }
  .dashboard-revenue {
    font-size: 2.1rem;
  }
  .dashboard-hero-stats {
    grid-template-columns: 1fr;
    margin-top: var(--space-4);
  }
  .dashboard-hero-stats div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }
  .dashboard-hero-stats span {
    margin-bottom: 0;
  }
  .dashboard-hero-split {
    flex-direction: column;
  }
  .dashboard-hero-right {
    flex: none;
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
  }
  .dashboard-bd-labels {
    flex-direction: column;
  }
  .dashboard-bd-label-right {
    flex-direction: row;
  }
  .dashboard-bd-divider,
  .dashboard-bd-amount {
    display: none;
  }
  /* 차트 높이를 화면 너비에 맞게 줄임 */
  .card-body > div[style*="height:400px"],
  .card-body > div[style*="height:380px"],
  .card-body > div[style*="height:360px"],
  .card-body > div[style*="height:320px"],
  .card-body > div[style*="height:300px"] {
    height: 240px !important;
  }
  /* 카드 본문 좌우 패딩 축소 */
  .card-body { padding: var(--space-4) var(--space-4) !important; }
  /* 페이지 제목 크기 축소 */
  h1.h3 { font-size: 1.25rem !important; }
  /* KPI 값 크기 축소 (모바일에선 작은 화면) */
  .h4.mb-1, .h4.mb-0 { font-size: 1.4rem !important; }
  /* 필터 폼 row gap 축소 */
  .card-body .row.g-2 { --bs-gutter-y: 0.5rem; }
  /* 헤더 높이 축소 */
  .ds-app-header-inner { padding: 0 var(--space-4); height: 52px; }
  .ds-app-brand { font-size: var(--fs-sm); }
  .ds-app-nav-link { padding: 4px 10px; font-size: var(--fs-xs); }
}

/* ── 인쇄 스타일 ──────────────────────────────────────────────── */
@media print {
  body { background: white; }
  body.has-sidebar { padding-left: 0 !important; }
  .app-sidebar,
  .mobile-topbar,
  .sidebar-backdrop,
  .ds-app-header,
  footer.text-center,
  form.card,
  .pagination,
  .btn,
  .form-check,
  .form-switch,
  .page-header-meta { display: none !important; }
  main.container-fluid,
  .app-main { padding: 0 !important; max-width: 100% !important; }
  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  .card:hover { transform: none !important; }
  canvas { max-height: 200px !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ── Links ────────────────────────────────────────────────── */
a.text-decoration-none.text-dark {
  color: var(--text) !important;
  transition: color 0.15s ease-out;
}
a.text-decoration-none.text-dark:hover {
  color: var(--accent1) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--accent1-border);
}
.table tbody a.text-decoration-none.text-dark:hover {
  text-decoration: underline !important;
}

/* ── fw-semibold amounts ──────────────────────────────────── */
.fw-semibold { color: var(--text) !important; }


/* ── 월별 요약 카드 회사별 상단 컬러 라인 ─────────────────── */
.ms-card-cattlefarm,
.ms-card-kfactory,
.ms-card-total { position: relative; overflow: hidden; }
.ms-card-cattlefarm::before,
.ms-card-kfactory::before,
.ms-card-total::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ms-card-cattlefarm::before,
.ms-card-kfactory::before,
.ms-card-total::before { background: var(--accent-bar); }
.ms-card-cattlefarm h2.h6::before,
.ms-card-kfactory h2.h6::before,
.ms-card-total h2.h6::before { display: none; }

/* ── 2026-07 대시보드 폴리싱 ─────────────────────────────────
   섹션 리듬(section-label), ML 메타 칩, 숫자+단위 위계,
   차트 카드 헤더 통일, 월별 표 진행중인 달 하이라이트 */

/* 차트 카드 헤더 — 헤어라인 구분선으로 본문과 분리 */
.chart-card-head {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.chart-card-head .h6 { letter-spacing: -0.01em; }

/* ML 헤더 메타 칩 */
.ml-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ml-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
.ml-meta-chip strong {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ml-meta-chip i { font-size: 0.78rem; opacity: 0.7; }
.ml-meta-chip-warn {
  border-color: rgba(196,136,42,0.45);
  background: rgba(196,136,42,0.10);
  color: var(--accent4, #C4882A);
}
.ml-meta-chip-link {
  color: var(--accent1);
  border-color: rgba(200,90,66,0.35);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ml-meta-chip-link:hover {
  background: var(--accent1-bg-soft, rgba(200,90,66,0.08));
  border-color: var(--accent1);
  color: var(--accent1);
}

/* ML KPI 카드 정밀화 — 값/단위 위계, 얇은 액센트, 호버 톤 */
.ml-kpi-card {
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}
.ml-kpi-card:hover { border-color: var(--border-strong); }
.ml-kpi-card-cur,
.ml-kpi-card-rem,
.ml-kpi-card-nxt,
.ml-kpi-card-acc { border-left-width: 3px; }
.ml-kpi-value { font-size: 1.42rem; letter-spacing: -0.025em; }
.ml-kpi-unit {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--text-sub);
  margin-left: 2px;
  letter-spacing: 0;
}
.ml-progress-bar { height: 5px; background: color-mix(in srgb, var(--text) 10%, transparent); }

/* 히어로 숫자 단위 */
.hero-kpi-unit {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 650;
  color: var(--text-sub);
  margin-left: 3px;
  letter-spacing: 0;
}

/* 월별 요약 표 — 진행 중인 달 하이라이트 */
/* 위/아래 인셋 라인은 쓰지 않음 — 각 행이 이미 border-bottom을 가지고 있어
   나란히 겹치면 선이 두 겹으로 보인다. 톤 + 좌측 바만으로 강조. */
.monthly-summary-tbl tbody tr.is-cur-month td:not(.monthly-revenue-cell),
.monthly-summary-tbl tbody tr.is-cur-month:hover td:not(.monthly-revenue-cell),
html[data-theme="dark"] .monthly-summary-tbl tbody tr.is-cur-month td:not(.monthly-revenue-cell) {
  background-color: var(--accent1-bg-soft, rgba(200,90,66,0.07)) !important;
}
.monthly-summary-tbl tbody tr.is-cur-month td:first-child {
  box-shadow: inset 3px 0 0 var(--accent1), 1px 0 0 var(--border);
}
.cur-month-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent1);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}

/* ── 비용 페이지 — 구성 도트 ── */
.cost-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }