/* mobile-nav.css 수정 버전 */

body.mobile-mode .tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* 🌟 핵심: 배경색 흰색(255, 255, 255)에 투명도 0.7(70%) 적용 */
    background: rgba(255, 255, 255, 0.7); 
    
    /* 뒷배경이 흐릿하게 비치는 효과 (이게 있어야 훨씬 고급스러워요) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 아이폰(Safari) 대응 */
    
    z-index: 9999;
    padding: 10px 10px 20px 10px; 
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    border-radius: 20px 20px 0 0; 
    
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* 아주 얇은 테두리로 경계선 강조 */
}

/* 스크롤바 숨기기 등 나머지 코드는 동일하게 유지 */
body.mobile-mode .tabs::-webkit-scrollbar {
    display: none;
}

/* 메인 화면의 맨 밑 내용이 하단 바에 가려지지 않도록 여백 확보 */
body.mobile-mode main {
    padding-bottom: 90px !important; 
}

/* 탭 버튼 모바일 디자인 최적화 */
body.mobile-mode .tab-btn {
    flex: 0 0 auto; /* 글자 크기에 맞춰 버튼 너비 유지 */
    font-size: 0.85rem;
    padding: 8px 14px;
    border: none; 
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-right: 5px; /* 버튼 사이 간격 */
}

/* 선택된(활성화된) 탭 디자인 */
body.mobile-mode .tab-btn.active {
    background: rgba(139, 92, 246, 0.15); /* 연보라빛 강조 배경 */
    color: var(--primary-color);          /* 현재 적용된 테마의 메인 컬러로 자동 변경됨 */
    border-radius: 50px;
    box-shadow: none;
}