/* ──────────────────────────────────────────────────────────────────
   design-polish.css — v3.13 디자인 점검 결과 통합 오버라이드
   ────────────────────────────────────────────────────────────────── */
/* 점검 결과:
   - 폰트 무게 800(Black) 과다 사용 → 700(Bold)으로 통일
   - 페이지 헤드 일관성 (제목 + 부제 + 우측 액션) 정리
   - 모달/카드/입력 미세 정렬
*/

/* ── 폰트 무게 통일 ─────────────────────────────────────── */
.lg-brand-h,
.lg-stat b,
.adm-kpi-v,
.inv-kpi-v,
.cat-hero-title,
.cat-hero-stat-v,
.cat-tbl-money,
.q-doc-h1,
.sch-page-h,
.ce-page-h {
  font-weight: 700 !important;  /* 800 → 700 */
  letter-spacing: -0.025em;
}

/* ── 페이지 헤드 통일 (모든 페이지 동일 톤) ────────────── */
.adm-page-head,
.inv-page-head,
.q-page-head,
.sch-page-head,
.ce-page-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-100, #F2F4F6);
}
.adm-page-head h1,
.inv-page-h,
.sch-page-h,
.ce-page-h {
  font: 700 26px/1.3 var(--font-sans) !important;
  letter-spacing: -0.025em;
  color: var(--grey-900, #191F28);
  margin: 0 0 6px;
}
.adm-page-head p,
.inv-page-sub,
.sch-page-sub,
.ce-page-sub {
  font: 400 14px/1.6 var(--font-sans) !important;
  color: var(--grey-600, #6B7684);
  letter-spacing: -0.01em;
}

/* ── KPI 카드 라벨 통일 ─────────────────────────────────── */
.adm-kpi-l,
.inv-kpi-l {
  font: 500 12px/1 var(--font-sans) !important;
  letter-spacing: 0.04em;
  color: var(--grey-600, #6B7684) !important;
  text-transform: none !important;
  margin-bottom: 8px !important;
}

/* ── 카드 그림자 + 보더 일관성 ──────────────────────────── */
.adm-card,
.inv-toolbar,
.ql-list,
.sch-card,
.ce-card {
  border: 1px solid var(--grey-200, #E5E8EB) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.adm-card:hover,
.ql-list:hover,
.sch-card:hover {
  border-color: var(--grey-300, #D1D6DB) !important;
}

/* ── 버튼 톤 통일 ──────────────────────────────────────── */
.cat-print-btn,
.inv-tbl-action,
.ce-btn,
.sch-btn {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font: 500 13px/1 var(--font-sans) !important;
  border: 1px solid var(--grey-200, #E5E8EB);
  background: #fff;
  color: var(--grey-800, #333D4B);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
}
.cat-print-btn:hover,
.inv-tbl-action:hover {
  border-color: var(--grey-400, #B0B8C1);
  background: var(--grey-50, #F9FAFB);
}

/* ── 입력 필드 통일 ────────────────────────────────────── */
.lg-field input,
.inv-toolbar-search input,
.ql-toolbar-search input,
.q-field input,
.q-field textarea,
.ce-field input,
.ce-field textarea {
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid var(--grey-200, #E5E8EB) !important;
  border-radius: 8px !important;
  font: 400 14px/1.4 var(--font-sans) !important;
  background: #fff;
  color: var(--grey-900, #191F28);
  transition: border-color .15s, box-shadow .15s;
}
.q-field textarea,
.ce-field textarea {
  height: auto !important;
  padding: 12px 14px !important;
  min-height: 80px;
  line-height: 1.5;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--red-500, #E31E26) !important;
  box-shadow: 0 0 0 3px rgba(227,30,38,0.12) !important;
}

/* ── 빈 상태 카드 통일 (이미 일부 적용 + 보강) ────────────── */
.inv-empty {
  padding: 40px 24px !important;
  text-align: center !important;
  color: var(--grey-600, #6B7684) !important;
  background: var(--grey-50, #F9FAFB) !important;
  border-radius: 12px !important;
  font: 400 14px/1.5 var(--font-sans) !important;
}

/* ── 모달 헤더 통일 ────────────────────────────────────── */
.inv-mod-h,
.ce-modal-h,
.sch-modal-h {
  font: 700 20px/1.3 var(--font-sans) !important;
  letter-spacing: -0.02em !important;
  color: var(--grey-900, #191F28) !important;
}

/* ── 테이블 헤더 통일 ──────────────────────────────────── */
.inv-tbl th,
.adm-table th,
.ql-tbl th {
  font: 600 12px/1.2 var(--font-sans) !important;
  letter-spacing: 0.04em !important;
  color: var(--grey-600, #6B7684) !important;
  background: var(--grey-50, #F9FAFB) !important;
  text-transform: none !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--grey-200, #E5E8EB) !important;
}

/* ── 상태 태그 통일 (adm-tag) ─────────────────────────── */
.adm-tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  font: 600 11px/1.5 var(--font-sans) !important;
  letter-spacing: 0.02em !important;
}
.adm-tag.amber { background: #FFF9E7; color: #DD7D02; }
.adm-tag.green { background: #F0FAF6; color: #029359; }
.adm-tag.blue  { background: #E8F3FF; color: #1B64DA; }
.adm-tag.red   { background: var(--red-50, #FFE5E6); color: var(--red-700, #9A0E14); }

/* ── 모바일 반응형 보강 (모든 페이지) ─────────────────── */
@media (max-width: 768px) {
  .adm-page-head,
  .inv-page-head,
  .q-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .adm-kpi-cell,
  .inv-kpi-cell {
    min-width: 140px;
  }
}

/* ── 신상 등록 빨강 버튼 (어드민 헤더 + 카탈로그 헤더) ── */
.cat-print-btn[style*="E31E26"],
.cat-print-btn[style*="red-500"] {
  border-color: var(--red-500, #E31E26) !important;
  box-shadow: 0 2px 8px rgba(227,30,38,0.15);
}

/* ════════════════════════════════════════════════════════════════
   v3.14 모바일 반응형 보강 (사장님 시승 코스 시나리오)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* PageNav 가로 스크롤 */
  .cat-pagenav-inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .cat-pagenav-inner > a {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  /* 메인 컨테이너 패딩 축소 */
  .cat-inner, .q-main, .adm-main, .inv-main, .sch-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 페이지 헤드 세로 스택 */
  .adm-page-head,
  .inv-page-head,
  .q-page-head,
  .sch-page-head,
  .ce-page-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  /* KPI 그리드 모바일 — 2열 */
  .adm-kpi, .inv-kpi {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* 어드민 MainKpiHero — 메인 카드 한 줄, 작은 KPI 2x2 */
  div[style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1.7fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 어드민 QuickActions — 2열로 변경 */
  div[style*="repeat(5,1fr)"],
  div[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 견적서 — 빌더와 문서 세로 스택 */
  .q-main {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .q-builder, .q-doc {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 모달 폭 90% */
  .inv-modal, .ce-modal, .sch-modal {
    width: 90vw !important;
    max-width: 560px !important;
  }

  /* 테이블 가로 스크롤 */
  .inv-tbl-wrap, .ql-tbl-wrap, .adm-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 페이지 헤드 제목 살짝 축소 */
  .adm-page-head h1,
  .inv-page-h,
  .sch-page-h,
  .ce-page-h {
    font-size: 22px !important;
  }

  /* 카드 그리드 — 1열 또는 minmax 280 */
  .cat-pgrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 576px) {
  /* 로그인 — 좌우 분할 → 위아래 */
  .lg-app {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
  }
  .lg-brand {
    padding: 32px 24px !important;
  }
  .lg-brand-h {
    font-size: 36px !important;
  }
  .lg-form {
    padding: 32px 24px !important;
  }

  /* 어드민 KPI — 1열 */
  .adm-kpi, .inv-kpi {
    grid-template-columns: 1fr !important;
  }

  /* QuickActions — 1열 (사장님 큰 버튼) */
  div[style*="repeat(2, 1fr)"][style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v3.14 인쇄 모드 강화 (견적서 + 일일 보고서)
   ════════════════════════════════════════════════════════════════ */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 14mm;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 인쇄 시 숨길 요소 */
  .cat-header,
  .cat-pagenav,
  .adm-page-head-tools,
  .inv-toolbar,
  .ql-toolbar,
  .sch-viewbar,
  .q-builder,
  .q-actions,
  .toast,
  .bs-backdrop,
  .inv-modal-backdrop,
  .ce-modal-backdrop,
  button:not(.q-doc button),
  nav,
  .NotificationCenter,
  .DailyNote,
  .QuickActions,
  .WelcomeWizard,
  .RoleViewToggle,
  .BackupStatus,
  div[data-welcome],
  .cat-print-btn,
  .inv-tbl-action {
    display: none !important;
  }

  /* 인쇄 페이지 폭 100% */
  .cat-inner, .q-main, .adm-main, .inv-main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* 인쇄 영역만 표시 (견적서 페이퍼) */
  .q-paper {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }

  /* 카드/표 페이지 분할 방지 */
  .adm-card, .inv-card, .q-paper, table {
    page-break-inside: avoid;
  }

  /* 페이지 헤드는 인쇄 시 그대로 표시 */
  .adm-page-head, .inv-page-head {
    border-bottom: 2px solid #000 !important;
    margin-bottom: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v3.14 다크 모드 (사장님 야간 매장 운영 옵션)
   사용법: body 또는 html에 class="dark" 추가하면 활성화
   prefers-color-scheme은 운영자 의도와 어긋날 수 있어 강제 X
   ════════════════════════════════════════════════════════════════ */
:root.dark, body.dark {
  --bg-page: #0E0E10;
  --bg-surface: #1B1B1F;
  --bg-surface-sunken: #25262A;
  --grey-50: #25262A;
  --grey-100: #2A2C30;
  --grey-200: #37383C;
  --grey-300: #44474E;
  --grey-400: #6B7684;
  --grey-500: #8B95A1;
  --grey-600: #B0B8C1;
  --grey-700: #D1D6DB;
  --grey-800: #E5E8EB;
  --grey-900: #F9FAFB;
  --fg-primary: #F9FAFB;
  --fg-secondary: #D1D6DB;
  --fg-tertiary: #8B95A1;
  --fg-quaternary: #6B7684;
  --line: #37383C;
}
body.dark {
  background: var(--bg-page);
  color: var(--fg-primary);
}
body.dark .adm-card,
body.dark .inv-toolbar,
body.dark .ql-list,
body.dark .sch-card,
body.dark .ce-card,
body.dark .lg-form {
  background: var(--bg-surface) !important;
  border-color: var(--grey-200) !important;
  color: var(--fg-primary);
}
body.dark .adm-kpi-cell,
body.dark .inv-kpi-cell {
  background: var(--bg-surface) !important;
}
body.dark input,
body.dark textarea,
body.dark select {
  background: var(--bg-surface) !important;
  border-color: var(--grey-200) !important;
  color: var(--fg-primary) !important;
}
body.dark .cat-print-btn,
body.dark .inv-tbl-action {
  background: var(--bg-surface) !important;
  color: var(--fg-secondary) !important;
  border-color: var(--grey-200) !important;
}

/* 다크 모드 토글 버튼 (헤더에 추가 권장 — v1.3에서) */
.dark-toggle {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--grey-200, #E5E8EB);
  font-size: 14px;
}
.dark-toggle:hover {
  border-color: var(--grey-400);
}