/* ── 주밍 인증카드 진입 플로팅 (메인·아트 공통) ──
   반투명 파스텔 그라데 + backdrop-blur(유리). 우측 얼굴 고정 → 왼쪽으로 X+텍스트 펼침(호버·스크롤).
   배경은 뽑힌 캐릭터색 그라데(카드 색토큰 결) — 메인/아트 무채색에 은은. */
.card-fab {
  position: fixed;
  /* 콘텐츠 우측 라인에 맞춤(메인 .page·아트 모두 max 1080·pad 44 → 탑버튼 .totop과 동일 식) */
  right: calc(max(0px, (100vw - 1080px) / 2) + 44px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; padding: 6px; border-radius: 999px; text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* 안드 탭 시 네모 회색 번쩍임 제거(원형에 안 맞음) */
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 8px 26px rgba(35, 40, 45, 0.14);
  transition: box-shadow 0.2s;
}
/* 캐릭터별 배경 그라데(반투명 유리) — card.css html[data-char] 팔레트. tint→accent-soft(연하게),
   푸들만 tint→accent-2(#fcdf4a)로 대비(레몬 단색계라 tint↔soft 차가 적어 그라데가 안 보였음). */
.card-fab.char-alpaca      { background: linear-gradient(135deg, rgba(251, 238, 241, 0.72), rgba(255, 182, 196, 0.40)); }
.card-fab.char-snowleopard { background: linear-gradient(135deg, rgba(243, 236, 251, 0.72), rgba(228, 186, 245, 0.40)); }
.card-fab.char-poodle      { background: linear-gradient(135deg, rgba(253, 247, 214, 0.78), rgba(252, 223, 74, 0.50)); }

.card-fab img { order: 3; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.card-fab .fab-t {
  order: 2; white-space: nowrap; font-weight: 600; font-size: 15px; color: #3b3540;
  font-family: var(--sans, "Pretendard Variable", Pretendard, -apple-system, sans-serif);
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s, margin 0.35s;
}
.card-fab .fab-x {
  order: 1; flex: none; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  color: #8a828f; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s, margin 0.35s;
}
/* 펼침 = .open(JS: 스크롤·전 기기 공통) */
.card-fab.open .fab-t { max-width: 180px; opacity: 1; margin: 0 12px; }
.card-fab.open .fab-x { max-width: 20px; opacity: 1; margin-left: 6px; }
/* 데스크탑(진짜 마우스 = hover 가능 + 정밀 포인터)만 호버로 펼침 + ✕ 숨김. 모바일은 hover가 눌어붙어
   ✕를 눌러도 안 닫히므로 제외 — 펼침은 .open(스크롤)만, 탭은 항상 이동, ✕는 .open 제거로 접힘.
   ⚠️ pointer: fine 필수 — 일부 안드가 (hover: hover)로 우겨 ✕가 display:none 되며 사라지던 버그 방지.
   fab.js 터치판별 (hover:none),(pointer:coarse)의 정확한 여집합 = (hover:hover) and (pointer:fine). */
@media (hover: hover) and (pointer: fine) {
  .card-fab:hover .fab-t { max-width: 180px; opacity: 1; margin: 0 12px; }
  .card-fab .fab-x { display: none; } /* PC만 ✕ 없음 — hover로 펼치고 마우스 떼면 접힘 */
}
.card-fab:focus-visible { outline: 2px solid rgba(200, 140, 160, 0.9); outline-offset: 3px; }

/* 아트 페이지 = 탑버튼(↑)과 연동. 기본 = 탑버튼 자리(아래), .stacked(JS) = 탑버튼 위 세로 스택.
   right는 위 base(콘텐츠 우측 라인)를 그대로 씀 = 탑버튼(.totop)과 동일. */
.card-fab.fab-art { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.card-fab.fab-art.stacked { bottom: calc(24px + 44px + 14px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 720px) {
  .card-fab { right: calc(22px + env(safe-area-inset-right, 0px)); }
  .card-fab.fab-art { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .card-fab.fab-art.stacked { bottom: calc(28px + 44px + 14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .card-fab .fab-t, .card-fab .fab-x { transition: none; }
}