/* 2026-10-01 홈 리디자인 — 색·반경은 danang-ui-system tokens.json 과 같은 값.
   style.css·mobile.css 뒤에 불러와 덮어쓴다. 아이콘 = Phosphor Regular (MIT). */
/* 브랜드 색 = 다낭특파원 로고에서 가져온 값: 잉크 #131b2a · 하늘 물결 #66bfe8 · 안개 배경 #e5f0ff · 흰 테두리 #fafaf8 */
:root{--bg:#f5f8fd;--navy:#131b2a;--accent:#66bfe8;--accent-text:#1b6f9c;--sunset:#ff7a50;--card-line:#e1e8f2;--tint-blue:#e5f0ff;--text:#131b2a;--soft:#4b5a70;--paper:#fafaf8;
--ink:var(--navy);--muted:var(--soft);--line:var(--card-line);--pale:var(--tint-blue);--blue:var(--accent-text);
--r-card:22px;--r-input:16px;--shadow:0 1px 2px #0f274708,0 8px 24px #0f274712}
body{background:var(--bg);color:var(--text);font-weight:500;line-height:1.65}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;fill:currentColor}
h1,h2,h3{color:var(--navy)}
h2{font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.3;letter-spacing:-.02em;font-weight:800}
.eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-size:.8125rem;font-weight:700;letter-spacing:.08em}

/* 헤더 */
/* 2026-10-23 travel_hero_overlap(Su): 맨 `header` 선택자는 본문 안의 <header class="tv-hero|hub-hero"> 에도 걸려 z-index:20 쌓임 맥락이 생겨, 열린 ≡ 메뉴 패널(상단 header 안, z 60)을 배너가 덮었다 → 클래스 없는 사이트 상단 header 에만 적용. */
header:not([class]){position:sticky;top:0;z-index:20;background:#ffffffeb;backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--card-line)}
.nav{height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.3rem;color:var(--navy);letter-spacing:-.03em;line-height:1.15}
.brand-mark{width:40px;height:40px;border-radius:0;display:block;flex:none;object-fit:contain}
@media(min-width:1024px){.brand-mark{width:54px;height:54px}}
.brand span{display:block}
.brand small{margin-top:3px;font-size:.6875rem;letter-spacing:.18em;color:var(--soft)}
.nav nav{gap:6px;font-size:.9375rem}
.nav nav a{padding:10px 14px;border-radius:999px;color:var(--text)}
.nav nav a:hover{background:var(--tint-blue);color:var(--accent-text)}

/* 버튼 */
.button{background:var(--navy);border-color:var(--navy);border-radius:999px;min-height:52px;gap:10px;padding:14px 26px;transition:background .15s,transform .15s}
.button:hover{background:#2a3850}
.button:active{transform:scale(.98)}
.button.small{min-height:44px;padding:10px 20px}
.button.outline{background:#fff;color:var(--navy);border-color:#cfd7e3}
.button.outline:hover{background:var(--tint-blue)}
.text-link{color:var(--accent-text);border-bottom-color:currentColor}
input,select,textarea{border-radius:var(--r-input)}

/* 히어로 */
.video-hero{background:linear-gradient(180deg,var(--tint-blue) 0,var(--bg) 100%);color:var(--text);padding:28px 0 36px}
.video-hero-layout{gap:22px}
.hero-intro .eyebrow{color:var(--accent-text);font-size:.875rem;letter-spacing:.04em;margin-bottom:12px}
.hero-intro h1{font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.2;letter-spacing:-.03em;font-weight:800;color:var(--navy);max-width:none}
.hero-intro h1 br{display:inline}
.hero-intro>p:last-of-type{display:block;color:var(--soft);font-size:1.0625rem;margin-top:14px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:22px}
.hero-actions .hero-find{margin-top:0}
.hero-kakao{font-size:.9375rem;padding-bottom:2px}
.hero-intro .hero-find,.hero-find{display:inline-flex;margin-top:0;background:var(--navy);color:#fff;border-color:var(--navy);min-height:52px}
.hero-stage{border-radius:var(--r-card);background:#10253d;box-shadow:var(--shadow)}
.hero-stage>img,.hero-stage>video{object-fit:cover}
.film-controls{bottom:12px;right:12px;gap:8px}
.film-controls button{background:#0f2747d9;border:1px solid #ffffff40;border-radius:999px;min-height:44px;padding:8px 16px;font-size:.875rem;font-weight:700;backdrop-filter:blur(6px)}
.hero-caption{margin-top:12px;padding:16px 18px;background:#fff;border:1px solid var(--card-line);border-radius:18px;box-shadow:var(--shadow)}
.hero-caption #hero-code{color:var(--soft);font-size:.8125rem}
.hero-caption a strong{color:var(--navy);font-size:1.0625rem}
.hero-caption a>span{color:var(--accent-text);font-size:.875rem;text-decoration:none;font-weight:700}
.hero-caption .price-pair{flex-direction:row;gap:8px;flex-wrap:wrap}
.hero-caption .price-pair span{background:var(--tint-blue);color:var(--navy);padding:6px 12px;border-radius:999px;font-size:.8125rem;font-weight:700}
.hero-caption .price-pair strong{margin-left:4px;font-size:1rem;color:var(--navy)}
.hero-state{color:var(--soft);padding-top:8px;min-height:0}
@media(min-width:1001px){
 .video-hero{padding:56px 0 64px}
 .video-hero-layout{grid-template-columns:1fr 1.3fr;gap:56px;align-items:center}
 .hero-intro h1{font-size:clamp(2.4rem,3.6vw,3.25rem)}
}
@media(min-width:1280px){.hero-caption{grid-template-columns:1fr auto;align-items:center}}
@media(max-width:1000px){.video-hero-layout{grid-template-columns:1fr;gap:24px}.hero-intro h1{font-size:clamp(1.9rem,6vw,2.6rem)}.hero-caption{grid-template-columns:1fr}}

/* 신뢰 지표 */
.trust-strip{background:#fff;border-bottom:1px solid var(--card-line)}
.trust-strip ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.trust-strip li{display:flex;align-items:center;gap:14px;padding:20px 18px;font-size:.875rem;color:var(--soft)}
.trust-strip li:first-child{padding-left:0}
.trust-strip li+li{border-left:1px solid var(--card-line)}
.trust-strip .ic{width:30px;height:30px;color:var(--accent-text);padding:6px;box-sizing:content-box;background:var(--tint-blue);border-radius:14px}
.trust-strip strong{display:block;color:var(--navy);font-size:1rem;line-height:1.4}

/* 검색 */
.video-hero+.trust-strip+.search-wrap,.search-wrap{margin-top:28px}
.search-form{border:1px solid var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px;gap:14px}
.search-form label{color:var(--navy);font-size:.8125rem;font-weight:700}
.search-form input,.search-form select{border-color:#cfd7e3;height:52px;border-radius:var(--r-input);padding:10px 14px}
.search-form .button{height:52px}
.search-note{color:var(--soft)}

/* 목록 */
.catalog-section{padding:44px 0 56px}
.section-top{margin-bottom:24px}
.chips button{border-radius:999px;border-color:#cfd7e3;color:var(--navy);min-height:44px;padding:9px 18px;font-weight:600}
.chips button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.secondary-filters select{border-radius:12px;min-height:44px;border-color:#cfd7e3}
.results-meta{color:var(--soft)}
.villa-grid{gap:20px}
.villa-card{border-color:var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.villa-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px #0f274710,0 16px 36px #0f274718}
.villa-card{display:flex;flex-direction:column}
.villa-card img{aspect-ratio:4/3;height:auto}
.card-body{flex:1;display:flex;flex-direction:column}
.card-bottom{margin-top:auto}
.photo-tag{background:#ffffffee;color:var(--navy);border-radius:999px;padding:4px 12px;font-weight:700}
.video-badge{background:var(--navy);border-radius:999px;font-weight:700;padding:5px 12px}
.card-body{padding:16px 18px 18px}
.code{color:var(--soft);font-weight:600}
.card-body h3{font-size:1.0625rem;line-height:1.45;font-weight:700;min-height:0;margin:6px 0 12px}
.card-bottom{border-top:1px solid var(--card-line)}
.price-pair strong{color:var(--navy);font-weight:800}
.round-link{background:var(--navy);color:#fff;width:40px;height:40px}
.empty{background:var(--tint-blue);border-radius:var(--r-card)}

/* 부가 서비스 */
.add-on-section{border-top:0;padding:16px 0 56px}
.addon-grid{gap:20px}
.addon-grid article{border-color:var(--card-line);border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow)}
.addon-grid article>div{padding:26px 24px}
.addon-grid h3{font-weight:800}
.addon-grid p{color:var(--soft)}

/* 후기·가이드·지도 */
.reviews-section{border-top:0;padding:8px 0 56px}
.review-card{border-color:var(--card-line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.review-stars{color:#f5a623}
.review-reply{background:var(--tint-blue);border-radius:14px}
.review-reply-badge{color:var(--accent-text)}
.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.map-toolbar .button{min-height:44px;padding:8px 18px}
.guide-links{padding:24px 0 72px}
.guide-grid>a{background:#fff;border:1px solid var(--card-line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow);transition:transform .2s}
.guide-grid>a:hover{transform:translateY(-3px)}
.guide-grid h3{font-size:1.0625rem;line-height:1.5;margin:8px 0 14px}
.guide-grid b{color:var(--accent-text)}

/* 푸터 */
footer{border-top:1px solid var(--card-line);color:var(--soft)}
.booking-box,.selected-property,#reserve-form{border-radius:var(--r-card)}

/* 태블릿 */
@media(max-width:1050px){
 .villa-grid{grid-template-columns:repeat(2,1fr)}
 .trust-strip li{padding:16px 12px;gap:10px}
}

/* 모바일 — 세로 길이를 줄이는 게 핵심. 카드는 사진 왼쪽·정보 오른쪽 한 줄 목록. */
@media(max-width:700px){
 .nav{height:64px}
 .brand{font-size:1.2rem}
 .brand small{font-size:.625rem}
 .video-hero{padding:20px 0 24px}
 .video-hero .wrap{width:calc(100% - 32px)}
 .hero-intro>p:last-of-type{display:block;font-size:.9375rem}
 .hero-actions{display:grid;gap:10px;margin-top:18px}
 .hero-intro .hero-find{display:flex;width:100%}
 .hero-kakao{justify-self:center}
 .brand-mark{width:36px;height:36px;border-radius:0}
 .hero-intro h1{max-width:none}
 .hero-caption{padding:14px 16px}
 .trust-strip ul{grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 24px)}
 .trust-strip li{padding:12px 6px;gap:6px;min-width:0;font-size:.6875rem;word-break:keep-all}
 .trust-strip li:first-child{padding-left:0}
 .trust-strip strong{font-size:.75rem}
 .trust-strip .ic{flex:none;width:14px;height:14px;padding:5px}
 .search-wrap{margin-top:20px}
 .search-form{padding:16px;gap:12px}
 .catalog-section{padding:32px 0 36px}
 .section-top h2{font-size:1.375rem}
 .villa-grid{grid-template-columns:1fr;gap:12px}
 .villa-card{display:grid;grid-template-columns:128px 1fr;border-radius:18px}
 .villa-card .photo-link{height:100%}
 .villa-card img{aspect-ratio:auto;height:100%;min-height:132px;object-fit:cover}
 .photo-tag{display:none}
 .video-badge{top:8px;left:8px;padding:3px 8px;font-size:.6875rem}
 .card-body{padding:12px 14px;display:flex;flex-direction:column;min-width:0}
 .card-body h3{font-size:.9375rem;line-height:1.4;margin:3px 0 8px}
 .code{font-size:.75rem}
 .card-bottom{margin-top:auto;padding-top:8px}
 .card-bottom small{display:none}
 .price-pair{flex-direction:column;gap:0}
 .price-pair span{font-size:.75rem}
 .price-pair strong{font-size:.9375rem;margin-left:6px}
 .round-link{display:none}
 .add-on-section{padding:8px 0 36px}
 .addon-grid article{display:grid;grid-template-columns:.8fr 1.2fr}
 .reviews-section{padding:0 0 36px}
 .guide-links{padding:8px 0 48px}
 footer{display:block;padding-bottom:104px}
 footer>div+div{margin-top:20px}
 .mobile-bottom{background:#fff;border-top:1px solid var(--card-line);box-shadow:0 -6px 20px #0f274712;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
 .mobile-bottom a{border-radius:999px;min-height:48px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700}
 .mobile-bottom a:first-child{background:var(--tint-blue);color:var(--navy)}
 .mobile-bottom a:last-child{background:#fee500;color:#191600}
 html{scroll-padding-top:72px;scroll-padding-bottom:80px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* 모바일 하단 탭바(5칸, #164 이식): 풀빌라 · 지도 · 로고(홈) · 카톡 상담 · 공항 VIP. 글자 15px, 터치 영역 56px. */
.mobile-bottom.tabs{grid-template-columns:repeat(5,1fr);align-items:end;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.mobile-bottom.tabs a{flex-direction:column;gap:2px;min-height:56px;padding:4px 2px;border-radius:16px;background:transparent;color:var(--soft);font-size:.9375rem;font-weight:700;line-height:1.15;text-align:center;white-space:nowrap}
.mobile-bottom.tabs a:first-child{background:transparent;color:var(--soft)}
.mobile-bottom.tabs a[aria-current]{background:var(--tint-blue);color:var(--accent-text)}
.mobile-bottom.tabs a.kakao{background:#fee500;color:#191600}
.mobile-bottom.tabs .ic,.mobile-bottom.tabs svg{width:24px;height:24px}
.mobile-bottom.tabs a.tab-home{position:relative;margin-top:-18px;background:transparent;color:var(--navy)}
.mobile-bottom.tabs a.tab-home img{display:block;width:48px;height:48px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 14px #131b2a38;background:#fff}
.mobile-bottom.tabs a.tab-home[aria-current]{background:transparent;color:var(--accent-text)}
@media (max-width:360px){.mobile-bottom.tabs a{letter-spacing:-.02em}}

/* 상단 메뉴: 지도 강조 알약(모든 페이지 공통 헤더) */
/* 파란 알약은 '현재 페이지' 항목(aria-current)에만 — 지도 항목에 늘 켜 두지 않는다(2026-10-08). */
.nav nav a.nav-map{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.nav nav a.nav-map:hover{background:var(--navy,#0f2747);color:#fff}
.nav nav a.nav-map .nav-pin{flex:none}

/* 햄버거(전체 메뉴): 1020px 이하에서 가로 메뉴 대신 사용(메뉴 7칸이 넘치지 않게) */
.nav-more{display:none}
@media (max-width:1020px){
.nav>nav{display:none}
.nav-more{display:block;flex:none;margin-left:8px}
.nav>.button{margin-left:auto}
.nav-more summary{list-style:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--tint-blue,#e8f4f7)}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more .bars,.nav-more .bars::before,.nav-more .bars::after{display:block;width:18px;height:2px;background:var(--navy,#0f2747);border-radius:2px}
.nav-more .bars{position:relative}
.nav-more .bars::before,.nav-more .bars::after{content:"";position:absolute;left:0}
.nav-more .bars::before{top:-6px}.nav-more .bars::after{top:6px}
.nav-more-panel{position:fixed;left:0;right:0;top:68px;z-index:60;display:grid;gap:2px;background:#fff;border-bottom:1px solid var(--card-line,#dbe3e7);box-shadow:0 12px 24px #0f274718;padding:8px 16px 16px;max-height:calc(100vh - 150px);overflow:auto}
.nav-more-panel a{padding:14px 12px;border-radius:12px;font-weight:700;color:var(--text,#102a37)}
}
@media (max-width:700px){
body:not([data-page="detail"]) .nav>.button{display:none}
.nav-more{margin-left:auto}
body[data-page="detail"] .nav>.button{white-space:nowrap;margin-left:auto}
body[data-page="detail"] .nav-more{margin-left:8px}
body[data-page="detail"] .brand small{display:none}
}

/* /villas/ 히어로(.video-hero) 배경 — 글자 없는 풀빌라 사진(로컬 WebP /stay-assets/home/villas/, 외부 URL 없음).
   시안: 왼쪽 글자 칸은 밝은 막(흰 94%→), 오른쪽은 사진이 보이게. 남색 글자·청색 안내문 4.5:1↑ 유지. 모바일은 막을 전체에 깔아 대비 확보. */
.video-hero{background:linear-gradient(180deg,rgba(255,255,255,.93) 0,rgba(255,255,255,.86) 55%,rgba(255,255,255,.62) 100%),#e5f0ff url(/stay-assets/home/villas/villas-hero2-67ec31af.webp) center top/cover no-repeat}
@media(min-width:1001px){.video-hero{background:linear-gradient(90deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.9) 34%,rgba(255,255,255,.35) 52%,rgba(255,255,255,0) 72%),#e5f0ff url(/stay-assets/home/villas/villas-hero2-67ec31af.webp) center 58%/cover no-repeat}}
/* 히어로 두 버튼('영상 있는 풀빌라부터 보기'·'카카오톡으로 먼저 물어보기') 같은 색·모양 — 남색 알약, 높이 52px(터치 44px↑), 글자 흰색. 링크·문구는 그대로. */
.video-hero .hero-actions .hero-find,.video-hero .hero-actions .hero-kakao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid var(--navy);border-radius:999px;background:var(--navy);color:#fff;font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;box-shadow:0 6px 16px rgba(19,27,42,.18)}
.video-hero .hero-actions .hero-find:hover,.video-hero .hero-actions .hero-kakao:hover{background:#0b1220}
@media(max-width:700px){.video-hero .hero-actions .hero-find,.video-hero .hero-actions .hero-kakao{display:flex;width:100%;justify-self:stretch}}

/* /villas/ 히어로 글자 — 시안대로 가운데 정렬, 핵심어 '실제 영상'만 파랑 강조, 카카오 버튼은 카카오 노랑(#FEE500)+짙은 글자(대비 14:1). 문구·링크는 그대로. */
.video-hero .hero-intro{text-align:center}
.video-hero .hero-intro .eyebrow{justify-content:center}
.video-hero .hero-actions{justify-content:center}
.video-hero .hero-intro h1 .hero-em{color:#0a5bc4}
.video-hero .hero-actions .hero-kakao{background:#fee500;border-color:#fee500;color:#191919}
.video-hero .hero-actions .hero-kakao:hover{background:#f5dc00;border-color:#f5dc00;color:#191919}
.video-hero .hero-actions .hero-kakao:focus-visible,.video-hero .hero-actions .hero-find:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}

/* /villas/ 안내 3칸(스티커형 아이콘+글자) — 아이콘 위, 글자 아래로 가운데 정렬. 링크·개수는 그대로. 터치 영역 44px↑. */
.trust-strip[data-center] ul{align-items:stretch}
.trust-strip[data-center] li,.trust-strip[data-center] li:first-child{padding-left:0;padding-right:0;justify-content:center}
.trust-strip[data-center] .trust-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;padding:16px 10px;text-align:center;text-decoration:none;color:inherit}
.trust-strip[data-center] .trust-link>span{display:block;text-align:center}
@media(max-width:700px){
 .trust-strip[data-center] .trust-link{gap:6px;padding:12px 4px}
 .trust-strip[data-center] strong{font-size:.75rem}
}
.trust-strip[data-center] .tk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* /villas/ 안내 3칸 배경 — 시안(2번째 이미지) 색: 띠 #f4f7fc, 아이콘 원 #e2f0ff, 칸 구분선 #e8ebf2. 글자색·링크·크기는 그대로(대비 AA 유지). */
.trust-strip[data-center]{background:#f4f7fc;border-bottom:0}
.trust-strip[data-center] li+li{border-left-color:#e8ebf2}
.trust-strip[data-center] .ic{background:#e2f0ff}

footer .merchant-summary{margin-top:12px;font-size:13px;line-height:1.7;color:var(--soft)}footer .merchant-summary a{color:inherit}