/* ==========================================================================
   sections/list.css — 목록 화면의 세로 리듬
   --------------------------------------------------------------------------
   목록 · 카테고리 · 검색 · 아카이브가 같은 레이아웃을 쓴다.
   3열 그리드 자체는 base/layout.css 소관 — 여기에 복사하지 말 것.
   ========================================================================== */

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

/* 제목 — 페이지 제목 계열, 가운데 정렬 */
.c4-list__header { margin-bottom: var(--c4-list-gap-title); }

/* 아래에 카테고리 탭이 오면 제목 → 탭은 절반(2026-10-13 사용자 지시) */
.c4-list__header:has(+ .c4-list__tabs) { margin-bottom: var(--c4-list-gap-title-tabs); }

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

/* 제목이 sr-only 로 대체된 경우(옵션 제목이 빈 값)에는 아래 간격이 필요 없다. */
.c4-list__title.sr-only { margin: 0; }

.c4-list__cards {
	display: flex;
	flex-direction: column;
	/* 카드 ↔ 카드. 썸네일↔텍스트 간격(--c4-card-gap)과 다른 값이다. */
	gap: var(--c4-card-list-gap);
}

/* ==========================================================================
   카테고리 탭(알약 모양) — [블로그 > 목록] '카테고리 탭'을 켰을 때만(template-parts/list-tabs.php · 2026-10-13 사용자 지시 · 시안에 없는 값)
   제목 아래 [전체] + 카테고리. 색 · 글자는 FAQ · 언론보도 탭과 같다(비활성 흰 바탕 + 1px grey900 테두리 / 활성 grey900 바탕 + 흰 글자),
   모양만 알약(`--c4-radius-pill`). 제목 → 탭 = 제목 아래 여백(60 / 40) · 탭 → 카드 = `--c4-list-gap-tabs`(48 / 40 — FAQ 와 같은 값).
   ★ 넘치면 **이 줄 안에서만** 가로 스크롤(FAQ 탭과 같은 구조) — 들어가면 가운데, 넘치면 왼쪽부터(margin-inline: auto).
   ★ 스크롤 상자가 포커스 링을 자르지 않게 위아래 링 자리만큼 안쪽 여백 · 같은 양을 바깥 여백에서 뺀다(세로 리듬 그대로).
   ========================================================================== */
.c4-list__tabs {
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
	margin-top: calc(-1 * (var(--c4-focus-ring-w) + var(--c4-focus-ring-offset)));
	margin-bottom: calc(var(--c4-list-gap-tabs) - var(--c4-focus-ring-w) - var(--c4-focus-ring-offset));
}

.c4-list__tabs::-webkit-scrollbar { display: none; }

.c4-list__tab-list {
	display: flex;
	gap: var(--c4-list-tab-gap);
	width: max-content;
	margin: 0 auto;
	padding: 0 calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
	list-style: none;
}

.c4-list__tab-item { display: flex; }

/* 활성 탭에도 같은 두께의 투명 테두리 — 비활성과 높이 · 글자 기준선이 같게(FAQ 탭과 같은 이유). */
.c4-list__tab {
	display: block;
	padding: var(--c4-list-tab-pad);
	border: var(--c4-border-w) solid var(--c4-color-text);
	border-radius: var(--c4-radius-tag);   /* 헤더 전화예약 버튼과 같은 둥글기(2026-10-14 사용자 지시 — 처음엔 알약) */
	background-color: var(--c4-color-page-bg);   /* 사이트 바탕과 같은 따뜻한 색(2026-10-14 사용자 지시 '탭 배경 화이트 말고' · 그 전 흰색) */
	color: var(--c4-color-text);
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	white-space: nowrap;
	transition: background-color var(--c4-tab-dur) ease, border-color var(--c4-tab-dur) ease, color var(--c4-tab-dur) ease;   /* 탭을 바꿀 때 색이 부드럽게(2026-10-14 사용자 지시 '탭들 일괄 · 부드럽게 컬러 변경' — 누르면 tabs.js 가 먼저 바꾸고 옮겨 간다) */
}

.c4-list__tab.c4-is-current {
	border-color: transparent;
	background-color: var(--c4-color-text);
	color: var(--c4-color-white);
}

/* ==========================================================================
   넓은 목록 — 세로 카드 + 옆 상자 없음(list-layout `$c4_wide` · 2026-10-13 사용자 지시)
   본문 칸 = 소개 콘텐츠와 같은 폭(PC `--c4-container-w` 1280 + 좌우 `--c4-container-pad` 20 · 모바일 좌우 `--c4-list-wide-pad-m` 20)
   · 카드 3열(1024 이상) / 2열(768 ~ 1023) / 1열(모바일). 3열 그리드(.c4-layout)는 쓰지 않고 한 칸으로.
   ========================================================================== */
.c4-list--wide .c4-layout { display: block; }

.c4-list--wide .c4-layout__main.c4-container {
	max-width: calc(var(--c4-container-w) + var(--c4-container-pad) * 2);
	padding-inline: var(--c4-container-pad);
}

@media (min-width: 1024px) {
	.c4-list--wide .c4-list__cards--stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 카드 리스트 → 페이지네이션 */
.c4-list__cards + .c4-pagination { margin-top: var(--c4-list-gap-pagination); }

/* 페이지네이션 → 검색 폼. 0건일 때도 검색 폼은 남으므로 항상 위 간격을 준다. */
.c4-list__search {
	margin-top: var(--c4-list-gap-search);
	display: flex;
	justify-content: center;
}

/* ★ 0건 문구는 6단계에서 공용 partial(`template-parts/no-results.php`)로 옮겼다.
   여기 있던 `.c4-list__empty` / `.c4-list__empty-desc` 는 참조가 0이 되어 제거했다
   (작업 규칙 ②의 '참조 0 정리'). 리듬 규칙은 `sections/no-results.css` 소관이다. */

@media (max-width: 767.98px) {
	.c4-list {
		padding-top: var(--c4-page-pt-m);
		/* 하단은 PC·모바일이 같아 다시 선언하지 않는다. */
	}

	.c4-list__header { margin-bottom: var(--c4-list-gap-title-m); }
	.c4-list__header:has(+ .c4-list__tabs) { margin-bottom: var(--c4-list-gap-title-tabs-m); }

	.c4-list__title { font-size: var(--c4-fs-page-title-m); }

	/* 탭 줄을 화면 끝까지(좌우 여백만큼 바깥으로) — 넘쳐서 밀 때 마지막 탭이 화면 끝에 붙어 잘려 보이지 않게(FAQ 탭과 같다). 들어가면 가운데. */
	.c4-list__tabs {
		margin-inline: calc(-1 * var(--c4-gutter-mobile));
		margin-bottom: calc(var(--c4-list-gap-tabs-m) - var(--c4-focus-ring-w) - var(--c4-focus-ring-offset));
	}

	.c4-list__tab-list { padding-inline: var(--c4-gutter-mobile); }

	/* 휴대폰 탭 — 높이 42 · 글자 15(2026-10-15 사용자 지시 '모든 탭 일괄' — FAQ · 언론보도 탭도 faq.css 에 같은 값) */
	.c4-list__tab {
		display: flex;
		align-items: center;
		height: var(--c4-tab-h-m);
		padding-block: 0;
		font-size: var(--c4-tab-fs-m);
	}

	/* 넓은 목록 모바일 — 소개 콘텐츠와 같은 좌우 20(다른 목록은 24). 탭 줄을 화면 끝까지 늘리는 바깥 여백도 같은 값으로. */
	.c4-list--wide .c4-layout__main.c4-container { padding-inline: var(--c4-list-wide-pad-m); }

	.c4-list--wide .c4-list__tabs { margin-inline: calc(-1 * var(--c4-list-wide-pad-m)); }

	.c4-list--wide .c4-list__tab-list { padding-inline: var(--c4-list-wide-pad-m); }

	.c4-list__cards { gap: var(--c4-card-list-gap-m); }

	.c4-list__cards + .c4-pagination { margin-top: var(--c4-list-gap-pagination-m); }

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