/* =========================================================
   PAGINATION（ページネーション）
   archive-quiz / archive-column / tag / mindas_category 共通
   paginate_links の出力 (.page-numbers) を、
   .load-more-wrap / .col-load-more-wrap / .pagination-wrap 配下に限定して
   スタイリング。グローバルに .page-numbers を被せると WP Popular Posts 等の
   プラグイン要素まで影響を受けるので、必ずコンテナにスコープする。
   ========================================================= */

.load-more-wrap,
.col-load-more-wrap,
.pagination-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--sp-xl, 48px);
	margin-bottom: var(--sp-xl, 48px);
}

/* ── 各ボタン ── */
.load-more-wrap .page-numbers,
.col-load-more-wrap .page-numbers,
.pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: #FFFFFF;
	color: var(--clr-text-muted, #6B7385);
	font-family: var(--font-en, Inter, sans-serif);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1;
	border: 1px solid var(--clr-border, #E5E5EE);
	border-radius: var(--r-full);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
	user-select: none;
}

.load-more-wrap a.page-numbers:hover,
.col-load-more-wrap a.page-numbers:hover,
.pagination-wrap a.page-numbers:hover {
	background: var(--clr-brand-light, #EAF1FB);
	color: var(--clr-brand-dark, #233A7A);
	border-color: var(--clr-brand-light, #EAF1FB);
	transform: translateY(-1px);
}

.load-more-wrap a.page-numbers:active,
.col-load-more-wrap a.page-numbers:active,
.pagination-wrap a.page-numbers:active {
	transform: translateY(0);
}

/* ── 現在ページ ── */
.load-more-wrap .page-numbers.current,
.col-load-more-wrap .page-numbers.current,
.pagination-wrap .page-numbers.current {
	background: var(--clr-brand-dark, #233A7A);
	color: #FFFFFF;
	border-color: var(--clr-brand-dark, #233A7A);
	cursor: default;
}

/* ── 省略ドット ── */
.load-more-wrap .page-numbers.dots,
.col-load-more-wrap .page-numbers.dots,
.pagination-wrap .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	min-width: 28px;
	padding: 0 6px;
	color: var(--clr-text-muted, #6B7385);
	cursor: default;
}

/* ── 前へ / 次へ ── */
.load-more-wrap .page-numbers.prev,
.load-more-wrap .page-numbers.next,
.col-load-more-wrap .page-numbers.prev,
.col-load-more-wrap .page-numbers.next,
.pagination-wrap .page-numbers.prev,
.pagination-wrap .page-numbers.next {
	gap: 4px;
	padding: 0 16px;
	font-size: 0.85rem;
	font-family: var(--font-jp, "Noto Sans JP", sans-serif);
	font-weight: 500;
	color: var(--clr-brand-dark, #233A7A);
	background: #FFFFFF;
	border-color: var(--clr-border, #E5E5EE);
}

.load-more-wrap .page-numbers.prev i,
.load-more-wrap .page-numbers.next i,
.col-load-more-wrap .page-numbers.prev i,
.col-load-more-wrap .page-numbers.next i,
.pagination-wrap .page-numbers.prev i,
.pagination-wrap .page-numbers.next i {
	font-size: 1rem;
	line-height: 1;
}

.load-more-wrap a.page-numbers.prev:hover,
.load-more-wrap a.page-numbers.next:hover,
.col-load-more-wrap a.page-numbers.prev:hover,
.col-load-more-wrap a.page-numbers.next:hover,
.pagination-wrap a.page-numbers.prev:hover,
.pagination-wrap a.page-numbers.next:hover {
	background: var(--clr-brand-dark, #233A7A);
	color: #FFFFFF;
	border-color: var(--clr-brand-dark, #233A7A);
}

/* 1ページしかない場合は wrap を非表示 */
.load-more-wrap:empty,
.col-load-more-wrap:empty,
.pagination-wrap:empty {
	display: none;
}

/* ── SP ── */
@media (max-width: 767px) {
	.load-more-wrap,
	.col-load-more-wrap,
	.pagination-wrap {
		gap: 4px;
		padding: 0 8px;
	}

	.load-more-wrap .page-numbers,
	.col-load-more-wrap .page-numbers,
	.pagination-wrap .page-numbers {
		min-width: 36px;
		height: 36px;
		font-size: 0.85rem;
		padding: 0 10px;
	}

	.load-more-wrap .page-numbers.prev,
	.load-more-wrap .page-numbers.next,
	.col-load-more-wrap .page-numbers.prev,
	.col-load-more-wrap .page-numbers.next,
	.pagination-wrap .page-numbers.prev,
	.pagination-wrap .page-numbers.next {
		padding: 0 12px;
		font-size: 0.8rem;
	}

	.load-more-wrap .page-numbers.dots,
	.col-load-more-wrap .page-numbers.dots,
	.pagination-wrap .page-numbers.dots {
		min-width: 24px;
	}
}