/**
 * Joyn Broadcast Player Mobile Styles
 * 모바일 최적화 스타일
 * 
 * @package Joyn_Broadcast
 * @since 1.0.0
 */

/* ============================================
   모바일 전용 스타일 (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    
    /* 컨테이너 */
    .joyn-playlist-container {
        margin: 0;
        border-radius: 0;
    }
    
    /* 플레이어 박스 - 전체 너비 */
    .joyn-player-box {
        width: 100%;
    }
    
    /* 플레이어 래퍼 - 16:9 유지 */
    .joyn-player-wrapper {
        padding-bottom: 56.25%;
    }
    
    /* 비디오 정보 - 패딩 축소 */
    .joyn-current-video-info {
        padding: 12px 16px;
    }
    
    .joyn-video-title {
        font-size: 16px;
        margin-bottom: 6px;
        color: #ffffff !important;
    }
    
    /* 모바일에서 제목 흰색 강제 적용 */
    .joyn-video-title,
    .joyn-video-title *,
    .joyn-video-title span,
    .joyn-current-video-info .joyn-video-title {
        color: #ffffff !important;
    }
    
    .joyn-video-description {
        font-size: 13px;
        line-height: 1.5;
    }
    
    /* 컨트롤 - 간격 축소 */
    .joyn-player-controls {
        gap: 4px;
        padding: 10px 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .joyn-control-btn {
        width: 40px;
        height: 40px;
    }
    
    .joyn-control-btn .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
    
    /* 큰 재생 버튼 */
    .joyn-big-play-button svg {
        width: 48px;
        height: 48px;
    }
    
    .joyn-play-text {
        font-size: 14px;
        margin-top: 12px;
    }
    
    .joyn-play-hint {
        font-size: 12px;
    }
    
    /* 플레이리스트 사이드바 */
    .joyn-playlist-sidebar {
        max-height: 300px;
    }
    
    .joyn-playlist-header {
        padding: 12px 16px;
    }
    
    .joyn-playlist-header h4 {
        font-size: 15px;
    }
    
    /* 플레이리스트 아이템 - 축소 */
    .joyn-playlist-item {
        padding: 10px 16px;
        gap: 10px;
    }
    
    .joyn-item-thumbnail {
        width: 90px;
        height: 51px;
    }
    
    .joyn-item-title {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }
    
    .joyn-duration {
        font-size: 11px;
        padding: 1px 4px;
    }
    
    .joyn-shorts-badge {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .joyn-play-item-btn {
        width: 28px;
        height: 28px;
    }
    
    .joyn-now-playing {
        font-size: 11px;
        right: 16px;
    }
    
    /* 플레이리스트 푸터 */
    .joyn-playlist-footer {
        padding: 10px 16px;
    }
    
    .joyn-playlist-info {
        font-size: 11px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ============================================
   소형 모바일 (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    
    /* 비디오 정보 */
    .joyn-current-video-info {
        padding: 10px 12px;
    }
    
    .joyn-video-title {
        font-size: 14px;
        color: #ffffff !important;
    }
    
    /* 소형 모바일에서도 제목 흰색 강제 적용 */
    .joyn-video-title,
    .joyn-video-title *,
    .joyn-video-title span {
        color: #ffffff !important;
    }
    
    .joyn-video-description {
        font-size: 12px;
    }
    
    /* 컨트롤 */
    .joyn-player-controls {
        padding: 8px 8px;
        gap: 2px;
    }
    
    .joyn-control-btn {
        width: 36px;
        height: 36px;
    }
    
    .joyn-control-btn .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
    
    /* 플레이리스트 */
    .joyn-playlist-item {
        padding: 8px 12px;
        gap: 8px;
    }
    
    .joyn-item-thumbnail {
        width: 80px;
        height: 45px;
    }
    
    .joyn-item-title {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .joyn-play-item-btn {
        width: 24px;
        height: 24px;
    }
    
    .joyn-play-item-btn .dashicons {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   가로 모드 (landscape)
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    
    /* 플레이어를 전체 높이로 */
    .joyn-player-box {
        height: 100vh;
    }
    
    .joyn-player-wrapper {
        padding-bottom: 0;
        height: 100%;
    }
    
    /* 플레이리스트 숨김 */
    .joyn-playlist-sidebar {
        display: none;
    }
    
    /* 비디오 정보 숨김 */
    .joyn-current-video-info {
        display: none;
    }
    
    /* 컨트롤을 오버레이로 */
    .joyn-controls-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        border: none;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .joyn-playlist-container:hover .joyn-controls-box {
        opacity: 1;
    }
    
    .joyn-player-controls {
        padding: 20px;
    }
}

/* ============================================
   터치 최적화
   ============================================ */

@media (hover: none) and (pointer: coarse) {
    
    /* 터치 타겟 크기 증가 */
    .joyn-control-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .joyn-play-item-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    .joyn-playlist-item {
        min-height: 60px;
    }
    
    /* 호버 효과 제거 */
    .joyn-control-btn:hover {
        background: transparent;
    }
    
    .joyn-playlist-item:hover {
        background: var(--joyn-bg-secondary);
    }
    
    /* 활성 상태 */
    .joyn-control-btn:active {
        background: var(--joyn-bg-primary);
        transform: scale(0.95);
    }
    
    .joyn-playlist-item:active {
        background: var(--joyn-bg-primary);
    }
}

/* ============================================
   모바일 브라우저 바 숨김
   ============================================ */

@media (max-width: 768px) {
    
    /* iOS Safari 주소창 숨김 */
    .joyn-player-wrapper {
        -webkit-overflow-scrolling: touch;
    }
    
    /* 전체 화면 모드 지원 */
    .joyn-player-wrapper:-webkit-full-screen {
        width: 100%;
        height: 100%;
    }
    
    .joyn-player-wrapper:-moz-full-screen {
        width: 100%;
        height: 100%;
    }
    
    .joyn-player-wrapper:fullscreen {
        width: 100%;
        height: 100%;
    }
}

/* ============================================
   세로 스크롤 최적화
   ============================================ */

@media (max-width: 768px) {
    
    .joyn-playlist-items {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    /* 스크롤바 숨김 (모바일) */
    .joyn-playlist-items::-webkit-scrollbar {
        width: 4px;
    }
    
    .joyn-playlist-items::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .joyn-playlist-items::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }
}

/* ============================================
   모바일 성능 최적화
   ============================================ */

@media (max-width: 768px) {
    
    /* GPU 가속 */
    .joyn-playlist-container,
    .joyn-player-wrapper,
    .joyn-playlist-item {
        will-change: transform;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* 애니메이션 축소 */
    .joyn-control-btn,
    .joyn-playlist-item {
        transition: none;
    }
    
    /* 이미지 최적화 */
    .joyn-item-thumbnail img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ============================================
   다크 모드 모바일 조정
   ============================================ */

@media (max-width: 768px) and (prefers-color-scheme: dark) {
    
    .joyn-playlist-container[data-theme="auto"] {
        --joyn-bg-primary: #000000;
        --joyn-bg-secondary: #1a1a1a;
    }
    
    /* 모바일에서 더 어두운 배경 */
    .joyn-player-box {
        background: #000;
    }
}

/* ============================================
   노치(Notch) 대응
   ============================================ */

@media (max-width: 768px) {
    
    @supports (padding: env(safe-area-inset-top)) {
        .joyn-player-box {
            padding-top: env(safe-area-inset-top);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
        
        .joyn-controls-box {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ============================================
   작은 화면 경고
   ============================================ */

@media (max-width: 320px) {
    
    .joyn-playlist-container::before {
        content: "화면이 너무 작습니다. 더 나은 경험을 위해 기기를 회전하세요.";
        display: block;
        padding: 12px;
        background: #ff9800;
        color: #000;
        font-size: 12px;
        text-align: center;
        font-weight: 500;
    }
    
    @media (orientation: landscape) {
        .joyn-playlist-container::before {
            display: none;
        }
    }
}

/* ============================================
   로딩 스피너 모바일 조정
   ============================================ */

@media (max-width: 768px) {
    
    .joyn-spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
}

/* ============================================
   접근성 - 모바일
   ============================================ */

@media (max-width: 768px) {
    
    /* 포커스 표시 간소화 */
    .joyn-control-btn:focus-visible,
    .joyn-play-item-btn:focus-visible {
        outline-width: 2px;
        outline-offset: 1px;
    }
    
    /* 큰 텍스트 모드 지원 */
    @media (prefers-reduced-motion: reduce) {
        .joyn-control-btn,
        .joyn-playlist-item,
        .joyn-spinner {
            animation: none;
            transition: none;
        }
    }
}

/* ============================================
   iOS 특정 스타일
   ============================================ */

@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        
        /* iOS Safari 바운스 제거 */
        .joyn-playlist-items {
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }
        
        /* iOS 탭 하이라이트 제거 */
        .joyn-control-btn,
        .joyn-playlist-item,
        .joyn-play-item-btn {
            -webkit-tap-highlight-color: transparent;
        }
    }
}

/* ============================================
   Android 특정 스타일
   ============================================ */

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* Android 고해상도 아이콘 */
    .joyn-control-btn .dashicons {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}