/* ============================================================
   비전매치 스와이프 시각 리프레시 (P2, 2026-09-03)
   대상: 사용자가 가장 많이 보는 스와이프 카드 + 액션 버튼.
   방식: 기존 swipe.css 위에 얹는 레이어(파괴 없음, 롤백=이 파일 링크 제거).
   톤: 기존 다크/코랄 정체성 유지, 더 깊은 입체감·세련된 액션.
   ============================================================ */

/* ── 카드: 더 떠 보이고 부드럽게 ── */
.card-front, .card-back{
  border-radius: 22px;
  /* 다층 그림자 — 가까운 선명함 + 먼 부드러움으로 실제로 떠 있는 느낌 */
  box-shadow:
    0 2px 8px rgba(0,0,0,.08),
    0 18px 40px rgba(0,0,0,.16),
    0 1px 0 rgba(255,255,255,.5) inset;
}
[data-theme="dark"] .card-front,
[data-theme="dark"] .card-back{
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 18px 44px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
  border-color: #2c2c2c;
}

/* ── 하단 정보: 더 깊고 자연스러운 그라데이션 + 여백 ── */
.card-info{
  padding: 44px 22px 22px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.55) 42%,
    rgba(0,0,0,.12) 78%,
    transparent 100%);
}
.card-info :is(h2,h3,.name,.card-name){
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── 액션 버튼: 통일 + 핵심(좋아요) 강조 ── */
.btn-swipe{
  width: 62px; height: 62px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.1);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.btn-swipe:hover{ transform: translateY(-3px) scale(1.05); }
.btn-swipe:active{ transform: scale(.92); }

/* 싫어요 — 차분한 회색톤 테두리, 눌렀을 때만 붉게 */
.btn-swipe.nope{
  color: var(--vm-danger, #e0483c);
  border: 1.5px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .btn-swipe.nope{ border-color: rgba(255,255,255,.08); }

/* ★좋아요 — 소개팅 앱의 심장. 브랜드색 채움으로 시선 집중 */
.btn-swipe.like{
  width: 70px; height: 70px;               /* 가장 크게 */
  color: #fff;
  background: linear-gradient(135deg, var(--vm-brand, #ff4b5c), var(--vm-brand-strong, #ff3344));
  box-shadow: 0 8px 22px rgba(255,75,92,.42), 0 2px 6px rgba(255,75,92,.3);
}
.btn-swipe.like:hover{
  box-shadow: 0 12px 28px rgba(255,75,92,.5), 0 3px 8px rgba(255,75,92,.35);
}

/* 되돌리기 — 가장 작고 조용하게(부차 액션) */
.btn-swipe.undo{
  width: 48px; height: 48px;
  color: var(--vm-text-sub, #999);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* 상세보기 — 브랜드 은은하게 */
.btn-swipe.detail-view{
  border-color: var(--vm-brand-weak, rgba(255,75,92,.18));
}