@charset "utf-8";
/* =========================================================
 * 팝업 레이어 (plugin/popup-slider)
 * - 관리자에서 입력한 위치(좌측·상단)에 하나씩 따로 출력 / 높이 제한 없음 / 배경 어둡게 없음
 * ========================================================= */
#pop_layers {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 0;
}
#pop_layers *, #pop_layers *::before, #pop_layers *::after { box-sizing: border-box; }

#pop_layers .pop-layer {
    --pop-radius: 12px;
    position: absolute;
    /* 관리자 위치 그대로, 화면이 좁으면 화면 안으로 (오른쪽 끝 10px 여백) */
    top: var(--pop-t, 10px);
    left: clamp(0px, var(--pop-l, 10px), max(10px, calc(100vw - var(--pop-w, 450px) - 10px)));
    width: min(var(--pop-w, 450px), calc(100vw - 20px));
    overflow: hidden;
    border-radius: var(--pop-radius);
    background: #fff;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06);
    animation: popLayerIn .35s cubic-bezier(.22, .61, .36, 1) both;
}
#pop_layers .pop-layer[hidden] { display: none !important; }
#pop_layers .pop-layer.is-closing { animation: popLayerOut .22s ease both; }

/* 본문 : 높이 제한 없음 */
#pop_layers .pop-layer__body {
    color: #222;
    font-size: 15px;
    line-height: 1.6;
    word-break: keep-all;
}
#pop_layers .pop-layer__body.is-text { padding: 24px 22px; }  /* 이미지 없는 글자형 팝업만 안쪽 여백 */
#pop_layers .pop-layer__body img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
#pop_layers .pop-layer__body p { margin: 0; }
#pop_layers .pop-layer__body a { color: inherit; }

/* 하단 버튼 */
#pop_layers .pop-layer__footer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    background: #111;
}
#pop_layers .pop-layer__footer button {
    height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    opacity: .9;
    transition: opacity .2s;
}
#pop_layers .pop-layer__footer button + button { border-left: 1px solid rgba(255, 255, 255, .15); }
#pop_layers .pop-layer__footer button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
#pop_layers .pop-layer__footer button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 6px; }

@keyframes popLayerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes popLayerOut { from { opacity: 1; } to { opacity: 0; } }

/* 768px 이하 : 관리자 위치 무시하고 가운데 (세로 위치는 popup.js 가 화면 높이 기준으로 계산해 --pop-mt 로 지정) */
@media (max-width: 768px) {
    #pop_layers .pop-layer {
        top: var(--pop-mt, 20px);
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pop_layers .pop-layer { animation: none !important; }
}