/* door-butler-web Design System Tokens
   M3 = 구조·표준 차용 / Wanted = 시그니처·한국 톤·다크모드 차용
   컴포넌트는 var(--db-*) 만 참조 */

:root {
  /* ── Color / Background ──────────────────────────── */
  --db-color-bg:              #F7F7F8;        /* coolneutral/98 (pink → gray 전환) */
  --db-color-bg-alt:          #F4F4F5;        /* coolneutral/97 (한 단계 어둠) */
  --db-color-card:            #FFFFFF;        /* 출처: M3 surface-container-lowest */
  --db-color-sidebar:         #FFFFFF;        /* 사이드바 전용 (라이트는 card와 동일, 다크에서 분리) */
  --db-color-card-high:       #EDEDEE;        /* 중립 그레이 (M3 surface-high pink 제거) */
  --db-color-overlay:         rgba(0,0,0,0.56); /* 출처: Wanted bg/overlay */

  /* ── Color / Foreground ──────────────────────────── */
  --db-color-on-bg:           #1D1B20;        /* 출처: M3 on-surface */
  --db-color-text:            #1D1B20;        /* 출처: M3 on-surface */
  --db-color-text-strong:     #17171A;        /* 출처: Wanted fg/neutral/strong */
  --db-color-text-sub:        #70737C;        /* 출처: Wanted fg/neutral/alt */
  --db-color-text-muted:      rgba(55,56,60,0.28); /* 출처: Wanted fg/neutral/muted */

  /* ── Color / Primary (Action) — 강화도어 메인 하늘 ──── */
  --db-color-primary:         #306AFF;        /* 메인 블루 */
  --db-color-primary-hover:   #2B5FE6;        /* 10% darker */
  --db-color-primary-pressed: #2655CC;        /* 20% darker */
  --db-color-on-primary:      #FFFFFF;        /* white on dark primary */

  /* ── Color / Semantic ────────────────────────────── */
  --db-color-positive:        #00BF40;        /* 출처: Wanted fg/positive */
  --db-color-positive-bg:     #D6F6E1;        /* 출처: Wanted bg/positive/subtle */
  --db-color-negative:        #FF4242;        /* 출처: Wanted fg/negative */
  --db-color-negative-bg:     #FFE5E5;        /* 출처: Wanted bg/negative/subtle */
  --db-color-cautionary:      #FFC20A;        /* 출처: Wanted fg/cautionary */
  --db-color-cautionary-bg:   #FFF4CC;        /* 출처: Wanted bg/cautionary/subtle */
  --db-color-info:            #0098B2;        /* 출처: Wanted fg/informative */

  /* ── Color / Outline ─────────────────────────────── */
  --db-color-outline:         rgba(112,115,124,0.22); /* 출처: Wanted line/neutral */
  --db-color-outline-strong:  rgba(112,115,124,0.40); /* 출처: Wanted line/neutral/strong */
  --db-color-outline-primary: #2655CC;        /* primary-pressed (테두리는 진한 톤) */
  --db-color-focus-ring:      rgba(48,106,255,0.50); /* 306AFF alpha */

  /* ── Color / Fill ────────────────────────────────── */
  --db-color-fill-subtle:     rgba(112,115,124,0.05); /* 출처: Wanted bg/fill/subtle */
  --db-color-fill-light:      rgba(112,115,124,0.08); /* 출처: Wanted bg/fill/light */
  --db-color-fill-medium:     rgba(112,115,124,0.16); /* 출처: Wanted bg/fill/medium */

  /* ── Color / Inverse ─────────────────────────────── */
  --db-color-inverse:         #000000;        /* 출처: Wanted bg/inverse */
  --db-color-on-inverse:      #FFFFFF;        /* 출처: Wanted fg/on-color */

  /* ── Typography ──────────────────────────────────── */
  --db-font-sans:   'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --db-font-mono:   'Roboto Mono', ui-monospace, monospace;

  /* 출처: Wanted typography scale */
  --db-text-display-1: 700 72px/1.2 var(--db-font-sans);
  --db-text-title-1:   700 36px/1.334 var(--db-font-sans);
  --db-text-title-2:   700 28px/1.358 var(--db-font-sans);
  --db-text-title-3:   700 24px/1.334 var(--db-font-sans);
  --db-text-heading-1: 600 20px/1.4 var(--db-font-sans);
  --db-text-heading-2: 600 17px/1.412 var(--db-font-sans);
  --db-text-body-1:    500 16px/1.5 var(--db-font-sans);
  --db-text-body-2:    500 15px/1.467 var(--db-font-sans);
  --db-text-label-1:   600 14px/1.429 var(--db-font-sans);
  --db-text-label-2:   500 13px/1.385 var(--db-font-sans);
  --db-text-caption-1: 500 12px/1.333 var(--db-font-sans);

  /* ── Radius ──────────────────────────────────────── */
  --db-radius-xs:   4px;   /* 출처: M3 extra-small */
  --db-radius-sm:   8px;   /* 출처: M3 small / Wanted button/sm */
  --db-radius-md:   12px;  /* 출처: M3 medium */
  --db-radius-lg:   16px;  /* 출처: M3 large / Wanted card/inner */
  --db-radius-xl:   24px;  /* 출처: Wanted card */
  --db-radius-2xl:  32px;  /* 출처: Wanted card/outer */
  --db-radius-pill: 9999px;
  --db-radius-input: 10px; /* 출처: Wanted input */
  --db-radius-btn:   10px; /* 출처: Wanted button/md */

  /* ── Shadow ──────────────────────────────────────── */
  --db-shadow-card-soft: 0 1px 2px rgba(23,23,23,.06), 0 4px 8px rgba(23,23,23,.07); /* 출처: Wanted */
  --db-shadow-card:      0 2px 4px rgba(23,23,23,.07), 0 8px 16px rgba(0,0,0,.08);   /* 출처: Wanted */
  --db-shadow-card-hover:0 4px 8px rgba(23,23,23,.10), 0 12px 24px rgba(0,0,0,.12); /* 출처: Wanted */
  --db-shadow-overlay:   0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);   /* 출처: Wanted */
  --db-shadow-focus:     none;                                                       /* ring 제거 */

  /* ── Elevation (M3 보완용) ───────────────────────── */
  --db-elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15); /* 출처: M3 */
  --db-elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.15); /* 출처: M3 */

  /* ── Spacing ─────────────────────────────────────── */
  --db-space-1:  4px;
  --db-space-2:  8px;
  --db-space-3:  12px;
  --db-space-4:  16px;
  --db-space-5:  20px;
  --db-space-6:  24px;
  --db-space-8:  32px;
  --db-space-10: 40px;
  --db-space-12: 48px;
  --db-space-16: 64px;

  /* ── Motion ──────────────────────────────────────── */
  --db-duration-fast:   150ms; /* 출처: Wanted */
  --db-duration-base:   200ms; /* 출처: Wanted */
  --db-duration-slow:   300ms; /* 출처: Wanted */
  --db-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* 출처: Wanted */
  --db-easing-out:      cubic-bezier(0, 0, 0.2, 1);   /* 출처: Wanted */

  /* ── State Layer ─────────────────────────────────── */
  --db-state-hover:    0.08; /* 출처: M3 */
  --db-state-focus:    0.10; /* 출처: M3 */
  --db-state-pressed:  0.10; /* 출처: M3 */
}

/* Dark theme */
[data-db-theme="dark"] {
  --db-color-bg:          #0D0E10;   /* 출처: Wanted dark bg/neutral */
  --db-color-bg-alt:      #17171A;
  --db-color-card:        #25262A;   /* 출처: Wanted dark bg/elevated */
  --db-color-sidebar:     #25262A;   /* card와 동일 */
  --db-color-on-bg:       #F7F7F8;
  --db-color-text:        #F7F7F8;
  --db-color-text-strong: #F7F7F8;
  --db-color-text-sub:    #989BA2;
  --db-color-primary:     #306AFF;
  --db-color-outline:     rgba(247,247,248,0.16);
  --db-color-fill-subtle: rgba(247,247,248,0.05);
  --db-color-fill-light:  rgba(247,247,248,0.08);
}

/* Base */
body {
  font: var(--db-text-body-2);
  color: var(--db-color-text);
  background: var(--db-color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────────
   Page Layout — Zone A/B/C/D (page-layout-rules.md v1.2)
   ────────────────────────────────────────────────────────── */
.db-page {
  display: flex; flex-direction: column;
  height: 100%; padding: var(--db-space-4);
  gap: var(--db-space-4); background: var(--db-color-bg);
}
.db-card {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  background: var(--db-color-card);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow-card-soft);
  overflow: hidden;
  padding: var(--db-space-4);
  gap: var(--db-space-5);
}
.db-zone-header { display: flex; align-items: center; gap: var(--db-space-3); }
.db-zone-header .page-title {
  font: var(--db-text-heading-1);
  font-weight: 700;
  color: var(--db-color-text-strong);
  letter-spacing: -0.018em;
  margin: 0;
}
.db-zone-filter {
  display: flex; flex-wrap: nowrap; align-items: flex-end;
  gap: var(--db-space-4);
  padding: var(--db-space-3) var(--db-space-4);
  background: var(--db-color-bg-alt);
  border-radius: var(--db-radius-sm);
}
.db-field { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.db-field > label { font: var(--db-text-caption-1); color: var(--db-color-text-sub); }
.db-field input,
.db-field select {
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  padding: 6px 10px;
  font: var(--db-text-label-2);
  outline: none;
  background: var(--db-color-card);
  color: var(--db-color-text);
}
.db-field input:focus {
  border-color: var(--db-color-outline-primary);
  box-shadow: var(--db-shadow-focus);
}
/* 블루프린트 component/select native_styled — UA 화살표 제거 + 커스텀 chevron SVG */
.db-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 6px 30px 6px 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2370737C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.db-field select:focus {
  /* 블루프린트 rule: focus/hover 시 보더 변화 없음 */
  border-color: var(--db-color-outline);
  box-shadow: none;
}
.db-field select:disabled {
  background-color: var(--db-color-bg-alt);
  color: var(--db-color-text-sub);
  cursor: not-allowed;
}
.db-zone-main { flex: 1; min-height: 0; }
/* 블루프린트 component/button spec 준수 — primary: label-1(14/600), secondary: label-2(13/500) */
.db-btn {
  height: 32px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: var(--db-radius-btn);
  font: var(--db-text-label-1);
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
  line-height: 1;
}
.db-btn-primary {
  background: var(--db-color-primary) !important;
  color: var(--db-color-on-primary) !important;
  border-color: var(--db-color-primary) !important;
}
.db-btn-primary:hover { background: var(--db-color-primary-hover) !important; border-color: var(--db-color-primary-hover) !important; }
.db-btn-primary:active { background: var(--db-color-primary-pressed) !important; border-color: var(--db-color-primary-pressed) !important; }
.db-btn-secondary {
  background: var(--db-color-fill-light);
  color: var(--db-color-text-sub);
  padding: 0 10px;
  font: var(--db-text-label-2);
  text-decoration: none;
}
.db-btn-secondary:hover { background: var(--db-color-fill-medium); }

/* 트리 사이드바 (db-pane-tree) — 화살표 토글 */
.db-pane-tree {
  width: 280px;
  background: var(--db-color-card);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-md);
  padding: var(--db-space-4);
  overflow-y: auto;
}
.db-pane-tree h3 {
  font: var(--db-text-label-1);
  font-weight: 700;
  color: var(--db-color-text-strong);
  margin: 0 0 var(--db-space-3);
}
.db-tree {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-tree__group { list-style: none; }
.db-tree__item {
  width: 100%;
  display: flex; align-items: center; gap: var(--db-space-2);
  padding: 6px var(--db-space-3);
  font: var(--db-text-label-2);
  color: var(--db-color-text);
  background: none;
  border: none;
  border-radius: var(--db-radius-sm);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--db-duration-fast);
  text-align: left;
}
.db-tree__item:hover { background: var(--db-color-fill-subtle); }
.db-tree__item.is-active {
  background: var(--db-color-fill-light);
  color: var(--db-color-primary);
  font-weight: 600;
}
.db-tree__caret {
  display: inline-flex;
  width: 12px; flex-shrink: 0;
  color: var(--db-color-text-sub);
  transition: transform var(--db-duration-fast);
}
.db-tree__group[data-expanded="true"] .db-tree__caret {
  transform: rotate(90deg);
}
.db-tree__children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.db-tree__group:not([data-expanded="true"]) .db-tree__children {
  display: none;
}
.db-tree__item--child {
  padding-left: var(--db-space-6);
  color: var(--db-color-text-sub);
  font-weight: 400;
  cursor: pointer;
}

/* 토글 스위치 (설정 패널 다크모드 등) */
.db-switch { position:relative; display:inline-block; width:36px; height:20px; }
.db-switch input { opacity:0; width:0; height:0; }
.db-switch__slider {
  position:absolute; cursor:pointer; inset:0;
  background: var(--db-color-fill-medium);
  border-radius: 9999px;
  transition: background var(--db-duration-fast);
}
.db-switch__slider::before {
  content:""; position:absolute;
  left:2px; bottom:2px; width:16px; height:16px;
  background:#fff; border-radius:50%;
  transition: transform var(--db-duration-fast);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.db-switch input:checked + .db-switch__slider {
  background: var(--db-color-primary);
}
.db-switch input:checked + .db-switch__slider::before {
  transform: translateX(16px);
}

/* 사이드바 row — 메뉴 + 별 묶음 hover/active 효과 */
.sidebar-row {
  transition: background var(--db-duration-fast);
}
.sidebar-row:hover {
  background: var(--db-color-fill-subtle);
}
.sidebar-row.is-active {
  background: var(--db-color-fill-light);
}

/* 즐겨찾기 별 — 항상 표시, 클릭 시 별 자체 배경 */
.db-fav-star:hover i {
  color: var(--db-color-primary) !important;
}

/* 헤더 동적 메뉴 버튼 (즐겨찾기) */
.db-header-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px var(--db-space-3); height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--db-radius-sm);
  font: var(--db-text-caption-1);
  color: var(--db-color-text-strong);
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.db-header-menu-btn:hover { background: var(--db-color-fill-subtle); }
.db-header-menu-btn.is-active {
  background: var(--db-color-fill-light);
  border-color: var(--db-color-outline);
}

/* v1.4 — Zone A breadcrumb 표준 (강화도어 › <페이지명>) */
.db-breadcrumb {
  display: flex; align-items: center;
  gap: var(--db-space-2);
  font: var(--db-text-caption-1);
  color: var(--db-color-text-sub);
}
.db-breadcrumb__sep { color: var(--db-color-text-sub); }
.db-breadcrumb__current {
  font: var(--db-text-label-1);
  color: var(--db-color-text-strong);
  font-weight: 600;
}

/* v1.5 — Zone D 페이지 액션 버튼 그룹 */
.db-zone-actions {
  display: flex; align-items: center;
  gap: var(--db-space-2);
  padding: var(--db-space-3) var(--db-space-4);
  border-top: 1px solid var(--db-color-outline);
  background: var(--db-color-card);
  position: sticky;
  bottom: 0;
  z-index: 200;
}

/* v1.5 — form variant 전용 */
.db-density-comfortable .db-field > input,
.db-density-comfortable .db-field > select,
.db-density-comfortable .db-field > textarea {
  padding: 10px 12px;
}
.db-form-section {
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-md);
  padding: var(--db-space-4) var(--db-space-5);
  margin-bottom: var(--db-space-4);
  background: var(--db-color-card);
}
.db-form-section > legend {
  font: var(--db-text-label-1);
  font-weight: 600;
  color: var(--db-color-primary);
  padding: 0 var(--db-space-2);
}
.db-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--db-space-3) var(--db-space-4);
  margin-top: var(--db-space-3);
}
.db-form-grid .db-field { width: 100%; }
.db-form-grid .db-field > input,
.db-form-grid .db-field > select,
.db-form-grid .db-field > textarea { width: 100%; box-sizing: border-box; }
.db-form-grid .col-span-2 { grid-column: span 2; }
.db-form-grid .col-span-3 { grid-column: span 3; }
.db-form-actions {
  position: sticky;
  bottom: 0;
  display: flex; align-items: center;
  justify-content: flex-end;
  gap: var(--db-space-2);
  padding: var(--db-space-3) var(--db-space-5);
  margin: var(--db-space-3) calc(-1 * var(--db-space-5)) calc(-1 * var(--db-space-5));
  background: var(--db-color-card);
  border-top: 1px solid var(--db-color-outline);
  box-shadow: var(--db-shadow-card-soft);
  z-index: 200; /* sticky */
}
.db-zone-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-width: var(--db-content-max-width);
  width: 100%;
  margin-inline: auto;
  padding-right: var(--db-space-2);
}

/* v1.5 — master_detail / tree_grid 공통 split 레이아웃 */
.db-zone-split {
  display: grid;
  gap: var(--db-space-4);
  flex: 1; min-height: 0;
}
.db-zone-split--master-detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.db-zone-split--tree-grid     { grid-template-columns: 280px minmax(0, 1fr); }

.db-pane-master, .db-pane-grid {
  display: flex; flex-direction: column;
  min-height: 0;
}
.db-pane-detail, .db-pane-tree {
  background: var(--db-color-bg-alt);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-md);
  padding: var(--db-space-4);
  overflow-y: auto;
  min-height: 0;
}
.db-pane-detail h3, .db-pane-tree h3 {
  font: var(--db-text-label-1);
  font-weight: 600;
  color: var(--db-color-text-strong);
  margin: 0 0 var(--db-space-3);
}

/* tree_grid 좌측 트리 */
.db-tree { list-style: none; padding: 0; margin: 0; }
.db-tree__item {
  display: flex; align-items: center;
  padding: 6px var(--db-space-2);
  font: var(--db-text-body-2);
  color: var(--db-color-text);
  cursor: pointer;
  border-radius: var(--db-radius-sm);
}
.db-tree__item:hover { background: var(--db-color-fill-subtle); }
.db-tree__item.is-active { background: var(--db-color-fill-light); color: var(--db-color-primary); font-weight: 600; }
.db-tree__item--child { padding-left: var(--db-space-5); }

/* transaction variant — 헤더 폼 */
.db-zone-header-form {
  background: var(--db-color-bg-alt);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-md);
  padding: var(--db-space-4);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--db-space-3);
}
.db-zone-footer {
  display: flex; align-items: center;
  gap: var(--db-space-3);
  padding-top: var(--db-space-3);
  border-top: 1px solid var(--db-color-outline);
}
.db-amount-summary {
  margin-right: auto;
  display: flex; gap: var(--db-space-4);
  font: var(--db-text-label-1);
}
.db-amount-summary__row { display: flex; gap: var(--db-space-2); align-items: baseline; }
.db-amount-summary__label { color: var(--db-color-text-sub); }
.db-amount-summary__value { color: var(--db-color-text-strong); font-weight: 600; }

/* Tabulator 그리드 헤더 = 메인 컬러 */
.tabulator {
  border: none !important;
  background: transparent !important;
}
.tabulator .tabulator-header {
  background: var(--db-color-primary) !important;
  border-bottom: none !important;
  color: var(--db-color-on-primary) !important;
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--db-color-primary) !important;
  border-right: 1px solid rgba(255,255,255,0.15) !important;
}
.tabulator .tabulator-header .tabulator-col:last-child {
  border-right: none !important;
}
.tabulator .tabulator-header .tabulator-col-title {
  color: var(--db-color-on-primary) !important;
  font: var(--db-text-label-2) !important;
  font-weight: 600 !important;
}
.tabulator .tabulator-col-sorter,
.tabulator .tabulator-arrow {
  display: none !important;
}
.tabulator .tabulator-row {
  background: var(--db-color-card) !important;
  border-bottom: 1px solid var(--db-color-outline) !important;
}
.tabulator .tabulator-row:hover {
  background: var(--db-color-fill-subtle) !important;
}
.tabulator .tabulator-row.tabulator-selected {
  background: var(--db-color-fill-light) !important;
}
.tabulator .tabulator-row .tabulator-cell {
  border-right: none !important;
  font: var(--db-text-label-2) !important;
  color: var(--db-color-text) !important;
  display: inline-flex !important;
  align-items: center !important;
}
.tabulator .tabulator-row .tabulator-cell[style*="text-align: center"],
.tabulator .tabulator-row .tabulator-cell[style*="text-align:center"] {
  justify-content: center !important;
}
/* 그룹 헤더 — 보더 정리 */
.tabulator .tabulator-row.tabulator-group,
.tabulator .tabulator-row.tabulator-group .tabulator-group-header {
  border-top: none !important;
  border-bottom: 1px solid var(--db-color-outline) !important;
  border-right: none !important;
}

/* ── component/pagination (blueprint id=4662) ── */
.tabulator .tabulator-footer {
  background:      var(--db-color-bg-alt) !important;
  border-top:      1px solid var(--db-color-outline) !important;
  padding:         var(--db-space-2) var(--db-space-3) !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             var(--db-space-3) !important;
}
.tabulator .tabulator-paginator {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         4px !important;
  flex-wrap:   nowrap !important;
}
.tabulator .tabulator-paginator label,
.tabulator .tabulator-paginator > span { margin: 0 !important; padding: 0 !important; }

/* 페이지 버튼 — default */
.tabulator .tabulator-page {
  font:          var(--db-text-label-2) !important;
  padding:       0 10px !important;
  border:        1px solid var(--db-color-outline) !important;
  border-radius: var(--db-radius-sm) !important;
  background:    var(--db-color-card) !important;
  color:         var(--db-color-text-strong) !important;
  min-width:     32px !important;
  height:        28px !important;
  cursor:        pointer !important;
  display:       inline-flex !important;
  align-items:   center !important;
  justify-content: center !important;
  box-sizing:    border-box !important;
  margin:        0 !important;
}
/* 숫자 버튼만 정사각형 */
.tabulator .tabulator-page[data-page]:not([data-page="first"]):not([data-page="prev"]):not([data-page="next"]):not([data-page="last"]) {
  width:     32px !important;
  min-width: 32px !important;
  padding:   0 !important;
  margin:    0 1px !important;
}
.tabulator .tabulator-page:hover:not(.disabled) {
  background:   var(--db-color-primary) !important;
  color:        var(--db-color-on-primary) !important;
  border-color: transparent !important;
}
.tabulator .tabulator-page.active {
  background:   var(--db-color-primary) !important;
  color:        var(--db-color-on-primary) !important;
  border-color: var(--db-color-primary) !important;
  font-weight:  600 !important;
}
.tabulator .tabulator-page.disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* 카운터 (x / y 건) */
.tabulator .tabulator-page-counter {
  font:  var(--db-text-caption-1) !important;
  color: var(--db-color-text-sub) !important;
  margin: 0 !important;
}
/* 페이지 크기 선택 */
.tabulator .tabulator-page-size {
  font:          var(--db-text-label-2) !important;
  padding:       4px 8px !important;
  border:        1px solid var(--db-color-outline) !important;
  border-radius: var(--db-radius-sm) !important;
  background:    var(--db-color-card) !important;
}

/* Hide scrollbars (스크롤은 가능, 바만 안 보임) */
* {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / Edge legacy */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome / Safari / Edge */
}

/* Tabulator 그리드는 가로/세로 스크롤바 표시 (override) */
.tabulator,
.tabulator .tabulator-tableholder,
.tabulator .tabulator-tableHolder {
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}
.tabulator::-webkit-scrollbar,
.tabulator .tabulator-tableholder::-webkit-scrollbar,
.tabulator .tabulator-tableHolder::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
}
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb,
.tabulator .tabulator-tableHolder::-webkit-scrollbar-thumb {
  background: var(--db-color-outline);
  border-radius: 5px;
}
.tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover,
.tabulator .tabulator-tableHolder::-webkit-scrollbar-thumb:hover {
  background: var(--db-color-text-sub);
}

/* 필터 행 — 가로 한 줄 강제 (외부 CSS 덮어쓰기 차단) */
/* ── component/filter_row (blueprint id=5019) ── */
.filter-row {
  display:        flex !important;
  flex-direction: row !important;
  flex-wrap:      nowrap !important;
  align-items:    flex-end !important;
  gap:            var(--db-space-2) !important;
  padding:        var(--db-space-3) var(--db-space-4) !important;
  border-radius:  var(--db-radius-sm) !important;
  flex-shrink:    0 !important;
}
.filter-row > * {
  flex: 0 0 auto !important;
}

/* 커스텀 셀렉트 — native UA 화살표 제거 + 토큰 기반 시각 통일 */
.db-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--db-color-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2370737C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,4.5 6,8 9.5,4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px !important;
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  font: var(--db-text-label-2);
  color: var(--db-color-text);
  outline: none;
  cursor: pointer;
  transition: border-color var(--db-duration-fast), box-shadow var(--db-duration-fast);
}
.db-select:focus {
  border-color: var(--db-color-outline);
}
.db-select:disabled {
  background-color: var(--db-color-bg-alt);
  color: var(--db-color-text-sub);
  cursor: not-allowed;
}

/* ── 커스텀 셀렉트 (button + panel) ── */
.db-select-wrap {
  position: relative;
  display: inline-block;
}
.db-select-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  padding-right: 30px;
  background: var(--db-color-card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2370737C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2.5,4.5 6,8 9.5,4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  font: var(--db-text-label-2);
  color: var(--db-color-text);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--db-duration-fast), box-shadow var(--db-duration-fast);
}
.db-select-button:focus,
.db-select--open .db-select-button {
  border-color: var(--db-color-outline);
}
.db-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: var(--db-color-card);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  box-shadow: var(--db-shadow-overlay);
  padding: 4px;
  z-index: 50;
}
.db-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--db-radius-xs);
  font: var(--db-text-label-2);
  color: var(--db-color-text);
  cursor: pointer;
  white-space: nowrap;
}
.db-select__option:hover {
  background: var(--db-color-fill-subtle);
}
.db-select__option--selected {
  color: var(--db-color-primary);
  font-weight: 600;
}
.db-select__option--selected::after {
  content: "✓";
  margin-left: auto;
  color: var(--db-color-primary);
}

/* ─────────────────────────────────────────────────────────────
   Grid Toolbar (그리드 위 추가 버튼)
   ───────────────────────────────────────────────────────────── */
.db-grid-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--db-space-2);
  margin-bottom: var(--db-space-2);
}

/* ─────────────────────────────────────────────────────────────
   Row Action Menu (Tabulator 행 끝 ⋮ 메뉴)
   ───────────────────────────────────────────────────────────── */
.db-row-menu-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--db-radius-xs);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--db-color-text-sub);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.db-row-menu-btn:hover {
  background: var(--db-color-fill-subtle);
  color: var(--db-color-text);
}
.db-row-menu-btn:focus-visible {
  outline: 2px solid var(--db-color-primary);
  outline-offset: 1px;
}

.db-row-menu {
  position: absolute;
  min-width: 140px;
  background: var(--db-color-card);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow-overlay);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db-row-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--db-radius-xs);
  font: var(--db-text-body-2);
  color: var(--db-color-text);
  cursor: pointer;
}
.db-row-menu button:hover {
  background: var(--db-color-fill-subtle);
}
.db-row-menu button.is-danger {
  color: var(--db-color-danger, #d4453b);
}
.db-row-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--db-color-danger, #d4453b) 10%, transparent);
}

/* ── 모달 (.db-modal) ─────────────────────────────────── */
.db-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--db-duration-base) var(--db-easing-standard);
  pointer-events: none;
}
.db-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.db-modal__backdrop {
  position: absolute; inset: 0;
  background: var(--db-color-overlay);
}
.db-modal__panel {
  position: relative;
  background: var(--db-color-card);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-overlay);
  width: min(720px, 92vw);
  will-change: opacity;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.db-modal__panel > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.db-modal.is-open .db-modal__panel { }
.db-modal__header {
  display: flex; align-items: center;
  padding: var(--db-space-4) var(--db-space-5);
  border-bottom: 1px solid var(--db-color-outline);
}
.db-modal__title {
  font: var(--db-text-heading-2);
  color: var(--db-color-text-strong);
  flex: 1;
}
.db-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: var(--db-color-text-sub);
  border-radius: var(--db-radius-sm);
}
.db-modal__close:hover { background: var(--db-color-fill-subtle); }
.db-modal__body {
  padding: var(--db-space-5);
  overflow-y: auto;
  flex: 1;
}
.db-modal__footer {
  display: flex; justify-content: flex-end; gap: var(--db-space-2);
  padding: var(--db-space-3) var(--db-space-5);
  border-top: 1px solid var(--db-color-outline);
  background: var(--db-color-bg-alt);
  border-bottom-left-radius: var(--db-radius-lg);
  border-bottom-right-radius: var(--db-radius-lg);
}
.db-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--db-space-3) var(--db-space-4);
}
.db-form-grid--row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--db-space-3) var(--db-space-4);
}
.db-form-grid--row .db-form-field {
  flex: 1;
  min-width: 120px;
}
.db-form-grid .db-form-field--full { grid-column: 1 / -1; }
.db-form-field {
  display: flex; flex-direction: column; gap: 4px;
}
.db-form-field label {
  font: var(--db-text-caption-1);
  color: var(--db-color-text-sub);
}
.db-form-field input,
.db-form-field textarea,
.db-form-field select {
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  padding: 7px 10px;
  font: var(--db-text-label-2);
  color: var(--db-color-text);
  background: var(--db-color-card);
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.db-form-field textarea { resize: vertical; min-height: 64px; }
.db-form-section {
  margin-bottom: var(--db-space-5);
}
.db-form-section:last-child { margin-bottom: 0; }
.db-form-section__title {
  font: var(--db-text-label-1);
  color: var(--db-color-text-strong);
  margin: 0 0 var(--db-space-3) 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--db-color-outline);
}

/* ─────────────────────────────────────────────────────────────
   Confirm / Alert Modal (window.dbConfirm / window.dbAlert)
   ───────────────────────────────────────────────────────────── */
.db-confirm-modal__overlay {
  position: fixed; inset: 0;
  background: var(--db-color-overlay);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: var(--db-space-4);
}
.db-confirm-modal {
  background: var(--db-color-card);
  border-radius: var(--db-radius-md);
  box-shadow: var(--db-shadow-overlay);
  padding: var(--db-space-5);
  min-width: 320px;
  max-width: 480px;
  display: flex; flex-direction: column;
  gap: var(--db-space-4);
}
.db-confirm-modal__title {
  font: var(--db-text-heading-2);
  color: var(--db-color-text-strong);
}
.db-confirm-modal__body {
  font: var(--db-text-body-2);
  color: var(--db-color-text);
  white-space: pre-wrap;
  line-height: 1.5;
}
.db-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--db-space-2);
}
.db-confirm-modal--danger .db-confirm-modal__title {
  color: var(--db-color-negative);
}
.db-confirm-modal--danger .db-btn-primary {
  background: var(--db-color-negative);
}
.db-confirm-modal--danger .db-btn-primary:hover {
  background: color-mix(in srgb, var(--db-color-negative) 88%, black);
}

/* 미승인 매출 행 — 빨강 펄스 (확인·승인 유도). 매출전표등록 sales-entry */
@keyframes db-blink-pending {
  0%, 100% { background: var(--db-color-negative-bg, #FFE5E5); }
  50%      { background: color-mix(in srgb, var(--db-color-negative, #FF4242) 28%, transparent); }
}
.blink-pending {
  animation: db-blink-pending var(--db-duration-slow, 300ms) ease-in-out infinite alternate;
  color: var(--db-color-negative, #FF4242);
}