/* 팝업 오버레이 (배경) 스타일 */
.modal-overlay {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검은색 배경 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    overflow-y: auto; /* 팝업 내용이 길 경우 스크롤 허용 */
}

/* 팝업 내용 컨테이너 스타일 */
.modal-content {
    background-color: #fff;
    margin: 10% auto; /* 상하 여백을 주어 중앙 정렬 */
    padding: 20px;
    border-radius: 8px;
    width: 90%; /* 기본 너비 */
    max-width: 800px; /* 최대 너비 */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 모바일 반응형 처리 (화면 너비가 600px 이하일 때) */
@media (max-width: 600px) {
    .modal-content {
        width: 90%;
        margin: 5% auto; /* 모바일에서는 상하 여백을 줄임 */
    }
}

/* 팝업 헤더 및 버튼 스타일 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.modal-header .close-btn {
    font-size: 24px;
    line-height: 1; /* 높이 맞춤 */
    padding: 0 5px; /* X 모양에 맞게 여백 조정 */
    background: none; /* X 모양 버튼은 배경색 없이 투명하게 유지하고 싶다면 */
    color: #000;      /* X 모양은 글자색을 검정으로 */
    border: none;
}

.close-btn {
    background-color: #000; /* 배경색을 검정색으로 설정 */
    color: #fff;            /* 글자색을 흰색으로 설정하여 잘 보이게 함 */
    border: 1px solid #000; /* 테두리도 검정색으로 (선택 사항) */
    padding: 5px 10px;      /* 버튼 내부 여백 추가 */
    border-radius: 4px;     /* 모서리를 둥글게 (선택 사항) */
    font-size: 16px;        /* 폰트 크기 조정 */
    cursor: pointer;
}

.close-btn:hover {
    background-color: #333; /* 마우스 오버 시 약간 어둡게 또는 밝게 */
    color: #fff;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* 팝업이 활성화되었을 때만 보이도록 하는 클래스 (JS에서 제어) */
.modal-overlay.is-active {
    display: block;
}

/* --- 팝업 본문 Flexbox 설정 --- */
.modal-body .media-container {
    display: flex;         /* Flexbox 활성화 */
    gap: 20px;             /* 요소 사이의 간격 */
    align-items: flex-start; /* 세로 정렬 시작점 맞추기 */
}

.modal-body .media-item {
    flex-grow: 1;         /* 공간을 동일하게 나눠 가짐 */
    flex-basis: 0;        /* flex-grow와 함께 사용하면 균등 분할 */
    min-width: 0;         /* 컨텐츠가 넘치는 것을 방지 */
}

/* 이미지 반응형 (기존 이미지 스타일) */
.modal-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* (선택 사항) */
}


/* --- 반응형 비디오 컨테이너 (유튜브 임베드 필수) --- */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 유지 (높이/너비 * 100) */
    height: 0;
    overflow: hidden;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 이미지 및 비디오 태그 자체의 반응형 */
.modal-body img, 
.modal-body video { /* <video> 태그도 100% 너비를 갖도록 추가 */
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}


/* --- 반응형 비디오 컨테이너 (HTML5 <video>에 맞게 수정) --- */
.video-responsive {
    /* 16:9 비율 유지를 위해 height: 0 와 padding-bottom 사용 (선택 사항: video-col에 height: 100%를 주거나 padding-bottom을 사용) */
    /* 다만, <video> 태그는 자체적으로 비율을 유지하므로, 아래 코드는 필수가 아닐 수 있습니다.
       여기서는 깔끔한 출력을 위해 <video> 자체에 너비만 100%를 지정하는 것이 더 간단합니다. */
    width: 100%; 
    /*height: auto; */
    /* <video> 태그가 이 설정을 따릅니다. */
}

/* 모바일 반응형 처리 (변경 없음) */
@media (max-width: 768px) {
    .modal-body .media-container {
        flex-direction: column;
        gap: 15px;
    }
}