/**
 * wh-side-menu.css — 모바일 햄버거 드로어(#r26SideMenu) SSOT
 * 뷰: includes/r26_side_menu.php (홈 · summer-deal · busan · 검색 · 숙소 상세)
 * 이 파일이 include 에서 직접 로드되므로 index-r26.css 없이도 동작한다.
 * a11y: 터치 44px · focus ring · 대비 4.5:1 (a11y.md §2·§3·§4)
 */
.r26-side-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 9998;
  opacity: 0; visibility: hidden;
}
.r26-side-overlay.ready { transition: opacity 0.28s ease, visibility 0.28s ease; }
.r26-side-overlay.on { opacity: 1; visibility: visible; }

#r26SideMenu {
  position: fixed; top: 0; left: 0; right: auto;
  margin: 0;
  width: 292px; height: 100vh;
  background: var(--wh-bg, #f7f7f7);
  z-index: 9999;
  box-shadow: var(--wh-shadow-hover, 0 4px 12px rgba(0,0,0,0.06));
  border-radius: 0 var(--wh-radius-lg, 24px) var(--wh-radius-lg, 24px) 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.32s;
}
#r26SideMenu.on {
  transform: translateX(0); visibility: visible;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s;
}

/* 닫기 버튼 바 */
.r26-side-topbar {
  display: flex; justify-content: flex-end;
  padding: 8px 8px 0;
  flex-shrink: 0;
}
.r26-side-close {
  display: flex; align-items: center; justify-content: center;
  width: var(--wh-touch-min, 44px); height: var(--wh-touch-min, 44px);
  border-radius: 50%;
  background: var(--wh-surface, #f4f5f7); border: none; cursor: pointer;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.r26-side-close:hover { background: var(--wh-bd, rgba(0,0,0,0.06)); }
.r26-side-close svg { fill: var(--wh-tx2, #4e5968); }

/* 프로필 섹션 */
.r26-side-profile {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 20px 20px;
  text-decoration: none;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.r26-side-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--wh-brand, #681DC7);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  flex-shrink: 0; letter-spacing: 0;
}
.r26-side-avatar-guest { background: var(--wh-surface, #f4f5f7); }
/* 구 폐기 회색(2.79:1) → --wh-tx3 (a11y.md §2 비텍스트 3:1) */
.r26-side-avatar-guest svg { fill: var(--wh-tx3, #66707d); }
.r26-side-avatar-photo {
  background: var(--wh-card, #fff);
  border: 2px solid var(--wh-brand, #681DC7);
  box-sizing: border-box;
}
.r26-side-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.r26-side-user-info { flex: 1; min-width: 0; }
.r26-side-username {
  font-size: 17px; font-weight: 600; color: var(--wh-tx, #191f28);
  letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.r26-side-profile { text-decoration: none; }
.r26-side-user-sub {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 13px; color: var(--wh); font-weight: 500;
  padding: 3px 8px 3px 10px; border-radius: 20px;
  transition: background 0.18s ease;
  background: rgba(104, 29, 199, 0.1);
}
.r26-side-user-sub svg { fill: var(--wh); transition: transform 0.18s ease; }
.r26-side-login-cta {
  display: inline-flex; align-items: center;
  min-height: var(--wh-touch-min, 44px);
  padding: 0 20px; border-radius: 22px;
  background: var(--wh); color: #fff;
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 스크롤 콘텐츠 */
.r26-side-content {
  flex: 1; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.r26-side-content::-webkit-scrollbar { display: none; }

/* 그룹 레이블 — 구 #8e8e93 은 3.04:1 로 AA 미달 */
.r26-side-group-label {
  font-size: 12px; font-weight: 600; color: var(--wh-tx3, #66707d);
  padding: 14px 20px 5px;
  margin: 0;
}

/* 그룹 카드 (iOS grouped table) */
.r26-side-group {
  background: #fff;
  border-radius: 12px;
  margin: 0 12px 2px;
  overflow: hidden;
}

/* 메뉴 아이템 */
.r26-side-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--wh-touch-min, 44px);
  padding: 12px 16px;
  color: var(--wh-tx, #191f28); text-decoration: none;
  font-size: 15px; font-weight: 400;
  text-align: left;
  border: 0;
  border-bottom: 0.5px solid rgba(60,60,67,0.12);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.r26-side-item:last-child { border-bottom: none; }
.r26-side-item:active { background: #ebebf0; }
/* 구 #c7c7cc 은 1.68:1 — 비텍스트 3:1 미달 */
.r26-side-chevron { fill: var(--wh-tx3, #66707d); flex-shrink: 0; }

/* 하단 */
.r26-side-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  padding: 6px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid rgba(60,60,67,0.18);
  flex-shrink: 0;
}
.r26-side-footer a {
  display: inline-flex; align-items: center;
  min-height: var(--wh-touch-min, 44px);
  font-size: 13px; color: var(--wh-tx3, #66707d); text-decoration: none;
}

/* focus 가시성 — 드로어는 포커스 트랩 안이라 ring이 반드시 보여야 한다 (a11y.md §3) */
#r26SideMenu a:focus-visible,
#r26SideMenu button:focus-visible,
.r26-header-btn:focus-visible {
  outline: 2px solid var(--wh-focus-ring, #681DC7);
  outline-offset: 2px;
}

/* 앱 WebView — height:100vh 라 노치에 닫기 버튼이 파고든다 */
html.wh-wehome-app #r26SideMenu {
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #r26SideMenu,
  .r26-side-overlay.ready { transition: none; }
}

html.wh-reduce-motion #r26SideMenu,
html.wh-reduce-motion .r26-side-overlay.ready { transition: none; }

/* PC hover — 모바일 WebView 에 hover 를 복제하지 않는다 (craft.md §5) */
@media (hover: hover) and (pointer: fine) {
  .r26-side-profile:hover .r26-side-user-sub svg { transform: translateX(2px); }
  .r26-side-item:hover { background: #f9f9fb; }
  .r26-side-footer a:hover { color: var(--wh-tx2, #4e5968); }
  .wh-nav-menu-btn:hover { background: var(--wh-surface, #f4f5f7); }
}

/* ── 트리거 버튼 (검색·숙소 상세 헤더 공용) ──
   형제 컨트롤이 36px 라 시각 크기는 맞추고, 히트 영역만 44px 로 넓힌다
   (a11y.md §4 — 44px 불가 시 spacing 예외) */
.wh-nav-menu-btn {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wh-bg, #f7f7f7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wh-nav-menu-btn svg { fill: var(--wh-tx, #191f28); }
.wh-nav-menu-btn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--wh-touch-min, 44px);
  height: var(--wh-touch-min, 44px);
  transform: translate(-50%, -50%);
}
.wh-nav-menu-btn:focus-visible {
  outline: 2px solid var(--wh-focus-ring, #681DC7);
  outline-offset: 2px;
}