/* ============================================================
   공용 하단 내비게이션 (플로팅 글래스 필)
   기준 디자인: templates/vacation.html(하계휴가 페이지)의 플로팅 nav.
   실제로는 배경색 없이 backdrop-blur만 걸린 "투명 유리" 형태(뒤 배경이 그대로 비쳐 보임) +
   검정 아이콘/글자 — 이 페이지 그대로를 기준으로 맞춤.
   각 페이지는 버튼 목록/아이콘/동작(onclick, href)만 정의하고,
   이 파일이 컨테이너 형태(플로팅, 블러, 캡슐)와 버튼 상태(hover/active)를 담당한다.
   아이콘 렌더링 방식(Material Symbols 폰트 / emoji / inline svg)은
   페이지마다 자유 — .floating-nav-icon 클래스만 붙이면 크기가 맞춰진다.
   ============================================================ */

.floating-nav {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    /* 버튼 개수/패딩에 따라 줄어들던 fit-content를 버리고, 화면(뷰포트) 좌우 20px만
       남기는 고정폭으로 계산 — 내비게이션 바 자체는 항상 화면을 덮는 크기를 유지하고,
       버튼들은 그 안에서 중앙정렬(justify-content:center)만 유지한다. */
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    background: transparent;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* standalone PWA 모드 safe-area 보정 (기존 각 페이지 로직과 동일) */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .floating-nav { bottom: calc(env(safe-area-inset-bottom, 20px) + 16px); }
    }
}

.floating-nav-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    padding: 8px 16px;
    border-radius: 9999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.floating-nav-btn:hover { background: rgba(255, 255, 255, 0.16); }
.floating-nav-btn:active { transform: scale(.96); }
.floating-nav-btn:disabled { opacity: .35; cursor: default; }

/* 페이지에 다크모드가 있으면(vacation.html 자체엔 없음) 투명 유리 위 검정 글자가
   안 보이므로 다크 상태에서는 밝은 글자로 전환 — 이 셀렉터는 html.dark가 없는
   vacation.html에는 전혀 영향 없음 */
html.dark .floating-nav-btn { color: #F1F5F9; }
html.dark .floating-nav-btn:hover { background: rgba(255, 255, 255, 0.08); }

.floating-nav-btn .floating-nav-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    stroke: currentColor;
    font-size: 28px;
    line-height: 1;
    overflow: visible;
}
.floating-nav-btn .material-symbols-outlined.floating-nav-icon {
    width: auto;
    height: auto;
    font-size: 28px;
}
.floating-nav-btn .floating-nav-label {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: inherit;
}

/* 현재 페이지 강조 */
.floating-nav-btn.active {
    background: rgba(37, 99, 235, 0.18);
    color: #2563EB;
}
html.dark .floating-nav-btn.active {
    background: rgba(59, 130, 246, 0.28);
    color: #93C5FD;
}