/* ------------------------------------------------------
 *  전화번호 배너 통합 CSS — 25 Effects
 *  규칙: transform(scale/rotate/translate) 금지
 *        허용: background-position, color, text-shadow, opacity, filter(brightness/drop-shadow)
 * ------------------------------------------------------ */

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

/* ============================================================
   ① shimmer — 은빛 흐르는 빛
   ============================================================ */
.tel.shimmer,
.hd_tel.shimmer {
  background: linear-gradient(90deg, #b0b8c8, #ffffff, #d0d8e8, #ffffff, #b0b8c8);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-shimmer 3s linear infinite;
}
@keyframes fx-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   ② gold — 골드 럭셔리 흐름
   ============================================================ */
.tel.gold,
.hd_tel.gold {
  background: linear-gradient(90deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #d4a017, #fcf6ba, #bf953f);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(180,130,0,0.5));
  animation: fx-gold 4s linear infinite;
}
@keyframes fx-gold {
  0%   { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}

/* ============================================================
   ③ rose-flow — 로즈 핑크 흐름
   ============================================================ */
.tel.rose-flow,
.hd_tel.rose-flow {
  background: linear-gradient(90deg, #ff758c, #ffb7c5, #ff9a9e, #ffc3a0, #ffb7c5, #ff758c);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,100,120,0.4));
  animation: fx-rose 4s linear infinite;
}
@keyframes fx-rose {
  0%   { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}

/* ============================================================
   ④ platinum — 플래티넘 블루실버 흐름
   ============================================================ */
.tel.platinum,
.hd_tel.platinum {
  background: linear-gradient(90deg, #c8d8e8, #eef4fa, #a8c0d8, #f0f4f8, #c0d0e0, #eef4fa, #c8d8e8);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 6px rgba(160,200,240,0.5));
  animation: fx-platinum 5s linear infinite;
}
@keyframes fx-platinum {
  0%   { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}

/* ============================================================
   ⑤ sunset — 선셋 웜 그라데이션 흐름
   ============================================================ */
.tel.sunset,
.hd_tel.sunset {
  background: linear-gradient(90deg, #ff6b6b, #ee5a24, #f0932b, #ffda79, #f0932b, #ee5a24, #ff6b6b);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(240,90,30,0.45));
  animation: fx-sunset 5s linear infinite;
}
@keyframes fx-sunset {
  0%   { background-position: 0% 0; }
  100% { background-position: 400% 0; }
}

/* ============================================================
   ⑥ candy — 캔디 파스텔 흐름
   ============================================================ */
.tel.candy,
.hd_tel.candy {
  background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #c3cfe2, #a1c4fd, #fbc2eb, #fad0c4, #ff9a9e);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(255,154,158,0.35));
  animation: fx-candy 6s linear infinite;
}
@keyframes fx-candy {
  0%   { background-position: 0% 0; }
  100% { background-position: 500% 0; }
}

/* ============================================================
   ⑦ pastel-pink — 파스텔 핑크 글로우
   ============================================================ */
.tel.pastel-pink,
.hd_tel.pastel-pink {
  color: #ffb6c1;
  animation: fx-pastel-pink 3s ease-in-out infinite;
}
@keyframes fx-pastel-pink {
  0%, 100% { color: #ffb6c1; text-shadow: 0 0 6px rgba(255,150,180,0.5), 0 0 14px rgba(255,100,140,0.3); }
  50%       { color: #ffccd5; text-shadow: 0 0 12px rgba(255,170,200,0.8), 0 0 28px rgba(255,120,160,0.55); }
}

/* ============================================================
   ⑧ pastel-blue — 파스텔 스카이블루 글로우
   ============================================================ */
.tel.pastel-blue,
.hd_tel.pastel-blue {
  color: #b3d9ff;
  animation: fx-pastel-blue 3s ease-in-out infinite;
}
@keyframes fx-pastel-blue {
  0%, 100% { color: #b3d9ff; text-shadow: 0 0 6px rgba(100,180,255,0.5), 0 0 14px rgba(60,150,255,0.3); }
  50%       { color: #cce8ff; text-shadow: 0 0 12px rgba(140,200,255,0.8), 0 0 28px rgba(80,170,255,0.55); }
}

/* ============================================================
   ⑨ pastel-mint — 파스텔 민트 글로우
   ============================================================ */
.tel.pastel-mint,
.hd_tel.pastel-mint {
  color: #a8f0d8;
  animation: fx-pastel-mint 3s ease-in-out infinite;
}
@keyframes fx-pastel-mint {
  0%, 100% { color: #a8f0d8; text-shadow: 0 0 6px rgba(80,230,170,0.5), 0 0 14px rgba(40,200,140,0.3); }
  50%       { color: #c2f8e6; text-shadow: 0 0 12px rgba(100,240,190,0.8), 0 0 28px rgba(60,215,155,0.55); }
}

/* ============================================================
   ⑩ pastel-peach — 파스텔 피치 글로우
   ============================================================ */
.tel.pastel-peach,
.hd_tel.pastel-peach {
  color: #ffd5b0;
  animation: fx-pastel-peach 3s ease-in-out infinite;
}
@keyframes fx-pastel-peach {
  0%, 100% { color: #ffd5b0; text-shadow: 0 0 6px rgba(255,180,100,0.5), 0 0 14px rgba(255,140,60,0.3); }
  50%       { color: #ffe4c8; text-shadow: 0 0 12px rgba(255,200,130,0.8), 0 0 28px rgba(255,160,80,0.55); }
}

/* ============================================================
   ⑪ neon — 네온 시안옐로우
   ============================================================ */
.tel.neon,
.hd_tel.neon {
  color: #fff;
  animation: fx-neon 2s ease-in-out infinite alternate;
}
@keyframes fx-neon {
  from { text-shadow: 0 0 5px #ffef00, 0 0 12px #ffef00, 0 0 22px #ff9500; }
  to   { text-shadow: 0 0 10px #ffef00, 0 0 25px #ffef00, 0 0 50px #ff9500, 0 0 80px rgba(255,149,0,0.4); }
}

/* ============================================================
   ⑫ neon-pink — 네온 핫핑크
   ============================================================ */
.tel.neon-pink,
.hd_tel.neon-pink {
  color: #ff85c8;
  animation: fx-neon-pink 2s ease-in-out infinite alternate;
}
@keyframes fx-neon-pink {
  from { text-shadow: 0 0 5px #ff69b4, 0 0 12px #ff1493, 0 0 22px #c71585; }
  to   { text-shadow: 0 0 10px #ff85c8, 0 0 25px #ff1493, 0 0 50px #c71585, 0 0 80px rgba(199,21,133,0.4); }
}

/* ============================================================
   ⑬ neon-purple — 네온 퍼플
   ============================================================ */
.tel.neon-purple,
.hd_tel.neon-purple {
  color: #da90f0;
  animation: fx-neon-purple 2s ease-in-out infinite alternate;
}
@keyframes fx-neon-purple {
  from { text-shadow: 0 0 5px #da70d6, 0 0 12px #9932cc, 0 0 22px #6a0dad; }
  to   { text-shadow: 0 0 10px #e090ff, 0 0 25px #9932cc, 0 0 50px #7000cc, 0 0 80px rgba(106,13,173,0.4); }
}

/* ============================================================
   ⑭ storm — 번개 블루 (순간 섬광)
   ============================================================ */
.tel.storm,
.hd_tel.storm {
  color: #b8cce4;
  animation: fx-storm 4s ease-in-out infinite;
}
@keyframes fx-storm {
  0%, 100% { color: #b0bec5; text-shadow: 0 0 4px rgba(96,125,139,0.6); opacity: 1; }
  8%        { color: #ffffff; text-shadow: 0 0 30px #fff, 0 0 60px #90caf9, 0 0 100px #42a5f5; opacity: 1; }
  10%       { color: #b0bec5; text-shadow: 0 0 4px rgba(96,125,139,0.6); opacity: 0.8; }
  28%       { color: #b0bec5; text-shadow: 0 0 4px rgba(96,125,139,0.6); opacity: 1; }
  30%       { color: #ffffff; text-shadow: 0 0 40px #fff, 0 0 80px #64b5f6, 0 0 120px #1e88e5; opacity: 1; }
  32%       { color: #ffffff; text-shadow: 0 0 20px #fff, 0 0 45px #90caf9; opacity: 0.9; }
  34%       { color: #b0bec5; text-shadow: 0 0 4px rgba(96,125,139,0.6); opacity: 1; }
}

/* ============================================================
   ⑮ lightning-purple — 번개 퍼플
   ============================================================ */
.tel.lightning-purple,
.hd_tel.lightning-purple {
  color: #ce93d8;
  animation: fx-lt-purple 4.5s ease-in-out infinite;
}
@keyframes fx-lt-purple {
  0%, 100% { color: #ab77c0; text-shadow: 0 0 4px rgba(140,80,180,0.5); opacity: 1; }
  7%        { color: #f3e5f5; text-shadow: 0 0 30px #f3e5f5, 0 0 60px #ce93d8, 0 0 100px #ab47bc; opacity: 1; }
  9%        { color: #ab77c0; text-shadow: 0 0 4px rgba(140,80,180,0.5); opacity: 0.8; }
  25%       { color: #ab77c0; text-shadow: 0 0 4px rgba(140,80,180,0.5); opacity: 1; }
  27%       { color: #ffffff; text-shadow: 0 0 40px #f8f0ff, 0 0 80px #e040fb, 0 0 120px #aa00ff; opacity: 1; }
  29%       { color: #ce93d8; text-shadow: 0 0 15px #e040fb; opacity: 0.9; }
  31%       { color: #ab77c0; text-shadow: 0 0 4px rgba(140,80,180,0.5); opacity: 1; }
}

/* ============================================================
   ⑯ lightning-gold — 번개 골드
   ============================================================ */
.tel.lightning-gold,
.hd_tel.lightning-gold {
  color: #e8c96a;
  animation: fx-lt-gold 3.8s ease-in-out infinite;
}
@keyframes fx-lt-gold {
  0%, 100% { color: #c9a84c; text-shadow: 0 0 4px rgba(180,140,40,0.5); opacity: 1; }
  6%        { color: #fffde7; text-shadow: 0 0 30px #fffde7, 0 0 60px #ffd700, 0 0 100px #ff8c00; opacity: 1; }
  8%        { color: #c9a84c; text-shadow: 0 0 4px rgba(180,140,40,0.5); opacity: 0.8; }
  22%       { color: #c9a84c; text-shadow: 0 0 4px rgba(180,140,40,0.5); opacity: 1; }
  24%       { color: #ffffff; text-shadow: 0 0 40px #fff9c4, 0 0 80px #ffd700, 0 0 120px #ff6f00; opacity: 1; }
  26%       { color: #e8d060; text-shadow: 0 0 15px #ffd700; opacity: 0.9; }
  28%       { color: #c9a84c; text-shadow: 0 0 4px rgba(180,140,40,0.5); opacity: 1; }
}

/* ============================================================
   ⑰ ice — 얼음 블루 글로우
   ============================================================ */
.tel.ice,
.hd_tel.ice {
  color: #b3e5fc;
  animation: fx-ice 3s ease-in-out infinite;
}
@keyframes fx-ice {
  0%, 100% { color: #b3e5fc; text-shadow: 0 0 8px #e1f5fe, 0 0 18px #81d4fa, 0 0 36px #4fc3f7; filter: brightness(1); }
  50%       { color: #e1f5fe; text-shadow: 0 0 14px #e1f5fe, 0 0 32px #81d4fa, 0 0 60px #29b6f6; filter: brightness(1.15); }
}

/* ============================================================
   ⑱ frost — 서리 화이트 결정
   ============================================================ */
.tel.frost,
.hd_tel.frost {
  color: #edf6fc;
  animation: fx-frost 3.5s ease-in-out infinite;
}
@keyframes fx-frost {
  0%, 100% { color: #d8eef8; text-shadow: 0 0 8px rgba(220,240,255,0.6), 0 0 18px rgba(180,220,255,0.4), 0 0 36px rgba(140,200,250,0.25); filter: brightness(1); }
  50%       { color: #f0f8ff; text-shadow: 0 0 14px rgba(240,250,255,0.9), 0 0 30px rgba(200,235,255,0.7), 0 0 55px rgba(160,215,255,0.45); filter: brightness(1.2); }
}

/* ============================================================
   ⑲ diamond — 다이아몬드 결정 반짝
   ============================================================ */
.tel.diamond,
.hd_tel.diamond {
  background: linear-gradient(135deg, #ffffff, #c8e6fa, #e8f4fd, #ffffff, #a8d8f0, #e0f2fd, #ffffff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-diamond 4s ease infinite;
}
@keyframes fx-diamond {
  0%   { background-position: 0% 0%;   filter: drop-shadow(0 0 5px rgba(130,210,250,0.5)) brightness(1); }
  25%  { background-position: 100% 0%; filter: drop-shadow(0 0 10px rgba(130,210,250,0.75)) brightness(1.1); }
  50%  { background-position: 100% 100%; filter: drop-shadow(0 0 5px rgba(130,210,250,0.5)) brightness(1); }
  75%  { background-position: 0% 100%; filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)) brightness(1.2); }
  100% { background-position: 0% 0%;   filter: drop-shadow(0 0 5px rgba(130,210,250,0.5)) brightness(1); }
}

/* ============================================================
   ⑳ aurora — 오로라 (그린-시안-퍼플)
   ============================================================ */
.tel.aurora,
.hd_tel.aurora {
  background: linear-gradient(90deg, #00e5ff, #69ff47, #00e5ff, #d500f9, #69ff47, #00e5ff);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fx-aurora-pos 7s linear infinite, fx-aurora-glow 3.5s ease-in-out infinite;
}
@keyframes fx-aurora-pos {
  0%   { background-position: 0% 0; }
  100% { background-position: 500% 0; }
}
@keyframes fx-aurora-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,229,255,0.5)); }
  50%       { filter: drop-shadow(0 0 20px rgba(105,255,71,0.65)); }
}

/* ============================================================
   ㉑ ocean — 오션 블루 흐름
   ============================================================ */
.tel.ocean,
.hd_tel.ocean {
  background: linear-gradient(90deg, #0077b6, #00b4d8, #48cae4, #90e0ef, #48cae4, #00b4d8, #0077b6);
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0,180,216,0.4));
  animation: fx-ocean 5s linear infinite;
}
@keyframes fx-ocean {
  0%   { background-position: 0% 0; }
  100% { background-position: 500% 0; }
}

/* ============================================================
   ㉒ 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;
  background-clip: text;
  animation: fx-fire 2s ease-in-out infinite alternate;
}
@keyframes fx-fire {
  0%   { background-position: 50% 100%; filter: drop-shadow(0 0 6px rgba(255,69,0,0.6)); }
  100% { background-position: 50% 0%;   filter: drop-shadow(0 0 18px rgba(255,100,0,0.85)); }
}

/* ============================================================
   ㉓ matrix — 매트릭스 그린
   ============================================================ */
.tel.matrix,
.hd_tel.matrix {
  color: #00e676;
  font-family: 'Courier New', monospace;
  animation: fx-matrix 2.5s ease-in-out infinite;
}
@keyframes fx-matrix {
  0%, 100% { color: #00e676; text-shadow: 0 0 5px #00e676, 0 0 14px #00c853, 0 0 28px rgba(0,100,20,0.7); filter: brightness(1); }
  50%       { color: #69ff47; text-shadow: 0 0 10px #69ff47, 0 0 28px #00e676, 0 0 55px rgba(0,150,40,0.6); filter: brightness(1.25); }
}

/* ============================================================
   ㉔ smoke — 스모크 안개 글로우
   ============================================================ */
.tel.smoke,
.hd_tel.smoke {
  color: #c8ccd4;
  animation: fx-smoke 4s ease-in-out infinite;
}
@keyframes fx-smoke {
  0%, 100% { color: #b8bcc4; text-shadow: 0 0 8px rgba(180,185,200,0.5); opacity: 1; }
  50%       { color: #dde0e8; text-shadow: 0 0 18px rgba(210,215,228,0.8), 0 0 36px rgba(180,185,200,0.4); opacity: 0.85; }
}

/* ============================================================
   ㉕ soft-breathe — 소프트 화이트 호흡 글로우
   ============================================================ */
.tel.soft-breathe,
.hd_tel.soft-breathe {
  color: #ffffff;
  animation: fx-breathe 4s ease-in-out infinite;
}
@keyframes fx-breathe {
  0%, 100% { text-shadow: 0 0 4px rgba(255,255,255,0.35); opacity: 0.85; }
  50%       { text-shadow: 0 0 14px rgba(255,255,255,0.9), 0 0 30px rgba(220,235,255,0.55); opacity: 1; }
}

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