/* ========================================
   🎯 모바일 전체 화면 최적화 (최신 CSS 기술)
   TikTok/Reels 완전한 전체 화면 스타일
   ======================================== */

@media (max-width: 768px) {
    /* 🎯 Shorts 활성화 시 헤더와 탭바 숨기기 */
    body:has(#shortsTab.active) .header {
        display: none !important;
    }
    
    body:has(#shortsTab.active) .tab-bar {
        display: none !important;
    }
    
    /* 🎯 Shorts 컨테이너 완전한 전체 화면 */
    #shortsTab.active .shorts-container {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
    }
    
    /* 🎯 각 Shorts 아이템 완전한 전체 화면 */
    #shortsTab.active .short-item {
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }
    
    /* 🎯 Player wrapper 전체 화면 */
    #shortsTab.active .short-player-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    /* 🎯 YouTube iframe 전체 화면 */
    #shortsTab.active .short-youtube-player {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
    }
    
    /* 🎯 Preview 이미지 전체 화면 */
    #shortsTab.active .short-preview {
        width: 100vw !important;
        height: 100vh !important;
    }
    
    #shortsTab.active .short-preview-img {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: contain !important;
    }
    
    /* 🎯 뒤로가기 버튼 (Shorts에서만 표시) */
    body:has(#shortsTab.active) .shorts-back-btn {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        z-index: 10000;
        cursor: pointer;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    /* 🎯 스크롤 인디케이터 */
    body:has(#shortsTab.active) .shorts-scroll-indicator {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
        z-index: 10000;
    }
    
    .shorts-scroll-indicator-dot {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        transition: all 0.3s;
    }
    
    .shorts-scroll-indicator-dot.active {
        width: 20px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.9);
    }
}

/* ========================================
   🎯 CSS :has() 지원 안 되는 브라우저 대체
   (Safari 15.4 미만)
   ======================================== */

@media (max-width: 768px) {
    /* Shorts 활성화 클래스로 제어 */
    body.shorts-fullscreen .header {
        display: none !important;
    }
    
    body.shorts-fullscreen .tab-bar {
        display: none !important;
    }
    
    body.shorts-fullscreen .shorts-container {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
    }
}