/* 풀빌라 상세(/villa/<slug>/) 재디자인 — 참고 시안: 상단 사진 모자이크(큰 1장 + 작은 4장, 둥근 모서리), 아래 흰 제목 카드, 하단 고정 예약 바.
   마크업의 문구·링크·요금·예약 박스는 그대로이고 순서(사진 → 제목)와 모양만 바꾼다. 외부 URL 없음. */
body[data-page="detail"] .breadcrumb{padding-top:16px;padding-bottom:12px;font-size:.9375rem;color:#3b4a60}
body[data-page="detail"] .breadcrumb a{color:#0a5bc4;font-weight:700;text-decoration:none}
body[data-page="detail"] .detail-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;height:auto;aspect-ratio:3.1/1;overflow:visible;border-radius:0;scroll-snap-type:none}
body[data-page="detail"] .detail-gallery a{display:block;position:relative;overflow:hidden;border-radius:24px;background:#dff2ff;height:auto;flex:none;box-shadow:0 1px 2px #0f274708,0 8px 24px #0f274712}
body[data-page="detail"] .detail-gallery a:first-child{grid-row:span 2;grid-column:auto}
body[data-page="detail"] .detail-gallery a:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}
body[data-page="detail"] .detail-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body[data-page="detail"] section.wrap.detail-head{margin-top:22px;margin-bottom:8px;box-sizing:border-box;padding:28px 32px;background:#fff;border:1px solid #e1e8f2;border-radius:28px;box-shadow:0 1px 2px #0f274708,0 8px 24px #0f274712}
body[data-page="detail"] .detail-head h1{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.4;font-weight:800;letter-spacing:-.03em;color:#131b2a;word-break:keep-all}
body[data-page="detail"] .detail-head>p:last-child{margin-top:10px;font-size:1rem;color:#3b4a60}
@media (max-width:700px){
 body[data-page="detail"] .detail-gallery{width:calc(100% - 24px);margin-inline:auto;gap:8px;aspect-ratio:auto;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2.06/1}
 body[data-page="detail"] .detail-gallery a{border-radius:20px}
 body[data-page="detail"] section.wrap.detail-head{width:calc(100% - 24px);margin:16px auto 8px;padding:24px 18px;border-radius:26px;text-align:center}
 body[data-page="detail"] .detail-head .eyebrow{justify-content:center}
 body[data-page="detail"] .detail-head h1{font-size:1.5rem;line-height:1.45}
 body[data-page="detail"] .detail-head>p:last-child{font-size:.9375rem}
 body[data-page="detail"] .mobile-bottom{grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e1e8f2;box-shadow:0 -8px 24px #0f27471f}
 body[data-page="detail"] .mobile-bottom a{min-height:56px;border-radius:18px;font-size:1rem!important;font-weight:800;letter-spacing:-.02em}
 body[data-page="detail"] .mobile-bottom a.mobile-cta-primary{background:#17304f;color:#fff}
 body[data-page="detail"] .mobile-bottom a.mobile-cta-secondary{background:#FEE500;color:#191919}
 body[data-page="detail"] .mobile-bottom a:focus-visible{outline:3px solid #0a5bc4;outline-offset:2px}
}
/* 등록 요금표 — 룸 타입 선택 후 주중/주말 가격 */
.rate-picker{margin:14px 0 4px}
.rate-types{display:flex;flex-wrap:wrap;gap:10px;border:0;margin:0 0 12px;padding:0;min-width:0}
.rate-types legend{padding:0;margin:0 0 8px;font-size:14px;font-weight:700;color:var(--ink)}
.rate-type{position:relative;display:inline-flex}
.rate-type input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.rate-type span{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:16px;font-weight:700}
.rate-type.is-on span{border-color:#17304f;background:#17304f;color:#fff}
.rate-type input:focus-visible+span{outline:3px solid #14829c;outline-offset:3px}
.rate-single{margin:0 0 8px;font-size:16px;font-weight:700}
.rate-panel{border:1px solid var(--line);border-radius:14px;padding:4px 16px;background:#fff}
.rate-panel[hidden]{display:none}
.rate-panel p{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.rate-panel p:last-child{border-bottom:0}
.rate-panel span{font-size:14px;white-space:nowrap}
.rate-panel strong{font-size:22px}
/* 주중·주말 가격을 색으로 구분: 주중=파스텔 블루, 주말=파스텔 오렌지 (글자 대비 AA 이상) */
.rate-panel p.rate-weekday{margin:6px 0;padding:12px 14px;border:0;border-left:5px solid #2f6fd0;border-radius:10px;background:#eaf2ff;color:#0a3f8f}
.rate-panel p.rate-weekend{margin:6px 0;padding:12px 14px;border:0;border-left:5px solid #e8731a;border-radius:10px;background:#fff0e3;color:#8f3e00}
.rate-panel p.rate-weekday span,.rate-panel p.rate-weekday strong{color:#0a3f8f}
.rate-panel p.rate-weekend span,.rate-panel p.rate-weekend strong{color:#8f3e00}
/* 상세 상단 한 줄: 왼쪽 '← 지도로 돌아가기' · 오른쪽 '공유' — 메인 메뉴 바로 아래, 사진 갤러리 위. 홈/DP 경로 줄은 없앴다(구조화 데이터 BreadcrumbList 는 유지). 터치 44px 이상, 남색 #0b2a5b 테두리 알약 */
body[data-page="detail"] .villa-top-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:12px}
body[data-page="detail"] .villa-top-actions .map-back,body[data-page="detail"] .villa-top-actions .villa-share{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;min-width:44px;margin:0;padding:8px 16px;border:2px solid #0b2a5b;border-radius:999px;background:#fff;color:#0b2a5b;font:inherit;font-size:.9375rem;font-weight:800;line-height:1.2;white-space:nowrap;text-decoration:none;box-shadow:0 4px 12px #0f274726}
body[data-page="detail"] .villa-top-actions .map-back:hover{background:#eaf0fb}
body[data-page="detail"] .villa-top-actions .map-back:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}
/* 2026-10-10 reduce_empty_space (Su 지시: "영상 안내문 아래~소개 제목 사이가 너무 비어 있다"):
   영상 안내문 → 구분선 → 소개 제목 사이의 위·아래 여백만 줄인다. 문구·링크·기능·요소 순서는 그대로. */
body[data-page="detail"] .tour-section{margin-bottom:6px}
body[data-page="detail"] .tour-state{padding:8px 0 0}
body[data-page="detail"] .detail-layout{padding-top:10px;padding-bottom:40px}
body[data-page="detail"] .detail-main section.villa-body{padding:14px 0 18px}
body[data-page="detail"] .villa-body .vb-content>*:first-child{margin-top:0}
body[data-page="detail"] .villa-body .vb-content h2:first-child,body[data-page="detail"] .villa-body .vb-content h3:first-child{margin-top:.2em}
body[data-page="detail"] .detail-layout>.booking-box{margin:4px 0 8px}
@media(max-width:700px){
 body[data-page="detail"] .tour-section{margin-bottom:4px}
 body[data-page="detail"] .detail-layout{padding-top:6px;padding-bottom:28px}
}

/* 등록 편의시설 스티커: 네이비 단선 아이콘 + 파스텔 블루 원, 글자 왼쪽. 모바일 2열 */
body[data-page="detail"] .amenities{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
body[data-page="detail"] .amenities li{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 14px 6px 6px;font-size:14px;line-height:1.35;color:#131b2a}
body[data-page="detail"] .amenities .am-badge{flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#dbe9ff;color:#17304f;display:inline-flex;align-items:center;justify-content:center}
body[data-page="detail"] .amenities .am-ico{width:20px;height:20px}
body[data-page="detail"] .amenities .am-text{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){body[data-page="detail"] .amenities{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body[data-page="detail"] .amenities li{padding-right:10px}}
/* 2026-10-10 detail_bullets (Su 지시: "구 웹은 각 항목 앞에 점이 있어 구분이 쉽다"):
   구 웹(src/components/rental/PoolvillaBookingDetail.tsx SectionTitle)은 섹션 제목마다 앞에 지름 8px 파란 원(bg-blue-500=#3b82f6)을 둔다.
   새 상세의 섹션 제목(영상·요금표·위치·편의시설·예약 안내·후기) 앞에 같은 점을 ::before 로 붙인다. 문구·순서·마크업·링크는 그대로, 제목 글자색은 기존 유지. */
body[data-page="detail"] .tour-heading h2,
body[data-page="detail"] .detail-rates h2,
body[data-page="detail"] .detail-map h2,
body[data-page="detail"] .detail-info h2,
body[data-page="detail"] .reviews-section .section-top h2{position:relative;padding-left:18px}
body[data-page="detail"] .tour-heading h2::before,
body[data-page="detail"] .detail-rates h2::before,
body[data-page="detail"] .detail-map h2::before,
body[data-page="detail"] .detail-info h2::before,
body[data-page="detail"] .reviews-section .section-top h2::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:#3b82f6}

/* 2026-10-10 transport_info + transport_style (Su: 목록이 눈이 아프다 → 부드러운 알약 카드): 장소 이름(작게) 위, 시간(굵게 네이비) 아래. 점·줄 없음, 옅은 하늘색 면, 2열(390px). 소개글 값 우선, 없으면 좌표 기반 (추정). */
body[data-page="detail"] .transport-list{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-page="detail"] .transport-list li{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:12px 16px;border:0;border-radius:16px;background:#f2f7fc;box-shadow:inset 0 0 0 1.5px #6f8cab;font-size:15px;line-height:1.5;color:var(--ink)}
body[data-page="detail"] .transport-list .tl-name{font-size:13px;font-weight:600;color:#2b4866;overflow-wrap:anywhere}
body[data-page="detail"] .transport-list .tl-time{font-size:15px;font-weight:600;color:#0b2a4a}
body[data-page="detail"] .transport-list .tl-time small{font-size:12px;font-weight:500;color:#2b4866}
body[data-page="detail"] .transport-note{font-size:12px;margin:0 0 6px;line-height:1.6}
@media(min-width:701px){body[data-page="detail"] .transport-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 등록 요금표 가격 카드 — 시안(hình 2): 주중·주말 2칸 카드, 원형 달력 아이콘 + 라벨 + 큰 가격. 숫자·문구는 그대로, 배치/모양만 변경. 남색 계열 통일 */
.rate-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;border-radius:18px;background:#fff;border:1px solid #d6e0ee;box-shadow:0 6px 18px #17304f10}
.rate-panel[hidden]{display:none}
.rate-panel p.rate-weekday,.rate-panel p.rate-weekend{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico lab" "prc prc";align-items:center;column-gap:10px;row-gap:12px;margin:0;padding:14px 12px 16px;border:0;border-radius:16px;min-width:0}
.rate-panel p.rate-weekday{background:#eaf2ff;color:#0a3f8f}
.rate-panel p.rate-weekend{background:#fff0e3;color:#8f3e00}
.rate-panel .rate-ico{grid-area:ico;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-style:normal}
.rate-panel .rate-weekday .rate-ico{background:#d3e3fb;color:#0a3f8f}
.rate-panel .rate-weekend .rate-ico{background:#fddcc0;color:#b34700}
.rate-panel p.rate-weekday span,.rate-panel p.rate-weekend span{grid-area:lab;font-size:15px;font-weight:800;line-height:1.35;white-space:normal;min-width:0}
.rate-panel p.rate-weekday strong,.rate-panel p.rate-weekend strong{grid-area:prc;font-size:clamp(20px,5.6vw,28px);font-weight:900;line-height:1.15;letter-spacing:-.5px;white-space:nowrap;min-width:0}
@media(max-width:360px){.rate-panel{gap:8px;padding:8px}.rate-panel p.rate-weekday,.rate-panel p.rate-weekend{padding:12px 9px 14px;grid-template-columns:34px minmax(0,1fr);column-gap:7px}.rate-panel .rate-ico{width:34px;height:34px}.rate-panel p.rate-weekday strong,.rate-panel p.rate-weekend strong{font-size:19px}}
/* 2026-10-10 price_size (Su 지시: "주중·주말 가격 칸을 같은 크기로"): price_design 2칸 카드 위에, 두 칸을 항상 같은 너비·같은 높이·같은 글자 크기·같은 안쪽 여백으로 고정한다.
   문구·가격값·룸 선택·색·아이콘은 그대로, 크기만 맞춘다. 390px 에서도 한 줄 2칸·가로 넘침 없음. */
body[data-page="detail"] .rate-panel:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
body[data-page="detail"] .rate-panel p.rate-weekday,
body[data-page="detail"] .rate-panel p.rate-weekend{box-sizing:border-box;min-height:112px;align-content:space-between}

/* 2026-10-10 price_offer (Su: "Thiết kế thêm phần ưu đãi đặc biệt khi đặt từ 5 đêm"): 가격 2칸 카드 바로 아래 탭해서 펼치는 '특별 혜택' 줄. 사이트에 박수별 할인 데이터가 없어 비율·금액 없이 중립 문구만(구체 혜택은 상담 안내). */
.rate-offer{margin:12px 0 0;border-radius:16px;background:#eef3fb;border:1px solid #d6e0ee;color:#0b1f4a}
.rate-offer summary{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;cursor:pointer;list-style:none;border-radius:16px}
.rate-offer summary::-webkit-details-marker{display:none}
.rate-offer summary:focus-visible{outline:3px solid #0a4aa0;outline-offset:2px}
.rate-offer .offer-ico{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0a4aa0;color:#fff;font-style:normal;font-size:20px;font-weight:800;line-height:1}
.rate-offer .offer-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rate-offer .offer-txt b{font-size:16px;font-weight:800;color:#0b1f4a;line-height:1.3}
.rate-offer .offer-txt small{font-size:14px;color:#33466a;line-height:1.4;overflow-wrap:anywhere}
.rate-offer .offer-chev{flex:0 0 20px;color:#33466a;transition:transform .2s}
.rate-offer[open] .offer-chev{transform:rotate(90deg)}
.rate-offer .offer-body{padding:0 16px 16px 70px}
.rate-offer .offer-body p{margin:0 0 8px;font-size:14px;line-height:1.6;color:#1d2f52}
.rate-offer .offer-body a{font-weight:700;color:#0a4aa0;text-decoration:underline}
@media(max-width:480px){.rate-offer .offer-body{padding:0 16px 16px}}

/* 2026-10-10 extra_info_style (Su 선택 2: 시안은 모양만): 특별 혜택 줄 아래 '추가 정보' — 제목 앞 파란 점, 색 아이콘 원 4칸 가로. 글은 빌라 데이터에서만. 390px 에서도 4칸 한 줄·가로 넘침 없음. */
.extra-info{margin:12px 0 0;padding:16px 12px 14px;border-radius:16px;background:#fff;border:1px solid #d6e0ee;color:#0b1f4a}
.extra-info h3{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:0 4px;font-size:18px;font-weight:800;line-height:1.3;color:#0b1f4a}
.extra-info .extra-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#0a4aa0}
.extra-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.extra-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:0 8px;border-left:1px solid #d6e0ee}
.extra-tile:first-child{border-left:0}
.extra-tile .extra-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:50%;font-style:normal}
.extra-tile b{font-size:13px;font-weight:800;line-height:1.35;color:#0b1f4a;overflow-wrap:anywhere}
.extra-tile span{font-size:12.5px;line-height:1.45;color:#33466a;overflow-wrap:anywhere}
.extra-safe .extra-ico{background:#d8f1e3;color:#12703f}
.extra-pay .extra-ico{background:#fbdcdc;color:#b3202a}
.extra-group .extra-ico{background:#e5defa;color:#5a3cc2}
.extra-place .extra-ico{background:#fbebb8;color:#8c5a00}
@media(max-width:480px){.extra-info{padding:14px 8px 12px}.extra-tile{padding:0 5px}.extra-tile .extra-ico{width:40px;height:40px}.extra-tile b{font-size:12.5px}.extra-tile span{font-size:12px}}

/* 2026-10-10 rate_table_rooms (Su: "등록 요금표 → 빌라 몇 룸·몇 명 사용"): 제목을 '빌라 구성 · 이용 인원'으로 바꾸고 hình 2 와 같은 2칸 카드(원형 아이콘 + 굵은 라벨 + 큰 남색 숫자). 두 칸 같은 크기. 값은 등록 데이터 그대로. */
.villa-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin:0 0 14px;padding:12px;border-radius:18px;background:#fff;border:1px solid #d6e0ee;box-shadow:0 6px 18px #17304f10}


/* 2026-10-10 image_match (Su: "Làm như ảnh đã đưa"): 시안 = 한 장의 둥근 카드 — 집 아이콘 + "N룸 프라이빗 풀빌라", "최대 N~M명 숙박 가능", 구분선, 주중/주말 2칸(아이콘 없이 라벨 위·가격 아래 왼쪽 정렬), 특별 혜택 줄.
   .villa-spec(머리글)과 .rate-picker(본문)를 테두리·배경으로 이어 한 카드로 보이게 한다. 값·계산·링크·마크업 순서는 그대로, 모양만. 남색 #0a4aa0/#0b2a4a 로 통일, 글자 대비 AA 이상. */
body[data-page="detail"] .villa-spec{display:block;grid-template-columns:none;margin:0;padding:20px 18px 0;border:1px solid #d6e0ee;border-bottom:0;border-radius:24px 24px 0 0;background:#f1f4f9;box-shadow:none}
body[data-page="detail"] .villa-spec .spec-title{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(20px,5.6vw,26px);font-weight:900;line-height:1.3;letter-spacing:-.03em;color:#0b1f3a;word-break:keep-all;text-align:left}
body[data-page="detail"] .villa-spec .spec-home{flex:0 0 26px;color:#0a4aa0}
body[data-page="detail"] .villa-spec .spec-sub{margin:8px 0 0;padding:0 0 16px;border-bottom:1px solid #d6e0ee;font-size:16px;font-weight:700;line-height:1.5;color:#3b4a60;text-align:left}
body[data-page="detail"] .rate-picker{margin:0 0 4px;padding:16px 18px 18px;border:1px solid #d6e0ee;border-top:0;border-radius:0 0 24px 24px;background:#f1f4f9}
body[data-page="detail"] .rate-picker .rate-types{margin-bottom:14px}
body[data-page="detail"] .rate-picker .rate-panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;min-height:104px;padding:16px 16px 18px;border-radius:18px;text-align:left}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday{background:#e3eaf6}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{background:#f3e9de}
body[data-page="detail"] .rate-picker .rate-panel .rate-ico{display:none}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday span{font-size:17px;font-weight:800;color:#0a4aa0}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend span{font-size:17px;font-weight:800;color:#3b2a1a}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday strong,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend strong{font-size:clamp(20px,6vw,30px);font-weight:900;color:#0b1f3a}
body[data-page="detail"] .rate-picker .rate-offer{background:#e9edf3;border:0}
body[data-page="detail"] .rate-picker .rate-offer .offer-ico{flex:0 0 28px;width:28px;height:28px;background:transparent;color:#0a4aa0;font-size:24px;font-weight:800}
body[data-page="detail"] .rate-picker .rate-offer .offer-txt b{font-size:18px;color:#0b1f3a}
body[data-page="detail"] .rate-picker .rate-offer .offer-txt small{font-size:15px;font-weight:700;color:#3b4a60}
body[data-page="detail"] .rate-picker .rate-offer .offer-chev{color:#3b4a60}
body[data-page="detail"] .rate-picker .rate-offer .offer-body{padding-left:56px}
@media(max-width:480px){body[data-page="detail"] .villa-spec{padding:18px 14px 0}body[data-page="detail"] .rate-picker{padding:14px 14px 16px}body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday,body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{padding:14px 12px 16px;min-height:96px}body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday span,body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend span{font-size:15px}body[data-page="detail"] .rate-picker .rate-offer .offer-body{padding-left:14px}}


/* 2026-10-11 center_fix (Su: "Căn giữa là nó nằm ngay giữa của ô mà"): 머리글 카드(집 아이콘·N룸·최대 인원), 주중/주말 2칸, '추가 정보' 4칸 안 내용을 칸의 가로·세로 정가운데로. 칸 크기·값·링크·구분선은 그대로. */
body[data-page="detail"] .villa-spec .spec-title{justify-content:center;text-align:center}
body[data-page="detail"] .villa-spec .spec-sub{text-align:center}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{align-items:center;justify-content:center;text-align:center}
.extra-tile{align-items:center;justify-content:center;text-align:center}

/* 2026-10-10 layout_design (Su: "Ý là dựa vào bố cục để thiết kế" — 객실 수/이용 인원 큰 칸 제거, 시안 '숙박 요금 안내' 카드 배치): 한 장 둥근 카드 = 제목 · 한 줄 설명 · [룸 칩 + 최대 N명 · 1박 기준] · 주중(파랑)/주말(주황) · 5박 이상 혜택 줄 · 캘린더 바.
   마크업 순서·가격·계산·링크·카카오 버튼은 그대로, 배치/모양만. 이전 image_match 머리글(.villa-spec)은 객실 수·인원이 소개에 있어 제거되어 규칙만 남은 죽은 코드. 가운데 정렬(center_fix)은 유지. */
body[data-page="detail"] .villa-spec-section{box-sizing:border-box;margin:0;padding:20px 18px 0;border:1px solid #d6e0ee;border-bottom:0;border-radius:24px 24px 0 0;background:#f1f4f9}
body[data-page="detail"] .villa-spec-section h2{margin:0 0 6px}
body[data-page="detail"] .villa-spec-section>.muted{margin:0 0 14px;font-size:15px;line-height:1.55;color:#3b4a60}
body[data-page="detail"] .villa-spec-section .rate-picker{margin:0;padding:0;border:0;border-radius:0;background:transparent}
body[data-page="detail"] .rate-picker .rate-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
body[data-page="detail"] .rate-picker .rate-meta .rate-types{display:flex;flex-wrap:wrap;gap:8px;margin:0}
body[data-page="detail"] .rate-picker .rate-meta .rate-types legend{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-page="detail"] .rate-picker .rate-type span{min-width:0;min-height:40px;padding:0 14px;border-radius:999px;font-size:15px;font-weight:800}
body[data-page="detail"] .rate-picker .rate-cap{margin:0;font-size:16px;font-weight:800;line-height:1.4;color:#3b4a60}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{display:grid;grid-template-columns:auto auto;grid-template-areas:"ico lab" "prc prc";justify-content:center;justify-items:center;align-items:center;align-content:center;column-gap:8px;row-gap:10px}
body[data-page="detail"] .rate-picker .rate-panel .rate-ico{display:grid;grid-area:ico;width:26px;height:26px;border-radius:0;background:transparent}
body[data-page="detail"] .rate-picker .rate-panel .rate-ico svg{width:24px;height:24px}
body[data-page="detail"] .rate-picker .rate-panel .rate-weekday .rate-ico{color:#0a4aa0}
body[data-page="detail"] .rate-picker .rate-panel .rate-weekend .rate-ico{color:#b34700}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday span{grid-area:lab;color:#0a4aa0}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend span{grid-area:lab;color:#9a3f00}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{background:#fdeedd}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday strong,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend strong{grid-area:prc}
body[data-page="detail"] .rate-picker .rate-offer{margin:12px 0 0;background:#fff;border:1px solid #e1e7f0}
body[data-page="detail"] .rate-picker .rate-offer .offer-txt b{font-size:17px}
body[data-page="detail"] .detail-extra{min-width:0;width:100%}
body[data-page="detail"] .detail-extra .extra-info{margin:4px 0 8px}
body[data-page="detail"] .detail-layout>.booking-box{box-sizing:border-box;margin:0 0 8px;padding:14px 18px 18px;border:1px solid #d6e0ee;border-top:0;border-radius:0 0 24px 24px;background:#f1f4f9;box-shadow:none}
@media(max-width:480px){body[data-page="detail"] .villa-spec-section{padding:18px 14px 0}body[data-page="detail"] .detail-layout>.booking-box{padding:12px 14px 16px}}

/* 2026-10-10 extra_info_align (Su: "Thông tin bổ sung sticker nên căn 1 đường thẳng chữ nhỏ chỉ để lại ý quan trọng"): 4칸의 아이콘·제목·설명 첫 줄이 한 가로선에 오도록 위에서부터 쌓고(세로 가운데 → 위 정렬), 글자를 줄이고 문구를 짧게. 칸 수·값·구분선·색은 그대로. */
.extra-tile{justify-content:flex-start;align-items:center;gap:2px;padding:2px 4px}
.extra-tile .extra-ico{width:36px;height:36px;margin-bottom:4px;flex:0 0 36px}
.extra-tile .extra-ico svg{width:20px;height:20px}
.extra-tile b{font-size:12px;line-height:1.3;white-space:nowrap}
.extra-tile span{font-size:11px;line-height:1.35;color:#4a5b7c}
@media(max-width:480px){.extra-tile{padding:2px 3px}.extra-tile .extra-ico{width:32px;height:32px;flex-basis:32px}.extra-tile .extra-ico svg{width:18px;height:18px}.extra-tile b{font-size:11.5px}.extra-tile span{font-size:10.5px}}
/* 2026-10-10 room_size (Su: "Cho phần phòng to hơn xíu"): '숙박 요금 안내' 카드 안 룸 칩(3룸/4룸 선택)과 「최대 N명 · 1박 기준」 줄을 약 12% 키움(글자 15→17px, 칩 높이 40→46px, 좌우 여백 14→16px, 간격 8→10px, 최대 인원 16→18px). 가운데 정렬·값·계산·링크·마크업은 그대로, 크기만. */
body[data-page="detail"] .rate-picker .rate-meta{gap:10px 14px;margin:0 0 16px}
body[data-page="detail"] .rate-picker .rate-meta .rate-types{gap:10px}
body[data-page="detail"] .rate-picker .rate-type span{min-height:46px;padding:0 16px;font-size:17px}
body[data-page="detail"] .rate-picker .rate-cap{font-size:18px}

/* 2026-10-10 info_text_size (Su: "Phần chữ thông tin khoanh nhỏ hơn chút"): 「최대 N명 · 1박 기준」 줄만 18→16px(약 11% 축소). 가운데 정렬·값·색·마크업·룸 칩 크기는 그대로. */
body[data-page="detail"] .rate-picker .rate-cap{font-size:16px}
/* 2026-10-10 divider_overlap (Su: "Thanh gạch ngăn cách với cái viền thông tin đang bị chồng lên nhau"): 소개 블로그 아래 구분선(.villa-body 의 border-bottom)이 '숙박 요금 안내' 카드 둥근 윗 테두리에 바로 붙어 두 줄이 겹쳐 보였다. 요금 카드 위에 여백만 둬 선과 테두리를 떼어 놓는다. 구분선·카드 테두리·값·마크업은 그대로, 간격만. */
body[data-page="detail"] .detail-rates{margin-top:24px}
@media(max-width:480px){body[data-page="detail"] .detail-rates{margin-top:20px}}

/* 2026-10-10 label_gap (Su: "주중, 주말 글자를 달력 스티커에 좀 더 가깝게 — 멀리 떨어져 보기 안 좋음"): 가격 줄이 아이콘·글자 칸을 늘려 둘 사이가 20~35px 벌어졌다. 아이콘은 칸 오른쪽, 글자는 칸 왼쪽으로 붙이고 간격을 6px로 줄인다. 묶음 가운데 정렬·글자·값·아이콘 크기는 그대로. */
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{column-gap:6px}
body[data-page="detail"] .rate-picker .rate-panel .rate-ico{justify-self:end}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday span,
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend span{justify-self:start}

/* 2026-10-11 price_card_ref (Su 시안 img_dca3b1311b0b: "Phần giá ở web mục chi tiết villa nhìn ảnh thiết kế tương tự"): '숙박 요금 안내' 카드의 가격 영역을 시안과 같은 순서·모양으로.
   순서 = 최대 N명 · 1박 기준 → [기본 요금 배지 + 주중/1박 + 아주 큰 가격(원은 작게) + 주말/1박 복숭아색 알약 줄] 유리 느낌 파랑 카드 → 룸 타입 알약(선택=남색) → 5박 이상 혜택 → 캘린더 바.
   가격 숫자·룸 선택 동작·계산·링크·카카오 버튼은 그대로, 순서·모양만. 글자 대비 AA 이상. */
body[data-page="detail"] .villa-spec-section,
body[data-page="detail"] .detail-layout>.booking-box{background:#eef4fd;border-color:#d3e0f3}
body[data-page="detail"] .villa-spec-section .rate-picker{display:flex;flex-direction:column}
body[data-page="detail"] .rate-picker .rate-cap{order:1;margin:0 0 12px;font-size:16px;font-weight:700;color:#33466a;text-align:left}
body[data-page="detail"] .rate-picker .rate-cap::first-letter{letter-spacing:0}
body[data-page="detail"] .rate-picker .rate-panels{order:2}
body[data-page="detail"] .rate-picker .rate-meta{order:3;display:block;margin:12px 0 0}
body[data-page="detail"] .rate-picker .rate-offer{order:4}
body[data-page="detail"] .rate-picker .rate-panel:not([hidden]){position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;grid-auto-rows:auto;padding:16px 16px 14px;border:1px solid #c9dcfa;border-radius:24px;background:linear-gradient(160deg,#dbe9ff 0%,#eaf2ff 55%,#f4f8ff 100%);box-shadow:0 10px 26px #2f6fd026,inset 0 1px 0 #ffffffb3}
body[data-page="detail"] .rate-picker .rate-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0;padding:8px 16px 8px 12px;border-radius:999px;background:#0a4aa0;color:#fff;font-style:normal;font-size:15px;font-weight:800;line-height:1.2;box-shadow:0 4px 10px #0a4aa040}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday{display:grid;grid-template-columns:auto auto;grid-template-areas:"ico lab" "prc prc";justify-content:start;justify-items:start;align-items:center;column-gap:10px;row-gap:2px;min-height:0;margin:0;padding:4px 2px 0;border-radius:0;background:transparent;text-align:left}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday span{font-size:clamp(18px,5vw,22px);font-weight:800;color:#0a4aa0}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday .rate-ico{justify-self:start;width:30px;height:30px;color:#0a4aa0}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday .rate-ico svg{width:30px;height:30px}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday strong{display:block;font-size:clamp(36px,13vw,64px);font-weight:900;line-height:1.05;letter-spacing:-.04em;color:#0b1f4a;white-space:nowrap}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday strong small{font-size:.5em;font-weight:800;letter-spacing:0;margin-left:2px}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:10px;min-height:0;margin:0;padding:12px 16px;border-radius:16px;background:#fdeedd;text-align:left}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend .rate-ico{display:grid;justify-self:auto;width:28px;height:28px;color:#b34700}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend span{font-size:clamp(15px,4.4vw,18px);font-weight:800;color:#9a3f00;white-space:nowrap}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend strong{margin-left:6px;font-size:clamp(20px,6.4vw,28px);font-weight:900;letter-spacing:-.02em;color:#8f3e00;white-space:nowrap}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend strong small{font-size:.72em;font-weight:800}
body[data-page="detail"] .rate-picker .rate-meta .rate-types{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:12px 16px;border:1px solid #d6e0ee;border-radius:18px;background:#fff}
body[data-page="detail"] .rate-picker .rate-meta .rate-types::before{content:"객실 타입";margin-right:6px;font-size:15px;font-weight:700;color:#1d2f52}
body[data-page="detail"] .rate-picker .rate-type span{min-height:46px;min-width:64px;padding:0 20px;border:1.5px solid #d6e0ee;border-radius:999px;background:#fff;font-size:17px;font-weight:800;color:#0b1f4a}
body[data-page="detail"] .rate-picker .rate-type.is-on span{border-color:#0b2a4a;background:#0b2a4a;color:#fff}
body[data-page="detail"] .rate-picker .rate-offer{margin:12px 0 0;border-radius:18px;background:#fff;border:1px solid #d6e0ee;box-shadow:0 2px 8px #17304f0d}
body[data-page="detail"] .detail-layout>.booking-box .text-link{display:inline-block;font-weight:700;color:#0a4aa0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:360px){body[data-page="detail"] .rate-picker .rate-panel:not([hidden]){padding:14px 12px 12px}body[data-page="detail"] .rate-picker .rate-panel p.rate-weekend{padding:10px 12px;gap:6px}}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday{grid-template-columns:30px 1fr}
body[data-page="detail"] .rate-picker .rate-panel p.rate-weekday strong small{font-size:.58em}
body[data-page="detail"] .rate-picker .rate-panel:not([hidden]){background:linear-gradient(150deg,#e4efff 0%,#d3e5ff 45%,#f2f7ff 100%);box-shadow:0 12px 30px #2f6fd02e,inset 0 0 0 1px #ffffff99,inset 0 18px 30px #ffffff66}
body[data-page="detail"] .villa-spec-section .vb-toggle,body[data-page="detail"] .detail-layout>.booking-box .vb-toggle{box-shadow:0 8px 18px #0a5bc43d}

/* DN-CTA-DATE-01: 하단 예약 바 — 날짜를 고르면 '2박 · 1,126,000원' 요약 한 줄 + '예약 요청 →' */
@media (max-width:700px){
 body[data-page="detail"] .mobile-bottom[data-mb]{grid-template-columns:1fr 1fr;align-items:stretch;row-gap:6px}
 body[data-page="detail"] .mobile-bottom [data-mb-sum],
 body[data-page="detail"] .mobile-bottom [data-mb-hint]{grid-column:1/-1;margin:0;padding:0 4px;line-height:1.3}
 body[data-page="detail"] .mobile-bottom [data-mb-sum]{color:#17304f;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
 body[data-page="detail"] .mobile-bottom [data-mb-hint]{color:#5a6c75;font-size:.9375rem;font-weight:700}
 body[data-page="detail"] footer{padding-bottom:140px}
}

/* 2026-10-21 live-video.mjs: admin 에 붙인 유튜브 링크 영상(16:9 임베드). */
body[data-page="detail"] .tour-yt{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
body[data-page="detail"] .tour-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}