/*
 * list.css — 목록 화면의 세로 리듬
 *
 * 목록·카테고리·검색·아카이브가 같은 레이아웃 partial 을 쓰므로 이 CSS 도 공유한다.
 * 3열 그리드 자체는 base/layout.css 소관이다(여기서 다시 정의하지 않는다).
 */

/*
 * 페이지 위아래 여백 — 확정값의 '페이지 세로 여백' 표.
 * ★ 하단은 화면마다 값이 달라 목록 전용 토큰을 쓴다. 공통 토큰 하나로 묶지 말 것.
 */
.c4-list {
	padding-top: var(--c4-page-top);
	padding-bottom: var(--c4-page-bottom-list);
}

.c4-list__title {
	font-size: var(--c4-fz-page-title);
	line-height: var(--c4-lh-page-title);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	text-align: center;
}

/*
 * 화면 내부 간격 (PC / 모바일)
 *   제목 → 카드 리스트          60 / 40
 *   카드 리스트 → 페이지네이션   60 / 60
 *   페이지네이션 → 검색 폼       60 / 40
 *   (페이지네이션이 없을 때) 카드 리스트 → 검색 폼   60 / 60
 * ★ 모바일 열이 40 / 60 / 40 으로 엇갈린다 — 가운데만 60 이다.
 */
.c4-list__layout {
	margin-top: var(--c4-list-gap-title);
}

/* 제목을 렌더하지 않은 경우(sr-only 대체)에는 위 간격도 없다. */
.c4-list--no-title .c4-list__layout {
	margin-top: 0;
}

.c4-list__pagination {
	margin-top: var(--c4-list-gap-pagination);
}

.c4-list__search {
	margin-top: var(--c4-list-gap-search);
}

/* 페이지네이션이 없으면 '카드 리스트 → 페이지네이션' 값이 그대로 쓰인다. */
.c4-list__search--no-pagination {
	margin-top: var(--c4-list-gap-pagination);
}

.c4-list__search .c4-search {
	margin-inline: auto;
}

/* 0건(결과 없음) 스타일은 6단계에서 assets/css/sections/empty.css 로 옮겼다. */

/* ─────────────────────────────────────────────────────────
   768 미만 — 목록의 카테고리 드롭다운은 숨긴다(시안 그대로).
   ★ 상세의 목차는 768 미만에서도 유지되므로, 이 규칙은 목록 슬롯에만 건다.
     사이드 박스 컴포넌트 자체는 뷰 중립으로 두어야 상세가 그대로 재사용할 수 있다.
   ───────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.c4-list__side {
		display: none;
	}
}