/**
 * app-webview-shell.css
 * iOS/Android WebView 앱 공통 safe-area · 하단 탭 · 고정 UI 스택
 * 로드: layout.css 뒤 (m_header.php) + wh_brand_assets / index_2026
 * --safe-t/--safe-b: wh-app-safe-area.js 또는 네이티브 주입
 * Android(wh-wehome-app-android): fitsSystemWindows — CSS inset 0 (이중 여백 방지)
 *
 * 상단 패턴: top:0 + padding-top:var(--safe-t) + background:#fff
 * (노치 영역까지 흰색으로 채움 — top:safe-t만 쓰면 스크롤 시 틈에 콘텐츠 비침)
 */

/* Android: 네이티브 fitsSystemWindows — safe-t는 0, padding-top var(--safe-t) 무해 */
html.wh-wehome-app-android {
  --safe-t: 0px;
  --safe-b: 0px;
}

/* ── 공통 sticky/fixed 상단 바 ── */
html.wh-wehome-app div.nav.clean {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  padding-bottom: 0 !important;
  background: #fff !important;
  box-sizing: border-box;
  min-height: calc(var(--nav-clean-height, 50px) + var(--safe-t)) !important;
  height: auto;
}

html.wh-wehome-app div.nav.clean + #content {
  padding-top: calc(var(--nav-clean-height, 50px) + var(--safe-t)) !important;
}

html.wh-wehome-app .wh-page-nav-wrap {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  background: #fff !important;
  box-sizing: border-box;
  z-index: 990 !important;
}

html.wh-wehome-app .wh-page-nav-wrap .wh-page-nav,
html.wh-wehome-app .wh-page-nav-wrap .wh-page-nav.is-scrolled {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.wh-wehome-app .r26-sticky-bar {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  box-sizing: border-box;
}

/* 메인 히어로: 투명 오버레이 유지 */
html.wh-wehome-app .r26-header {
  top: var(--safe-t) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box;
}

html.wh-wehome-app .r26-hero .r26-header {
  position: fixed !important;
  top: var(--safe-t) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: transparent !important;
}

html.wh-wehome-app .ib-tabs-wrap {
  margin-top: 0 !important;
  position: relative !important;
  top: auto !important;
  background: var(--wh-bg, #f2f4f6) !important;
}

html.wh-wehome-app .ib-list {
  margin-top: 0 !important;
}

html.wh-wehome-app #ib-search-panel.open {
  top: calc(var(--safe-t) + 76px) !important;
}

html.wh-wehome-app body:has(#content.inbox.list) .wh-page-nav-wrap {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  background: #fff !important;
}

/* 위시리스트: nav min-height (padding/margin은 하단 app 규칙 SSOT) */
html.wh-wehome-app body:has(div#content.page.sp-app-page) .wh-page-nav-wrap .wh-page-nav {
  min-height: var(--wh-page-nav-h, 76px);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Android WebView: 위시리스트 카드 텍스트 타일 미페인트(line-clamp + HW layer) 방지 */
html.wh-wehome-app-android .wl-grid .wl-card.r26-prop-card {
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
}
html.wh-wehome-app-android .wl-grid .r26-prop-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: #fff !important;
  position: relative !important;
  z-index: 2 !important;
}
html.wh-wehome-app-android .wl-grid .r26-prop-title,
html.wh-wehome-app-android .wl-grid .r26-prop-loc {
  display: block !important;
  -webkit-box-orient: unset !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.wh-wehome-app-android .wl-grid .wl-card-img-wrap {
  flex-shrink: 0 !important;
  isolation: isolate !important;
}
html.wh-wehome-app-android .wl-grid .wl-heart svg {
  filter: none !important;
}

/* ── 하단 탭: 아이콘 66px + safe-area 한 번만 ── */
html.wh-wehome-app nav,
html.wh-wehome-app nav#bottom_nav {
  box-sizing: border-box;
  min-height: var(--bottom-naverbar-height, 66px);
  height: auto;
  padding-bottom: max(var(--safe-b), 4px);
}

html.wh-wehome-app .r26-root {
  padding-bottom: calc(var(--bottom-naverbar-height, 66px) + var(--safe-b) + 12px);
}

html.wh-wehome-app-android .r26-hero-slides,
html.wh-wehome-app-android .r26-hero-overlay {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html.wh-wehome-app #btn-map-float {
  position: fixed !important;
  z-index: 1200 !important;
  bottom: calc(var(--bottom-naverbar-height, 66px) + var(--safe-b, 0px) + 16px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
html.wh-wehome-app #btn-map-float.visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.wh-wehome-app #btn-map-float button {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 13px 28px !important;
  background: var(--wh-brand-tint, #f3eefb) !important;
  color: var(--wh-brand, #6800cd) !important;
  border: 1px solid var(--wh-info-bd, #ddd0f5) !important;
  border-radius: var(--wh-radius-pill, 999px) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: var(--wh-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.06)) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html.wh-conversation-page nav#bottom_nav,
body:has(#content.inbox.list) nav#bottom_nav,
html.wh-wehome-app body:has(#content.inbox.list) nav#bottom_nav,
html.wh-wehome-app body:has(#content.payment-select) nav#bottom_nav,
html.wh-wehome-app body:has(.wh-bottom-bar) nav#bottom_nav,
html.wh-wehome-app body:has(.pay-sticky) nav#bottom_nav {
  display: none !important;
}

html.wh-wehome-app body:has(.wh-bottom-bar) .wh-bottom-bar,
html.wh-wehome-app body:has(.pay-sticky) .pay-sticky {
  bottom: 0;
  z-index: 9999;
  height: auto;
  min-height: var(--bottom-naverbar-height, 66px);
  padding-bottom: calc(12px + var(--safe-b));
  box-sizing: border-box;
}

html.wh-wehome-app body:has(#content.payment-select) #content.payment-select {
  padding-bottom: calc(var(--bottom-naverbar-height, 66px) + 88px + var(--safe-b)) !important;
}

/* ── 검색 결과 페이지 (.search-page-header — inline/slim CSS보다 우선) ── */
html.wh-wehome-app .search-page-header,
html.wh-wehome-app.search-force-desktop-ui .search-page-header,
html.wh-wehome-app.search-force-desktop-ui.sp-force-desktop-ui .search-page-header {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  height: auto !important;
  min-height: calc(56px + var(--safe-t)) !important;
  box-sizing: border-box !important;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 숙소 상세 (.rm-nav sticky) ── */
html.wh-wehome-app .rm-nav {
  top: 0 !important;
  padding-top: var(--safe-t) !important;
  box-sizing: border-box !important;
  background: var(--wh-bg, #f2f4f6) !important;
}

html.wh-wehome-app .rm-nav.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
}

/* 검색 오버레이 — 상단 닫기/제목 바 */
html.wh-wehome-app .mobile_search_overlay {
  padding-top: var(--safe-t) !important;
  box-sizing: border-box !important;
}

html.wh-wehome-app #wh-cal-modal {
  padding-top: var(--safe-t) !important;
  box-sizing: border-box !important;
}

html.wh-wehome-app .wh-cal-footer {
  padding-bottom: calc(12px + var(--safe-b)) !important;
}

/* 숙소 PC 헤더 (iPad 가로·앱 wide viewport) */
@media (min-width: 1024px) {
  html.wh-wehome-app.rooms-force-desktop-ui #rmDtActionBar {
    top: 0 !important;
    padding-top: var(--safe-t) !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  html.wh-wehome-app.rooms-force-desktop-ui #rm-wrap {
    padding-top: calc(var(--dt-header-h, 56px) + var(--safe-t)) !important;
  }
}

/* ══ wh-page-nav 페이지 — iOS/Android 앱 WebView (2026-07-04, 2026-07-04b 여백 정정) ══ */
html.wh-wehome-app .wh-page-nav-wrap,
html.wh-wehome-app .wh-page-nav,
html.wh-wehome-app .wh-page-nav.is-scrolled {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* layout.css margin-bottom:-76px 유지 (전역 0 금지 — 여행·위시·계정 깨짐) */
html.wh-wehome-app body:has(div#content.page.sp-app-page) .wh-page-nav-wrap {
  margin-bottom: calc(-1 * var(--wh-page-nav-h, 76px)) !important;
}

html.wh-wehome-app div#content.page.sp-app-page {
  padding-top: calc(var(--wh-page-nav-h, 76px) + 8px) !important;
}

/* 앱 WebView: #content overflow-y:scroll 안 sticky 탭 → 겹침·순서 깨짐 방지 */
html.wh-wehome-app .wh-tabs,
html.wh-wehome-app .wl-tabs,
html.wh-wehome-app .ib-tabs-wrap {
  position: relative !important;
  top: auto !important;
  margin-top: 0 !important;
  z-index: 1 !important;
  background: var(--wh-bg, #f2f4f6) !important;
}

/* 여행목록: nav 형제 + .wh-tabs margin-top 76px 중복 제거 */
html.wh-wehome-app body:has(.wh-page-nav-wrap + #content.tl-page) .wh-page-nav-wrap {
  margin-bottom: calc(-1 * var(--wh-page-nav-h, 76px)) !important;
}

html.wh-wehome-app body:has(.wh-page-nav-wrap + #content.tl-page) #content.tl-page {
  padding-top: calc(var(--wh-page-nav-h, 76px) + 8px) !important;
}

html.wh-wehome-app body:has(.wh-page-nav-wrap + #content.tl-page) .wh-page-nav-wrap .wh-page-nav {
  box-sizing: border-box !important;
  min-height: var(--wh-page-nav-h, 76px) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

html.wh-wehome-app body:has(.wh-page-nav-wrap + #content.tl-page) #content.tl-page .wh-tabs {
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 4px !important;
  position: relative !important;
  top: auto !important;
  background: var(--wh-bg, #f2f4f6) !important;
}

/* 메시지: nav 형제 negative margin (위시·여행과 동일) */
html.wh-wehome-app body:has(.wh-page-nav-wrap + #content:has(.ib-tabs-wrap)) .wh-page-nav-wrap {
  margin-bottom: calc(-1 * var(--wh-page-nav-h, 76px)) !important;
}

html.wh-wehome-app #content:has(.ib-tabs-wrap) {
  padding-top: calc(var(--wh-page-nav-h, 76px) + 8px) !important;
}

/* 호스트 여행일정표만: nav 형제 + sticky 흐름 (이중 padding 제거) */
html.wh-wehome-app body:has(.wh-page-nav-wrap + #content.host-itinerary) .wh-page-nav-wrap {
  margin-bottom: 0 !important;
}

html.wh-wehome-app div#content.host-itinerary {
  padding-top: 0 !important;
}

html.wh-wehome-app .hi-bottom-bar,
html.wh-wehome-app .wh-bottom-bar,
html.wh-wehome-app .hf-bottom-bar {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

html.wh-wehome-app body:has(div#content.up-wrap) {
  background: var(--wh-bg, #f2f4f6) !important;
}

html.wh-wehome-app div#content.up-wrap {
  padding-top: calc(var(--wh-page-nav-h, 76px) + var(--safe-t) + 12px) !important;
}

html.wh-wehome-app #content.inbox.list {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 내 계정: fixed nav — acc-wrap padding-top 유지 (전역 padding-top:0 금지) */
html.wh-wehome-app body:has(#content.acc-wrap) .wh-page-nav-wrap {
  margin-bottom: 0 !important;
}

html.wh-wehome-app div#content.acc-wrap,
html.wh-wehome-app div#content.page.my-account.acc-wrap {
  padding-top: calc(56px + var(--safe-t, env(safe-area-inset-top, 0px)) + 12px) !important;
}