*{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;box-sizing:border-box;}

html,body{
    position:relative;width:100%;height:100%;margin:0;padding:0;color:#232323;color:var(--color_base);
    background-color:#eaeaea;background-color:var(--color_lightgray);overflow-x:hidden;
}
ul,ol,li{list-style:none;margin:0;padding:0;}

.toast{
    position:absolute;bottom:30px;right:30px;border-radius:12px;background:#fff;padding:20px 35px 20px 25px;box-shadow:0 6px 20px -5px rgba(0,0,0,.1);
    overflow:hidden;transform:translateX(calc(100% + 30px));transition:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast.active{transform:translateX(0);}
.toast .toast-content{display:flex;align-items:center;}
.toast-content .check{display:flex;align-items:center;justify-content:center;height:35px;min-width:35px;background-color:#2770ff;color:#fff;font-size:20px;border-radius:50%;}
.toast-content .message{display:flex;flex-direction:column;margin:0 20px;}
.message .text{font-size:16px;font-weight:400;color:#666;}
.message .text.text-1{font-weight:600;color:#333;}
.toast .close{position:absolute;top:10px;right:15px;padding:5px;cursor:pointer;opacity:.7;}
.toast .close:hover{opacity:1;}
.toast .progress{position:absolute;bottom:0;left:0;height:3px;width:100%;}
.toast .progress::before{content:"";position:absolute;bottom:0;right:0;height:100%;width:100%;background-color:#2770ff;}
.progress.active::before{animation:progress 5s linear forwards;}
@keyframes progress{
    100%{right:100%;}
}
button{
    position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
    padding:12px 20px;font-size:20px;outline:none;border:none;background-color:#2770ff;color:#fff;border-radius:6px;cursor:pointer;transition:0.3s;
}
button:hover{background-color:#2770ff;}
.toast.active ~ button{pointer-events:none;}