.popular-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:6px 0 14px;
}

.popular-head .list_title-text{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}

.popular-period-label{
    font-size:13px;
    font-weight:400;
    color:var(--sub-font-color);
}

.popular-tabs{
    display:inline-flex;
    align-items:center;
    padding:4px;
    gap:3px;
    border:1px solid var(--line-color);
    border-radius:10px;
    background:var(--sub-menu-bg);
}

.popular-tab{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    height:36px;
    padding:0 14px;
    border-radius:7px;
    color:var(--main-font-color);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.popular-tab:hover{
    background:rgba(0,0,0,.05);
}

.popular-tab.active,
.popular-tab[aria-current="page"]{
    background:var(--main-color);
    color:var(--white-color);
    font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
}

.popular-page .sub_hr{
    margin-top:0;
}

/* 모바일 */
@media(max-width:767px){

    .popular-head{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        padding-bottom:12px;
    }

    .popular-head .list_title-text{
        width:100%;
    }

    .popular-tabs{
        display:flex;
        width:100%;
        box-sizing:border-box;
    }

    .popular-tab{
        flex:1;
        min-width:0;
        padding:0 8px;
    }
}