/* ------------------------------------------------------
 *  전화번호 배너 통합 CSS
 * ------------------------------------------------------ */

/* ========== 공통 배너 스타일 ========== */
.call-banner {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  width: 100%;
  padding: 40px 10px 30px;
  background:
  repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.12) 0px,
    rgba(255, 255, 255, 0.12) 2px,
    transparent 2px,
    transparent 6px
  ),
  linear-gradient(135deg, var(--point-color), rgba(var(--point-rgb), 0.8));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.call-banner .title {
  font-size: 2rem;
  font-weight: 800;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.call-banner .notice {
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-weight: 700;
  padding: 10px 15px;
  font-size: 1.3rem;
  margin-top: 10px;
  backdrop-filter: blur(3px);
}

.call-banner .notice strong {
  color: #ffd200;
}

/* ========== 공통 전화번호 기본 ========== */
.tel {
  display: inline-block;
  font-size: 4rem;
  font-weight: 900;
  margin: 15px 0;
  transition: all 0.3s ease;
}

/* ===============================================
   ① 타이핑 루프 (Typing Loop)
   =============================================== */
.tel.typing,
.hd_tel.typing {
  border-right: 4px solid #ffd200;
  color: #ffd200;
  text-shadow: 0 0 10px rgba(255,210,0,0.5);
  animation: blinkCursor 0.7s infinite;
}
@keyframes blinkCursor {
  0%, 100% { border-color: #ffd200; }
  50% { border-color: transparent; }
}

/* ===============================================
   ② 네온 반짝임 (Neon Glow)
   =============================================== */
.tel.neon,
.hd_tel.neon {
  color: #fff;
  text-shadow:
    0 0 5px #ffef00,
    0 0 10px #ffef00,
    0 0 20px #ffef00,
    0 0 40px #ff7b00;
  animation: neon 1.5s infinite alternate;
}
@keyframes neon {
  from {
    text-shadow:
      0 0 5px #ffef00,
      0 0 15px #ff7b00;
  }
  to {
    text-shadow:
      0 0 25px #ffef00,
      0 0 60px #ff7b00;
  }
}

/* ===============================================
   ③ 흐르는 빛 (Shimmer Gradient)
   =============================================== */
.tel.shimmer,
.hd_tel.shimmer {
  background: linear-gradient(90deg, #ffdd55, #fff, #ff8c00);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===============================================
   ④ 불꽃 깜빡임 (Fire Flicker)
   =============================================== */
.tel.flicker,
.hd_tel.flicker {
  color: #ff6600;
  text-shadow: 0 0 10px #ff2200;
  animation: flicker 0.12s infinite;
}
@keyframes flicker {
  0%,18%,22%,25%,53%,57%,100% { opacity: 1; }
  20%,24%,55% { opacity: 0.3; }
}

/* ===============================================
   ⑤ 무지개 순환 (Rainbow Flow)
   =============================================== */
.tel.rainbow,
.hd_tel.rainbow {
  background: linear-gradient(
    to right,
    red, orange, yellow, green, cyan, blue, violet
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ===============================================
   ⑥ 확대·진동 (Pulse Glow)
   =============================================== */
.tel.pulse,
.hd_tel.pulse {
  color: #00d4ff;
  text-shadow: 0 0 10px #0099cc;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); text-shadow: 0 0 10px #0099cc; }
  50% { transform: scale(1.1); text-shadow: 0 0 25px #00d4ff; }
}

/* ===============================================
   ⑦ Wave Pulse (파도 진동)
   =============================================== */
.tel.wave,
.hd_tel.wave {
  color: #00ffe7;
  text-shadow: 0 0 10px #00aaff;
  animation: wavePulse 2s infinite;
}
@keyframes wavePulse {
  0%,100% { transform: scale(1); letter-spacing: 0; }
  25% { transform: scale(1.08) rotate(1deg); letter-spacing: 1px; }
  50% { transform: scale(1.1) rotate(-1deg); letter-spacing: 2px; }
  75% { transform: scale(1.05); letter-spacing: 0.5px; }
}

/* ===============================================
   ⑧ Pulse Shine (빛반사 맥동)
   =============================================== */
.tel.shine,
.hd_tel.shine {
  background: linear-gradient(90deg, #fff, #ffd200, #ff8800, #fff);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    shimmerLight 3s linear infinite,
    pulseLight 1.8s ease-in-out infinite;
}
@keyframes shimmerLight {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes pulseLight {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 5px #ffd200); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 20px #ff8800); }
}

/* ===============================================
   ⑨ Elastic Zoom (탄성 확대)
   =============================================== */
.tel.elastic,
.hd_tel.elastic {
  color: #ffffff;
  text-shadow: 0 0 20px #ffd200;
  animation: elasticZoom 2s ease-in-out infinite;
}
@keyframes elasticZoom {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
  80% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ===============================================
   ⑩ Twist Pulse (회전 진동)
   =============================================== */
.tel.twist,
.hd_tel.twist {
  color: #fff;
  text-shadow: 0 0 15px #ffcc00;
  animation: twistPulse 2s ease-in-out infinite;
}
@keyframes twistPulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(2deg); }
}

@media all and (max-width:450px){
  .call-banner .notice strong{display: block;}
}