@charset "UTF-8";
/* 메인 화면 팝업(site/fragments/popup-overlay.html) — 메인 화면(home.html)과 관리자 팝업 미리보기가 같이 불러 같은 모양으로 그린다.
   퍼블리싱에 메인 팝업 시안이 없어, 사이트 표준 팝업(.mod-modal)의 둥근 모서리·그림자·버튼 색을 따라 만든다. */
/* 팝업은 헤더 바로 아래 영역(.popup-layer)에 띄운다 — 헤더(z-index 100)보다 아래, 본문보다 위.
   위치가 자동이면 왼쪽부터 나란히 놓고, 수동이면 그 영역의 왼쪽 위를 기준으로 top·left(인라인 style)에 놓는다.
   크기가 수동이면 인라인 width·height가 하단 줄까지 포함한 전체 크기다. */
.popup-layer {
    position: absolute;
    top: calc(var(--size-header-total, 120px) + var(--spacing-24, 24px));
    left: var(--spacing-24, 24px);
    right: var(--spacing-24, 24px);
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-16, 16px);
    pointer-events: none;
}
.popup-ad {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    overflow: hidden;
    background-color: var(--background-default, #ffffff);
    border: 1px solid var(--border-default, #dce0ea);
    border-radius: var(--radius-fig-xl, 16px);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);
    pointer-events: auto;
}
.popup-ad--placed { position: absolute; }
.popup-ad .popup-ad__contents { flex: 1; min-height: 0; overflow: auto; }

/* 본문 서식은 공용 editor-content.css가 되살린다. 팝업 본문 글꼴은 에디터(TinyMCE 6) 편집 화면과 같게 둔다. */
.popup-ad .popup-ad__contents {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #000;
}
/* 글은 안쪽 여백을 두고, 이미지 한 장뿐인 팝업은 여백 없이 꽉 채운다 */
.popup-ad .popup-ad__contents { padding: var(--spacing-24, 24px); }
.popup-ad .popup-ad__contents:has(> img:only-child),
.popup-ad .popup-ad__contents:has(> p:only-child > img:only-child),
.popup-ad .popup-ad__contents:has(> p:only-child > a:only-child > img:only-child) { padding: 0; }
.popup-ad .popup-ad__contents img { display: block; max-width: 100%; height: auto; }
.popup-ad .popup-ad__contents > :first-child { margin-top: 0; }
.popup-ad .popup-ad__contents > :last-child { margin-bottom: 0; }
.popup-ad .popup-ad__contents[data-link-url]:not([data-link-url=""]) { cursor: pointer; }

/* 하단 줄 — 왼쪽 "오늘 하루 보지 않음", 오른쪽 "닫기 ×" */
.popup-ad .popup-bottom {
    display: flex;
    align-items: center;
    gap: var(--spacing-16, 16px);
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 var(--spacing-16, 16px) 0 var(--spacing-20, 20px);
    background-color: var(--background-subtle, #f5f7fa);
    border-top: 1px solid var(--border-default, #dce0ea);
}
/* 버튼 클래스는 부트스트랩 .close(24px·굵게·float) 같은 공용 규칙과 겹치지 않는 이름을 쓴다 */
.popup-ad .popup-bottom button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-bold, #4a5667);
    cursor: pointer;
    transition: color 0.2s ease;
}
.popup-ad .popup-bottom button:hover,
.popup-ad .popup-bottom button:focus-visible { color: var(--text-primary, #396cfa); }
.popup-ad .popup-bottom .popup-close { margin-left: auto; color: var(--text-bolder, #262f3c); }
.popup-ad .popup-bottom svg { width: 16px; height: 16px; flex-shrink: 0; }

/* 모바일에서는 전부 숨긴다 */
@media only screen and (max-width: 767px) {
    .popup-layer { display: none !important; }
}