/* 기본 팝업 스타일 (PC용 기본값) */
.npop-layer_popup {
    position: absolute; /* PC에서는 절대 위치 */
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 10px;
    z-index: 2000; /* 기본 z-index */
    box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
    display: none; /* 기본적으로 숨김 (JS에서 show()로 보여줌) */
}

.npop-popup-inner {
    /* 팝업 내부 콘텐츠를 위한 추가적인 스타일 */
    width: 100%; /* 부모에 맞춰 너비 설정 */
    height: 100%; /* 부모에 맞춰 높이 설정 */
    position: relative; /* 자식 요소의 위치 지정을 위해 */
}

.npop-popup-img {
    max-width: 100%; /* 이미지 크기 반응형 */
    height: auto;
    display: block; /* 이미지 하단 여백 제거 */
}

.npop-layer_bottom {
    display: flex; /* 하단 버튼 정렬 */
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 14px;
    padding: 5px 0; /* 버튼 영역 패딩 */
}

.npop-layer_bottom label {
    cursor: pointer;
    margin-left: 5px; /* 체크박스와 텍스트 사이 간격 */
    color: #555;
}

.npop-close a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    padding: 5px; /* 클릭 영역 확보 */
}

/* 개별 팝업 위치 (PC) */
/* popId에 따라 top, left, z-index를 개별적으로 지정합니다. */
/* 이 부분은 HTML 엘리먼트 ID를 사용하므로 npop- 접두사가 없습니다. */
#popup_20240701 { top: 50px; left: 50px; z-index: 2000; }
#popup_cerification { top: 100px; left: 450px; z-index: 2002; } /* 이 팝업이 가장 위에 와야 함 */
#popup_20240801 { top: 50px; left: 740px; z-index: 2001; }

/* --- 미디어 쿼리: 화면 너비 640px 이하일 때 (모바일 반응형) --- */
@media screen and (max-width: 640px) {
    .npop-layer_popup {
        position: fixed !important; /* 모바일에서는 화면 중앙에 고정 (JS inline style보다 우선) */
        top: 50% !important; /* 정확히 중앙 정렬 */
        left: 50% !important; /* 정확히 중앙 정렬 */
        transform: translate(-50%, -50%); /* 중앙 정렬 트랜스폼 */
        width: 90%; /* 화면 너비의 90% 사용 */
        max-width: 400px; /* 너무 커지지 않도록 최대 너비 설정 */
        border-radius: 8px; /* 모바일에서 더 부드러운 느낌 */
        box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* 그림자 강화 */
        z-index: 9999; /* 모바일에서 확실히 위에 보이도록 더 높은 z-index */
        /* 세로 배치 (서로 겹치지 않게) */
        /* 여러 팝업이 있을 경우, 이 미디어 쿼리 내에서 하나만 보이도록 JS 로직 수정이 필요합니다. */
        /* 기본적으로 모든 팝업을 숨기고 JS로 순차적으로 보이게 하거나, 스와이프 기능을 추가하는 것이 좋습니다. */
    }

    /* 팝업 닫기 버튼 스타일 조정 */
    .npop-layer_bottom {
        font-size: 12px;
        padding: 5px 0;
    }
}