/* =========================================
   공용 바텀시트 컴포넌트 (detail.css 시트 패턴과 동일 토큰)
   - 페이지 자체에 .sheet 클래스가 없는 화면(reservations/reviews 등)에서 사용
   - search.html은 자체 .sheet(목록 패널)와 충돌하므로 fsheet 사용
========================================= */
.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-backdrop[hidden]{display:none}
.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-backdrop.on .sheet{transform:translateY(0)}
/* pill 스타일은 공통 tokens.css — 여기선 위치만 */
.sheet__handle{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2}
.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__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) 사용 */

/* ---------- 후기 작성 시트 ---------- */
.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:-12px}
.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-count{text-align:right;font-size:13px;color:var(--g400);margin-top:-14px}
.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}

/* =========================================
   날짜·인원 선택 시트 (공용 바텀시트)
   - 날짜: 월별 세로 스크롤 범위 캘린더(.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}
.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 + .calmonth{margin-top:20px}
.calmonth__label{font-size:16px;font-weight:700;color:var(--blue-strong);letter-spacing:-.4px;margin:12px 0 8px}

/* 요일 헤더 · 날짜 그리드 */
.cal__wd{height:32px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--g900);letter-spacing:-.325px}
.cal__wd--sun{color:var(--red-500)}.cal__wd--sat{color:var(--blue-500)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:6px}
.cal__day{position:relative;height:48px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--g900);cursor:pointer}
.cal__n{position:relative;z-index:1;width:30px;height:30px;display:grid;place-items:center;border-radius:50%}
.cal__day--sun{color:var(--red-500)}.cal__day--sat{color:var(--blue-500)}
.cal__day--off{color:var(--g300);cursor:default}
.cal__day--today .cal__n{font-weight:700}
.cal__day--blank{cursor:default;pointer-events:none}
/* 범위 밴드(연한 파랑) — 시작/끝은 블록 안쪽 절반만 채워 바깥은 비운다 */
.cal__day--mid::before,.cal__day--start::before,.cal__day--end::before{content:"";position:absolute;top:50%;
  transform:translateY(-50%);height:44px;background:var(--blue-50)}
.cal__day--mid::before{left:0;right:0}
.cal__day--start::before{left:50%;right:0}
.cal__day--end::before{left:0;right:50%}
/* 시작·끝·단일 = 크고 둥근 파란 블록 */
.cal__day--start .cal__n,.cal__day--end .cal__n,.cal__day--single .cal__n{width:44px;height:44px;border-radius:999px;
  background:var(--blue-500);color:var(--white);font-weight:700;box-shadow:0 2px 6px rgba(17,17,17,.16)}

/* 하단: 초기화 + 선택 완료 */
.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)}