/* =====================================================================
   리유아 v2 공통 — 헤더(중앙 로고 · 좌우 분할 메뉴 · 스크롤 방향 숨김)
   + 하단 카카오맵(지도퍼가기). 모든 페이지에 style.css 다음으로 로드.
   ===================================================================== */
:root { --hd-h: 96px; --hd-top: 0px; --hd-ink: #3b2a22; }
@media (max-width: 800px) { :root { --hd-h: 64px; } }

/* 기존 sticky 동작(헤더 fixed 전환·티커 고정·스페이서) 무력화 — 헤더 자리는 항상 흐름 안에 둔다 */
.header-spacer, .header-spacer.is-active { display: none !important; }
.ticker.is-fixed { position: static; }
.header, .header.is-sticky, .rv-hero > .header, .rv-hero > .header.is-sticky {
  position: relative; top: auto; height: var(--hd-h); margin: 0; flex: none;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 30;
}
.header__line { display: none; }

/* 실제 보이는 바는 고정 — 헤더 자리를 따라 내려오다 화면 맨 위에 붙는다 */
.header .header__inner, .header.is-sticky .header__inner {
  position: fixed; left: 0; right: 0; top: var(--hd-top); z-index: 90;
  height: var(--hd-h); box-sizing: border-box; padding: 0 clamp(24px, 3.2vw, 56px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px;
  background-color: rgba(251, 247, 243, 0); border-bottom: 1px solid rgba(105, 75, 64, 0);
  transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.header.hd-solid .header__inner {
  background-color: rgba(251, 247, 243, 0.86); border-bottom-color: rgba(105, 75, 64, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.header.hd-hide .header__inner { transform: translateY(-100%); }

.header__logo-link { grid-column: 2; justify-self: center; }
.header__logo { width: 168px; }
.header__right { grid-column: 3; justify-self: end; gap: 22px; height: auto; }

/* ---------- 메뉴 ---------- */
.gnb { display: none; }
.gnb--left { grid-column: 1; justify-self: start; }
.gnb__item { display: flex; align-items: center; height: var(--hd-h); }
.gnb__link {
  padding: 0 clamp(12px, 1.25vw, 22px); font-size: 15px; line-height: 1; font-weight: 600;
  letter-spacing: -0.03em; color: var(--hd-ink); transition: color 0.25s;
}
.gnb__item:hover > .gnb__link { color: var(--gold-deep); }

/* 드롭다운: 짙은 코코아 라운드 패널, 메뉴 바로 아래 가운데 */
.gnb__panel {
  top: calc(100% - 18px); left: 50%; min-width: 0; padding: 22px 8px;
  background: rgba(47, 35, 29, 0.92); border: 0; border-radius: 10px;
  box-shadow: 0 18px 40px rgba(47, 35, 29, 0.18);
  transform: translate(-50%, 8px);
}
.gnb__item:hover > .gnb__panel, .gnb__item:has(:focus-visible) > .gnb__panel { transform: translate(-50%, 0); }
.gnb__panel::before { height: 20px; }
.gnb__sub a { padding: 9px 22px; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.92); border-radius: 6px; transition: color 0.2s, background-color 0.2s; }
.gnb__sub a::after { display: none; }
.gnb__sub a:hover, .gnb__sub a:focus-visible { color: #fff; background-color: rgba(255, 255, 255, 0.07); }
.gnb__sub a em { color: rgba(255, 255, 255, 0.5); }
.gnb__panel--wide { padding: 22px 8px 18px; }
.gnb__panel--wide .gnb__sub a { padding-right: 26px; }
.gnb__col { padding: 0 6px; }
.gnb__col + .gnb__col { border-left-color: rgba(255, 255, 255, 0.12); }
.gnb__label { padding: 0 22px 8px; color: #d8bd92; font-weight: 500; letter-spacing: 0.02em; }

/* ---------- 예약 알약 버튼 ---------- */
.hd-resv {
  display: none; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: 999px;
  background: #ece0d3; color: #6e5446; transition: background-color 0.3s;
}
.hd-resv:hover { background: #e4d3c2; }
.hd-resv__en { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.01em; }
.hd-resv__ko { padding: 4px 9px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: var(--primary); }

/* 언어 목록도 같은 결로 */
.lang__list { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); padding: 8px; border-radius: 10px; background: rgba(47, 35, 29, 0.92); }
.lang__item { padding: 9px 14px; border-radius: 6px; white-space: nowrap; }
.lang__item:hover { background-color: rgba(255, 255, 255, 0.08); }

@media (min-width: 801px) {
  .hd-resv { display: inline-flex; }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .gnb { display: block; }
  .header__inner { grid-template-columns: 1fr auto 1fr; }
  .header__logo-link { justify-self: center; }
  .header__right { gap: 18px; }
  .gnb--right .gnb__list { margin-right: 4px; }
}
@media (min-width: 1600px) {
  .header__logo { width: 184px; }
}

@media (max-width: 800px) {
  .header .header__inner, .header.is-sticky .header__inner { padding: 0 20px; grid-template-columns: 44px 1fr 44px; }
  .header__mobile-btn { justify-self: start; }
  #mobileMenuBtn { grid-column: 3; justify-self: end; }
  .header__logo { width: 104px; }
}

/* ---------- 카카오맵 (지도퍼가기) ---------- */
.map.map--kakao { display: block; height: auto; min-height: 282px; overflow: hidden; background: #f4f2ef; border-radius: 2px; }
@media (max-width: 520px) { .map.map--kakao { min-height: 242px; } }
.map--kakao .root_daum_roughmap { width: 100% !important; }
.map--kakao .root_daum_roughmap .wrap_map, .map--kakao .root_daum_roughmap .wrap_controllers { width: 100% !important; }
.map--kakao .root_daum_roughmap .cont { display: none !important; }
.map--kakao .root_daum_roughmap .wrap_controllers { box-sizing: border-box; }

/* ---------- 우측 하단 플로팅 — 흰 원 + 단색 코코아 아이콘, 맨 위로만 톤 다운 브라운 ---------- */
.quick { right: clamp(20px, 2.8vw, 40px); bottom: clamp(20px, 2.8vw, 40px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.quick .quick__top, .quick .quick__kakao, .quick .quick__naver {
  position: static; top: auto; margin: 0; width: 50px; height: 50px; border: 0; border-radius: 50%;
  background: #fff; color: var(--hd-ink); box-shadow: 0 6px 18px rgba(59, 42, 34, 0.1);
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.quick .quick__top:not(.is-visible) { display: none; }
.quick .quick__top { background: #9c8676; box-shadow: none; }
.quick .quick__top svg { fill: none; stroke: #fff; }
.quick .quick__kakao svg { fill: var(--hd-ink); }
.quick .quick__naver { font-size: 19px; color: var(--hd-ink); }
@media (hover: hover) {
  .quick .quick__kakao:hover, .quick .quick__naver:hover { background: var(--hd-ink); color: #fff; }
  .quick .quick__kakao:hover svg { fill: #fff; }
  .quick .quick__top:hover { background: #866f60; }
}
@media (max-width: 800px) {
  .quick { gap: 8px; }
  .quick .quick__top, .quick .quick__kakao, .quick .quick__naver { width: 42px; height: 42px; }
  .quick .quick__naver { font-size: 16px; }
}

/* 인트로가 도는 동안 공지 띠·헤더·플로팅은 숨겨 둔다(인트로 전 옛 화면이 비치지 않게) */
.rv-intro-play .ticker-wrap, .rv-intro-play .header__inner, .rv-intro-play .quick { visibility: hidden; }