/* navs/nav_style.css - 내비는 페이지 배경과 구분, 스타일별 고정 배경·아이콘색(대비) */
.glass-nav { 
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); 
    width: 100%; max-width: 448px; z-index: 1000; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-container { display: grid; height: 75px; width: 100%; align-items: center; }

/* 공통: 아이콘·라벨은 각 스타일에서 색 지정 (인라인 --text-color 사용 안 함) */
.glass-nav-fixed i,
.glass-nav-fixed span { transition: color 0.2s; }

/* 스타일 1: 다크 슬레이트 바 — 항상 진한 배경 + 흰 아이콘 */
.nav-style-1 {
    background-color: #1e293b;
    border-top: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
}
.nav-style-1 i, .nav-style-1 span { color: #f1f5f9 !important; }

/* 스타일 2: 밝은 상단 라운드 카드 — 흰 배경 + 진한 아이콘 */
.nav-style-2 {
    background-color: #f8fafc;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
}
.nav-style-2 i, .nav-style-2 span { color: #334155 !important; }

/* 스타일 3: 플로팅 필 — 다크 + 흰 아이콘 */
.nav-style-3 {
    bottom: 20px;
    width: 92%;
    background-color: #0f172a;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.nav-style-3 i, .nav-style-3 span { color: #e2e8f0 !important; }

/* 스타일 4: 글래스 다크 — 반투명 유지 + 진한 테두리·그림자로 구분 */
.nav-style-4 {
    background-color: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-style-4 i, .nav-style-4 span { color: #f1f5f9 !important; }

/* 스타일 5: 포인트 컬러 바 — 강조색 배경 + 흰 아이콘 (흰 페이지에서도 구분) */
.nav-style-5 {
    background-color: #2563eb;
    border-top: none;
    box-shadow: 0 -4px 16px rgba(37, 99, 235, 0.35);
}
.nav-style-5 i, .nav-style-5 span { color: #fff !important; }

/* 스타일 6: 딥블루 + 상단 라인 — 진한 블루 + 밝은 아이콘 */
.nav-style-6 {
    background-color: #1e3a5f;
    border-top: 4px solid #f59e0b;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.nav-style-6 i, .nav-style-6 span { color: #f1f5f9 !important; }

/* 스타일 7: 라이트 카드 상단 라운드 — 밝은 배경 + 진한 아이콘 */
.nav-style-7 {
    background-color: #fff;
    box-shadow: 0 -12px 28px rgba(0,0,0,0.1);
    border-radius: 28px 28px 0 0;
    border: 1px solid rgba(0,0,0,0.06);
}
.nav-style-7 i, .nav-style-7 span { color: #475569 !important; }

/* 스타일 8: 미니멀 다크 + 얇은 상단선 */
.nav-style-8 {
    background-color: #0f172a;
    height: 64px;
    border-top: 2px solid #64748b;
}
.nav-style-8 i, .nav-style-8 span { color: #cbd5e1 !important; }

/* 스타일 9: 블랙 바 — 완전 검정 + 흰 아이콘 */
/* 스타일 9: 푸른 하늘·건물 스케치 컨셉 — 밝은 하늘색 본문에 맞춘 라이트 내비 */
.nav-style-9 {
    background-color: #e0f2fe;
    border-top: 1px solid rgba(12,74,110,0.15);
    border-radius: 32px 32px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.nav-style-9 i, .nav-style-9 span { color: #0c4a6e !important; }

/* 스타일 10: 플로팅 보더 카드 — 밝은 배경 + 테두리 + 진한 아이콘 */
.nav-style-10 {
    bottom: 16px;
    width: 88%;
    background-color: #fff;
    border-radius: 24px;
    border: 2px solid #1e293b;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.nav-style-10 i, .nav-style-10 span { color: #1e293b !important; }