/* ==========================================================================
   かなさホーム — ページ送り（template-parts/kanasa/pagination.php。コラム一覧）
   Figma にかなさの形がないので、絞り込みのチップと同じ形（白・緑の線の長丸／いまのページは濃い緑）で作った。押せる大きさは 48px。
   SP は最初・最後のページ（is-edge）を出さず「前へ・1・2・3・次へ」。
   ========================================================================== */

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

.c-kanasa-pagination__num,
.c-kanasa-pagination__step {
	display: inline-flex;
	gap: var(--space-2xs);
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	font: var(--text-kanasa-label);
	letter-spacing: var(--ls-kanasa);
	color: var(--kanasa-text-primary);
	text-decoration: none;
	background: var(--kanasa-bg-surface);
	border: 2px solid var(--kanasa-border-default);
	border-radius: var(--radius-full);
}

.c-kanasa-pagination__step {
	padding: 0 var(--space-md);
	color: var(--kanasa-text-green);
}

.c-kanasa-pagination__step .c-kanasa-icon {
	width: 16px;
	height: 16px;
}

.c-kanasa-pagination__prev-icon {
	transform: rotate(180deg);
}

.c-kanasa-pagination__num.is-current {
	color: var(--kanasa-text-on-green);
	background: var(--kanasa-bg-green-strong);
	border-color: var(--kanasa-border-strong);
}

.c-kanasa-pagination__step.is-disabled {
	opacity: 0.4;
}

.c-kanasa-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	color: var(--kanasa-text-secondary);
}

@media (hover: hover) {
	a.c-kanasa-pagination__num:hover,
	a.c-kanasa-pagination__step:hover {
		background: var(--kanasa-bg-green-soft);
		border-color: var(--kanasa-border-strong);
	}
}

@media (max-width: 767px) {
	.c-kanasa-pagination__item.is-edge {
		display: none;
	}
}