/**
 * _wh-bridge.css
 * 위홈 CSS 변수 브릿지 + 탭·empty·nav 공통 (Toss SSOT: wh-tokens.css)
 * Docs: docs/design-md/legacy-bridge.md
 * v20260704-bridge
 */

@import url('wh-tokens.css');

:root {
  /* ─────────────────────────────────────────────
   * style_common.css의 기존 변수를 Toss 토큰으로 재매핑
   * ───────────────────────────────────────────── */
  --wh: var(--wh-brand, #6800cd);
  --wh-purple: var(--wh-brand, #6800cd);
  --wh-light: var(--wh-brand-tint, #f3eefb);

  --nav-h: var(--nav-clean-height, 50px);
  --bar-h: var(--bottom-naverbar-height, 66px);
  --wh-page-nav-h: 76px;

  /* legacy label → Toss text tokens */
  --wh-label: var(--wh-tx, #191f28);
  --wh-label-2: var(--wh-tx2, #4e5968);
  --wh-label-3: var(--wh-tx3, #8b95a1);
  --wh-label-4: #b0b8c1;
  --wh-bg: #f2f4f6;

  --txt: var(--wh-tx, #191f28);
  --txt2: var(--wh-tx2, #4e5968);
  --txt3: var(--wh-tx3, #8b95a1);
  --border: var(--wh-bd, rgba(0, 0, 0, 0.06));
  --bg: var(--wh-bg, #f2f4f6);
  --card: #ffffff;

  /* ─────────────────────────────────────────────
   * 상태 컬러 토큰 (toss semantic SSOT)
   * ───────────────────────────────────────────── */
  --color-pending: var(--wh-warn-tx, #92400e);
  --color-accepted: var(--wh-ok, #0f766e);
  --color-declined: var(--wh-err-tx, #b91c1c);
  --color-orange: #f97316;

  /* ─────────────────────────────────────────────
   * 레이아웃 / 컴포넌트 토큰
   * ───────────────────────────────────────────── */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-btn: 18px;

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);

  /* 카드 컴포넌트 공통 — 여기 하나만 바꾸면 acc-card, 알림설정 패널 등 전체 반영 */
  --acc-card-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
  --acc-card-radius: 20px;

  --gap-sm: 8px;
  --gap: 12px;
  --gap-lg: 20px;

  --padding-page: 14px;

  /* iOS/Android WebView safe area (viewport-fit=cover) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tab-total-h: calc(var(--bottom-naverbar-height, 66px) + var(--safe-b));

  /* ─────────────────────────────────────────────
   * 숙소 카드 타이포그래피 토큰
   * 사용처: r26-prop-card (메인/위시리스트/검색)
   * ───────────────────────────────────────────── */
  --card-fs-title: 14px;
  /* 숙소명 */
  --card-fs-tag: 10px;
  /* 편의시설 태그 칩 */
  --card-fs-loc: 12px;
  /* 위치 */
  --card-fs-rating: 12px;
  /* 평점 */
  --card-fs-price: 15px;
  /* 가격 숫자 */
  --card-fs-unit: 12px;
  /* 가격 단위 (/박) */
  --card-fs-badge: 11px;
  /* 슈퍼호스트 등 뱃지 */
}

/* PC — 768px 이상 */
@media (min-width: 768px) {
  :root {
    --card-fs-title: 15px;
    --card-fs-tag: 11px;
    --card-fs-loc: 13px;
    --card-fs-rating: 13px;
    --card-fs-price: 16px;
    --card-fs-unit: 12px;
    --card-fs-badge: 11px;
  }
}

/* 소형 모바일 — 375px 이하 */
@media (max-width: 375px) {
  :root {
    --card-fs-title: 13px;
    --card-fs-tag: 9px;
    --card-fs-loc: 11px;
    --card-fs-rating: 11px;
    --card-fs-price: 14px;
    --card-fs-unit: 11px;
    --card-fs-badge: 10px;
  }
}

/* ══════════════════════════════════════════════════════════
 * 상단 페이지 nav — solid (no glass)
 * ══════════════════════════════════════════════════════════ */

.wh-page-nav-wrap {
  background: var(--wh-bg, #f2f4f6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.wh-page-nav {
  border-bottom: 1px solid var(--wh-bd, rgba(0, 0, 0, 0.06));
}

.wh-page-nav-wrap .wh-nav-title {
  color: var(--wh-tx, #191f28);
  font-weight: 800;
}

/* ══════════════════════════════════════════════════════════
 * 탭 칩 SSOT (.wh-tabs · .ib-tab · .wl-tab 공통)
 * ══════════════════════════════════════════════════════════ */

.wh-tabs,
.ib-tabs-wrap,
.wl-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  margin-top: 0;
  background: var(--wh-bg, #f2f4f6);
  border-bottom: none;
  position: relative;
  top: auto;
  z-index: 1;
  flex-shrink: 0;
}

.wl-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  scroll-behavior: smooth;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -4px;
  margin-right: -4px;
}

.wl-tabs::-webkit-scrollbar {
  display: none;
}

.wh-tab,
.ib-tab,
.wl-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wh-tx3, #8b95a1);
  border: 1px solid var(--wh-bd, rgba(0, 0, 0, 0.06));
  border-radius: var(--wh-radius-pill, 999px);
  background: var(--wh-card, #fff);
  cursor: pointer;
  font-family: 'Pretendard', -apple-system, sans-serif;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.wh-tab {
  flex: 1;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid var(--wh-bd, rgba(0, 0, 0, 0.06));
}

.wh-tab.active,
.ib-tab.active,
.wl-tab.active {
  background: var(--wh-brand-tint, #f3eefb);
  color: var(--wh-brand, #6800cd);
  border-color: var(--wh-info-bd, #ddd0f5);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
 * 비로그인 유도 섹션 (공통 컴포넌트: auth_placeholder.php)
 * ══════════════════════════════════════════════════════════ */

/* 래퍼 */
.wh-auth-placeholder {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 아이콘 */
.wh-auth-icon {
  color: #d0d0d8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.wh-auth-icon .material-symbols-outlined {
  font-size: 56px;
}

/* 제목 */
.wh-auth-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--wh-tx, #191f28);
  margin: 0;
  line-height: 1.3;
}

/* 설명 */
.wh-auth-desc {
  font-size: 14px;
  color: var(--txt2, #6b7280);
  margin: 0;
  line-height: 1.6;
}

/* 로그인 버튼 */
.wh-auth-login-btn {
  margin-top: 6px;
  background: var(--wh-brand, #6800cd);
  color: #fff;
  border: none;
  border-radius: var(--wh-radius-btn, 18px);
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  letter-spacing: -0.01em;
}

.wh-auth-login-btn:hover,
.wh-auth-login-btn:focus,
.wh-auth-login-btn:active {
  color: #fff;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
 * 빈 상태 / 예약 유도 섹션 (공통 컴포넌트: .wh-empty-state)
 * 사용처: inbox (메시지 없음), travel (예약 유도)
 * ══════════════════════════════════════════════════════════ */

.wh-empty-state {
  margin: 60px 0 8px;
  padding: 28px 20px 24px;
  text-align: center;
}

.wh-empty-icon {
  width: 60px;
  height: 60px;
  background: var(--wh-card, #fff);
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 28px;
  line-height: 1;
  color: var(--wh-tx3, #8b95a1);
  box-shadow: var(--wh-shadow, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.wh-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--wh-tx, #191f28);
  margin: 0 0 6px;
  line-height: 1.35;
}

.wh-empty-desc {
  font-size: 14px;
  color: var(--wh-tx2, #4e5968);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* ── 위홈 공식 채널 답장 불가 안내 */
.wh-noreply-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  padding-bottom: calc(14px + var(--safe-b)) !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e5ea !important;
  font-size: 13px !important;
  color: #6e6e73 !important;
  line-height: 1.55 !important;
  box-sizing: border-box !important;
  position: fixed !important;
  bottom: var(--safe-b) !important;
  left: 0 !important;
  right: 0 !important;
  max-width: var(--max-width-in-mobile-only-mode, 720px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 120 !important;
}
.wh-noreply-icon {
  font-size: 18px !important;
  flex-shrink: 0 !important;
  color: #8e8e93 !important;
  font-variation-settings: 'FILL' 1 !important;
}
.wh-noreply-text {
  flex: 1 !important;
}
.wh-noreply-link {
  color: #0071e3 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.wh-noreply-link:hover {
  text-decoration: none !important;
  color: var(--wh-link, #0071e3) !important;
}
.wh-noreply-bar--desktop {
  position: static !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--wh-bg, #f2f4f6) !important;
}

/* ══ mobile-toss-pages (merged — Mutagen 신규파일 우회) ══ */
div#content.book.reservation,
div#content.payment-select,
#rm-wrap,
.book-result-wrap,
div#content.book-result,
.host-cert-page,
.acc-wrap {
  background: var(--wh-bg, #f2f4f6) !important;
}
.pay-btn,
.signup-submit-btn,
main.booking.center a.btn.btn_pay,
main.booking.center #btn_pay,
.wh-btn,
.wh-btn.wh-btn--primary {
  border-radius: var(--wh-radius-btn, 18px) !important;
}
#cancel_by_checkin .info > dl {
  border-left: none !important;
  border: 1px solid var(--wh-sep-opaque, #e5e8eb) !important;
  border-radius: var(--wh-radius-md, 16px) !important;
}
#cancel_by_checkin .info > dl:has(> dt.color-red) {
  border-color: rgba(22, 163, 74, 0.35) !important;
  background: rgba(22, 163, 74, 0.06) !important;
}
.itin-status-banner {
  border-left: none !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border-radius: var(--wh-radius-md, 16px) !important;
}
.wh-day-range-s,
.wh-day-range-e {
  background: rgba(104, 0, 205, 0.12) !important;
}
#content.book.reservation .pay-card {
  border-radius: var(--wh-radius-lg, 20px) !important;
  box-shadow: var(--wh-shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06)) !important;
  border: 1px solid var(--wh-sep-opaque, #e5e8eb);
}
#content.book.reservation .pay-sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid var(--wh-sep-opaque, #e5e8eb) !important;
}
div#content.payment-select .ps-section {
  border-radius: var(--wh-radius-lg, 20px) !important;
}
div#content.payment-select .ps-saved-badge {
  border-radius: var(--wh-radius-sm, 16px) !important;
}
#content.signup-wrap.login-toss-flat {
  background: var(--wh-bg, #f2f4f6) !important;
}
body.search-page,
.search-page #content {
  background: var(--wh-bg, #f2f4f6) !important;
}
.pay-body a:hover,
.ps-terms-text a:hover,
.agree-text a:hover {
  text-decoration: none !important;
}

/* ══ travel list — 앱 리뷰 배너 (pages/travel.css Alias=wehomepreview 우회) ══ */
.tl-app-review-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--wh-card, #fff);
  border: 1px solid var(--wh-bd, rgba(0, 0, 0, 0.06));
  border-radius: var(--wh-radius-md, 16px);
  text-decoration: none;
  box-shadow: var(--wh-shadow, 0 2px 8px rgba(0, 0, 0, 0.03));
}
.tl-app-review-banner__icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--wh-brand-tint, #f3eefb);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-app-review-banner__icon {
  font-size: 22px;
  color: var(--wh-brand, #6800cd);
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}
.tl-app-review-banner__text {
  flex: 1;
  min-width: 0;
}
.tl-app-review-banner__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--wh-tx, #191f28);
}
.tl-app-review-banner__desc {
  display: block;
  font-size: 12px;
  color: var(--wh-tx2, #4e5968);
  margin-top: 2px;
}
.tl-app-review-banner__cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--wh-brand, #6800cd);
  flex-shrink: 0;
}
.tl-app-review-banner:hover,
.tl-app-review-banner:focus,
.tl-app-review-banner:active {
  text-decoration: none;
}