/* Landing page responsive breakpoints
 * Desktop: min-width 1140px
 * Mobile:  max-width 1139px
 */

.landing-page {
    --landing-bp-desktop-min: 1140px;
    --landing-bp-mobile-max: 1139px;
    box-sizing: border-box;
    width: 100%;

    /* 콘텐츠 폭은 고정, 좌우 여백은 화면 폭에 따라 유동적으로 계산.
       - 100vw는 스크롤바 너비를 포함해 실제 레이아웃보다 넓을 수 있음
         (예: 1139vw − 16px 스크롤바 = 1123px 레이아웃 → 콘텐츠 344px로 깨짐)
       - 100%는 스크롤바를 뺀 실제 가용 너비 기준이므로 gutter에 사용 */
    --landing-content-max: 1140px;
    --landing-gutter: max(24px, calc((100% - var(--landing-content-max)) / 2));
}

@media (min-width: 1140px) {
    .landing-only-mobile {
        display: none !important;
    }
}

@media (max-width: 1139px) {
    .landing-only-desktop {
        display: none !important;
    }

    /* 모바일은 360px 콘텐츠 폭 고정, 좌우 여백만 화면 너비에 따라 유동 조절.
       gutter = max(0, (100% - 360) / 2) — 100%는 스크롤바 제외 실제 레이아웃 너비 */
    .landing-page {
        --landing-content-max: 360px;
        --landing-gutter: max(24px, calc((100% - var(--landing-content-max)) / 2));
    }
}