/* =============================================================
 * layout.css — 콘텐츠 컨테이너 & 풀-블리드 섹션 유틸.
 *
 * 좌우 패딩 정책 (DESIGN-TOKENS §4.1, 전 섹션 공통, 시안보다 우선):
 *   PC·Tablet (≥768):  40px  (--ws-container-pad-pc)
 *   Mobile   (<768):   20px  (--ws-container-pad-mobile)
 *
 * 모든 섹션은 .ws-section + .ws-container 패턴을 사용한다.
 * 예외: viewport 폭을 의도적으로 넘는 bleed 요소 (Hero 모바일 이미지 등)
 *      는 .ws-container 밖에 별도 배치.
 * ============================================================= */

/* 콘텐츠 영역의 표준 컨테이너.
   섹션의 가장 안쪽에 한 번만 두는 것을 권장 — 중첩 시 max-width 누적되지 않도록. */
.ws-container {
    width: 100%;
    max-width: var(--ws-layout-max);
    margin-inline: auto;
    padding-inline: var(--ws-container-pad-mobile);
}

@media (min-width: 768px) {
    .ws-container {
        padding-inline: var(--ws-container-pad-pc);
    }
}

/* 풀-블리드 섹션 (배경색이 좌우 끝까지 깔리는 영역).
   안에 .ws-container 를 두어 콘텐츠를 가운데 정렬. */
.ws-section {
    width: 100%;
}

.ws-section--alt-bg {
    background: var(--ws-color-bg-alt);
}

/* 메인 콘텐츠 영역 (페이지 본문 래퍼). 헤더 sticky 고려한 상단 여백 등은 섹션 CSS 에서. */
.ws-main {
    display: block;
    width: 100%;
}