/* ==========================================================================
   Sauna Blog Magazine - Blog List Pagination
   ブログ一覧固定ページ（ID=217, slug: blog-2）のページネーション専用CSS。
   is_page(217) の時のみ読み込まれる（sbm-blog-pagination.php参照）。

   方針:
   - paginate_links()（type=>'list'）が出力する標準クラス名
     （page-numbers / current / dots / prev / next）をそのまま使い、
     独自のクラス名は外側のnav要素（.sbm-blog-pagination）1つだけに絞る。
     なお`<ul>`自体にも`page-numbers`クラスが付与されるため、個々のリンク/現在地
     表示への装飾は`a.page-numbers`・`span.page-numbers`に限定し、`<ul>`要素まで
     ボーダー等が適用されないようにしている
   - 既存ページの配色（本文で確認済みの値）に合わせる。新しい色は増やさない
     - 文字色: #5e5c56（本文テキストと同じ）
     - 現在ページの背景: #5e5c56（本文テキスト色の反転。主張しすぎない濃淡）
     - hover背景: #f8f5ef（ページ全体の背景色と同じ、わずかな変化のみ）
     - 区切り線色: #e4e0d5（既存の区切り線 .p_blog-border と同じ）
   - SPでは各リンク（<a>/<span>）のタップ領域を44px角以上確保する
     （Apple Human Interface Guidelines / Android Material Designの
     推奨最小タップサイズ44px/48dpに合わせた値）
   ========================================================================== */

.sbm-blog-pagination {
	margin: 48px auto 0;
	text-align: center;
}

.sbm-blog-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 6px;
	background-color: transparent;
}

.sbm-blog-pagination li {
	display: flex;
	margin: 0;
}

.sbm-blog-pagination a.page-numbers,
.sbm-blog-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 6px;
	border: 1px solid #e4e0d5;
	color: #5e5c56;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	background-color: transparent;
	box-sizing: border-box;
}

.sbm-blog-pagination a.page-numbers:hover,
.sbm-blog-pagination a.page-numbers:focus {
	background-color: #f8f5ef;
	border-color: #e4e0d5;
}

.sbm-blog-pagination span.page-numbers.current {
	background-color: #5e5c56;
	border-color: #5e5c56;
	color: #f8f5ef;
	font-weight: bold;
}

.sbm-blog-pagination span.page-numbers.dots {
	border: none;
	background: none;
	min-width: auto;
	padding: 0 4px;
	color: #8b8982;
}

.sbm-blog-pagination a.page-numbers.prev,
.sbm-blog-pagination a.page-numbers.next {
	padding: 0 16px;
	color: #5e5c56;
}

@media (max-width: 600px) {
	.sbm-blog-pagination {
		margin-top: 32px;
	}

	.sbm-blog-pagination ul.page-numbers {
		gap: 8px;
	}

	.sbm-blog-pagination a.page-numbers,
	.sbm-blog-pagination span.page-numbers {
		font-size: 15px;
	}
}