/* =========================================================
   DONGNAM PACK HOME POPUP V18
   - 업로드 이미지 비율 자동 맞춤
   - 팝업 내부 스크롤 제거
   - 제목/설명 텍스트 영역 제거
   ========================================================= */

.dnp-popup-layer{
    position:fixed;
    z-index:99990;
    top:96px;
    left:24px;
    right:24px;
    height:0;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease,visibility .18s ease;
}

.dnp-popup-layer.show{
    opacity:1;
    visibility:visible;
}

.dnp-popup-stack{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:18px;
    max-width:calc(100vw - 48px);
    pointer-events:none;
}

.dnp-popup{
    --popup-width:520px;
    --popup-image-height:auto;
    position:relative;
    flex:0 0 auto;
    width:min(var(--popup-width),calc(100vw - 48px));
    max-width:calc(100vw - 48px);
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid rgba(10,25,40,.16);
    box-shadow:
        0 18px 48px rgba(10,25,40,.18),
        0 3px 12px rgba(10,25,40,.08);
    overflow:hidden;
    pointer-events:auto;
    animation:dnpPopupEnter .22s ease both;
}

@keyframes dnpPopupEnter{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}

/* 이미지 영역은 절대 스크롤하지 않음 */
.dnp-popup-media{
    display:block;
    flex:0 0 auto;
    width:100%;
    overflow:hidden;
    background:#fff;
    line-height:0;
}

.dnp-popup-media img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    background:#fff;
}

/* V18에서는 관리자 제목/설명/버튼 텍스트 영역을 화면에 출력하지 않음 */
.dnp-popup-copy{
    display:none!important;
}

.dnp-popup-footer{
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
    padding:0 8px 0 13px;
    border-top:1px solid rgba(255,255,255,.08);
    background:#171e24;
    color:#fff;
}

.dnp-popup-footer label{
    display:flex;
    align-items:center;
    gap:7px;
    color:#d6dce0;
    font-size:11px;
    cursor:pointer;
    user-select:none;
}

.dnp-popup-footer input{
    width:13px;
    height:13px;
    margin:0;
}

.dnp-popup-close{
    min-width:48px;
    min-height:36px;
    padding:0 8px;
    border:0;
    background:none;
    color:#fff;
    font:inherit;
    font-size:11px;
    cursor:pointer;
}

.dnp-popup-close:hover{
    color:#9fc0ff;
}

.dnp-popup-x{
    position:absolute;
    z-index:5;
    top:8px;
    right:8px;
    width:31px;
    height:31px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.38);
    border-radius:50%;
    background:rgba(18,26,33,.72);
    color:#fff;
    font-size:19px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.dnp-popup-x:hover{
    background:#111820;
}

/* 여러 팝업은 가로로 배치하되 팝업 자체 내부에는 스크롤 없음 */
@media(max-width:1260px){
    .dnp-popup-stack{
        overflow-x:auto;
        padding-bottom:8px;
        scrollbar-width:thin;
    }
}

@media(max-width:760px){
    .dnp-popup-layer{
        top:80px;
        left:12px;
        right:12px;
    }

    .dnp-popup-stack{
        max-width:100%;
        justify-content:center;
        overflow:visible;
    }

    .dnp-popup{
        width:min(var(--popup-width),calc(100vw - 24px));
        max-width:calc(100vw - 24px);
    }
}

@media(max-width:520px){
    .dnp-popup-layer{
        top:72px;
        left:8px;
        right:8px;
    }

    .dnp-popup-stack{
        display:block;
    }

    .dnp-popup{
        width:100%;
        max-width:100%;
        margin:0 auto 10px;
    }

    .dnp-popup-footer{
        min-height:44px;
        flex-basis:44px;
    }
}