/* ==========================================================================
   MODULE: components/pagination (.wzs-pagination)
   글 목록 아래 "이전 1 2 3 다음". 마크업은 워드프레스 기본(the_posts_pagination)이고
   호출은 template-parts/components/pagination.php 한 곳에서만 한다.

   왜 컴포넌트로 따로 두나: 예전에는 이 줄에 스타일이 하나도 없어서 맨 글자만 카드 바로 밑에
   붙어 나왔다 — 눌러야 할 곳이라는 게 안 보였고, 카드와의 간격도 0 이었다.
   무역 노하우(카테고리)·자료실(카테고리)·태그 목록이 모두 archive.php 를 쓰는데
   pages/magazine.css 는 일부 목록에서만 로드되므로, 상시 로드되는 컴포넌트로 뒀다.

   모양은 바로 위 카테고리 필터 탭(pages/magazine.css .wzs-cat-filter-tab)과 같은 결이다 —
   흰 알약 + 지금 페이지만 잉크로 반전. 한 페이지 안에 "누르는 알약"이 두 가지 모양이면
   어느 쪽이 같은 종류의 조작인지 헷갈린다.
   ========================================================================== */

/* 카드 그리드와 64px 띄운다. 32px 로는 마지막 카드 줄의 그림자·테두리에 여전히 붙어 보였다. */
.wzs-pagination {
	margin-top: var(--wzs-space-7);
}

/* 워드프레스가 넣는 제목(h2.screen-reader-text)은 화면낭독기용이다. 코어 블록 CSS 가
   숨겨 주긴 하지만, 그 CSS 가 빠진 환경에서 "글 페이지 매김" 제목이 그대로 드러나지 않게
   여기서도 숨긴다(base/reset.css 의 .wzs-sr-only 와 같은 방식). */
.wzs-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wzs-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wzs-space-2);
}

/* 누를 수 있는 칸은 44px — 손가락 기준 최소 크기. 숫자 폭이 달라도(1 과 12) 칸이 흔들리지
   않도록 최소 폭을 높이와 같게 두고 숫자는 고정폭으로 그린다. */
.wzs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wzs-border);
	border-radius: 999px;
	background: var(--wzs-white);
	color: var(--wzs-ink-soft);
	font-size: var(--wzs-fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	transition:
		border-color var(--wzs-duration-fast) var(--wzs-ease),
		color var(--wzs-duration-fast) var(--wzs-ease),
		background-color var(--wzs-duration-fast) var(--wzs-ease);
}

.wzs-pagination a.page-numbers:hover {
	border-color: var(--wzs-ink);
	color: var(--wzs-ink);
}

.wzs-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--wzs-blue);
	outline-offset: 2px;
}

/* 지금 페이지 — 카테고리 필터의 켜진 탭과 같은 반전 */
.wzs-pagination .page-numbers.current {
	border-color: var(--wzs-ink);
	background: var(--wzs-ink);
	color: var(--wzs-white);
}

/* 이전·다음은 글자가 붙어 숫자 칸보다 넓다. 좌우를 조금 더 벌려 숫자 칸과 구분한다. */
.wzs-pagination .prev,
.wzs-pagination .next {
	padding: 0 18px;
}

/* 건너뛴 페이지(…)는 누를 수 없으니 칸 모양을 벗긴다 */
.wzs-pagination .page-numbers.dots {
	min-width: 24px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--wzs-ink-muted);
}

@media (max-width: 480px) {
	.wzs-pagination {
		margin-top: var(--wzs-space-6);
	}

	.wzs-pagination .nav-links {
		gap: 6px;
	}

	.wzs-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
		padding: 0 12px;
	}

	.wzs-pagination .prev,
	.wzs-pagination .next {
		padding: 0 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wzs-pagination .page-numbers {
		transition: none;
	}
}