/* 풀빌라 상세 사진 영역: 대표 1장 + 4장 모자이크 + '사진 모두 보기' 버튼 1개, 전체 사진은 창(dialog)에서 본다. 외부 URL 없음. */
body[data-page="detail"] .detail-gallery{position:relative}
/* 첫 화면에는 대표 1장 + 4장만. 나머지는 '사진 모두 보기' 창에서 본다. */
body[data-page="detail"] .detail-gallery>a:nth-child(n+6){display:none}
body[data-page="detail"] .detail-gallery .photo-all-open{position:absolute;right:14px;bottom:14px;z-index:2;min-height:44px;padding:10px 16px;border:1px solid #ffffffcc;border-radius:12px;background:#fffffff2;color:#17304f;font:inherit;font-size:.9375rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;box-shadow:0 4px 14px #0f274729;cursor:pointer}
body[data-page="detail"] .detail-gallery .photo-all-open:hover{background:#fff}
body[data-page="detail"] .detail-gallery .photo-all-open:focus-visible,body[data-page="detail"] .photo-all-close:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}
.photo-all{width:min(960px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 auto;padding:0;border:0;background:#f5f8fd;color:#131b2a}
.photo-all::backdrop{background:#0b1220cc}
.photo-all-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:10px 14px;background:#f5f8fdf2;border-bottom:1px solid #e1e8f2}
.photo-all-close{min-height:44px;padding:10px 18px;border:1px solid #17304f;border-radius:12px;background:#17304f;color:#fff;font:inherit;font-size:1rem;font-weight:800;cursor:pointer}
.photo-all-list{display:grid;gap:10px;padding:14px}
.photo-all-list img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;background:#dff2ff}
/* 사진 장수 안내 문구(운영 Worker 가 갤러리 위에 끼워 넣는 '숙소 사진 N장 · …')는 보이지 않게 한다. */
body[data-page="detail"] .photo-summary{display:none}
/* 빌라 코드 배지: 사진 바로 아래(사진과 겹치지 않음). 글자·크기·색은 그대로(흰 글자 on 진한 남색, 대비 약 14:1). */
body[data-page="detail"] .villa-code-row{margin-top:14px;margin-bottom:0}
body[data-page="detail"] .villa-code-row .villa-code-badge{position:static;display:inline-block;margin:0;padding:8px 18px;border-radius:14px;background:#0b2a5b;color:#fff;font-size:clamp(1.375rem,2.4vw,2rem);font-weight:900;line-height:1.25;letter-spacing:-.02em;box-shadow:0 6px 18px #0f274759;white-space:nowrap}
/* 배지가 있으면 제목 카드의 같은 코드 문구는 중복이라 숨긴다(배지가 없을 때는 그대로 보임). */
body[data-page="detail"]:has([data-villa-code-badge]) .detail-head .eyebrow{display:none}
/* 참고 시안(휴대폰): '사진 모두 보기' 버튼은 흰 알약 + 사진 아이콘 + 화살표, 대표 사진 위에 '다낭특파원 추천' 라벨(진한 파랑 on 흰 글자, 대비 약 6:1). 아이콘은 인라인 SVG(외부 URL 없음). */
body[data-page="detail"] .detail-gallery .photo-all-open{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
body[data-page="detail"] .detail-gallery .photo-all-open svg{flex:none;display:block}
body[data-page="detail"] .detail-gallery .villa-reco-badge{position:absolute;top:14px;left:14px;z-index:3;margin:0;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#0a5bc4f2;color:#fff;font-size:.9375rem;font-weight:800;line-height:1.3;letter-spacing:-.02em;box-shadow:0 4px 14px #0f274740;pointer-events:none;white-space:nowrap}
@media (max-width:700px){
 body[data-page="detail"] .villa-code-row{margin-top:10px}
 body[data-page="detail"] .villa-code-row .villa-code-badge{padding:6px 14px;font-size:1.25rem}
 body[data-page="detail"] .detail-gallery .photo-all-open{right:10px;bottom:10px;padding:9px 12px;font-size:.875rem}
 .photo-all-list{padding:10px;gap:8px}
 body[data-page="detail"] .detail-gallery .villa-reco-badge{top:10px;left:10px;padding:5px 10px;font-size:.8125rem}
 body[data-page="detail"] .detail-gallery .photo-all-open{gap:6px}
}
/* gallery_title (Su: "Phần ảnh và tiêu đề dựa vào ảnh để làm / kéo khung bộ ảnh cho to xíu"):
   1) 사진 틀을 조금 키움(가로세로비 3.1→2.7 · 모바일 2.06→1.75 = 높이 약 15~18% 증가, 사진은 object-fit:cover 그대로).
   2) 제목 카드: 시안처럼 가운데 정렬 2줄(첫 줄 = 등록 제목 앞부분, 둘째 줄 = 'N룸' 파랑 + 나머지), 가는 구분선, 아래 한 줄 사양. 글자·값은 등록 데이터 그대로. */
body[data-page="detail"] .detail-gallery{aspect-ratio:2.7/1}
body[data-page="detail"] section.wrap.detail-head{text-align:center;background:radial-gradient(ellipse 26% 70% at 4% 42%,#bcdcf8cc,#bcdcf800),radial-gradient(ellipse 26% 70% at 96% 42%,#bcdcf8cc,#bcdcf800),radial-gradient(ellipse 60% 40% at 50% 100%,#d4e8fbb3,#d4e8fb00),linear-gradient(180deg,#e9f2fd,#dbeafa);border:1px solid #ffffffb3;border-radius:36px;box-shadow:inset 0 1px 0 #ffffffcc,0 14px 36px #5b97d52e,0 2px 6px #5b97d51a}
body[data-page="detail"] .detail-head h1{text-wrap:balance}
body[data-page="detail"] .detail-head h1 .vt-l1,body[data-page="detail"] .detail-head h1 .vt-l2{display:block}
body[data-page="detail"] .detail-head h1 .vt-sep{display:none}
body[data-page="detail"] .detail-head h1 .vt-n{color:#1a64c8}
body[data-page="detail"] .detail-head h1{color:#0f1b33}
body[data-page="detail"] .detail-head>p:last-child{margin-top:16px;padding-top:14px;border-top:2px solid #ffffffe6;color:#364b73;font-weight:600}
@media (max-width:700px){
 body[data-page="detail"] .detail-gallery{aspect-ratio:1.75/1}
}
/* 2026-10-10 desktop_parity: .detail-head h1 의 max-width(1050px)가 데스크톱에서 제목을 왼쪽으로 치우치게 했다 → 칸 가운데로 */
body[data-page="detail"] .detail-head h1{margin-left:auto;margin-right:auto}