@charset "UTF-8";

body {
  font-family: 'Pretendard', sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  overflow-x: hidden;
}

.font-outfit {
  font-family: 'Outfit', sans-serif;
}

/* 끊김 없는 60fps 도로 비스듬한 중앙선 이동 애니메이션 */
@keyframes moveRoadSeamless {
  0% { background-position-x: 0px; }
  100% { background-position-x: -140px; }
}

.road-dash-line {
  height: 3px !important;
  background-image: repeating-linear-gradient(
    -35deg,
    #facc15 0px,
    #facc15 32px,
    transparent 32px,
    transparent 70px
  );
  background-size: 140px 3px;
  animation: moveRoadSeamless 0.5s linear infinite;
  opacity: 0.95;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* 무한 루프 배경 풍경 (산, 빌딩, 나무) 3단계 완전 끊김없는 심리스 이동 애니메이션 */
@keyframes loopLandscapeMove {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-33.333333%, 0, 0); }
}

.landscape-loop-track {
  display: flex !important;
  width: 300% !important;
  height: 100% !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  animation: loopLandscapeMove 35s linear infinite;
  will-change: transform;
  margin: 0 !important;
  padding: 0 !important;
}

.landscape-block {
  width: 33.333333% !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-around !important;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  box-sizing: border-box;
}

.landscape-block svg {
  display: block !important;
  vertical-align: bottom !important;
  margin-bottom: 0px !important;
  flex-shrink: 0;
}

/* 구름 부드러운 왼쪽 이동 애니메이션 */
@keyframes loopCloudsMove {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.clouds-loop-track {
  display: flex !important;
  width: 200% !important;
  height: 100% !important;
  align-items: center !important;
  animation: loopCloudsMove 55s linear infinite;
  will-change: transform;
}

.clouds-loop-track svg {
  display: block !important;
  overflow: visible !important;
  flex-shrink: 0;
}

/* 바퀴 제자리 회전 (포물선 궤도 방지) */
@keyframes spinWheelInPlace {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wheel-spinning {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinWheelInPlace 0.28s linear infinite;
}

/* 애니메이션 일시정지 상태 */
.anim-paused {
  animation-play-state: paused !important;
}

/* 버스 엔진 미세 진동 효과 */
@keyframes busVibe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

.bus-body-vibe {
  animation: busVibe 0.35s ease-in-out infinite;
}

/* 눈 내리는 애니메이션 */
@keyframes snowfall {
  0% { transform: translateY(-10px) translateX(0); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translateY(180px) translateX(30px); opacity: 0.2; }
}
.snow-flake {
  animation: snowfall linear infinite;
}

/* 벚꽃 날리는 애니메이션 */
@keyframes blossomFall {
  0% { transform: translateY(-10px) translateX(0) rotate(0deg); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translateY(180px) translateX(45px) rotate(360deg); opacity: 0.2; }
}
.petal-flake {
  animation: blossomFall linear infinite;
}

/* 별빛 반짝임 */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
.star-twinkle {
  animation: twinkle 2s ease-in-out infinite;
}

/* 견적서 모달 폼 슬라이드업 애니메이션 */
.form-slide-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 글래스 모달 카드 효과 */
.glass-modal {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 폼 내부 커스텀 스크롤바 */
.modal-scroll::-webkit-scrollbar {
  width: 6px;
}
.modal-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.modal-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ==========================================================
   GOOGLE FORMS MINIMAL STYLE INPUTS
   배경 없이 깔끔한 1px 직선 언더라인 스타일
   ========================================================== */
.gform-group {
  background-color: transparent;
  border-radius: 0 !important;
  padding: 6px 4px;
  border-bottom: 1px solid #cbd5e1;
  transition: all 0.2s ease-in-out;
}
.gform-group:focus-within {
  background-color: transparent;
  border-bottom: 1px solid #059669;
  box-shadow: none;
}

.gform-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}
.gform-group:focus-within .gform-label {
  color: #047857;
}

.gform-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
  padding: 3px 0;
}
.gform-input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}

/* 네이티브 캘린더 아이콘 완전 숨김 및 인풋 전체 클릭 가능 처리 */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.date-display-2line {
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
}




/* -------------------------------------------------------------
   LANDSCAPE & ROAD SHOULDER GROUNDING
   ------------------------------------------------------------- */
#mountainLandscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6.8rem !important;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}

.landscape-loop-track {
  display: flex;
  width: 300% !important;
  height: 6.8rem !important;
  align-items: flex-end;
}

.landscape-block {
  width: 33.333333% !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-around !important;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
}

.landscape-block i {
  line-height: 0.7 !important;
  display: inline-block;
  vertical-align: bottom !important;
  margin-bottom: 0px !important;
}

#roadShoulder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 5;
}


#interactiveBus {
  bottom: 4px !important;
}
@media (min-width: 640px) {
  #interactiveBus {
    bottom: 6px !important;
  }
}
@media (min-width: 768px) {
  #interactiveBus {
    bottom: 8px !important;
  }
}


/* -------------------------------------------------------------
   EMOJI LANDSCAPE PREVIEW STYLES (이모티콘 배경 시안)
   ------------------------------------------------------------- */
.emoji-landscape-block {
  width: 33.333333% !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-around !important;
  padding-bottom: 2px !important;
  margin-bottom: 0px !important;
  box-sizing: border-box;
}

.emoji-item {
  display: inline-block;
  vertical-align: bottom !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  user-select: none;
  transition: transform 0.3s ease;
}

/* =============================================================
   ROOT THEME CSS VARIABLES (GOLD AS DEFAULT & GREEN THEMES)
   ============================================================= */
:root, [data-theme="gold"] {
  --brand-50-rgb: 254 252 232;
  --brand-100-rgb: 254 249 195;
  --brand-200-rgb: 253 230 138;
  --brand-300-rgb: 252 211 77;
  --brand-400-rgb: 251 191 36;
  --brand-500-rgb: 245 158 11;
  --brand-600-rgb: 217 119 6;
  --brand-700-rgb: 180 83 9;
  --brand-800-rgb: 146 64 14;
  --brand-900-rgb: 120 53 15;
  --brand-dark-rgb: 69 26 3;
}

[data-theme="green"] {
  --brand-50-rgb: 240 253 244;
  --brand-100-rgb: 220 252 231;
  --brand-200-rgb: 187 247 208;
  --brand-300-rgb: 134 239 172;
  --brand-400-rgb: 74 222 128;
  --brand-500-rgb: 34 197 94;
  --brand-600-rgb: 22 163 74;
  --brand-700-rgb: 21 128 61;
  --brand-800-rgb: 22 101 52;
  --brand-900-rgb: 20 83 45;
  --brand-dark-rgb: 5 46 22;
}

/* -------------------------------------------------------------
   GLASSMORPHISM STYLES (ABOUT VVIP BUS 유리 효과)
   ------------------------------------------------------------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(5px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(190%) !important;
  border-color: rgba(var(--brand-600-rgb), 0.7) !important;
  box-shadow: 0 16px 35px -8px rgba(var(--brand-600-rgb), 0.22), 0 0 0 1px rgba(var(--brand-600-rgb), 0.4) inset !important;
  transform: translateY(-2px);
}

.glass-stat {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(5px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 15px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

/* ABOUT VVIP BUS 타이틀 및 텍스트 흰색 폰트 & 검정 그림자 효과 */
.about-title-white {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.about-title-gradient-glow {
  filter: 
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.about-desc-white {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 5px rgba(0, 0, 0, 0.5);
}

.about-card-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.5);
}