/* ================================================================
   카테고리·태그 목록 페이지
   카드 크기를 하나로 고정한다. 목록에서 크기가 제각각이면
   글의 중요도가 다른 것처럼 잘못 읽힌다.
   ================================================================ */

.yc-archive {
	max-width: var(--yc-wrap);
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--yc-gutter) clamp(3rem, 7vw, 5rem);
	box-sizing: border-box;
}

/* ---------- 머리말 ---------- */

.yc-archive__head {
	margin-block-end: clamp(2rem, 4vw, 3rem);
	padding-block-end: 1.5rem;
	border-block-end: 2px solid var(--yc-ink);
}

.yc-archive__kicker {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--yc-brand);
}

.yc-archive__title {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--yc-ink);
	word-break: keep-all;
}

.yc-archive__desc {
	margin-block-start: 0.875rem;
	max-width: var(--yc-read);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--yc-ink-soft);
	word-break: keep-all;
}

.yc-archive__count {
	margin: 0.875rem 0 0;
	font-size: 1rem;
	color: var(--yc-ink-mute);
}

/* ---------- 카드 격자 ----------
   auto-fill + minmax 로 칸을 잡으면 화면 폭이 어떻든 칸 너비가
   서로 같다. 글 개수가 홀수여도 마지막 줄만 비고 폭은 흐트러지지 않는다. */

.yc-agrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

/* 카드 높이도 맞춘다 — 발췌문 길이가 달라도 날짜가 바닥에 정렬된다 */
.yc-agrid .yc-mcard {
	height: 100%;
}

.yc-agrid .yc-mcard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.yc-agrid .yc-mcard__media {
	aspect-ratio: 4 / 3;
}

.yc-agrid .yc-mcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.yc-agrid .yc-mcard__title {
	font-size: 1.25rem;
	line-height: 1.45;
}

.yc-agrid .yc-mcard__excerpt {
	/* 세 줄로 끊어 카드 높이가 들쭉날쭉해지는 걸 막는다 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yc-archive__empty {
	padding: 3rem 0;
	font-size: 1.125rem;
	color: var(--yc-ink-mute);
	text-align: center;
}

/* ---------- 쪽 이동 ---------- */

.yc-archive .wp-block-query-pagination,
.yc-archive .navigation.pagination {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--yc-line);
}

.yc-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

/* 시니어가 누르기 쉽도록 숫자 하나하나를 충분히 크게 */
.yc-archive .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding-inline: 0.75rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--yc-ink-soft);
	text-decoration: none;
	border: 1px solid var(--yc-line);
	border-radius: 6px;
}

.yc-archive .nav-links .page-numbers:hover {
	color: var(--yc-brand);
	border-color: var(--yc-brand);
}

.yc-archive .nav-links .page-numbers.current {
	color: var(--yc-white);
	background-color: var(--yc-brand);
	border-color: var(--yc-brand);
}

.yc-archive .nav-links .page-numbers.dots {
	min-width: auto;
	border: 0;
}

@media (max-width: 480px) {
	.yc-agrid {
		grid-template-columns: 1fr;
	}
}