/* =========================================
   이음 고택 상세보기 — Figma node 254:13397
   공통 리셋·헤더·탭·아이콘·GNB 는 tokens.css 사용
   (booking / booking-complete / reservation-detail 도 이 파일을 공통으로 로드)
========================================= */
.app{background:var(--g50);padding-bottom:calc(40px + env(safe-area-inset-bottom))}

/* ---------- 상단 이미지 ---------- */
.gallery{background:var(--white);padding:0 16px 22px}
.gallery__img{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--g50)}
.gallery__img img{width:100%;height:100%;object-fit:cover}
/* 하트는 공통 .heart (tokens.css) 사용 */
.gallery__count{position:absolute;right:10px;bottom:10px;background:rgba(17,17,17,.4);color:var(--white);font-size:13px;
  letter-spacing:-.3px;padding:2px 6px;border-radius:4px}

/* ---------- 기본 정보 ---------- */
.intro{background:var(--white);padding:0 16px 22px;display:flex;flex-direction:column;gap:6px}
.badges{display:flex;gap:4px;margin-bottom:6px}
/* 회색 배지(.badge-gray)는 공통 tokens.css 사용 */
/* 텍스트는 공통 .fs-cap/.fs-title.c-strong/.fs-body.c-sub (tokens.css) 사용 */
.intro__desc{margin-top:2px}

/* ---------- 패널 공통 ---------- */
/* 패널 텍스트는 공통 .fs-subtitle/.fs-cap (tokens.css) 사용 */
.panel{background:var(--white);padding:16px;margin-top:12px;display:flex;flex-direction:column;gap:16px}
.panel:first-of-type{margin-top:0}
.panel__title{line-height:24px}
.panel__head{display:flex;flex-direction:column;gap:4px}
.panel--row{flex-direction:row;align-items:center;justify-content:space-between}
.panel__head-row{display:flex;align-items:center;justify-content:space-between}

/* ---------- 날짜 · 인원 ---------- */
.picker{display:flex;gap:8px}
.picker__box{flex:1;display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--g200);border-radius:12px;padding:12px}
.picker__box--narrow{flex:none;width:115px}
.picker__left{display:flex;align-items:center;gap:4px}
.picker__val{display:flex;align-items:center;gap:4px}
.picker__val b{font-size:15px;font-weight:500;color:var(--g900);letter-spacing:-.375px}
.picker__val em{font-size:13px;font-style:normal;color:var(--g700)}

/* ---------- 객실 카드 ---------- */
.rooms{display:flex;flex-direction:column;gap:12px}
.room{border:1px solid var(--g200);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:16px;
  background:var(--white)}
.room__img{position:relative;width:100%;height:140px;border-radius:8px;overflow:hidden;background:var(--g50)}
.room__img img{width:100%;height:100%;object-fit:cover}
.room__soldout{position:absolute;inset:0;background:rgba(0,0,0,.5);color:var(--white);font-size:15px;font-weight:500;
  display:grid;place-items:center}
.room__body{display:flex;flex-direction:column;gap:8px}
.room__row{display:flex;align-items:center;justify-content:space-between}
/* 객실명·정원 텍스트는 공통 .fs-name/.fs-sub (tokens.css) 사용 */
.room__price{display:flex;align-items:baseline;gap:4px;margin-top:2px}
/* 가격 표기(.price__*)는 공통 tokens.css 사용 */
.room__cta{display:flex;gap:8px;align-items:center;margin-top:8px}
.room__like{width:44px;height:44px;border:1px solid var(--blue-100);border-radius:6px;display:grid;
  place-items:center;color:var(--blue-500);flex:none}
.room--soldout .room__name,.room--soldout .room__cap{color:var(--g400)}
.room__like:disabled{border-color:var(--g200);color:var(--g400);cursor:default}

/* ---------- 위치 · 이용 안내 ---------- */
.map{height:140px;border-radius:8px;overflow:hidden;background:var(--blue-500)}
.map img{width:100%;height:100%;object-fit:cover}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-cap{margin:16px 0 8px}
.rows{display:flex;flex-direction:column}
.row{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
/* 키·값 텍스트는 공통 .fs-body.c-sub/.fs-body-b (tokens.css) 사용 */

/* ---------- 안내 박스 ---------- */
.note{background:var(--g50);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px}
.note p{font-size:15px;color:var(--g700);letter-spacing:-.35px;line-height:20px}
.notice-heritage{background:var(--blue-50);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}
.notice-heritage__top{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--g900);
  letter-spacing:-.35px}
.notice-heritage__top i{color:var(--blue-500)}
.notice-heritage__sub{font-size:15px;font-weight:500;color:var(--g700);letter-spacing:-.35px;line-height:20px}

/* ---------- 후기 ---------- */
.review{border:1px solid var(--g200);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px}
.review__top{display:flex;gap:8px;align-items:flex-start}
/* 아바타는 공통 .icirc .icirc--40 .icirc--solid (tokens.css) 사용 */
.review__meta{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.review__line{display:flex;align-items:center;justify-content:space-between}
.review__tag{align-self:flex-start;background:var(--g50);border-radius:4px;padding:2px 4px;font-size:14px;
  font-weight:600;color:var(--g700);letter-spacing:-.325px}
.review__photos{display:flex;gap:4px}
/* 후기 사진은 공통 .thumb .thumb--60 (tokens.css) 사용 */
.review__help{align-self:flex-start;display:flex;align-items:center;gap:4px;height:36px;padding:0 16px;
  border:1px solid var(--g200);border-radius:6px}

/* =========================================
   객실 상세 바텀시트
========================================= */
.sheet-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.45);
  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);height:94vh;height:94dvh;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-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__scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--g50)}
.sheet__scroll .gallery,.sheet__scroll .intro,.sheet__scroll .ltabs{position:static}
.sheet__scroll .ltabs{margin-bottom:0}

/* 후기 개수 */
.intro__reviews{font-size:13px;font-weight:700;color:var(--g500);letter-spacing:-.3px;margin-top:2px}

/* 날짜·인원 요약 */
.summary{background:var(--g50);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.summary__row{display:flex;align-items:center;justify-content:space-between}
.summary__val{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.summary__val span{display:flex;align-items:center;gap:4px;font-size:15px;color:var(--g900)}
.summary__val b{font-weight:600}
.summary__val em{font-style:normal;font-weight:500;color:var(--g700)}
.summary__dot{color:var(--g500)}

/* 기본 정보 그리드 */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.info-cell{background:var(--g50);border-radius:8px;padding:16px 12px;display:flex;flex-direction:column;gap:8px}
.info-cell--wide{margin-top:0}
.info-opts{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.info-opts__row{display:flex;align-items:center;justify-content:space-between}
.info-cell__k{display:flex;align-items:center;gap:4px}

/* 편의시설 */
.amenity{background:var(--g50);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:12px}
.amenity__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px}
.amenity__grid span{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--g700);letter-spacing:-.375px}

/* 하단 예약 바 */
.sheet__cta{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--white);padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -1px 4px rgba(0,0,0,.12)}
.sheet__cta-left{display:flex;align-items:center;gap:16px}
.sheet__like{width:36px;height:36px;border:1px solid var(--blue-100);border-radius:6px;display:grid;
  place-items:center;color:var(--blue-500);flex:none}
.sheet__price-sub{line-height:18px}
.sheet__price-now{margin-top:4px}

/* =========================================
   아코디언 (예약 공지사항 · 판매자 정보)
========================================= */
.accordion__head{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;background:none;padding:0}
.accordion__icon{transition:transform .2s ease}
.accordion.open .accordion__icon{transform:rotate(180deg)}
.accordion__body{display:none;flex-direction:column;gap:12px}
.accordion.open .accordion__body{display:flex}
.notice-box{background:var(--g50);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px}
.notice-box p{font-size:15px;font-weight:400;color:var(--g700);letter-spacing:-.35px;line-height:1.5}
.seller__list{display:flex;flex-direction:column}
.seller__row{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 8px;border-bottom:1px solid var(--g200)}
.seller__row span{font-size:15px;font-weight:500;color:var(--g700);letter-spacing:-.375px;flex:none}
.seller__row b{font-size:15px;font-weight:600;color:var(--g900);letter-spacing:-.375px;text-align:right}

/* =========================================
   날짜·인원 바텀시트
========================================= */
.sheet-backdrop--top{z-index:110}
.sheet__scroll--pad{background:var(--white);margin-top:24px}
.sheet__sec-title{height:56px;display:flex;align-items:center;padding:0 16px}

/* 체크인·체크아웃 요약 */
.dpick{display:flex;gap:8px;padding:0 16px}
.dpick__box{flex:1;background:var(--g50);border-radius:8px;padding:12px;display:flex;align-items:center;justify-content:space-between}

/* 캘린더 (search-home 스타일 — 월별 세로 스크롤 · 범위 선택) */
.calwk{display:grid;grid-template-columns:repeat(7,1fr);padding:8px 16px 4px;border-bottom:1px solid var(--g100)}
.calmonths{padding:4px 16px 0}
.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)}

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

/* =========================================
   태블릿 (600px~) — 갤러리 비율·지도 높이 조정
========================================= */
@media (min-width:600px){
  .gallery__img{aspect-ratio:16/10}
  .room__img{height:220px}
  .map{height:220px}
}