/* 샵 화면 CSS — hotel 영역
 * 화면: hotel.index, hotel.list, hotel.show
 * :where(.pg-화면이름) 이 붙은 규칙은 그 화면에만 적용된다(우선순위는 그대로). 규칙: public/css/shop/README.md */


/* ───────── hotel/index ───────── */
/* resources/views/shop/hotel/index.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.hotel-hero { padding: 30px 16px 16px; text-align: center; }
.hotel-hero h2 { margin: 0 0 6px; font-size: 24px; }
.hotel-hero p { margin: 0; color: #666; font-size: 14px; }
.branch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 16px; }
.branch-card { display: block; padding: 18px 12px; border: 1px solid #eee; border-radius: 8px; text-align: center; background: #fff; color: #222; text-decoration: none; transition: .15s; }
.branch-card:hover { border-color: #2280ff; box-shadow: 0 2px 8px rgba(34,128,255,.15); color: #2280ff; }
.branch-card .country { display: block; font-size: 12px; color: var(--gm-text-sub,#555); margin-bottom: 4px; }
.branch-card .title { display: block; font-size: 16px; font-weight: 600; }
.branch-card .count { display: block; font-size: 12px; color: var(--gm-text-sub,#555); margin-top: 6px; }
.featured-section { padding: 24px 16px; background: #fafafa; }
.featured-section h3 { font-size: 18px; margin: 0 0 12px; }
.hotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hotel-card { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); color: #222; text-decoration: none; transition: .15s; }
.hotel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.10); color: #222; }
.hotel-card .img { width: 100%; aspect-ratio: 4/3; background: #eee center/cover no-repeat; }
.hotel-card .body { padding: 10px 12px; }
.hotel-card .name { font-size: 14px; font-weight: 600; line-height: 1.3; height: 2.6em; overflow: hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.hotel-card .meta { font-size: 12px; color: #666; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; }
.hotel-card .stars { color: #f5a623; }
.hotel-card .score { background: #2280ff; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.hotel-card .branch-tag { display: inline-block; font-size: 11px; color: var(--gm-text-sub,#555); margin-top: 4px; }
:where(.pg-hotel-index) .empty { padding: 40px 16px; text-align: center; color: var(--gm-text-sub,#555); }
:where(.pg-hotel-index) .empty .small { font-size: 13px; margin-top: 6px; }
/* 메인 검색박스 */
.hotel-search { background: #fff; border: 1px solid #e7e7e7; border-radius: 12px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin: 16px 16px 24px; }
.hotel-search h3 { font-size: 16px; margin: 0 0 12px; color: #222; }
.hotel-search .fields { display: grid; grid-template-columns: 2fr 1fr 1fr 0.6fr 0.6fr auto; gap: 10px; align-items: end; }
.hotel-search label { display: block; font-size: 12px; color: #555; margin-bottom: 4px; font-weight: 600; }
.hotel-search select,
.hotel-search input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; }
.hotel-search select:focus,
.hotel-search input:focus { border-color: #2280ff; outline: none; }
.hotel-search button { padding: 11px 24px; background: #2280ff; color: #fff; border: 0; border-radius: 6px; font-weight: 700; font-size: 15px; cursor: pointer; min-height: 42px; }
.hotel-search button:hover { background: #1568d8; }
.hotel-search .keyword-search { margin-top: 10px; display: flex; gap: 8px; }
.hotel-search .keyword-search input { flex: 1; }
.hotel-search .keyword-search button { padding: 10px 18px; background: #555; }
@media (max-width: 800px) {
    .hotel-search .fields { grid-template-columns: 1fr 1fr; }
    .hotel-search .fields > .field-go { grid-column: 1 / -1; }
    .hotel-search button { width: 100%; }
}

@media (max-width: 600px) {
    .branch-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; padding: 12px; }
    .branch-card { padding: 10px 6px; border-radius: 6px; }
    .branch-card .country { font-size: 11px; margin-bottom: 2px; }
    .branch-card .title { font-size: 13px; }
    .branch-card .count { font-size: 11px; margin-top: 3px; }
}


/* ───────── hotel/list ───────── */
/* resources/views/shop/hotel/list.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.search-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: #f5f7fb; border-radius: 8px; margin: 12px 16px; }
.search-bar label { font-size: 12px; color: #555; display: block; margin-bottom: 3px; }
.search-bar .field { flex: 1; min-width: 130px; }
.search-bar input,
.search-bar select { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.search-bar button { padding: 8px 18px; background: #2280ff; color: #fff; border: 0; border-radius: 6px; font-weight: 600; cursor: pointer; align-self: flex-end; min-height: 38px; }
.hotel-list { padding: 8px 16px; }
.hotel-row { display: flex; gap: 14px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 12px; margin-bottom: 12px; transition: .15s; }
.hotel-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.hotel-row .img { width: 180px; flex-shrink: 0; aspect-ratio: 4/3; background: #eee center/cover no-repeat; border-radius: 6px; }
.hotel-row .info { flex: 1; display: flex; flex-direction: column; }
.hotel-row .name { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: #222; }
.hotel-row .name a { color: inherit; text-decoration: none; }
.hotel-row .stars { color: #f5a623; font-size: 13px; }
.hotel-row .reviews { font-size: 12px; color: #666; margin-top: 4px; }
.hotel-row .reviews .score { background: #2280ff; color: #fff; padding: 2px 6px; border-radius: 4px; font-weight: 600; margin-right: 6px; }
.hotel-row .perks { margin-top: 8px; font-size: 12px; color: #1a8a3a; }
.hotel-row .perks span { margin-right: 8px; }
.hotel-row .price-col { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding-left: 10px; border-left: 1px dashed #eee; }
.hotel-row .crossed { color: var(--gm-text-sub,#555); font-size: 13px; text-decoration: line-through; }
.hotel-row .discount { background: #e74c3c; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 4px; }
.hotel-row .price { font-size: 20px; font-weight: 700; color: #222; }
.hotel-row .price .unit { font-size: 12px; color: var(--gm-text-sub,#555); font-weight: normal; }
.hotel-row .price-na { color: var(--gm-text-sub,#555); font-size: 13px; text-align: center; }
.hotel-row .btn-book { display: inline-block; background: #ff5a3c; color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; margin-top: 8px; }
.hotel-row .btn-book:hover { background: #e84a2c; color: #fff; }
.hotel-row .btn-disabled { display: inline-block; padding: 10px 18px; color: var(--gm-text-sub,#555); font-size: 13px; }
:where(.pg-hotel-list) .agoda-note { padding: 14px 16px; font-size: 12px; color: var(--gm-text-sub,#555); text-align: center; }
@media (max-width: 600px) {
    .search-bar { padding: 10px 8px; margin: 8px; }
    .hotel-list { padding: 8px; }
    .hotel-row { flex-direction: column; }
    .hotel-row .img { width: 100%; aspect-ratio: 16/9; }
    .hotel-row .price-col { width: 100%; border-left: 0; border-top: 1px dashed #eee; padding: 10px 0 0; align-items: stretch; flex-direction: row; justify-content: space-between; }
    .hotel-row .btn-book { margin-top: 0; }
}


/* ───────── hotel/show ───────── */
/* resources/views/shop/hotel/show.blade.php (본문) 에서 분리 — 이 화면 전용 스타일 */
.breadcrumb { font-size: 12px; color: var(--gm-text-sub,#555); margin-bottom: 12px; }
.breadcrumb a { color: #2280ff; text-decoration: none; }
/* 상단: 이미지 + 정보 */
.hd-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; margin-bottom: 24px; }
.hd-hero { position: relative; aspect-ratio: 4/3; background: #eee center/cover no-repeat; border-radius: 12px; overflow: hidden; }
.hd-hero .star-badge { position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.6); color: #f5a623; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
/* 우측 가격 박스 */
.price-box { background: #fff; border: 1px solid #e7e7e7; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.05); display: flex; flex-direction: column; }
.price-box .room-tag { display: inline-block; background: #fff3cd; color: #b8830f; padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; margin-bottom: 12px; align-self: flex-start; }
.price-box .crossed { color: var(--gm-text-sub,#555); font-size: 14px; text-decoration: line-through; }
.price-box .discount { background: #e74c3c; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 3px; margin-left: 6px; }
.price-box .price-now { font-size: 32px; font-weight: 800; color: #222; margin: 6px 0; line-height: 1; }
.price-box .price-now .unit { font-size: 14px; color: var(--gm-text-sub,#555); font-weight: normal; }
.price-box .stay-info { font-size: 13px; color: #666; margin: 6px 0 12px; }
.price-box .perks { font-size: 13px; color: #1a8a3a; margin: 8px 0; }
.price-box .perks span { display: inline-block; margin-right: 12px; }
.price-box .btn-book { display: block; text-align: center; background: #ff5a3c; color: #fff; padding: 14px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 16px; margin-top: auto; }
.price-box .btn-book:hover { background: #e84a2c; color: #fff; }
.price-box .btn-book-sub { font-size: 12px; opacity: .9; font-weight: normal; display: block; margin-top: 2px; }
/* 검색 폼 */
.search-form { background: #f5f7fb; border-radius: 10px; padding: 14px; margin-bottom: 24px; }
.search-form .row { display: grid; grid-template-columns: 1fr 1fr 0.7fr 0.7fr auto; gap: 10px; align-items: end; }
.search-form label { display: block; font-size: 12px; color: #555; font-weight: 600; margin-bottom: 4px; }
.search-form input { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
.search-form button { padding: 9px 22px; background: #2280ff; color: #fff; border: 0; border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer; }
/* 호텔 메타 정보 (제목/별점/리뷰/주소) */
.hd-info { display: block; }
.hd-info h1 { font-size: 26px; margin: 0 0 8px; line-height: 1.3; }
.hd-info .stars { color: #f5a623; font-size: 18px; }
.hd-info .reviews { font-size: 14px; color: #666; margin-top: 6px; }
.hd-info .reviews .score { background: #2280ff; color: #fff; padding: 4px 10px; border-radius: 4px; font-weight: 700; font-size: 14px; margin-right: 6px; }
.hd-info .reviews .grade { font-weight: 600; margin-right: 6px; }
.hd-info .addr { margin-top: 10px; color: #666; font-size: 14px; }
/* 섹션 공통 */
.hd-section { margin: 30px 0; padding-top: 24px; border-top: 1px solid #eee; }
.hd-section h3 { font-size: 18px; margin: 0 0 14px; color: #222; }
/* 위치(지도) */
.map-box { width: 100%; aspect-ratio: 16/9; max-height: 360px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.map-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-fallback { padding: 40px; text-align: center; color: var(--gm-text-sub,#555); background: #f5f5f5; border-radius: 10px; }
/* 객실 옵션 (인원별 가격) */
.room-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.room-card { border: 1px solid #e7e7e7; border-radius: 10px; padding: 16px; background: #fff; transition: .15s; position: relative; }
.room-card.is-current { border-color: #2280ff; background: #f0f7ff; }
.room-card.is-cached { background: #fafafa; }
.room-card.is-cached .price { color: var(--gm-text-sub,#555); }
.room-card .cached-note { font-size: 11px; color: #c0392b; margin-top: 2px; }
.room-card .price-na { font-size: 13px; color: var(--gm-text-sub,#555); padding: 8px 0; }
.room-card .occ { font-size: 13px; color: #666; margin-bottom: 6px; font-weight: 600; }
.room-card .room-name { font-size: 14px; font-weight: 700; color: #b8830f; background: #fff3cd; display: inline-block; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.room-card .crossed { font-size: 12px; color: var(--gm-text-sub,#555); text-decoration: line-through; display: block; }
.room-card .price { font-size: 22px; font-weight: 800; color: #222; margin: 4px 0; line-height: 1.1; }
.room-card .price .unit { font-size: 12px; color: var(--gm-text-sub,#555); font-weight: normal; }
.room-card .btn-pick { display: block; text-align: center; margin-top: 10px; padding: 10px; background: #ff5a3c; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 13px; }
.room-card .btn-pick:hover { background: #e84a2c; color: #fff; }
.room-card .current-badge { position: absolute; top: -8px; right: 10px; background: #2280ff; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.room-note { font-size: 13px; color: var(--gm-text-sub,#555); margin-top: 12px; }
/* 시설 정보 */
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.amenity { background: #f7f9fc; padding: 12px 14px; border-radius: 8px; font-size: 14px; color: #333; }
.amenity .yes { color: #1a8a3a; font-weight: 600; }
.amenity .no { color: #c0392b; font-weight: 600; }
/* 비슷한 호텔 */
.similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.similar-card { display: block; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.06); color: #222; text-decoration: none; transition: .15s; }
.similar-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.10); color: #222; }
.similar-card .img { width: 100%; aspect-ratio: 4/3; background: #eee center/cover no-repeat; }
.similar-card .body { padding: 8px 10px; }
.similar-card .name { font-size: 13px; font-weight: 600; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.similar-card .meta { font-size: 11px; color: #666; margin-top: 4px; display: flex; justify-content: space-between; }
.similar-card .stars { color: #f5a623; }
.similar-card .score { background: #2280ff; color: #fff; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
/* 어필리에이트 안내 */
:where(.pg-hotel-show) .agoda-note { padding: 16px; font-size: 12px; color: var(--gm-text-sub,#555); text-align: center; background: #fafafa; border-radius: 8px; margin-top: 24px; }
:where(.pg-hotel-show) .agoda-note a { color: #2280ff; text-decoration: none; }
@media (max-width: 768px) {
    .hd-top { grid-template-columns: 1fr; }
    .hd-hero { aspect-ratio: 16/10; }
    .search-form .row { grid-template-columns: 1fr 1fr; }
    .search-form .row > .field-go { grid-column: 1 / -1; }
    .hd-info h1 { font-size: 22px; }
    .price-box .price-now { font-size: 28px; }
}