/* 기본 팝업 스타일 */
.mainLayerPopup {
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    border: 1px solid #ddd;
}

.popupBox img {
    display: block;
    max-width: 100%; /* 너비가 최대 100%를 넘지 않게 설정 */
    height: auto;   /* 비율에 맞게 높이 자동 조절 */
    margin: 0 auto; /* 이미지가 컨테이너보다 작을 경우 중앙 정렬 */
}

.popupClose {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px;
    background-color: #333;
    color: white;
    font-size: 14px;
}

.popupClose label {
    cursor: pointer;
}

.popupClose .btnClose {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.popupClose .btnClose img {
    width: 20px;
    height: 20px;
}

/* 반응형 스타일 - 미디어 쿼리 */
/* Tablet */
@media (max-width: 1024px) {
    .mainLayerPopup {
        /* 예시: 태블릿에서는 너비를 80%로, 위치를 중앙으로 조정 */
        width: 80% !important; /* JS로 설정된 인라인 스타일을 덮어쓰기 위해 !important 사용 */
        left: 10% !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mainLayerPopup {
        /* 예시: 모바일에서는 너비를 95%로, 위치를 중앙으로 조정 */
        width: 95% !important;
        left: 2.5% !important;
        top: 100px !important;
    }
}