/**
 * 동적 메뉴 시스템 스타일
 * 메뉴 카운트 배지 및 애니메이션 스타일
 * 
 * @author Dynamic Menu System
 * @version 1.0.0
 * @since 2025-01-16
 */

/* 메뉴 카운트 배지 기본 스타일 */
.menu-count-badge {
    /* display: inline-block; */
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: #ffffff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-left: 8px;
    min-width: 18px;
    height: 18px;
    text-align: center;
    line-height: 14px;
    /* box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3); */
    /* border: 2px solid #ffffff; */
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 99+ 표시를 위한 확장 스타일 */
.menu-count-badge.large {
    min-width: 24px;
    padding: 2px 4px;
    border-radius: 12px;
    font-size: 10px;
}

/* 애니메이션 키프레임 */
@keyframes menuCountFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes menuCountPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes menuCountBounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

/* 새로운 카운트 표시 애니메이션 */
.menu-count-badge.new {
    animation: menuCountFadeIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 카운트 업데이트 애니메이션 */
.menu-count-badge.updating {
    animation: menuCountPulse 0.4s ease-in-out;
}

/* 중요한 알림을 위한 강조 애니메이션 */
.menu-count-badge.urgent {
    animation: menuCountBounce 1s infinite;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

/* 배지 업데이트 애니메이션 */
.menu-count-badge.badge-updated {
    animation: menuCountPulse 0.3s ease-in-out;
}