/*
 * pagination.css
 *
 * ★ 모든 항목(숫자·화살표·현재 페이지)이 똑같은 크기의 슬롯을 차지한다.
 *   그래야 페이지를 넘길 때마다 숫자 간격이 들쭉날쭉해지지 않는다.
 *
 * ★★ 선택자를 직계 자식(>)으로 한정한다.
 *   paginate_links() 는 .page-numbers 클래스를 바깥 <ul> 에도, 그 안의 각 <a>/<span> 에도
 *   똑같이 붙인다. 한정 없이 쓰면 숫자 항목 안쪽에도 규칙이 걸려
 *   글자가 상자 밖으로 밀리고 현재 페이지 칩이 비어 보인다.
 *
 * 컴포넌트 변형 이름이 'State=Desktop, Mobile' 이므로 PC·모바일이 같은 값을 쓴다.
 */

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

/* 바깥 <ul> — .page-numbers 가 여기에도 붙어 있다. */
.c4-pagination > .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--c4-page-slot-gap);
	list-style: none;
}

.c4-pagination li {
	display: flex;
}

/* 슬롯 — 숫자·화살표·현재 페이지가 전부 같은 크기다. */
.c4-pagination 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-page-num);
	font-size: var(--c4-fz-body3);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text-faint);
	text-decoration: none;
}

/* 현재 페이지는 같은 슬롯에 배경만 칠하는 것이지 더 커지는 게 아니다. */
.c4-pagination li > .page-numbers.current {
	background: var(--c4-color-accent);
	color: var(--c4-color-white);
}

.c4-pagination__arrow {
	width: var(--c4-sidebox-chevron-w);
	height: auto;
	color: var(--c4-color-text-faint);
}

/* 시안도 같은 chevron 도형을 좌우로 돌려 쓴다. */
.c4-pagination li > .prev .c4-pagination__arrow {
	transform: rotate(90deg);
}

.c4-pagination li > .next .c4-pagination__arrow {
	transform: rotate(-90deg);
}

/*
 * 1페이지에는 '이전', 마지막 페이지에는 '다음' 화살표가 없다.
 * 빠진 자리를 빈 슬롯으로 채워 숫자들의 가로 위치가 페이지마다 움직이지 않게 한다.
 * ★ '>' 로 바깥 <ul> 에만 건다(위 주석 참조).
 */
.c4-pagination--no-prev > .page-numbers::before,
.c4-pagination--no-next > .page-numbers::after {
	content: '';
	flex: 0 0 var(--c4-page-slot-w);
	height: var(--c4-page-slot-h);
}