/* 가이드 오버레이 */

/* 배경 스크롤 잠금 */
html.landing-guide-lock,
body.landing-guide-lock {
    overflow: hidden;
}

/* 백드롭 */
.landing-guide-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.80);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 백드롭 — 열림 상태 */
.landing-guide-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* 오버레이 패널 */
.landing-guide-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 2000;
    width: 1140px;
    height: 800px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    background: #F5F6F7;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
    border-radius: 32px;
    transform: translate(-50%, calc(-50% + 100vh));
    transition: transform 0.3s ease;
}

/* 오버레이 패널 — 열림 상태 */
.landing-guide-overlay.is-open {
    transform: translate(-50%, -50%);
}

/* 닫기 버튼 */
.landing-guide-overlay__close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 2001;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.landing-guide-overlay__close img {
    display: block;
    width: 100%;
    height: 100%;
}

/* 오버레이 콘텐츠 */
.landing-guide-overlay__content {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* 탭 버튼 묶음 */
.landing-guide-tabs {
    display: inline-flex;
    align-self: center;
    height: 40px;
    gap: 8px;
    align-items: flex-start;
    padding-top: 56px;
}

/* 탭 버튼 */
.landing-guide-tabs__btn {
    padding: 8px 16px;
    border: none;
    outline: none;
    border-radius: 40px;
    background: #fff;
    color: #8F9599;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}

/* 탭 버튼 — 활성 상태 */
.landing-guide-tabs__btn.is-active {
    background: #E8EFF7;
    color: #0068E6;
}

/* 탭 패널 wrapper */
.landing-guide-panels {
    flex: 1;
    min-height: 0;
}

/* 탭 패널 */
.landing-guide-panel {
    display: none;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* 탭 패널 — 활성 상태 */
.landing-guide-panel.is-active {
    display: block;
}

/* 캐러셀 트랙 */
.landing-guide-carousel__track {
    --carousel-slide: 0;
    height: 100%;
    display: flex;
    transform: translateX(calc(var(--carousel-slide) * -100%));
    transition: transform 0.5s ease;
}

/* 캐러셀 슬라이드 */
.landing-guide-carousel__slide {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 스텝 배지 + 타이틀 헤더 */
.landing-guide-carousel__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

/* 스텝 배지 */
.landing-guide-carousel__step {
    display: flex;
    height: 24px;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #14171A;
    color: #F5F6F7;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

/* 스텝 제목 */
.landing-guide-carousel__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: #14171A;
    margin: 0;
}

/* 설명 텍스트 */
.landing-guide-carousel__description {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    align-self: stretch;
    color: #8F9599;
    margin: 16px 0 0;
}

/* 보충 설명(각주) */
.landing-guide-carousel__note {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    color: #4A5257;
    margin: 8px 0 0;
}

/* 보충 설명 강조 텍스트 */
.landing-guide-carousel__note-highlight {
    color: #0068E6;
}

/* 이미지 영역 */
.landing-guide-carousel__images {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 43px;
    margin-top: auto;
}

/* 이미지 */
.landing-guide-carousel__images img {
    width: 316px;
    height: 524px;
}

/* 설치 스텝 02 배지 이미지 */
img.landing-guide-img--install-02-2 {
    position: absolute;
    width: 328px;
    height: 64px;
    left: 50%;
    bottom: 24px;
    transform: translateX(calc(-50% - 179.5px));
}

/* 설치 스텝 03 배지 이미지 */
img.landing-guide-img--install-03-2 {
    position: absolute;
    width: 328px;
    height: 64px;
    left: 50%;
    bottom: 24px;
    transform: translateX(calc(-50% - 179.5px));
}

/* 설치 스텝 07 배지 이미지 */
img.landing-guide-img--install-07-2 {
    position: absolute;
    box-sizing: border-box;
    width: 237px;
    height: 80px;
    left: 232px;
    bottom: 240px;
    background: #fff;
    padding: 16px 24px;
    border-radius: 24px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

img.landing-guide-img--install-07-3 {
    position: absolute;
    box-sizing: border-box;
    width: 256px;
    height: 104px;
    right: 140px;
    bottom: 316px;
    background: #fff;
    padding: 16px 24px;
    border-radius: 24px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

img.landing-guide-img--install-07-4 {
    position: absolute;
    box-sizing: border-box;
    width: 250px;
    height: 104px;
    right: 196px;
    bottom: 188px;
    background: #fff;
    padding: 16px 24px;
    border-radius: 24px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
}

/* 가족알림 스텝 01 배지 이미지 */
img.landing-guide-img--family-01-3 {
    position: absolute;
    width: 328px;
    height: 64px;
    left: 50%;
    bottom: 24px;
    transform: translateX(calc(-50% + 179.5px));
}

/* URL 스텝 03 마커 이미지 */
img.landing-guide-img--url-03-3 {
    position: absolute;
    width: 6px;
    height: 6px;
    left: 50%;
    bottom: 33px;
    transform: translateX(calc(-50% - 360px));
}

img.landing-guide-img--url-03-4 {
    position: absolute;
    width: 43px;
    height: 2px;
    left: 50%;
    bottom: 35px;
    transform: translateX(calc(-50% - 341px));
}

/* URL 스텝 03 note */
.landing-guide-carousel__note--url-03 {
    position: absolute;
    left: 43px;
    bottom: 24px;
    margin: 0;
    white-space: nowrap;
    z-index: 1;
}

/* URL 스텝 05 note */
.landing-guide-carousel__note--url-05 {
    position: absolute;
    right: 78px;
    bottom: 357px;
    margin: 0;
    white-space: nowrap;
    text-align: left;
    z-index: 1;
}

/* URL 스텝 05 이미지 영역 */
.landing-guide-carousel__images--url-05 {
    transform: translateX(-90px);
}

/* URL 스텝 05 마커 이미지 */
img.landing-guide-img--url-05-3 {
    position: absolute;
    width: 6px;
    height: 6px;
    right: 200px;
    bottom: 401px;
}

img.landing-guide-img--url-05-4 {
    position: absolute;
    width: 43px;
    height: 2px;
    right: 206px;
    bottom: 403px;
}

/* 캐러셀 인디케이터(dot) */
.landing-guide-carousel__dots {
    position: absolute;
    right: 40px;
    bottom: 40px;
    display: flex;
    gap: 8px;
    z-index: 1;
}

/* 캐러셀 인디케이터(dot) */
.landing-guide-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D1D3D5;
    cursor: pointer;
}

/* 캐러셀 인디케이터(dot) — 활성 상태 */
.landing-guide-carousel__dot.is-active {
    background: #14171A;
}

/* 모바일 (max-width: 1139px) */
@media (max-width: 1139px) {
    /* 배경 스크롤 잠금 — 모바일은 오버레이가 아니라 실제 페이지처럼 body 자체가
       스크롤을 담당하므로 잠그지 않는다 (iOS 상태바 탭-투-톱 등 네이티브 스크롤
       동작이 정상적으로 먹히도록 하기 위함) */
    html.landing-guide-lock,
    body.landing-guide-lock {
        overflow: visible;
    }

    /* 가이드가 열려있는 동안 랜딩페이지 콘텐츠는 완전히 숨겨서, 가이드 콘텐츠가
       body의 유일한 스크롤 대상이 되게 한다 */
    body.landing-guide-lock > header,
    body.landing-guide-lock > main.landing-main,
    body.landing-guide-lock > footer {
        display: none;
    }

    /* 백드롭 — 더 이상 위에 뜨는 오버레이가 아니라 랜딩페이지 자체를 대체하므로 불필요 */
    .landing-guide-backdrop {
        display: none;
    }

    /* 오버레이 패널 — position:fixed 대신 문서 흐름에 놓인 일반 블록으로 전환.
       기본은 숨김, is-open일 때만 보임(닫기/열기는 이제 순수 표시 여부로 처리) */
    .landing-guide-overlay {
        display: none;
        position: static;
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        overflow-y: visible;
        transform: none;
        transition: none;
    }

    /* 베이스 규칙의 .is-open transform(클래스 2개, 명시도 0,2,0)이 위
       .landing-guide-overlay 하나짜리 리셋(0,1,0)보다 우선순위가 높아서
       그대로 남아있었음 — 여기서 같은 명시도로 다시 리셋 */
    .landing-guide-overlay.is-open {
        display: block;
        transform: none;
    }

    /* 오버레이 콘텐츠 */
    .landing-guide-overlay__content {
        display: block;
        height: auto;
    }

    /* 닫기 버튼 */
    .landing-guide-overlay__close {
        display: none;
    }

    /* 탭 패널 */
    .landing-guide-panel {
        height: auto;
        overflow: visible;
    }

    /* 캐러셀 트랙 */
    .landing-guide-carousel__track {
        height: auto;
        display: block;
        transform: none;
        transition: none;
    }

    /* 캐러셀 인디케이터(dot) */
    .landing-guide-carousel__dots {
        display: none;
    }

    /* 탭 버튼 묶음 */
    .landing-guide-tabs {
        padding: 0 16px 0;
        margin: 40px 0;
        gap: 8px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    /* 탭 버튼 묶음 스크롤바 */
    .landing-guide-tabs::-webkit-scrollbar {
        display: none;
    }

    /* 탭 버튼 */
    .landing-guide-tabs__btn {
        flex-shrink: 0;
    }

    /* 스텝 배지 + 타이틀 헤더 */
    .landing-guide-carousel__header {
        flex-direction: column;
        gap: 16px;
        margin-top: 0;
    }

    /* 이미지 영역 */
    .landing-guide-carousel__images {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    /* 이미지 */
    .landing-guide-carousel__images img {
        width: 280px;
        height: 615px;
    }

    /* 설치 스텝 07 이미지 그룹 */
    .landing-guide-img-group--install-07 {
        position: relative;
        width: 280px;
        height: 615px;
        margin-top: 16px;
    }

    /* 설치 스텝 07 배지 이미지 */
    img.landing-guide-img--install-07-2 {
        position: absolute;
        box-sizing: border-box;
        width: 219px;
        height: 76px;
        left: -24px;
        top: -16px;
        background: #fff;
        padding: 16px 24px;
        border-radius: 24px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
    }

    img.landing-guide-img--install-07-3 {
        position: absolute;
        box-sizing: border-box;
        width: 236px;
        height: 98px;
        right: -16px;
        top: 124px;
        background: #fff;
        padding: 16px 24px;
        border-radius: 24px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
    }

    img.landing-guide-img--install-07-4 {
        position: absolute;
        box-sizing: border-box;
        width: 231px;
        height: 98px;
        left: -16px;
        top: 238px;
        background: #fff;
        padding: 16px 24px;
        border-radius: 24px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
        margin-bottom: 0;
    }

    /* URL 스텝 05 이미지 영역 */
    .landing-guide-carousel__images--url-05 {
        transform: none;
    }

    /* URL 스텝 05 안내 배너(05-5_mobile) */
    img.landing-guide-img--url-05-5 {
        width: 100%;
        height: auto;
        margin: 20px 0 24px;
    }

    /* URL 스텝 03/05 이미지 그룹 */
    .landing-guide-img-group--url-03,
    .landing-guide-img-group--url-05 {
        position: relative;
        width: 280px;
        height: 615px;
    }

    /* URL 스텝 03 이미지 그룹 — 아래 여백 */
    .landing-guide-img-group--url-03 {
        margin-bottom: 40px;
    }

    /* URL 스텝 03 점선 마커 */
    img.landing-guide-img--url-03-line {
        position: absolute;
        left: 50%;
        top: 72%;
        width: 2px;
        height: 185px;
    }

    /* URL 스텝 03 원 마커 */
    img.landing-guide-img--url-03-dot {
        position: absolute;
        left: 49.3%;
        top: 102%;
        width: 6px;
        height: 6px;
    }

    /* URL 스텝 03 note — 이미지 밑, 가운데 정렬 */
    .landing-guide-carousel__note--url-03 {
        position: absolute;
        left: 50%;
        top: 103%;
        transform: translateX(-50%);
        text-align: center;
    }

    /* URL 스텝 05 점선 마커 */
    img.landing-guide-img--url-05-line {
        position: absolute;
        left: 74%;
        top: -3%;
        width: 2px;
        height: 91px;
    }

    /* URL 스텝 05 원 마커 */
    img.landing-guide-img--url-05-dot {
        position: absolute;
        left: 73.2%;
        top: -4%;
        width: 6px;
        height: 6px;
    }

    /* URL 스텝 05 note — 이미지 위, 가운데 정렬 */
    .landing-guide-carousel__note--url-05 {
        position: static;
        white-space: normal;
        text-align: center;
    }

    /* 서브 캐러셀 — 스텝 안에서 사진 여러 장을 도트+스와이프로 넘기는 미니 캐러셀 */
    .landing-guide-subcarousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 8px;
    }

    /* 서브 캐러셀 도트 인디케이터 */
    .landing-guide-subcarousel__dots {
        display: flex;
        gap: 8px;
        transform: translateY(-24px);
    }

    /* 서브 캐러셀 도트 */
    .landing-guide-subcarousel__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #D1D3D5;
        cursor: pointer;
    }

    /* 서브 캐러셀 도트 — 활성 상태 */
    .landing-guide-subcarousel__dot.is-active {
        background: #14171A;
    }

    /* 서브 캐러셀 트랙 — 네이티브 가로 스크롤 + 스냅으로 스와이프 구현 */
    .landing-guide-subcarousel__track {
        display: flex;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .landing-guide-subcarousel__track::-webkit-scrollbar {
        display: none;
    }

    /* 서브 캐러셀 슬라이드 */
    .landing-guide-subcarousel__slide {
        flex: 0 0 100%;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
}