/**
 * Room detail mobile — Wooseok Stay space pilot (A→B)
 * Loads after /assets/css/room-mobile.css
 * Content rhythm: Inset/Stack/Inline. Safe-area (env/--safe-*) stays in room-mobile.css.
 */
#rm-wrap {
  background: var(--wh-bg, #f7f7f7) !important;
  color: var(--wh-tx, #191f28);
  font-family: var(--wh-ff, "Pretendard Variable", Pretendard, -apple-system, sans-serif);
}

.rm-nav {
  background: var(--wh-bg, #f7f7f7);
}

.rm-nav.scrolled {
  border-radius: 0 0 var(--wh-radius-lg, 20px) var(--wh-radius-lg, 20px);
  box-shadow: var(--wh-shadow-card, 0 2px 12px rgba(0, 0, 0, 0.06));
}

.rm-section,
.rm-card,
.rm-share-modal,
.rm-book-bar,
.rm-bottom-sheet {
  border-radius: var(--wh-radius-lg, 20px) !important;
}

.rm-share-modal {
  border-radius: var(--wh-radius-lg, 20px) var(--wh-radius-lg, 20px) 0 0 !important;
}

.room-photo-swiper .swiper-slide {
  border-radius: var(--wh-radius-md, 20px);
}

.rm-book-cta,
.rm-sticky-book-btn,
#rm-book-btn,
.rm-reserve-btn,
.rm-book-btn {
  border-radius: var(--wh-radius-btn, 18px) !important;
  padding: var(--wh-inset-squish-md, 10px 20px) !important;
}

.rm-review-photo,
.rvd-reply-trans,
.rvd-photo-item {
  border-radius: var(--wh-radius-md, 20px) !important;
  background: var(--wh-surface, #f4f5f7);
}

.rm-cal-day.selected,
.rm-cal-day.in-range {
  background: var(--wh-brand, #681DC7) !important;
}

.fee-adj-banner-icon {
  background: var(--wh-brand, #681DC7) !important;
}

.rm-trust-strip,
.rm-hl-cancel {
  border-radius: var(--wh-radius-md, 20px);
}

/* ── Stay listing stack / inset (content only; safe-area unchanged) ── */
.rm-section,
.rm-card {
  margin-top: var(--wh-stack-lg, 24px) !important;
  padding: var(--wh-inset-lg, 24px) !important;
}

.rm-section + .rm-section,
.rm-card + .rm-card {
  margin-top: var(--wh-stack-lg, 24px) !important;
}

.rm-highlights,
.rm-amen-grid,
.rm-host-block,
.rm-longstay-rules {
  gap: var(--wh-stack-md, 16px) !important;
}

.rm-chips,
.rm-tags,
.rm-spec-row,
.rm-nav-right {
  gap: var(--wh-inline-xs, 8px) !important;
}

.rm-chip,
.rm-tag,
.rm-spec-pill {
  padding: var(--wh-inset-squish-sm, 8px 16px) !important;
  gap: var(--wh-inline-xs, 8px) !important;
}

.rm-hl-item,
.rm-amen-item,
.rm-host-row {
  gap: var(--wh-inline-sm, 12px) !important;
}

/* Book bar: keep safe-area from room-mobile; only tighten horizontal inset */
.rm-book-bar {
  padding-left: var(--wh-inset-md, 16px) !important;
  padding-right: var(--wh-inset-md, 16px) !important;
}

.rm-running-head {
  letter-spacing: var(--wh-tracking-editorial, 0.06em);
}
.rm-title {
  font-family: var(--wh-ff-display, "SUIT Variable", SUIT, sans-serif);
  font-weight: var(--wh-fw-stay-name, 600);
  color: var(--wh-tx-stay-name, #333333);
}

/* 주소 + 상태 뱃지 — 제목 위 한 줄. 뱃지는 제목보다 작게 유지 */
#rm-wrap .rm-title-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--wh-inline-sm, 12px);
  row-gap: var(--wh-inline-xs, 8px);
  margin: 0 0 8px;
}
#rm-wrap .rm-title-head .rm-running-head {
  margin: 0;
}
#rm-wrap .rm-title-head .rm-title-badges {
  margin: 0;
}
html.rooms-force-desktop-ui #rm-wrap .rm-title-head {
  margin: 0 0 10px;
}

/* ════════════════════════════════════════════════════════════════════
   레퍼런스 정렬 파일럿 (2026-08-21) — 숙소 상세만
   벤치: reference/airbnb.md (잉크 #222222 무채 · weight 500–700 상한 ·
   자간 -0.44px≈-0.02em · 채색 1개) + reference/stayfolio.md (무채 사다리 + 채색 1개).
   #rm-wrap이 모달·시트까지 감싸므로 스코프 하나로 페이지 전체를 덮는다.
   Product(/backend)·다른 Stay 화면은 변경하지 않는다.
   ════════════════════════════════════════════════════════════════════ */

/* 1) 잉크 무채화 — 파랑 편차 제거. 대비는 현행 이상 (흰 카드 기준) */
#rm-wrap {
  --wh-tx: #1f1f1f;  /* was #191f28 (R-B -15) · 16.48:1 */
  --wh-tx2: #4a4a4a; /* was #4e5968 (R-B -26) · 8.86:1 (현행 7.11) */
  --wh-tx3: #666666; /* was #66707d (R-B -23) · 5.74:1 (현행 5.03) */
  --wh-tracking-stay-name: -0.02em;
}

/* 2) 무게 상한 700 — 가격·결제 숫자만 800 유지 */
#rm-wrap .rm-trust-title,
#rm-wrap .rm-ai-summary-label,
#rm-wrap .rm-house-rules-title,
#rm-wrap .rm-host-name,
#rm-wrap .rm-longstay-title,
#rm-wrap .rm-hl-title,
#rm-wrap .rm-desc-title,
#rm-wrap .rm-desc-more,
#rm-wrap .rm-amen-title,
#rm-wrap .rm-map-title,
#rm-wrap .rm-review-title,
#rm-wrap .wh-addon-section-title,
#rm-wrap .rm-df-date,
#rm-wrap .rm-sec-tab.is-active,
#rm-wrap .rm-dt-gallery-more,
#rm-wrap .rm-dt-inline-cal-title,
#rm-wrap .rmpol-eyebrow,
#rm-wrap .rmpol-title,
#rm-wrap .rmpol-body .cancelp_cont h2,
#rm-wrap .rmpol-body dt,
#rm-wrap #rm-price-modal .rmp-title,
#rm-wrap #rm-price-modal .rmp-row-total .rmp-label {
  font-weight: 700;
}

/* 3) 자간 — 하드코딩 -0.03em 잔여분을 Airbnb 상한으로 */
#rm-wrap .rm-desc-title,
#rm-wrap .rm-amen-title,
#rm-wrap .rm-bottom-total.is-total .rm-price-sale {
  letter-spacing: -0.02em;
}

/* 4) 배지 — 채색은 정부공인 하나. 나머지는 무채 pill (의미는 글자로)
      면은 흰색이 아니라 `--wh-surface`. 흰 카드(PC `.rm-title-section`) 위에서
      흰 면은 1.00:1로 pill 형태가 사라진다. `#f0f0f0`은 1.14:1
      (Airbnb 중립 칩 `#f2f2f2` 1.12:1과 같은 수준) · 글자 7.78:1 */
#rm-wrap .rm-badge,
#rm-wrap .rm-badge-premiumhost,
#rm-wrap .rm-badge-instantbook,
#rm-wrap .rm-badge-popular,
#rm-wrap .rm-badge-new,
#rm-wrap .rm-badge-selfcheckin {
  background: var(--wh-surface, #f0f0f0);
  color: var(--wh-tx2, #4a4a4a);
  border-color: var(--wh-bd, rgba(0, 0, 0, 0.06));
}
#rm-wrap .rm-badge-certified {
  background: var(--wh-brand-tint, #F3EEFA);
  color: var(--wh-brand, #681DC7);
  border-color: var(--wh-info-bd, #D9CCF0);
}

/* 장기숙박 규칙 pill — 배지와 같은 무채 계열 · weight는 배지 규격 600.
   컨테이너가 `--wh-info-bg` `#F3EEFA`라 흰 면이 유지돼도 형태가 읽힌다 */
#rm-wrap .rm-longstay-rule {
  color: var(--wh-tx2, #4a4a4a);
  border-color: var(--wh-bd-hairline, #dfe0e2);
  font-weight: 600;
}

/* ── 분리 채점 반영 (2026-08-21) — code-review Major 5건 ─────────────── */

/* M1) 무게 900 잔존 — 페이지 최대 활자(54px)이고 가격·결제 숫자가 아니다 */
#rm-wrap .rm-review-score-big {
  font-weight: 700;
}

/* M3) 추천 카드 배지도 같은 무채 체계로. room.php 인라인 `<style>`이
       파일럿보다 뒤에 오지만 `#rm-wrap`(1,1,0)이 단일 클래스(0,1,0)를 이긴다.
       `.alt-*`는 상세 전용 사본이라 홈·검색·위시 ListingCard 계약과 무관.
       이쪽은 사진 위(`.alt-r26-badges` absolute)라 흰 면이 맞다 — 제목 줄 배지와
       달리 배경이 사진이므로 흰 면이 형태를 만든다 (travel.md `.wh-premium-mark`) */
#rm-wrap .alt-r26-badge,
#rm-wrap .alt-r26-badge-superhost,
#rm-wrap .alt-r26-badge-instant,
#rm-wrap .alt-r26-badge-popular,
#rm-wrap .alt-r26-badge-new,
#rm-wrap .alt-r26-badge-selfcheckin {
  background: var(--wh-card, #fff);
  color: var(--wh-tx2, #4a4a4a);
  border-color: var(--wh-bd-hairline, #dfe0e2);
}

/* M4) 하드코딩 쿨그레이·잉크 사다리 통일 (추천 카드 + 로컬가이드 위젯)
       `.alt-r26-rating-n` `#9ca3af`는 2.54:1로 AA 실패였다 → 5.74:1 */
#rm-wrap .alt-r26-rating-n,
#rm-wrap .alt-r26-meta {
  color: var(--wh-tx3, #666666);
}
#rm-wrap .alt-r26-tag,
#rm-wrap .lg-wcat,
#rm-wrap .lg-list-desc {
  color: var(--wh-tx2, #4a4a4a);
}
#rm-wrap .alt-r26-rating,
#rm-wrap .alt-r26-name,
#rm-wrap .lg-list-name,
#rm-wrap .lg-widget-more-btn,
#rm-wrap .rm-df-date,
#rm-wrap .rm-date-title,
#rm-wrap .rm-map-title,
#rm-wrap .rm-map-city,
#rm-wrap .rm-share-title,
#rm-wrap .rm-review-title,
#rm-wrap .rm-review-score-big,
#rm-wrap .rmpol-title,
#rm-wrap #rm-price-modal .rmp-title {
  color: var(--wh-tx, #1f1f1f);
}

/* M1 보강) 로컬가이드 섹션 제목도 700 상한 */
#rm-wrap .lg-widget-title {
  font-weight: 700;
}

/* M5) 자간 비대칭 — desc·amen과 같은 규칙으로 묶여 있던 review만 -0.03em 잔존 */
#rm-wrap .rm-review-title {
  letter-spacing: -0.02em;
}

/* ── 레퍼런스 대조 2차 (2026-08-21) — 브라우저 실측 후 ─────────────────
   PC는 이미 소제목 20px(본문 15px 대비 1.33배)로 레퍼런스 범위(스테이폴리오
   1.25 / 에어비앤비 1.375) 안이었고, 모바일만 18px = 1.2배였다. 모바일을 PC와
   같은 20px로 맞춘다. 전용 텍스트 토큰이 없어(--wh-text-lg 17 / -section 22)
   20px을 직접 쓴다.                                                     */
#rm-wrap .rm-desc-title,
#rm-wrap .rm-amen-title,
#rm-wrap .rm-review-title,
#rm-wrap .rm-house-rules-title {
  font-size: 20px;
}

/* 사진 radius — 실측 20px은 두 레퍼런스(스테이폴리오 4px · 에어비앤비 갤러리
   컨테이너 12px)보다 크고 앱 카드처럼 읽힌다. 사진만 12px로 내린다.
   카드·시트·버튼 radius는 건드리지 않는다 (`wooseok.md` §6 스케일 유지). */
#rm-wrap .room-photo-swiper .swiper-slide {
  border-radius: 12px;
}
#rm-wrap .rm-dt-gallery-grid .rm-dt-gi:first-child {
  border-radius: 12px 0 0 12px;
}
#rm-wrap .rm-dt-gallery-grid .rm-dt-gi:nth-child(2) {
  border-radius: 0 12px 0 0;
}
#rm-wrap .rm-dt-gallery-grid .rm-dt-gi:nth-child(3) {
  border-radius: 0 0 12px 0;
}

/* ── 남은 보라 면 정리 ─────────────────────────────────────────────────
   Airbnb 「Rausch 외 액센트 추가 금지 · 0% colorfulness는 의도」를 면에도 적용.
   실측 결과 한 화면에 보라 면이 7~8개였고, 제목 바로 아래 trust strip(71px)이
   사진·제목보다 시각적으로 앞서 「서비스 공지」 톤을 만들었다.
   보라를 남기는 곳: Primary CTA · 정부공인 배지 · accent 버튼(인터랙션) ·
   할인 배지 · focus ring · 활성 탭 · 관리자 상태 칩(호스트 전용).
   면적을 내리는 곳: 아래. 아이콘 글리프 색은 brand로 남겨 의미를 유지한다.  */
#rm-wrap .rm-trust-strip,
#rm-wrap .rm-ai-summary,
#rm-wrap .rm-longstay {
  background: var(--wh-surface, #f0f0f0);
  border-color: var(--wh-bd-hairline, #dfe0e2);
}
#rm-wrap .rm-df-icon,
#rm-wrap .rm-hl-policy .rm-hl-ico,
#rm-wrap .lg-list-thumb {
  background: var(--wh-surface, #f0f0f0);
}
#rm-wrap .rm-df-pill {
  background: var(--wh-surface, #f0f0f0);
  color: var(--wh-tx2, #4a4a4a);
}
#rm-wrap .lg-menu-chip {
  background: var(--wh-surface, #f0f0f0);
  border-color: var(--wh-bd-hairline, #dfe0e2);
  color: var(--wh-tx2, #4a4a4a);
}

/* ── 다국어 가로 넘침 방지 (2026-08-22) ──────────────────────────────────
   `room-mobile.css`가 `word-break: keep-all`을 언어 구분 없이 쓴다. CJK에서
   keep-all은 문자 사이 줄바꿈을 금지해 min-content가 문장 전체 폭이 된다.
   **`room-mobile.css`는 앱 WebView와 같은 표면이라 원본을 손대지 않고**
   뒤에 로드되는 이 파일럿 파일에서 스코프 오버라이드만 한다.
   그리드(`repeat(N, 1fr)` 6곳)는 달력 7열처럼 폭이 고정된 것이 섞여 있어
   셀렉터를 분리한 뒤 별도로 판단한다 — 여기서는 건드리지 않는다.
   SSOT: docs/design-md/wooseok.md §3 「다국어 줄바꿈·그리드」 */
html:not(:lang(ko)) #rm-wrap * {
  word-break: normal;
}

html:not(:lang(ko)) #rm-wrap :is(h1, h2, h3, h4, p, li, span, a, div, button) {
  overflow-wrap: break-word;
}

/* 그리드 6곳 중 **텍스트가 들어가는 하나만** 전환 (2026-08-22 분류 결과)
   전환: `.rm-share-grid` 4열 — 각 셀에 `.rm-share-name`(`translate()` 라벨)이 들어가
         일본어·인도네시아어에서 라벨이 길어지면 트랙이 밀린다.
         `overflow-wrap: break-word`는 min-content를 줄이지 않으므로 트랙 상한이 필요하다.
   유지: `.wh-cal-weekdays` `.wh-cal-grid` 7열(달력 — 요일 1자·날짜 숫자, 고정 성격) ·
         `.rvd-photos` 4/2/3열(후기 사진 — 이미지 그리드, 텍스트 없음).
         이 넷은 min-content가 커질 수 없어 바꿀 이유가 없다.
   `room-mobile.css` 원본은 앱 WebView 표면이라 손대지 않고 여기서 덮는다. */
#rm-wrap .rm-share-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 5) 태그 칩의 Tailwind 쿨그레이(#4b5563) 제거 */
#rm-wrap .room-tag-item {
  color: var(--wh-tx2, #4a4a4a);
}

/* ── 레이아웃 리듬 (2026-08-21) — SSOT 위반 2건 수정 ─────────────────
   근거: wooseok.md §5 「external ≥ internal — 섹션 사이 ≥ 카드 안」
        personality.md §4 제11항 · patterns/section-stack.md            */

/* 6) 본문 measure — PC에서 한 줄이 780px(약 95자)까지 늘어났다.
      `.rm-dek`의 기존 40em 선례를 장문 본문에도 적용. */
#rm-wrap .rm-desc-text,
#rm-wrap .rm-ai-summary-body {
  max-width: 40em;
}

/* 7) PC 섹션 간격 — 원본은 카드 사이 16px인데 카드 안쪽이 24px이라
      external < internal 이었다. 레퍼런스 실측(2026-08-21): 스테이폴리오 상세
      섹션 사이 48px, 에어비앤비 96px(상단 64px). 우리는 에디토리얼 쪽인
      **48px**로 맞춘다 (카드 inset 24px의 2배 · 첫 안 28px에서 상향). */
@media (min-width: 1024px) {
  html.rooms-force-desktop-ui #rm-wrap .rm-title-section,
  html.rooms-force-desktop-ui #rm-wrap .rm-host,
  html.rooms-force-desktop-ui #rm-wrap .rm-highlights,
  html.rooms-force-desktop-ui #rm-wrap .rm-desc-section,
  html.rooms-force-desktop-ui #rm-wrap .rm-amen-section,
  html.rooms-force-desktop-ui #rm-wrap .rm-map-section,
  html.rooms-force-desktop-ui #rm-wrap .rm-review-section,
  html.rooms-force-desktop-ui #rm-wrap .rm-content > .wh-addon-card,
  html.rooms-force-desktop-ui #rm-wrap .rm-content > div:has(.rm-desc-text),
  html.rooms-force-desktop-ui #rm-wrap .rm-content > div:has(.rm-map-container) {
    margin-bottom: var(--wh-space-5xl, 48px);
  }
}