@charset "utf-8";

/*! 모달 반응형 */
.popup{z-index:900;position:absolute;top:.5rem;right:.5rem;justify-content:right;align-items:center;transition:transform 0.5s ease-in-out}
.popup-inner{width:290px;overflow:hidden}
@media(min-width:768px){
.popup-inner{width:360px}
}
@media(min-width:1200px){
.popup{top:.5rem;right:.5rem}
.popup-inner{width:447px}
}

/* 팝업 아이콘 */
.popup-icon{display:flex;position:absolute;justify-content:center;align-items:center;top:0;left:-3.5rem;width:3rem;height:3rem;color:var(--bs-tertiary);cursor:pointer;border-radius:50rem;background:var(--bs-bg)}
.popup-icon:hover{color:var(--bs-tertiary);background:var(--bs-bg)}
.popup-icon i{z-index:1;margin-top:.15rem;font-size:1.25rem;animation:bellRing 2.4s ease-in-out infinite}
@keyframes bellRing{0%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(9deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(3deg)}60%{transform:rotate(0)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.popup-icon i{animation:none}}
.popup-icon-count{z-index:2;display:flex;position:absolute;justify-content:center;align-items:center;top:.45rem;right:.45rem;width:1.2rem;height:1.2rem;color:#fff;font-size:.625rem;font-weight:600;border-radius:50%;border:2px solid var(--bs-bg);background:#cc3333}

/* 애니메이션 클래스 */
.popup.slide-out{transform:translateY(0) translateX(calc(100% + .5rem))}
.popup.slide-in{transform:translateY(0) translateX(0)}

/* 팝업이 숨겨진 상태 */
.popup.minimized .popup-inner{display:none}
.popup.minimized{justify-content:flex-end;align-items:flex-start;padding:20px}