/* =====================================================================
 * 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;
}

/* ⚠️ 2026-08-07 변경: .app-nav-bar는 이제 **전 앱 공통**이다(홈·라이브·뉴스·전술판·스코어보드·리모컨).
   이전에는 전술판만 예외로 바를 주입하지 않고 .site-footer를 통합 푸터로 썼는데, 그 결과
   전술판에서 라이브·뉴스로 가는 항목이 아예 만들어지지 않았다(app-nav.js init 주석 참조).
   전술판은 글로벌 바 + 앱 툴바(.site-footer) 2단이며 body.has-app-nav-stacked가 그 여백을 만든다. */

.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));
}

/* =========================================================
 * 전술판 2단 스택 — 글로벌 바(52px) 위에 앱 툴바(.site-footer, 52px)가 얹힌다.
 *
 * [해결한 누락] app-nav.js:173이 전술판에 has-app-nav-stacked를 붙이는데
 * **대응 CSS 규칙이 없었다.** 클래스를 붙이는 JS와 받는 CSS는 짝으로 존재해야 하며,
 * 한쪽만 있으면 에러 없이 아무 일도 일어나지 않는다(CSS는 없는 선택자에 침묵한다).
 * ========================================================= */
body.has-app-nav-stacked {
    padding-bottom: calc((var(--app-nav-h, 52px) * 2) + env(safe-area-inset-bottom, 0px));
}

/* 앱 툴바를 글로벌 바 높이만큼 띄운다. 둘 다 fixed bottom:0이라 그대로 두면 겹친다. */
body.has-app-nav-stacked .site-footer {
    bottom: calc(var(--app-nav-h, 52px) + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
 * '더보기(≡)' 오버플로 메뉴 — 글로벌 바 기준 팝오버.
 * .app-nav-bar가 position:fixed라 절대 위치의 컨테이닝 블록이 된다.
 * ========================================================= */
.app-nav-more {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 8px;
    min-width: 184px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #ffffff;
    border: 1px solid var(--app-nav-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.20);
    z-index: 1991; /* .app-nav-bar(1990) 바로 위 */
}
.app-nav-more[hidden] {
    display: none;
}
.app-nav-more__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px; /* 터치 타깃 ≥40px */
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-dark, #333333);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav-more__item svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}
.app-nav-more__item:hover {
    background: rgba(33, 150, 243, 0.08);
    color: var(--main-blue, #2196f3);
}
.app-nav-more__item:active {
    transform: scale(0.98);
}
.app-nav-more__item.is-active {
    color: var(--app-nav-active, #2196f3);
}
.app-nav-more__item:focus-visible,
.app-nav-item:focus-visible {
    outline: 2px solid var(--app-nav-active, #2196f3);
    outline-offset: -2px;
}

/* =========================================================
 * 최소 지원 폭 375px 대응.
 * 항목이 5개이므로 375px에서 항목당 75px. 라벨은 최대 3자('전술판')로 유지된다
 * (스코어보드·리모컨·토너먼트는 '더보기'로 내려갔다 — app-nav.js NAV_ITEMS 주석).
 * 가로 스크롤은 쓰지 않는다: 스크롤되는 하단 탭바는 항목의 존재 자체를 숨긴다.
 * ========================================================= */
.app-nav-item span {
    white-space: nowrap;
}
@media (max-width: 380px) {
    .app-nav-item {
        font-size: 10px;
    }
    .app-nav-item svg {
        width: 18px;
        height: 18px;
    }
    .app-nav-more {
        right: 4px;
        left: 4px;
        min-width: 0;
    }
}

/* =========================================================
 * 전술판 단일 푸터 — '더보기(≡)' 오버플로 메뉴
 * .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;
}