@charset "utf-8";
/* =========================================================
   방문예약 소셜프루프 토스트 (2026-07 신규)
   - 힐스테이트 안양 펠루스 "N명 예약신청 완료" 팝업 참고
   - 기존 CSS 미수정. 이 파일 + 마크업/스크립트만 제거하면 원상복구.
   - 팔레트: #004655 딥틸 / #8ec43e 라임
   ========================================================= */
.rq-proof{
  position: fixed;
  left: clamp(16px, 2.4vw, 36px);
  bottom: clamp(18px, 3vh, 34px);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 16px 40px rgba(0,40,50,.22),
              inset 0 0 0 1px rgba(0,70,85,.06);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  font-family: 'Pretendard', 'SUIT', sans-serif;
  /* 등장 전: 아래에서 대기 */
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.rq-proof.is-show{
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* 살아있는 느낌의 라임 점 */
.rq-proof__dot{
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8ec43e;
  box-shadow: 0 0 0 0 rgba(142,196,62,.55);
  animation: rqPulse 2.2s ease-out infinite;
}
@keyframes rqPulse{
  0%   { box-shadow: 0 0 0 0 rgba(142,196,62,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(142,196,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(142,196,62,0); }
}

.rq-proof__tx{
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #143038;
  white-space: nowrap;
}
.rq-proof__tx b{
  font-weight: 800;
  color: #2f7d0e;
  font-variant-numeric: tabular-nums;
}

/* 닫기 */
.rq-proof__x{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,70,85,.08);
  color: #4a6670;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.rq-proof__x:hover{
  background: rgba(0,70,85,.16);
  color: #00323d;
}

/* ---------- 모바일 ---------- */
@media (max-width: 768px){
  .rq-proof{
    left: 12px;
    right: 12px;
    /* 하단 고정 CTA 바(.quick, 높이 76px) 위로 띄운다 — 안 그러면 가려짐 */
    bottom: 90px;
    max-width: none;
    padding: 11px 12px 11px 14px;
    z-index: 100000;   /* .quick(99999) 보다 위 */
  }
  .rq-proof__tx{
    font-size: 12.5px;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce){
  .rq-proof{ transition: opacity .5s ease; transform: none; }
  .rq-proof__dot{ animation: none; }
}