/* ============================================
   모바일 하단 네비게이션 스타일
   ============================================ */

/* 기본 상태: PC에서는 숨김 */
.mobile-bottom-nav {
    display: none;
}

/* 모바일에서만 표시 */
@media (max-width: 900px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        border-top: 1px solid #E5E5E5;
        padding: 10px 0;
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        text-decoration: none;
        padding: 6px 0;
        cursor: pointer;
        background: none;
        border: none;
    }

    .mobile-nav-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* 아이콘 색상 필터 - 기본 회색 (#606060) */
        filter: brightness(0) saturate(100%) invert(37%) sepia(0%) saturate(0%) hue-rotate(155deg) brightness(96%) contrast(86%);
        transition: filter 0.2s;
    }

    /* 선택된 탭의 아이콘 색상 (#648876) */
    .mobile-nav-item.active .mobile-nav-icon img {
        filter: brightness(0) saturate(100%) invert(47%) sepia(12%) saturate(1155%) hue-rotate(103deg) brightness(94%) contrast(87%);
    }

    /* body에 padding-bottom 추가하여 하단 네비게이션이 콘텐츠를 가리지 않도록 */
    body {
        padding-bottom: 68px;
    }
}