/* ==========================================================================
   base/layout.css — 본문 3열 그리드 (공용)

   ★★ 이 정의는 **공용 CSS 에 한 번만** 있습니다.
      목록 CSS 에 넣으면 상세가 그 파일을 로드하지 않아 그리드가 그냥 블록이 되고
      자식의 grid-column 이 전부 조용히 무시됩니다. 화면별로 복사하지 마세요.
      목록(3) · 카테고리·검색(5) · 상세(4)가 이 한 벌을 공유합니다.

   ★ 본문 컬럼 폭(720)과 좌우 여백(24)은 base.css 의 `.c4-container` 가 단일 출처입니다.
     여기에 다시 적지 않습니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 그리드 컨테이너

   기본(1360 미만)은 1열입니다. 폭과 좌우 여백은 슬롯에 붙은 .c4-container 가 책임집니다.
   -------------------------------------------------------------------------- */

.c4-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   2. 슬롯

   ★★ 본문 슬롯과 사이드 박스 슬롯 **둘 다** .c4-container 를 답니다.
      사이드 쪽을 빠뜨리기 쉬운데, 목록은 모바일에서 사이드 박스를 숨기므로 결함이
      안 드러나고 **상세(목차)에 가서야 375 로 늘어난 게 보입니다.**

   ★★ 둘 다 grid-row: 1 을 명시합니다.
      DOM 순서상 사이드가 먼저 오므로(모바일 시각 순서를 맞추려는 것),
      행을 빼먹으면 자동 배치 커서가 3열 → 2열로 되돌아가지 못해
      **본문이 2행으로 떨어집니다. CSS 에러는 하나도 나지 않습니다.**

   ★ 좌측 1열은 빈 스페이서입니다(사이드 박스와 같은 폭이라 본문이 정중앙에 옵니다).
     요소를 넣지 않습니다.
   -------------------------------------------------------------------------- */

.c4-content-grid__main {
  min-width: 0;
}

.c4-content-grid__side {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   3. 데스크톱 (1360 이상) — 3열
   -------------------------------------------------------------------------- */

@media (min-width: 1360px) {

  .c4-content-grid {
    grid-template-columns: var(--c4-sidebox-w) var(--c4-container-body) var(--c4-sidebox-w);
    column-gap: var(--c4-grid-gap);
    justify-content: center;
  }

  /*
   * ★ 열이 폭을 잡아 주므로 컨테이너의 max-width 와 좌우 패딩을 **해제**합니다.
   *   안 그러면 패딩 24 가 열 안에 남아 본문이 720 이 아니라 672 로 줄어듭니다.
   *   1열로 내려오면 이 규칙이 사라져 자동으로 되살아납니다.
   */
  .c4-content-grid > .c4-container {
    max-width: none;
    padding-inline: 0;
  }

  /*
   * ★★ 간격 40 을 열 폭 안에 숨기지 마세요.
   *   282px(= 40 + 242) 처럼 gap 을 열에 포함시키면 박스가 열의 왼쪽 끝에서 시작해
   *   본문에 딱 붙습니다. column-gap 으로 명시해야 자리가 잡힙니다.
   * ★ 사이드 박스는 열 폭(242)과 같으므로 width 를 따로 주지 않고,
   *   justify-self 로 밀어 붙이지도 않습니다 — gap 이 이미 자리를 잡아 줍니다.
   */
  .c4-content-grid__main {
    grid-column: 2;
    grid-row: 1;
  }

  .c4-content-grid__side {
    grid-column: 3;
    grid-row: 1;
  }
}

/* --------------------------------------------------------------------------
   4. sticky 슬롯

   ★★ 그리드 칸(슬롯)과 sticky 박스를 분리합니다.
      슬롯은 그리드 기본값(stretch)으로 두어 **본문 높이만큼 늘어나게** 하고,
      sticky 는 그 안쪽 박스에만 겁니다(sidebox.css).

   ★ 슬롯에 align-self: flex-start 를 주지 마세요.
     슬롯이 콘텐츠 높이로 줄어들어 움직일 여지가 0 이 되고, 속성은 sticky 인데
     화면에서는 붙지도 따라 내려가지도 않습니다. CSS 에러는 나지 않습니다.
     즉 sticky 가 기대는 높이는 **슬롯의 높이**이고, 그 높이는 본문(형제 칸)에서 옵니다.

   ★ 이 그리드의 조상 체인에 overflow(x 포함)·contain·transform·filter·will-change 를
     걸지 마세요. 하나라도 걸리면 sticky 가 소리 없이 죽습니다.
     가로 넘침은 overflow-x:hidden 으로 덮지 말고 원인 요소를 고칩니다.
   -------------------------------------------------------------------------- */