/* 카스팟 커스텀 스타일 */
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
#app { height: 100vh; height: 100dvh; }
body { overscroll-behavior: none; }

/* 네이버 지도 컨테이너 */
#map, #pick-map { background: #1a1a1a; }
/* 지도 래퍼: 뷰포트 전체 높이를 명시적으로 확보 (중첩 h-full 타이밍 문제 방지) */
.map-wrap { position: fixed; inset: 0; height: 100vh; height: 100dvh; width: 100vw; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 네이버 지도 내부 요소가 컨테이너를 꽉 채우도록 강제 */
#map > div:first-child { width: 100% !important; height: 100% !important; }

/* 스팟 마커 */
.spot-marker {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50% 50% 50% 0;
  background: #ff4d2d; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.spot-marker i { transform: rotate(45deg); color: #fff; font-size: 15px; }

/* 체크인 차량 마커 (원형 차 사진) */
.car-marker {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid #ff4d2d; overflow: hidden; background: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6); position: relative;
}
.car-marker img { width: 100%; height: 100%; object-fit: cover; }
.car-marker .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: #ff4d2d; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a;
}
.car-marker-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #ff6f57; font-size: 18px;
}

/* 체크인 마커 + 남은 시간 라벨 래퍼 */
.car-marker-wrap { display: flex; flex-direction: column; align-items: center; width: 64px; }
.car-timeleft {
  margin-top: 3px; white-space: nowrap;
  background: rgba(10,10,10,0.85); color: #ffd9d0;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 8px;
  border: 1px solid rgba(255,77,45,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 바텀시트 애니메이션 */
.sheet-enter { transform: translateY(100%); }
.sheet-show { transform: translateY(0); transition: transform .28s cubic-bezier(.32,.72,0,1); }

/* 스크롤바 숨김 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 라인 클램프 */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.toast { animation: toastIn .2s ease; }