body:has(.modal.active) {
    overflow: hidden;
}

.modal {
    position: fixed;
    background: var(--bgd-white);
    z-index: 9999;
    height: 100dvh;
}

.modal .modal-box {
    height: 100%;
    padding-bottom: 3.75em;
}

.modal .inner-box {
    height: 100%;
    background: #F6F6F6;
    border-radius: var(--round-default);
}

.modal .modal-wrap {
    max-width: 770px;
    margin: 0 auto;
}

.modal .modal-content {
    padding: 2em;
}

.modal video {
    border-radius: var(--round-default);
}

.modal .back {
    left: 0;
    right: 0;
    margin: 0 auto;
    border: none;
    background: transparent;
    padding: 0 0;
    color: var(--text-orange);
    font-size: 1.125em;
    bottom: 1.05em;
    cursor: pointer;
}

.modal.video {
    background: transparent;
}

.modal.video .modal-box {
    padding: 0 0;
}

.modal.video .inner-box {
    padding: var(--block-padding);
    background: rgba(246, 246, 246, 0.9);
}

.modal.video .back.close {
    top: var(--block-padding);
    right: var(--block-padding);
    left: auto;
    bottom: auto;
}

@media all and (max-width: 500px) {
    .modal .modal-content {
        padding: 1.4em;
    }
}

@media all and (max-height: 800px) {
    .modal .modal-box {
        padding-bottom: 2.8em;
    }
    .modal .back {
        bottom: 0.8em;
        font-size: 1em;
    }
}