/* Modern Notice Popup - Frontend Styles (Gomi Popup Style Compatible) */

/* Overlay - 기존 Gomi Popup 스타일 유지 */
.mnp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);  /* 기존과 동일 */
    z-index: 9999;  /* 기존과 동일 */
    display: block;
}

/* Popup Container - 기존 스타일과 유사하게 */
.mnp-popup {
    position: fixed;
    width: 90%;  /* 기존과 동일 */
    max-width: 500px;
    left: 5%;  /* 기존과 동일 */
    top: 5%;  /* 기존과 동일 */
    background: #fff;
    z-index: 10000;  /* 기존과 동일 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* Close Button (X) - 기존 스타일 유지 */
.mnp-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;  /* 기존과 동일 */
    transition: background 0.2s;
    padding: 0;
}

.mnp-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.mnp-close:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Content */
.mnp-content {
    position: relative;
}

.mnp-image-link {
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 0;
}

.mnp-image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;  /* 기존과 동일 */
}

/* Footer - 기존 Gomi Popup 스타일 유지 */
.mnp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 9px;  /* 기존과 동일 */
    background-color: #333;  /* 기존과 동일 */
    color: #ddd;  /* 기존과 동일 */
    font-size: 11px;  /* 기존과 동일 */
}

.mnp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #9d9d9c;  /* 기존과 동일 */
    margin: 0;
    user-select: none;
    font-size: 11px;  /* 기존과 동일 */
}

.mnp-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    vertical-align: middle;  /* 기존과 동일 */
    margin: 0;
}

/* 닫기 버튼 - 기존 스타일 유지 */
.mnp-close-btn {
    padding: 4px 12px;
    background: transparent;
    color: #fff;  /* 기존과 유사 */
    border: none;
    font-size: 11px;  /* 기존과 동일 */
    cursor: pointer;
    transition: opacity 0.2s;
}

.mnp-close-btn:hover {
    opacity: 0.8;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mnp-popup {
        width: 90%;
        left: 5%;
        top: 5%;
        transform: none;
    }
    
    .mnp-footer {
        flex-direction: row;  /* 모바일에서도 한 줄 유지 */
        font-size: 10px;
    }
    
    .mnp-checkbox-label {
        font-size: 10px;
    }
    
    .mnp-checkbox {
        width: 12px;
        height: 12px;
    }
    
    .mnp-close-btn {
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Accessibility */
.mnp-overlay:focus {
    outline: none;
}

.mnp-checkbox:focus {
    outline: 1px solid #9d9d9c;
    outline-offset: 2px;
}

/* Print - Hide popup */
@media print {
    .mnp-overlay {
        display: none !important;
    }
}

/* Prevent body scroll when popup is open */
body.mnp-popup-active {
    overflow: hidden;
}

/* 부드러운 페이드 효과 (선택사항 - 기존에는 없었음) */
.mnp-overlay {
    animation: mnpFadeIn 0.2s ease-out;
}

@keyframes mnpFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation for closing */
.mnp-overlay.mnp-closing {
    animation: mnpFadeOut 0.15s ease-out forwards;
}

@keyframes mnpFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}