/* 공용 페이지네이션 컴포넌트 (Tabulator paginationElement = .ext-pagination 대상)
   properties_grid.css 에서 추출 — 다른 그리드 화면에서도 재사용.
   JS: lib/grid_pagination.js updatePageIndicator (숫자 대신 "현재/전체" 주입). */
.ext-pagination { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ext-pagination .tabulator-footer-contents { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; }
.ext-pagination .tabulator-paginator { display: flex; align-items: center; gap: 3px; }
.ext-pagination .tabulator-paginator label { font-size: 10px; color: #64748b; }
/* 행 개수 select — shared/_db_select(.db-select-button) 룩 이식 (native select 스타일링) */
.ext-pagination .tabulator-page-size {
  -webkit-appearance: none; appearance: none;
  padding: 6px 28px 6px 10px;
  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;
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  font: var(--db-text-label-2); color: var(--db-color-text);
  cursor: pointer; outline: none; box-sizing: border-box;
}
.ext-pagination .tabulator-page-size:hover { background-color: var(--db-color-fill-medium); }
.ext-pagination .tabulator-page { font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; }
.ext-pagination .tabulator-page.active { background: #1e40af; color: #fff; border-color: #1e40af; }
/* 숫자 페이지 버튼 숨김 — 처음/이전/다음/마지막 4개만 노출, 가운데는 "현재/전체" 인디케이터 */
/* 숫자 버튼은 .tabulator-pages 래퍼 안에만 존재 → 그 안의 버튼만 숨김.
   (:not([data-page]) 방식은 재렌더 프레임에 data-page 미부여 화살표까지 잠깐 숨겨 깜빡임 유발 → 폐기) */
.ext-pagination .tabulator-pages .tabulator-page { display: none; }
.ext-pagination .tabulator-pages { display: inline-flex; align-items: center; }
.ext-page-indicator { font-size: 13px; font-weight: 700; color: #334155; padding: 0 12px; white-space: nowrap; letter-spacing: 0.02em; }
.ext-page-indicator .ext-page-cur { color: #334155; } /* 현재/전체 = 진한 회색 통일 */
/* 처음/이전/다음/마지막 = 원형 버튼 + Lucide chevron (숫자 버튼은 위 규칙 유지) */
.ext-pagination .tabulator-page[data-page="first"],
.ext-pagination .tabulator-page[data-page="prev"],
.ext-pagination .tabulator-page[data-page="next"],
.ext-pagination .tabulator-page[data-page="last"] {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  color: transparent; font-size: 0; /* 라벨 텍스트 숨김 — 아이콘만 */
  background-color: #fff; background-repeat: no-repeat; /* 흰색 버튼 */
  background-position: center; background-size: 15px 15px;
  border: 1px solid #cbd5e1; /* 흰 카드 위에서 버튼 경계 보이게 */
}
.ext-pagination .tabulator-page[data-page="first"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m11 17-5-5 5-5'/><path d='m18 17-5-5 5-5'/></svg>");
}
.ext-pagination .tabulator-page[data-page="prev"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>");
}
.ext-pagination .tabulator-page[data-page="next"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
}
.ext-pagination .tabulator-page[data-page="last"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 17 5-5-5-5'/><path d='m13 17 5-5-5-5'/></svg>");
}
.ext-pagination .tabulator-page[data-page="first"]:hover:not(:disabled),
.ext-pagination .tabulator-page[data-page="prev"]:hover:not(:disabled),
.ext-pagination .tabulator-page[data-page="next"]:hover:not(:disabled),
.ext-pagination .tabulator-page[data-page="last"]:hover:not(:disabled) {
  background-color: #f1f5f9; border-color: #94a3b8; /* hover 연회색 */
}
.ext-pagination .tabulator-page[data-page="first"]:disabled,
.ext-pagination .tabulator-page[data-page="prev"]:disabled,
.ext-pagination .tabulator-page[data-page="next"]:disabled,
.ext-pagination .tabulator-page[data-page="last"]:disabled {
  opacity: 0.35; cursor: default;
}
.ext-pagination .tabulator-page[disabled] { opacity: .4; cursor: default; }
.ext-pagination .tabulator-page-counter { font-size: 10px; color: #64748b; }
.tabulator .tabulator-page { font-size: 10px !important; padding: 2px 7px !important; border-radius: 3px !important; }

/* 공용 그리드 삭제 버튼 (Tabulator 셀 등) — 회색 톤 컴팩트 pill, 보더 없음.
   행 높이(22px)에 맞춰 세로 짤림 방지: line-height/패딩 축소. */
.grid-del-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 9px; font-size: 11px; font-weight: 600; line-height: 1.4;
  color: #475569; background: #f1f5f9; border: none;
  border-radius: 5px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.grid-del-btn:hover { background: #e2e8f0; color: #1e293b; }