/* 공유 페이지 크롬 (네비바 + 푸터) - 모든 페이지 공통. base.html 이 로드 */

/* sticky footer: 본문이 짧아도 푸터가 화면 하단에 붙도록 */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }

/* 공유 푸터 */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid hsl(var(--border));
    padding: 28px 24px;
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}

/* 헤더는 모바일 다크 오버레이(백드롭) 위에 유지 */
header { position: relative; z-index: 100; }

/* 넷플릭스식 반투명 검은 배경 (모바일 메뉴 열림 시) */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: hsl(0 0% 0% / 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 90;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

.site-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    max-width: 1120px;
    margin: 0 auto;
    /* 헤더 총높이 64px = 13*2 + 38(버튼 높이) — Material/Tailwind(h-16) 등 업계 표준 헤더 높이에 맞춤 */
    padding: 13px 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: hsl(var(--primary));
    text-decoration: none;
}
.brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: hsl(var(--primary));   /* 버튼 색(딥 네이비)과 동기화 */
    color: hsl(var(--primary-foreground));
}
.brand .brand-mark svg { width: 18px; height: 18px; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-actions .btn {
    text-decoration: none;
    height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 햄버거 토글 - 데스크톱 숨김, 모바일에서만 표시 */
.nav-toggle {
    display: none;
    position: relative;
    z-index: 100;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: background 0.15s;
}
.nav-toggle:hover { background: hsl(var(--secondary)); }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }

/* 데스크톱: 래퍼(nav-menu-inner/footer)는 레이아웃에서 제거 → 버튼이 가로로 인라인 */
.nav-menu-inner, .nav-actions-footer { display: contents; }

/* 데스크톱: 백드롭 비활성 + 헤더 하단 헤어라인(편집 구조선) */
@media (min-width: 641px) {
    .nav-backdrop { display: none; }
    header { border-bottom: 1px solid hsl(var(--border)); }
}

/* 모바일 네비게이션: 햄버거 토글 + 넷플릭스식 다크 오버레이 메뉴 */
@media (max-width: 640px) {
    .nav-toggle { display: inline-flex; }
    body.nav-open .nav-toggle .icon-menu { display: none; }
    body.nav-open .nav-toggle .icon-close { display: inline; }
    body.nav-open { overflow: hidden; }   /* 배경 스크롤 잠금 */

    body.nav-open .brand { color: #fff; }
    body.nav-open .nav-toggle { color: #fff; }
    body.nav-open .nav-toggle:hover { background: hsl(0 0% 100% / 0.14); }

    .nav-actions {
        position: fixed;
        top: 66px;                /* 모바일 헤더 높이(13*2 + 40 토글)에 맞춰 그 아래부터 */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        display: flex;
        flex-direction: column;
        overflow: hidden;         /* 스크롤은 내부 메뉴 영역이 담당 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    body.nav-open .nav-actions { opacity: 1; visibility: visible; }

    /* 메뉴 항목: 스크롤 영역(많으면 스와이프). safe center - 적으면 중앙, 넘치면 클리핑 없이 스크롤.
       perspective 로 스크롤 구동 3D 휠(원근) 적용 - 변형값은 JS 가 인라인으로 부여 */
    .nav-menu-inner {
        position: relative;       /* 항목 offsetTop 기준점 (휠 오프셋을 레이아웃 좌표로 계산) */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 8px;
        /* 상·하 여백은 JS 가 컨테이너 절반 높이로 설정 → 첫/마지막 항목도 중앙(정면)까지 스크롤 가능 */
        padding: 40px 24px;
        perspective: 900px;
    }
    .nav-menu-inner .btn { will-change: transform, opacity; }
    /* 로그아웃: 항상 화면 하단 고정 (스크롤·회전 대상 아님) */
    .nav-actions-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        padding: 12px 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
        border-top: 1px solid hsl(0 0% 100% / 0.12);
    }

    .nav-actions .btn {
        width: 100%;
        height: 52px;
        flex-shrink: 0;
        justify-content: center;
        border: none;
        background: transparent;
        color: hsl(0 0% 100% / 0.92);
        font-size: 1.0625rem;   /* 17px - 풀스크린 주 메뉴 기준(모바일 16px 하한 이상). 원근 스케일이 이 크기에 곱해짐 */
        font-weight: 500;
        border-radius: 10px;
        padding: 0 14px;
    }
    .nav-actions .btn:hover,
    .nav-actions .btn:focus-visible { background: hsl(0 0% 100% / 0.12); }

    .nav-actions .btn-primary {
        background: transparent;
        color: hsl(0 0% 100% / 0.92);
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
    .nav-actions .btn-primary:hover { background: hsl(0 0% 100% / 0.12); }

    /* 스크롤바(우측 세로막대) 숨김 */
    .nav-menu-inner {
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* 구 Edge/IE */
    }
    .nav-menu-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }
}