/**
 * 전역 Glow 애니메이션 공통 CSS
 * 
 * 목적:
 * 1. 모든 애니메이션을 동일하게 적용
 * 2. 불필요한 개별 설정으로 코드 증가 방지
 * 
 * 사용법:
 * <link rel="stylesheet" href="/css/global-glow-animation.css">
 * 
 * 또는 JavaScript에서:
 * element.classList.add('glow-animation');
 */

/* ✅ 전역 Glow 애니메이션 (흰색 글로우 - 텍스트 전용) */
@keyframes globalGlow {
    0%, 100% {
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.2),
                     0 0 4px rgba(255, 255, 255, 0.15);
        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3))
                drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
        opacity: 0.95;
    }
    50% {
        text-shadow: 0 0 3px rgba(255, 255, 255, 0.5),
                     0 0 6px rgba(255, 255, 255, 0.3),
                     0 0 5px rgba(255, 255, 255, 0.4),
                     0 0 8px rgba(255, 255, 255, 0.25);
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
        opacity: 1;
    }
}

/* 전역 Glow 애니메이션 클래스 */
.glow-animation {
    animation: globalGlow 1.5s ease-in-out infinite;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Glow 효과를 적용할 컨테이너 (overflow 제한) */
.glow-container {
    overflow: hidden;
    position: relative;
}

/* ✅ 카드사용내역 통합 V2 입력 버튼 (기존 호환성 유지) */
#card-usage-unified-v2-input-btn {
    overflow: hidden;
    position: relative;
}

#card-usage-unified-v2-input-btn .card-usage-input-icon,
#card-usage-unified-v2-input-btn .card-usage-input-text {
    animation: globalGlow 1.5s ease-in-out infinite;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* ✅ 추가 버튼 텍스트 애니메이션 (팝업용) */
/* 아이콘과 텍스트에만 적용 (버튼 박스가 아님) */
button[onclick*="addCardUsageDetailRow"] i,
button[onclick*="addCardUsageDetailRow"] span {
    animation: globalGlow 1.5s ease-in-out infinite;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* ✅ 지출정보 입력 버튼 (expense-unified) */
button[onclick*="openExpenseInputPopup"] .expense-input-icon,
button[onclick*="openExpenseInputPopup"] .expense-input-text {
    animation: globalGlow 1.5s ease-in-out infinite;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* ✅ 지출정보 추가 버튼 (expense-input-popup-v4) */
button[onclick*="addExpenseDetailRow"] i,
button[onclick*="addExpenseDetailRow"] span {
    animation: globalGlow 1.5s ease-in-out infinite;
    display: inline-block;
    position: relative;
    z-index: 1;
}