@charset "UTF-8";

/***************************************************************************************
   Page : Search
***************************************************************************************/

.page-search {

}
.page-search .header-right {
    display: none !important;
}
.search-section {
    padding: 16px 20px;
}
/* 내부 wrap – 위/아래 묶음 전체 */
.search-section__box {
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 10px 0px #00000014;
    overflow: hidden;
}

/* ---------- 위(검색창) 영역 ---------- */
.search-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid #EFEDF0;
}

.search-section__header .icon-search {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("../../images/search/icon-search.svg") no-repeat center / contain;
}

.search-section__input {
    flex: 1;
    font-size: 13px;
    border: none;
    outline: none;
    color: #333;
}

/* ---------- 아래(조건 표시) 영역 ---------- */
.search-section__filter {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    flex-wrap: wrap; /* 줄바꿈 가능 */
}

.js-searchCondition {
    cursor: pointer;
}

.search-section__cell {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111;
    white-space: nowrap;
}

.search-result .icon-calendar,
.search-section .icon-calendar {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../images/search/icon-calendar.svg") no-repeat center / contain;
}

/* 구분선 */
.search-section__sep {
    width: 1px;
    height: 18px;
    background: #ddd;
    display: inline-block;
}

/* 텍스트 공통 */
.search-section__label {
    font-size: 13px;
    color: #000;
}

.search-tit {
    display: block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.search-section__recent {}

.search-section__recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.recent-list__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: #F9F8FA;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #1B1B1B;
}
.recent-list__badge button {
    display: inline-flex;
    align-items: center;
}

.icon-recently-del {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url("../../images/search/icon-recently-del.svg") no-repeat center / contain;
}

.recent-room-swiper .swiper-wrapper {
    /*gap: 12px;*/
}

.recent-room-swiper .swiper-slide {
    width: 145px;
    height: 170px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
}

.recent-room-swiper .room-card {
    height: 100%;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
}

.recent-room-swiper .room-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-room-swiper .room-card em {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.search-section__keyword {
    /*display: none;*/
}
.keyword-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.keyword-list__item {
    display: flex;
    gap: 6px;
}
.keyword-list__item em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: #F9F8FA;
}
.keyword-list__item em i {
    display: inline-block;
    width: 14px;
    height: 14px;
}
.keyword-list__item em i.icon-search {
    background: url("../../images/search/icon-search.svg") no-repeat center / contain;
}
.keyword-list__item em i.icon-hotel {
    background: url("../../images/search/icon-hotel.svg") no-repeat center / contain;
}

.keyword-list__item > span {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.keyword-list__item > span > span {
    font-size: 14px;
    color: #FF6A29;
}

section.dimmed {
    display: none;
}

/* 활성화 상태 */
.dimmed.js-optionPopup.is-visible {
    display: block;
    opacity: 1;
}

.bottom-sheet {
    max-width: 560px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    touch-action: none;
}

/* 올라온 상태 */
.dimmed.js-optionPopup.is-visible .bottom-sheet {
    transform: translateY(0);
}

.bottom-sheet__handle {
    width: 40px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    margin: 10px auto 12px;
}

.bottom-sheet__content {
    height: calc(100% - 36px);
    overflow-y: auto;
    padding: 0 14px 10px;
}

.bottom-sheet__content-wrap {
    height: calc(100% - 38px);
    overflow-y: auto;
    padding: 4px 10px 0;
}
.sort-pop .bottom-sheet__content-wrap,
.map-pop .bottom-sheet__content-wrap {
    height: 100%;
}

.bottom-sheet__content .button-wrap .search-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #000;
    border-radius: 6px;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.bottom-sheet__content-item {
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px #88888833;
}

.bottom-sheet__content-item + .bottom-sheet__content-item {
    margin-top: 20px;
}

.bottom-sheet__content-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bottom-sheet__content-header > span > span {
    color: #FF7C43;
    font-size: 16px;
    font-weight: 600;
}

.bottom-sheet__content-header .accord-btn {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

.bottom-sheet__content-body {
    display: none;
    padding-top: 16px;
}

.bottom-sheet__content-item.on .bottom-sheet__content-body {
    display: block;
}
.bottom-sheet__content-item.on .accord-btn {
    display: none;
}


/* flatpickr 커스터마이즈 */
.date-range-wrap .flatpickr-calendar {
    width: 100%;
    border-radius: 16px;
    box-shadow: none;
}

.date-range-wrap .flatpickr-months {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}

.date-range-wrap .flatpickr-month {
    height: auto;
}

.date-range-wrap .flatpickr-current-month {
    position: relative;
    left: initial;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 !important;
}

.date-range-wrap .flatpickr-months .flatpickr-month {
    flex: none;
}

.date-range-wrap .flatpickr-current-month .cur-month,
.date-range-wrap .flatpickr-current-month .numInputWrapper input{
    font-size: 16px;
    font-weight: 500;
}
.date-range-wrap .flatpickr-current-month .numInputWrapper {
    width: 50px;
}
.date-range-wrap .flatpickr-current-month .numInputWrapper input {
    width: 100%;
}

.date-range-wrap .flatpickr-weekdays {
    margin-top: 6px;
}

.date-range-wrap .flatpickr-weekday {
    color: #6f6f6f;
    font-weight: 600;
}
.date-range-wrap .flatpickr-weekday:first-child {
    color: #F14E08;
}
.date-range-wrap .flatpickr-weekday:last-child {
    color: #5D5FEF;
}

.date-range-wrap .flatpickr-day {
    border-radius: 50% !important;
    width: clamp(34px, 12vw, 50px);
    height: clamp(34px, 12vw, 50px);
    line-height: clamp(34px, 12vw, 50px);
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* 오늘 날짜 */
.date-range-wrap .flatpickr-day.today {
    position: relative;
    border: none;
}
.date-range-wrap .flatpickr-day.today:after {
    content: "오늘";
    position: absolute;
    color: #FF6A29;
    bottom: -16px;
    left: 50%;
    font-size: 12px;
    line-height: normal;
    transform: translate(-50%);
    width: 100%;
}

/* 선택된 시작/끝 */
.date-range-wrap .flatpickr-day.startRange,
.date-range-wrap .flatpickr-day.endRange {
    background: #ff7a00;
    color: #fff !important;
    border: 0 !important;
}

/* 범위 내부 */
.date-range-wrap .flatpickr-day.inRange {
    background: #FFF3EB !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0;
}
.date-range-wrap .flatpickr-day.inRange:before,
.date-range-wrap .flatpickr-day.inRange:after{
    content: "";
    width: 100%;
    height: 100%;
    background: #FFF3EB !important;
}
/* 주말 컬러 */
.date-range-wrap .flatpickr-day.weekend:nth-child(1) { /* 일요일 */
    color: #F14E08;
}

.date-range-wrap .flatpickr-day.weekend:nth-child(7) { /* 토요일 */
    color: #5D5FEF;
}

.date-range-wrap .flatpickr-day.disabled {
    color: #ccc;
}

/* 화살표 버튼 */

.date-range-wrap .flatpickr-months .flatpickr-prev-month,
.date-range-wrap .flatpickr-months .flatpickr-next-month {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 8px;
    padding: 0;
}

.date-range-wrap .flatpickr-prev-month:hover,
.date-range-wrap .flatpickr-next-month:hover {
    background: none !important;
}

.date-range-wrap #rangeCal,
.date-range-wrap .flatpickr-days,
.date-range-wrap .dayContainer,
.date-range-wrap .flatpickr-rContainer {
    width: 100% !important;
    max-width: 100% !important;
}

.date-range-wrap .flatpickr-day {
    max-width: initial !important;
}

.date-range-wrap .flatpickr-weekdaycontainer,
.date-range-wrap .flatpickr-days .dayContainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    place-items: center;
    row-gap: 22px;
}

.date-range-wrap .flatpickr-day {
    /*width: 100%;*/
    height: auto;
    aspect-ratio: 1 / 1; /* 정사각형 유지 */
    border-radius: 50%;
    margin: 2px;
}

.date-range-wrap .rangeMode .flatpickr-day {
    width: 32px;
    height: 32px;
    margin: 0 !important;
    color: #1b1b1b;
}
.date-range-wrap .rangeMode .flatpickr-day.flatpickr-disabled {
    color: rgba(57,57,57,0.3) !important;
}

.date-range-wrap .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.date-range-wrap .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
    display: block;
    opacity: 0;
}

.date-range-wrap .rangeMode .flatpickr-day.prevMonthDay {
    color: #AEADB0 !important;
}

.date-range-wrap .rangeMode .flatpickr-day:nth-child(7n + 1) {
    color: #F14E08;
}
.date-range-wrap .rangeMode .flatpickr-day:nth-child(7n + 7) {
    color: #5D5FEF;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: none !important;
}
.date-range-wrap .flatpickr-day.selected,
.date-range-wrap .flatpickr-day.startRange,
.date-range-wrap .flatpickr-day.endRange{
    background-color: #FF6A29 !important;
}
.icon-users {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../images/search/icon-users.svg") no-repeat center / contain;
}
.icon-moneybag {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../../images/search/icon-moneybag.svg") no-repeat center / contain;
}

/* 행 레이아웃 */
.guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.guest-row__label {
    color: #000;
}

/* 숫자 증감 버튼 + 값 */
.guest-row__controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.count-btn {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* - 버튼 */
.count-btn--minus {
    background-color: #f3f3f3;
    color: #999;
}

/* + 버튼 */
.count-btn--plus {
    background-color: #ff7b2e;
    color: #fff;
}

.guest-counter__value {
    min-width: 48px;
    text-align: center;
}

/* 몸무게 영역 */
.guest-row--weight .guest-weight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.guest-weight__input {
    width: 60px;
    height: 30px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: right;
}

.guest-weight__unit {
    font-size: 14px;
    color: #555;
}

/* 금액 슬라이더 영역 */
.bottom-sheet__content-body .fee-range {
    padding: 8px 0 4px;
}

/* 최소/최대 금액 라벨 */
.bottom-sheet__content-body .fee-range__labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin-bottom: 8px;
}

/* 듀얼 슬라이더 컨테이너 */
.bottom-sheet__content-body .fee-range__slider {
    position: relative;
    height: 18px;
}

/* 슬라이더 트랙 (배경) */
.bottom-sheet__content-body .fee-range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #eee;
}

/* 선택 범위 표시 */
.bottom-sheet__content-body .fee-range__range {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #ff7a1a;
    left: 0%;
    right: 42%;
}

/* 슬라이더 공통 스타일 */
.bottom-sheet__content-body .fee-range__input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    outline: none;
}

/* WebKit thumb */
.bottom-sheet__content-body .fee-range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff7a1a;
    cursor: pointer;
    pointer-events: auto;
}

/* Firefox thumb */
.bottom-sheet__content-body .fee-range__input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff7a1a;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
}

/* Firefox track */
.bottom-sheet__content-body .fee-range__input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: transparent;
}

/* search result 페이지 */
.search-result .layout-container {
    display: flex;
    flex-direction: column;
}
.search-result__header {
    padding: 12px 16px 10px;
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Noto Sans KR", system-ui, sans-serif;
    box-sizing: border-box;
}

/* 공통 행 레이아웃 */
.search-result__row {
    display: flex;
    align-items: center;
}

.search-result__row + .search-result__row {
    margin-top: 10px;
}

/* 상단: 뒤로가기 / 검색창 / 홈 */
.search-result__row--top {
    column-gap: 8px;
}

.search-result__icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 필요하면 각각에 아이콘 클래스 추가해서 사용 */
.search-result__icon-btn--back {}
.search-result__icon-btn--home {}

.search-result__search-box {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #F9F8FA;
    border-radius: 8px;
}

.search-result__search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    line-height: 1;
    outline: none;
}

.search-result__clear-btn {
    /*width: 26px;*/
    /*height: 26px;*/
    /*margin-left: 8px;*/
    /*border-radius: 50%;*/
    /*border: none;*/
    /*background: #999999;*/
    /*color: #ffffff;*/
    /*font-size: 16px;*/
    /*line-height: 1;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 중간: 요약 + 정렬 버튼 */
.search-result__row--summary {
    justify-content: space-between;
    height: 30px;
}

.search-result__summary {
    display: flex;
    align-items: center;
    gap: 5px;
}

.search-result__summary span {
    margin: 0;
    font-size: 14px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
    cursor: pointer;
}

.search-result__sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    font-size: 13px;
    color: #333333;
    cursor: pointer;
}

.search-result__sort-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    /* 정렬 아이콘 들어갈 자리 */
}

/* 하단: 필터 칩들 */
.search-result__row--filters {
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.search-result__row--filters::-webkit-scrollbar {
    display: none;
}

.search-result__row--options {
    display: flex;
    gap: 10px;
}

.search-result__row--options em {
    padding: 8px 12px;
    background: #F9F8FA;
    border-radius: 8px;
    color: #1B1B1B;
    font-size: 12px;
}

.search-result__filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #EFEDF0;
    background: #fff;
    font-size: 12px;
    color: #1b1b1b;
    cursor: pointer;
    white-space: nowrap;
}

.search-result__filter-chip.active {
    color: #FF6A29;
    border-color: #FF6A29;
}

.search-result .trip-style {
    width: 100%;
    padding: 16px 24px;
}

/* 배너 영역 */
.search-result .trip-style__banner-swiper {
    width: 100%;
}

.trip-style__banner-swiper .swiper-wrapper {
    gap: 10px;
}

/* 스와이프 시 아래쪽 "살짝 잘림" 방지 */
.search-result .trip-style__banner-swiper .swiper-wrapper,
.search-result .trip-style__banner-swiper .swiper-slide {
    height: auto;
}

.search-result .trip-style__banner {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0; /* img 아래 여백 제거 */
}

/* 이미지가 배너 형태로 꽉 차게 */
.search-result .trip-style__banner img {
    display: block;
    width: 100%;
    height: auto;
    /*aspect-ratio: 249 / 52; !* 예시 이미지 비율 (길쭉한 배너) *!*/
    object-fit: cover;
}


/* hotel list 영역 */
.search-result .hotel-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 24px 80px;
    /*overflow-y: auto;*/
}

/* 카드 */
.search-result .hotel-list__item {
    padding-top: 20px;
    background: #fff;
}

.search-result .hotel-list__item + .hotel-list__item {
    border-top: 1px solid #EFEDF0;
}

.search-result .hotel-list__item .keyword-item__title {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1B1B1B;
}

.search-result .hotel-list__item .keyword-item__list {
    display: flex;
    gap: 10px;
}

.search-result .hotel-list__item .keyword-item__list span {
    padding: 8px 12px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    background-color: #F9F8FA;
    color: #1b1b1b;
}

/* 상단(썸네일 + 정보) */
.search-result .hotel-list__link {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 16px;
    padding: 4px 0 10px;
    text-decoration: none;
    color: inherit;
}

/* 이미지 영역(실제 이미지는 여기 안에 넣거나 background로 교체) */
.search-result .hotel-list__thumb {
    position: relative;
    border-radius: 5px;
    background: #e9e9e9;
    overflow: hidden;
}
.hotel-list__sale-chip-only {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 2px 10px;
    border-radius: 4px;
    color: #fff;
    background: #000;
}
.hotel-list__sale-chip-nights {
    position: absolute;
    bottom: 9px;
    left: 9px;
    padding: 2px 10px;
    border-radius: 4px;
    color: #F9F8FA;
    background: #FF6A29;
}

/* 오른쪽 정보 */
.search-result .hotel-list__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 광고 + 찜 */
.search-result .hotel-list__top {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
}

.search-result .hotel-list__ad {
    margin-bottom: 6px;
    font-size: 10px;
    line-height: 1;
    color: #9aa0a6;
    text-align: right;
}

.search-result .hotel-list__ad > span{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.search-result .hotel-list__wish {
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-left: 4px;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 하트 아이콘 자리(원하는 svg/폰트아이콘으로 교체) */
.search-result .hotel-list__wish-ic {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #ff6b6b; /* 임시 표시용 */
}

/* 타이틀 */
.search-result .hotel-list__title {
    flex: 1;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #1B1B1B;
}

.search-result .hotel-list__festa {
    font-size: 10px;
    line-height: 24px;
    color: #FF6A29;
}

/* 후기 */
.search-result .hotel-list__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    color: #1b1b1b;
}

.search-result .hotel-list__review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1b1b1b;
}

.search-result .hotel-list__review-ic {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #cfd3d8; /* 임시 표시용 */
    display: inline-block;
}

/* 조건(최대 인원/반려동물) */
.search-result .hotel-list__sub {
    font-size: 12px;
    color: #1b1b1b;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result .hotel-list__discount {
    display: flex;
    gap: 6px;
}

.search-result .discount-chip {
    padding: 2px 4px;
    background: #E3E4F9;
    border-radius: 3px;
    color: #223ABD;
    font-size: 10px;
}

/* 가격 라인 */
.search-result .hotel-list__price-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.search-result .hotel-list__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.search-result .hotel-list__price-row .discount-percentage {
    display: inline-flex;
    gap: 4px;
    font-size: 10px;
}

.search-result .hotel-list__price-row .discount-percentage em {
    font-weight: 600;
    color: #6E6E6E;
}
.search-result .hotel-list__price-row .discount-percentage span {
    font-weight: 400;
    color: #6E6E6E;
}

.search-result .hotel-list__price-row .total-price {
    margin-top: 4px;
    font-size: 16px;
}

.search-result .hotel-list__price-badge {
    font-size: 10px;
    color: #1b1b1b;
    background: #F9F8FA;
    padding: 2px 5px;
    border-radius: 2px;
    line-height: 16px;
}

.search-result .hotel-list__price {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.2px;
}

/* 프로모션 바 */
.search-result .hotel-list__promo {
    padding: 6px 12px;
    border-radius: 8px;
    background: #F9F8FA;
    font-size: 12px;
    color: #6E6E6E;
    line-height: 20px;
}
.search-result .icon-arrange {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("../../images/search/icon-arrange.svg") no-repeat center / contain;
}
.search-result .icon-filter {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("../../images/search/icon-filter.svg") no-repeat center / contain;
}
.search-result .icon-heart {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../../images/search/icon-heart-line.svg") no-repeat center / contain;
}
.search-result .hotel-list__wish.active .icon-heart {
    background: url("../../images/search/icon-heart.svg") no-repeat center / contain;
}

.search-result .icon-info {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url("../../images/search/icon-info.svg") no-repeat center / contain;
}
.search-result .icon-comment {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url("../../images/search/icon-comment.svg") no-repeat center / contain;
}
.search-result .icon-map {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("../../images/search/icon-map.svg") no-repeat center / contain;
}
/* 화면 하단 플로팅 래퍼 */
.search-result .floating-btn{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    /* 아이폰 홈바 안전영역 + 여백 */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

/* 버튼 본체 */
.search-result .floating-btn__inner{
    width: 132px;
    max-width: 360px;
    margin: 0 auto;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ff5a00; /* 필요하면 색 바꿔 */
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0px 0px 12px 4px #22222222;
    cursor: pointer;
}

/* 아이콘 영역(너가 교체) */
.search-result .floating-btn__icon{
    width: 18px;
    height: 18px;
    flex: none;
    /* background, mask 등은 여기서 너가 처리 */
}

.search-result .floating-btn__text{
    line-height: 1;
}

.search-result .search-section__keyword {
    z-index: 999;
    position: absolute;
    background: #fff;
    width: 100%;
    height: calc(100% - 62px);
    top: 62px;
    left: 0;
    padding: 0 24px;
}

.bottom-sheet__content-wrap.opened-style .bottom-sheet__content-body {
    display: block;
}

.opened-style .bottom-sheet__content-item {
    padding: 0 0 8px;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #EFEDF0;
}

.opened-style .bottom-sheet__content-header__tit {
    display: block;
    color: #1B1B1B;
    font-size: 16px;
    font-weight: 600;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.filter-pop {

}

.search-result-pop__title {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0 20px;
}

.filter-check {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 12px;
}

/* label 자체를 버튼처럼 */
.filter-check__item {
    position: relative;
    cursor: pointer;
}

/* 실제 checkbox 숨김 */
.filter-check__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 버튼 UI */
.filter-check__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    background: #fff;
    border: 1px solid #F9F8FA;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 18px;
}

/* 체크된 상태 */
.filter-check__item input:checked + span {
    background: #111;
    border-color: #111;
    color: #fff;
}

/* hover */
.filter-check__item:hover span {
    border-color: none;
}

.map-pop .map-wrap {
    background-color: #ddd;
}

.filter-pop .bottom-sheet {
    height: 410px;
}

.sort-pop .bottom-sheet {
    height: 300px;
}
.sort-pop .sort-wrap {
    height: calc(100% - 50px);
}

.sort-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
}

.sort-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 3px 0;
    cursor: pointer;
    user-select: none;
}

.sort-list__item + .sort-list__item {
    margin-top: 24px;
}

.sort-item__txt {
    font-size: 14px;
    color: #1B1B1B;
}

/* 실제 체크박스는 숨김 */
.sort-item__chk {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 체크 아이콘 자리(오른쪽 정렬) */
.sort-item .icon-sort-check {
    flex: 0 0 auto;
    display: inline-block;
    background: url("../../images/search/icon-sort-check.svg") no-repeat center / contain;
    width: 24px;
    height: 24px;
    /* 기본은 안 보이게 */
    opacity: 0;
    transform: translateY(0); /* 필요시 미세조정 */
}

/* 체크되면 아이콘 자리 보이게 */
.sort-item__chk:checked ~ .icon-sort-check {
    opacity: 1;
}

.sort-item__chk:checked + .sort-item__txt {
    color: #FF6A29;
}

/* 키보드 접근성(탭으로 포커스) */
.sort-item:has(.sort-item__chk:focus-visible) {
    outline: 2px solid #ddd;
    outline-offset: -2px;
    border-radius: 8px;
}