/* 검색 페이지 */
/* ---공통--- */
.search_wrap { height:auto; padding: 0 0 80px; border- top: 1px solid #ddd; }
.search_title,
.start_select { padding: 0 20px; }

.search_wrap .gs-tit { margin-bottom: 20px; font-size: 18px; font-weight: 600; }
.search_tab_container { 
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 30px 20px;
	/*border-top: 1px solid #efefef;*/
	border-bottom: 1px solid #efefef;
}
.search-tabBtn {
	width: 50%;
	height: 54px;
	padding: 10px 20px;
	border-radius: 50px;
  border: 1px solid #ddd;
	align-items: center;
	text-align: center;
  font-size: 16px; 
  cursor: pointer; 
  font-weight: 400;
  border-radius: 50px !important;
  color: #111;
 }
.search-tabBtn.active {background-color: #06B986; color: #fff; border: #333; font-weight: 500;}

/*goodsSearch : 검색 - 여행일 선택 */
#yearSelect { 
	width: 100px;
	border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  outline: none;
 }
#yearSelect:focus {
  border-color: #06b986;
  box-shadow: 0 0 3px rgba(6, 185, 134, 0.5);
}
.startSelect_box {
	position: relative;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
}
.calendarBtn_wrap {
	postion: relative;
}
#prevBtn { position: absolute; left: 60px; top: 135px; }
#nextBtn { position: absolute; right: 60px; top: 135px; }
.serchBtn_wrap { margin-top: 40px; text-align: center; padding: 0 20px; }
.search-btn {
  width: 70%;
  height: 56px;
  padding: 12px;
  border: none;
  border-radius: 50px !important;
  background: linear-gradient(to right, #85DD91, #06B986);
  font-size: 16px !important;
  font-weight: 400;
  color: #fff;
  cursor: pointer;
}
.btn-reset-search {
	display: inline-block;
	width:20%;
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  text-align: center;
  color: #333;
  background: none;
 }
 .btn-reset-search img {
 	vertical-align: middle;
  height: 24px; /* 아이콘 크기 맞춤 */
  width: auto;
  margin-right: 4px;
}
/* 검색 - 달력 */
.calendar-container { 
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.calendar { width: 45%; padding: 10px; /*border: 1px solid #ccc;*/ border-radius:5px; }
.calendar-header {
	margin-bottom: 20px;
	text-align: center;
	font-size: 16px; 
	font-weight: 600;
}
.days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 15px; font-weight: 400; }
.days div > strong {font-weight: 500;}
.day { position: relative; padding: 10px; cursor: pointer;}
.selected { position: relative; background-color:  #FE8262; color: #fff; z-index: 2; }
/* 여행 날짜 
.date-picker-container { position: relative; margin-top: 10px;}
.date-input { width: 100%; height: 40px; text-align: center; padding: 10px; border: 1px solid #ccc; border-radius: 5px;
    		font-size: 15px; color: #111; background: #fff; cursor: pointer;}*/

/*2025-08-04*/
/*달력 추가*/
.option_wrap {
	display: flex;
  align-items: center;
	width: 50%;
	padding-left: 10px;
	height: 45px;
	border: 1px solid #ddd;
	border-radius: 5px;
}
.option_wrap:before{
	content: "";
	display: inline-block;
	height: 18px;
	width: 18px;
	background: center / contain no-repeat url('/images/common/icon-search-calendar.svg');
}
.option_wrap input {
	color: #111;
	font-weight: 600;
}
.option_wrap input#endRevDt {
  margin-left: 8px;
}
#startRevDt, #endRevDt {
	padding: 0;
  margin: 0;
	border: none;
}
#startRevDt:focus,
#endRevDt:focus {
  outline: none;
  box-shadow: none;
  border-color: initial; /* 클릭 시 border 색이 바뀌는 것 방지 */
}
#startRevDt {
	min-width: 100px;
	width: 100px;
}
#endRevDt {
	width: 150px;
}


/* 검색 - 예산 범위 슬라이더 */
.min-budget, .max-budget { width: 48%; padding: 5px; border: 1px solid #ddd; text-align: center;}
.date-picker-container { position: relative; width: 100%; max-width: 300px; s}
.rangeBar { position: relative; height: 30px;}
.slider {
	position: relative;
  width: 100%;
  height: 8px;
  margin-bottom: 30px;
  border-radius: 5px;
  background: #ddd;
}
.slider .track {
  position: absolute;
  height: 100%;
  height: 8px;
  border-radius: 5px;
  background: linear-gradient(to right, #85DD91, #06B986);
}
.slider input[type="range"] {
  position: absolute;
  width: 100%;
  margin: 0;
  pointer-events: none;
  -webkit-appearance: none;
  background: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
	pointer-events: all;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  background: #fff;
  border: 2px solid #08B986;
  border-radius: 50%;
  -webkit-appearance: none; 
}
/* 검색 -예산 범위 입력 */
.budget-range { height: 120px; padding: 0 20px; }
.budget-inner {
	display: flex;
	justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.input-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46%;
  height: 45px;
  padding: 10px;
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  background: white;
  font-size: 15px;
  color: #333;  
}
.budget-input {
	position: relative;
	flex: 1;
	width: inherit; 
  border: none;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.price { position: absolute; right: 16px; font-size:14px; font-weight: 500; }
.label { position: absolute; left: 16px; }
.separator { font-weight: 500; }



/*.day:hover { background: #f0f0f0; }
.selected { position: relative; display: inline-block; background: #FE8262; color: #fff; border-radius: 50%; z-index: 2; 
	}
.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #FE8262;
    border-radius: 50%;
    color: #fff;
    z-index: 0;
}	*/
.in-range { background-color: rgba(254, 130, 98, 0.3); }
.saturday, .sat {color: blue;}
.sunday, .son {color: red;}
.saturday.selected  {color: #fff;}
.saturday.in-range {color: #000;}
.sunday.selected  {color: #fff;}
.sunday.in-range {color: #000;}


/*반응형*/
@media all and (max-width:720px) {
	/*#prevBtn, #nextBtn{
		top: 100px;
	}*/
	.option_wrap {
		width: 100%;
	}
}

@media all and (max-width:390px) {
	.start_select > span {
		display: block;
	}
	.option_wrap {
		letter-spacing: -0.5px;
		padding-left: 8px;
	}
	#startRevDt {
	min-width: 90px;
	width: 90px;
	}
	.calendar {
		padding:0;
	}
}