/* 화면 아래 고정 바(전화하기 / 오시는 길): 누르면 짧은 동작 후 연결 (quickbar-fx.js와 함께 사용) */
.quickbar a { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.quickbar svg { transform-origin: 50% 60%; }
.qb-ripple { position: absolute; left: 50%; top: 50%; width: 30px; aspect-ratio: 1; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; }

/* 전화하기: 수화기가 따르릉 흔들리고 물결이 퍼짐 */
.quickbar a.qb-call svg { animation: ring .6s linear both; }
.quickbar a.qb-call .qb-ripple { animation: ripple .6s ease-out both; }
.quickbar a.qb-call .qb-ripple + .qb-ripple { animation-delay: .18s; }
@keyframes ring {
  0%, 100% { transform: none; }
  10% { transform: rotate(-18deg) scale(1.15); } 20% { transform: rotate(16deg) scale(1.15); }
  30% { transform: rotate(-16deg) scale(1.15); } 40% { transform: rotate(14deg) scale(1.15); }
  50% { transform: rotate(-10deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.1); }
  75% { transform: rotate(-3deg); }
}
@keyframes ripple { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(4.5); } }

/* 오시는 길: 지도 핀이 톡 튀어 오른 뒤 꽂히며 바닥에 파문 */
.quickbar a.qb-map svg { animation: pin-drop .55s cubic-bezier(.3, 0, .3, 1) both; transform-origin: 50% 100%; }
.quickbar a.qb-map .qb-ripple { width: 24px; height: 8px; aspect-ratio: auto; margin: 0; border-radius: 50%; animation: pin-ground .55s ease-out both; }
@keyframes pin-drop {
  0%   { transform: none; }
  35%  { transform: translateY(-9px) scale(1.12); }
  60%  { transform: translateY(1px) scaleY(.82) scaleX(1.12); }
  78%  { transform: translateY(-2px); }
  100% { transform: none; }
}
@keyframes pin-ground { 0%, 50% { opacity: 0; transform: scale(.4); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(2.4); } }

@media (prefers-reduced-motion: reduce) { .quickbar a svg, .quickbar a .qb-ripple { animation: none !important; } }