/* 폰트는 base.html에서 <link>로 로드 (렌더 블로킹 방지) */

:root {
  /* ═════ FREEPASS ERP — Unified Design Tokens ═════ */

  /* ── 간격 (4pt 기반) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── 곡률 — 4px 통일 ── */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-ui: 4px;

  /* ── 타이포그래피 (M3 기준) ── */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 12px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 17px;
  --font-size-2xl: 20px;
  --font-size-3xl: 28px;
  /* 폰트 두께 — jpkerp 스타일(가벼운 톤) */
  --font-weight-base: 300;
  --font-weight-strong: 400;
  --font-weight-heavy: 500;
  --letter-spacing-base: -0.03em;
  /* 하위 호환 별칭 */
  --font-size-main: var(--font-size-base);
  --font-size-sub: var(--font-size-xs);
  --font-size-title: var(--font-size-base);

  /* ── 높이 (컨트롤, M3 기준) ── */
  --height-xs: 26px;
  --height-sm: 32px;
  --height-md: 38px;
  --height-lg: 40px;
  --height-xl: 46px;
  --height-2xl: 50px;

  /* ── 텍스트 컬러: Slate 계열 ── */
  --text-main: #1e293b;
  --text-subtle: #64748b;
  --text-muted: #94a3b8;

  /* ── 보더 / 표면 ── */
  --border-main: #cbd5e1;
  --border-soft: #e2e8f0;
  --border-strong: #94a3b8;
  --surface-base: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-hover: #f1f5f9;
  --surface-selected: #eff6ff;
  --surface-sidebar: #f6f7f9;
  --surface-muted: #f1f5f9;

  /* ── 인터랙션 ── */
  --interactive-hover-bg: #f1f5f9;
  --interactive-hover-border: #cbd5e1;
  --interactive-active-bg: #e2e8f0;
  --interactive-active-border: #94a3b8;
  --interactive-selected-bg: #eff6ff;
  --interactive-selected-border: #93c5fd;
  --interactive-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.05);
  --interactive-shadow-focus: 0 0 0 2px rgba(59, 130, 246, 0.15);
  --transition-fast: 0.12s ease;
  --transition-normal: 0.15s ease;

  /* ── 버튼 ── */
  --btn-height: var(--height-sm);
  --btn-min-width: 58px;
  --btn-padding-x: 10px;
  --btn-font-size: var(--font-size-main);
  --btn-border-width: 1px;
  --btn-panel-height: var(--height-xs);
  --btn-gap: 4px;

  /* ── 패널 헤더 ── */
  --panel-gap: var(--space-2);
  --panel-head-height: 40px;
  --panel-head-py: var(--space-2);
  --panel-head-px: var(--space-3);
  --panel-body-pad: var(--space-3);
  --panel-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  --right-panel-width: 360px;
  --sidebar-width: 132px;

  /* ── 상세(Detail) ── */
  --detail-section-py: var(--space-3);
  --detail-section-gap: var(--space-6);
  --detail-row-gap: 6px;
  --detail-item-gap: var(--space-4);
  --detail-photo-gap: 6px;
  --detail-thumb-w: 56px;
  --detail-thumb-h: 42px;

  /* ── 테이블 ── */
  --table-cell-py: 10px;
  --table-cell-px: var(--space-3);
  --table-head-bg: #f1f5f9;
  --table-head-color: var(--text-subtle);

  /* ── 리스트 / 데이터 행 ── */
  --list-row-min-h: var(--height-lg);
  --list-row-px: var(--panel-head-px);
  --list-row-py: var(--space-2);
  --list-line-gap: 0;

  /* ── 배지 ── */
  --badge-height: 22px;
  --badge-padding-x: 8px;
  --badge-font-size: var(--font-size-xs);
  --badge-radius: var(--radius-xs);
  --badge-min-width: 54px;

  /* ── 폼 ── */
  --form-label-line-height: 1.35;
  --form-control-py: 6px;

  /* ── 필터 ── */
  --filter-head-height: var(--height-md);
  --filter-option-height: var(--height-sm);
  --filter-search-height: var(--height-md);

  /* ── 모바일 ── */
  --mobile-topbar-height: 48px;
  --mobile-tabbar-height: 56px;
  --mobile-input-font-size: var(--font-size-xl);
  --mobile-drawer-width: 260px;

  /* ── 모바일 디자인 토큰 (전 페이지 공통 규격) ── */
  --m-bg: #f4f5f7;
  --m-card-bg: #ffffff;
  --m-divider: #f2f4f6;
  --m-divider-strong: #e5e8eb;
  --m-text-primary: #0f172a;
  --m-text-secondary: #475569;
  --m-text-tertiary: #8b95a1;
  --m-accent: #1b2a4a;
  --m-pending: #f59e0b;
  --m-pending-bg: #fff7ed;
  --m-done: #10b981;
  --m-done-bg: #ecfdf5;
  --m-danger: #ef4444;
  --m-danger-bg: #fef2f2;
  --m-pad-x: 16px;
  --m-pad-y: 14px;
  --m-gap: 12px;
  --m-row-h: 64px;
  --m-input-h: 48px;
  --m-btn-h: 48px;
  --m-radius: 8px;
  --m-radius-sm: 4px;
  --m-radius-md: 8px;
  --m-radius-lg: 12px;
  --m-radius-pill: 999px;
  --m-radius-circle: 50%;
  --m-font-title: 15px;
  --m-font-body: 13px;
  --m-font-sub: 11px;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #f5f6f8;
  color: var(--text-main);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-main);
  font-weight: var(--font-weight-base);
  letter-spacing: var(--letter-spacing-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* ── 다크 모드 ── */
@media (prefers-color-scheme: dark) {
  :root {
    --text-main: #e2e8f0;
    --text-subtle: #94a3b8;
    --text-muted: #64748b;
    --border-main: #334155;
    --border-soft: #1e293b;
    --border-strong: #475569;
    --surface-base: #0f172a;
    --surface-subtle: #1e293b;
    --surface-hover: #334155;
    --surface-selected: #1e3a5f;
    --surface-sidebar: #0f172a;
    --surface-muted: #1e293b;
    --interactive-hover-bg: #334155;
    --interactive-hover-border: #475569;
    --interactive-active-bg: #475569;
    --interactive-active-border: #64748b;
    --interactive-selected-bg: #1e3a5f;
    --interactive-selected-border: #3b82f6;
  }
  body {
    background: #020617;
  }
}

/* 수동 다크 모드 토글 지원 */
html[data-theme="dark"] {
  --text-main: #e2e8f0;
  --text-subtle: #94a3b8;
  --text-muted: #64748b;
  --border-main: #334155;
  --border-soft: #1e293b;
  --border-strong: #475569;
  --surface-base: #0f172a;
  --surface-subtle: #1e293b;
  --surface-hover: #334155;
  --surface-selected: #1e3a5f;
  --surface-sidebar: #0f172a;
  --surface-muted: #1e293b;
  --interactive-hover-bg: #334155;
  --interactive-hover-border: #475569;
  --interactive-active-bg: #475569;
  --interactive-active-border: #64748b;
  --interactive-selected-bg: #1e3a5f;
  --interactive-selected-border: #3b82f6;
}
html[data-theme="dark"] body {
  background: #020617;
}

/* 페이지 로드 시 transition 깜빡임 방지 */
html.no-transition,
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
  transition: none !important;
  animation: none !important;
}

button, input, select, textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}



.empty-block {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  padding: var(--space-6);
  font-size: var(--font-size-main, 12px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted, #9ca3af);
  text-align: center;
}

.empty-block strong {
  color: var(--text-main);
  font-weight: var(--font-weight-strong);
}

/* ═════ PWA 설치 배너 ═════ */
@media all and (display-mode: standalone) {
  .pwa-install-banner { display: none !important; }
}
@media (min-width: 769px) {
  .pwa-install-banner { display: none !important; }
}
.pwa-install-banner {
  position: fixed;
  bottom: calc(var(--mobile-tabbar-height, 56px) + env(safe-area-inset-bottom));
  left: 8px;
  right: 8px;
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.12);
}
.pwa-install-banner__content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pwa-install-banner__icon {
  border-radius: 10px;
  flex-shrink: 0;
}
.pwa-install-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pwa-install-banner__text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.pwa-install-banner__text span {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-install-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pwa-install-banner__btn {
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-banner__btn--dismiss {
  background: transparent;
  color: #64748b;
}
.pwa-install-banner__btn--accept {
  background: #1b2a4a;
  color: #fff;
}