.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;visibility:hidden}.modal-container.show{visibility:visible}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out forwards}.modal-wrapper{overflow-y:auto;position:relative;width:90%;max-width:1200px;min-height:200px}@media screen and (max-width:720px){.modal-wrapper{width:80%;height:60%;overflow-y:auto;position:relative}}.modal-outline{position:absolute;top:0;left:0;z-index:1;pointer-events:none}.modal-outline,.modal-outline svg{width:100%;height:100%}.modal-outline .outline-rect{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawLine .6s ease-out forwards}.modal-content-wrapper{overflow-y:auto;position:relative;background:#fff;border-radius:12px;padding:20px;opacity:0;transform:translateY(-20px);animation:slideContent .6s ease-out .6s forwards;z-index:2}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-title{margin:0;width:100%;text-align:center;color:#333;font-size:1.5rem;font-weight:500}.close-button{cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;z-index:3;border-radius:50%;background:transparent}.close-button:hover{transform:scale(1.1);background:rgba(0,0,0,.05)}.close-icon{font-size:24px;color:#666}.modal-body{margin-bottom:20px}.modal-footer{display:flex;justify-content:space-between;align-items:center}.bottom-text{margin:0;color:#333}.modal-container.out .modal-background{animation:fadeOut .3s ease-in forwards}.modal-container.out .outline-rect{animation:eraseLine .5s ease-in forwards}.modal-container.out .modal-content-wrapper{animation:slideContentOut .5s ease-in forwards}@keyframes fadeIn{0%{background:transparent}to{background:rgba(0,0,0,.75)}}@keyframes fadeOut{0%{background:rgba(0,0,0,.75);visibility:visible}to{background:transparent;visibility:visible}}@keyframes drawLine{to{stroke-dashoffset:0}}@keyframes eraseLine{0%{stroke-dashoffset:0}to{stroke-dashoffset:2000}}@keyframes slideContent{to{opacity:1;transform:translateY(0)}}@keyframes slideContentOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@media (max-width:768px){.modal-wrapper{width:95%;margin:20px}.modal-content-wrapper{padding:15px}.modal-title{font-size:1.25rem}}