/* Scrollbar Styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* 
   =============================================================================
   [팝업 전용] 통통 튀는 바운스 애니메이션 및 커스텀 설정 변수
   =============================================================================
   - 애니메이션 속도 및 스케일 크기를 이 주석 영역에서 자유롭게 조절할 수 있습니다.
   - [SPEED_IN]  : 팝업이 등장하는 속도 (기본: 0.25s) -> 낮을수록 빠름
   - [SPEED_OUT] : 팝업이 사라지는 속도 (기본: 0.18s) -> 낮을수록 빠름
   - [SCALE_BIG] : 팝업이 튀어 오를 때 커지는 최대 크기 (기본: 1.08)
   - [SCALE_START]: 팝업이 처음 시작할 때의 크기 (기본: 0.5 - 1.5배 크게 보이도록 설정됨)
   =============================================================================
*/
:root {
    --modal-speed-in: 0.2s;    /* [커스텀 가능] 등장 속도 */
    --modal-speed-out: 0.1s;   /* [커스텀 가능] 퇴장 속도 */
    --modal-bounce-scale: 1.2; /* [커스텀 가능] 바운스 시 최대 확장 크기 */
}

.modal-wrapper {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 팝업 박스 등장 바운스 (1.5배 크게 시작하여 통통 튀며 안착) */
.modal-bounce-in {
    opacity: 1 !important;
    transform: scale(1) translateZ(0) !important;
    transition: transform var(--modal-speed-in) cubic-bezier(0.175, 0.885, 0.32, 1.45), opacity 0.15s ease !important;
}

/* 팝업 박스 퇴장 애니메이션 */
.modal-bounce-out {
    opacity: 0 !important;
    transform: scale(0.6) translateZ(0) !important;
    transition: transform var(--modal-speed-out) cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.15s ease-in !important;
}