/* =========================================
   공용 바텀시트 컴포넌트 — <b>이 파일이 유일한 주인이다.</b>
   시트를 쓰는 화면은 페이지 CSS 보다 먼저 이 파일을 링크한다.

   2026-09-22 까지 같은 컴포넌트가 detail.css 에도 통째로 복사돼 있었고 값이 갈라져 있었다
   (스크림 rgba(0,0,0,.45) vs var(--scrim) · 높이 94vh vs auto ·
    .sheet--auto 가 booking.css 70vh / 여기 86vh 라 같은 시트가 화면마다 다른 높이였다).
   페이지별 차이는 아래 변형(--full · --auto · __scroll--plain · __scroll--pad)으로 둔다 —
   기본형을 다시 적지 않는다.

   ※ search.html 의 .sheet 는 이 컴포넌트가 아니다 — 지도 위에 붙는 목록 패널이고,
     그 화면의 시트는 .fsheet 라는 다른 모양이다(css/search.css).
========================================= */
.sheet-backdrop{position:fixed;inset:0;z-index:100;background:var(--scrim);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .28s ease}
.sheet-backdrop.on{opacity:1}
.sheet{position:relative;width:100%;max-width:var(--app-max);background:var(--white);
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
/* 내용만큼만 — 목록·안내처럼 길이가 들쭉날쭉한 시트 */
.sheet--auto{height:auto;max-height:86vh;max-height:86dvh}
/* 거의 전체 화면 — 객실 상세처럼 한 화면을 통째로 쓰는 시트 */
.sheet--full{height:94vh;height:94dvh}
.sheet-backdrop.on .sheet{transform:translateY(0)}
/* pill 스타일은 공통 tokens.css — 여기선 위치만 */
.sheet__handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2}
/* 못 내리는 시트는 손잡이도 감춘다 — 내릴 수 있는 것처럼 보이면 안 된다 */
.sheet-backdrop[data-sheet-locked] .sheet__handle{display:none}
.sheet__head{flex:none;display:flex;align-items:center;justify-content:space-between;height:56px;
  padding:8px 16px 0;background:var(--white);border-radius:20px 20px 0 0;margin-top:24px}
.sheet__x{width:44px;height:44px;margin-right:-12px;display:grid;place-items:center;color:var(--g900)}
.sheet__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:20px}
/* 안쪽 구역이 제 여백을 갖고 오는 시트(객실 상세) — 스크롤 칸은 배경만 깐다 */
.sheet__scroll--plain{display:block;padding:0;gap:0;background:var(--g50)}
.sheet__cta{flex:none;background:var(--white);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 4px rgba(17,17,17,.12)}
/* 등록/적용 버튼은 공통 .btn(.btn-cta .btn-primary .btn-block) 사용 */

/* ---------- 본인인증 시트 (js/identity.js 가 마크업을 만든다) ----------
   예약 화면과 마이페이지가 같이 쓴다. booking.css 에 있던 .bk-verify·.bk-err 를 옮긴 것이다 —
   마이페이지는 booking.css 를 싣지 않는다 */
.idv{display:flex;flex-direction:column;gap:16px;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.idv__acts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.idv-err{display:none;font-size:13px;color:var(--red-500);letter-spacing:-.3px}
.idv-err--show{display:block}
/* 되돌릴 수 없는 거절(나이 등)은 여기 그리지 않는다 — 시트를 닫고 EUM.alert 로 세운다.
   날짜를 뺏겼을 때와 같은 창이라야 한 흐름에서 거절이 하나로 보인다(js/identity.js 의 blocked) */

/* ---------- 마케팅 수신 채널 시트 ---------- */
/* 본문의 .sect 와 같은 간격을 낸다 — 같은 .srow 가 시트 안에서만 다르게 보이면 안 된다 */
.mkt-channels{display:flex;flex-direction:column;gap:8px}

/* ---------- 후기 작성 시트 ---------- */
.rw-target{display:flex;gap:12px;align-items:center;background:var(--g50);border-radius:var(--radius-md);padding:12px}
/* 썸네일은 공통 .thumb .thumb--48 (tokens.css) 사용 */
.rw-target__name{font-size:15px;font-weight:700;color:var(--g900);letter-spacing:-.375px}
.rw-target__sub{font-size:13px;color:var(--g500);letter-spacing:-.3px;margin-top:2px}
.rw-stars{display:flex;justify-content:center;gap:4px}
.rw-star{width:44px;height:44px;display:grid;place-items:center;font-size:32px;color:var(--g200);background:none}
.rw-star.on{color:var(--blue-500)}
.rw-stars__label{text-align:center;font-size:13px;color:var(--g500);letter-spacing:-.325px;margin-top:8px}
/* 별점을 안 고른 채 글을 쓰기 시작하면 이 줄이 빨개진다 — 등록이 왜 안 되는지를 그 자리에서 알려 준다 */
.rw-stars__label.is-warn{color:var(--red-500)}
.rw-text{min-height:120px;border:1px solid var(--g200);border-radius:var(--radius-base);padding:12px;
  font-family:inherit;color:var(--g900);letter-spacing:-.375px;line-height:1.5;resize:none;width:100%}
.rw-text::placeholder{color:var(--g400)}
.rw-text:focus{outline:none;border-color:var(--blue-500)}
/* 글자 수 줄 — 왼쪽은 '몇 자 더 써야 하는지', 오른쪽은 지금 글자 수 */
.rw-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-14px}
.rw-hint{font-size:13px;color:var(--g500);letter-spacing:-.325px;line-height:18px}
.rw-count{text-align:right;font-size:13px;color:var(--g400);flex:none}
.rw-attach{height:48px;border:1px dashed var(--g300);border-radius:var(--radius-base);background:var(--white);
  font-size:14px;font-weight:600;color:var(--g500);display:flex;align-items:center;justify-content:center;gap:6px}
.rw-attach:disabled{opacity:.5}
.rw-file{display:none}
/* 올린 사진 */
.rw-photos{display:flex;gap:8px;flex-wrap:wrap}
.rw-photo{position:relative;width:72px;height:72px;border-radius:var(--radius-base);overflow:hidden;background:var(--g50)}
.rw-photo img{width:100%;height:100%;object-fit:cover}
.rw-photo__x{position:absolute;right:2px;top:2px;width:22px;height:22px;border-radius:50%;
  background:rgba(17,17,17,.55);color:var(--white);display:grid;place-items:center;font-size:12px}

/* =========================================
   날짜·인원 선택 시트 (공용 바텀시트)
   - 날짜: 월별 세로 스크롤 범위 캘린더(.caldate / .calmonth / .cal__*)
   - 인원: 스텝퍼(.stepper) / .counts
   - 내부 컴포넌트가 자체 16px 좌우 여백을 가지므로 스크롤 컨테이너 패딩은 제거
========================================= */
.sheet-backdrop--top{z-index:110}
.sheet__scroll--pad{display:block;padding:0;gap:0;background:var(--white);margin-top:24px}
/* TODO(시트 여백): 위 24px 은 핸들 자리인데, .sheet__head 가 있는 시트는 헤더가 이미 그 자리를
   갖고 있어 제목 아래 빈 24px 이 하나 더 생긴다(문의하기 고택 선택 · settings · search-home · booking).
   `.sheet__head + &{margin-top:0}` 으로 한 번에 없애 보니 그 24px 을 본문 여백으로 쓰던 시트가
   제목에 붙어 버렸다 — 시트마다 안쪽 여백을 정리한 뒤에 공통으로 걷어낸다.
   booking.html 과 settings.html 은 이 조합을 피해 --pad 를 아예 안 쓰는 식으로 돌아가 있다.
   남은 곳은 detail.html(날짜·인원)·search-home.html 이다 */
.sheet__sec-title{font-size:16px;font-weight:700;color:var(--g900);letter-spacing:-.4px;line-height:24px;
  height:56px;display:flex;align-items:center;padding:0 16px}

/* ---------- 날짜 선택 시트 (월별 세로 스크롤 · 범위 선택) ---------- */
.caldate{height:88vh;height:88dvh}
/* 선택 요약 헤더 */
.caldate__summary{flex:none;margin-top:24px;height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-bottom:1px solid var(--g100);font-size:15px;font-weight:600;color:var(--g900);letter-spacing:-.375px}
.caldate__summary i{color:var(--blue-500)}
.caldate__summary.is-empty{color:var(--g400);font-weight:500}
.caldate__summary.is-empty i{color:var(--g400)}
/* 요일 헤더(고정) + 월별 스크롤 */
.caldate__wkhead{flex:none;display:grid;grid-template-columns:repeat(7,1fr);padding:6px 16px 4px;
  border-bottom:1px solid var(--g100);background:var(--white)}
.caldate__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 16px}

/* 날짜 칸(.calmonth / .cal__*)은 공용 css/calendar.css 사용 */

/* 하단: 초기화 + 선택 완료 */
.caldate__cta{display:flex;align-items:center;gap:8px}
.caldate__reset{flex:none;display:flex;align-items:center;gap:4px;height:52px;padding:0 14px;background:none;
  color:var(--g700);font-size:15px;font-weight:600;letter-spacing:-.375px}
.caldate__reset i{color:var(--g500)}
.caldate__submit{flex:1;width:auto}

/* 인원·옵션 스텝퍼(.counts/.count/.stepper)는 공통 tokens.css 사용 */

/* 검색박스 날짜·인원 칸: 값이 채워지면 진한 색으로 */
.sbox__cell.is-set{color:var(--g900)}
.sbox__cell.is-set i{color:var(--g700)}