/**
 * Shared mobile search overlay (home + search)
 * SSOT — index-r26 + search.php dedup
 */

/* ─── 검색 오버레이: 바텀시트 애니메이션 + PC 720px 제한 ─── */

/* 백드롭 */
.r26-search-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  z-index: 9999;
  transition:
    background var(--wh-motion-slow, 380ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    backdrop-filter var(--wh-motion-slow, 380ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1));
}
.r26-search-backdrop.active {
  display: block;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.r26-search-backdrop.entering { background: rgba(0,0,0,0); }

/* 오버레이 — 위에서 페이드인 (검색창이 상단에 있으므로 자연스러운 방향) */
.mobile_search_overlay {
  display: none !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  max-width: 720px !important;
  left: 50% !important;
  width: 100% !important;
  height: 100dvh !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 10000 !important;

  /* 닫힌 상태: 살짝 위에 있다가 fade out */
  pointer-events: none !important;
  transform: translateX(-50%) translateY(16px) scale(0.96) !important;
  transition:
    transform var(--wh-motion-sheet, 480ms) var(--wh-ease-spring, cubic-bezier(0.34, 1.28, 0.64, 1)),
    opacity var(--wh-motion-slow, 380ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  opacity: 0 !important;
}

/* 열린 상태: 제자리로 fade in */
.mobile_search_overlay.active {
  display: flex !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 닫힘 애니메이션 */
.mobile_search_overlay.closing {
  display: flex !important;
  transform: translateX(-50%) translateY(20px) scale(0.97) !important;
  opacity: 0 !important;
  transition:
    transform var(--wh-motion-slow, 380ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--wh-motion-slow, 380ms) var(--wh-ease-out-smooth, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}


/* ══════════════════════════════════════════
   검색 오버레이 내부 애니메이션
══════════════════════════════════════════ */

/* ─── 에어비앤비 스타일: flex 방식으로 교체 ─── */
/* style25.css의 flex 레이아웃이 주도함 — 인라인 오버라이드 최소화 */
.m_accordion_item.active .m_content {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
}

/* 아코디언 헤더 전환 */
.m_accordion_item {
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.2s ease !important;
}
.m_header {
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: var(--wh-radius-sm, 16px);
}
.m_header:active { background: rgba(0,0,0,0.03); }

/* 아코디언 라벨 전환 */
.m_accordion_item .m_label {
  transition: font-size 0.3s ease, font-weight 0.3s ease, color 0.2s ease;
}
.m_accordion_item .m_summary {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.m_accordion_item.active .m_summary {
  opacity: 0 !important;
  transform: translateX(6px) !important;
  pointer-events: none !important;
}

/* ─── 지역 추천 리스트 아이템 ─── */
.region_list .region {
  transition: background 0.15s ease, transform 0.15s ease;
  border-radius: 10px;
  cursor: pointer;
}
.region_list .region:hover { background: #f9fafb; }
.region_list .region:active {
  background: var(--wh-brand-tint, #f3eefb);
  transform: scale(0.98);
}

/* ─── 달력 날짜 셀 ─── */
.mobile_search_overlay li.cal_day {
  transition: transform 0.1s ease;
}
/* 날짜 숫자를 감싸는 고정 40×40 원형 (li 너비에 무관하게 항상 정원) */
.mobile_search_overlay li.cal_day .cal-day-n {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  transition: background 0.12s ease;
  position: relative; z-index: 2; flex-shrink: 0;
}
.mobile_search_overlay li.cal_day:not(.notavail):hover .cal-day-n {
  background: var(--wh-brand-tint, #f3eefb);
}
.mobile_search_overlay li.cal_day:not(.notavail):active {
  transform: scale(0.88);
}
/* ─── 날짜 선택 스타일 (calendar_dual_wrapper 통일) ─── */
.mobile_search_overlay li.cal_day.is-selected .cal-day-n {
  background: #6800cd !important;
  color: #fff !important;
}
.mobile_search_overlay li.cal_day.in-range .range_bg,
.mobile_search_overlay li.cal_day.is-start .range_bg,
.mobile_search_overlay li.cal_day.is-end .range_bg {
  display: block !important;
}
.mobile_search_overlay li.cal_day.is-start .range_bg {
  left: 50%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}
.mobile_search_overlay li.cal_day.is-end .range_bg {
  right: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.mobile_search_overlay li.cal_day.is-start.is-end .range_bg {
  display: none !important;
}
.mobile_search_overlay li.cal_day.in-range .cal-day-n {
  color: #6800cd;
}

/* 달력 월 슬라이드 전환 */
@keyframes calSlideIn  { from { opacity:0; transform:translateX(20px);  } to { opacity:1; transform:translateX(0); } }
@keyframes calSlideOut { from { opacity:1; transform:translateX(0);      } to { opacity:0; transform:translateX(-20px); } }

/* ─── 지도보기 플로팅 버튼 ─── */
#btn-map-float {
  position: fixed;
  bottom: calc(var(--bottom-naverbar-height, 66px) + var(--safe-b, env(safe-area-inset-bottom, 0px)) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
  z-index: 1200;
  pointer-events: none;
  white-space: nowrap;
}
#btn-map-float.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#btn-map-float button {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 28px;
  background: var(--wh-brand-tint, #f3eefb);
  color: var(--wh-brand, #6800cd);
  border: 1px solid var(--wh-info-bd, #ddd0f5);
  border-radius: var(--wh-radius-pill, 999px);
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  cursor: pointer;
  box-shadow: var(--wh-shadow-hover, 0 4px 12px rgba(0,0,0,0.06));
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#btn-map-float button:active {
  transform: scale(0.96);
  box-shadow: var(--wh-shadow, 0 1px 3px rgba(0,0,0,0.04));
}
#btn-map-float .map-btn-spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: mapBtnSpin 0.7s linear infinite;
}
@keyframes mapBtnSpin { to { transform: rotate(360deg); } }
.cal-entering { animation: calSlideIn  0.24s ease forwards; }
.cal-exiting  { animation: calSlideOut 0.18s ease forwards; }

/* ─── 인원 카운터 버튼 ─── */
.mobile_search_overlay .btn_circle {
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
.mobile_search_overlay .btn_circle:not(:disabled):active {
  transform: scale(0.84) !important;
}

/* 모바일 검색 오버레이 필수 레이아웃: 외부 CSS 캐시/누락 시에도 깨지지 않게 고정 */
.mobile_search_overlay .m_top_nav {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 14px 20px !important;
  min-height: 56px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.mobile_search_overlay .m_top_nav .close_m {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #1d1d1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  padding: 0 !important;
}
.mobile_search_overlay .m_search_container {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.mobile_search_overlay .m_accordion_item {
  list-style: none !important;
  background: #fff !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 14px !important;
  margin: 0 0 10px !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.mobile_search_overlay .m_accordion_item.active {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.mobile_search_overlay .m_header {
  min-height: 56px !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.mobile_search_overlay .m_label {
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #6e6e73 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.mobile_search_overlay .m_accordion_item.active .m_label {
  font-size: 18px !important;
  color: #1d1d1f !important;
  font-weight: 700 !important;
}
.mobile_search_overlay .m_summary {
  color: #8e8e93 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}
.mobile_search_overlay .m_content {
  display: none !important;
  padding: 0 16px 16px !important;
  box-sizing: border-box !important;
}
.mobile_search_overlay .m_accordion_item.active .m_content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px 16px 16px !important;
}
.mobile_search_overlay .recommended_list h6 {
  margin: 14px 0 10px !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
}
.mobile_search_overlay .region_list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mobile_search_overlay .region_list .region {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 8px 4px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
.mobile_search_overlay .region_list .region::marker {
  content: "" !important;
}
.mobile_search_overlay .region-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  color: #1d1d1f !important;
}
.mobile_search_overlay .text_box {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.mobile_search_overlay .text_box .main_text {
  font-size: 15px !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.mobile_search_overlay .text_box .sub_text {
  margin-top: 3px !important;
  font-size: 13px !important;
  color: #6e6e73 !important;
  line-height: 1.25 !important;
}
.mobile_search_overlay #m_calendar_view {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.mobile_search_overlay .week_name,
.mobile_search_overlay .cal {
  list-style: none !important;
}
.mobile_search_overlay .week_name li,
.mobile_search_overlay .cal li {
  list-style: none !important;
}
.mobile_search_overlay .month_name {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
}
.mobile_search_overlay .m_search_footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  border-top: 1px solid #e5e5ea !important;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 24px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.mobile_search_overlay .btn_all_clear,
.mobile_search_overlay .btn_m_search {
  height: 48px !important;
  border-radius: var(--wh-radius-btn, 18px) !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.mobile_search_overlay .btn_all_clear {
  background: #fff !important;
  color: var(--wh-tx2, #4e5968) !important;
  border: 1px solid var(--wh-bd, rgba(0,0,0,0.06)) !important;
}
.mobile_search_overlay .btn_m_search {
  background: var(--wh-brand-tint, #f3eefb) !important;
  color: var(--wh-brand, #6800cd) !important;
  border: 1px solid var(--wh-info-bd, #ddd0f5) !important;
}

/* 숫자 변경 애니메이션 */
@keyframes countPop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.count-pop { animation: countPop 0.22s cubic-bezier(0.34,1.56,0.64,1); }

/* ─── 검색/삭제 버튼 ─── */
.btn_m_search {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}
.btn_m_search:active { transform: scale(0.95) !important; }
.btn_all_clear {
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.btn_all_clear:active { transform: scale(0.95) !important; }

/* ══════════════════════════════════════════