/* ==========================================================================
   sections/no-results.css — '결과 없음' 공용 partial + 빈 상태·404 화면 리듬
   --------------------------------------------------------------------------
   여섯 화면이 공유한다: 목록(home) · index 폴백 · 카테고리 · 검색 · 아카이브 · 404.
   404 는 빈 상태와 리듬이 완전히 같아 `.c4-list--empty` 를 그대로 쓴다.

   ★★ 이 화면은 **위 묶음 / 아래 묶음** 구조다(시안 실측).
      시안 빈 상태 PC(`1:2767`)가 `group`(헤더+제목+문구)과 `search-area`(검색 폼+푸터)
      **두 덩어리**로 그려져 있고, 그 사이가 비어 있다.
      그래서 검색 폼은 콘텐츠를 따라 흐르지 않고 **푸터 위에 붙는다.**
      이렇게 하지 않으면 큰 화면에서 검색 폼 **아래**에 거대한 빈 공간이 생기고 푸터만 저 아래로 내려간다.
   ========================================================================== */

/* ---------- 문구 블록 ---------- */

.c4-no-results {
	text-align: center;
}

/* 404 제목 — 페이지 제목 계열. ★ 이 계열을 쓰는 곳이 목록 제목과 같아서 값이 겹쳐 보여도
   토큰은 계열 토큰(`--c4-fs-page-title`)을 그대로 참조한다. */
.c4-no-results__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);
}

/* 문구 — `Body/body1_bold` 17/700/1.5 (시안 실측). */
.c4-no-results__desc {
	margin: 0;
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
}

/* 제목 → 문구. ★ 빈 상태에서 '페이지 제목 블록 → 문구' 와 **같은 자리·같은 값**이다.
   아래 `.c4-list--empty .c4-list__header` 규칙과 값을 맞춰 둘 것. */
.c4-no-results__title + .c4-no-results__desc {
	margin-top: var(--c4-empty-gap);
}

/* ---------- 404 전용: 홈으로 가기 ---------- */

/* ★ 값이 24 인 기존 토큰(드로어 항목 간격 등)을 빌려 쓰지 않는다.
   값이 같아도 의미가 다르면 분리한다 — 빌려 쓰면 그쪽을 바꿀 때 404 간격이 따라 움직인다. */
.c4-404__home {
	margin-top: var(--c4-404-link-gap);
	text-align: center;
	font-size: var(--c4-fs-body1);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
}

.c4-404__home a {
	color: var(--c4-color-accent);
	text-decoration: underline;
}

.c4-404__home a:hover { text-decoration: none; }

/* ==========================================================================
   빈 상태 · 404 화면 리듬
   ========================================================================== */

/*
 * ★★ 검색 폼을 푸터 위에 붙이려면 **높이 사슬이 끊기지 않아야** 한다.
 *    `.c4-site`(flex column, min-height 100svh) → `.c4-main`(flex:1 로 늘어남)
 *      → `.c4-list--empty`(여기서 100% 를 받아 flex column)
 *        → `.c4-layout`(flex:1)
 *          → `.c4-layout__main`(그리드/블록에서 늘어남, flex column)
 *            → `.c4-list__search`(margin-top:auto)
 *    사슬 중 하나라도 늘어나지 않으면 `margin-top:auto` 가 **조용히 0 으로 접힌다** —
 *    CSS 에러는 없고 검색 폼이 문구 바로 아래에 붙는다. 좌표로 확인할 것.
 */
/*
 * ★★ 사슬의 첫 칸을 여기서 잇는다.
 *    `base.css` 의 `.c4-main` 은 `flex: 1` 이지만 **`display: block`** 이라
 *    그 안의 `.c4-list` 는 평범한 블록이 되고 높이가 콘텐츠만큼만 잡힌다.
 *    그 상태에서는 `min-height: 100%` 도 `margin-top: auto` 도 **조용히 0 으로 접힌다**
 *    (실제로 그렇게 나왔다 — 검색 폼이 문구 바로 아래 붙고 폼 아래에 370px 빈 공간이 생겼다).
 *
 *  ★ `.c4-main` 자체를 flex 로 바꾸면 전 화면에 영향이 간다(공용 CSS).
 *    그래서 **빈 상태 래퍼가 들어 있을 때만** `:has()` 로 한정해 켠다 — 회귀 범위가 0 이다.
 *  ★ 3단계에서 "`:has()` 를 쓰지 말 것"이라고 한 것은 **검색 지우기 버튼** 이야기였다
 *    (거기서는 형제 선택자로 충분해 굳이 쓸 이유가 없었다). 여기는 대안이 없다.
 *  ★ `:has()` 미지원 브라우저에서는 auto 가 접혀 검색 폼이 문구 아래로 붙는다 —
 *    레이아웃이 깨지는 게 아니라 **묶음이 하나로 흐르는 정상 폴백**이다.
 */
.c4-main:has(> .c4-list--empty) {
	display: flex;
	flex-direction: column;
}

.c4-list--empty {
	display: flex;
	flex-direction: column;
	flex: 1;

	/* ★ 하단 여백은 목록(`--c4-page-pb-list`)이 아니라 빈 상태 전용 토큰을 쓴다.
	   지금 두 값이 같아도 화면마다 다른 값이라 묶지 말 것(확정값 §3-4). */
	padding-bottom: var(--c4-page-pb-empty);
}

.c4-list--empty > .c4-layout {
	flex: 1;
}

.c4-list--empty .c4-layout__main {
	display: flex;
	flex-direction: column;
}

/*
 * ★★ 사슬이 **1360 미만에서만** 한 칸 더 끊긴다.
 *    그 구간에서 `.c4-layout` 은 `display: block` 이라(layout.css) 높이가 definite 여도
 *    자식인 `.c4-layout__main` 이 늘어나지 않는다 — 1360 이상에서는 그리드 항목이라 저절로 stretch 된다.
 *    그래서 **이 구간에서만** layout 을 flex column 으로 바꿔 본문 칸을 늘린다.
 *    빼먹으면 PC 는 멀쩡한데 **모바일에서만** 검색 폼이 문구 아래 붙고 폼 아래에 빈 공간이 남는다
 *    (실제로 그렇게 나왔다: 375 에서 폼→푸터가 40 이 아니라 103).
 *  ★ 1360 이상에서 flex 로 바꾸면 3열 그리드가 죽으므로 **반드시 미디어 쿼리 안**에 둔다.
 */
@media (max-width: 1359.98px) {
	.c4-list--empty > .c4-layout {
		display: flex;
		flex-direction: column;
	}

	.c4-list--empty .c4-layout__main {
		flex: 1;
	}
}

/*
 * 페이지 제목 블록 → 문구.
 * ★ 목록의 '제목 → 카드 60' 과 **다른 값이 맞다**(시안 실측). 통일하지 말 것.
 */
.c4-list--empty .c4-list__header {
	margin-bottom: var(--c4-empty-gap);
}

/*
 * ★★ 문구 → 검색 폼 사이는 **가변**이다.
 *    시안의 PC 370 / 모바일 204 는 시안 프레임 높이에서 나온 결과값이지 확정값이 아니다.
 *    이 숫자를 CSS 에 박지 말 것 — 뷰포트 높이에 따라 달라지는 것이 정상이다.
 * ★ 콘텐츠가 뷰포트보다 길어지는 아주 작은 화면에서는 auto 가 0 으로 접히고 자연스럽게 흐른다.
 *   그때는 '폼 아래 여백'만 지켜지면 정상이다.
 */
.c4-list--empty .c4-list__search {
	margin-top: auto;
}

/* ==========================================================================
   모바일 — 기준선 768
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-no-results__title { font-size: var(--c4-fs-page-title-m); }

	.c4-no-results__title + .c4-no-results__desc,
	.c4-list--empty .c4-list__header {
		margin-top: 0;
		margin-bottom: 0;
	}

	.c4-no-results__title + .c4-no-results__desc { margin-top: var(--c4-empty-gap-m); }

	.c4-list--empty .c4-list__header { margin-bottom: var(--c4-empty-gap-m); }
}