@charset "UTF-8";
/* 메인 팝업 레이어 (사용자 메인 + 관리자 미리보기 공통) */

.mpop-wrap { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 10000; }

.mpop {
    position: absolute;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 20px);
    /* 높이 제한 없음 : 높이 미지정이면 내용 높이 그대로(페이지 스크롤로 확인), 높이를 지정한 경우에만 본문 내부 스크롤 */
    background: #fff;
    border: 1px solid #555;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    font-size: 15px;
    line-height: 1.5;
    color: #222;
    text-align: start;      /* 관리자 body 의 text-align:center 등 페이지 정렬을 상속받지 않도록 */
    box-sizing: border-box;
}
.mpop.is-front { z-index: 1; }

/* 제목 바 (드래그 손잡이) : 높이를 줄이고 가운데에 손잡이 표시 */
.mpop-head {
    position: relative;
    flex: 0 0 auto;
    height: 30px;
    background: #24435f;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.mpop-head::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 4px;
    margin: -2px 0 0 -18px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
}

/* 제목 글자 : 화면에는 숨기고 스크린리더(role=dialog 이름)용으로만 사용 */
.mpop-ttl {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/* 본문 : 이미지는 팝업 너비에 꽉 차게, 글자 문단만 좌우 여백 */
.mpop-body { flex: 1 1 auto; overflow: auto; padding: 0; word-break: keep-all; overflow-wrap: break-word; }
.mpop-body img { max-width: 100%; height: auto; vertical-align: top; }
.mpop-body p { margin: 0; padding: 0 14px; }
/* 이미지 문단은 여백 없이 : 이미지만 있는 경우 + 링크로 감싼 이미지(<a><img></a>)인 경우 */
.mpop-body p:has(> img),
.mpop-body p:has(> a > img) { padding: 0; }
/* 에디터가 이미지 뒤에 자동으로 넣는 <br> 때문에 이미지 아래 빈 줄이 생기지 않도록 */
.mpop-body p > img + br:last-child,
.mpop-body p > a + br:last-child { display: none; }

/* 링크 버튼 */
.mpop-link { flex: 0 0 auto; padding: 12px 14px; text-align: center; }
.mpop-link a {
    display: inline-block;
    padding: 8px 20px;
    background: #24435f;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}
.mpop-link a:hover, .mpop-link a:focus { background: #16304a; text-decoration: underline; }

/* 하단 (오늘 하루 보지 않기 / 닫기) */
.mpop-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #333;
}
.mpop-foot button {
    padding: 4px 8px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.mpop-foot button:hover, .mpop-foot button:focus { text-decoration: underline; }
.mpop-foot button:focus, .mpop-link a:focus { outline: 2px solid #ffd54f; outline-offset: 2px; }
.mpop-foot .mpop-close { margin-left: auto; }

/* 모바일 : 드래그 없이 상단에 가로 꽉 차게 쌓기 */
@media (max-width: 768px) {
    .mpop-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 85vh;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.4);
    }
    .mpop {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none;
        max-height: none;
        margin: 10px;
    }
    .mpop-head { cursor: default; }
}