/* ==========================================================================
   c-pagination — Figma: PageNavi/Layout（24634:25386）
   番号: 白地・枠 2px gray/200・renewal/JP/18/Bold・上下 8px 左右 16px（最小幅 43px）
   現在: bg/brand + 白文字 / 省略: renewal/JP/Label/18/Regular（icon/strong）/ 前後: 矢印 30px
   ========================================================================== */

.c-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.c-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 43px; /* Figma 固有寸法: 番号ボタンの最小幅 */
  padding: calc(var(--space-8) - 2px) calc(var(--space-16) - 2px); /* Figma 変数 8-spacing/md（16px）→ --space-16。枠線 2px（Figma は内側ストローク）ぶん差し引く */
  border: 2px solid var(--color-gray-200); /* semantic に該当なし（Figma: gray/200）。2px は Figma の枠線幅 */
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c-pagination__link:hover,
.c-pagination__link[aria-current="page"] {
  border-color: var(--color-bg-brand);
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
}

.c-pagination__link--prev,
.c-pagination__link--next {
  min-width: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-icon-strong);
}

.c-pagination__link--prev:hover,
.c-pagination__link--next:hover {
  background-color: transparent;
  color: var(--color-icon-brand);
}

.c-pagination__icon {
  width: 30px; /* アイコンサイズ */
  height: 30px;
}

.c-pagination__link--prev .c-pagination__icon {
  transform: scaleX(-1);
}

.c-pagination__ellipsis {
  display: block;
  min-width: 48px; /* Figma 固有寸法: 省略記号の幅 */
  padding: var(--space-4) var(--space-16);
  color: var(--color-icon-strong);
  text-align: center;
}