/* ============================================================
 * 프리뷰 모드 전용 스타일 (?preview=1)
 * - 네이버맵 로드 불가 상태에서도 사이드바/바텀시트 UI 확인 가능
 * - 실제 운영 빌드에는 링크하지 않음 (index.html에서 preview 파라미터 시만)
 * ============================================================ */

body.preview-mode #map {
  background:
    linear-gradient(135deg, rgba(15,118,110,0.05) 0%, rgba(124,58,237,0.05) 100%),
    repeating-linear-gradient(0deg, #e5e7eb 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, #e5e7eb 0 1px, transparent 1px 60px),
    #f9fafb;
  position: relative;
}

body.preview-mode #map::before {
  content: "🗺️ 프리뷰 모드 — 지도는 배포 후 네이버맵으로 표시됩니다";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.92);
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-size: 14px;
  color: var(--color-gray-700);
  pointer-events: none;
  white-space: nowrap;
}

/* 프리뷰 모드: 데스크톱에서 사이드바 강제 표시 */
@media (min-width: 768px) {
  body.preview-mode #sidebar {
    display: block !important;
    transform: translateX(0) !important;
    visibility: visible !important;
  }
}

/* 프리뷰 모드: 모바일에서 바텀시트 half 상태로 표시 */
@media (max-width: 767px) {
  body.preview-mode #bottom-sheet {
    display: block !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
  body.preview-mode #bottom-sheet.is-half,
  body.preview-mode #bottom-sheet {
    height: 60vh !important;
  }
}

/* 프리뷰 모드 배너 */
body.preview-mode::before {
  content: "PREVIEW MODE — 로그인/Firestore 생략";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #F59E0B;
  color: white;
  padding: 4px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  font-weight: 600;
  z-index: 99999;
  letter-spacing: 0.5px;
}