/* =====================================================================
 * app-nav.css — 통합 네비게이션 셸 (DALSOOLIVE_SQUAD)
 * 3개 앱(tactical-board / scoreboard / remote-control) 공통 하단 앱 전환 바.
 * Tailwind preflight:false 환경. 색/경계는 variables.css 토큰을 우선 사용하되
 * 토큰 미로드 환경 대비 폴백값을 함께 지정한다.
 * 셸 토큰(--app-nav-h/-bg/-active/-border)은 variables.css 단일 출처에 정의됨(Phase 5 이관 완료).
 * 폴백값은 variables.css 미로드 환경 대비.
 * ===================================================================== */
.app-nav-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--app-nav-h, 52px);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--app-nav-bg, rgba(255, 255, 255, 0.97));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--app-nav-border, #e5e7eb);
    z-index: 1990; /* 전술판 .site-footer(z-2000) 아래, 일반 콘텐츠 위 */
    box-shadow: 0 -2px 12px -4px rgba(0, 0, 0, 0.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
}

/* 주: 전술판은 별도 바를 주입하지 않고 기존 .site-footer를 단일 통합 푸터로 재편한다
   (app-nav.js enhanceTacticalFooter). 따라서 .app-nav-bar는 스코어보드/리모컨 전용. */

.app-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: none;
    border: 0;
    font-family: inherit;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.app-nav-item:hover {
    color: var(--app-nav-active, #2196f3);
    background: rgba(33, 150, 243, 0.06);
}
.app-nav-item:active {
    transform: scale(0.95);
}
.app-nav-item svg {
    width: 20px;
    height: 20px;
}

/* 현재 앱 하이라이트 + 상단 인디케이터 */
.app-nav-item.is-active {
    color: var(--app-nav-active, #2196f3);
    cursor: default;
    position: relative;
}
.app-nav-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--app-nav-active, #2196f3);
}

/* 본문 하단 가림 방지 (스코어보드/리모컨 — init이 host에 따라 body class 부여) */
body.has-app-nav {
    padding-bottom: calc(var(--app-nav-h, 52px) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
 * 전술판 단일 푸터 — '더보기(≡)' 오버플로 메뉴
 * .site-footer(position:fixed)를 기준으로 그 위에 팝오버.
 * ========================================================= */
.footer-more-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 8px;
    min-width: 184px;
    background: #ffffff;
    border: 1px solid var(--border-gray, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.20);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 2001; /* .site-footer(z-2000) 위 */
}
.footer-more-menu.open {
    display: flex;
}
.footer-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark, #333333);
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-more-item:hover {
    background: rgba(33, 150, 243, 0.08);
    color: var(--main-blue, #2196f3);
}
.footer-more-item:active {
    transform: scale(0.98);
}
.footer-more-item svg {
    flex: 0 0 auto;
}

/* 전술판 메인 푸터 탭 — app-nav 셸(.app-nav-item)과 동일 외형으로 통일.
   기본색/폰트/hover/활성 인디케이터를 셸과 일치시켜 세 앱(전술판·스코어보드·리모컨) 하단 네비 일관성 확보.
   (메인 탭 5종은 index.html에서 .footer-nav-item 클래스 부여, 색·폰트 인라인 Tailwind는 제거됨) */
.footer-nav-item {
    color: #6b7280;          /* .app-nav-item과 동일 기본색 */
    font-size: 11px;         /* .app-nav-item과 동일 폰트 크기 */
    position: relative;      /* is-active 상단 인디케이터(::before) 기준 */
}
.footer-nav-item:hover {
    color: var(--main-blue, #2196f3);
    background: rgba(33, 150, 243, 0.08);
}
/* 현재 앱(전술판) 탭 하이라이트 + 상단 인디케이터 — .app-nav-item.is-active와 동일 */
.footer-nav-item.is-active {
    color: var(--main-blue, #2196f3);
}
.footer-nav-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--main-blue, #2196f3);
}

/* 송출 모드 이중 가드: broadcast-mode에서는 셸을 절대 렌더하지 않음 */
body.broadcast-mode .app-nav-bar {
    display: none !important;
}
.app-nav-bar.is-hidden {
    display: none;
}