@charset "UTF-8";
/* ============================================================
   themes/erp/style/pager.css
   페이지네이션
   ------------------------------------------------------------
   목록 / 검색결과 / 게시판 공용.
   로드: additionalCss 에 'pager.css'
   의존: base.css (토큰)
   ============================================================ */

.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  margin-top:38px;
  flex-wrap:wrap;
}

/* a(이동 가능) / span(현재·비활성) 모양을 같게 맞춘다.
   그래야 첫/마지막 페이지에서 버튼이 사라져도 줄이 안 흔들림 */
.pager a,
.pager span{
  min-width:34px;
  height:34px;
  padding-inline:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-mono);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
}

.pager a:hover{
  border-color:var(--ink);
  color:var(--ink);
}

/* 현재 페이지 */
.pager .on{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  font-weight:500;
}

/* 갈 수 없는 방향 버튼 (첫 페이지에서 '이전' 등) */
.pager .off{
  color:var(--shelf-dark);
  background:var(--surface-2);
  border-color:var(--line-soft);
  cursor:default;
}

/* 처음·마지막 — 글자라서 폭이 넓다 */
.pager .edge{
  font-family:var(--f-body);
  font-size:12.5px;
  padding-inline:13px;
}

@media (max-width:640px){
  .pager{ gap:3px; margin-top:28px; }
  .pager a, .pager span{ min-width:30px; height:30px; font-size:12px; }
  /* 모바일에선 처음/마지막 숨김 — 화살표와 번호만으로 충분 */
  .pager .edge{ display:none; }
}