@charset "utf-8";

/* [삭제됨] .common-popup-dim 스타일은 더 이상 필요 없습니다. */

/* 팝업 컨텐츠 박스 */
.common-popup-wrap {
    position: absolute; /* fixed에서 absolute로 변경하여 스크롤 따라가게 하거나, fixed 유지 가능 */
    position: fixed;    /* 스크롤 해도 화면에 고정 */
    z-index: 99999;
    background: #fff;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); /* 그림자를 조금 더 은은하게 */
    border: 1px solid #ddd; /* 경계선 추가 */
    border-radius: 12px;
    overflow: hidden;
    /* 중앙 정렬 속성 제거 (JS에서 좌표 제어) */
}

/* 팝업 이미지 영역 */
.common-popup-body {
    position: relative;
    width: 100%;
    line-height: 0;
}

.common-popup-body img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 팝업 하단 버튼 영역 */
.common-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #252525;
    padding: 8px 12px;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
}

.popup-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    color: #ddd;
}

.popup-checkbox input[type="checkbox"] {
    accent-color: #25468b;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.popup-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .common-popup-wrap {
        /* 모바일에서는 하단이나 중앙에 뜨게 하려면 여기서 조정 */
        width: 90%;
        left: 5% !important; /* 강제 중앙 정렬 */
        top: 20% !important;
    }
}
/* 팝업 컨텐츠 박스 */
.common-popup-wrap {
    position: fixed;
    z-index: 100;
    background: #fff;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    
    /* [중요] 팝업 자체의 중심점을 잡기 위한 코드 추가 */
    transform: translateX(-50%); 
}

/* 모바일에서는 팝업 숨김 */
@media (max-width: 768px) {
    .common-popup-wrap {
        display: none !important;
    }
}