/* 페이지 나누기 - 쪽 번호 줄(.list-foot) · 모달 안 쪽 번호 · 더 불러오기 표시.
   규칙: claude_common/ui/paging.md. 색은 --uk-* 만 쓴다. */

/* 아래 줄 - 왼쪽 쪽 표시 · 가운데 쪽 이동 · 오른쪽 한 쪽 건수 */
.list-foot{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.1rem;border-top:1px solid var(--uk-border)}
.list-foot .list-count{flex:0 0 auto;font-size:13px;color:var(--uk-muted);white-space:nowrap}
.list-foot .pagination{margin:0 auto}
.list-foot.is-modal::after{content:'';flex:0 0 4.5rem}   /* 개수 선택이 없는 줄(모달) - 가운데 묶음이 쏠리지 않게 */

.pagination{display:flex;align-items:center;justify-content:center;gap:.3rem}
.pagination-list{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
/* 지금 쪽만 강조색 둥근 네모 + 흰 글자, 나머지는 테두리 없는 흐린 글자(올리면 강조색 선) */
.pagination-first,.pagination-last,.pagination-previous,.pagination-next,.pagination-link{
  display:inline-flex;align-items:center;justify-content:center;min-width:2rem;
  border:1px solid transparent;border-radius:var(--uk-r-sm);background:transparent;
  padding:.35rem .7rem;font:inherit;font-size:13px;line-height:1.4;
  color:var(--uk-muted);text-decoration:none;cursor:pointer;
}
.pagination-first:hover,.pagination-last:hover,.pagination-previous:hover,.pagination-next:hover,.pagination-link:hover{border-color:var(--uk-brand);color:var(--uk-brand)}
.pagination-link.is-current{background:var(--uk-pick);border-color:var(--uk-pick);color: var(--uk-on-strong);font-weight:700;box-shadow:var(--uk-up-sm)}
.pagination [disabled],.pagination [aria-disabled="true"]{opacity:.45;pointer-events:none}

/* 고르기 칸(쪽 고르기 · 한 쪽 건수) */
.pagination-jump,.list-per-page{position:relative}
.pagination-jump select,.list-per-page select{
  font:inherit;font-size:13px;color:var(--uk-fg);
  background:var(--uk-surface);border:1px solid var(--uk-border);border-radius:var(--uk-r-sm);
  padding:.3rem .5rem;cursor:pointer;
}
.list-per-page{flex:0 0 auto}
.list-per-page select{min-width:7.5rem}

/* 좁은 화면(700px 이하, 2026-09-27) - `« ‹ [11 / 16 ▾] › » [20개씩]` 한 줄. 번호 목록·쪽 글자 대신 쪽 고르기 */
.pagination-jump{display:none}
@media (max-width:700px){
  .list-foot{flex-wrap:nowrap;gap:.4rem;padding:.6rem .75rem}
  .list-foot .list-count,.list-foot .pagination-list{display:none}
  .list-foot .pagination{margin:0;gap:.1rem;flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-start}
  .list-foot .pagination-jump{display:inline-flex}
  .list-foot .pagination-jump select{min-width:5.6rem}
  .list-foot :is(.pagination-first,.pagination-last,.pagination-previous,.pagination-next){padding:.35rem .45rem;min-width:0;flex:0 0 auto}
  .list-foot .list-per-page select{min-width:0}
  .list-foot.is-modal::after{display:none}
}
@media (max-width:340px){
  .list-foot :is(.pagination-first,.pagination-last){display:none}
}

/* 더 불러오기(무한 스크롤) - 목록 끝의 도는 표시. 끝이면 아무것도 그리지 않는다 */
.load-more{display:flex;justify-content:center;padding:12px 0;color:var(--uk-muted);font-size:13px}
.load-more::before{content:'';width:18px;height:18px;border-radius:50%;border:2px solid var(--uk-border);border-top-color:var(--uk-brand);animation:pg-spin .8s linear infinite}
@keyframes pg-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.load-more::before{animation-duration:2.4s}}