/* ==================================================
   Pagination Style
   ================================================== */

   
/* コンテナ：右下に配置＆上下にパディングを追加 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 0 32px 0;   /* 上下に余白（パディング）を追加 */
  margin-top: 16px;
}

/* ページネーションボタン基本スタイル */
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text); /* 通常時の文字色 */
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ホバー時：背景色と文字色を入れ替えて数字が消えないように調整 */
.page-btn:hover:not(:disabled) {
  background-color: var(--color-accent); /* ホバー時の背景色 */
  border-color: var(--color-accent);
  color: #FFFFFF !important;              /* ホバー時も文字色を白にして数字をくっきり表示 */
}

/* アクティブ（選択中ページ）ボタン */
.page-btn.active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* 非活性（disabled）ボタン */
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: var(--color-surface);
  color: var(--color-text);
}