/* 공용 페이지네이션 컴포넌트 (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: var(--db-color-primary); color: #fff; border-color: var(--db-color-primary); }
/* 숫자 페이지 버튼 숨김 — 처음/이전/다음/마지막 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: var(--db-color-text-strong); padding: 0 12px; white-space: nowrap; letter-spacing: 0.02em; }
.ext-page-indicator .ext-page-cur { color: var(--db-color-text-strong); } /* 현재/전체 = 진한 회색 통일(db_tokens 정본) */
/* 처음/이전/다음/마지막 = 원형 버튼 + 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 footerElement = .grid-topbar-pager 대상) ──────────
   법인고객·공단입주업체·문서관리가 쓴다. 회장님 지시(2026-08-18, 문서관리는 2026-08-25): 「표시 200 · 1 2 3 4」 를 표 아래
   오른쪽 끝이 아니라 **검색 바로 옆**에서 보고 싶다 — 표를 훑다가 페이지를 넘기려고 매번
   화면 맨 아래 오른쪽까지 눈을 옮겨야 했다.

   위의 .ext-pagination 과 **다른 물건이다.** 그쪽은 숫자 버튼을 숨기고(:26) "현재/전체"
   인디케이터로 바꾸는 매물 그리드용이다. 여기서는 숫자 버튼이 **요구사항 자체**라 살린다 —
   같은 클래스에 예외를 다는 대신 갈라 둔 이유다.

   ⚠️ width:max-content 는 장식이 아니다. Tabulator 는 리드로우마다 footerRedraw() 에서
      `containerElement.clientWidth < scrollWidth` 면 숫자 버튼 묶음(.tabulator-pages)을
      display:none 으로 접는다(좁은 푸터 대응 로직). 컨테이너를 내용폭에 딱 맞추면 두 값이
      같아져 그 분기에 안 걸린다 — 그러지 않으면 창을 줄일 때 숫자가 통째로 사라진다. */
.grid-topbar-pager {
  display: flex; align-items: center; gap: 8px;
  width: max-content; flex-shrink: 0; white-space: nowrap;
}
.grid-topbar-pager:empty { display: none; }          /* 데이터 0건 = 그리드 미생성 → 빈 칸 안 남긴다 */
.grid-topbar-pager .tabulator-page-counter { font-size: 11px; color: var(--db-color-text-sub); }
.grid-topbar-pager .tabulator-paginator { display: flex; align-items: center; gap: 3px; }
.grid-topbar-pager .tabulator-paginator label { font-size: 11px; color: var(--db-color-text-sub); }

/* 「표시 [200 ▾]」 — .ext-pagination 판(.tabulator-page-size)의 룩을 그대로 쓰되 상단 바 높이(28px)에 맞춘다.
   Tailwind preflight 가 select 의 보더·배경을 지우므로 여기서 다시 세우지 않으면 알몸으로 뜬다. */
.grid-topbar-pager .tabulator-page-size {
  -webkit-appearance: none; appearance: none;
  height: 28px; padding: 0 24px 0 8px;
  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 7px 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;
}
.grid-topbar-pager .tabulator-page-size:hover { background-color: var(--db-color-fill-medium); }

/* 숫자·화살표 버튼 — 여기선 **숫자를 숨기지 않는다**(위 머리주석). */
.grid-topbar-pager .tabulator-pages { display: inline-flex; align-items: center; gap: 3px; }
.grid-topbar-pager .tabulator-page {
  min-width: 24px; height: 24px; padding: 0 6px;
  border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
  font-size: 11px; line-height: 1; color: #475569; cursor: pointer;
}
.grid-topbar-pager .tabulator-page:hover:not(:disabled) { background: #f1f5f9; border-color: #94a3b8; }
.grid-topbar-pager .tabulator-page.active {
  background: var(--db-color-primary); border-color: var(--db-color-primary); color: #fff; font-weight: 700;
}
.grid-topbar-pager .tabulator-page:disabled,
.grid-topbar-pager .tabulator-page[disabled] { opacity: 0.35; cursor: default; }