/**
 * 구형 브라우저(iOS Safari 12+ / Chrome 70+) 호환 폴백 + Alpine 실패 폴백
 * tailwind.css 뒤에 로드됨 (inc/enqueue-scripts.php)
 *
 * 주의: 이 파일은 빌드 대상이 아님 — 구형 문법만 사용할 것
 * (oklch, color-mix, @property, @layer, CSS nesting, 미디어쿼리 range 문법 금지)
 */

/* ==========================================================================
   1. inset 축약형 폴백 — Chrome 87 미만 / Safari 14.5 미만
   Tailwind 산출물의 `.inset-0 { inset: 0 }`을 구형이 무시하므로 롱핸드 보강.
   최신 브라우저에서는 동일 값이라 무해.
   ========================================================================== */
.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ==========================================================================
   2. aspect-ratio 폴백 — Chrome 88 미만 / Safari 15 미만
   미지원 시 컨테이너 높이가 0이 되어 썸네일이 사라지므로 padding-top 해킹.
   자식은 img/video만 absolute 처리 — 동적으로 추가되는 오버레이
   (#mobileSeekControls, 광고 컨테이너 등)는 자체 포지셔닝을 유지해야 함.
   ========================================================================== */
@supports not (aspect-ratio: 16 / 9) {
    .aspect-video,
    .aspect-\[3\/4\] {
        position: relative;
        height: 0;
        overflow: hidden;
    }
    .aspect-video {
        padding-top: 56.25%;
    }
    .aspect-\[3\/4\] {
        padding-top: 133.333%;
    }
    /* 비디오 카드는 .aspect-video > a > img 구조(content-video-card.php),
       갤러리 카드는 .aspect-[3/4] > img 직계 구조(content-gallery-card.php) —
       두 구조 모두 커버해야 구형 브라우저에서 썸네일이 사라지지 않음 */
    .aspect-video > img,
    .aspect-video > video,
    .aspect-video > a > img,
    .aspect-video > a > video,
    .aspect-\[3\/4\] > img,
    .aspect-\[3\/4\] > video,
    .aspect-\[3\/4\] > a > img,
    .aspect-\[3\/4\] > a > video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* 플레이어 래퍼: padding-top 해킹에서는 인라인 max-height:80vh가 무력화됨
       (max-height는 padding에 적용되지 않음) → 넓은 뷰포트에서 화면을 넘지 않도록
       고정 높이로 전환 (내부 video는 위 절대배치 규칙이 채움) */
    @media (min-width: 1280px) {
        .video-player-wrapper.aspect-video {
            height: 80vh;
            padding-top: 0;
        }
    }
}

/* ==========================================================================
   3. dvh 업그레이드 — vh 폴백은 마크업의 Tailwind 클래스가 담당,
   지원 브라우저에서만 동적 뷰포트 단위로 교체 (모바일 주소창 접힘 대응)
   ========================================================================== */
/* 공지 모달 패널: safe-area(홈 인디케이터)만큼 높이를 추가로 줄여
   바깥 컨테이너의 safe-bottom 패딩과 합산 시 상단이 뷰포트 밖으로 밀리지 않게 함
   (env() 미지원 브라우저는 이 선언을 무시하고 마크업의 calc(100vh-2rem) 유지) */
.notice-modal-panel {
    max-height: calc(100vh - 2rem - env(safe-area-inset-bottom, 0px));
}

@supports (height: 1dvh) {
    .mobile-menu-scroll {
        max-height: 60dvh;
    }
    .notice-modal-panel {
        max-height: calc(100dvh - 2rem - env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   4. 노치/세이프에어리어 — viewport-fit=cover와 세트 (header.php)
   env() 미지원 브라우저를 위해 폴백 선언 선행
   ========================================================================== */
.safe-bottom {
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   5. Alpine.js 실패 폴백 — html.no-alpine 은 header.php의 감지 스크립트가 부여
   (스크립트 onerror 즉시 + window load 시 window.Alpine 부재 확인)
   x-cloak 해제는 input.css의 `html:not(.no-alpine) [x-cloak]` 스코프가 담당.
   ========================================================================== */

/* 공지 모달: 닫기 버튼이 전부 Alpine @click 의존이라 no-alpine에서 노출되면
   닫을 수 없는 모달이 됨 → 무조건 숨김 */
.no-alpine #notice-modal {
    display: none !important;
}

/* 모바일 메뉴/퀵링크: 정적 펼침 (인라인 style="display:none" 제압)
   대상 요소가 lg:hidden(1024px+에서 숨김 — 태블릿은 햄버거 메뉴 사용)이므로
   해당 폭에서만 강제 노출 — 데스크톱에서 no-alpine일 때 이중 노출 방지 */
@media (max-width: 1023.98px) {
    .no-alpine .nav-fallback {
        display: block !important;
    }
}

/* 메뉴 토글 버튼: Alpine 없이는 동작하지 않으므로 숨김 */
.no-alpine .nav-toggle {
    display: none !important;
}

/* PC/태블릿 드롭다운: CSS 호버 + 키보드 포커스 폴백 */
.no-alpine .has-dropdown:hover > .dropdown-panel,
.no-alpine .has-dropdown:focus-within > .dropdown-panel {
    display: block !important;
}

/* 로고 글리치 오버레이 레이어: Alpine 없으면 텍스트가 겹쳐 보이므로 숨김 */
.no-alpine .glitch-layer {
    display: none !important;
}