/* =========================================
   유튜브 랭킹 공통 상단 메뉴
========================================= */

.yt-category-area{
    width:100%;
    box-sizing:border-box;
}

/* =========================================
   대분류 메뉴 영역
========================================= */

.yt-category-nav{
    display:block;
    width:100%;
    border-bottom:1px solid #ddd;
    box-sizing:border-box;
}

.yt-category-nav-scroll{
    display:block;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.yt-category-nav-scroll::-webkit-scrollbar{
    display:none;
}

.yt-category-nav-track{
    display:flex;
    align-items:center;
    width:max-content;
    min-width:100%;
    box-sizing:border-box;
}

/* =========================================
   대분류 메뉴
========================================= */

.yt-category-main-tabs{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    width:max-content;
    gap:22px;
}

.yt-category-main-tabs a{
    position:relative;
    display:block;
    flex:0 0 auto;
    height:42px;
    color:#222;
    font-size:13px;
    font-weight:500;
    line-height:42px;
    text-decoration:none;
    white-space:nowrap;
}

.yt-category-main-tabs a.on{
    color:#111;
    font-weight:900;
}

.yt-category-main-tabs a.on::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-1px;
    left:0;
    height:3px;
    background:#111;
}

/* =========================================
   정렬 버튼
========================================= */

.yt-category-sort-tabs{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:8px;

    margin-left:auto;
    padding-left:24px;
}

.yt-category-sort-tabs a{
    display:block;
    flex:0 0 auto;
    height:26px;
    padding:0 11px;
    border-radius:999px;
    background:#f3f3f3;
    color:#333;
    font-size:11px;
    font-weight:900;
    line-height:26px;
    text-decoration:none;
    white-space:nowrap;
}

.yt-category-sort-tabs a.on{
    background:#ff1d1d;
    color:#fff;
}

/* =========================================
   소분류 메뉴
========================================= */

.yt-category-child-wrap{
    position:relative;
    width:100%;
    min-height:30px;
    box-sizing:border-box;
}

.yt-category-child-tabs{
    display:none;
    align-items:center;
    gap:18px;
    width:100%;
    padding:14px 0 16px;
    overflow-x:auto;
    overflow-y:hidden;
    box-sizing:border-box;
    white-space:nowrap;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.yt-category-child-tabs::-webkit-scrollbar{
    display:none;
}

.yt-category-child-tabs.on{
    display:flex;
}

.yt-category-child-tabs a{
    position:relative;
    display:block;
    flex:0 0 auto;
    color:#333;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
    transition:color .18s ease;
}

.yt-category-child-tabs a.on{
    color:#ff1d1d;
}

/* PC에서 마우스를 올렸을 때만 밑줄 */
@media(hover:hover) and (pointer:fine){

    .yt-category-child-tabs a::after{
        content:"";
        position:absolute;
        right:0;
        bottom:-5px;
        left:0;
        height:1px;
        background:#333;
        transform:scaleX(0);
        transform-origin:center;
        transition:transform .18s ease;
    }

    .yt-category-child-tabs a:hover{
        color:#333;
    }

    .yt-category-child-tabs a:hover::after{
        transform:scaleX(1);
    }

    .yt-category-child-tabs a.on:hover{
        color:#ff1d1d;
    }
}

/* =========================================
   모바일
========================================= */

@media(max-width:900px){

    .yt-category-main-tabs{
        gap:18px;
    }

    .yt-category-main-tabs a{
        height:40px;
        font-size:12px;
        line-height:40px;
    }

    .yt-category-sort-tabs{
        gap:6px;
        margin-left:18px;
    }

    .yt-category-sort-tabs a{
        height:26px;
        padding:0 9px;
        font-size:11px;
        line-height:26px;
    }

    .yt-category-child-tabs{
        gap:16px;
        padding:13px 0 15px;
    }
}