/* ==========================================================================
   고급기능 모바일 하단탭 (_MobileFeatureTabs.cshtml)

   전자결재·LMS 처럼 **로그인해서 반복적으로 드나드는 업무 화면**에서만 뜨는
   하단 탭바입니다. 테넌트가 어떤 내비바 스킨을 골랐는지와 무관하게 동작합니다.

   ★ 행사·경조사(_EventLayout)에는 붙이지 않습니다 — 링크를 타고 들어와 한 번
     신청하고 나가는 공개 페이지이고, 신청 위저드에 이미 하단 고정 CTA
     (.event-fixed-cta)가 있어 두 개가 겹칩니다.

   ★ 내비바 스킨이 BottomTab 이면 이 탭바는 렌더되지 않습니다(파셜에서 차단).
     하단에 고정 바가 두 개 생기는 것을 막기 위함입니다.
   ========================================================================== */

.wm-ftabs {
    /* PC 에서는 숨깁니다 — 상단 내비가 이미 같은 링크를 제공합니다. */
    display: none;
}

@media (max-width: 767.98px) {
    .wm-ftabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, .08);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
        padding-bottom: var(--m-safe-bottom);
    }

    .wm-ftabs-tab {
        position: relative;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* 56px + 안전영역 = mobile-common.css 의 body.has-bottomtab 여백과 맞춥니다. */
        min-height: 56px;
        padding: 8px 2px 6px;
        color: #6b7280;
        font-size: .6875rem;
        text-decoration: none;
    }

    .wm-ftabs-tab i {
        font-size: 18px;
        line-height: 1;
    }

    .wm-ftabs-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wm-ftabs-tab:hover,
    .wm-ftabs-tab:focus {
        color: #2b6cb0;
        text-decoration: none;
    }

    .wm-ftabs-tab.active {
        color: #2b6cb0;
        font-weight: 700;
    }

    /* 활성 탭 상단의 얇은 표시선 — 색만으로는 구분이 약합니다. */
    .wm-ftabs-tab.active::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 18%;
        right: 18%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: #2b6cb0;
    }

    /* 배지 — 건수는 nav-approval-badge.js / nav-notifications.js 가 채웁니다.
       absolute 라 나중에 나타나도 탭 레이아웃이 밀리지 않습니다. */
    .wm-ftabs-tab .wm-nav-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: 4px;
        min-width: 17px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e03131;
        color: #fff;
        font-size: .625rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* 플로팅 메뉴가 탭바에 깔리지 않도록 위로 밀어 올립니다. */
    body.has-bottomtab .way-fmenu {
        bottom: calc(16px + 56px + var(--m-safe-bottom));
    }
}