/* ==========================================================================
   sections/pagination.css
   --------------------------------------------------------------------------
   ★ 모든 항목(숫자 · 화살표 · 현재 페이지 · 빈 슬롯)이 **같은 크기 슬롯**을 차지한다.
     현재 페이지는 그 슬롯에 배경만 칠하는 것이지 더 커지지 않는다.
     그렇게 하지 않으면 페이지를 넘길 때마다 숫자 간격이 들쭉날쭉해진다.

   ★ 시안의 "1 2 3 4 5"와 블록 폭 198×22 는 5페이지 기준 **참고값**이다.
     실제 개수는 쿼리 결과를 따르고, 1페이지에선 '이전'이 마지막에선 '다음'이 빠져
     폭이 줄어드는 것이 정상 — **고정 폭으로 잡지 말 것.**
   ========================================================================== */

.c4-pagination {
	display: flex;
	justify-content: center;
}

/*
 * ★★ 선택자를 직계 자식으로 한정한다(`>`).
 *    paginate_links() 는 `.page-numbers` 클래스를 바깥 <ul> 에도, 그 안의 각
 *    <a>/<span> 에도 **똑같이** 붙인다. 한정 없이 `.page-numbers` 로 쓰면
 *    숫자 항목 안쪽까지 규칙이 걸려 글자가 상자 밖으로 밀리고
 *    현재 페이지 칩이 비어 보인다.
 */
.c4-pagination > .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--c4-page-slot-gap);   /* 슬롯 26 + 4 = 시안의 중심 간격 30 */
	list-style: none;
	margin: 0;
	padding: 0;
}

.c4-pagination > .page-numbers > li {
	display: flex;
}

/* 슬롯 — 숫자·화살표·현재 페이지가 전부 같은 크기 */
.c4-pagination > .page-numbers > li > .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--c4-page-slot-w);
	height: var(--c4-page-slot-h);
	border-radius: var(--c4-radius-chip);
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-faint);
}

.c4-pagination > .page-numbers > li > a.page-numbers:hover { color: var(--c4-color-accent); }

/* 현재 페이지 — 같은 슬롯에 배경만 칠한다 */
.c4-pagination > .page-numbers > li > .page-numbers.current {
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
}

/* 좌우는 **화살표 아이콘만**이다. 글자는 sr-only 로만 둔다(시안에 글자가 없다). */
.c4-pagination__arrow {
	width: var(--c4-page-arrow-w);
	height: var(--c4-page-arrow-h);
	color: var(--c4-color-text-faint);
}

.c4-pagination__arrow--prev { transform: rotate(90deg); }
.c4-pagination__arrow--next { transform: rotate(-90deg); }

.c4-pagination > .page-numbers > li > a:hover .c4-pagination__arrow { color: var(--c4-color-accent); }

/*
 * 빠진 화살표 자리를 **빈 슬롯**으로 채워 숫자들의 가로 위치가 페이지마다
 * 움직이지 않게 한다. 어느 쪽이 빠졌는지는 PHP 가 클래스로 알려 주므로
 * :has() 가 필요 없다.
 * ★ 여기서도 `>` 한정이 핵심이다 — 의사요소를 <ul> 에만 붙인다.
 */
.c4-pagination--no-prev > .page-numbers::before,
.c4-pagination--no-next > .page-numbers::after {
	content: "";
	width: var(--c4-page-slot-w);
	height: var(--c4-page-slot-h);
	flex-shrink: 0;
}