/*
 * 一覧のページ送り（指示書AA 段階2）
 *
 * ★色は CSS 変数だけを使う★ — `components/ui/` の既存部品（Pill / FilterButton /
 *   GradeBadge / StatCard / ProgressBar）はどれも `THEME_TOKENS` を import していない。
 */

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
}

.count {
  font-size: 12px;
  color: var(--tx-m);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.num,
.step {
  font-size: 12px;
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--bd);
  background: transparent;
  color: var(--tx-m);
  cursor: pointer;
}

.num:hover:not(:disabled),
.step:hover:not(:disabled) {
  color: var(--tx-d);
  border-color: var(--tx-m);
}

/* 「前へ」「次へ」が端で押せないとき。現在ページのボタンは .numActive が上書きする */
.step:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ★現在ページ★ — disabled だが「押せない」ではなく「ここに居る」なので薄くしない */
.numActive {
  border-color: var(--ac);
  color: var(--ac);
  font-weight: 600;
  cursor: default;
}

/* ★「…」は button ではない★（押せる対象にしない） */
.gap {
  font-size: 12px;
  min-width: 20px;
  text-align: center;
  color: var(--tx-m);
  user-select: none;
}