/* Landing layout — header, sticky btn */

/* Header */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.landing-header.is-hidden {
    transform: translateY(-100%);
}

.landing-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    height: 72px;
}

.landing-header__wrapper {
    box-sizing: border-box;
    width: 100%;
    /* max-width: 1920px; */
    height: 100%;
    padding: 0 var(--landing-gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-header__logo {
    display: block;
    flex-shrink: 0;
    width: 152px;
    height: 24px;
}

.landing-header__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-header__i18n {
    position: relative;
    width: 40px;
    height: 40px;
}

.landing-header__i18n-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.landing-header__i18n-toggle img {
    display: block;
    width: 100%;
    height: 100%;
}

.landing-header__i18n-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 120px;
    margin: 0;
    padding: 16px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    z-index: 100;
}

.landing-header__i18n.is-open .landing-header__i18n-menu {
    display: block;
}

.landing-header__i18n-menu a {
    display: block;
    padding: 8px 16px;
    color: #111;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
    border-radius: 6px;
}

.landing-header__i18n-menu a:hover {
    background-color: #f2f2f2;
}

/* Sticky btn — S1~S10 구간 */
.landing-sticky-scope {
    position: relative;
}

.landing-sticky-btn {
    /* 내용(이미지) 폭에 따라 줄어들지 않도록 가로·세로 크기를 고정한다. */
    width: 626px;
    max-width: 626px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 32px;
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background-color: #14171A;
    text-decoration: none;
    /* 데스크톱은 원래대로 화살표만 클릭되게 — 전체 클릭 확장은 모바일 전용
       (아래 모바일 미디어쿼리에서 auto로 되돌림) */
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.landing-sticky-btn.is-initialized {
    align-items: center;
    overflow: hidden;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__mascot {
    align-self: flex-start;
    flex-shrink: 0;
    margin-left: 37px;
    height: 56px;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__mascot img {
    display: block;
    height: 100%;
    width: auto;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__content {
    margin-left: 24px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 402px;
    height: 30px;
    display: flex;
    align-items: center;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__link {
    margin-left: 16px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-sticky-btn.is-initialized .landing-sticky-btn__arrow {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-sticky-btn__link {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    /* 부모(.landing-sticky-btn)의 pointer-events:none을 뚫고 화살표
       자체는 데스크톱에서도 항상 클릭 가능하게 유지 */
    pointer-events: auto;
}

.landing-sticky-btn.is-out-of-scope {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.landing-sticky-btn__text {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: #0068E6;
    white-space: nowrap;
}

/* Footer */
.landing-footer {
    width: 100%;
    background-color: #22272A;
    border-top: 1px solid #22272A;
    /* html에 scroll-snap-type: y mandatory가 걸려있는데, 마지막 섹션(S11)
       다음에 오는 이 footer에는 스냅 지점이 없어서 여기로 스크롤하면
       브라우저가 갈 곳을 못 찾고 마지막 유효 스냅 지점(S11)으로 다시
       튕겨 올라간다. footer가 뷰포트보다 낮아서 footer 상단을 뷰포트
       상단에 맞추는(start) 지점까지는 애초에 스크롤이 닿지도 않으므로,
       항상 도달 가능한 "문서 맨 끝(end)"을 스냅 지점으로 잡아야 한다. */
    scroll-snap-align: end;
}

.landing-footer__inner {
    display: flex;
    justify-content: center;
}

.landing-footer__wrapper {
    box-sizing: border-box;
    width: 100%;
    /* max-width: 1920px; */
    padding: 48px var(--landing-gutter) 56px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.landing-footer__info {
    max-width: 402px;
}

.landing-footer__info p {
    margin: 0;
    font-size: 12px;
    line-height: 1.67;
    letter-spacing: -0.24px;
    color: #8a8a8a;
}

.landing-footer__service-name {
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
}

.landing-footer__address,
.landing-footer__tel {
    margin-top: 2px;
}

.landing-footer__homepage {
    margin-top: 2px;
}

.landing-footer__homepage a {
    color: #2b66f6;
    text-decoration: underline;
}

.landing-footer__copyright {
    margin-top: 32px;
}

.landing-footer__policy {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 24px;
}

.landing-footer__policy-link {
    font-size: 12px;
    line-height: 1.67;
    letter-spacing: -0.24px;
    color: #8a8a8a;
    text-decoration: none;
    white-space: nowrap;
}

.landing-footer__policy-link--emphasis {
    font-weight: 700;
    color: #fff;
}

.landing-footer__policy-link:hover {
    color: #fff;
}

@media (max-width: 1139px) {
    /* 모바일 헤더는 투명 오버레이라 콘텐츠 위에 떠 있어야 한다. 데스크톱의
       솔리드 헤더(72px)를 위해 둔 .landing-page padding-top:72px을 그대로 두면
       top 섹션 시작이 데스크톱 헤더 높이에 묶여 어긋난다. 0으로 분리한다.
       (헤더가 hero 위에 겹치는 건 top 섹션 자체 상단 패딩으로 흡수) */
    .landing-page {
        padding-top: 0;
    }

    /* 모바일: 섹션 페이징 off.
       JS 휠 페이징은 이미 pointer:coarse 분기로 터치에서 실행되지 않고,
       남은 CSS scroll-snap을 여기서 꺼서 일반 세로 스크롤로 만든다.
       (height:auto로 섹션이 뷰포트보다 길어지므로, scroll-snap-stop:always가
        남아 있으면 긴 섹션마다 강제로 멈춰 스크롤이 걸린다) */
    html:has(.landing-page) {
        scroll-snap-type: none;
    }

    /* 모바일 섹션 높이:
       - 고정형(page/carousel 섹션): 800px
       - 비고정형(free 섹션 = introduce-1/verify/link-menu, data-scroll-freeform):
         콘텐츠 길이에 맞춰 auto
       landing_layout.css가 가장 마지막에 로드되어 각 섹션의 데스크톱 고정
       height(960/1204/1198px 등)를 덮어씀. */
    .landing-section {
        height: 800px;
        overflow: hidden; /* 고정형: 800px 넘는 콘텐츠는 잘라 다음 섹션과 겹치지 않게 함 */
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    .landing-section[data-scroll-freeform] {
        height: auto;
        overflow: visible;
    }

    /* Header */
    .landing-header__inner {
        background-color: rgba(11, 28, 44, 0.3);
        padding: 25px var(--landing-gutter) 10px;
    }
    .landing-header__wrapper {
        box-sizing: border-box;
        padding: 0 24px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .landing-header__logo {
        width: 72px;
        height: 40px;
    }

    /* Sticky btn */
    .landing-sticky-btn {
        box-sizing: border-box;
        /* 데스크톱 규칙의 width:626px를 해제하고 모바일 크기(195px 알약)로 고정한다. */
        width: auto;
        max-width: none;
        min-width: 195px;
        height: 56px;
        padding: 16px 24px;
        border-radius: 58px;
        position: fixed;
        bottom: 56px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 900;
        display: flex;
        align-items: flex-end;
        gap: 8px;
        background-color: #14171A;
        /* 모바일에서는 알약 전체를 클릭 가능하게 되돌림 */
        pointer-events: auto;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .landing-sticky-btn.is-initialized .landing-sticky-btn__link {
        margin-left: 8px;
    }

    /* Footer */
    .landing-footer__wrapper {
        padding: 48px var(--landing-gutter) 56px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .landing-footer__policy {
        order: -1;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 48px;
    }

    .landing-footer__policy-link {
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.28px;
        white-space: normal;
    }

    .landing-footer__info {
        max-width: none;
        width: 100%;
    }

    .landing-footer__service-name {
        display: block;
        margin-bottom: 24px;
        font-size: 18px;
        line-height: 1.4;
    }

    .landing-footer__copyright {
        margin-top: 24px;
    }
}