/* =====================================
   StoryRo site Navigation
====================================== */

/* =========== 상단 대메뉴 =========== */


/* Hover (마우스를 올렸을 때 효과) */
#navbarNav .nav-link:hover{
    color: var(--bs-primary);
    background-color: var(--bs-light);
}

/* Active (마우스를 클릭했을 때 "누르는 동안"만 아주 짧게 적용됨) */
#navbarNav .nav-link.active{
    color: var(--bs-primary);
    border-bottom: 3px solid var(--bs-primary);
}

/* 콘텐츠 종류별 상위·하위 메뉴가 같은 테마 색상을 공유한다. */
.nav-theme-novel {
    --content-theme-color: #0d6efd;
    --content-theme-rgb: 13, 110, 253;
}

.nav-theme-webtoon {
    --content-theme-color: #198754;
    --content-theme-rgb: 25, 135, 84;
}

.nav-theme-comic {
    --content-theme-color: #6f42c1;
    --content-theme-rgb: 111, 66, 193;
}

#navbarNav .nav-link.content-nav-link:hover,
#navbarNav .nav-link.content-nav-link.active {
    color: var(--content-theme-color);
}

#navbarNav .nav-link.content-nav-link.active {
    border-bottom-color: var(--content-theme-color);
}

@media (max-width: 991.98px) {
    #siteNav {
        z-index: 1030;
    }

    #siteNav .container {
        align-items: center;
        position: relative;
    }

    #siteNav .navbar-toggler {
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    #navbarNav {
        position: absolute;
        top: calc(100% + .5rem);
        right: .75rem;
        left: .75rem;
        z-index: 1031;
        margin-top: 0;
        padding: .75rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        background-color: var(--bs-light);
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12);
    }

    #navbarNav.collapsing {
        height: auto !important;
        transition: none;
    }

    #navbarNav .navbar-nav {
        width: 100%;
        padding-top: .5rem;
    }

    #navbarNav .nav-link {
        border-radius: .5rem;
        text-align: center;
    }

    #navbarNav .nav-link.active {
        border-bottom: 0;
        background-color: rgba(var(--bs-primary-rgb), .12);
    }

    #navbarNav .nav-link.content-nav-link.active {
        background-color: rgba(var(--content-theme-rgb), .12);
    }

    #navbarNav .dropdown-menu {
        text-align: center;
    }
}



/* =========== 하단 메뉴 =========== */

/* Hover (마우스를 올렸을 때 효과) */
.sub-nav .nav-link:hover{
    background-color: rgba(var(--bs-primary-rgb), .22);
}

/* Active (마우스를 클릭했을 때 "누르는 동안"만 아주 짧게 적용됨) */
.sub-nav .nav-link.active{
    background-color: rgba(var(--bs-primary-rgb), .30);
}

/* 콘텐츠 하위 메뉴의 알약 배경은 hover 또는 active 상태에서만 표시한다. */
.content-sub-nav .nav-link {
    color: var(--bs-dark);
    background-color: transparent;
}

.content-sub-nav .nav-link:hover {
    color: var(--content-theme-color);
    background-color: rgba(var(--content-theme-rgb), .18);
}

.content-sub-nav .nav-link.active {
    color: var(--content-theme-color);
    background-color: rgba(var(--content-theme-rgb), .26);
}

#novelSubNav .container,
#myPageSubNav .container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#novelSubNav .container::-webkit-scrollbar,
#myPageSubNav .container::-webkit-scrollbar {
    display: none;
}

.sub-nav .nav-link {
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

@media (max-width: 991.98px) {
    #novelSubNav .container,
    #myPageSubNav .container {
        overflow-x: auto;
    }

    .sub-nav {
        flex-wrap: nowrap;
        min-width: max-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sub-nav .nav-link {
        transition: none;
    }
}