/* ===== Section Navigation (Bottom Tab Bar + Navigation Rail) ===== */

/* --- CSS Variables --- */
:root {
    --top-nav-height: 52px;
    --bottom-tab-height: calc(56px + env(safe-area-inset-bottom, 0px));
    --nav-rail-width: 80px;
    --section-nav-bg: #ffffff;
    --section-nav-active: #0d6efd;
    --section-nav-inactive: #9E9E9E;
    --section-nav-indicator: rgba(13, 110, 253, 0.12);
    --section-nav-border: #e0e0e0;
}

/* --- Base Styles --- */
.section-nav {
    display: flex;
    background-color: var(--section-nav-bg);
    z-index: 1010;
    overscroll-behavior: none;
}

.section-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--section-nav-inactive);
    transition: color 200ms ease, transform 150ms ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.section-nav-item.active {
    color: var(--section-nav-active);
}

.section-nav-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: 16px;
    transition: background-color 200ms ease;
}

.section-nav-item.active .section-nav-icon-wrap {
    background-color: var(--section-nav-indicator);
}

.section-nav-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Icon: always show outline, hide filled */
.section-nav-icon--filled {
    display: none;
}

.section-nav-label {
    font-size: 12px;
    line-height: 1;
    margin-top: 4px;
    font-weight: 400;
    white-space: nowrap;
}

.section-nav-item.active .section-nav-label {
    font-weight: 600;
}

/* --- Mobile: Bottom Tab Bar (< 600px) --- */
@media (max-width: 599.98px) {
    .section-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--bottom-tab-height);
        flex-direction: row;
        align-items: center;
        border-top: 1px solid var(--section-nav-border);
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .section-nav-item {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        padding: 6px 0;
    }
}

/* --- Tablet: Navigation Rail (600 ~ 991px) --- */
@media (min-width: 600px) and (max-width: 991.98px) {
    .section-nav {
        position: fixed;
        left: 0;
        top: 0;
        width: var(--nav-rail-width);
        height: 100vh;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        gap: 12px;
        border-right: 1px solid var(--section-nav-border);
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        z-index: 1040;
    }

    .section-nav-item {
        width: 100%;
        min-height: 44px;
        padding: 8px 0;
    }

    /* Navigation Rail: 홈을 최상단으로 재배치 */
    .section-nav-item--home {
        order: -1;
    }
}

/* --- Desktop: 숨김 (>= 992px) --- */
@media (min-width: 992px) {
    .section-nav {
        display: none;
    }
}

/* --- Auto-hide: 하단 네비 공존 페이지 (모바일 전용) --- */
@media (max-width: 599.98px) {
    body.has-dual-bottom-nav .section-nav {
        transition: transform 300ms ease;
        will-change: transform;
    }

    body.has-dual-bottom-nav.bottom-tab-hidden .section-nav {
        transform: translateY(100%);
    }
}

/* --- 페이지별 하단 네비 공존 처리 (모바일) --- */
@media (max-width: 599.98px) {
    .has-dual-bottom-nav .fixed-bottom-nav {
        transition: bottom 300ms ease;
        bottom: var(--bottom-tab-height);
    }

    .has-dual-bottom-nav.bottom-tab-hidden .fixed-bottom-nav {
        bottom: 0;
    }
}

/* --- 페이지별 하단 네비 공존 처리 (태블릿) --- */
@media (min-width: 600px) and (max-width: 991.98px) {
    body:has(.section-nav) .fixed-bottom-nav {
        left: var(--nav-rail-width);
        width: calc(100% - var(--nav-rail-width));
    }
}

/* --- Content wrapper 여백 보정 --- */
@media (max-width: 599.98px) {
    body:has(.section-nav) .content-wrapper {
        padding-bottom: var(--bottom-tab-height);
    }

    /* padding-bottom 유지: transform으로 숨길 때 레이아웃 시프트 방지 */
}

@media (min-width: 600px) and (max-width: 991.98px) {
    body:has(.section-nav) {
        padding-left: var(--nav-rail-width);
    }

    body:has(.section-nav) .top-nav-row {
        left: var(--nav-rail-width);
    }
}

/* --- verse-fab 공존 보정 (모바일 dual-nav) --- */
@media (max-width: 599.98px) {
    body.has-dual-bottom-nav .verse-fab {
        bottom: calc(88px + var(--bottom-tab-height));
        transition: bottom 300ms ease;
    }

    body.has-dual-bottom-nav.bottom-tab-hidden .verse-fab {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}

/* --- scroll-to-top 버튼 공존 보정 --- */
@media (max-width: 599.98px) {
    body:has(.section-nav) .scroll-to-top-btn {
        bottom: calc(24px + var(--bottom-tab-height));
        transition: bottom 300ms ease;
    }

    body.bottom-tab-hidden .scroll-to-top-btn {
        bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 600px) and (max-width: 991.98px) {
    body:has(.section-nav) .scroll-to-top-btn {
        right: calc(16px + var(--nav-rail-width));
    }
}

/* --- 상단 홈 버튼 숨김 (section-nav 있는 페이지, 모바일+태블릿) --- */
@media (max-width: 991.98px) {
    body:has(.section-nav) .top-nav-home-button {
        display: none;
    }
}

/* --- 터치 피드백 --- */
.section-nav-item:active {
    transform: scale(0.95);
    opacity: 0.7;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .section-nav,
    .section-nav-item,
    .section-nav-icon-wrap,
    body.has-dual-bottom-nav .section-nav,
    body.has-dual-bottom-nav .top-nav-row,
    .has-dual-bottom-nav .fixed-bottom-nav {
        transition: none !important;
    }
}

/* --- Desktop Hover --- */
@media (hover: hover) and (pointer: fine) {
    .section-nav-item:hover {
        color: var(--section-nav-active);
    }

    .section-nav-item:hover .section-nav-icon-wrap {
        background-color: var(--section-nav-indicator);
    }
}