/* 모바일 하단 빠른 메뉴(6칸: 풀빌라·지도·홈·여행·카톡 상담·공항 VIP) — 참고 시안(스티커형 일러스트 아이콘 + 굵은 글자 라벨, 가운데 '홈'만 크게·현재 칸은 파란 알약).
   링크 목적지·순서·라벨은 그대로. 아이콘만 단색 선 아이콘 → 스티커 WebP 로 바꾸고 칸 크기·간격·정렬을 통일한다.
   색: 잉크 #0b2a4a · 현재 칸 알약 #eaf6ff/#0a5bc4(글자 대비 4.5:1↑). 인라인 style 없음(CSP). */
.mobile-bottom.tabs{grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #d4e6f7;box-shadow:0 -8px 24px #0b2a4a14}
.mobile-bottom.tabs a,.mobile-bottom.tabs a.kakao,.mobile-bottom.tabs a.tab-home{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:68px;margin:0;padding:4px 2px 5px;border-radius:18px;background:transparent;color:#0b2a4a;font-size:.9375rem;font-weight:800;line-height:1.2;letter-spacing:-.03em;white-space:nowrap}
.mobile-bottom.tabs a span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mobile-bottom.tabs .tab-ic{display:block;flex:none;width:44px;height:44px;object-fit:contain;border:0;border-radius:0;box-shadow:none;background:transparent}
.mobile-bottom.tabs a.tab-home .tab-ic{width:52px;height:52px;margin-top:-14px;border:0;border-radius:0;box-shadow:none;background:transparent;filter:drop-shadow(0 4px 8px #0a6cff40)}
.mobile-bottom.tabs a[aria-current],.mobile-bottom.tabs a.tab-home[aria-current]{background:#eaf6ff;color:#0a5bc4}
.mobile-bottom.tabs a:focus-visible{outline:3px solid #0a5bc4;outline-offset:-3px}
.mobile-bottom.tabs a:active{background:#eaf6ff}
@media (max-width:359px){.mobile-bottom.tabs{gap:2px;padding-left:4px;padding-right:4px}.mobile-bottom.tabs a{font-size:.75rem;letter-spacing:-.04em}.mobile-bottom.tabs .tab-ic{width:40px;height:40px}.mobile-bottom.tabs a.tab-home .tab-ic{width:46px;height:46px}}

/* 상단 메뉴(PC 가로 메뉴 · 모바일 ≡ 패널): 하단 바와 같은 스티커 아이콘을 풀빌라·지도·공항 VIP 항목 앞에만 붙인다(항목·순서·링크 그대로). */
.nav nav a.nav-st,.nav-more-panel a.nav-st{display:inline-flex;align-items:center;gap:8px}
.nav-more-panel a.nav-st{display:flex;gap:12px;min-height:52px;font-size:1rem;font-weight:800;color:#0b2a4a}
.nav-ic{display:block;flex:none;width:28px;height:28px;object-fit:contain}
.nav-more-panel .nav-ic{width:36px;height:36px}

/* 현재 페이지 항목만 파란 알약(aria-current). 하단 바와 같은 색(#eaf6ff/#0a5bc4, 글자 대비 4.5:1↑). */
.nav nav a[aria-current],.nav-more-panel a[aria-current]{background:#eaf6ff;color:#0a5bc4;border-radius:12px}
.nav nav a.nav-st{padding:6px 10px}
.nav nav a.nav-st:hover:not([aria-current]){background:#f2f8ff}
.nav-more-panel a.nav-st{padding-left:12px;padding-right:12px}

/* 현재 페이지·누르는 중에만 파란 테두리(기본은 테두리 없음). 하단 바와 같은 파랑 #0a5bc4. */
.nav nav a.nav-st,.nav-more-panel a.nav-st{border:2px solid transparent;border-radius:12px}
.nav nav a.nav-st[aria-current],.nav-more-panel a.nav-st[aria-current],.nav nav a.nav-st:active,.nav-more-panel a.nav-st:active{background:#eaf6ff;border-color:#0a5bc4;color:#0a5bc4}
.nav nav a.nav-st:focus-visible,.nav-more-panel a.nav-st:focus-visible{outline:3px solid #0a5bc4;outline-offset:1px}

/* 2026-10-09 PC(1021px↑) 상단 가로 메뉴: 글자가 2~3줄로 갈라져 어수선해 보이던 것을 한 줄로 고정(문구·순서·링크 그대로). 모바일(≤1020px)은 ≡ 패널이라 영향 없음. */
@media (min-width:1021px){
.brand{white-space:nowrap;flex:none}
.nav nav{white-space:nowrap;flex:0 1 auto;min-width:0}
.nav nav a{white-space:nowrap;flex:none}
.nav>.button{white-space:nowrap;flex:none}
}
@media (min-width:1021px) and (max-width:1320px){
.nav{gap:12px}
.nav nav{gap:2px;font-size:.875rem}
.nav nav a.nav-st{gap:6px;padding:6px 8px}
.nav-ic{width:24px;height:24px}
.nav>.button.small{padding:10px 14px}
}
@media (min-width:1021px) and (max-width:1180px){
.nav{gap:8px}
.nav nav{gap:0;font-size:.8125rem}
.nav nav a.nav-st{gap:4px;padding:6px 5px}
.nav-ic{width:20px;height:20px}
.brand{font-size:1.15rem;gap:8px}
.brand small{letter-spacing:.1em}
.nav>.button.small{padding:10px 12px}
}

/* 2026-10-10 메뉴 바 디자인(Su 첨부 사진): ≡ 버튼은 연한 파랑 둥근 칸+굵은 남색 3줄, 열면 항목마다 흰 알약 카드(왼쪽 스티커·가운데 글자·오른쪽 ›). 항목·순서·링크·문구 그대로. 모바일·태블릿(≤1020px)만. */
@media (max-width:1020px){
.nav-more summary{width:48px;height:48px;border-radius:14px;background:#e6eefb}
.nav-more summary:focus-visible{outline:3px solid #0a5bc4;outline-offset:2px}
.nav-more .bars,.nav-more .bars::before,.nav-more .bars::after{width:22px;height:3px;border-radius:3px;background:#0b1f3a}
.nav-more .bars::before{top:-7px}.nav-more .bars::after{top:7px}
.nav-more-panel{top:72px;gap:10px;background:#f4f8fd;border-bottom:1px solid #dbe3ef;box-shadow:0 14px 28px #0b1f3a22;padding:14px 16px 18px;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overscroll-behavior:contain}
.nav-more-panel a.nav-st{position:relative;min-height:64px;padding:8px 48px 8px 14px;gap:16px;border:1px solid #e3e9f2;border-radius:999px;background:linear-gradient(180deg,#fff,#f3f5f9);box-shadow:0 6px 14px #0b1f3a1a,inset 0 1px 0 #fff;color:#0b1f3a;font-size:1.0625rem;font-weight:800}
.nav-more-panel a.nav-st::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:3px solid #0b1f3a;border-top:3px solid #0b1f3a;transform:translateY(-50%) rotate(45deg);border-radius:1px}
.nav-more-panel .nav-ic{width:48px;height:48px}
.nav-more-panel a.nav-st[aria-current],.nav-more-panel a.nav-st:active{background:#eaf6ff;border-color:#0a5bc4;color:#0a5bc4}
.nav-more-panel a.nav-st[aria-current]::after,.nav-more-panel a.nav-st:active::after{border-color:#0a5bc4}
}
/* 상단 한 줄: 로고+다낭특파원(왼쪽) · 남색 알약 버튼 · ≡ (오른쪽). 홈·목록처럼 버튼이 숨겨져 있던 모바일에서도 보이게(링크·문구는 기존 그대로). */
@media (max-width:700px){
body:not([data-page="detail"]) .nav>.button{display:inline-flex;white-space:nowrap;margin-left:auto;padding:10px 16px;font-size:.9375rem}
body:not([data-page="detail"]) .nav-more{margin-left:8px}
.nav{gap:8px}
}
@media (max-width:359px){body:not([data-page="detail"]) .nav>.button{padding:10px 10px;font-size:.8125rem}.nav-more-panel a.nav-st{font-size:1rem}.nav-more-panel .nav-ic{width:42px;height:42px}}
@media (max-width:1020px){.nav>.button.small{background:#0b1f3a;border-color:#0b1f3a;color:#fff}}

/* 2026-10-10 desktop_menu_fix(Su): PC(1021px↑) 상단 메뉴가 서로 겹쳐 보이던 것을 고치고, 모바일 ≡ 패널 항목(흰 알약 카드: 둥근 알약·흰→연회색 그라디언트·은은한 그림자)과 같은 모양의 테두리를 준다.
   겹침 원인: 항목이 flex:none 이라 줄어들지 못하고, 글꼴이 넓은 PC(Windows 등)에서 가장 오른쪽 항목이 「풀빌라 상담」 버튼 위로 넘쳤다 → nav 를 남는 칸 전체(flex:1)로 늘려 항목을 균등 배치(space-evenly)하고, 좁아지면 항목이 먼저 줄어들게 한다.
   테두리: 모바일 카드 테두리(#e3e9f2)는 흰 배경 대비 1.2:1 이라 PC 에는 같은 모양에 AA 비텍스트 기준(3:1↑)을 넘는 #6b7f9e(흰 대비 4.07:1)를 쓴다. 모바일(≤1020px)은 건드리지 않는다. 항목·순서·링크·aria 그대로. */
@media (min-width:1021px){
.nav nav{flex:1 1 0;justify-content:space-evenly;gap:4px;margin:0 4px;overflow:hidden;padding:4px 2px}
.nav nav a.nav-st{flex:0 1 auto;min-width:0;border:1.5px solid #6b7f9e;border-radius:999px;background:linear-gradient(180deg,#fff,#f3f5f9);box-shadow:0 3px 8px #0b1f3a1a,inset 0 1px 0 #fff;color:#0b1f3a;font-weight:800;padding:6px 12px}
.nav nav a.nav-st:hover:not([aria-current]){background:#eaf6ff;border-color:#0a5bc4;color:#0a5bc4}
.nav nav a.nav-st[aria-current]{border-radius:999px;background:#eaf6ff;border-color:#0a5bc4;color:#0a5bc4}
.nav nav a.nav-st:focus-visible{outline:3px solid #0a5bc4;outline-offset:2px}
}
@media (min-width:1021px) and (max-width:1320px){
.nav nav a.nav-st{padding:6px 8px}
}
/* 2026-10-22 '여행 서비스' 항목이 늘어 상단 항목이 8개 — 1560px 이하에서는 아이콘을 숨겨 글자가 잘리지 않게 한다. */
@media (min-width:1181px) and (max-width:1560px){
.nav nav{gap:2px}
.nav nav a.nav-st{padding:5px 8px;gap:4px;font-size:.875rem}
.nav nav a.nav-st .nav-ic{display:none}
}
@media (min-width:1021px) and (max-width:1180px){
.nav nav{gap:2px;margin:0 2px}
.nav nav a.nav-st{padding:5px 6px;gap:3px;font-size:.8125rem}
.nav nav a.nav-st .nav-ic{display:none}
}

/* 2026-10-11 login_menu_prominent(Su): ≡ 메뉴 맨 위 「로그인 · 회원가입」을 다른 항목보다 크고 눈에 띄게(손님이 로그인을 바로 알아보도록).
   남색 꽉 찬 알약 + 흰 글자(대비 ≥ 12:1) · 높이 ↑ · 글자 ↑ · 흰 원 위의 큰 아이콘 · 흰 화살표. 마크업·순서·링크·aria·data-login-* 그대로(CSS 만 추가). */
.nav-more-panel a.nav-login-item{position:relative;min-height:84px;margin-bottom:6px;padding:10px 52px 10px 14px;gap:16px;border:2px solid #0b1f3a;border-radius:999px;background:linear-gradient(180deg,#14407a,#0b1f3a);box-shadow:0 10px 22px #0b1f3a40,inset 0 1px 0 #ffffff33;color:#fff;font-size:1.3125rem;font-weight:900;letter-spacing:-.01em}
.nav-more-panel a.nav-login-item .nav-ic{flex:none;width:60px;height:60px;padding:6px;box-sizing:border-box;border-radius:50%;background:#fff;object-fit:contain}
.nav-more-panel a.nav-login-item::after{border-color:#fff;width:11px;height:11px;border-width:3px;right:24px}
.nav-more-panel a.nav-login-item:hover{background:linear-gradient(180deg,#1a4f96,#0f2a52);color:#fff}
.nav-more-panel a.nav-login-item:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}
.nav-more-panel a.nav-login-item[aria-current],.nav-more-panel a.nav-login-item:active{background:linear-gradient(180deg,#0a5bc4,#08479a);border-color:#fff;color:#fff;box-shadow:0 0 0 3px #0a5bc4,0 10px 22px #0b1f3a40}
.nav-more-panel a.nav-login-item[aria-current]::after,.nav-more-panel a.nav-login-item:active::after{border-color:#fff}
@media (max-width:359px){.nav-more-panel a.nav-login-item{min-height:76px;font-size:1.125rem}.nav-more-panel a.nav-login-item .nav-ic{width:52px;height:52px}}
/* PC(1021px↑)에는 ≡ 가 없고 상단 오른쪽 「로그인」 알약이 그 자리 → 같은 남색 꽉 찬 큰 알약 + 아이콘으로 눈에 띄게(링크·문구·aria 그대로). */
@media (min-width:1021px){
.nav a.nav-login{min-height:52px;padding:8px 20px 8px 8px;gap:8px;border-color:#0b1f3a;background:linear-gradient(180deg,#14407a,#0b1f3a);color:#fff;font-size:1.0625rem;font-weight:900;box-shadow:0 6px 14px #0b1f3a40,inset 0 1px 0 #ffffff33}
.nav a.nav-login::before{content:"";flex:none;width:38px;height:38px;border-radius:50%;background:#fff url(/stay-assets/tabs/menu-about.webp) center/28px 28px no-repeat}
.nav a.nav-login:hover{background:linear-gradient(180deg,#1a4f96,#0f2a52);color:#fff}
.nav a.nav-login:focus-visible{outline:3px solid #0a5bc4;outline-offset:3px}
.nav a.nav-login[aria-current]{background:linear-gradient(180deg,#0a5bc4,#08479a);border-color:#fff;color:#fff;box-shadow:0 0 0 3px #0a5bc4}
}
@media (min-width:1021px) and (max-width:1320px){.nav a.nav-login{min-height:48px;padding:6px 12px 6px 6px;font-size:.9375rem}.nav a.nav-login::before{width:32px;height:32px;background-size:24px 24px}}
@media (min-width:1021px) and (max-width:1180px){.nav a.nav-login{padding:6px 10px;font-size:.8125rem}.nav a.nav-login::before{display:none}}

/* 2026-10-10 pill_text_spread(Su): PC(1021px↑) 상단 알약이 글자 폭만큼만 좁게 붙어 있어 양옆이 비어 보이던 것을 고친다.
   알약이 메뉴 칸의 남는 폭을 나눠 가져 길어지고(flex-grow), 아이콘+글자는 알약 안에서 가운데로 정렬된다(justify-content:center) → 양옆 여백이 같다.
   알약 사이 간격은 그대로 4px(균등), 좁아지면 이전처럼 알약이 먼저 줄어든다. 항목·순서·링크·aria·모바일(≤1020px) 불변. */
@media (min-width:1021px){
.nav nav a.nav-st{flex:1 1 auto;justify-content:center;text-align:center}
}
@media (min-width:1500px){
.nav nav a.nav-st{padding-left:16px;padding-right:16px}
}


/* 2026-10-10 pill_fit_text(Su): "알약 안 글자가 틀(테두리)에 안 들어가고, 화면 양옆은 비어 있다" — PC 에서 헤더 칸(.wrap)이 1240px 로 막혀 알약이 좁고(넓은 글꼴에서 글자가 테두리 밖으로 잘림) 양옆 여백만 컸다.
   헤더만 화면 폭을 더 쓰게 넓혀(양옆 빈 곳 채움) 알약이 글자를 여유 있게 담도록 한다. 넓은 화면(1500px↑)에서는 알약이 글자보다 작아지지 않게 고정(flex-shrink:0)하고 좌우 padding 을 늘려 글자가 틀 한가운데에 오게 한다.
   항목·순서·링크·aria·모바일(≤1020px)·본문 폭 불변. pill_text_spread 규칙(flex-grow·가운데 정렬) 위에 덧붙이기만 한다. */
@media (min-width:1021px){
header>.nav.wrap{width:calc(100% - 48px);max-width:1680px}
}
@media (min-width:1500px){
.nav nav a.nav-st{flex-shrink:0;padding-left:22px;padding-right:22px}
.nav nav{margin:0 20px}
}

/* 2026-10-19 desktop_menu_even_layout(Su: "thanh menu dàn đều ra, bỏ cái thanh kéo nhìn hơi xấu"): PC(1021px↑) 상단 알약 7개를 가로 슬라이드(스크롤바·드래그) 없이 한 줄에 균등 배치한다.
   메뉴 칸(nav)은 남는 폭 전체(flex:1 1 0, min-width:0)를 쓰고 overflow 는 자르지 않는다(visible, 스크롤 없음). 알약은 flex:1 1 auto + justify-content:center 로 남는 폭을 같은 비율로 나눠 갖고,
   폭이 모자라면 줄바꿈 없이(nowrap) 글자 크기·좌우 padding·간격이 화면 폭(vw)에 맞춰 clamp() 로 함께 줄어든다 → 1024~1920px 어디서나 한 줄·가로 스크롤 없음·「풀빌라 상담」 버튼과 안 겹침.
   항목·순서·링크·aria·모바일(≤1020px) 불변. */
@media (min-width:1021px){
.nav nav{flex:1 1 0;min-width:0;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;gap:clamp(2px,.3vw,6px);margin:0 clamp(4px,.8vw,20px);padding:4px 0;overflow:visible;font-size:clamp(.6875rem,1.02vw,.9375rem)}
.nav nav a.nav-st{flex:1 1 auto;min-width:0;justify-content:center;text-align:center;white-space:nowrap;font-size:inherit;padding:6px clamp(3px,.75vw,22px);gap:clamp(2px,.3vw,6px);-webkit-user-drag:none;user-select:none}
}

/* 2026-10-23 menu_restore_8_items(Su: "Trả đủ 8 mục như cũ"): PC 상단 메뉴 8개 전부 복원 — #676 의 4개 숨김 규칙 제거. 알약(테두리) 모양은 #678 그대로, 하단 메뉴 글자 축소(#677)도 그대로. */
/* 하단 메뉴 알약: 화면 폭에 맞춰 글자 크기를 줄여 글자가 알약 안에 들어오게 함 (모양·순서·링크 그대로) */
.mobile-bottom.tabs a span{font-size:clamp(11px,3.3vw,15px);line-height:1.2;letter-spacing:-.04em;text-align:center}