body { margin: 0; padding: 0; font-family: 'Malgun Gothic', sans-serif; overflow: hidden; }
.popup-wrapper { width: 100%; height: 100vh; display: flex; flex-direction: column; background: #fff; }

.popup-header { background: #002855; color: #fff; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; }
.popup-header .logo { font-size: 15px; font-weight: bold; }
.popup-header .sub-title { font-size: 11px; opacity: 0.7; }

.popup-body { flex: 1; padding: 15px; overflow-y: auto; }
.notice-container { width: 100%; }

.notice-detail-table { width: 100%; border-collapse: collapse; border-top: 2px solid #002855; table-layout: fixed; }
.notice-detail-table th { background: #f8f9fa; color: #333; padding: 10px; border-bottom: 1px solid #ddd; border-right: 1px solid #eee; font-size: 13px; text-align: left; }
.notice-detail-table td { padding: 10px 12px; border-bottom: 1px solid #ddd; font-size: 13px; color: #555; word-break: break-all; }

.emphasis-cell { font-weight: bold; color: #002855 !important; }

.content-cell { padding: 20px 10px !important; vertical-align: top; }
.notice-content-wrapper { min-height: 250px; text-align: left; }

.img-area { text-align: center; margin-bottom: 15px; }
.img-area img { max-width: 150%; height: auto; border: 1px solid #eee; }
.text-area { font-size: 14px; line-height: 1.7; color: #333; }

.popup-footer { background: #f4f4f4; padding: 10px 15px; display: flex; justify-content: space-between; border-top: 1px solid #ddd; }
.close-options { font-size: 13px; display: flex; align-items: center; gap: 5px; color: #666; cursor: pointer; }
.close-options input { cursor: pointer; }
.btn-close { background: #444; color: #fff; border: none; padding: 7px 20px; cursor: pointer; font-size: 12px; transition: background 0.2s; }
.btn-close:hover { background: #222; }

.notice-layer-wrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.notice-layer-dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.notice-layer-modal {
    width: 100%;
    max-width: 520px;
    height: 90vh;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.notice-layer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

body.notice-layer-open {
    overflow: hidden;
}

@media (max-width: 1480px) {
    .notice-layer-dim {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        box-sizing: border-box;
    }

    .notice-layer-modal {
        position: relative;
        width: 100%;
        max-width: 760px;
        max-height: 86vh;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }

    .notice-slider-window {
        width: 100%;
        overflow: hidden;
    }

    .notice-slider-track {
        display: flex;
        width: 100%;
        transition: transform 0.3s ease;
    }

    .notice-slide {
        flex: 0 0 100%;
        width: 100%;
    }

    .notice-layer-frame {
        width: 100%;
        height: 78vh;
        max-height: 78vh;
        border: 0;
        display: block;
        background: #fff;
    }

    .notice-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        font-size: 26px;
        line-height: 42px;
        text-align: center;
        cursor: pointer;
    }

    .notice-nav.prev {
        left: 12px;
    }

    .notice-nav.next {
        right: 12px;
    }

    .notice-slider-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 12px 0 14px;
        background: #fff;
    }

    .notice-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 0;
        background: #c8c8c8;
        cursor: pointer;
    }

    .notice-dot.active {
        background: #002855;
    }

    .notice-layer-close {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 3;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: rgba(0,0,0,0.45);
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }
}

@media (max-width: 768px) {
    .notice-layer-dim {
        align-items: flex-start;
        justify-content: center;
        padding: 20px 12px;
    }

    .notice-layer-modal {
        max-width: 380px;
        max-height: 68vh;
        margin-top: 20px;
    }

    .notice-layer-frame {
        height: 68vh;
        max-height: 68vh;
    }

    .notice-nav {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
    }

    .notice-nav.prev {
        left: 8px;
    }

    .notice-nav.next {
        right: 8px;
    }

    .notice-slider-dots {
        gap: 8px;
        padding: 10px 0 12px;
    }

    .notice-dot {
        width: 8px;
        height: 8px;
    }

    .notice-layer-close {
        width: 32px;
        height: 32px;
        font-size: 22px;
    }
}