/* 기본 폰트 크기 설정 */
html {
  font-size: 16px; /* 기본 폰트 크기 */
}

ol, ul {
  list-style: none;
}

/* 확인 버튼 스타일 */
.link {
  cursor: pointer;
}

/* 검색 폼 스타일 */
.search-form {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* 네비 검색 폼 스타일 */

.search-form-nav {
  width: 100%;
}

.search-button-nav {
  width: 250px; /* 모든 버튼의 너비를 동일하게 설정 */
  height: 42px; /* 모든 버튼의 높이를 동일하게 설정 */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 설정 */
  overflow: hidden; /* 내용이 넘치면 숨김 처리 */
  text-overflow: ellipsis; /* 넘치는 텍스트는 ... 처리 */
  padding: 0 10px; /* 좌우 패딩 추가 */
}

/* 검색하기 버튼도 동일한 사이즈로 맞춤 */
.nav-serch-btn {
  width: 100px; /* 검색하기 버튼도 동일한 너비로 설정 */
  height: 42px;
}

.search-form-nav-md{
  display: none !important;
}


/* 검색 버튼 공통 스타일 */
.search-button {
  border: none;
  background-color: #F1F1F1;
  color: #333;
  text-align: left;
  border-radius: 8px;
  padding: 12px 16px;
  width: 100%;
  transition: background-color 0.2s;
}

.search-button:hover {
  background-color: #e9e9e9;
}

/* 검색 제출 버튼 */
.search-submit-button {
  border-radius: 8px;
  font-weight: 500;
}

button {
    border: none;
    padding: 0px;
}
.navbar-brand {
  margin-right: 200px; /* 기본 간격 */
}

body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  padding: 10px;
}

main {
  padding-top: 100px;
  padding-bottom: 144px;
}
#bg-img {
/*  background-image: linear-gradient(3deg,rgba(0,0,0,0.0), rgba(0,0,0,0.8)),
  url('./assets/imgs/reservation/2248874.jpg');*/
  background-size: cover;
  background-position: center;
  overflow: hidden; 
}
#bg-img-reverse {
/*  background-image: linear-gradient(3deg, rgba(0,0,0,0.8), rgba(0,0,0,0.0)),
  url('/assets/imgs/reservation/2248874.jpg');*/
  background-size: cover;
  background-position: center;
  overflow: hidden; 
}
#hero-bg-img {
  background-image: /*linear-gradient(3deg,rgba(0,0,0,0.0), rgba(0,0,0,0.8)),*/ url('/_web/_images2/main_bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;   
}

#banner-bg-img {
  background-image: url('/_web/_images2/main_banner2.png');
  background-size: auto;
  background-position: center;
  overflow: hidden;   
  background-repeat : no-repeat;
}

#banner-bg-sub-img {
  background-image: url('/_web/_images2/sub_banner.png');
  background-size: auto;
  background-position: center;
  overflow: hidden;   
  background-repeat : no-repeat;
}

/* 컬러 지정*/
.primary {
    background-color: #2C4892;
}
.primary-sub{
    background-color: #CADBED;
}
.gray300 {
    background-color: #F1F1F1;
}
.viewport-80vh{
    height: 80vh;
}
.hero-height{
    height: 600px;
}

.banner-height{
    height: 80px;
    background-color: #FFD800;
}

.big-card-height {
    height: 500px;
}
.small-card-height {
/*    height: 280px;*/  
  width: 100%;
  aspect-ratio: 6 / 4;
}
.tiny-card-height {
/*    height: 234px;*/
/*    height: 150px !important;*/
  width: 100%;
  aspect-ratio: 6 / 4;
}
.tiny-card-sub-height {
/*    height: 175px;*/
  width: 100%;
  aspect-ratio: 6 / 4;
}
.footer-height {
    height: 350px;
}
.none-text-decoration{
    text-decoration: none;
}

.main-top-margin{
    margin-top: 30px;
}

.area-top-margin{
    margin-top: 64px;
}
.footer-margin-left {
    margin-left: 330px;
}
.partners-bg {
  background-color: #CADBED;
}
.partners-logo {
  width: 200px;
  height: 40px;
}

ul.partner_list {
/*  margin-top: 25px;*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
ul.partner_list li {
  width: 150px;
  height: 45px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 스크롤바 완전 숨김 */
.overflow-auto::-webkit-scrollbar {
  display: none;
}

.overflow-y-auto {
  overflow-y: auto; /* 세로 스크롤 활성화 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #888 transparent; /* 스크롤 바 색상 */
}

/* Chrome/Safari 스크롤 바 스타일링 */
.overflow-y-auto::-webkit-scrollbar {
  width: 8px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 4px;
}

.h-200 { height: 200px; } /* 카드 높이 고정 */


/* 스크롤 버튼 스타일 */
.carousel-control-prev, .carousel-control-next {
  width: 40px;
  height: 40px;
  opacity: 0.8;
  border: none;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-size: 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 스크롤바 숨김 유지 */
#scrollContainer::-webkit-scrollbar {
  display: none;
}

#scrollContainer {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 인원 선택 모달 스타일 */
#personModal .btn-light {
  background-color: #E9ECEF;
  border: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#personModal .person-count {
  font-size: 16px;
  font-weight: 500;
  min-width: 40px;
  text-align: center;
}

#personModal .modal-footer .btn-primary {
  background-color: #2C4892;
  border: none;
}

/* Bootstrap Icons 대체 */
.bi-chevron-left:before {
  content: "<";
  font-weight: bold;
}

.bi-chevron-right:before {
  content: ">";
  font-weight: bold;
}

#imgModal .modal-body {
  min-height: 300px;
  overflow-x: hidden;
  padding: 3px 3px 40px;
}

/* 모달 대화상자 스타일 */
#dateModal .modal-dialog {
  max-width: 650px;
  width: 90%;
  margin: 1.75rem auto;
}

/* 모달 내용 영역 */
#dateModal .modal-body {
  padding: 20px;
}

/* 모달 푸터 숨김 (자동 적용 모드) */
#dateModal .modal-footer {
  display: none;
}

/* DateRangePicker 기본 스타일 */
.daterangepicker {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  border-radius: 8px;
  width: 100%;
  margin: 0;
}

/* 모달 내 DateRangePicker 컨테이너 */
#daterangepicker-container .daterangepicker {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
}

/* 캘린더 좌우 레이아웃 */
.daterangepicker .drp-calendar {
  max-width: 50%;
  margin: 0 auto;
}

/* 캘린더 셀 기본 스타일 */
.daterangepicker .calendar-table th, 
.daterangepicker .calendar-table td {
  padding: 10px;
  font-size: 16px;
  width: 44px;
  height: 44px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}

.daterangepicker .calendar-table th:nth-child(1):hover, .daterangepicker .drp-calendar th:nth-child(3):hover{
  background-color: #fff !important;
}

.daterangepicker .calendar-table th:nth-child(1) span, .daterangepicker .drp-calendar th:nth-child(3) span{
  color: #fff !important;
  border: 0 !important;
}
/* 월 제목 스타일 */
.daterangepicker .month {
  font-size: 18px;
  font-weight: bold;
  width: 100% !important;
  min-width: 500px;
}

/* 확인 버튼 영역 숨김 */
.daterangepicker .drp-buttons {
  display: none;
}

/* ===== 날짜 선택 관련 스타일 ===== */

/* 선택된 시작일과 종료일 (진한 파란색 원형) */
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    border-radius: 50% !important;
    background-color: #2C4892 !important; /* 진한 파란색 */
    color: white !important;
}

/* 범위 내 날짜 (네모) */
.daterangepicker td.in-range {
    background-color: #e8edf7 !important;
    border-radius: 0 !important;
    color: #333 !important;
}

/* 시작일 오른쪽 모서리 조정 */
.daterangepicker td.start-date:not(.end-date) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 종료일 왼쪽 모서리 조정 */
.daterangepicker td.end-date:not(.start-date) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}


/* 범위 내 날짜에 호버 시에도 네모 유지 */
.daterangepicker td.in-range:hover {
    background-color: #d4dff1 !important;
    border-radius: 0 !important;
}

/* Active 상태 통일 - 진한 파란색 원형 */
.daterangepicker td.active, 
.daterangepicker td.active:hover {
    background-color: #2C4892 !important;
    color: white !important;
    border-radius: 50% !important;
}

/* 주말 색상 */
.daterangepicker .text-danger {
  color: #ff4d4d !important;
}

.daterangepicker .text-primary {
  color: #2C4892 !important;
}

/* 달력 네비게이션 스타일 */
.calendar-navigation {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  padding: 0 10px;
}

.calendar-navigation button {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;
  color: #2C4892;
  font-weight: bold;
  transition: transform 0.2s, color 0.2s;
}

.calendar-navigation button:hover {
  color: #1a3273;
  transform: scale(1.1);
}

/* 목적지 선택 모달 스타일 */
.destination-modal .modal-dialog {
  max-width: 500px;
  height: 650px;
  margin: 1.75rem auto;
}

/* 목적지 선택 모달 스타일 */
.destination-modal .modal-dialog .modal-content {
  height: 650px;
}
.destination-modal .modal-header {
  border-bottom: none;
  padding: 20px 20px 10px;
}

.destination-modal .modal-title {
  font-weight: 600;
  font-size: 18px;
}

.destination-modal .modal-body {
  padding: 10px 20px 20px;
}

/* 검색창 스타일 */
.search-input-container {
  position: relative;
  margin-bottom: 20px;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #888;
}

.search-input-container .form-control {
  padding-left: 45px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: none;
  background-color: #f8f8f8;
}

.search-input-container .form-control::placeholder {
  color: #aaa;
}

/* 지역검색 그리드 스타일 */
.area-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 2열 그리드 */
  gap: 12px;
  margin-bottom: 20px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 5px; /* 스크롤바 공간 확보 */
}

.area-item {
  display: block;
  flex-direction: row; /* 명시적으로 가로 방향 지정 */
  align-items: center; /* 세로 중앙 정렬 유지 */
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.area-item .city-name {
  width:100%;
  display: block;
  margin-left: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.area-item .area-name {
  width:100%;
  display: block;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #505050;
}

/* 목적지 그리드 스타일 */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 2열 그리드 */
  gap: 12px;
  margin-bottom: 20px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 5px; /* 스크롤바 공간 확보 */
}

.destination-item {
  display: flex;
  flex-direction: row; /* 명시적으로 가로 방향 지정 */
  align-items: center; /* 세로 중앙 정렬 유지 */
  background-color: #fff;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.area-item:hover, .destination-item:hover {
  background-color: #e8e9eb;
}

.area-item-select, .destination-item-select {
  background-color: #e8e9eb;
}

.destination-item img {
  width: 100px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
}

.destination-item .city-name {
  margin-left: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

/* 확인 버튼 스타일 */
.confirm-btn {
  width: 100%;
  padding: 12px;
  background-color: #2C4892;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}

/* 스크롤바 스타일링 */
.destination-grid::-webkit-scrollbar {
  width: 5px;
}

.destination-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.destination-grid::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.area-height {
    max-height: 90vh; 
    min-height: 800px;
} 

.semas_banner {
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  width: 200px; /* 모든 버튼의 너비를 동일하게 설정 */
  height: 42px; /* 모든 버튼의 높이를 동일하게 설정 */
  background-size: cover;
  background-image:url(/_web/_images/semas.png);
  background-position: 10% 33%;
  background-repeat: no-repeat;  
  margin-right: 10px;  
}

.strike {
    text-decoration: line-through;
    color: #afafaf;
    text-decoration-color: #afafaf;
}

@media (max-width: 1410px) {
  main {
    padding-top: 200px;
    padding-bottom: 144px;
  }
  main.main {
    padding-top: 100px;
    padding-bottom: 144px;
  }
  .search-form-nav {
    display: none;
  }
  .search-form-nav-md {
    display: flex !important;
  }

  .big-card-height {
      height: 36vw !important;
  }

  .small-card-height {
/*      height: 18vw !important;*/
  }  

  .tiny-card-height {
  /*    height: 234px;*/
/*      height: 10vw !important;*/
  }  

  .tiny-card-sub-height {
/*      height: 10vw !important;*/
  }  
}

/* 미디어 쿼리 - 태블릿/데스크톱 */
@media (min-width: 992px) {
  .search-form .row {
      display: flex;
      flex-direction: row !important;
  }
  
  .search-form .col-12 {
      width: auto;
      flex: 1;
  }
  
  .search-form .col-12:last-child {
      width: auto;
      flex: 0 0 auto;
  }     
.flex-direction-nav a {
  height: 50px !important;
}
}

/* 모바일 최적화 */
@media (max-width: 991.98px) {
  .hero-height {
      background-color: #fff !important;
      box-shadow: none !important;
  }
  
  .search-form {
      box-shadow: none !important;
  }
  
  .search-button {
      margin-bottom: 8px;
  }
  .navbar-brand { margin-right: 100px; }
  #hero-bg-img {
    background-image: none !important;
    background-color: none;
  }
  .hero-height {
    height: 18.75rem !important;
    min-height: auto !important;
    padding: 10px 0;
  }  
    .gray300 {
/*      padding: 12px !important;*/
    }
    .gray300 svg {
      width: 18px;
      height: 18px;
    }  
  .carousel-control-prev, 
  .carousel-control-next, .signup {
      display: none !important;
  }   
  .tiny-card-sub-height {
/*      height: 25vw !important;*/
  }   
  .area-height {
      max-height: 90vh; 
      min-height: 350px;
  }    
}

@media (min-width: 768px) {
    [style*="max-height-md"] {
      max-height: var(--desktop-max-height) !important;
    }
    .h-200 { height: 250px; } /* 태블릿 이상 높이 증가 */  
    .card-container {
/*        max-height: 70vh;*/
        /* PC에서의 컨테이너 최대 높이 */
    }
    .col-md-3 {
      width: 24%;
    }
}
@media (max-width: 767px) {
  main {
    padding-top: 180px;
    padding-bottom: 144px;
  }  
  nav.px-5 {
    padding-right: .6rem!important;
    padding-left: .6rem!important;
  }
    /* footer 반응형 설정 추가 */
    .footer-margin-left {
        margin-left: 0 !important;
    }
    
    footer .d-flex {
        flex-direction: column;
    }
    
    footer a.fs-5 {
        font-size: 0.9rem !important;
        margin-right: 1rem;
    }

  #banner-bg-img {
    background-size: 200%;
  }

  /* 모바일 날짜 선택 CSS */
  /* 모바일 환경에서 달력 테이블 고정 레이아웃 적용 */
  .daterangepicker .calendar-table {
    width: 100% !important;
    table-layout: fixed !important;
  }
  
  /* 셀 크기를 명확하게 지정 */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    width: 14.28% !important; /* 100% / 7 */
    /* height: 70px !important; 고정 높이 지정 */
    height: 60px !important;
    line-height: 40px !important;
    padding: 0 !important;
    position: static !important; /* position: relative 제거 */
    font-size: 14px;
  }
  
  /* 날짜 내용물 위치 조정 */
  .daterangepicker .calendar-table td span {
    display: inline-block !important;
    position: static !important; /* absolute 포지셔닝 제거 */
    transform: none !important;
  }
  
  /* 날짜 선택 스타일 */
  .daterangepicker td.active span,
  .daterangepicker td.start-date span,
  .daterangepicker td.end-date span {
    background-color: #2C4892;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block !important;
    margin: 5px auto;
  }
  
  /* 오른쪽 캘린더 숨김 */
  .daterangepicker .drp-calendar.right {
    display: none !important;
  }
  
  /* 캘린더 네비게이션 위치 조정 */
  .calendar-navigation {
    position: relative;
    z-index: 10;
    margin-bottom: 10px;
  }

  .navbar-brand { margin-right: 50px; }

  #bg-img-reverse {
    margin-top: 1rem;
    max-height: 400px !important;
  }  

  .calendar-navigation {
      position: relative;
      z-index: 10;
      padding: 0 5px;
  }
  
  /* 모바일에서 버튼 크기 키우기 */
  .calendar-navigation button {
      padding: 8px 15px;
      font-size: 22px;
  }

  .margin-top-12rem {
    margin-top: 4rem;
  }  
  /* 모달 크기 조정 */
  #dateModal .modal-dialog {
      max-width: 100%;
      width: 95%;
      margin: 10px auto;
  }
  
  /* 모달 내용 영역 패딩 축소 */
  #dateModal .modal-body {
      padding: 10px 5px;
  }
  
  /* 모바일에서 캘린더 한 개만 표시 */
  .daterangepicker .drp-calendar.left {
      max-width: 100% !important;
      width: 100% !important;
  }
  
  /* 캘린더 테이블 확장 */
  .daterangepicker .calendar-table {
      width: 100%;
  }
  
  /* 셀 크기 반응형 조정 */
  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
      width: 14.28%; /* 100% / 7 */
      height: 0;
      padding: 0;
      padding-bottom: 14.28%;
      position: relative;
      font-size: 14px;
  }
  
  /* 셀 내용 중앙 정렬 */
  .daterangepicker .calendar-table th span {
      position: absolute;
/*      top: 50%;
      left: 50%;*/
      transform: translate(-50%, -50%);
  }
  .daterangepicker .calendar-table td span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  /* 월 제목 크기 축소 */
  .daterangepicker .month {
      font-size: 16px;
  }
  
  /* 여백 조정 */
  .daterangepicker .drp-calendars {
      padding: 0;
  }

  .big-card-height {
      height: 60vw !important;
  }  
  .small-card-height {
/*      height: 35vw !important;*/
  }    
  .tiny-card-height {
/*      height: 30vw !important;*/
  }    
  .tiny-card-sub-height {
/*      height: 45vw !important;*/
  }  
  .area-height {
      max-height: 90vh; 
      min-height: 250px;
  }      
  .card-container {
/*      max-height: 80vh;*/
      /* 모바일에서의 컨테이너 최대 높이 */
  }
}

/* 모바일 최적화 */
@media (max-width: 576px) {
  .navbar-brand { margin-right: 8px; }
  #personModal .modal-dialog {
    max-width: 90%; /* 화면 너비의 90%로 설정 */
    margin: 1rem auto;
  }    
  .destination-grid {
      grid-template-columns: 1fr; /* 모바일에서는 1열로 변경 */
  }
  .big-card-height {
      height: 65vw !important;
  }  
  .small-card-height {
/*      height: 37vw !important;*/
  }    
  .tiny-card-height {
/*      height: 32vw !important;*/
  } 
 .tiny-card-sub-height {
/*      height: 45vw !important;*/
  }  
  .col-6 {
      width: 48%;
  }
  ul.partner_list li {
    width: 160px;
    height: 45px;
  }
}