/* 15줄씩 나눠 보여줄 때 쓰는 표시. list-pager.js와 짝이다. */

/* 이번 쪽에 없는 줄. !important를 쓰는 이유는 줄마다 인라인으로 display를 주는 곳이 있어서다
   — 인라인은 보통 규칙보다 세다. */
tr.lp-hide, .lp-hide { display: none !important; }

.list-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin: 10px 2px 2px;
  font-size: 12px; color: var(--mw-muted);
}
.list-pager .lp-count { font-variant-numeric: tabular-nums; }
.list-pager .lp-btns { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* 쪽 번호 단추 — 26×26 이라 누르기 빠듯했다. 32px 로 올린다. 줄 자체가 표 아래 한 줄이라
   다른 것을 밀지 않는다. 관리자·센터가 같은 파일을 쓰므로 양쪽이 함께 올라간다. */
.list-pager button {
  min-width: 32px; height: 32px; padding: 0 10px;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--mw-line-strong); border-radius: 6px; background: var(--mw-surface);
  font-size: 12px; font-weight: 600; color: var(--mw-ink-soft); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.list-pager button:hover:not(:disabled) { border-color: var(--mw-accent); color: var(--mw-accent-ink); }
.list-pager button.on { background: var(--mw-accent); border-color: var(--mw-accent); color: #fff; }
.list-pager button:disabled { opacity: .4; cursor: not-allowed; }
.list-pager .lp-gap { padding: 0 2px; color: var(--mw-muted); }

@media (max-width: 560px) {
  .list-pager { justify-content: center; }
  .list-pager .lp-btns { margin-left: 0; }
  .list-pager .lp-count { width: 100%; text-align: center; }
}