/* 목록 스크롤 규칙 한 곳 — 붙은 분류 탭 줄(PC 72 · 폰 52)의 ☰·필터·무료 샘플. common/catalog_rail.php */
.catalogRailActions { display: none; }

.catalogRailActions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--bj-ink, #181817);
    font: inherit;
    font-size: var(--bj-type-body, 15px);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

/* 붙은 줄에서 연 전체 메뉴 — 머리말은 저 위에 있어 패널만 줄 아래로 내린다 */
.catalogRailMenuPanel {
    position: fixed !important;
    top: 72px !important;
    margin-top: 0 !important;
    transform: none !important;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}

@media (min-width: 768px) {
    /* 영상 분류 줄도 다른 목록과 같은 붙은 줄 */
    .catalogShell__categoryRail.companionCatalog__categoryRail.ui-fixed {
        position: fixed;
        z-index: 120;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 72px;
        min-height: 72px;
        margin: 0;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 max(232px, calc((100% - 1000px) / 2));
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 5px 16px rgba(23, 35, 43, 0.07);
    }

    .ui-fixed > .catalogRailActions,
    .fb-category-shell.is-stuck .fb-category-content > .catalogRailActions {
        display: flex;
        position: fixed;
        z-index: 121;
        top: 0;
        right: 0;
        left: 0;
        height: 72px;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        pointer-events: none;
    }
    .catalogRailActions .catalogRailActions__end { display: flex; align-items: center; gap: 4px; margin: 0; }

    .companionCatalog__categoryRail.ui-fixed .companionCatalog__categoryLink {
        flex: 0 0 auto;
        width: var(--bj-catalog-category-tile, 112px);
        min-width: 96px;
        height: 60px;
        gap: 4px;
    }
    .companionCatalog__categoryRail.ui-fixed .companionCatalog__categoryIcon,
    .companionCatalog__categoryRail.ui-fixed .companionCatalog__categoryIcon img {
        width: 24px;
        height: 24px;
    }
}

/* 탭 1000px 옆에 단추 자리가 모자라면 글을 접고 탭을 줄인다 */
@media (min-width: 768px) and (max-width: 1360px) {
    .catalogRailActions__label { display: none; }
    .weddingCatalogContextNav--pc.ui-fixed .weddingCatalogContextNav__railViewport,
    .fb-category-shell.is-stuck .fb-category-primary { width: calc(100% - 200px) !important; }
}

@media (max-width: 767px) {
    .catalogRailActions__menu, .catalogRailActions__label { display: none; }

    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .catalogRailHost > .catalogRailActions,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .catalogRailHost > .catalogRailActions {
        display: block;
        position: absolute;
        z-index: 3;
        top: 0;
        right: 0;
        height: 52px;
        padding-left: 16px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 16px);
    }
    .catalogRailActions__end { display: flex; align-items: center; height: 52px; }

    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .catalogRailHost [data-context-nav-viewport],
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .catalogRailHost [data-context-nav-viewport],
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .catalogRailHost .fb-cat-lv1,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .catalogRailHost .fb-cat-lv1,
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .catalogRailHost.companionCatalog__categoryRail,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .catalogRailHost.companionCatalog__categoryRail {
        padding-right: 96px;
    }
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .fb-cat-lv2,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .fb-cat-lv2 { display: none; }

    /* 연하장 바로가기 줄도 다른 목록과 같이 접는다 */
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts {
        height: 52px !important;
        min-height: 52px !important;
        padding-top: 0 !important;
        overflow: hidden;
    }
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__iconTile,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__iconTile { display: none; }
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__railViewport,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__railViewport,
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__rail,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__rail,
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__styles,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__styles,
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__related,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__related {
        height: 52px;
        min-height: 52px;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        align-items: center;
    }
    body[data-wedding-catalog-scroll-state="COMPACT_DOWN"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__link,
    body[data-wedding-catalog-scroll-state="REVEAL_UP"] .weddingCatalogContextNav--mobile-shortcuts .weddingCatalogContextNav__link {
        display: inline-flex;
        align-items: center;
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
    }
}