/* ============================================================
   요금표(charge) 페이지 - NEW / HOT 배지 네온 글로우
   배지 배경색(초록/빨강/골드)은 유지하고 글자+배지에 네온 빛.
   색은 data-bg-color 기준으로 자동 매칭됩니다.
   ============================================================ */

/* 배지 색별 네온 글로우 색(--ng) 지정 */
.charge-neon-badge[data-bg-color="#44AE99"] { --ng: 68, 255, 174; }  /* NEW(초록) */
.charge-neon-badge[data-bg-color="#FF2500"] { --ng: 255, 90, 60; }   /* HOT(빨강) */
.charge-neon-badge[data-bg-color="#F2B641"] { --ng: 255, 206, 74; }  /* NEW(골드) */

/* 네온 펄스: 배지 바깥 글로우 + 글자 글로우 동시 */
@keyframes chargeBadgeNeon {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(var(--ng), .60),
            0 0 9px rgba(var(--ng), .40);
        text-shadow:
            0 0 3px rgba(255, 255, 255, .9),
            0 0 7px rgba(var(--ng), .85);
    }
    50% {
        box-shadow:
            0 0 7px rgba(var(--ng), .85),
            0 0 16px rgba(var(--ng), .55),
            0 0 26px rgba(var(--ng), .35);
        text-shadow:
            0 0 5px rgba(255, 255, 255, 1),
            0 0 11px rgba(var(--ng), .95),
            0 0 18px rgba(var(--ng), .6);
    }
}

.charge-neon-badge {
    --ng: 68, 255, 174; /* 기본값(매칭 실패 시 초록) */
    position: relative;
    color: #ffffff !important;
    font-weight: 800 !important;
    animation: chargeBadgeNeon 1.8s ease-in-out infinite;
}

/* ============================================================
   메인 배너 "지룡자 최적화 솔루션" - 히어로 배너와 동일한 청록 네온
   ============================================================ */
@keyframes mainTitleNeon {
    0%, 100% {
        text-shadow:
            0 0 6px #44ffd0,
            0 0 14px #16c79a,
            0 0 26px #16c79a;
    }
    50% {
        text-shadow:
            0 0 10px #7dffe6,
            0 0 22px #44ffd0,
            0 0 44px #16c79a,
            0 0 70px #16c79a;
    }
}
.main-title-neon {
    color: #ffffff !important;
    animation: mainTitleNeon 2.0s ease-in-out infinite;
}

/* ============================================================
   요금표 금액 플립 숫자(.price-roll) 크기
   * 인라인 style 속성은 CSP로 막혀서 외부 CSS로 크기를 지정.
   * height:1em → 주변 "만원" 글자 크기에 맞춤. width:auto → viewBox 비율로 자동.
   ============================================================ */
.price-roll {
    height: 1em;
    width: auto;
    vertical-align: -0.12em;
    display: inline-block;
    overflow: visible;
}