/* layout/section.css — 섹션·카드·모바일 간격 리듬 (320–430px 우선) */

/* ── 1. 섹션 세로 패딩 (py-18 md:py-24) ── */
#main-content .py-18 {
    padding-block: var(--section-py);
}

@media (min-width: 768px) {
    #main-content .md\:py-24 {
        padding-block: var(--section-py-xl);
    }
}

/* ── 2. 섹션 헤드 · 제목-본문 간격 ── */
@media (max-width: 767px) {
    #main-content .mb-16,
    #main-content .mb-14 {
        margin-bottom: var(--section-head-gap);
    }

    #main-content .mb-12 {
        margin-bottom: var(--title-body-gap-lg);
    }

    #main-content .mb-8 {
        margin-bottom: var(--title-body-gap);
    }

    /* text-4xl — 모바일 서브섹션 타이틀 축소 */
    #main-content .text-4xl {
        font-size: var(--text-subsection);
        line-height: var(--leading-ko-heading);
        letter-spacing: var(--tracking-ko-heading);
    }

    #main-content .text-4xl.mb-8,
    #main-content h3.text-4xl {
        margin-bottom: var(--title-body-gap);
    }
}

/* ── 3. 카드 내부 패딩 ── */
@media (max-width: 767px) {
    #main-content .product-review-item,
    #main-content .brand-process__item,
    #main-content .subscription-benefit-card,
    #main-content .brand-trust__card {
        padding: var(--card-padding);
    }

    #main-content .p-8 {
        padding: var(--card-padding);
    }

    #main-content .p-10 {
        padding: var(--card-padding-md);
    }
}

@media (min-width: 768px) {
    #main-content .product-review-item {
        padding: var(--card-padding-md);
    }
}

@media (min-width: 1024px) {
    #main-content .product-review-item.md\:p-10 {
        padding: var(--card-padding-lg);
    }
}

/* ── 4. Main → Footer 하단 여백 (콘텐츠 bottom + footer py-10 top) ── */
#notice-cs-section {
    padding-bottom: var(--page-end-padding);
}

#main-content > section.py-18:last-of-type {
    padding-bottom: var(--page-end-padding);
}