/**
 * 하단 고정 네비게이션 바
 * order_godam 프로젝트 공통 네비게이션
 */

/* 하단 네비게이션 컨테이너 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height, 60px);
    background-color: var(--bg-white, #FFFFFF);
    border-top: 1px solid var(--border-color, #E5E5E5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding: 8px 0 0 0;
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.1));
    max-width: var(--max-width, 480px);
    margin: 0 auto;
}

/* 네비게이션 아이템 */
.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--text-muted, #999999);
    transition: color 0.2s ease;
    cursor: pointer;
}

/* 아이콘 컨테이너 */
.bottom-nav__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG 아이콘 기본 스타일 */
.bottom-nav__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* 텍스트 레이블 */
.bottom-nav__label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

/* 활성화 상태 */
.bottom-nav__item.active {
    color: var(--primary-color, #8B4513);
    font-weight: 600;
}

/* 호버 효과 (데스크톱) */
@media (hover: hover) {
    .bottom-nav__item:hover {
        color: var(--primary-color, #8B4513);
    }
}

/* 탭 효과 (모바일) */
.bottom-nav__item:active {
    opacity: 0.7;
    transform: scale(0.95);
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .bottom-nav {
        left: 0;
        right: 0;
        max-width: 100%;
    }

    .bottom-nav__label {
        font-size: 10px;
    }
}

/* 페이지 콘텐츠 하단 여백 (네비게이션 바 영역 확보) */
/* .has-bottom-nav 클래스는 nav.js에서 자동 추가됨 */
body.has-bottom-nav {
    padding-bottom: calc(var(--footer-height, 60px) + env(safe-area-inset-bottom));
    /* 하단 회색 배경 제거 - 네비 바 및 safe area와 통일된 흰색 배경 */
    background-color: var(--bg-white, #FFFFFF);
}

/* 아이콘 SVG 정의 (인라인 사용 가능) */
/*
사용 예시:
<a href="/order_godam/page/user/main" class="bottom-nav__item active">
    <div class="bottom-nav__icon">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
        </svg>
    </div>
    <span class="bottom-nav__label">홈</span>
</a>

<a href="/order_godam/page/user/orders" class="bottom-nav__item">
    <div class="bottom-nav__icon">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
        </svg>
    </div>
    <span class="bottom-nav__label">주문내역</span>
</a>

<a href="/order_godam/page/user/mypage" class="bottom-nav__item">
    <div class="bottom-nav__icon">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </svg>
    </div>
    <span class="bottom-nav__label">마이페이지</span>
</a>
*/