@charset "utf-8";

/**
 * 서브 페이지 히어로 상·하 여백 통일 (menu_config 기준 전 메뉴)
 * - 텍스트 히어로: .sub-header
 * - 이미지 히어로: .usage-hero-section, .benefit-hero2-section, .status-hero-bg-section 등
 */

:root {
    --hero-py-top: 60px;
    --hero-py-bottom: 40px;
    --hero-inner-padding: 30px;
    --hero-between-gap: 40px; /* 텍스트 히어로 ↔ 이미지 히어로 */
    --hero-after-gap: 40px;   /* 히어로 블록 ↔ 본문 */
}

@media (max-width: 1024px) {
    :root {
        --hero-py-top: 30px;
        --hero-py-bottom: 20px;
        --hero-inner-padding: 20px 12px;
        --hero-between-gap: 20px;
        --hero-after-gap: 20px;
    }
}

/* --- 텍스트 히어로 (sub-header) --- */
.sub-header {
    padding-bottom: var(--hero-py-bottom);
}

.sub-header-content {
    padding-top: var(--hero-py-top);
}

/* 텍스트 히어로 바로 뒤에 이미지 히어로가 올 때만 하단을 줄임 (0은 사용하지 않음) */
.benefit-section > .sub-header:has(+ .benefit-hero2-section),
.status-section > .sub-header:has(+ .status-hero-bg-section),
.donation-type-section > .sub-header:has(+ .donation-type-hero-section),
.intro-section > .sub-header:has(+ .intro-about-section),
.organization-section > .sub-header:has(+ .organization-image-section),
.sub-header:has(+ #bo_usage_list .usage-hero-section),
#bo_v_head .sub-header:has(+ .campaign-view-content-container) {
    padding-bottom: var(--hero-between-gap);
}

/* --- 이미지 히어로 내부 패딩 --- */
.usage-hero-content,
.benefit-hero2-content,
.status-hero-bg-content,
.donation-type-hero-text,
.fame-description-content,
.intro-about-text {
    padding: var(--hero-inner-padding);
}

/* --- 이미지 히어로 섹션 (sub-header 직후 상단만 정리, 하단 간격은 margin-bottom) --- */
.benefit-section > .sub-header + .benefit-hero2-section,
.status-section > .sub-header + .status-hero-bg-section,
.donation-type-section > .sub-header + .donation-type-hero-section,
.intro-section > .sub-header + .intro-about-section,
.organization-section > .sub-header + .organization-image-section {
    padding-top: 0;
    padding-bottom: 0;
}

.organization-section > .sub-header + .organization-image-section .organization-image-container {
    padding-top: 0;
}

/* 이미지 히어로 없이 본문만 이어지는 페이지: sub-header 하단 여백 유지 */
.background-section > .sub-header + .background-card-section {
    margin-top: 0;
}

.background-section > .sub-header + .background-card-section .background-card-container {
    padding-top: 0;
}

.location-section > .sub-header + .location-content-section {
    margin-top: 0;
}

/* 이미지 히어로 → 본문 간격 */
.usage-hero-section,
.benefit-hero2-section,
.status-hero-bg-section,
.donation-type-hero-section,
.fame-description-section,
.intro-about-section,
.organization-image-section {
    margin-bottom: var(--hero-after-gap);
}

.sub-header:has(+ #bo_usage_list) + #bo_usage_list > .usage-hero-section:first-child,
#bo_usage_list > .usage-hero-section:first-child {
    margin-top: 0;
}

/* --- 쇼핑몰 캠페인 목록 히어로 --- */
.campaign-subtitle-section {
    padding: var(--hero-py-top) 0 var(--hero-after-gap);
    margin-bottom: 0;
}

/* --- 캠페인 상세 (후원의 집 상품) --- */
#bo_v_head .campaign-view-main-container {
    gap: var(--hero-after-gap);
}

@media (max-width: 1024px) {
    .sub-header {
        padding-bottom: var(--hero-py-bottom);
    }

    .sub-header-content {
        padding-top: var(--hero-py-top);
        padding-left: 20px;
        padding-right: 20px;
    }

    .campaign-subtitle-section {
        padding: var(--hero-py-top) 20px var(--hero-after-gap);
    }
}