/* 쇼핑몰 로고·검색·카테고리 메뉴를 문서 흐름 안에서 상단에 유지 */
.cs-header {
    --cs-sticky-header-height: 167px;
    --cs-sticky-footer-height: 0px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    box-shadow: 0 4px 14px rgb(23 59 69 / 6%);
}

/* 펼친 카테고리는 헤더를 기준으로 배치하고 작은 화면에서 내부 스크롤 */
.cs-header .cs-menu {
    max-height: calc(100vh - var(--cs-sticky-header-height) - var(--cs-sticky-footer-height));
    max-height: calc(100dvh - var(--cs-sticky-header-height) - var(--cs-sticky-footer-height));
    overflow-y: auto;
    overscroll-behavior: contain;
}

html {
    scroll-padding-top: 177px;
}

@media (max-width: 760px) {
    .cs-header {
        --cs-sticky-header-height: 155px;
        --cs-sticky-footer-height: 64px;
    }
    .cs-header .cs-logo .cl-logo {
        width: clamp(128px, 36vw, 140px);
        height: auto;
    }
    .cs-header .cs-header-main {
        min-height: 110px;
        padding-top: 8px;
        padding-bottom: 10px;
        row-gap: 0;
    }
    .cs-header .cs-search {
        height: 38px;
        margin-top: 8px;
    }
    .cs-header .cs-nav {
        height: 44px;
    }
    .cs-header .cs-nav-scroll a {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    html {
        scroll-padding-top: 165px;
    }
}