.popup {
    position: fixed;
    z-index: 1000;
    top: var(--popup-top, auto);
    right: var(--popup-right, auto);
    bottom: var(--popup-bottom, auto);
    left: var(--popup-left, auto);
    width: min(100% - 32px, var(--popup-max-width, 400px));
    max-width: var(--popup-max-width, 400px);
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.popup[hidden] {
    display: none;
}

/* transform 대신 margin:auto로 중앙 정렬 — transform이 걸리면 자식 backdrop의 position:fixed가 뷰포트 기준을 잃는다. */
.popup--centered {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: fit-content;
}

.popup__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .55);
}

.popup__body {
    display: block;
    line-height: 0;
}

.popup__body img {
    width: 100%;
    height: auto;
}

.popup__bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: #1f1f1f;
}

.popup__bar button {
    border: 0;
    background: transparent;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}

.popup__bar button:hover {
    background: rgba(255, 255, 255, .12);
}

.popup__bar button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.popup__close {
    font-weight: 700;
}

@media (max-width: 767px) {
    .popup--sheet {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        margin: 0;
    }
}