/* 팝업 공통 리셋 */
.mainLayerPopup {
    z-index: 9999;
}
.mainLayerPopup .popupBox { padding:0; }
.mainLayerPopup .popupBox .content { padding:0; }

/* 에디터가 감싼 <p> 기본 마진 제거 */
.mainLayerPopup .popupBox p {
    margin: 0;
}

/* 이미지가 인라인로우 박스 간격을 만들지 않도록 block 처리 */
.mainLayerPopup .popupBox img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 링크가 감싸는 경우도 박스로 꽉 차도록 */
.mainLayerPopup .popupBox a {
    display: block;
}

/* 높이 고정(pop.heightPx != 0)일 때 높이를 꽉 채우도록 */
.mainLayerPopup .popupBox.h-fixed,
.mainLayerPopup .popupBox.h-fixed .content,
.mainLayerPopup .popupBox.h-fixed p {
    height: 100%;
}

/* 고정 높이에서는 비율 유지하며 상하 여백 최소화 */
.mainLayerPopup .popupBox.h-fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 하단 컨트롤 바 */
.mainLayerPopup .popupClose{
    display:flex;
    justify-content:space-between; /* 양끝 정렬 */
    align-items:center;
    padding:9px 10px 7px;
    /*background:rgba(0,0,0,.9);*/
    background:#000;
    color:#fff;
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(4px);
}

/* 왼쪽 영역: 체크박스 + 라벨 */
.mainLayerPopup .popupClose .close-left{
    display:flex;
    align-items:center;
    gap:4px;
}

.mainLayerPopup .popupClose label{
    margin:0;
    font-size:13px;
    cursor:pointer;
    user-select:none;
}

/* 체크박스 라이트 커스텀 */
.mainLayerPopup .popupClose input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:16px; height:16px;
    border:1.5px solid #fff;
    border-radius:4px;
    background:transparent;
    display:inline-grid;
    place-content:center;
    outline: none;
}
.mainLayerPopup .popupClose input[type="checkbox"]:checked{
    background:#22c55e;
    border-color:#22c55e;
}
.mainLayerPopup .popupClose input[type="checkbox"]:checked::after{
    content:"";
    width:7px; height:11px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform: rotate(45deg);
    margin-top:-2px;
}

/* 오른쪽 X 버튼(원형) */
.mainLayerPopup .popupClose .btnClose{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    border-radius:50%;
    color:#fff;
    text-decoration:none;
    font-size:18px;
    line-height:1;
}
.mainLayerPopup .popupClose .btnClose:hover{
    background:rgba(255,255,255,.25);
    border-color:#fff;
}
.mainLayerPopup .popupClose .btnClose:focus-visible{
    outline:2px solid #4c9ffe;
    outline-offset:2px;
}

/* 모바일 약간 컴팩트 */
@media (max-width:480px){
    .mainLayerPopup .popupClose{ padding:9px 8px 5px; gap:8px; }
    .mainLayerPopup .popupClose label{ font-size:12px; }
    .mainLayerPopup .popupClose .btnClose{ width:26px; height:26px; font-size:16px; }
}

/* 기본(데스크톱): 서버가 준 폭을 사용 */
.mainLayerPopup{ width: var(--popup-w); }

/* 모바일: 화면 폭 기준으로 확장 */
@media (max-width:600px){
    .mainLayerPopup{
        left: 50% !important;
        right: auto !important;                 /* 기존 right 무효화 */
        transform: translateX(-50%) !important; /* 정확히 가로 중앙 */
        width: min( var(--popup-w, 9999px), calc(100vw - 24px) ) !important;
        box-sizing: border-box;
    }
    .mainLayerPopup .popupBox.h-fixed,
    .mainLayerPopup .popupBox.h-fixed .content{ height:auto !important; }
    .mainLayerPopup .popupBox.h-fixed img{
        width:100% !important; height:auto !important; object-fit:contain !important;
    }
}