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

/* ========== 공통 배너 스타일 ========== */
.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; }
}


/* ===============================================
   ⑥ 확대·진동 (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.03); letter-spacing: 1px; }
  50% { transform: scale(1.05); letter-spacing: 2px; }
  75% { transform: scale(1.02); 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); }
}


/* ===============================================
   ⑩ 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(1deg); }
}


/* ===============================================
   ⑮ Typewriter (타자기 스타일)
   =============================================== */
.tel.typewriter,
.hd_tel.typewriter {
  color: #e0d8c0;
  font-family: 'Courier New', monospace;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  border-right: 3px solid #e0d8c0;
  letter-spacing: 3px;
  animation: typewriterBlink 0.8s step-end infinite,
             typewriterFade 4s ease-in-out infinite;
}
@keyframes typewriterBlink {
  0%, 100% { border-color: #e0d8c0; }
  50%      { border-color: transparent; }
}
@keyframes typewriterFade {
  0%, 100% { opacity: 1; letter-spacing: 3px; }
  50%      { opacity: 0.85; letter-spacing: 5px; }
}

/* ===============================================
   ⑯ Smoke (연기/안개)
   =============================================== */
.tel.smoke,
.hd_tel.smoke {
  color: #ccc;
  animation: smokeEffect 3s ease-in-out infinite;
}
@keyframes smokeEffect {
  0%, 100% {
    text-shadow: 0 0 10px rgba(200,200,200,0.5);
    filter: blur(0px);
    opacity: 1;
  }
  50% {
    text-shadow:
      0 -5px 20px rgba(200,200,200,0.8),
      0 -10px 40px rgba(180,180,180,0.4);
    filter: blur(0.5px);
    opacity: 0.75;
  }
}


/* ===============================================
   ⑱ Matrix (매트릭스 녹색)
   =============================================== */
.tel.matrix,
.hd_tel.matrix {
  color: #00ff41;
  font-family: 'Courier New', monospace;
  text-shadow:
    0 0 5px #00ff41,
    0 0 15px #00ff41,
    0 0 30px #003b00;
  animation: matrixGlow 2s ease-in-out infinite;
}
@keyframes matrixGlow {
  0%, 100% {
    text-shadow: 0 0 5px #00ff41, 0 0 15px #00ff41, 0 0 30px #003b00;
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 10px #00ff41, 0 0 30px #00ff41, 0 0 60px #003b00;
    filter: brightness(1.3);
  }
}


/* ===============================================
   ⑳ Gold (금색 럭셔리)
   =============================================== */
.tel.gold,
.hd_tel.gold {
  background: linear-gradient(
    135deg,
    #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  animation: goldShift 4s ease infinite;
}
@keyframes goldShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===============================================
   ㉑ Ice (얼음/냉동)
   =============================================== */
.tel.ice,
.hd_tel.ice {
  color: #b3e5fc;
  text-shadow:
    0 0 8px #e1f5fe,
    0 0 20px #81d4fa,
    0 0 40px #4fc3f7;
  animation: iceFreeze 3s ease-in-out infinite;
}
@keyframes iceFreeze {
  0%, 100% {
    text-shadow: 0 0 8px #e1f5fe, 0 0 20px #81d4fa, 0 0 40px #4fc3f7;
    filter: brightness(1) contrast(1);
  }
  50% {
    text-shadow: 0 0 15px #e1f5fe, 0 0 35px #81d4fa, 0 0 60px #29b6f6;
    filter: brightness(1.2) contrast(1.1);
  }
}

/* ===============================================
   ㉒ Fire (화염)
   =============================================== */
.tel.fire,
.hd_tel.fire {
  background: linear-gradient(
    to top,
    #ff0000, #ff4500, #ff8c00, #ffd700, #ffef00
  );
  background-size: 100% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255,69,0,0.7));
  animation: fireRise 1.5s ease-in-out infinite alternate;
}
@keyframes fireRise {
  0%   { background-position: 50% 100%; filter: drop-shadow(0 0 8px rgba(255,69,0,0.7)); }
  100% { background-position: 50% 0%;   filter: drop-shadow(0 0 20px rgba(255,69,0,0.9)); }
}

/* ===============================================
   ㉓ Ocean (바다 웨이브)
   =============================================== */
.tel.ocean,
.hd_tel.ocean {
  background: linear-gradient(
    90deg,
    #006994, #00b4d8, #48cae4, #90e0ef, #00b4d8, #006994
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: oceanWave 3s ease-in-out infinite, oceanFloat 2s ease-in-out infinite;
}
@keyframes oceanWave {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes oceanFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(0.5deg); }
  75%      { transform: translateY(3px) rotate(-0.5deg); }
}

/* ===============================================
   ㉔ Sunset (석양 그라데이션)
   =============================================== */
.tel.sunset,
.hd_tel.sunset {
  background: linear-gradient(
    90deg,
    #ff6b6b, #ee5a24, #f0932b, #ff6348, #e55039, #eb4d4b
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(235,77,75,0.5));
  animation: sunsetFlow 5s ease infinite;
}
@keyframes sunsetFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* ===============================================
   ㉖ Laser (레이저 빔)
   =============================================== */
.tel.laser,
.hd_tel.laser {
  color: #ff003c;
  text-shadow:
    0 0 5px #ff003c,
    0 0 15px #ff003c,
    0 0 30px #ff003c;
  animation: laserSweep 2s ease-in-out infinite;
}
@keyframes laserSweep {
  0%, 100% {
    letter-spacing: 0;
    text-shadow: 0 0 5px #ff003c, 0 0 15px #ff003c, 0 0 30px #ff003c;
  }
  50% {
    letter-spacing: 8px;
    text-shadow: 0 0 10px #ff003c, 0 0 30px #ff003c, 0 0 60px #ff003c, 0 0 100px #ff003c;
  }
}

/* ===============================================
   ㉗ Candy (사탕 파스텔)
   =============================================== */
.tel.candy,
.hd_tel.candy {
  background: linear-gradient(
    90deg,
    #ff9a9e, #fad0c4, #fbc2eb, #a18cd1, #fbc2eb, #fad0c4, #ff9a9e
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,154,158,0.4));
  animation: candySlide 4s ease infinite;
}
@keyframes candySlide {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===============================================
   ㉘ Storm (폭풍/번개)
   =============================================== */
.tel.storm,
.hd_tel.storm {
  color: #e0e0e0;
  text-shadow: 0 0 5px #90a4ae;
  animation: stormFlash 3s ease-in-out infinite;
}
@keyframes stormFlash {
  0%, 100% { color: #b0bec5; text-shadow: 0 0 5px #607d8b; opacity: 1; }
  10%      { color: #ffffff; text-shadow: 0 0 40px #fff, 0 0 80px #64b5f6; opacity: 1; }
  11%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; opacity: 0.9; }
  30%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; opacity: 1; }
  31%      { color: #ffffff; text-shadow: 0 0 50px #fff, 0 0 100px #42a5f5; opacity: 1; }
  33%      { color: #ffffff; text-shadow: 0 0 30px #fff, 0 0 60px #64b5f6; opacity: 1; }
  35%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; opacity: 1; }
}

/* ===============================================
   ㉙ Diamond (다이아몬드 반짝)
   =============================================== */
.tel.diamond,
.hd_tel.diamond {
  background: linear-gradient(
    135deg,
    #ffffff, #b3e5fc, #e1f5fe, #ffffff, #81d4fa, #ffffff
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(129,212,250,0.6));
  animation: diamondSparkle 3s ease infinite;
}
@keyframes diamondSparkle {
  0%   { background-position: 0% 0%; filter: drop-shadow(0 0 6px rgba(129,212,250,0.6)) brightness(1); }
  25%  { background-position: 100% 0%; filter: drop-shadow(0 0 12px rgba(129,212,250,0.8)) brightness(1.1); }
  50%  { background-position: 100% 100%; filter: drop-shadow(0 0 6px rgba(129,212,250,0.6)) brightness(1); }
  75%  { background-position: 0% 100%; filter: drop-shadow(0 0 15px rgba(255,255,255,0.9)) brightness(1.2); }
  100% { background-position: 0% 0%; filter: drop-shadow(0 0 6px rgba(129,212,250,0.6)) brightness(1); }
}

/* ===============================================
   ㉚ Aurora (오로라)
   =============================================== */
.tel.aurora,
.hd_tel.aurora {
  background: linear-gradient(
    90deg,
    #00c9ff, #92fe9d, #00c9ff, #f0f, #92fe9d, #00c9ff
  );
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0,201,255,0.5));
  animation: auroraShift 6s ease infinite, auroraPulse 3s ease-in-out infinite;
}
@keyframes auroraShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes auroraPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0,201,255,0.5)); }
  50%      { filter: drop-shadow(0 0 25px rgba(146,254,157,0.7)); }
}

/* ===============================================
   Elegant Fade (우아한 페이드)
   =============================================== */
.tel.elegant-fade,
.hd_tel.elegant-fade {
  animation: elegantFade 3s ease-in-out infinite;
}
@keyframes elegantFade {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ===============================================
   Luxury Emboss (럭셔리 엠보스)
   =============================================== */
.tel.luxury-emboss,
.hd_tel.luxury-emboss {
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #bbb,
    0 3px 3px rgba(0,0,0,0.3);
  animation: luxuryEmboss 4s ease-in-out infinite;
}
@keyframes luxuryEmboss {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 3px rgba(0,0,0,0.3);
  }
  50% {
    filter: brightness(1.15);
    text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 6px rgba(0,0,0,0.25);
  }
}

/* ===============================================
   Underline Slide (밑줄 슬라이드)
   =============================================== */
.tel.underline-slide,
.hd_tel.underline-slide {
  position: relative;
  color: #fff;
}
.tel.underline-slide::after,
.hd_tel.underline-slide::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  background: var(--point-color, #ffd200);
  border-radius: 2px;
  animation: underlineSlide 3s ease-in-out infinite;
}
@keyframes underlineSlide {
  0%, 100% { width: 0%; }
  50%      { width: 100%; }
}

/* ===============================================
   Soft Breathe (부드러운 호흡)
   =============================================== */
.tel.soft-breathe,
.hd_tel.soft-breathe {
  color: #fff;
  animation: softBreathe 4s ease-in-out infinite;
}
@keyframes softBreathe {
  0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.4); }
  50%      { text-shadow: 0 0 15px rgba(255,255,255,0.8); }
}

/* ===============================================
   Platinum (플래티넘 그라데이션)
   =============================================== */
.tel.platinum,
.hd_tel.platinum {
  background: linear-gradient(
    90deg,
    #e8e8e8, #c0cfe0, #f0f0f0, #a8c0d8, #e0e0e0, #c0cfe0
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: platinumShift 5s ease infinite;
}
@keyframes platinumShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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