/**
 * 모바일 화면 전용 풀스크린 비디오 최적화 CSS
 * 모든 모바일 환경에서 일관된 풀스크린 비디오 표시를 보장
 */

/* 모바일 화면 기본 설정 */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    
    /* 히어로 섹션 전체 높이 보장 */
    .hero {
        height: 100vh !important;
        min-height: -webkit-fill-available !important; /* iOS Safari 높이 문제 해결 */
        padding: 0 !important;
    }
    
    /* 비디오 요소 풀스크린 설정 */
    .hero-video {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: -webkit-fill-available !important;
        object-fit: cover !important;
        object-position: center !important;
        z-index: -1 !important;
        transform: translateZ(0) !important; /* 모바일 하드웨어 가속 */
    }
    
    /* 모바일 헤더 최적화 */
    header {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* 모바일에서 콘텐츠 위치 조정 */
    .hero-content {
        padding-top: 100px !important; /* 헤더 높이 고려 */
        padding-bottom: 50px !important;
    }
    
    /* 캐릭터 이미지 크기 조정 */
    .hero-characters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    .hero-character {
        max-height: 70px !important;
    }
    
    /* 버튼 스타일 최적화 */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .cta-buttons .btn {
        margin: 5px 0;
        width: 80%;
        max-width: 250px;
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* 작은 모바일 화면 최적화 (iPhone SE 등) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 3rem !important;
    }
    
    .hero h2 {
        font-size: 1.3rem !important;
    }
    
    .hero-character {
        max-height: 60px !important;
    }
}

/* iOS Safari 전용 수정사항 */
@supports (-webkit-touch-callout: none) {
    .hero {
        height: -webkit-fill-available !important;
    }
    
    .hero-video {
        height: -webkit-fill-available !important;
    }
    
    /* iOS 노치 영역 고려 */
    @media (max-width: 844px) and (orientation: landscape) {
        .hero-content {
            padding-left: env(safe-area-inset-left) !important;
            padding-right: env(safe-area-inset-right) !important;
        }
    }
}

/* 가로 모드 최적화 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-content {
        padding-top: 70px !important;
    }
    
    .hero-characters {
        display: none; /* 가로 모드에서는 캐릭터 숨김 */
    }
    
    .hero h1 {
        font-size: 2.5rem !important;
        margin-bottom: 5px !important;
    }
    
    .hero h2 {
        font-size: 1.2rem !important;
        margin-bottom: 20px !important;
    }
    
    .cta-buttons {
        flex-direction: row !important;
        justify-content: center !important;
    }
    
    .cta-buttons .btn {
        font-size: 0.9rem !important;
        padding: 8px 15px !important;
        margin: 0 5px !important;
        width: auto !important;
    }
}