/* 전 페이지 가로 스크롤 방지 — html에만 적용 (body overflow는 sticky를 깨뜨림) */
html {
    overflow-x: clip;
}

/* main page */
/* 히어로: 데스크탑 뷰포트에 딱 맞춤 */
.is-index #top {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
}

/* 히어로 스크롤 라인 */
.scrollline {
    width: 1px;
    height: 138px;
    overflow: hidden;
}

.scrollline i {
    display: block;
    width: 1px;
    height: 138px;
    background: rgba(255, 255, 255, 0.9);
    transform: scaleY(0);
    transform-origin: top center;
    animation: scrollline-drop 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

@keyframes scrollline-drop {
    0% {
        transform: scaleY(0);
        transform-origin: top center;
    }
    45% {
        transform: scaleY(1);
        transform-origin: top center;
    }
    55% {
        transform: scaleY(1);
        transform-origin: bottom center;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scrollline i {
        animation: none !important;
        transform: scaleY(1);
    }
}

/* KM 슬라이더 */
#km-track .km-slide {
    height: 240px;
    opacity: 0.5;
    transition: opacity var(--km-slide-duration, 420ms) var(--km-slide-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (min-width: 768px) {
    #km-track .km-slide {
        height: auto;
        aspect-ratio: 802 / 426;
    }
}

#km-track .km-slide.is-active {
    opacity: 1;
}