/**
 * 호텔 리스트 (hotels.php / m_/hotels.php 공용)
 * — 참고 커밋 cd2fcbf8 www/css/all_new.css 의 검색바/mapcard/floating 스타일 이식
 * — 상품 카드(.hotel-card / .hc-*) 는 기존 프로젝트 스타일 유지
 */

.hotel-list-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px 20px;
    /* 지도카드(div) 와 상품카드(a) 사이 폰트 불일치 방지 — 컨테이너 전역 지정 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

/* 상품 총 건수 (검색바 아래, 단독 라인) */
.hotel-list-wrap .list-total-count {
    margin: 16px 0 8px;
    color: #1C1C1E;
    font-size: 16px;
    font-weight: 700;
}
.hotel-list-wrap .list-total-count .cnt { color: inherit; }

/* 세부 지역 탭 */
.hotel-list-wrap .sub-loc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.hotel-list-wrap .sub-loc-tab {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #E5E5EA;
    border-radius: 999px;
    background: #fff;
    color: #48484A;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hotel-list-wrap .sub-loc-tab:hover { background: #F5F7FA; }
.hotel-list-wrap .sub-loc-tab.on {
    background: #157CED;
    border-color: #157CED;
    color: #fff;
}

/* 세부 지역 탭 + 정렬바 (검색바 하단, 한 줄 배치) */
.hotel-list-wrap .list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 8px;
}
.hotel-list-wrap .list-toolbar .sortbar {
    display: flex;
    gap: 14px;
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}
.hotel-list-wrap .list-toolbar .sortbar a { cursor: pointer; }
.hotel-list-wrap .list-toolbar .sortbar a.on { color: #157CED; font-weight: 700; }

/* 모바일용 select (PC 에서는 숨김) */
.hotel-list-wrap .sub-loc-select,
.hotel-list-wrap .sort-select {
    display: none;
    height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid #E5E5EA;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348484A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center / 14px 14px;
    color: #1C1C1E;
    font-size: 13px;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* =========================================================
   검색바 (스크롤 시 상단 sticky)  — 참고 커밋 cd2fcbf8 이식
========================================================= */
.search-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    padding: 14px 0;
    transition: box-shadow 0.2s ease, padding 0.2s ease;
}
.search-bar.is-stuck { /* PC 에선 그림자 없음 */ }

.search-bar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid #e3ecfb;
    border-radius: 16px;
    padding: 10px 10px 10px 22px;
}
.search-bar__row.searchbox { cursor: pointer; }

.search-bar__fields {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.search-bar .field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.search-bar .field__label {
    font-size: 12px;
    color: #767676;
    display: flex;
    align-items: center;
    gap: 5px;
}
.search-bar .field__value { font-size: 15px; font-weight: 600; }
.search-bar .field-divider {
    width: 1px;
    height: 30px;
    background: #E5E5EA;
}
.search-bar .btn-change {
    background: #157CED;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.search-bar .btn-change:hover { background: #0F4FD1; }

/* =========================================================
   카드 그리드
========================================================= */
.hotel-list-wrap .hotel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 22px;
}

/* 지도에서 숙소보기 카드 (그리드 첫 카드) — 참고 커밋 cd2fcbf8 준용 */
.hotel-card.mapcard {
    cursor: pointer;
    border: 1px solid #E5E5EA !important;
    background: #fff;
    height: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hotel-card.mapcard .mapcard-top {
    aspect-ratio: 4 / 3;
    background: #f5f7fa;
    overflow: hidden;
}
.hotel-card.mapcard .mapcard-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hotel-card.mapcard .mapcard-body {
    /* 상품카드 hc-body 와 동일한 여백 */
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.hotel-card.mapcard .mapcard-t {
    font-size: 16px;
    font-weight: 800;
    color: #1C1C1E;
    line-height: 1.35;
    margin-bottom: 7px;
}
.hotel-card.mapcard .mapcard-d {
    font-size: 13px;
    color: #48484A;
    line-height: 1.4;
    margin-bottom: 10px;
    flex: 1;
}
.hotel-card.mapcard .mapcard-go {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: #157CED;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 6px;
    margin-top: auto;
}

/* 상품 카드 래퍼 — 좋아요 하트 절대배치 기준 + flex 로 자식 카드가 그리드 셀 크기와 정합.
   min-width:0 은 필수: grid item 기본값(min-width:auto)이 자식 콘텐츠 크기를 최소값으로 삼아
   컬럼이 카드 콘텐츠 크기만큼 늘어나는 것 방지. */
.hotel-list-wrap .hotel-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hotel-list-wrap .hotel-card-wrap > .hotel-card {
    flex: 1;
    min-width: 0;
}
/* 좋아요 하트 — items.php 의 background 규칙 이식 (아이콘 이미지가 이 카드 컨텍스트에는 스코프 안 걸리므로 명시) */
.hotel-list-wrap .hotel-card-wrap > .heart {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 29px;
    height: 30px;
    cursor: pointer;
    background: url("/images/main/ico_heart_off.svg") no-repeat center;
}
.hotel-list-wrap .hotel-card-wrap > .heart:hover,
.hotel-list-wrap .hotel-card-wrap > .heart.on {
    background: url("/images/main/ico_heart_on.svg") no-repeat center;
}

/* 상품 카드 (기존 스타일 유지) */
.hotel-list-wrap .hotel-card {
    border: 1px solid #eef0f3;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}
.hotel-list-wrap .hotel-card:not(.mapcard):hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.hotel-list-wrap .hc-thumb-wrap { position: relative; }

.hotel-list-wrap .best-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ff8a00, #ff3d57);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(255, 61, 87, 0.35);
    letter-spacing: -0.2px;
}

.hotel-list-wrap .hc-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #dbe8ff;
}
.hotel-list-wrap .hc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
/* 상품명 — 지도카드 mapcard-t 와 동일 */
.hotel-list-wrap .hc-name { font-size: 16px; font-weight: 800; color: #1C1C1E; line-height: 1.35; margin-bottom: 7px; }
.hotel-list-wrap .hc-en   { font-size: 11.5px; color: #8a93a0; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotel-list-wrap .hc-rate { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 8px; }
.hotel-list-wrap .hc-rate .rstar { color: #ff8a00; font-weight: 800; }
.hotel-list-wrap .hc-rate .rdot  { width: 5px; height: 5px; border-radius: 50%; background: #2f6bff; display: inline-block; }
.hotel-list-wrap .hc-rate .rcnt  { color: #5a6270; font-weight: 700; }
.hotel-list-wrap .hc-rate .norv  { color: #b6bcc6; }
/* 가격 — 제목(16px)보다 살짝 크게, 우측정렬 + 상단 여백 */
.hotel-list-wrap .hc-price {
    margin-top: auto;
    padding-top: 8px;
    text-align: right;
    font-size: 18px;
    font-weight: 700;
    color: #1f2430;
    letter-spacing: -0.3px;
}

.hotel-list-wrap .hotel-list-sentinel {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 0;
    color: #8a93a0;
    font-size: 13px;
}

.hotel-list-wrap .hotel-list-empty {
    padding: 60px 0;
    text-align: center;
    color: #8a93a0;
    font-size: 15px;
}

/* =========================================================
   플로팅 지도 버튼 (mapcard 스크롤아웃 시 노출)
   — sticky 방식: .hotel-list-wrap 안에서 하단에 붙어다녀 푸터 침범 없음
========================================================= */
.floating-map-banner {
    position: sticky;
    bottom: 24px;
    z-index: 4;
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.floating-map-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.floating-map-banner .btn-map-view {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: #ffffff;
    border: 1px solid #1c1c1e;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 40px 0 20px;
}
.floating-map-banner .btn-map-view:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.floating-map-banner .btn-map-view .icon-map {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =========================================================
   반응형
========================================================= */
@media (max-width: 1024px) {
    .hotel-list-wrap .hotel-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .search-bar { padding: 8px 0; }
    .search-bar__row {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 10px;
        border-radius: 12px;
    }
    .search-bar__fields {
        justify-content: space-between;
        gap: 8px;
    }
    .search-bar .field__label { font-size: 11px; }
    .search-bar .field__value { font-size: 13.5px; }
    .search-bar .btn-change { align-self: stretch; }
    .search-bar .field-divider { display: none; }

    /* X개 상품 — list-toolbar 와 동일한 좌우 여백(hotel-list-wrap 자체 20px), 폰트 축소 */
    .hotel-list-wrap .list-total-count {
        margin: 12px 0 6px;
        font-size: 14px;
    }
    .hotel-list-wrap .list-total-count .cnt { font-size: 14px; }

    /* 세부지역 pill 탭 / 정렬 링크 숨기고 select 로 전환 */
    .hotel-list-wrap .sub-loc-tabs { display: none; }
    .hotel-list-wrap .list-toolbar .sortbar { display: none; }
    .hotel-list-wrap .sub-loc-select,
    .hotel-list-wrap .sort-select { display: inline-block; }

    .hotel-list-wrap .list-toolbar {
        gap: 8px;
        flex-wrap: nowrap;
    }
    .hotel-list-wrap .sub-loc-select { flex: 1 1 auto; min-width: 0; }
    .hotel-list-wrap .sort-select { flex: 0 0 auto; }

    .floating-map-banner { bottom: 16px; }
    .floating-map-banner .btn-map-view { padding: 12px 20px; font-size: 14px; }
    .floating-map-banner .btn-map-view .icon-map { width: 18px; height: 18px; }
}
/* 배너형 기본 (720px 초과에서 숨김) — 미디어쿼리보다 반드시 위에 있어야 함 */
.hotel-map-banner-app {
    display: none;
    cursor: pointer;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.hotel-map-banner-app__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .hotel-list-wrap .hotel-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .hotel-list-wrap .page-head h1 { font-size: 20px; }

    /* 배너형 노출 · 카드형 숨김 */
    .hotel-card.mapcard { display: none; }
    .hotel-map-banner-app {
        display: block;
        grid-column: 1 / -1;
    }
}
@media (max-width: 480px) {
    .hotel-list-wrap .hotel-grid { grid-template-columns: 1fr; }
}