/* ========================================
   Holiday Film Section 스타일
   Holiday Film Section Styles for Sulwhasoo Holiday Festa
   ======================================== */

/* 공통 리셋 스타일 - 중복 제거를 위한 공통 클래스 */
.film-reset {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    display: block;
}

/* Holiday Film Section 기본 스타일 */
.holiday-film {
    padding: 0;
    background: transparent;
    position: relative;
    margin: 0;
    isolation: isolate;  /* 새로운 쌓임 맥락 생성으로 배경 영향 차단 */
}

/* Film 컨테이너 - 중복 제거 및 통합 */
.film-container {
    max-width: 480px; /* 프로젝트 규칙: 480px 고정 너비 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0;
    text-align: center;
    isolation: isolate;  /* 새로운 쌓임 맥락 생성으로 배경 영향 차단 */
}

/* Film 콘텐츠 컨테이너 - 중복 제거 및 통합 */
.film-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 상단 이미지 */
.film-top-image {
    width: 100%;
    height: auto; /* 이미지 원본 비율 유지 */
    margin: 0;
    padding: 0;
    display: block;
}

.film-top-image .film-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* 하단 섹션 컨테이너 */
.film-bottom-section {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* 하단 이미지 (공간 없이 연결) */
.film-bottom-image {
    width: 100%;
    height: auto; /* 이미지 원본 비율 유지 */
    margin: 0;
    padding: 0;
    display: block;
}

.film-bottom-image .film-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* YouTube 오버레이 (이미지 크기에 맞춤) - 계산식 수정 */
.film-youtube-overlay {
    position: absolute;
    top: 4%;                    /* 상단에서 4% 위치 */
    left: 50%;                  /* 중앙 정렬을 위한 좌측 50% */
    transform: translateX(-50%); /* 중앙 정렬 */
    width: auto;                /* 너비 자동 계산 */
    height: 95%;                /* 99% - 4% = 95% 높이 (상단 4%에서 99%까지) */
    aspect-ratio: 9/16;         /* 9:16 비율 */
    z-index: 2;
    background: #000;
    border-radius: 0;           /* 라운드 처리 제거 */
    overflow: hidden;
}

.film-youtube-overlay iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;           /* 라운드 처리 제거 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* iframe에 적합한 스타일로 수정 */
    display: block;
}

/* 모바일 최적화 - 중복 제거 및 최적화 */
@media (max-width: 480px) {
    .film-content {
        max-width: 100vw;
    }
    
    .film-youtube-overlay {
        top: 4%;            /* 상단에서 4% 위치 */
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 95%;        /* 99% - 4% = 95% 높이 (상단 4%에서 99%까지) */
        aspect-ratio: 9/16; /* 9:16 비율 */
        border-radius: 0;   /* 라운드 처리 제거 */
    }
}