/* ------------------------------------------------------
 *  전화번호 배너 통합 CSS — 30 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; }
}

/* ===============================================
   ④ 불꽃 깜빡임 (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); }
}

/* ===============================================
   ⑪ Glitch (글리치/깨짐 효과)
   =============================================== */
.tel.glitch,
.hd_tel.glitch {
  color: #fff;
  position: relative;
  text-shadow:
    2px 0 #ff0040,
    -2px 0 #00fff0;
  animation: glitchShake 0.4s linear infinite;
}
@keyframes glitchShake {
  0%   { transform: translate(0); text-shadow: 2px 0 #ff0040, -2px 0 #00fff0; }
  20%  { transform: translate(-3px, 2px); text-shadow: -2px 0 #ff0040, 2px 0 #00fff0; }
  40%  { transform: translate(3px, -1px); text-shadow: 2px 2px #ff0040, -2px -2px #00fff0; }
  60%  { transform: translate(-1px, 1px); text-shadow: -2px -1px #ff0040, 2px 1px #00fff0; }
  80%  { transform: translate(2px, -2px); text-shadow: 3px 0 #ff0040, -3px 0 #00fff0; }
  100% { transform: translate(0); text-shadow: 2px 0 #ff0040, -2px 0 #00fff0; }
}

/* ===============================================
   ⑫ Bounce (통통 튀기)
   =============================================== */
.tel.bounce,
.hd_tel.bounce {
  color: #ffd200;
  text-shadow: 0 4px 8px rgba(0,0,0,0.4);
  animation: bounceUp 1.2s ease infinite;
}
@keyframes bounceUp {
  0%, 100% { transform: translateY(0); }
  15%      { transform: translateY(-25px); }
  30%      { transform: translateY(0); }
  45%      { transform: translateY(-12px); }
  60%      { transform: translateY(0); }
  75%      { transform: translateY(-5px); }
  85%      { transform: translateY(0); }
}

/* ===============================================
   ⑬ Swing (좌우 흔들기)
   =============================================== */
.tel.swing,
.hd_tel.swing {
  color: #ff9500;
  text-shadow: 0 0 12px rgba(255,149,0,0.6);
  transform-origin: center top;
  animation: swingMotion 1.5s ease-in-out infinite;
}
@keyframes swingMotion {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(8deg); }
  40%      { transform: rotate(-6deg); }
  60%      { transform: rotate(4deg); }
  80%      { transform: rotate(-2deg); }
}

/* ===============================================
   ⑭ Heartbeat (심장박동)
   =============================================== */
.tel.heartbeat,
.hd_tel.heartbeat {
  color: #ff2d55;
  text-shadow: 0 0 15px rgba(255,45,85,0.6);
  animation: heartbeat 1.2s ease-in-out infinite;
}
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.15); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.25); }
  56%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ===============================================
   ⑮ 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(1.5px);
    opacity: 0.75;
  }
}

/* ===============================================
   ⑰ Electric (전기 스파크)
   =============================================== */
.tel.electric,
.hd_tel.electric {
  color: #00e5ff;
  animation: electricSpark 0.15s linear infinite;
}
@keyframes electricSpark {
  0%   { text-shadow: 0 0 5px #00e5ff, 0 0 15px #00b8d4, 3px -2px 8px #fff; transform: translate(0); }
  25%  { text-shadow: -2px 0 5px #00e5ff, 2px 0 20px #00b8d4, -1px 3px 10px #fff; transform: translate(1px, -1px); }
  50%  { text-shadow: 0 0 10px #00e5ff, 0 0 30px #00b8d4, 2px 1px 6px #fff; transform: translate(-1px, 1px); }
  75%  { text-shadow: 1px -1px 5px #00e5ff, -2px 2px 25px #00b8d4, 0 -2px 12px #fff; transform: translate(1px, 0); }
  100% { text-shadow: 0 0 5px #00e5ff, 0 0 15px #00b8d4, 3px -2px 8px #fff; transform: translate(0); }
}

/* ===============================================
   ⑱ 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);
  }
}

/* ===============================================
   ⑲ Retro (레트로 CRT)
   =============================================== */
.tel.retro,
.hd_tel.retro {
  color: #33ff33;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 8px rgba(51,255,51,0.7);
  animation: retroScanline 0.08s linear infinite, retroFlicker 4s ease-in-out infinite;
}
@keyframes retroScanline {
  0%   { text-shadow: 0 0 8px rgba(51,255,51,0.7), 0 1px 0 rgba(0,0,0,0.3); }
  50%  { text-shadow: 0 0 8px rgba(51,255,51,0.7), 0 -1px 0 rgba(0,0,0,0.3); }
  100% { text-shadow: 0 0 8px rgba(51,255,51,0.7), 0 1px 0 rgba(0,0,0,0.3); }
}
@keyframes retroFlicker {
  0%, 100% { opacity: 1; }
  92%      { opacity: 1; }
  93%      { opacity: 0.7; }
  94%      { opacity: 1; }
  96%      { opacity: 0.8; }
  97%      { opacity: 1; }
}

/* ===============================================
   ⑳ 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%; }
}

/* ===============================================
   ㉕ Disco (디스코 컬러)
   =============================================== */
.tel.disco,
.hd_tel.disco {
  color: #fff;
  animation: discoColor 0.5s linear infinite;
}
@keyframes discoColor {
  0%   { text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; color: #ff4444; }
  16%  { text-shadow: 0 0 20px #ffff00, 0 0 40px #ffff00; color: #ffff44; }
  33%  { text-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00; color: #44ff44; }
  50%  { text-shadow: 0 0 20px #00ffff, 0 0 40px #00ffff; color: #44ffff; }
  66%  { text-shadow: 0 0 20px #0000ff, 0 0 40px #0000ff; color: #4444ff; }
  83%  { text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff; color: #ff44ff; }
  100% { text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; color: #ff4444; }
}

/* ===============================================
   ㉖ 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; transform: translate(0); }
  10%      { color: #ffffff; text-shadow: 0 0 40px #fff, 0 0 80px #64b5f6; transform: translate(-1px, 1px); }
  11%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; transform: translate(0); }
  30%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; }
  31%      { color: #ffffff; text-shadow: 0 0 50px #fff, 0 0 100px #42a5f5; transform: translate(2px, -1px); }
  33%      { color: #ffffff; text-shadow: 0 0 30px #fff, 0 0 60px #64b5f6; transform: translate(-1px, 0); }
  35%      { color: #b0bec5; text-shadow: 0 0 5px #607d8b; transform: translate(0); }
}

/* ===============================================
   ㉙ 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)); }
}

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