.base-modal{display:flex;position:fixed;top:0;left:0;z-index:2000;width:100%;height:100vh;height:100dvh;align-items:center;justify-content:center;--vertical-gap: 86px}@media all and (width <= 500px){.base-modal{--vertical-gap: 24px}}.base-modal__overlay{width:100%;height:100%;position:absolute;left:0;top:0;background:#0000008c}.base-modal__main{width:100%;max-height:calc(100vh - var(--vertical-gap));max-height:calc(100dvh - var(--vertical-gap));display:flex;flex-direction:column;position:relative;background-color:var(--color-white);margin:0 16px;padding:24px;height:auto;border-radius:var(--radius-xl);overflow:visible}@media all and (width <= 500px){.base-modal__main{margin:0 12px;padding:12px 6px 18px 12px;border-radius:var(--radius-md)}}@media all and (width <= 500px){.base-modal__main-wide{padding:12px 12px 18px!important}}.base-modal__header{width:100%;display:flex;justify-content:flex-start}.base-modal__header-title{width:100%;font-weight:500;margin:0 0 16px;text-align:left}@media all and (width <= 500px){.base-modal__header-title{text-align:center;font-size:20px;margin-bottom:12px}}.base-modal__header-close{position:absolute!important;top:10px;right:10px;cursor:pointer;z-index:2;color:var(--color-gray-stroke)}.base-modal__body{flex-grow:1}.base-modal__body.base-scrollbar{padding-left:0!important;padding-right:8px}.base-modal__footer{display:flex;justify-content:flex-end;margin-top:16px;gap:12px}@media all and (width <= 500px){.base-modal__footer{margin-top:12px;justify-content:center}}.modal-enter-active,.modal-leave-active{transition:opacity .2s}.modal-enter-active .base-modal__main,.modal-leave-active .base-modal__main{transition:transform .2s}.modal-enter,.modal-leave-to{opacity:0}.modal-enter .base-modal__main,.modal-leave-to .base-modal__main{transform:scale(.97) translateY(-10px)}
