/*
 * layout.css — 본문 3열 그리드 (공용)
 *
 * ★★ 이 정의는 여기 한 곳에만 둔다. 화면별 CSS 에 복사해 두 벌로 만들지 말 것.
 *   목록 CSS 에만 넣으면 상세가 이 파일을 로드하지 않아 그리드가 그냥 블록이 되고
 *   자식의 grid-column 이 전부 조용히 무시된다.
 *
 * ★ 본문 컬럼 컨테이너(.c4-container)는 base.css 가 단일 출처다. 여기서 다시 정의하지 않는다.
 *   720 과 24 를 여기에 또 적으면 한쪽만 고쳐질 때 화면이 갈린다.
 *
 * ★★ 대신 "어디에 붙이는지"는 여기서 정한다 — 본문 슬롯과 사이드 박스 슬롯 **둘 다**에
 *   .c4-container 를 단다. 사이드 쪽을 빠뜨리면 데스크톱은 그리드가 폭을 잡아 줘서 멀쩡해 보이고,
 *   1열로 내려오는 순간 그 슬롯이 뷰포트 폭까지 늘어난다(목록은 모바일에서 사이드를 숨기므로
 *   드러나지 않고, 상세의 목차에 가서야 보인다).
 */

/*
 * 1360 미만 — 1열.
 * 폭과 좌우 여백은 전부 각 슬롯의 .c4-container 가 책임진다.
 * DOM 순서상 사이드 박스가 본문보다 앞에 있으므로 자연스럽게 본문 위로 온다.
 */
.c4-layout {
	display: block;
}

/* 1열 구간에서 사이드 박스와 본문 사이 간격. */
.c4-layout__side {
	margin-bottom: var(--c4-grid-gap);
}

/*
 * 1360 이상 — 3열.
 * 좌측 242 는 빈 스페이서(사이드 박스와 같은 폭이라 본문이 정중앙에 온다),
 * 우측 242 가 사이드 박스 자리다. 열 사이 40 은 column-gap 으로 명시한다.
 *
 * ★★ 간격 40 을 열 폭 안에 숨기지 말 것(282px 같은 값). 그러면 박스가 열의 왼쪽 끝에서
 *   시작해 본문에 딱 붙고, 40 을 만들려면 margin-left 를 따로 걸어야 하는데 빼먹기 쉽다.
 *   CSS 에러는 나지 않는다.
 *
 * 계산 결과(1920 뷰포트): 총폭 1284 → 좌측 318 부터 → 본문 600~1320 → 사이드 1360~1602.
 * 총폭 1284 가 헤더·푸터 컨테이너 1280 보다 2px 넓은 것은 의도된 상태다(시안 그대로).
 */
@media (min-width: 1360px) {
	.c4-layout {
		display: grid;
		grid-template-columns: var(--c4-sidebox-w) var(--c4-container-content) var(--c4-sidebox-w);
		column-gap: var(--c4-grid-gap);
		justify-content: center;
	}

	/*
	 * ★ 3열 구간에서는 컨테이너의 max-width 와 좌우 패딩을 해제한다.
	 *   안 그러면 패딩 24 가 열 안에 남아 본문이 720 이 아니라 672 로 줄어든다.
	 *   1열로 내려오면 자동으로 되살아난다.
	 */
	.c4-layout > .c4-container {
		max-width: none;
		padding-inline: 0;
	}

	/*
	 * ★★ 둘 다 grid-row: 1 을 명시한다.
	 *   DOM 순서상 사이드가 먼저 오므로, 행을 빼먹으면 자동 배치 커서가 뒤로 못 가
	 *   본문이 2행으로 떨어진다 — CSS 에러는 하나도 안 난다.
	 */
	.c4-layout__main {
		grid-column: 2;
		grid-row: 1;
	}

	/* 열 폭이 사이드 박스 폭과 같으므로 width 를 따로 주지 않는다. justify-self 로 밀지 말 것. */
	.c4-layout__side {
		grid-column: 3;
		grid-row: 1;
		margin-bottom: 0;
	}
}