@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

/* Icon font styles moved to style_common.css for global usage */

/* mobile first */
:root {
  --header-height: 200px;
  /* PC 두 줄일 때 높이 */
}

@media screen and (max-width: 568px) {
  :root {
    --header-height: 150px;
    /* 모바일 한 줄일 때 높이 */
  }
}

/* 1. 움직임(키프레임) 정의하기 */
@keyframes swipe-nudge {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30% {
    transform: translateX(-10px);
    /* 왼쪽으로 12px 이동 (수치는 취향껏 조절!) */
  }

  20%,
  40% {
    transform: translateX(0);
    /* 제자리로 복귀 */
  }

  /* 40% ~ 100% 구간은 움직이지 않고 쉬는 타이밍입니다 */
}

/* 2. 요소에 애니메이션 달아주기 */
.shake-hint {
  animation: swipe-nudge 3s ease-in-out infinite;
}



body.index {
  /* font-family:'Noto Sans KR', var(--font-family-sans-serif) !important;  */
  padding-top: 13rem;
}

/* padding-top:13rem; banner: 220px */

.wh-root.index .wehome_btn {
  background-color: var(--wehome-color);
  border-radius: 50rem;
  color: #fff;
  text-align: center;
  padding: 10px 15px;
  height: 40px;
  line-height: 20px;
}

.wh-root.index .wehome_btn:hover {
  color: #fff;
  text-decoration: none;
}

.wh-root.index .wehomehost_btn {
  background-color: #fff;
  border: 1px solid var(--wehome-color);
  border-radius: 50rem;
  color: var(--wehome-color);
  ;
  text-align: center;
  padding: 8px 20px;
  height: 36px;
  line-height: 16px;
}

.wh-root.index .wehomehost_btn:hover {
  background-color: var(--wehome-color);
  color: #fff;
}

.wh-root.index .wh_shadow {
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.1);
}

.wh-root.index .hide {
  display: none;
}

.wh-root.index .underline {
  text-decoration: underline !important;
}

.wh-root.index .dropdown-toggle.btn:focus {
  outline: none;
  box-shadow: none;
}

.wh-root.index .dropdown-menu {
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.1);
  border: 0;
}

.wh-root.index .dropdown-toggle::after {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1rem;
  transition: transform .2s ease-in-out;
  border: 0;
  vertical-align: middle;
}

.wh-root.index .dropdown-toggle.right_arrow::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.wh-root.index .modal-open {
  overflow: hidden;
}

/* Calendar */
.wh-root.index .ui-widget {
  font-family: "Arial", "Nanum Gothic", 'Malgun Gothic', '留묒� 怨좊뵓', "Dotum", "UnDotum", "Helvetica Neue", "sans-serif";
}

.wh-root.index .ui-widget-content {
  border: 0;
  background: #f6f6f6;
  border-radius: 5px;
  font-size: 14px;
  color: #13405a;
  padding: 15px 30px;
}

.wh-root.index .ui-widget-header {
  background: transparent;
  border: 0;
  color: #13405a;
  font-size: 14px;
}

.wh-root.index table.ui-datepicker-calendar {
  background-color: #fff;
}

.wh-root.index table.ui-datepicker-calendar thead {
  background-color: #f6f6f6;
}

.wh-root.index table.ui-datepicker-calendar thead th {
  font-size: 9px;
  color: #8f94a0;
  font-weight: normal;
}

.wh-root.index .ui-widget-content .ui-state-default {
  background: transparent;
  border: 0;
  text-align: center;
  color: #13405a;
  font-size: 14px;
  font-weight: normal;
  padding: 5px;
}

.wh-root.index .ui-datepicker a.ui-datepicker-prev span,
.wh-root.index .ui-datepicker a.ui-datepicker-next span {
  display: none;
}

.wh-root.index .ui-datepicker .ui-datepicker-prev-hover,
.wh-root.index .ui-datepicker .ui-datepicker-next-hover {
  border: 0;
}

.wh-root.index .ui-datepicker a.ui-datepicker-prev,
.wh-root.index .ui-datepicker a.ui-datepicker-next {
  padding: 10px 0;
  top: 75px;
  cursor: pointer;
}

.wh-root.index .ui-datepicker a.ui-datepicker-prev {
  left: -22px;
  background: url(/image/cmn/cal_arrow_left.gif) no-repeat center;
}

.wh-root.index .ui-datepicker a.ui-datepicker-next {
  right: -22px;
  background: url(/image/cmn/cal_arrow_right.gif) no-repeat center;
}

.wh-root.index .ui-datepicker a.ui-state-active {
  font-weight: bold;
}

/* .wh-root.index header .top_wrapper {
  background-color: #fff;
} */
.top_wrapper_buttons {
  display: flex;
  justify-content: space-between;
}

.wh-root.index header ul.top_menu {
  height: 44px;
  display: none;
  margin: 0 auto;
  max-width: 1180px;
}

.wh-root.index header ul.top_menu li {
  background-color: #fff;
}

.wh-root.index header ul.top_menu div.dropdown button {
  height: 2rem;
  padding: 0 1rem;
}

.top_wrapper_buttons {
  position: absolute;
  transition: all .5s;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
}

.header_left_m {
  padding: 4px;
  z-index: 999;

}

.header_left_m svg {
  fill: var(--wehome-color);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.wh-root.index header .header_right_m {
  display: flex;
  align-items: center;
}

.wh-root.index header .header_right_m a.btn_noti {
  position: relative;
  line-height: 1em;
  border: none;
  color: var(--wehome-color);
  background-color: transparent;
  margin-right: 10px;
}

.wh-root.index header .header_right_m a.btn_noti svg {
  display: block;
  width: 24px;
  height: 24px;
}

.wh-root.index header .header_right_m a.btn_noti span.noti_new {
  top: 6px !important;
  right: 11px !important;
}

.wh-root.index div.head_logo {
  height: 52px;
  position: relative;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  opacity: 1;
  transition: .3s ease;
}

body.sticky .wh-root.index header {
  background-color: #fff;
}

body.sticky .wh-root.index header div.head_logo {
  opacity: 0;
  height: 0;
  margin: 0;
}

.wh-root.index .wh_cont {
  max-width: 1180px;
  padding: 0 50px;
  /* 배너 섹션 */
}

.wh-root.index .wh_cont_top {
  max-width: 1010px;
  padding: 0 0px;
}

.wh-root.index #search .search_box {
  height: 46px;
  /* border: 1px solid #e0e0e0; */
  border: 1px solid #00000038;
  border-radius: 28px;
  margin-top: 20px;
  display: flex;
  padding: .5rem;
  cursor: pointer;
  background-color: white !important;
  /* flex-grow: 1; */
}

.wh-root.index #search .search_box .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .75rem;
}

.wh-root.index #search .search_box .icon-wrapper span {
  font-size: 2.5rem;
}

.wh-root.index #search .search_box .text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: .15rem;
}

.wh-root.index #search .search_box .text-wrapper span {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25em;
}

.wh-root.index #search .search_box .text-wrapper span+span {
  font-size: .9rem;
  font-weight: 400;
  color: #666;
}

.wh-root.index #search .filter_icon {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.wh-root.index .search_box .text-wrapper {
  width: 100%;
}

/* Index specific searchbox overrides - removed duplicates, kept only unique styles */



/* bottom_button btn styles moved to style_common.css */

.wh-root.index .search_box div.sc {
  margin: 1rem 0;
  height: 2rem;
}

.wh-root.index .search_box div.ln {
  border-right: 0;
}

.wh-root.index .search_box div input.text2 {
  border: none;
  height: 2rem;
  width: 100%;
  outline: none;
  font-size: 14px;
}

.wh-root.index .search_box div.search_keyword {
  flex: 2;
}

.wh-root.index .search_box div.search_keyword input.text2 {
  padding-left: .5rem;
  background: transparent;
}

.wh-root.index .search_box div.search_checkin {
  flex: 1;
}

.wh-root.index .search_box div.search_checkout {
  flex: 1;
}

.wh-root.index .search_box div.search_guests {
  flex: 1;
}

.wh-root.index .search_box div.search_btn {
  margin: 0
}

.wh-root.index .search_box div.search_btn button#search_btn {
  background-color: var(--wehome-color);
}

.wh-root.index .search_box div.search_btn button#search_btn img {
  vertical-align: top;
  margin-top: 4px;
}

.wh-root.index #search_guest .custom-select {
  background-image: none;
  border: 0;
  box-shadow: none;
}

.wh-root.index section#search {
  position: relative;
  background-color: transparent;
  max-width: 1180px;
  padding: 0 var(--padding);
  z-index: 10000;
  border-radius: 28px;
}

.wh-root.index section#search div.search_checkin,
.wh-root.index section#search div.search_checkout,
.wh-root.index section#search div.search_guests {
  display: none;
}


.wh-root.index #calendar {
  overflow: hidden;
}

.wh-root.index div.cal_name {
  padding: 0 0 10px 0;
  text-align: center;
  font-size: 18px;
}

.wh-root.index div.cal_name a {
  padding: 0;
  display: flex;
}

.wh-root.index div.cal_name a span {
  font-size: 2.5rem;
  color: #333;
}

.wh-root.index div.cal_name span#month_name {
  font-size: 22px;
  font-weight: 400;
}

.wh-root.index ul.week_name,
.wh-root.index ul.cal {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  clear: both;
  list-style: none;
}

.wh-root.index ul.week_name {
  width: 100%;
}

.wh-root.index ul.week_name li {
  width: calc(100% / 7);
  float: left;
  border-top: 0;
  text-align: center;
  position: relative;
  font-size: 12px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.wh-root.index ul.week_name li.end {
  color: #959595;
}

.wh-root.index ul.cal {}

.wh-root.index ul.cal li {
  width: calc(100% / 7);
  float: left;
  text-align: center;
  position: relative;
  font-size: 1rem;
  padding: 0;
}

.wh-root.index ul.cal li.cmon {
  opacity: 1;
}

.wh-root.index ul.cal li div.day_cont {
  padding: 1px 0 0 0;
  height: 39px;
}

.wh-root.index ul.cal li div.month {
  color: #b8b8b8;
  font-size: 9px;
}

.wh-root.index ul.cal li div.day {
  color: #000;
  font-size: 18px;
}

.wh-root.index ul.cal li.sel div.day_cont {
  background-color: var(--wehome-color);
  color: #fff;
  border-radius: 50%;
}

.wh-root.index ul.cal li.sel div.month,
.wh-root.index ul.cal li.sel div.day {
  color: #fff;
}

.wh-root.index ul.cal li.notavail div.day {
  font-weight: 300;
  color: #ccc !important;
}

.wh-root.index ul.cal li.notavail2 div.day {
  /* color:#888; */
  color: #ccc;
}

.wh-root.index div.cal_btn {
  padding: 10px;
  border-top: 1px solid #ced1d9;
  text-align: center;
  position: relative;
}

.wh-root.index span#pick_date {
  display: none;
}

.wh-root.index div.cal_name {
  margin: .5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wh-root.index ul.week_name {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}

.wh-root.index ul.cal li {
  margin-top: .15rem;
  display: flex;
  justify-content: center;
}

.wh-root.index ul.cal li div.day_cont {
  padding: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wh-root.index ul.cal li div.day {
  line-height: 1em;
  font-size: 1rem;
}

.wh-root.index ul.cal li div.month {
  display: none;
}

/* div#wh_fav_area{ width:100%; padding:0; }
div#wh_fav_area div.row{padding:0 10px;}
div#wh_fav_area div.area{padding:7px;}
div#wh_fav_area div.area:hover{background-color: #f7f6f9; border-radius: 5px;}
div#wh_fav_area div.area a{display: block; color:#5e5e5e;}
div#wh_fav_area div.area a:hover{text-decoration: none;} */



.wh-root.index .radio-button-filter {
  -webkit-scrollbar-width: none;
  -moz-scrollbar-width: none;
  -ms-scrollbar-width: none;
  scrollbar-width: none;
  display: flex;
  overflow: auto;
  padding: 0 1.5rem;
  margin: 1rem -1.5rem 1.5rem;
}

.wh-root.index .radio-button-filter:last-child {
  margin-bottom: 0;
}

.top_row .text-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.search_input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  background: transparent;
  padding: 0;
}

.search_input::placeholder {
  color: #717171;
  font-weight: 500;
  font-size: 14px;
}

/***** 레이아웃 수정 2026/02/26 *****/

/* 기본적으로 모바일 바는 숨김 */
.mobile_search_bar {
  display: none;
}

@media (max-width: 568px) {

  /* 기존 3단 검색바 숨기기 */
  .search_box_new {
    display: none !important;
  }

  /* 모바일 전용 바 노출 */
  .mobile_search_bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 0.5px solid #ddd;
    border-radius: 40px;
    padding: 10px 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .mobile_search_bar .text_group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .mobile_search_bar .main_text {
    font-size: 14px;
    font-weight: 400;
    color: #222;
  }

  .mobile_search_bar .sub_text {
    font-size: 12px;
    color: #717171;
  }

  /* 모바일 전체화면 오버레이 (클릭 시 띄울 창) */
  .mobile_search_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 720px;
    height: 100%;
    background: #f7f7f7;
    z-index: 9999;
    display: none;
    /* 기본 숨김 */
    flex-direction: column;

  }

  .mobile_search_overlay.active {
    display: flex;
  }

  /* 닫기 버튼 */
  .btn_close_overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search_btn_round {
    margin-right: -10px;
  }
}

.icon-wrapper .arrows {
  font-size: 12px;
  background: #f4f4f4;
  border-radius: 10px;
  padding: 4px;
  margin-left: 5px;
  color: #afb0b0;
}

/* 검색 섹션 전체 컨테이너 */
.wh-root.index section#search {
  padding: 20px var(--padding);
  /* 기존 변수 유지 */
  max-width: 1180px;
  margin: 0 auto;
}

/* 메인 검색 박스 (2단 구성) */
.wh-root.index .search_box_new {
  background-color: white;
  border: 1px solid #00000038;
  /* 기존 border 유지 */
  border-radius: 32px;
  /* 이미지처럼 더 둥글게 */
  overflow: hidden;
  cursor: pointer;
}

/* 각 행 공통 */
.wh-root.index .search_row {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.2rem;
}

/* 상단 행 아이콘 및 텍스트 */
.wh-root.index .top_row .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f4f4f4;
  border-radius: 12px;
  margin-right: 12px;
}

.wh-root.index .top_row .icon-wrapper span {
  font-size: 1.5rem;
  color: #555;
}

.wh-root.index .text-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 0.1rem;

  flex: 1;
  /* 남는 공간 다 써라! */
  min-width: 0;
  /* 중요: flex 안에서 ellipsis가 작동하게 하는 치트키 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.wh-root.index .text-wrapper .title {
  font-size: 1rem;
  color: #000;
}


.wh-root.index .text-wrapper .desc {
  font-size: 0.85rem;
  color: #666;
}

/* 하단 행 구성 (날짜 + 게스트) */
.wh-root.index .bottom_row {
  padding: 0.5rem 1.2rem 0.6rem;
}

.wh-root.index .search_col {
  flex: 1;
  display: flex;
  align-items: center;
}

.wh-root.index .icon-wrapper-small {
  width: 32px;
  height: 32px;
  background: #f4f4f4;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.wh-root.index .icon-wrapper-small svg {
  width: 16px;
  color: #afb0b0;
}

.wh-root.index .icon-wrapper-small svg:hover {}

.wh-root.index .icon-wrapper-small span {
  font-size: 1.2rem;
  color: #555;
}

.wh-root.index .search_col .text-wrapper span {
  font-size: 14px;
  font-weight: 500;
  color: #717171;
}

/* 보라색 원형 버튼 */
.wh-root.index .search_btn_round {
  width: 38px;
  height: 38px;
  background-color: var(--wehome-color, #6800cd);
  /* 기존 변수 사용 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: auto;
}

.wh-root.index .search_btn_round svg {
  width: 18px;
  height: 18px;

}

/* 구분선 */
.wh-root.index .divider_horizontal {
  height: 1px;
  background-color: #eee;
  margin: 0 1.2rem;
}

.wh-root.index .divider_vertical {
  width: 1px;
  background-color: #eee;
  height: 20px;
  margin: 0 5px;
}

.wh-root.index .divider_vertical_first {
  width: 1px;
  background-color: #eee;
  height: 20px;
  margin: 0 15px;
  display: none;
}

/* 그림자 효과 */
.wh_shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}


/*********** main_list 가로 스와이프 부분 */

#main_lists {
  margin-top: 0px;
  padding: 0;
}



.main_list .card {
  transition: transform 0.2s ease;
}

.main_list .card:active {
  transform: scale(0.98);
}

/* 카드 전체 컨테이너 */
.custom_property_card {
  width: 100%;
  cursor: pointer;
  background: #fff;
}

/* 이미지 영역: 둥근 모서리와 비율 유지 */
.card_image_area {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 정사각형 비율 */
  border-radius: 20px;
  /* 이미지처럼 매우 둥글게 */
  overflow: hidden;
  margin-bottom: 12px;
}

.card_image_area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* '게스트 선호' 배지 */
.badge_guest_favorite {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* 하트 아이콘 버튼 */
.btn_wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

.btn_wishlist svg {
  width: 24px;
  height: 24px;
  fill: rgba(0, 0, 0, 0.5);
  /* 기본 배경 */
  stroke: #fff;
  stroke-width: 2px;
  transition: fill 0.2s ease;
}

.btn_wishlist:hover svg {
  fill: #ff5a5f;
  /* 위홈/에어비앤비 핑크/레드 */
}

/* 텍스트 정보 영역 */
.card_info_area {
  padding: 0 4px;
}

.info_location {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_date {
  font-size: 14px;
  color: #717171;
  margin-bottom: 4px;
}

.info_price_rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.price small {
  font-weight: normal;
  color: #717171;
}


.rating {
  display: flex;
  align-items: center;
  /* ✨ 별 모양과 숫자를 수직 중앙에 맞춤 */
}

.rating svg {
  fill: #ede041;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  flex-shrink: 0;
  transform: translateY(-2px);
  /* 별점 span과 중앙을 맞추기 위함 */
}

.rating span {
  line-height: 1;
  /* 텍스트 자체의 위아래 기본 여백을 없애서 정확하게 중앙을 맞추기 위함*/
  font-size: 15px;
}




.photo_card {
  width: 100%;
  font-family: 'Pretendard', -apple-system, sans-serif;
}

/* 1. 이미지 컨테이너 (정사각형 + 아주 둥근 모서리) */
.photo_container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 정사각형 */
  border-radius: 24px;
  /* 사진처럼 아주 둥글게 */
  overflow: hidden;
  margin-bottom: 12px;
}

.main_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2. 게스트 선호 배지 (좌측 상단) */
.guest_fav_badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: white;
  color: #222;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* 3. 하트 버튼 (우측 상단) */
.wish_button {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  z-index: 10;
  cursor: pointer;
}

.wish_button svg {
  width: 24px;
  height: 24px;
  fill: rgba(0, 0, 0, 0.4);
  /* 흐린 검정 배경 */
  stroke: white;
  /* 흰색 테두리 */
  stroke-width: 2.5px;
}

/* 4. 하단 텍스트 정보 */
.info_container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 제목, 위치/별점, 가격 사이의 간격을 8px로 딱 고정! */
}

.info_container span,
.info_container div {
  line-height: 1.2;
  /* 글자 크기 대비 1.2배 높이만 차지하게 타이트하게 쪼임 */
  /* 만약 텍스트마다 margin이 묻어있을까 걱정되면 margin: 0; 도 하나 추가해주세요 */
  margin: 0;
}

.title_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  width: 100%;
}

.info_container .title_row .title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location_and_rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.location {
  color: #c9c9c9;
  font-size: 11px;
}

.date_text {
  font-size: 12px;
  color: #717171;
  margin-bottom: 4px;
}

/* amenities 태그 */


.amenities-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  /* 핵심: 가로 스크롤 허용 */
  -ms-overflow-style: none;
  /* 스크롤바 숨기기 (IE) */
  scrollbar-width: none;
  /* 스크롤바 숨기기 (Firefox) */

  /* 마지막 부분이 서서히 투명해지는 마스크 효과 */
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.amenities-tags::-webkit-scrollbar {
  display: none;
  /* 스크롤바 숨기기 (Chrome, Safari) */
}

.amenity-tag {
  flex-shrink: 0;
  /* 태그가 찌그러지지 않게 방어 */
  white-space: nowrap;
  background: #eaeaea;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  color: #555;
}

.price_text {
  text-align: right;
  color: #222;
}

.price_text .amount {
  font-weight: 700;
  font-size: 20px;

}

.price_text .unit {
  font-weight: 400;
  color: #222;
}




/********** 추천 지역 */

#recommended_regions {
  margin-top: 35px;
  padding-left: 0;
  padding-right: 0px;
}


/* 섹션 타이틀 */
.section_title {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  margin-left: 20px;
  margin-bottom: 0px;
}

/* 스와이프 컨테이너 여백 */
.recommended_swipe {
  padding: 0 30px 0px 20px;
  /* 좌우 여백 */
  margin-right: 20px;

}

/* 개별 아이템 크기 */
.region_item {
  width: 120px !important;
  /* 이미지 크기에 맞게 조절 */
  text-align: center;
}

/* 원형 박스 설정 */
.circle_box {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
}

.circle_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  /* 글자가 잘 보이도록 어둡게 처리 */
  transition: transform 0.3s ease;
}

.region_item:hover img {
  transform: scale(1.1);
}

/* 지역 이름 (이미지 중앙) */
.region_name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
}

/* HOT 태그 스타일 */
.badge_hot {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff5a5f;
  /* 에어비앤비/위홈 스타일 레드 */
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* 날짜 범위 선택 스타일 */
.days_grid li.selected {
  background: #222 !important;
  color: #fff !important;
}

.days_grid li.range {
  background: #f7f7f7;
  /* 범위 배경색 */
  border-radius: 0;
  /* 범위는 사각형으로 이어지게 */
}

.days_grid li.past {
  color: #d5d5d5 !important;
  cursor: default;
  pointer-events: none;
}

/* 달력 모달 배치 조정 */
.calendar_outer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.cal_nav {
  top: 0;
  z-index: 10;
  background: #fff;
  border-radius: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#prevMonth {
  left: -10px;
}

#nextMonth {
  right: -10px;
}



/* 검색 모달 */

#search {
  position: relative;
}

.search_box_new {
  position: relative;
  z-index: 1001;
}

/* 드롭다운 박스 공통 */
.search_dropdown {
  position: absolute;
  top: 100%;
  /* 검색바 바로 아래 */
  left: 0;
  right: 0;
  background: #fff;
  margin: -12px 24px 0 24px;
  padding: 12px;
  border-radius: 32px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border: 1px solid #eee;
  transform-origin: top;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: scaleY(0.95);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* 활성화된 배경 가림막 (외부 클릭 시 닫기 용도) */
.search_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  z-index: 999;
  display: none;
}

/* 내부 디자인 요소 */
.search_trigger:active {
  background: #f7f7f7;
  border-radius: 20px;
}



/* 예약 불가 날짜 */
.cal_day.notavail {
  color: #ccc;
  pointer-events: none;
  text-decoration: line-through;
}

/* 마우스 오버 효과 */
.cal_day:not(.notavail):hover .day_cont {
  background-color: #f1f5f9;
}

/* 체크인 / 체크아웃 선택된 날짜 (검정 동그라미) */

.wh-root.index .cal_day.is-selected .day {
  color: #fff !important;
}

.wh-root.index .cal_day.is-selected .day_cont {
  background-color: #7c3aed;

}

/* 선택된 범위 안쪽의 배경색 활성화 */
.cal_day.in-range .range_bg {
  display: block;
}

/* 체크인 날짜는 오른쪽으로만 배경이 뻗어나가게 */
.cal_day.is-start .range_bg {
  display: block;
  left: 50%;
  /* 절반부터 시작 */
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

/* 체크아웃 날짜는 왼쪽으로만 배경이 뻗어나가게 */
.cal_day.is-end .range_bg {
  display: block;
  right: 50%;
  /* 절반에서 끝남 */
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

/* 만약 체크인/체크아웃이 당일치기(같은 날)인 경우 배경 숨김 */
.cal_day.is-start.is-end .range_bg {
  display: none;
}


/* =========================================
   게스트 선택 모달 전용 CSS
========================================= */
.guest_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #ebebeb;
}

.guest_row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.guest_row:first-child {
  padding-top: 0;
}

.guest_info .title {
  font-size: 15px;
  font-weight: 500;
  color: #222;
}

.guest_counter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn_circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #b0b0b0;
  background: #fff;
  color: #717171;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  outline: none;
  padding: 0;
  line-height: 1;
}

.btn_circle:not(:disabled):hover {
  border-color: #222;
  color: #222;
}

.btn_circle:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.count_val {
  width: 20px;
  text-align: center;
  font-size: 16px;
  color: #222;
}

/* =========================================
   검색바 스크롤 애니메이션 CSS
   =========================================
*/
/* ==================================================
   [진짜 최종] 스크롤 애니메이션 (2줄 -> 1줄 슬림 검색바)
================================================== */
/* 1. 검색바가 스크롤 시 화면 상단에 달라붙게 만듦 */
.wh-root.index section#search {
  position: sticky;
  top: 65px;
  /* 상단 헤더 높이에 맞춤 */
  z-index: 1020;
}

/* ==================================================
   🎨 Dual-Component Crossfade 검색창
   두 개의 독립적인 DIV를 겹쳐놓고 opacity만 전환
================================================== */

/* 컨테이너: 두 검색창을 겹쳐놓기 위한 relative positioning */
.wh-root.index .search_box_container {
  position: relative;
  width: 100%;
  /* 일반 검색창 높이에 맞춤: top_row(60px) + bottom_row(60px) = 120px */
  min-height: 120px;
  transition: min-height 0.35s ease-in-out;
  display: block;
}

/* Sticky 상태일 때는 높이 줄이기 */
body.sticky .wh-root.index .search_box_container {
  min-height: 50px;
  /* Sticky 검색창 높이 */
}

/* 공통: 두 검색창 모두 absolute positioning으로 겹치기 */
.wh-root.index .search_box_new {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  /* GPU 가속 + opacity 전환만 */
  transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* --------------------------------------------------
   일반 검색창 (2줄 레이아웃)
-------------------------------------------------- */
.wh-root.index .search_box_normal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  border-radius: 0;
  box-shadow: 0 3px 10px rgba(0 0 0/0.1);
}

.wh-root.index .search_box_normal .top_row {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}

.wh-root.index .search_box_normal .bottom_row {
  width: 100%;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wh-root.index .search_box_normal .divider_horizontal {
  display: none;
}

/* --------------------------------------------------
   Sticky 검색창 (1줄 레이아웃)
-------------------------------------------------- */
.wh-root.index .search_box_sticky {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.wh-root.index .search_box_sticky .sticky_row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
}

.wh-root.index .search_box_sticky .search_col {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0px;
}

.wh-root.index .search_box_sticky .icon-wrapper-small {
  margin-right: 0px;
}


.wh-root.index .search_box_sticky .search_col:first-of-type {
  padding-left: 0;
}

.wh-root.index .search_box_sticky .region_col {
  flex: 0 0 35%;
}

.wh-root.index .search_box_sticky .date_col {
  flex: 0 0 25%;
}

.wh-root.index .search_box_sticky .guest_col {
  flex: 0 0 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wh-root.index .search_box_sticky .text-wrapper span {
  font-size: 14px;
  white-space: nowrap;
}

.wh-root.index .search_box_sticky .search_btn_round {
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex-shrink: 0;
  position: absolute;
  right: 10px;
}

/* 구분선 */
.wh-root.index .search_box_sticky .divider_vertical_first,
.wh-root.index .search_box_sticky .divider_vertical {
  width: 1px;
  height: 24px;
  background-color: #dddddd;
  flex-shrink: 0;
}

/* --------------------------------------------------
   Crossfade 전환: 비 Sticky 상태
-------------------------------------------------- */
body:not(.sticky) .wh-root.index .search_box_normal {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0) scale(1);
  border-radius: 30px;
}

body:not(.sticky) .wh-root.index .search_box_sticky {
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0) scale(0.98);
}

/* --------------------------------------------------
   Crossfade 전환: Sticky 상태
-------------------------------------------------- */
body.sticky .wh-root.index .search_box_normal {
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0) scale(0.98);
  border-radius: 30px;
  /* 페이드아웃 중에도 둥근 모서리 유지 (직사각형 방지) */
}

body.sticky .wh-root.index .search_box_sticky {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0) scale(1);
}

/* --------------------------------------------------------- */

/* 2. 화면이 568px 이하일 때 (Mobile) 적용되는 스타일 */
@media (max-width: 568px) {
  .wh-root.index .search_box_new {
    border-radius: 50px;
    padding: 0 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
  }

  .wh-root.index .search_box_new .top_row {
    width: 35% !important;
    /* 모바일 강제 적용 */
    border-bottom: none !important;
    padding: 5px 15px;
  }

  .wh-root.index .search_box_new .bottom_row {
    width: 65% !important;
    padding: 5px 10px 5px 0;
  }


  .wh-root.index .search_box_new .text-wrapper span {
    font-size: 13px;
    /* 모바일은 조금 더 작게 */
    white-space: nowrap;
  }

  .wh-root.index .search_box_new .search_btn_round {
    width: 30px;
    height: 30px;
    margin-right: -5px;
    flex-shrink: 0;
  }
}

/* ==================================================
   검색바 전체 배경 (글씨 겹침 방지)
================================================== */
/* 1. 검색바 영역을 가로 100% 꽉 차게 변경 */
.wh-root.index section#search {
  position: sticky;
  top: 50px;
  /* 위에 있는 헤더(로고 등) 높이에 맞춰서 이 숫자를 조절하세요 (예: 50~70px) */
  z-index: 1020;
  max-width: 100% !important;
  /* 중요: 좌우 끝까지 배경이 덮이도록 100%로 강제 변경 */
  width: 100%;
  padding: 10px 20px;
  /* 위아래 여백 */
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* (참고) 검색바 자체가 가운데 정렬되도록 잡아주는 역할 */
.wh-root.index .search_box_new {
  max-width: 800px;
  margin: 0 auto;
  /* ... 기존 .search_box_new 속성들은 그대로 유지 ... */
}

/* --------------------------------------------------
   2. 스크롤 내렸을 때 (body.sticky) 배경 마법
-------------------------------------------------- */
body.sticky .wh-root header .fixed-top {
  /* 95% 불투명한 흰색 배경으로 밑에 있는 글씨 가리기 */
  background-color: rgba(255, 255, 255, 0.84);

  /* 애플/에어비앤비 스타일 유리(블러) 효과 - 살짝 비치는 글씨를 뽀얗게 뭉개버림 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 아래쪽으로 은은하게 퍼지는 섀도우 추가 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);

  /* 스크롤 시 위아래 여백을 살짝 줄여서 더 얇게 밀착된 느낌 주기 */
  padding: 8px 20px;
}

/* 기존에 줬던 search_box_new의 그림자는 빼서 깔끔하게 만듦 */
body.sticky .wh-root.index .search_box_new {
  box-shadow: none;
  /* 배경에 그림자를 줬으니 박스 자체 그림자는 삭제 */
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* 테두리만 살짝 남김 */
  margin-top: -3px;
  /* search_box_new 높이 밸런스 맞추기 위함 */
}




#banners {
  margin-top: 40px;
}



.travel-section {
  max-width: 1200px;
  margin: 40px auto 50px;
}

/* 1. Header Styles (from image_3.png) */
.section-header {
  text-align: center;
}



.hash-tags {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.hash-tags .tag {
  font-size: 12px;
  color: #717171;
  cursor: pointer;
}

.hash-tags .tag.active {
  color: #222;
  font-weight: 700;
}

/* 2. Search Bar Styles (combining image_1.png and image_2.png) */
.search-container {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 100px;
  padding: 8px 12px 8px 24px;
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 850px;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.search-item.active {
  flex: 2;
}

.main-input {
  border: none;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  outline: none;
}

.search-group {
  display: flex;
  align-items: center;
  flex: 3;
  justify-content: space-around;
}

.text-group {
  display: flex;
  flex-direction: column;
}

.text-group .label {
  font-size: 12px;
  color: #717171;
  font-weight: 500;
}

.text-group .value {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}

.icon-box {
  background: #f7f7f7;
  padding: 12px;
  border-radius: 10px;
  color: #717171;
}

.icon-box-small {
  color: #717171;
  font-size: 20px;
}

.divider {
  width: 1px;
  height: 30px;
  background-color: #ddd;
  margin: 0 10px;
}

.divider-small {
  width: 1px;
  height: 40px;
  background-color: #ddd;
}

.search-button {
  background-color: #ff385c;
  /* image_2.png style color */
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}

/* image_1.png style button overrides */
.search-bar:has(.main-input:placeholder-shown) .search-button {
  background-color: #6a1b9a;
}

/* 3. Product Grid Styles (from image_3.png) */


.star-crown {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* 별들의 하단 라인을 맞춤 */
  margin-bottom: 20px;
}

.star {
  fill: #EBEBEB;
  /* 이미지와 같은 연한 회색 */
}

/* 중앙 별: 가장 크게 */
.star.center {
  width: 56px;
  height: 56px;
}

/* 양옆 별: 작게 설정 */
.star.side {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
  /* 중앙보다 살짝 아래로 배치 */
}

/* 왼쪽 별: 더 안쪽으로(-22px), 더 아래로(+10px) */
.star.left {
  transform: rotate(-20deg) translateY(10px);
  margin-right: -5px;
}

/* 오른쪽 별: 더 안쪽으로(-22px), 더 아래로(+10px) */
.star.right {
  transform: rotate(20deg) translateY(10px);
  margin-left: -5px;
}

.travel-section .title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 15px;
}

/* 카드 전체 디자인 */
.new-layout .product-card {
  padding: 15px;
  width: 30%;
  /* 한 카드 크기 고정 (Swipe                  세팅에 따라 auto로 변경 가능) */
  /* 카드 간격 */
  border-radius: 20px;
  /* 와이어프레임의 매우 둥근 모서리 */
  /* 카드 전체 배경색 (연한 회색) */
  color: #333;
  /* 기본 텍스트 색상 */
  /* 자식 요소의 둥근 모서리 적용 */
  box-shadow: 0px 1px 7px 0px rgb(0 0 0 / 25%)
    /* 모든 방향에 균일한 shadow */
}

/* 카드 내부 여백 */
.new-layout .card-inner {
  position: relative;
}




/* 와이어프레임의 이미지 텍스트 오버레이 */
.new-layout .temp-image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  /* 더미 이미지 텍스트 배경 */
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  /* 텍스트는 클릭 불가능하게 */
  white-space: pre-wrap;
  /* 줄바꿈 적용 */
}

/* --- 프로필 및 정보 영역 --- */
.new-layout .profile-info-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

/* 리뷰 섹션 프로필 이미지 */
.new-layout .profile-circle {
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 2px solid #bd8bc3;
  flex-shrink: 0;
  position: absolute;
  transform: translateY(-30px);
}

.new-layout .profile-circle .profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-layout .profile-circle .profile-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

/* 위치 텍스트 */
.new-layout .location-text {
  font-size: 16px;
  color: #888;
  font-weight: 300;
  /* 얇은 서체 */
}

/* 평점 영역 */
.new-layout .rating-display {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 700;
  /* 평점 점수 크기 */
}

/* 별 아이콘 */
.new-layout .rating-display svg {
  width: 20px;
  height: 20px;
  fill: #ede041;
  /* 기본 별 색상 */
}

/* 예시: 와이어프레임의 평점을 흉내 내기 위해 별 하나를 어둡게 처리 */
.new-layout .product-card:nth-child(1) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(2) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(3) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(4) .rating-display .material-symbols-outlined {
  color: #555;
}

/* 예시: 더 어두운 색 */

/* 평점 점수 */
.new-layout .rating-score {
  font-weight: bold;
}

/* --- 후기 블록 영역 --- */
.new-layout .review-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 숙소명과 후기 텍스트의 배경 회색 블록 스타일 */
.new-layout .accommodation-name-container {
  /* 회색 블록 */
  color: #333;
  border-radius: 20px;
  padding: 0 10px;
}

/* 숙소 명 */
.new-layout .accommodation-name {
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  margin: 0;
}

.review-text-container {
  padding: 0 10px;
  /* 여백은 여기서만 담당합니다 */
  /* 배경색이 있다면 여기에 */
  border-radius: 10px;
  font-size: 12px;
}

/* 후기 텍스트 */
.new-layout .review-text {
  /* 1. 필수: 부모가 flex일 때 말줄임이 작동하게 하는 마법의 속성 */
  min-width: 0;
  width: 100%;

  /* 2. 기존 말줄임 속성 세트 (주석 풀고 다 넣으세요) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 핵심: 1줄일 때도 2줄 높이를 유지하게 함 */
  line-height: 1.5;
  /* 줄 간격 (예: 1.5rem) */
  height: 3em;
  /* line-height(1.5) * 2줄 = 3em */
  /* 3. 혹시 모를 레이아웃 간섭 방지 */
  flex-shrink: 1;
  padding: 0;
  margin: 0;
  color: #888;
}

/* Swiper overflow 해제 (box-shadow 보이게) */
.product-swiper {
  padding: 5px 0;
}

.product-swiper .swiper-wrapper {
  overflow: visible !important;
}

/* --- Swiper Pagination --- */
.product-swiper .swiper-pagination {
  bottom: 20px;
  /* Swiper 초기화 CSS에 따라 조정 필요 */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

.product-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  opacity: 1;
}

.product-swiper .swiper-pagination-bullet-active {
  background-color: white;
  /* 활성화된 bullet 색상 */
}

.product-swiper:last-child {
  margin-right: 20px;
}

/*****실시간 리뷰*/


/* --- 메인 이미지 영역 --- */
.new-layout .main-image-wrapper {
  position: relative;
  width: 100%;
  /* 이미지 높이 고정 */
  border-radius: 20px;
  /* 이미지 둥근 모서리 */
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 1 / 1;
}

.new-layout .main-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 이미지가 영역을 꽉 채우도록 */
  display: block;
}

/* 와이어프레임의 이미지 텍스트 오버레이 */
.new-layout .temp-image-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  background-color: rgba(200, 200, 200, 0.7);
  /* 더미 이미지 텍스트 배경 */
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  /* 텍스트는 클릭 불가능하게 */
  white-space: pre-wrap;
  /* 줄바꿈 적용 */
}

/* --- 프로필 및 정보 영역 --- */
.new-layout .profile-info-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}


.new-layout .profile-label {
  padding: 5px;
}

/* 위치 및 평점 컨텐츠 */
.new-layout .info-content {
  display: flex;
  gap: 10px;
  flex-grow: 1;
  justify-content: end;
  align-items: center;
  /* 정보 영역이 오른쪽을 채우도록 */
}

/* 위치 텍스트 */
.new-layout .location-text {
  font-size: 12px;
  color: #888;
  font-weight: 300;
  /* 얇은 서체 */
}





/* 예시: 와이어프레임의 평점을 흉내 내기 위해 별 하나를 어둡게 처리 */
.new-layout .product-card:nth-child(1) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(2) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(3) .rating-display .material-symbols-outlined,
.new-layout .product-card:nth-child(4) .rating-display .material-symbols-outlined {
  color: #555;
}

/* 예시: 더 어두운 색 */

/* 평점 점수 */
.new-layout .rating-score {
  font-weight: bold;
}





/* --- Swiper Pagination --- */
.product-swiper .swiper-pagination {
  bottom: 20px;
  /* Swiper 초기화 CSS에 따라 조정 필요 */
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

.product-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  opacity: 1;
}

.product-swiper .swiper-pagination-bullet-active {
  background-color: white;
  /* 활성화된 bullet 색상 */
}

.region_list {
  padding: 0;
}

/* 컨테이너 (부모 li) */
.region {
  display: flex;
  /* 아이콘과 텍스트 박스를 가로로 배치 */
  align-items: center;
  /* 아이콘과 텍스트 박스의 세로 중앙 정렬 */
  padding: 12px 0px;
  /* 에어비앤비 같은 여백 */
  cursor: pointer;
  border-radius: 12px;
  /* 살짝 둥근 모서리 */
  transition: background-color 0.2s ease;
  /* 마우스 오버 시 부드러운 효과 */
  width: auto;
}

.recommended_list {
  margin-top: 20px;
}

/* 마우스 올렸을 때 회색 배경 */
.region:hover {
  background-color: #f7f7f7;
  /* 에어비앤비 스타일의 호버 효과 */
}

/* 추천 여행지 헤더 */
.recommended_list {
  margin-top: 16px;
}

.recommended_list h6 {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 8px 4px;
}

.region_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 각 항목 */
.region {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.region:hover {
  background: #f7f7f7;
}

/* 아이콘 배경 박스 */
.region-icon-wrap {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #555;
}

/* 텍스트 박스 */
.region .text_box {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.region .main_text {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region .sub_text {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 텍스트 박스 */
.region .text_box {
  display: flex;
  /* 메인 텍스트와 서브 텍스트를 세로로 배치 */
  flex-direction: column;
  /* 세로 방향으로 배치 */
}

/* 메인 텍스트 (지역 이름) */
.region .main_text {
  font-size: 14px;
  /* 메인 텍스트 크기 */
  font-weight: 600;
  /* 살짝 두껍게 */
  color: #222222;
  /* 진한 회색 */
  line-height: 20px;
  /* 텍스트 높이 */
}

/* 서브 텍스트 (설명) */
.region .sub_text {
  font-size: 14px;
  /* 서브 텍스트 크기 */
  color: #717171;
  /* 연한 회색 */
  margin-top: 2px;
  /* 메인 텍스트와의 간격 */
  line-height: 18px;
  /* 텍스트 높이 */
}

.autocomplete_list {
  position: relative;
  /* 부모가 기준이 되게 */
  width: 100%;
  padding: 0;
  font-size: 14px;
}

.autocomplete_list .ui-widget-content {
  padding: 0 !important;
}

.autocomplete_list .ui-autocomplete {
  position: static !important;
  /* 라이브러리 기본 위치 무시 */
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 여기서 원하는 간격으로 픽셀을 조절하세요! */
  overflow: hidden !important;
}

/* 자동완성 리스트를 감싸는 ul 태그 (jQuery UI 기본 클래스) */
.autocomplete_list .ui-autocomplete {}

.m_autocomplete_list {
  position: relative;
  /* 부모가 기준이 되게 */
  width: 100%;
  padding: 0;
  font-size: 14px;
}

.m_autocomplete_list .ui-widget-content {
  padding: 0 !important;
}

.m_autocomplete_list .ui-autocomplete {
  position: static !important;
  /* 라이브러리 기본 위치 무시 */
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  display: block !important;
  overflow: hidden !important;

}

.m_autocomplete_list .ui-menu .ui-menu-item-wrapper {
  padding: 0px !important;
  margin-bottom: 20px;
}

.autocomplete_list .ui-menu .ui-menu-item-wrapper {
  padding: 0px !important;
}

/* 자동완성 결과 리스트 */
.ac-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.ac-item {
  border-radius: 8px;
  transition: background 0.12s ease;
  cursor: pointer;
}

.ac-item:hover,
.ac-item.selected {
  background: #f7f7f7;
}

.ac-item-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
}

.ac-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #666;
}

.ac-item-wrapper .text_box {
  min-width: 0;
}

.ac-item-wrapper .text_box .main_text {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.ui-menu .ui-menu-item:hover {
  background-color: #f7f7f7;
}

.ui-autocomplete {
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 12px !important;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 0;
}


/* 1. 하이라이트 시 테두리 생기는 거 방지 */
.ui-menu-item-wrapper.ui-state-active {
  border: none !important;
  /* 테두리 제거 (범인 1순위) */
  margin: 0 !important;
  /* 마진 제거 (범인 2순위) */
  background-color: #f7f7f7 !important;
  /* 배경색만 바뀌게 */
  color: #000 !important;
}

/* 2. 리스트 아이템 내부 여백 고정 */
.ui-menu-item {
  padding: 0 !important;
  border: none !important;
}


.mobile_search_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 720px;
  height: 100%;
  background: #f7f7f7;
  z-index: 10000;
  display: none;
  flex-direction: column;
}

.mobile_search_overlay.active {
  display: flex;
}

/* 검색 오버레이 열렸을 때 채널톡 버튼 숨김 */
body:has(.mobile_search_overlay.active) #ch-plugin {
  display: none !important;
}

/* ── 에어비앤비 스타일: 외부 스크롤 없이 flex column ── */
.m_search_container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0px 16px;
  overflow: hidden;
  /* 외부 스크롤 없음 */
  min-height: 0;
  /* flex child shrink 허용 */
}

/* 비활성 아코디언: 헤더만 표시 */
.m_accordion_item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
  transition: box-shadow 0.2s ease, flex 0.3s ease;
}

.m_header {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  min-height: 56px;
}

.m_label {
  font-size: 12px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.m_selected_val {
  font-size: 14px;
  color: #222;
  font-weight: bold;
}

/* 활성 아코디언: 남은 공간 전체 차지 */
.m_accordion_item.active {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
  min-height: 0;
}

.m_accordion_item.active .m_header {
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.m_accordion_item.active .m_label {
  font-size: 14px;
  color: #222;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* 콘텐츠: 활성 섹션 안에서만 스크롤 */
.m_content {
  display: none;
  padding: 0 16px 16px;
}

.m_accordion_item.active .m_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
  padding: 12px 16px 16px;
}

.m_accordion_item.active .m_content::-webkit-scrollbar {
  display: none;
}

.m_accordion_item.active .m_selected_val {
  display: none;
}

/* 달력(date) active 시 guest 헤더 숨김 → 달력 공간 확보 */
.m_accordion_item[data-step="date"].active~.m_accordion_item[data-step="guest"] {
  display: none;
}

/* 모바일 전용 인풋 */
.m_input_wrapper {
  display: flex;
  align-items: center;
  background: #eee;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 15px;
}

.m_input_wrapper input {
  border: none;
  background: transparent;
  margin-left: 10px;
  width: 100%;
  outline: none;
}

/* 하단 푸터 */
.m_footer {
  padding: 15px 20px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn_search_m {
  background: #ff385c;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}

.close_m {
  cursor: pointer;
}

.m_accordion_item {
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 12px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 열려있을 때 스타일 */
.m_accordion_item.active {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.m_accordion_item.active .m_label {
  font-size: 18px;
  font-weight: 800;
  color: #000;
}

.m_accordion_item.active .m_summary {
  display: none;
}

/* 열리면 요약 가림 */

.m_accordion_item.active .m_content {
  display: block;
}

/* 요약본 스타일 (닫혀있을 때) */
.m_summary {
  color: #717171;
  font-size: 14px;
}

/* 푸터 고정 — 아코디언 콘텐츠 위로 올라오지 않도록 z-index 명시 */
.m_search_footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  flex-shrink: 0;
}

.btn_m_search {
  background: var(--wehome-color);
  height: 48px;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 10px;
  font-weight: bold;
}


/* 달력을 세로로 나열 */
.m_calendar_ui .flatpickr-months {
  display: block;
}

.m_calendar_ui .flatpickr-innerContainer {
  display: block;
}

.m_calendar_ui .flatpickr-calendar {
  width: 100% !important;
  border: none;
  box-shadow: none;
}

/* 각 달마다 아래 간격 추가 */
.flatpickr-month {
  height: auto;
  margin-bottom: 20px;
}

/* 모바일 화면에 꽉 차게 */
.flatpickr-days {
  width: 100% !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* 모바일 전용 달력 스타일 */
/* 날짜 달력: active 섹션 내부에서 flex로 자동 높이 채움 */
#m_calendar_view {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}

#m_calendar_view::-webkit-scrollbar {
  display: none;
}

.mobile_cal_style {
  flex-direction: column !important;
  /* 가로 대신 세로로 쌓기 */
  gap: 20px !important;
  /* 달 사이 간격 넉넉히 */
}

.mobile_cal_style .calendar_half {
  width: 100% !important;
}

/* 날짜 칸 크기 조절: 모바일 화면 폭에 맞게 */
.mobile_cal_style .cal li {
  width: 14.28% !important;
  /* 100% / 7 */

  /* height: 50px !important; 터치하기 편하게 높이 확보 */
}

/* 터치 영역(동그라미) 디자인 */
.mobile_cal_style .day_cont {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px;
}

/* 지난 날짜 처리 */
.mobile_cal_style .notavail {
  color: #ccc;
  cursor: default;
  pointer-events: none;
  /* 클릭 안되게 */
}

/* 드래그 핸들 + 닫기 버튼 헤더 영역 */
.m_top_nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 20px 14px;
  min-height: 56px;
  flex-shrink: 0;
}



/* 닫기 버튼: 헤더 안 우측 20px — 충분한 여백으로 오터치 방지 */
.m_top_nav .close_m {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 30px;
  width: 30px;
  background: transparent;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  background: #ffffff;
  transition: background 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}


.m_top_nav .close_m .material-symbols-outlined {
  font-size: 16px;

}

#m_region_search_input {
  user-select: auto !important;
  -webkit-user-select: text !important;
  /* 아이폰 키보드 안 올라오는 현상 방지 */
  pointer-events: auto !important;
  z-index: 9999 !important;
  position: relative !important;
  background-color: transparent !important;
}
#m_region_search_input:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
}

/* 터치 영역을 넓혀주기 위해 부모 div에도 터치 허용 */
.m_search_input_wrap {
  pointer-events: auto !important;
  font-size: 14px;
}

/* 검색 입력 초기화 버튼 */
.m_region_clear_btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: #e8e8e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  padding: 0;
  margin-left: 6px;
}

.btn_all_clear {
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  padding: 10px 15px;
  height: 48px;
  color: #555;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn_all_clear:hover {
  border-color: #aaa;
  color: #222;
}


/* 부모 컨테이너: 화살표들이 위치를 잡을 기준점이 됩니다 */
.swiper-wrapper-container {
  position: relative;
  width: 100%;
}

/* * #swiper-seoul 에 걸어둔 mask-image (페이드 효과) 코드는
 * 이전 답변 그대로 유지하시면 됩니다!
 */

/* 화살표 버튼 공통 스타일 (마스크 효과 위로 올리기) */
.swiper-wrapper-container .swiper-button-prev,
.swiper-wrapper-container .swiper-button-next {


  /* ★ 페이드 효과 위로 올라오도록 우선순위를 높임 */



  /* 그림자 살짝 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
  border: 1px solid rgba(0, 0, 0, 0.2);
  /* 미세한 테두리 */
  color: #2c2c2c !important;
  --swiper-navigation-size: 15px;
  z-index: 10;
  background-color: rgb(255 255 255 / 72%);
  border-radius: 20px;
  font-weight: 700;
  padding: 12px 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  font-size: 12px !important;
}

.swiper-button-next {
  right: 5px;
}

.swiper-button-prev {
  left: 5px;
}

/* 기본 Swiper 화살표 아이콘 크기 조절 및 색상 */
.swiper-wrapper-container .swiper-button-prev::after,
.swiper-wrapper-container .swiper-button-next::after {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

/* 왼쪽 화살표 위치 */
.swiper-wrapper-container .swiper-button-prev {
  left: 10px;
  /* 페이드아웃 된 왼쪽 영역 위에 둥둥 뜸 */
}

/* 오른쪽 화살표 위치 */
.swiper-wrapper-container .swiper-button-next {
  right: 10px;
  /* 페이드아웃 된 오른쪽 영역 위에 둥둥 뜸 */
}

/* (선택) 처음과 끝에 도달했을 때 화살표 숨기거나 흐리게 하기 */
.swiper-wrapper-container .swiper-button-disabled {
  opacity: 0 !important;
  /* 끝에 도달하면 버튼 아예 숨기기 (원하시면 0.3 등으로 변경) */
  pointer-events: none;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}

/***** 레이아웃 수정 2026/02/26 *****/
/*****************/
/*****************/



.wh-root.index section#category {
  text-align: center;
  width: auto;
  overflow: hidden;
  position: relative;
}

.wh-root.index section#category::before,
.wh-root.index section#category::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wh-root.index section#category::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.wh-root.index section#category::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

.wh-root.index section#category.show-left-gradient::before {
  opacity: 1;
}

.wh-root.index section#category.show-right-gradient::after {
  opacity: 1;
}

.wh-root.index section#category div.category_slide {
  height: unset;
  padding-left: 20px;
  padding-right: 20px;
}

.wh-root.index section#category ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
  margin-bottom: 15px;
  width: auto;
  display: inline-flex;
  height: auto;
}

.wh-root.index section#category ul li {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease-in-out;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* .wh-root.index section#category ul li:first-child {
  margin-left: 1rem;
}

.wh-root.index section#category ul li:last-child {
  margin-right: 1rem;
} */

/* .wh-root.index section#category ul li:not(:first-child) {
  margin-left: 2rem;
} */

.wh-root.index section#category ul li * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

.wh-root.index section#category ul li i {
  font-size: 33px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wh-root.index section#category ul li i.icon-festival {
  margin-top: 2px;
  margin-bottom: 15px;
}

.wh-root.index section#category ul li h6 {
  margin-top: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wh-root.index section#category ul li:hover h6 {
  color: var(--wehome-color);
}

.wh-root.index section#category ul li:hover i {
  color: var(--wehome-color);
}

.wh-root.index section#category ul li:hover i.icon-festival:before {
  background: var(--wehome-color);
}

.wh-root.index section#category ul li.select {
  color: var(--wehome-color);
}

.wh-root.index section#category ul li.select[data-type=festival] i:before {
  background: var(--wehome-color);
}

.wh-root.index main {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -170px;
  margin-bottom: var(--bottom-naverbar-height);
  padding-top: var(--header-height);
  /* side borders */
  border-color: var(--bottom-naverbar-border-side-color);
  border-width: 1px;
  border-style: solid;
}

.wh-root.index .spinner-border {
  width: 5rem;
  height: 5rem;
  color: var(--wehome-color);
}

/* Swiper styles moved to style_common.css */

/* Index page specific swiper button styles moved to style_common.css */

/* .swiper-lazy-preloader moved to style_common.css */

.wh-root.index section#banners {
  margin: 40px auto 0;
}

.wh-root.index section#banners div.item img {
  border-radius: 10px;
}

.wh-root.index section#banners .swiper-pagination-bullet {
  background: var(--wehome-color) !important;
}

.wh-root.index section#banners .swiper-pagination-bullet-active {
  background-color: var(--wehome-color) !important;
}

/*
.wh-root.index section#top_banners {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.wh-root.index section#top_banners.showing_notice_pop {
  margin-top: 55px !important;
}

.wh-root.index section#top_banners .swiper-pagination-bullet {
  background: var(--wehome-color) !important;
  opacity: 0.3;
}

.wh-root.index section#top_banners .swiper-pagination-bullet-active {
  background-color: var(--wehome-color) !important;
}

.wh-root.index section#top_banners .top_banner_swipe .swiper-wrapper {
  height: auto;
  margin-bottom: 5px;
}*/

.wh-root.index div.event-banner {
  width: calc(100% - 2 * var(--padding));
  margin: 0 auto 1rem;
  max-width: 1010px;
  position: relative;
}

.wh-root.index div.event-banner a {
  width: 100%;
  border-radius: .75rem;
  overflow: hidden;
  display: block;
}

.wh-root.index div.event-banner a img {
  display: block;
  width: 100%;
}

.wh-root.index div.event-banner a.desktop {
  display: none;
}

.wh-root.index div.event-banner.kcoupon.done:after {
  content: '쿠폰이 모두 소진 되었습니다. 다음에 다시 만나요!';
  position: absolute;
  left: .5rem;
  top: .5rem;
  width: 100%;
  display: inline-block;
  padding: .5rem;
  background: #fff;
  line-height: 1.2em;
  border-radius: .35rem;
  font-weight: 500;
  font-size: 1rem;
  color: var(--wehome-color);
  background: #fff;
  max-width: calc(100% - 1rem);
  word-break: keep-all;
}

.wh-root.index footer {
  font-size: 1rem;
  line-height: 2;
  color: #444;
  background: #f3f3f3;
  padding: var(--padding);
  border-top: 1px solid #ddd;
}

.wh-root.index footer .container-fluid {
  padding: 0;
  margin: 0;
}

.wh-root.index footer .container-fluid .row {
  margin: 0;
  flex-direction: column;
}

.wh-root.index footer .footer-links {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.wh-root.index footer dl {
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.wh-root.index footer dt {
  margin-bottom: 5px;
}

.wh-root.index footer dd a {
  color: #666;
}

.wh-root.index footer .copyright {
  padding: 15px 0 5rem;
  font-size: .8em;
  line-height: 1.25em;
  color: #666;
}

.wh-root.index footer .sns_link {
  display: flex;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

.wh-root.index footer .sns_link span {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}

.wh-root.index footer .sns_link span a {
  display: block;
  width: 100%;
}

.wh-root.index footer .sns_link img {
  padding-bottom: 10px;
  max-width: 100%;
}

.wh-root.index footer .app_link {
  display: flex;
  margin-bottom: 1rem;
}

.wh-root.index footer .app_link a {
  width: 120px;
}

.wh-root.index footer .app_link a+a {
  margin-left: .5rem;
}

.wh-root.index footer .payments {
  margin: 0 0 1rem;
  padding: 0;
}

.wh-root.index footer .payments img {
  max-height: 1.75rem;
  width: auto;
  margin-right: 0.5rem;
}

.wh-root.index footer .payments img:nth-child(4),
.wh-root.index footer .payments img:nth-child(5) {
  max-height: 1.25rem;
}


/* google map */
.wh-root.index .pac-container {
  z-index: 1050;
}

/* mobile */
.wh-root.index .navbar_menu {
  z-index: 1100;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 80%;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-top: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: #fff;
  transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.wh-root.index .navbar_menu.open {
  visibility: visible;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.wh-root.index .navbar_nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.wh-root.index .navbar_menu .nav-item {
  display: block;
  padding: 1rem 0.5rem;
  height: 50px;
}

.wh-root.index .navbar_menu .nav-item a {
  color: #000;
}

.wh-root.index .navbar_menu .nav-item div.dropdown button.btn {
  padding: 0;
}

.wh-root.index header ul.top_menu img.rounded {
  border-radius: 50% !important;
  width: 2rem;
  height: 2rem;
}

.wh-root.index header ul.top_menu .wehomehost_btn {
  height: 2rem;
  padding-left: 1rem;
  margin-left: 1rem;
  font-size: 12px;
  font-weight: 600;
  padding: 0 1.2rem;
  align-content: center;
}

body.sticky .wh-root.index .top_wrapper_buttons {
  margin-top: -5rem;
}


/* 1. 기본 상태: 양쪽 모두 흐리게 (중간쯤 스크롤 중일 때) */
#swiper-seoul {
  /* 양끝 40px 영역을 투명하게(흐리게) 처리하여 뒤로 갈수록 사라지는 효과 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}

/* 오른쪽 끝에 하얀 그라데이션 덮기 */
#swiper-seoul.swiper-is-beginning::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  /* 흐린 영역 너비 */
  height: 100%;
  /* 투명 -> 완전 하얀색으로 변함 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  z-index: 10;
  pointer-events: none;
  /* 덮어씌운 그라데이션 때문에 클릭이 안 되는 현상 방지 */
}

/* 왼쪽 끝에 하얀 그라데이션 덮기 */
#swiper-seoul.swiper-is-end::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  /* 완전 하얀색 -> 투명으로 변함 */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 10;
  pointer-events: none;
}

/* 1. 기본 상태: 양쪽 모두 흐리게 (중간쯤 스크롤 중일 때) */
#swiper-busan-weekend {
  /* 양끝 40px 영역을 투명하게(흐리게) 처리하여 뒤로 갈수록 사라지는 효과 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
}

/* 오른쪽 끝에 하얀 그라데이션 덮기 */
#swiper-busan-weekend.swiper-is-beginning::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  /* 흐린 영역 너비 */
  height: 100%;
  /* 투명 -> 완전 하얀색으로 변함 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  z-index: 10;
  pointer-events: none;
  /* 덮어씌운 그라데이션 때문에 클릭이 안 되는 현상 방지 */
}

/* 왼쪽 끝에 하얀 그라데이션 덮기 */
#swiper-busan-weekend.swiper-is-end::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  /* 완전 하얀색 -> 투명으로 변함 */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 10;
  pointer-events: none;
}


/* 4. 데이터가 적어서 스와이프 자체가 안 될 때 (흐림 효과 아예 제거) */
#swiper-seoul.swiper-is-locked {
  -webkit-mask-image: none;
  mask-image: none;
}

/* 4. 데이터가 적어서 스와이프 자체가 안 될 때 (흐림 효과 아예 제거) */
#swiper-busan-weekend.swiper-is-locked {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 320px) {
  .wh-root.index div#wh_fav_area {
    width: 100%;
  }
}

@media (max-width: 620px) {

  /* Sticky 상태일 때는 높이 줄이기 */
  body.sticky .wh-root.index .search_box_container {
    /* Sticky 검색창 높이 */
    display: none;
  }

  .wh-root.index .wh_cont {
    padding: 0 20px;
  }

  .wh-root.index .search_box_container {
    display: none;
  }

  .main_list .swiper-slide {
    width: 45%;
    /* 모바일에서 다음 카드가 보이게 */
  }

  .new-layout .product-card {
    width: 55%;
  }

  .new-layout .location-text {
    font-size: 11px;
  }

  .new-layout .main-image-wrapper {
    margin-bottom: 5px;
  }

  .new-layout .profile-info-row {
    gap: 5px;
    margin-bottom: 5px;
  }

  .new-layout .info-content {
    gap: 5px;
  }

  .new-layout .rating-display {
    font-size: 12px;
    gap: 0;
  }
}


@media (max-width: 767.5px) {
  body.sticky .wh-root.index .notice_pop {
    transform: translateY(-100%);
    height: 2.5rem;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* div.event-banner { margin: 1.5rem auto 1.5rem; } */


  .wh-root.index div.event-banner a.mobile {
    display: none;
  }

  .wh-root.index div.event-banner a.desktop {
    display: block;
  }

  .wh-root.index div.event-banner.done:after {
    content: '쿠폰이 모두 소진 되었습니다. 6월 3일에 다시 만나요!';
    width: unset;
    right: .5rem;
    top: .5rem;
    left: unset;
    transform: unset;
    line-height: 1em;
  }
}

.wh-root.index section.notice_pop {
  margin-bottom: 10px;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  /* transition: all .5s; */
}

.wh-root.index section.notice_pop .notifce_pop_content {
  padding: 10px;
  background: #1da129;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1em;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 7px;
}

.wh-root.index section.notice_pop .notifce_pop_content div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

.wh-root.index section.notice_pop .notifce_pop_content img {
  max-width: 540px;
  height: 54px;
  width: 100%;
}

/* 위시리스트 하트 버튼 */
.wishlist-heart-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: none;
  padding: 0;
}

/* 기본 상태: 꽉 찬 하트는 숨겨두기 */
.wishlist-heart-btn .icon-filled {
  display: none;
  fill: #ff0057;
  /* (선택) 꽉 찼을 때 색깔 빨간색으로! */
}

/* 1️⃣ 호버 시 상태 교체 */
/* 테두리 하트는 숨기고 */
.wishlist-heart-btn:hover .icon-outlined {
  display: none;
}

/* 꽉 찬 하트는 보이게 */
.wishlist-heart-btn:hover .icon-filled {
  display: block;
}

/* 2️⃣ (덤) 이미 찜한 상태(.liked)일 때도 꽉 찬 하트 보여주기 */
.wishlist-heart-btn.liked .icon-outlined {
  display: none;
}

.wishlist-heart-btn.liked .icon-filled {
  display: block;
}

/* SVG 하트 아이콘 기본 스타일 */
.wishlist-heart-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
  transition: all 0.2s ease;
}


/* photo_container에 relative 포지션 추가 */
.wh-root.index .photo_container {
  position: relative;
}

.photo_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 글자가 잘 보이도록 어둡게 처리 */
  transition: transform 0.3s ease;
}

.photo_card:hover img {
  transform: scale(1.1);
}

/* 하단 탭바 hover/active 효과 (메인 페이지는 layout.css 미로드 → 여기서 정의) */
nav#bottom_nav .container .row .col .button_wrap {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
nav#bottom_nav .col .button_wrap img,
nav#bottom_nav .col .button_wrap svg {
  grid-area: 1 / 1 !important;
  position: static !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}
nav#bottom_nav .col .button_wrap svg.off {
  color: #767676 !important;
  fill: #767676 !important;
}
nav#bottom_nav .col .button_wrap svg.off [stroke] {
  stroke: #767676 !important;
}
nav#bottom_nav .col .button_wrap svg.off [fill]:not([fill="none"]) {
  fill: #767676 !important;
}
nav#bottom_nav .col .button_wrap svg.over,
nav#bottom_nav .col:hover .button_wrap svg,
nav#bottom_nav .col.on .button_wrap svg {
  color: var(--wehome-color, #6800cd) !important;
  fill: var(--wehome-color, #6800cd) !important;
}
nav#bottom_nav .col .button_wrap svg.over [stroke],
nav#bottom_nav .col:hover .button_wrap svg [stroke],
nav#bottom_nav .col.on .button_wrap svg [stroke] {
  stroke: var(--wehome-color, #6800cd) !important;
}
nav#bottom_nav .col .button_wrap svg.over [fill]:not([fill="none"]),
nav#bottom_nav .col:hover .button_wrap svg [fill]:not([fill="none"]),
nav#bottom_nav .col.on .button_wrap svg [fill]:not([fill="none"]) {
  fill: var(--wehome-color, #6800cd) !important;
}
nav#bottom_nav .col .button_wrap .off {
  display: block !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
nav#bottom_nav .col .button_wrap .over {
  display: block !important;
  opacity: 0 !important;
  transform: scale(0.78) !important;
  pointer-events: none !important;
}
nav#bottom_nav .col.on .button_wrap,
nav#bottom_nav .col:hover .button_wrap {
  transform: translateY(-3px) scale(1.14) !important;
}
nav#bottom_nav .col:active .button_wrap {
  transform: translateY(0) scale(0.88) !important;
  transition-duration: 0.06s !important;
}
nav#bottom_nav .col.on .button_wrap .off,
nav#bottom_nav .col:hover .button_wrap .off {
  opacity: 0 !important;
  transform: scale(1.12) !important;
}
nav#bottom_nav .col.on .button_wrap .over,
nav#bottom_nav .col:hover .button_wrap .over {
  opacity: 1 !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}
nav#bottom_nav .col h2 {
  color: #767676 !important;
  transition: color 0.18s ease !important;
}
nav#bottom_nav .col.on h2,
nav#bottom_nav .col:hover h2 {
  color: var(--wehome-color) !important;
  font-weight: 500 !important;
}
}