/* =========================================================
   Duovly Design System — micro-interactions & atom polish
   Source: claude.ai/design · DuovlyDesignSystem_eccff7
   Spec: components/core/Button, components/core/Chip,
         components/trust/AvailabilityChip, readme.md
   구조/레이아웃 변경 없음 — 전역·기존 클래스 셀렉터 + 토큰만 사용.
   토큰 색값은 그대로(리스킨 없음). 동작/디테일만 디자인시스템 스펙으로.
   ========================================================= */

/* ---- Tabular numerals (DS: 가격/스탯 숫자는 항상 tabular) ---- */
.phone { font-variant-numeric: tabular-nums; }

/* ---- Button press feedback (DS Button: press 시 scale, 색 플래시 금지) ---- */
button {
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
button:not(:disabled):active { transform: scale(.97); }

/* ---- Filter chips (.pill) — DS Chip: smooth fill + press 0.96 ---- */
.pill {
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pill:active { transform: scale(.96); }

/* ---- Card hover lift (DS: 인터랙티브 카드는 hover 시 2px 상승 + 깊은 그림자) ---- */
.duo-mate-card, .duo-featured-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .duo-mate-card:hover, .duo-featured-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-3);
  }
}

/* ---- Availability / live pulse (DS AvailabilityChip "지금 가능" 점) ---- */
@keyframes duovly-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0;  }
  100% { opacity: 0; }
}
/* 라이브 섹션 점 (mint) */
.live-dot { position: relative; }
.live-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--mint-500);
  animation: duovly-pulse 1.8s var(--ease-out) infinite;
  pointer-events: none;
}
/* 상태바 온라인 점 — online 클래스일 때만 펄스 (offline 오발광 방지) */
.sb-presence.online .sb-dot { position: relative; }
.sb-presence.online .sb-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--mint-500);
  animation: duovly-pulse 1.8s var(--ease-out) infinite;
  pointer-events: none;
}