/* ==========================================================================
   layout.css — 본문 영역 3열 그리드 (공용)
   --------------------------------------------------------------------------
   ★★ 이 정의는 **여기 한 번만** 있다.
      화면별 CSS 에 복사하지 말 것 — 목록 CSS 에만 넣으면 상세가 그 파일을
      로드하지 않아 그리드가 그냥 블록이 되고 자식의 grid-column 이
      **전부 조용히 무시된다**(CSS 에러는 하나도 안 난다).

   ★★ base.css 의 `.c4-container` 를 **다시 정의하지 않는다.**
      본문 컬럼 폭(720)과 모바일 여백(24)의 단일 출처는 그쪽이다.
      그리드는 그 위에 얹는 것이지 대체하는 게 아니다.
   ========================================================================== */

/*
 * 3열: [빈 스페이서 242] [본문 720] [사이드 박스 242], 열 사이 40.
 *
 * ★★ 간격 40 을 열 폭 안에 숨기지 말 것(282px 처럼). gap 을 열에 포함시키면
 *    박스가 열의 왼쪽 끝에서 시작해 본문에 딱 붙는다 — 40 을 만들려면 박스에
 *    margin-left 나 justify-self:end 를 따로 걸어야 하는데 빼먹기 쉽고
 *    CSS 에러는 나지 않는다. 실제로 이렇게 붙어서 나온 적이 있다.
 *
 * 계산(1920 뷰포트): 총폭 1284 → 좌측 318 부터 → 본문 600~1320 → 박스 1360~1602.
 * ★ 총폭 1284 가 헤더·푸터 컨테이너 1280 보다 2px 넓은 것은 의도된 상태다(시안 그대로).
 */
.c4-layout {
	display: grid;
	grid-template-columns: var(--c4-side-w) var(--c4-content-w) var(--c4-side-w);
	column-gap: var(--c4-side-gap);
	justify-content: center;
}

/*
 * ★★ 본문과 사이드 박스 **둘 다** grid-row: 1 을 명시한다.
 *    DOM 순서상 사이드가 먼저 오므로(모바일 1열 시각 순서에 맞춘 것),
 *    행을 빼먹으면 자동 배치 커서가 뒤로 못 가 **본문이 2행으로 떨어진다.**
 *    CSS 에러는 하나도 안 나고 목록·상세가 동시에 깨진다.
 */
.c4-layout__main {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

.c4-layout__side {
	grid-column: 3;
	grid-row: 1;
	/*
	 * ★ align-self 를 주지 말 것. 슬롯이 콘텐츠 높이로 줄어들면
	 *   sticky 가 움직일 여지가 0 이 되어 아무 일도 하지 않는다 —
	 *   속성은 sticky 인데 화면에서는 붙지도 따라 내려가지도 않고, CSS 에러도 없다.
	 *   슬롯은 그리드 기본값(stretch)으로 두어 본문 높이만큼 늘어나야 하고,
	 *   sticky 는 그 **안쪽 박스**에 건다(sections/sidebox.css).
	 */
}

/* 1360 미만 → 1열. 사이드 박스가 본문 **위**로 온다(DOM 순서 그대로라 order 가 필요 없다). */
@media (max-width: 1359.98px) {
	.c4-layout {
		display: block;
	}

	/*
	 * ★★ 폭 · 좌우 여백을 여기서 다시 적지 않는다.
	 *    본문과 사이드 슬롯이 마크업에서 `.c4-container` 를 함께 달고 있어서
	 *    (template-parts/list-layout.php) base.css 가 폭 100% · 최대 768(720+24×2)
	 *    · 좌우 24 를 이미 걸어 준다 — 375 뷰포트에서 콘텐츠 **327**.
	 *
	 *    여기에 `max-width: var(--c4-content-w)` 를 또 적으면 720 이 **패딩을 포함한**
	 *    바깥 폭이 되어 안쪽이 672 로 깎인다. 화면은 그럴듯하게 나오고 CSS 에러도 없다.
	 *    고정 width:720px 이 금지인 이유(768 뷰포트 스크롤바 넘침)도 컨테이너가
	 *    width:100% 로 이미 막고 있다.
	 */
}

/*
 * 1360 이상 — 3열. 이 구간에서는 그리드 **열 폭**이 본문 720 을 잡으므로
 * 컨테이너의 모바일 여백 · 최대폭은 할 일이 없다. 끄지 않으면 좌우 24 가
 * 720 열 안쪽을 깎아 본문이 **672** 가 된다(역시 조용히 어긋난다).
 * ★ base.css 의 `.c4-container` 를 고치는 게 아니라 그리드 안에서만 무력화한다 —
 *   본문 폭 720 · 모바일 여백 24 의 단일 출처는 계속 base.css 다.
 */
@media (min-width: 1360px) {
	.c4-layout > .c4-container {
		max-width: none;
		padding-inline: 0;
	}
}