/* S6. Install Process */

/* ============================================================
   DESKTOP
   ============================================================ */

/* 섹션 배경 */
.landing-section--install-process {
    background-color: #fff;
}

/* 섹션 내부 wrapper (세로 flex) */
.landing-section--install-process .landing-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 60px;
}

/* 타이틀 wrapper */
.landing-install-process__header {
    text-align: center;
}

/* 타이틀 텍스트 */
.landing-install-process__title {
    font-size: 40px;
    font-weight: 800;
    margin: 80px;
    color: #000;
    transform: translateY(-40px);
}

/* 캐러셀 뷰포트 — 데스크탑은 4장을 한 번에 다 보여주는 정적 나열이라
   잘라낼 필요가 없어서 그냥 패스스루 */
.landing-install-process__carousel {
    width: 100%;
}

/* 캐러셀 트랙 (= 스텝 4개 나열) — 데스크탑은 transform/스크롤 없이
   그냥 flex row로 4장 다 보여준다. 모바일에서만 이 엘리먼트가
   실제 스와이프 캐러셀 트랙 역할을 한다(JS의 carouselSelector). */
.landing-install-process__steps {
    display: flex;
    gap: 28px;
    justify-content: center;
    transform: translateY(-80px);
}

/* 슬라이드 1장 (카드 + 설명) */
.landing-install-process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 267px;
}

/* 카드 이미지 wrapper */
.landing-install-process__card-wrap {
    position: relative;
    width: 267px;
    height: 267px;
    flex-shrink: 0;
    margin-right: 12px;
}

/* 카드 이미지 (STEP 배지+아이콘이 그려진 정사각 이미지) */
.landing-install-process__card-img {
    width: 267px;
    height: 267px;
    object-fit: cover;
    border-radius: 20px;
}

/* 카드 위에 겹치는 스텝 라벨 (예: "악성앱 침투 시도") */
.landing-install-process__step-title {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    color: #F5F6F7;
    margin: 0;
}

/* 카드 아래 설명 텍스트 */
.landing-install-process__step-desc {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: #8F9599;
    text-align: center;
}

/* dot 페이지네이션 wrapper — 데스크탑은 4장을 다 보여줘서 필요 없으니
   .landing-only-mobile로 숨김(마크업에서 처리) */
.landing-install-process__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* 개별 dot */
.landing-install-process__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* 활성 dot */
.landing-install-process__dot.is-active {
    background-color: #000;
}



/* ============================================================
   MOBILE — max-width 1139px (see landing_breakpoints.css)
   ============================================================ */

@media (max-width: 1139px) {
    /* 섹션 자체는 폭 전체를 채워서 배경이 화면 끝까지 이어지게 하고,
       콘텐츠(.inner)만 360px로 가운데 고정한다. */
    .landing-section--install-process .landing-section__inner {
        width: 360px;
        margin: 0 auto;
    }

    /* 캐러셀 뷰포트 — S3와 동일한 이유로 flex:none만으로는 부족하고
       height도 명시적으로 줘야 한다. auto-height 섹션 안에서 flex:1은
       기준 삼을 공간이 없어서 계산이 불안정해지기 때문. 카드(267px)
       + 설명 텍스트 기준으로 잡은 값 */
    .landing-install-process__carousel {
        flex: none;
        height: 464px;
        overflow: hidden;
    }

    /* 섹션 내부 wrapper */
    .landing-section--install-process .landing-section__inner {
        justify-content: flex-start;
        gap: 24px;
        padding: 80px 0;
    }

    /* 타이틀 wrapper — .inner가 align-items:center라서 명시적 너비가
       없으면 한글 텍스트가 shrink-to-fit 계산 중 한 글자 폭까지
       줄어드는 버그가 생긴다. width:100%로 막는다. */
    .landing-install-process__header {
        width: 100%;
    }

    /* 타이틀 텍스트 */
    .landing-install-process__title {
        margin: 0;
        padding: 0 24px 48px;
        transform: none;
        color: #14171A;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5;
    }

    /* 캐러셀 트랙 — 데스크탑은 4장을 flex row로 나열하지만, 모바일은
       스와이프가 곧바로 스크롤이 되도록 네이티브 scroll-snap-x에 맡긴다
       (core-common.js의 createCarouselModule이 이 폭 기준으로 분기).
       width:100%는 필수 — 안 주면 자식(.step)의 min-width:100%와 서로
       너비를 물어 순환 참조가 되어 뷰포트 크기에 따라 계산이 널뛴다
       (S3의 .track와 동일한 이유). */
    .landing-install-process__steps {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        justify-content: flex-start;
        transform: none;
    }

    /* 트랙 — 스크롤바 숨김 */
    .landing-install-process__steps::-webkit-scrollbar {
        display: none;
    }

    /* 슬라이드 1장 — 뷰포트 폭 그대로 하나씩 채워서 스와이프할 때마다
       카드+설명 한 세트만 보이게 함 */
    .landing-install-process__step {
        min-width: 100%;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 0 24px;
        box-sizing: border-box;
    }

    /* 카드 이미지 wrapper — 뷰포트 폭에 맞게 축소, 정사각 비율 유지 */
    .landing-install-process__card-wrap {
        margin-right: 0;
        width: 100%;
        max-width: 267px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* 카드 이미지 */
    .landing-install-process__card-img {
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    /* dot 페이지네이션 wrapper — 캐러셀 아래, 마크업에서 .landing-only-mobile로
       모바일에서만 보이게 함 */
    .landing-install-process__pagination {
        padding-top: 0;
        margin-top: 0;
    }

    /* 카드 위에 겹치는 스텝 라벨 (예: "악성앱 침투 시도") */
    .landing-install-process__step-title {
        color: #F5F6F7;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5;
    }

    /* 카드 아래 설명 텍스트 — .step도 align-items:center라서 위 .header와
       같은 이유로 width:100%가 필요하다 */
    .landing-install-process__step-desc {
        padding-top: 12px;
        padding-bottom: 0;
        width: 100%;
    }
}