@charset "utf-8";

.modal {display: none; position: fixed; z-index: 20; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.5);}
.modal-content {position: relative; background-color: #fff; margin: auto; padding: 3rem 3rem 3.7rem; width: 80%; max-height: 90%; max-width: 560px; border-radius: 1.6rem; -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; overflow: hidden auto;}
.modal-content::-webkit-scrollbar {width: 8px;}
.modal-content::-webkit-scrollbar-track {background-color: #FFF;}
.modal-content::-webkit-scrollbar-thumb {background-color: var(--col-gray); border-radius: 50px;}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


/* 상단 */
.modal-header {position: relative; margin-bottom: 4rem;}
.modal-header .icon {width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; background-position: center; background-size: contain; background-repeat: no-repeat;}
.modal-header .icon.warning {background-image: url("../img/alert_warning.svg");}
.modal-header .icon.flower {background-image: url("../img/alert_flower.svg");}
.modal-header h2 {text-align: center; color: var(--col-bk); font-size: 2rem; font-weight: 700; line-height: 1.75;}
.modal-header .close {position: absolute; top: 0; right: 0; color: var(--col-bk); font-size: 2.4rem; font-weight: 700; line-height: 1; cursor: pointer;}


/* 내용 */
.modal-body {text-align: center; line-height: 1.5;}


/* 하단 */
.modal-footer {display: flex; justify-content: center; gap: 8px; margin-top: 4rem; text-align: center;}
.modal-footer a,
.modal-footer button {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 12rem; height: 4rem; border-radius: .4rem; font-weight: 500;}


@media (max-width: 768px) {
    .modal-content {padding: 3rem 2rem 3.7rem;}
}