/* ===== YMPC 매장 관리 시스템 스타일 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #eef2ff;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --purple: #a855f7;
  --orange: #f97316;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: #e2e8f0;
  --text: #1e293b;
  --text-sub: #64748b;
  --text-light: #94a3b8;
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 60px;
  --header-h: 70px;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

html { font-size: 14px; }
body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== 스크롤바 ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== 사이드바 ===== */
#sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: #1e1e2e;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
  transition: width .25s ease, transform .25s ease;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.logo-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,.4);
}
.logo-text { display: flex; flex-direction: column; overflow: hidden; }
.logo-title { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .5px; white-space: nowrap; }
.logo-sub { font-size: 10px; color: rgba(255,255,255,.45); white-space: nowrap; }

.sidebar-toggle-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-size: 15px;
  padding: 6px; border-radius: 6px;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.25);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 10px 4px;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.nav-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(99,102,241,.15));
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,.25);
}
.nav-item.active i { color: var(--primary); }

.sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.sidebar-logout-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 10px;
  padding: 8px 10px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px;
  color: #f87171; font-size: 12.5px; cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.sidebar-logout-btn:hover { background: rgba(239,68,68,.22); }
.store-info {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.4); font-size: 11.5px; margin-bottom: 4px;
  white-space: nowrap;
}
.current-date { font-size: 10.5px; color: rgba(255,255,255,.25); white-space: nowrap; }

/* 사이드바 collapse */
#sidebar.collapsed { width: var(--sidebar-collapsed-w); }
#sidebar.collapsed .logo-text,
#sidebar.collapsed .nav-item span,
#sidebar.collapsed .nav-section-label,
#sidebar.collapsed .sidebar-footer,
#sidebar.collapsed .logo-wrap { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
#sidebar.collapsed .sidebar-logout-btn { justify-content: center; }
#sidebar.collapsed .sidebar-logout-btn span { display: none; }
#sidebar.collapsed .sidebar-header { justify-content: center; padding: 20px 10px 16px; }
#sidebar.collapsed .nav-item.active {
  background: rgba(99,102,241,.2);
  border: none;
  border-radius: 8px;
}

/* ===== 메인 콘텐츠 ===== */
#main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
  min-width: 0;
}
#main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed-w); }

/* ===== 상단 헤더 ===== */
.top-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.page-title { font-size: 20px; font-weight: 700; color: var(--text); }
.page-subtitle { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.header-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  color: var(--text-sub);
  font-size: 14px;
  transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.header-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

.header-badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--success); font-weight: 600;
  background: #f0fdf4; padding: 5px 10px; border-radius: 20px;
  border: 1px solid #bbf7d0;
}

/* ===== 페이지 콘텐츠 ===== */
#page-content {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

/* ===== 로딩 ===== */
.loading-spinner {
  display: flex; align-items: center; justify-content: center;
  height: 300px; font-size: 28px; color: var(--primary);
}

/* ===== 요약 카드 그리드 ===== */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform .18s, box-shadow .18s;
}
.summary-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.card-icon.blue { background: #eff6ff; color: #3b82f6; }
.card-icon.red { background: #fef2f2; color: #ef4444; }
.card-icon.green { background: #f0fdf4; color: #22c55e; }
.card-icon.purple { background: #faf5ff; color: #a855f7; }
.card-icon.indigo { background: #eef2ff; color: var(--primary); }
.card-icon.orange { background: #fff7ed; color: var(--orange); }

.card-label { font-size: 12px; color: var(--text-light); margin-bottom: 4px; font-weight: 500; }
.card-value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; }
.card-sub { font-size: 11px; color: var(--text-light); margin-top: 3px; }
.card-change { font-size: 12px; font-weight: 600; margin-top: 3px; }
.card-change.up { color: var(--success); }
.card-change.down { color: var(--danger); }

/* ===== 차트 그리드 ===== */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.chart-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.chart-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
.chart-card-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.chart-wrap { position: relative; height: 240px; }

/* ===== 섹션 카드 ===== */
.section-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.section-title { font-size: 15px; font-weight: 700; color: var(--text); }
.section-sub { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }

/* ===== 테이블 ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: #f8fafc;
  border-bottom: 2px solid var(--border);
  padding: 10px 12px;
  font-weight: 600;
  color: var(--text-sub);
  font-size: 12px;
  white-space: nowrap;
}
.data-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafbff; }
.td-right { text-align: right !important; }
.td-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.td-green { color: var(--success); }
.td-red { color: var(--danger); }
.td-blue { color: var(--info); }

/* ===== 툴바 ===== */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  color: var(--text-light);
}
.search-box input {
  background: none; border: none; outline: none;
  font-family: inherit; font-size: 13px; color: var(--text);
  padding: 8px 0; width: 100%;
}
.filter-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--primary); }

/* ===== 배지 ===== */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge-gray { background: #f1f5f9; color: #64748b; }
.badge-blue { background: #eff6ff; color: #3b82f6; }
.badge-green { background: #f0fdf4; color: #16a34a; }
.badge-red { background: #fef2f2; color: #dc2626; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-purple { background: #faf5ff; color: #9333ea; }
.badge-orange { background: #fff7ed; color: #ea580c; }

.pay-cash { background: #fef3c7; color: #92400e; }
.pay-card { background: #ede9fe; color: #6d28d9; }
.pay-transfer { background: #dbeafe; color: #1d4ed8; }
.pay-later { background: #fed7aa; color: #9a3412; border: 1.5px dashed #f97316; }

/* ===== 버튼 ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: none; transition: all .18s;
  white-space: nowrap; text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99,102,241,.45); }
.btn-outline {
  background: var(--surface); color: var(--text-sub);
  border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.btn-danger { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn-icon { padding: 6px; width: 30px; height: 30px; justify-content: center; }

/* ===== 폼 ===== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 6px; }
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface);
  outline: none; transition: border-color .18s, box-shadow .18s;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.form-control:read-only { background: var(--surface2); color: var(--text-light); }
textarea.form-control { resize: vertical; min-height: 72px; }

/* ===== 모달 ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999999;
  padding: 16px;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity:0; transform:translateY(-16px) scale(.97); } to { opacity:1; transform:none; } }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: none; cursor: pointer;
  color: var(--text-light); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #f1f5f9; color: var(--text); }
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ===== 토스트 ===== */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  min-width: 220px;
}
@keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
.toast-success { background: #fff; border-left: 4px solid var(--success); color: #15803d; }
.toast-error { background: #fff; border-left: 4px solid var(--danger); color: #dc2626; }
.toast-info { background: #fff; border-left: 4px solid var(--info); color: #1d4ed8; }

/* ===== 페이지네이션 ===== */
.pagination { display: flex; justify-content: center; gap: 4px; padding: 16px 0 4px; }
.page-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text-sub);
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.page-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== 빈 상태 ===== */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 20px;
  color: var(--text-light);
  gap: 12px;
  text-align: center;
}
.empty-state i { font-size: 40px; opacity: .4; }
.empty-state p { font-size: 14px; }

/* ===== 장부 페이지 ===== */
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ledger-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.ledger-box.income { border-top: 3px solid var(--success); }
.ledger-box.expense { border-top: 3px solid var(--danger); }
.ledger-box.profit { border-top: 3px solid var(--primary); }
.lb-label { font-size: 12px; color: var(--text-light); font-weight: 600; margin-bottom: 8px; }
.lb-value { font-size: 24px; font-weight: 800; }
.ledger-box.income .lb-value { color: var(--success); }
.ledger-box.expense .lb-value { color: var(--danger); }
.ledger-box.profit .lb-value { color: var(--primary); }

/* ===== 마진바 ===== */
.margin-bar-wrap { display: flex; align-items: center; gap: 6px; }
.margin-bar-bg { flex: 1; height: 6px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.margin-bar-fill { height: 100%; background: linear-gradient(90deg, var(--success), #4ade80); border-radius: 3px; transition: width .5s; }

/* ===== 견적서 미리보기 ===== */
.estimate-preview { font-size: 13px; }
.est-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-meta .label { font-size: 11px; color: var(--text-light); }
.est-items-table {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12.5px;
}
.est-items-table thead th {
  background: #f8fafc; padding: 9px 10px;
  border-bottom: 2px solid var(--border);
  text-align: left; font-weight: 600; color: var(--text-sub);
}
.est-items-table tbody td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }

/* ===== 대시보드 모바일 아이콘 그리드 ===== */
.dash-mobile-icons {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.dash-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 12px 4px 10px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.dash-icon-item:active { transform: scale(0.93); box-shadow: none; }
.dash-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
}
.dash-icon-item > span {
  font-size: 10px; font-weight: 600;
  color: var(--text-light); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (max-width: 640px) {
  .dash-mobile-icons { display: grid; }
}

/* ===== 대시보드 모바일 위젯 카드 (보고서 + 메일) ===== */
.dash-mobile-widget-row {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-mobile-widget-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
@media (max-width: 640px) {
  .dash-mobile-widget-row { display: flex; }
  .cv-service-grid { gap: 8px !important; }
  .cv-service-card { padding: 12px 10px !important; }
  .cv-service-desc { display: none !important; }
  .cv-service-title { font-size: 13px !important; margin-bottom: 0 !important; }
  .cv-service-icon { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }
  .cv-service-icon i { font-size: 15px !important; }
  .cv-store-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .cv-store-grid { flex-direction: column !important; gap: 10px !important; justify-content: flex-start !important; width: 100%; }
  .cv-store-item { width: 100%; }
  .cv-store-val { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cv-store-qr { flex-direction: row !important; align-items: center !important; gap: 10px !important; }
}

/* ===== 고객 카드 ===== */
.customer-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.customer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: all .18s;
  box-shadow: var(--shadow-sm);
}
.customer-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--primary); }
.customer-avatar {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 700;
  margin-bottom: 10px;
}
.customer-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.customer-phone { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.customer-stats {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text-sub); margin-bottom: 10px;
  background: var(--surface2); padding: 6px 10px; border-radius: 6px;
}
.customer-actions { display: flex; gap: 6px; }

/* ===== 대시보드 결제수단 파이 추가 ===== */
.dash-3col { grid-template-columns: 2fr 1fr 1fr; }
.dash-3col-chart { grid-template-columns: 1.5fr 1fr; }

/* ===== 반응형 ===== */
@media (max-width: 1200px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* 모바일 사이드바 backdrop */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
}
#sidebar-backdrop.visible { display: block; }

/* 모바일 햄버거 — 기본 숨김 */
.mobile-menu-btn { display: none !important; }

/* ===== 하단 탭 바 (기본 숨김) ===== */
#mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 300;
  justify-content: space-around;
  align-items: center;
}
.mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; height: 100%;
  font-size: 10px; color: var(--text-light);
  cursor: pointer; text-decoration: none;
  gap: 3px; transition: color .15s;
}
.mbn-item i { font-size: 20px; }
.mbn-item.active { color: var(--primary); }

/* 더보기 backdrop */
#mbn-more-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 310;
}
#mbn-more-backdrop.visible { display: block; }

/* 더보기 바텀 시트 */
#mbn-more-sheet {
  position: fixed; bottom: -100%; left: 0; right: 0;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 12px 16px 24px;
  z-index: 320;
  transition: bottom .25s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
#mbn-more-sheet.open { bottom: 0; }
.mbn-sheet-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 8px;
  font-size: 15px; color: var(--text);
  cursor: pointer; text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mbn-sheet-item:last-child { border-bottom: none; }
.mbn-sheet-item i { width: 24px; text-align: center; color: var(--primary); font-size: 16px; }
.mbn-sheet-item.active { color: var(--primary); font-weight: 600; }

/* ===== 가로/PC (>640px): 사이드바 레이아웃 ===== */
@media (max-width: 768px) {
  :root { --sidebar-w: 240px; }
  #sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
    z-index: 200;
  }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.3); }
  #main-content { margin-left: 0 !important; }
  #page-content { padding: 16px; }
  .top-header { padding: 0 0 0 12px; gap: 0; }
  .header-left {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0; overflow: hidden;
  }
  .mobile-menu-btn { display: flex !important; flex-shrink: 0; }
  .page-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-subtitle { display: none; }
  #cv-lock-btn { display: none !important; }
  #login-user-badge { display: none !important; }
  .header-right { gap: 6px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .ledger-summary { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .customer-card-grid { grid-template-columns: 1fr 1fr; }
  .data-table { font-size: 12px; }
  .data-table thead th, .data-table tbody td { padding: 8px 8px; }
}

/* ===== 대시보드 누적 배너 그리드 (mobile-first: 기본 1열, 641px+ 에서 3열) ===== */
.dash-yearly-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
@media (min-width: 641px) { .dash-yearly-grid { gap: 12px; margin-bottom: 24px; } }

/* ===== 세로 모바일 (≤640px): 하단 탭 바 레이아웃 ===== */
@media (max-width: 640px) {
  /* 사이드바·햄버거 완전 숨김 */
  #sidebar { display: none !important; }
  .mobile-menu-btn { display: none !important; }
  #sidebar-backdrop { display: none !important; }

  /* 하단 탭 바 표시 */
  #mobile-bottom-nav { display: flex; }

  /* 컨텐츠에 하단 탭 여백 */
  #page-content { padding: 12px 12px 72px; }

  /* 섹션 헤더: 버튼이 많으면 아래 줄로 */
  .section-header { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
  .section-header > div + div { margin-left: auto; }

  /* 헤더 간소화 */
  .top-header { padding: 0 0 0 12px !important; height: 56px; }
  .header-left { flex: 1; min-width: 0; overflow: hidden; }
  .page-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-subtitle { display: none; }
  #customer-view-btn { display: none !important; }
  #cv-lock-btn { display: none !important; }
  #login-user-badge { display: none !important; }
  #admin-header-area { display: none !important; }
  .header-right { gap: 4px; padding-right: 4px; }
  .header-badge { padding: 5px 8px; }
  .header-badge span { display: none; }

  /* 카드 2열 */
  .summary-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* 누적 배너 3열 compact */
  .dash-yearly-grid > div { padding: 10px 8px !important; border-radius: 10px !important; }
  .dash-yearly-grid > div > div:first-child { font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dash-yearly-grid > div > div:last-child { font-size: 13px !important; font-weight: 800 !important; }
  .customer-card-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .customer-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; }
  .customer-card-avatar-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 4px; }
  .customer-card-info { flex: 1; min-width: 0; }
  .customer-avatar { width: 38px !important; height: 38px !important; font-size: 14px !important; margin-bottom: 0 !important; }
  .customer-name { font-size: 13px !important; margin-bottom: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-phone { font-size: 11px !important; margin-bottom: 3px !important; white-space: nowrap; }
  .customer-stats { font-size: 11px !important; flex-direction: row !important; gap: 10px !important; padding: 0 !important; margin-bottom: 0 !important; background: transparent !important; border: none !important; justify-content: flex-start !important; }
  .customer-stats span { white-space: nowrap; }
  .ledger-summary { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .chart-grid { grid-template-columns: 1fr !important; }

  /* 카드 compact 가로 레이아웃 */
  .summary-card {
    display: flex; flex-direction: row;
    align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  .summary-card .card-icon {
    flex-shrink: 0;
    width: 36px !important; height: 36px !important;
    border-radius: 9px !important; font-size: 15px !important;
  }
  .summary-card .card-body { flex: 1; min-width: 0; }
  .card-label { font-size: 10px !important; margin-bottom: 2px !important; }
  .card-value { font-size: 15px !important; }

  /* 테이블 공통 */
  .data-table { font-size: 12px; }
  .data-table thead th, .data-table tbody td { padding: 8px 6px; }
  .toolbar { flex-direction: row; flex-wrap: nowrap; gap: 6px; }
  .search-box { max-width: 100%; flex: 1 1 0; min-width: 0; }
  .filter-select { font-size: 12px; padding: 6px 8px; flex-shrink: 0; width: auto; max-width: 120px; }
  .toolbar-multi { flex-wrap: wrap; }
  .toolbar-multi .search-box { flex: 1 1 100%; }
  .toolbar-multi .filter-select { flex: 1 1 0; max-width: none; }

  /* 모달 — 하단 시트 → 화면 상단 고정 스크롤 */
  .modal-overlay { align-items: flex-start; padding: 12px 8px 80px; }
  .modal-box {
    border-radius: 16px !important;
    position: relative !important;
    bottom: auto !important;
    max-height: calc(100vh - 100px);
    margin-top: 4px;
    animation: modalSlideDown .25s ease;
  }
  .modal-header { padding: 16px 16px 12px; }
  .modal-body { padding: 14px 16px; }
  @keyframes modalSlideDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:none; } }

  /* 견적서 작성 폼 - 모바일에서도 2열 유지 */
  .est-form-2col { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .est-form-2col .form-group label { font-size: 11px !important; }
  .est-form-2col .form-control { font-size: 12px !important; padding: 6px 8px !important; }

  /* m-hide: 모바일에서 숨길 컬럼/요소 */
  .m-hide { display: none !important; }
  /* m-show: 모바일에서만 표시 */
  .m-show { display: inline !important; }

  /* 장부 월별 nowrap */
  .ledger-monthly-tbl td, .ledger-monthly-tbl th { white-space: nowrap; font-size: 11px; }

  /* AI 비용 — 상하 1열 */
  .llm-top-grid { grid-template-columns: 1fr !important; }

  /* 설정 — 1열 */
  .settings-form-grid { grid-template-columns: 1fr !important; }

  /* 메일 툴바 미읽음 텍스트 숨김 */
  .mail-unread-label { display: none; }

  /* 메일 모바일: 목록 전체너비, 본문 오버레이 */
  #mail-layout { flex-direction: column; }
  #mail-list-panel { width: 100% !important; }
  #mail-body-wrap { display: none; }
  #mail-body-wrap.mobile-open { display: flex !important; flex-direction: column; }
}

/* m-show는 기본 숨김 (모바일에서만 보임) */
.m-show { display: none; }

/* 다크모드 하단 탭 */
body.dark #mobile-bottom-nav { background: #1e293b; border-top-color: #334155; }
body.dark #mbn-more-sheet { background: #1e293b; }
body.dark .mbn-sheet-item { color: #e2e8f0; border-bottom-color: #334155; }

@media (max-width: 480px) {
  .card-value { font-size: 18px; }
  .search-box { max-width: 100%; }
}

/* ===== 섹션 구분 ===== */
hr.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ===== 월별 요약 테이블 ===== */
.monthly-summary-table { font-size: 13px; }
.monthly-summary-table th { background: #f8fafc; }

/* ===== 알림 박스 ===== */
.alert-box {
  padding: 12px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ===== 다크모드 ===== */
body.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #243044;
  --border: #334155;
  --text: #f1f5f9;
  --text-sub: #94a3b8;
  --text-light: #64748b;
  --primary-light: #1e1e42;
}
body.dark .top-header { background: #1e293b; border-bottom-color: #334155; }
body.dark .data-table thead th { background: #243044; color: #94a3b8; border-bottom-color: #334155; }
body.dark .data-table tbody td { border-bottom-color: #1e293b; }
body.dark .data-table tbody tr:hover { background: #243044; }
body.dark .filter-select { background: #1e293b; color: #f1f5f9; border-color: #334155; }
body.dark .form-control { background: #1e293b; color: #f1f5f9; border-color: #334155; }
body.dark .form-control:read-only { background: #243044; color: #64748b; }
body.dark .modal-box { background: #1e293b; }
body.dark .modal-header { border-bottom-color: #334155; }
body.dark .modal-body { background: #1e293b; }
body.dark .modal-footer { border-top-color: #334155; }
body.dark .btn-outline { background: #1e293b; color: #94a3b8; border-color: #334155; }
body.dark .btn-outline:hover { background: #1e1e42; color: #a5b4fc; border-color: #6366f1; }
body.dark .page-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
body.dark .page-btn:hover { background: #1e1e42; color: #a5b4fc; }
body.dark .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
body.dark .toast-success,
body.dark .toast-error,
body.dark .toast-info { background: #1e293b; }
body.dark .badge-gray { background: #334155; color: #94a3b8; }
body.dark .search-box { background: #1e293b; border-color: #334155; }
body.dark .search-box input { color: #f1f5f9; }
body.dark .customer-card { background: #1e293b; border-color: #334155; }
body.dark .ledger-box { background: #1e293b; border-color: #334155; }
body.dark .margin-bar-bg { background: #334155; }
body.dark hr.divider { border-top-color: #334155; }
body.dark code { background: #243044; color: #a5b4fc; padding: 2px 5px; border-radius: 4px; }

/* ===== 챗봇 에이전트 공통 카드 ===== */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 18px;
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.card-body { padding: 16px; }
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
}
.stat-card .stat-label { font-size: 12px; color: var(--text-light); font-weight: 500; margin-bottom: 4px; }
.stat-card .stat-value { font-size: 24px; font-weight: 800; color: var(--text); }
.table-wrap { overflow-x: auto; }
body.dark .card { background: #1e293b; border-color: #334155; }
body.dark .card-header { background: #243044; border-bottom-color: #334155; }
body.dark .stat-card { background: #1e293b; border-color: #334155; }

/* ===== 고객 뷰 모드 ===== */
body.customer-mode .admin-only { display: none !important; }
body.customer-mode .est-main-table,
body.customer-mode .parts-main-table,
body.customer-mode #est-items-tbl { table-layout: auto !important; }
body.customer-mode .summary-grid { grid-template-columns: repeat(2, 1fr) !important; }
#customer-view-btn.cv-active { color: #2563eb !important; background: rgba(37,99,235,.14) !important; }

/* 컬러 테마 재정의 (파란색 계열) */
body.customer-mode {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --bg: #f0f7ff;
}
body.customer-mode #main-content { background: #f0f7ff; }
body.customer-mode .top-header {
  border-top: 3px solid #2563eb;
  background: #fff;
}

/* 사이드바 완전 변환 — collapsed 상태는 기존 룰에 맡김 */
body.customer-mode #sidebar:not(.collapsed) {
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%) !important;
  border-right: none !important;
  box-shadow: 4px 0 20px rgba(30,58,138,.25) !important;
  width: 220px;
}
body.customer-mode #sidebar.collapsed {
  background: linear-gradient(180deg, #1e3a8a 0%, #2563eb 100%) !important;
  border-right: none !important;
}
body.customer-mode #sidebar.collapsed #cv-sidebar-nav { display: none !important; }
body.customer-mode .sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
body.customer-mode .logo-title { color: #fff !important; }
body.customer-mode .logo-sub   { color: rgba(255,255,255,.65) !important; }
body.customer-mode .logo-icon  { background: rgba(255,255,255,.2) !important; color: #fff !important; }
body.customer-mode .sidebar-toggle-btn { color: rgba(255,255,255,.6) !important; }
body.customer-mode .sidebar-nav    { display: none !important; }
body.customer-mode .sidebar-footer { display: none !important; }

/* ===== 대시보드 — 캘린더 + AI 채팅 ===== */
.dash-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) {
  .dash-main-grid { grid-template-columns: 1fr; }
}

/* ── 캘린더 ── */
.dash-calendar-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 10px;
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.cal-header h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.cal-nav { display: flex; gap: 4px; }
.cal-nav-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-sub);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.cal-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 그리드 래퍼: 남은 공간 채움 */
#cal-grid-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* DOW 헤더 (셀 그리드와 분리) */
.cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.cal-dow {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-light);
  padding: 2px 4px 4px;
  display: flex;
  align-items: center;
}
.cal-dow-label {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
}
.cal-dow.sun { color: #ef4444; }
.cal-dow.sat { color: #3b82f6; }

/* 셀 전용 그리드: flex:1 로 높이 자동 채움 */
.cal-cells-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  overflow: hidden;
}
.cal-cell {
  overflow: hidden;
  border-radius: 5px;
  padding: 4px 4px 3px;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  border: 1px solid transparent;
}
.cal-cell:hover { background: var(--primary-light); border-color: var(--primary); }
.cal-cell.other-month { opacity: .25; pointer-events: none; }
.cal-cell.today { border-color: var(--primary); background: rgba(99,102,241,.06); }
.cal-cell.today .cal-day {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
}
.cal-day {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
/* 일요일/공휴일 → 빨강 */
.cal-cell.sun .cal-day { color: #ef4444; }
.cal-cell.sat .cal-day { color: #3b82f6; }
.cal-cell.today.sun .cal-day,
.cal-cell.today.sat .cal-day { color: #fff; }
/* 공휴일 이름 — 날짜 숫자 오른쪽 인라인 */
.cal-holiday-name {
  font-size: 7.5px;
  font-weight: 700;
  color: #ef4444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  margin-left: 2px;
  flex-shrink: 1;
  min-width: 0;
}
/* 날짜 + 공휴일 묶음 */
.cal-day-wrap {
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
/* 셀 내부 레이아웃 */
.cal-cell-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  gap: 2px;
}
/* +N 추가 카운트 뱃지 */
.cal-ev-count {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-light);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 4px;
  line-height: 16px;
  flex-shrink: 0;
}
/* 대표 이벤트 칩 */
.cal-top-ev {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1px;
  flex-shrink: 0;
  min-height: 0;
}
.cal-top-ev-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.cal-top-ev-예약 { background: #dbeafe; color: #1d4ed8; }
.cal-top-ev-휴무 { background: #fee2e2; color: #b91c1c; }
.cal-top-ev-기타 { background: #dcfce7; color: #15803d; }

/* 일별 팝업 모달 내부 */
.day-ev-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 8px;
  margin-bottom: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.day-ev-type {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.day-ev-item.day-ev-예약 .day-ev-type { background: #dbeafe; color: #1d4ed8; }
.day-ev-item.day-ev-휴무 .day-ev-type { background: #fee2e2; color: #b91c1c; }
.day-ev-item.day-ev-기타 .day-ev-type { background: #dcfce7; color: #15803d; }
.day-ev-title {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-ev-memo { font-size: 11px; color: var(--text-light); }
.day-ev-del {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 11px;
  flex-shrink: 0;
  transition: all .12s;
}
.day-ev-del:hover { background: #fee2e2; color: #ef4444; }
.day-no-ev {
  text-align: center;
  color: var(--text-light);
  font-size: 12.5px;
  padding: 12px 0;
}
.day-add-section {
  border-top: 1px solid var(--border);
  padding-top: 13px;
  margin-top: 2px;
}
.day-add-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 10px;
}

/* 일정 추가 모달 안의 폼 */
.sched-form-row {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
}
.sched-form-row label { font-size: 12px; font-weight: 600; color: var(--text-sub); }
.sched-type-btns { display: flex; gap: 8px; }
.sched-type-btn {
  flex: 1; padding: 8px 0;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer; font-size: 13px; font-weight: 600;
  transition: all .15s;
}
.sched-type-btn.active-예약 { border-color: #3b82f6; background: #dbeafe; color: #1d4ed8; }
.sched-type-btn.active-휴무 { border-color: #ef4444; background: #fee2e2; color: #b91c1c; }
.sched-type-btn.active-기타 { border-color: #22c55e; background: #dcfce7; color: #15803d; }

/* ── AI 어시스턴트 채팅 ── */
.dash-chat-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 400px;
}
.dash-chat-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-chat-header-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}
.dash-chat-header-text h4 { font-size: 14px; font-weight: 700; color: var(--text); }
.dash-chat-header-text p  { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.dash-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}
.chat-msg.user  { align-self: flex-end; align-items: flex-end; }
.chat-msg.ai    { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg.user .chat-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.ai .chat-bubble {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg.ai.loading .chat-bubble {
  color: var(--text-light);
}
.chat-report-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-bubble-report {
  max-width: 100% !important;
  font-size: 12px;
  line-height: 1.7;
}
.btn-chat-report {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .15s;
  flex-shrink: 0;
}
.btn-chat-report:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.chat-action-bar {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: all .12s;
  font-weight: 500;
}
.chat-action-btn:hover { background: var(--primary); color: #fff; }
.dash-chat-input {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.dash-chat-textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  background: var(--surface2);
  color: var(--text);
  max-height: 90px;
  min-height: 36px;
  line-height: 1.4;
  transition: border .15s;
}
.dash-chat-textarea:focus { border-color: var(--primary); }
.dash-chat-send {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.dash-chat-send:hover   { background: var(--primary-dark); }
.dash-chat-send:disabled { background: var(--border); cursor: not-allowed; }

/* ── 퀵 액션 힌트 ── */
.dash-chat-hints {
  padding: 0 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dash-hint-chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  color: var(--text-sub);
  transition: all .12s;
  white-space: nowrap;
}
.dash-hint-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── 하단 최근 내역 그리드 ── */
.dash-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.dash-bottom-grid .report-full-width {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .dash-bottom-grid .report-full-width { grid-column: 1; }
}
@media (max-width: 640px) {
  .dash-bottom-grid { display: none !important; }
  .dash-main-grid { display: none !important; }
  .dash-cal-toggle-btn { display: none !important; }
}

/* 섹션 접기/펼치기 */
.section-collapsible {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.section-collapsible.collapsed {
  max-height: 0 !important;
}
.section-card.card-collapsed .section-header {
  margin-bottom: 0;
}
.section-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.2s;
  flex-shrink: 0;
}
.section-toggle-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.section-toggle-btn i {
  font-size: 11px;
  transition: transform 0.25s;
}
body.customer-mode #cv-sidebar-nav { display: flex !important; }

/* 헤더 요소 숨김 */
body.customer-mode #refresh-btn,
body.customer-mode .header-badge,
body.customer-mode #admin-header-area { display: none !important; }
body.customer-mode #page-title  { color: #1d4ed8; }
body.customer-mode #page-subtitle { display: none; }

/* 고객 모드 + 다크 모드 조합 */
body.customer-mode.dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #243044;
  --border: #334155;
  --text: #f1f5f9;
  --text-sub: #94a3b8;
  --text-light: #64748b;
  --primary-light: #1e1e42;
}
body.customer-mode.dark #main-content { background: #0f172a !important; }
body.customer-mode.dark .top-header {
  background: #1e293b !important;
  border-top-color: #2563eb;
}
body.customer-mode.dark #page-title { color: #93c5fd !important; }

/* 고객용 사이드바 내비 */
.cv-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: transparent; border: none;
  color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 500;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  text-align: left; transition: all .15s;
  font-family: inherit;
}
.cv-nav-item:hover  { background: rgba(255,255,255,.15); color: #fff; }
.cv-nav-item.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 700; }
.cv-nav-item i      { width: 18px; font-size: 14px; text-align: center; }

/* ===== 고객 뷰 카트 바 ===== */
#cv-cart-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1100;
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  padding: 14px 28px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 24px rgba(37, 99, 235, .4);
  font-family: inherit;
}
.cv-cart-cancel-btn {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  color: #fff; padding: 10px 18px; border-radius: 9px;
  cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .15s;
}
.cv-cart-cancel-btn:hover { background: rgba(255,255,255,.28); }
.cv-cart-go-btn {
  background: #fff; color: #1d4ed8; border: none;
  padding: 10px 22px; border-radius: 9px;
  cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: box-shadow .15s, transform .1s;
  display: flex; align-items: center; gap: 7px;
}
.cv-cart-go-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); transform: translateY(-1px); }

/* ===== UI 설정 — 토글 스위치 ===== */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #cbd5e1; border-radius: 24px; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.toggle-switch input:checked + .toggle-slider { background: #6366f1; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
body.dark .toggle-slider { background: #475569; }

/* ===== 애니메이션 비활성화 ===== */
body.no-animation *, body.no-animation *::before, body.no-animation *::after {
  transition: none !important;
  animation: none !important;
}

/* ===== 컴팩트 모드 ===== */
body.compact-mode .data-table td,
body.compact-mode .data-table th { padding: 6px 12px; font-size: 12.5px; }
body.compact-mode .data-table tr { height: auto; }

/* ===== 글꼴 크기 ===== */
body.font-sm { font-size: 13px; }
body.font-lg { font-size: 16px; }

/* ===== 테이블 줄무늬 ===== */
body.striped-table .data-table tbody tr:nth-child(even) { background: rgba(0,0,0,.04); }
body.dark.striped-table .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.04); }

/* 카트 바 활성 시 페이지 하단 여백 */
body.cv-cart-open #main-content { padding-bottom: 80px; }

@media (max-width: 640px) {
  #cv-cart-bar { padding: 10px 14px; gap: 8px; }
  #cv-cart-bar .cv-cart-info { gap: 8px; }
  #cv-cart-bar .cv-cart-info i { font-size: 14px; }
  #cv-cart-bar .cv-cart-info span { white-space: nowrap; font-size: 14px !important; }
  #cv-cart-bar .cv-cart-info strong { font-size: 15px; }
  #cv-cart-bar .cv-cart-btns { flex-direction: column !important; gap: 5px !important; }
  .cv-cart-cancel-btn { padding: 7px 14px; font-size: 13px; white-space: nowrap; text-align: center; }
  .cv-cart-go-btn { padding: 7px 14px; font-size: 13px; gap: 4px; white-space: nowrap; justify-content: center; }
}

/* customer-mode에서만 보이는 요소 */
body:not(.customer-mode) .cv-only { display: none !important; }

@media print {
  .no-print { display: none !important; }
}