/* ==========================================================
   component.css - 컴포넌트 스타일 모음
   Button, Card, Category, Badge, Navigation, Tab 등을
   섹션 주석으로 구분해서 이 파일 하나에 누적합니다.
   ========================================================== */

/* ---- Button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-family-base);
}

/* Type: Fill, Type3 -> 시각적으로 동일한 필버튼 (짙은 청록 배경 + 흰 텍스트) */
.btn--fill,
.btn--type3 {
  background-color: var(--color-primary);
  color: var(--color-white-100);
  font-weight: 600;
}

/* Type: textbutton -> 배경 없는 텍스트버튼 (주황 텍스트, 밑줄) */
.btn--textbutton {
  background-color: transparent;
  color: var(--color-accent);
  font-weight: 500;
  border-bottom: 1px solid var(--color-accent);
  padding: 0;
  border-radius: 0;
}

/* Type: outline -> 배경 없는 주황 아웃라인 필버튼 (마이페이지 "혜택 보기" 등) */
.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  font-weight: 600;
  border: 1px solid var(--color-accent);
}

/* Size: M (96x34) */
.btn--m {
  width: 96px;
  height: 34px;
  font-size: 14px;
}

/* Size: S (80x32) */
.btn--s {
  width: 80px;
  height: 32px;
  font-size: 13px;
}

/* Size: Xs (62x27) */
.btn--xs {
  width: 62px;
  height: 27px;
  font-size: 12px;
}

/* textbutton은 내용 크기만큼만 차지 (Hug) - 고정폭 덮어쓰기 */
.btn--textbutton.btn--s {
  width: auto;
  height: 17px;
  font-size: 13px;
}

/* Hug 사이즈: 텍스트 길이에 맞춰 너비 자동 조절 (배경 있는 필버튼용)
   예: 프로모 스트립 "다운로드 받기" 버튼처럼 M/S/Xs 고정폭 스케일에
   맞지 않는 상황에서 사용 */
.btn--hug {
  width: auto;
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

/* ---- Card ---- */

.card {
  display: flex;
  background: var(--color-white-100);
  border-radius: 4px;
  overflow: hidden;
}

/* 이미지 영역 - placeholder 회색 박스. 실제 연동 시 img 태그로 교체 */
.card__image {
  position: relative;
  background: var(--color-gray-200);
  flex-shrink: 0;
}

.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
}

.card__badge--discount {
  background: var(--color-white-100);
  color: var(--color-orange-600);
}

.card__badge--zero {
  background: var(--color-primary);
  color: var(--color-white-100);
}

.card__favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.card__favorite svg {
  fill: none;
}

.card__favorite.is-active {
  color: var(--color-accent);
}

.card__favorite.is-active svg {
  fill: currentColor;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  min-width: 0;
  /* 텍스트 말줄임 처리를 위해 필요 */
}

.card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card__location {
  color: var(--color-gray-600);
}

/* Full/vertical처럼 지역·타입 없이 상품명만 한 줄로 보여줄 때 (card__location과 색만 다름) */
.card__name {
  color: var(--color-gray-700);
}

.card__rating {
  display: inline-flex;
  align-self: flex-start;
  /* flex-column 부모(card__body)의 기본 stretch로 폭이 늘어나는 것 방지 */
  align-items: center;
  gap: 2px;
  padding: 0 5px 0 4px;
  border-radius: 8px;
  background: var(--color-yellow-100);
  color: var(--color-gray-1000);
}

.card__rating-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.card__price {
  display: flex;
  align-items: baseline;
  margin-top: 4px;
}

.card__price-original {
  color: var(--color-gray-500);
  text-decoration: line-through;
  margin-right: 3px;
}

.card__discount {
  color: var(--color-orange-550);
  margin-right: 3px;
}

.card__price-current {
  color: var(--color-text-default);
}

.card__price-suffix {
  color: var(--color-text-default);
}

/* A. Full / vertical (212 x ...) — 이미지 + 상품명 한 줄 + 가격만 (지역/평점 없음, Figma 실측 기준) */
.card--full {
  width: 212px;
  flex-direction: column;
}

.card--full .card__image {
  width: 100%;
  height: 144px;
  border-radius: 4px;
}

.card--full .card__body {
  gap: 2px;
  padding-left: 0;
}

.card--full .card__price {
  margin-top: 0;
}

/* B. Small / vertical (165 x 234) — 이미지 + 지역·타입 + 상품명 + 평점 + 가격 (Figma 실측 기준) */
.card--small {
  width: 165px;
  flex-direction: column;
}

.card--small .card__image {
  width: 100%;
  height: 180px;
}

.card--small .card__body {
  padding: 8px 0 0;
  gap: 2px;
}

.card--small .card__rating {
  margin-top: 3px;
}

.card--small .card__price {
  margin-top: 8px;
}

/* C. rank / horizon (343 x 78) */
.card--rank {
  width: 343px;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-left: 32px;
  /* 순위 넘버 자리 */
}

.card--rank .card__image--sm {
  width: 56px;
  height: 56px;
  border-radius: 4px;
}

.card--rank .card__body {
  padding: 0;
  gap: 2px;
  flex: 1;
}

.card--rank .card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card__rank-number {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white-100);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* D. Zero / horizon (351 x 174) */
.card--zero {
  width: 351px;
  flex-direction: column;
}

.card--zero .card__image {
  width: 100%;
  height: 100px;
}

.card--zero .card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---- TopBar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  background: var(--color-white-100);
}

.topbar__logo {
  height: 37px;
  width: 120px;
  object-fit: contain;
}

.topbar__actions {
  display: flex;
  gap: 12px;
}

.topbar__icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--color-yellow-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-1000);
}

/* ---- Sub Header (뒤로가기+중앙정렬 타이틀) ----
   탭 루트가 아닌 서브 화면(03-accommodation-detail, 05-lucky-draw, 07-booking-history 등)
   진입 시 쓰는 헤더. 배경 블러 처리된 sticky 헤더 + 좌측 뒤로가기 버튼 + 중앙정렬 타이틀. */

.draw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  /* 대응 토큰 없음(03 페이지와 동일 값) */
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--color-gray-200);
}

.draw-header__back {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #141317;
  /* Figma 값, 대응 토큰 없음 */
  cursor: pointer;
}

.draw-header__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-gray-1000);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.16px;
  white-space: nowrap;
}

/* 우측 액션 아이콘(설정 등) — 뒤로가기와 대칭되는 원형 버튼. 타이틀은 absolute로 항상
   중앙정렬되므로 이 슬롯 유무와 무관하게 레이아웃이 깨지지 않음(09-notification 도입) */
.draw-header__action {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-yellow-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-1000);
  cursor: pointer;
  flex-shrink: 0;
}

/* 우측 액션이 2개 이상일 때(예: 공유+알림+찜) 감싸는 래퍼 — margin-left:auto는 래퍼에만
   주고 내부 draw-header__action들은 gap으로 나열(13-room-detail에서 처음 필요해짐) */
.draw-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.draw-header__actions .draw-header__action {
  margin-left: 0;
}

/* 배경 없이 아이콘만 있는 액션 버튼 variant — 03-accommodation-detail의 상세 화면처럼
   원형 배경 없이 아이콘 자체만 눌리는 액션이 필요할 때 사용 */
.draw-header__action--plain {
  width: 24px;
  height: 24px;
  background: none;
}

/* 찜하기 — .detail-header__icon-btn--favorite(03-accommodation-detail)와 동일한 상태 관례 */
.draw-header__action--favorite {
  color: var(--color-gray-500);
}

.draw-header__action--favorite svg {
  fill: none;
}

.draw-header__action--favorite.is-active {
  color: var(--color-accent);
}

.draw-header__action--favorite.is-active svg {
  fill: currentColor;
}

/* 우측 단계 카운터 배지(예: "1 / 5") — 후기 작성처럼 여러 단계로 이어지는 플로우의 타이틀
   헤더 우측에 붙는 텍스트 배지. draw-header__action과 슬롯 위치는 같지만 원형 아이콘
   버튼이 아니라 사각 텍스트 배지라 별도 클래스로 추가(11-review-write에서 처음 필요해짐) */
.draw-header__step-badge {
  margin-left: auto;
  background: var(--color-orange-50);
  color: var(--color-orange-500);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 우측 텍스트 액션 링크(예: "편집") — draw-header__action/step-badge와 슬롯 위치는 같지만
   원형 아이콘 버튼도, 배경 있는 배지도 아닌 배경 없는 텍스트 버튼일 때 사용
   (14-recently-viewed에서 처음 필요해짐) */
.draw-header__edit {
  margin-left: auto;
  border: none;
  background: none;
  padding: 0;
  color: var(--color-gray-600);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Search Box (검색창 테두리 + 날짜/인원 필터) ----
   10-search.html("검색" 탭)에서 처음 만들고, 12-search-result.html("검색결과")에서도
   그대로 재사용하게 되어 페이지 전용 CSS에서 이쪽으로 옮김(재사용 우선 원칙,
   draw-header__action과 동일 전례). 검색 CTA 버튼(.search-cta)은 아직 검색 탭
   화면에서만 쓰여서 css/10-search.css에 남겨둠. */
.search-box {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 8px 16px 0;
}

.search-box__border {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
}

.search-box__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-gray-300);
}

.search-box__placeholder {
  color: var(--color-gray-500);
}

.search-box__filters {
  display: flex;
}

.search-box__filter {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: none;
  background: none;
  color: var(--color-gray-1000);
  font-size: 13.5px;
  cursor: pointer;
}

.search-box__filter:first-child {
  border-right: 1px solid var(--color-gray-300);
}

/* ---- Category ---- */

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 58px;
}

.category__icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: var(--color-yellow-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.category__icon img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.category__label {
  color: var(--color-black-100);
  text-align: center;
  white-space: nowrap;
}


/* ---- Badge ---- */
/* Size(S/Xs)는 Figma 상 시각적으로 동일(20px 높이)해서 별도 modifier 없이 Color만 구분 */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.badge--white {
  background: var(--color-white-100);
  color: var(--color-orange-600);
}

.badge--orange {
  background: var(--color-accent);
  color: var(--color-white-100);
}


/* ---- Navigation ---- */
/* Bottom Navbar. is-active 토글은 js/common.js의 [data-tab-target] 공통 클릭 핸들러 재사용
   (아이콘/라벨은 currentColor·색상 유틸로 상태 반영, 별도 JS 없음) */

.navbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-white-100);
  /* 홈버튼 없는 아이폰의 하단 세이프에어리아까지 흰 배경을 채움. 이게 없으면 그 영역이
     브라우저 기본(검정에 가까운) 배경으로 남아서, 그 위에 iOS가 항상 그리는 시스템 홈
     인디케이터 바(연회색 알약)가 검은 배경 위에 떠 있는 것처럼 보여 "그림자"로 오인됨
     (viewport meta에 viewport-fit=cover가 있어야 이 값이 0이 아니게 계산됨) */
  padding-bottom: env(safe-area-inset-bottom);
}

.navbar__menu {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 20px 22px;
  border-top: 1px solid var(--color-gray-200);
}

.navbar__item {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-gray-600);
}

.navbar__item.is-active {
  color: #141317;
  /* Figma 값, 대응 토큰 없음 */
}

.navbar__icon {
  width: 22px;
  height: 22px;
  display: block;
}

.navbar__label {
  white-space: nowrap;
}


/* ---- Tab ---- */

.tab-group {
  display: flex;
  gap: 6px;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--color-gray-90);
  color: var(--color-gray-500);
}

.tab-item.is-active {
  background: var(--color-primary);
  color: var(--color-white-100);
}


/* ---- Indicator ---- */
/* 캐러셀/배너 페이지네이션 dot. 활성 dot은 24x8 pill, 비활성은 8x8 원, gap 8px */

.indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-black-a20);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.indicator__dot.is-active {
  width: 24px;
  background: var(--color-accent);
}


/* ---- Promo Timer Widget ---- */
/* 원형 카운트다운 3종(제로쿠폰/제로데이/제로멤버십). 그래픽은 Figma 합성 내보내기 PNG 사용 */

.promo-timer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.promo-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 106px;
}

@property --promo-ring-sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.promo-timer__graphic {
  position: relative;
  width: 88px;
  height: 88px;
}

.promo-timer__graphic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.promo-timer__graphic::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 3px;

  background: conic-gradient(var(--promo-ring-color, red) 0deg,
      var(--promo-ring-color, red) var(--promo-ring-sweep, 0deg),
      transparent var(--promo-ring-sweep, 0deg),
      transparent 360deg);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  pointer-events: none;
}

.promo-timer__graphic:has(img[src*="widget-coupon"])::before {
  --promo-ring-color: var(--color-teal-600);
  animation: promo-ring-draw-arc .9s cubic-bezier(.3, .8, .4, 1) .15s forwards;
}

.promo-timer__graphic:has(img[src*="widget-zeroday"])::before {
  --promo-ring-color: var(--color-green-400);
  --promo-ring-sweep: var(--promo-ring-target);
  animation: none;
}

.promo-timer__graphic:has(img[src*="widget-membership"])::before {
  --promo-ring-color: var(--color-orange-500);
  animation: promo-ring-draw-full .9s cubic-bezier(.3, .8, .4, 1) .45s forwards;
}

@keyframes promo-ring-draw-arc {
  from {
    --promo-ring-sweep: 0deg;
  }

  to {
    --promo-ring-sweep: 288deg;
  }
}

@keyframes promo-ring-draw-full {
  from {
    --promo-ring-sweep: 0deg;
  }

  to {
    --promo-ring-sweep: 360deg;
  }
}

.promo-timer__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 3px 6px;
  border-radius: 10px;
  background: var(--color-orange-600);
  color: var(--color-white-100);
  font-size: 9px;
  font-weight: 800;
  line-height: 9px;
  white-space: nowrap;
  z-index: 2;
}

.promo-timer__label {
  color: var(--color-gray-1000);
}

.promo-timer__timer {
  display: flex;
  align-items: center;
  gap: 3px;
}

.promo-timer__timer-caption {
  color: var(--color-black-a45);
}

.promo-timer__timer-value {
  display: flex;
  align-items: center;
}

.promo-timer__timer-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  background: var(--color-teal-400);
  color: var(--color-white-100);
}

.promo-timer__timer-sep {
  color: var(--color-black-a55);
}

.promo-timer__hint {
  color: var(--color-black-a45);
}


/* ---- Notification ---- */
/* 플로팅 배너형 토스트 알림. 닫기 버튼은 js/common.js의 [data-dismiss] 공통 핸들러가 처리 */

.notification {
  position: relative;
  width: 343px;
}

.notification__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 32px 8px 12px;
  border-radius: 10px;
  background: var(--color-white-a75);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: var(--shadow-toast);
}

.notification__icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.notification__message {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-gray-1000);
}

.notification__action {
  flex-shrink: 0;
}

.notification__close {
  position: absolute;
  top: 12px;
  right: 11px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-black-100);
}


/* ---- Bottom Sheet ---- */
/* 오버레이 + 슬라이드업 시트 공통 컴포넌트. 여는 트리거는 [data-sheet-open="id"],
   시트/오버레이는 [data-sheet="id"] / [data-sheet-overlay="id"], 닫기는 오버레이 클릭
   또는 [data-sheet-close="id"] (js/common.js 참고). .app-frame 안에서도 topbar/navbar와
   동일하게 position:fixed + left:50%/translateX(-50%)로 중앙 프레임 폭(600px)에 맞춤. */

.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-black-a45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.bottom-sheet-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.bottom-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 201;
  background: var(--color-white-100);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.3s cubic-bezier(.32, .72, 0, 1);
}

.bottom-sheet.is-active {
  transform: translateX(-50%) translateY(0);
}

.bottom-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 20px;
}

.bottom-sheet__handle-bar {
  width: 38px;
  height: 4.5px;
  border-radius: 999px;
  background: var(--color-gray-300);
}

.bottom-sheet__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  padding: 0 16px;
}

.bottom-sheet__graphic {
  width: 88px;
  height: 88px;
}

.bottom-sheet__graphic img {
  display: block;
  width: 100%;
  height: 100%;
}

.bottom-sheet__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
  text-align: center;
}

.bottom-sheet__title {
  color: var(--color-gray-1000);
}

.bottom-sheet__desc {
  color: var(--color-gray-700);
}

.bottom-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-bottom: 21px;
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
}

.bottom-sheet__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bottom-sheet__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  border: 1px solid;
}

.bottom-sheet__item-icon img {
  width: 22px;
  height: 22px;
}

/* 배지 3종 배경/보더는 Figma 원본 값(기존 팔레트에 정확히 대응하는 토큰 없음).
   teal/yellow 배경만 기존 --color-teal-100 / --color-yellow-100과 일치해 재사용 */
.bottom-sheet__item-icon--orange {
  background: #fff5ef;
  border-color: #ffc4ad;
}

.bottom-sheet__item-icon--teal {
  background: var(--color-teal-100);
  border-color: #b0e4dc;
}

.bottom-sheet__item-icon--yellow {
  background: var(--color-yellow-100);
  border-color: #ffe08a;
}

.bottom-sheet__item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.bottom-sheet__item-title {
  color: var(--color-gray-1000);
}

.bottom-sheet__item-desc {
  color: var(--color-gray-600);
}

.bottom-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 20px;
}

/* 풀폭 라운드(4px) CTA — 기존 .btn은 필/캡슐(radius 999px) 전용이라 이 사각형 CTA는
   전용 클래스로 분리하되 색상/폰트는 기존 토큰·타이포 유틸을 그대로 사용 */
.bottom-sheet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 4px;
  background: var(--color-teal-500);
  color: var(--color-white-100);
  cursor: pointer;
}

.bottom-sheet__later {
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--color-gray-600);
  text-align: center;
  cursor: pointer;
}

/* ---- Detail Info Alert Button (숙소알림) ----
   03-accommodation-detail에서 처음 만들고 13-room-detail에서도 그대로 재사용하게 되어
   페이지 전용 CSS에서 이쪽으로 옮김 (재사용 우선 원칙, search-box/draw-header__action과 동일 전례). */
.detail-info__alert-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 7px 5px 6px;
  border: 1px solid rgba(177, 177, 177, 0.4);
  border-radius: 4px;
  background: none;
  color: var(--color-black-100);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.4px;
  cursor: pointer;
  flex-shrink: 0;
}

.detail-info__alert-btn svg {
  width: 12px;
  height: 12px;
}

/* ---- "더보기" 아웃라인 버튼 (2개 요금 더보기 / 후기 전체보기 / 4개 더보기 등) ----
   03-accommodation-detail에서 처음 만들고 13-room-detail에서도 재사용 */
.room__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(177, 177, 177, 0.4);
  border-radius: 4px;
  background: none;
  color: #141317;
  /* Figma 값, 대응 토큰 없음 */
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.room__more svg {
  width: 10px;
  height: 10px;
}

/* ---- 하단정보 섹션 공통 (부대시설/후기/위치/숙소이용정보/취소환불 등) ----
   03-accommodation-detail에서 처음 만들고 13-room-detail에서도 재사용 */
.detail-section {
  padding: 24px 16px;
  border-top: 8px solid var(--color-yellow-100);
  /* Figma #f7f6f1 == --color-yellow-100 */
  scroll-margin-top: 104px;
  /* 03-accommodation-detail의 고정 헤더(52px)+서브내비(52px) 기준값. 서브내비 없는 화면에서는 앵커 스크롤에만 쓰이므로 무해 */
}

.detail-section__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 35px;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid #141317;
  /* Figma 값, 대응 토큰 없음 */
  color: var(--color-black-100);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* ---- 부대시설/기본정보 아이콘 그리드 (52x52 아이콘) ---- */
.detail-facilities-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 8px;
}

.detail-facility {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.detail-facility__icon {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #141317;
  /* Figma 값, 대응 토큰 없음 */
}

.detail-facility__icon svg {
  width: 24px;
  height: 24px;
}

.detail-facility--highlight .detail-facility__icon {
  background: rgba(225, 82, 48, 0.03);
  border-color: var(--color-orange-200);
  color: #e15230;
  /* 대응 토큰 없음 */
}

.detail-facility__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #141317;
  /* Figma 값, 대응 토큰 없음 */
  text-align: center;
}

.detail-facility--highlight .detail-facility__label {
  color: #e15230;
  font-weight: 700;
}

/* ---- 후기 요약 + 리뷰 카드 ---- */
.detail-reviews__summary {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 12px 0 8px;
}

.detail-reviews__score {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.24px;
  color: #141317;
}

/* 대응 토큰 없음 */
.detail-reviews__count {
  font-size: 12px;
  color: var(--color-gray-700);
}

.detail-review-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--color-gray-300);
}

.detail-review-card__head {
  display: flex;
  gap: 6px;
  align-items: center;
}

.detail-review-card__author {
  font-size: 13px;
  font-weight: 600;
  color: #141317;
  letter-spacing: -0.4px;
}

/* 대응 토큰 없음 */
.detail-review-card__stars {
  display: flex;
}

.detail-review-card__stars svg {
  width: 12px;
  height: 12px;
}

.detail-review-card__meta {
  font-size: 12px;
  color: var(--color-gray-600);
}

.detail-review-card__text {
  font-size: 14px;
  color: var(--color-gray-1000);
  padding-top: 5px;
  line-height: 18px;
}

/* ---- Sticky bottom booking bar ----
   03-accommodation-detail에서 처음 만들고 13-room-detail에서도 그대로 재사용하게 되어
   페이지 전용 CSS에서 이쪽으로 옮김 (재사용 우선 원칙, 위 항목들과 동일 전례). */
.detail-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-white-100);
  border-top: 1px solid rgba(177, 177, 177, 0.4);
}

.detail-footer__date {
  color: var(--color-gray-800);
}

.detail-footer__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.detail-footer__amount {
  color: #141317;
}

/* Figma 값, 대응 토큰 없음 */
.detail-footer__unit {
  color: var(--color-gray-500);
}

.detail-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 14px 24px;
  border: none;
  border-radius: 4px;
  background: var(--color-teal-500);
  color: var(--color-white-100);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.4px;
  text-decoration: none;
  /* 03-accommodation-detail에서 <a href="#section-rooms">로도 쓰여 앵커 밑줄 제거 */
  cursor: pointer;
}

/* 가격 정보 없이 CTA가 남는 폭을 전부 차지하는 variant(13-room-detail: 찜 아이콘+결제 버튼만 있는 푸터) */
.detail-footer__cta--block {
  flex: 1;
  text-align: center;
  padding: 14px 24px;
  font-size: 15px;
}

/* 찜 아이콘만 있는 44x44 정사각 버튼(13-room-detail 하단 바) */
.detail-footer__favorite-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-gray-200);
  border-radius: 4px;
  background: var(--color-white-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  cursor: pointer;
}

.detail-footer__favorite-btn svg {
  fill: none;
}

.detail-footer__favorite-btn.is-active {
  color: var(--color-accent);
}

.detail-footer__favorite-btn.is-active svg {
  fill: currentColor;
}