@charset "utf-8";
/* assets/css/style.css */
/* └── 전역 공용 스타일 (Bootstrap 위에 추가) */

/* 본문 전체 폰트 설정 */
body {
   font-family: 'Noto Sans KR', sans-serif;
   background-color: #f8f9fa;
   color: #343a40;
}

/* 인기 목적지, 추천 차량 카드 */
.popular-card,
.vehicle-card {
   border-radius: 12px;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.popular-card:hover,
.vehicle-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 후기 카드 */
.review-card {
   border-radius: 12px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Hero 섹션 높이 조절 (이미지 비율 유지) */
.hero-section {
   position: relative;
}
.hero-section .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
}

/* 검색 폼 input 스타일 */
.search-form .form-control {
   background-color: rgba(255, 255, 255, 0.9);
   border: none;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   font-size: 1rem;
}
.search-form .form-control:focus {
   border-color: #ff5a5f;
   box-shadow: 0 0 0 0.2rem rgba(255, 90, 95, 0.25);
   background-color: #fff;
}

/* 검색 버튼 스타일 */
.search-form .btn-primary {
   background-color: #ff5a5f;
   border-color: #ff5a5f;
   font-weight: 600;
}
.search-form .btn-primary:hover {
   background-color: #e0484c;
   border-color: #e0484c;
}

/* CTA 섹션 */
section.py-5.text-center.text-white {
   background-color: #6c757d;
}
section.py-5.text-center.text-white .btn-danger {
   background-color: #dc3545;
   border-color: #dc3545;
}
section.py-5.text-center.text-white .btn-danger:hover {
   background-color: #bb2d3b;
   border-color: #bb2d3b;
}

/* Google 번역 위젯 스타일 커스터마이징 예시 */
#google_translate_element {
  margin-top: 10px;
  text-align: right;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* 드롭다운 스타일 변경 */
.goog-te-combo {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* 반응형 조정 */
@media (max-width: 576px) {
   .hero-section h1 {
      font-size: 2.5rem;
   }
   .search-form .form-control {
      font-size: 0.9rem;
   }
   .search-form .btn-primary {
      font-size: 0.9rem;
   }
}