/**
 * IGE Layout System — 4page-ui-unification
 * 설계 섹션 2 (Container & Layout System) 전체 반영
 *
 * 주의: 기존 `.container` 클래스 (bootstrap, prep) 과 충돌 가능.
 * 같은 1200px max-width라 prep에는 영향 없음.
 * 기존 다른 사용처는 `.container` 특이성 0,1,0 동일 — 로드 순서에 따라 skin이 덮어씀.
 */

/* ==== 기본 컨테이너 (4페이지 공통, D1 = 1200px) ==== */
.page-prep .container,
.page-tc .container,
.page-bd .container,
.page-hs .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-prep .container,
  .page-tc .container,
  .page-bd .container,
  .page-hs .container {
    padding-left: var(--container-pad-mobile);
    padding-right: var(--container-pad-mobile);
  }
}

/* ==== 좁은 섹션 (900px) ==== */
.page-prep .container-narrow,
.page-tc .container-narrow,
.page-bd .container-narrow,
.page-hs .container-narrow {
  max-width: 900px;
  margin: 0 auto;
}

/* ==== 섹션 래퍼 ==== */
.page-prep .page-section,
.page-tc .page-section,
.page-bd .page-section,
.page-hs .page-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.page-prep .page-section--tight,
.page-tc .page-section--tight,
.page-bd .page-section--tight,
.page-hs .page-section--tight {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.page-prep .page-section--loose,
.page-tc .page-section--loose,
.page-bd .page-section--loose,
.page-hs .page-section--loose {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.page-prep .page-section--muted,
.page-tc .page-section--muted,
.page-bd .page-section--muted,
.page-hs .page-section--muted {
  background: var(--ink-100);
}

/* ==== 2026-04-17 Phase 2 B1: 모바일 오버플로우 방어선 (4페이지 공용) ====
 * 자식(filter-search-input, tc-card-h-cost, tc-chip, tc-year-panel 등)의 min-content가
 * 부모로 전파되어 페이지 뼈대가 뷰포트를 초과하는 것을 차단.
 * Phase 1 실측: mobile 375px에서 tc/bd/hs 모두 footer-sections=448px, overflow=121px 동일 발생.
 * tc-wrap(tc 전용) + page-bd/page-hs .wrap(bd/hs 전용 래퍼) + 공통 컨테이너/섹션/카드/필터바/footer-sections.
 * tc-archive-* 셀렉터는 tc 페이지에서만 매치 — 다른 페이지에서는 무해.
 * data-ax: id-go Phase 2 B1 (사용자 승인 A안 — layout.css 공통 위치 적용). */
.tc-wrap,
.page-tc .wrap, .page-bd .wrap, .page-hs .wrap,
.page-prep .container, .page-tc .container, .page-bd .container, .page-hs .container,
.page-prep .page-section, .page-tc .page-section, .page-bd .page-section, .page-hs .page-section,
.page-prep .cards, .page-tc .cards, .page-bd .cards, .page-hs .cards,
.page-prep .filter-bar, .page-tc .filter-bar, .page-bd .filter-bar, .page-hs .filter-bar,
.page-prep .footer-sections, .page-tc .footer-sections, .page-bd .footer-sections, .page-hs .footer-sections,
.page-tc .tc-blog-list,
.page-tc .tc-archive-timeline, .page-tc .tc-year-group, .page-tc .tc-year-panel {
  min-width: 0;
}

/* 2026-04-17 Phase 2 B1 보완: bd/hs의 `.wrap { max-width: 480px }`(bd_hybrid/style.css:22, hs_hybrid/style.css:1062)가
 * 모바일 뷰포트(<640px)를 초과하여 480px로 렌더되는 문제 — max-width를 100%로 override.
 * 기존 @media (min-width:640px) / (min-width:1024px) override는 그대로 유지되므로 태블릿+는 영향 없음. */
@media (max-width: 639px) {
  .page-bd .wrap, .page-hs .wrap {
    max-width: 100%;
  }
}