/* 컨테이너·섹션·그리드. 콘텐츠 최대 폭1420px, 좁은 화면에서는90%. */

/* 페이지 뼈대 */
.l-page { min-height: 100vh; display: flex; flex-direction: column; }
.l-page__main { flex: 1 0 auto; }

/* 컨테이너: 콘텐츠 1420 고정폭 · 중앙 정렬(여백 없음) / 1420 미만 뷰포트: 90% */
.l-container {
    width: var(--l-container);
    margin-inline: auto;
}
.l-container--fluid { max-width: none; }

/* 섹션: 세로 패딩 100 (--sm: 80) */
.l-section { padding-block: var(--section-py); }
.l-section--sm { padding-block: var(--section-py-sm); }
.l-section--soft { background: var(--color-primary-bg); }
.l-section--white { background: var(--color-bg); }
.l-section--flush-top { padding-top: 0; }

/* 섹션 헤더(제목 40 + 설명) — 컴포넌트 c-section-head 와 함께 사용 */
.l-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--section-body-gap); }
.l-section__head--tight { margin-bottom: var(--space-8); }
.l-section__head--sm { margin-bottom: var(--space-6); }

/* 그리드 */
.l-grid { display: grid; gap: var(--grid-gap); }
.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap-sm); }

/* 2단(좌·우) 레이아웃 */
.l-split { display: flex; gap: var(--grid-gap); align-items: flex-start; }
.l-split > * { min-width: 0; }
.l-split__main { flex: 1 1 0; }
.l-split__aside { flex: 0 0 auto; }

/* 세로 나열 */
.l-stack { display: flex; flex-direction: column; gap: var(--grid-gap); }
.l-stack--sm { gap: var(--space-3); }

/* 좌우 정렬 행 */
.l-row { display: flex; align-items: center; gap: var(--space-3); }
.l-row--between { justify-content: space-between; }
.l-row--center { justify-content: center; }
.l-row--end { justify-content: flex-end; }

/* 반응형 ----------------------------------------------------------
1420px 미만: 컨테이너 1420 고정 → 90%
1024px 이하: 카드 4열 → 2열, 3열 → 2열, 2단 → 1단, GNB 햄버거
태블릿과 모바일 레이아웃은 아래 미디어쿼리에서 정의한다. */
@media (max-width: 1419px) {
    .l-container { width: var(--l-container-fluid); }
    :root { --l-side: var(--l-side-fluid); }
}
@media (max-width: 1024px) {
    .l-grid--4, .l-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-split { flex-direction: column; }
    .l-split__aside { width: 100%; }
    .l-section { padding-block: var(--space-16); }
}
/* 767px 이하 (모바일, Figma 375 기준): 컨테이너 = 100% − 40, 그리드 전부 1열, 섹션 40, 섹션 헤더 세로 배치 */
@media (max-width: 767px) {
    .l-container { width: var(--l-container); }
    .l-section, .l-section--sm { padding-block: var(--section-py); }
    .l-section__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--section-body-gap); }
    .l-section__head--tight, .l-section__head--sm { margin-bottom: var(--section-body-gap); }
    .l-grid--2, .l-grid--3, .l-grid--4 { grid-template-columns: 1fr; gap: var(--grid-gap); }
    .l-split { gap: var(--grid-gap); }
    .l-stack { gap: var(--grid-gap); }
}