/* ========================================================= V2 EXISTING COMMON BOTTOM NAV FIX 기존 /v2/includes/bottom_nav.php 전용 ========================================================= */ :root { --v2-nav-height: 68px; --v2-safe-bottom: env(safe-area-inset-bottom, 0px); } /* 공통 네비는 모든 V2 화면에서 표시 */ html body .v2shop-bottom-nav { position: fixed !important; top: auto !important; right: auto !important; bottom: 0 !important; left: 50% !important; z-index: 9000 !important; display: flex !important; align-items: stretch !important; justify-content: space-around !important; width: min(100%, 600px) !important; max-width: 600px !important; min-width: 0 !important; height: calc( var(--v2-nav-height) + var(--v2-safe-bottom) ) !important; min-height: calc( var(--v2-nav-height) + var(--v2-safe-bottom) ) !important; margin: 0 !important; padding: 4px 4px var(--v2-safe-bottom) !important; border-top: 1px solid #e5e5e5 !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 -3px 14px rgba(0,0,0,.07) !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; overflow: visible !important; transform: translateX(-50%) !important; box-sizing: border-box !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* 기존 숨김 상태 전부 무효화 */ html body.bi-lock .v2shop-bottom-nav, html body.bi-size-modal-open .v2shop-bottom-nav, html body .v2shop-bottom-nav[aria-hidden="true"] { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* 메뉴 한 칸 */ html body .v2shop-bottom-nav > a, html body .v2shop-bottom-nav .v2shop-bottom-item { display: flex !important; flex: 1 1 0 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 58px !important; padding: 4px 2px !important; color: #5f6368 !important; /* #777(4.48:1) → 6.05:1 — 비활성 라벨 WCAG AA */ text-align: center !important; text-decoration: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; box-sizing: border-box !important; } html body .v2shop-bottom-nav svg { display: block !important; width: 22px !important; height: 22px !important; margin: 0 auto 3px !important; } html body .v2shop-bottom-nav span { display: block !important; max-width: 100% !important; overflow: hidden !important; font-size: 11px !important; font-weight: 600 !important; line-height: 14px !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* 본문이 네비 뒤에 가리지 않게 */ html body { padding-bottom: calc( var(--v2-nav-height) + var(--v2-safe-bottom) ) !important; } /* * 사이즈프로필 설정창은 네비를 숨기지 않고 * 네비보다 높은 층으로 올라온다. */ html body .bi-modal { z-index: 30000 !important; } html body .bi-modal .bi-panel { z-index: 30001 !important; } html body .bi-modal .bi-panel footer { z-index: 30002 !important; } /* 모바일에서는 화면 전체 폭 */ @media (max-width: 600px) { html body .v2shop-bottom-nav { left: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; } } /* ========================================================= 활성 표시 정리 (점 제거) + 클릭영역 보장 - 카테고리 선택 시 글자 밑 원형 점(::before/::after) 완전 제거 (활성 표시는 원형 링 + 굵은 글자로만 유지) - 하단 네비 포인트 항목의 잔여 dot/bar 오버레이 무효화 (클릭을 막는 투명 요소 방지) ========================================================= */ html body .v2live-category-image-item::before, html body .v2live-category-image-item::after, html body .v2live-category-image-item strong::before, html body .v2live-category-image-item strong::after { content: none !important; display: none !important; } html body .v2shop-point-bar, html body .v2shop-point-dot { display: none !important; content: none !important; pointer-events: none !important; } /* 하단 네비 각 항목 클릭영역 최소 44px 보장 (접근성) */ html body .v2shop-bottom-nav > a, html body .v2shop-bottom-nav > button, html body .v2shop-bottom-nav .v2shop-bottom-item { min-height: 48px !important; pointer-events: auto !important; } /* AI 항목은