:root {
  --hotopia-ink: #12100c;
  --hotopia-night: #17130f;
  --hotopia-gold: #c9a96e;
  --hotopia-gold-deep: #9d7840;
  --hotopia-cream: #f8f4ec;
  --hotopia-muted: #83786a;
  --hotopia-line: rgba(201, 169, 110, .28);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Noto Sans KR", "Pretendard", "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.65;
  color: var(--hotopia-ink);
  background: #fbfaf7;
}

.luxury-nav {
  background: rgba(18, 16, 12, .94) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 169, 110, .18);
}
.navbar-brand .brand-mark {
  color: var(--hotopia-gold);
  letter-spacing: .08em;
}
.navbar .nav-link {
  letter-spacing: .02em;
  font-size: .875rem;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--hotopia-gold) !important; }

.btn-luxury,
.btn-warning {
  background: linear-gradient(135deg, var(--hotopia-gold), var(--hotopia-gold-deep));
  border: 0;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(157, 120, 64, .24);
}
.btn-luxury:hover,
.btn-warning:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(157, 120, 64, .32);
}
.btn-outline-luxury {
  border: 1px solid var(--hotopia-gold);
  color: var(--hotopia-gold);
}
.btn-outline-luxury:hover { background: var(--hotopia-gold); color: #fff; }

.luxury-card {
  border: 1px solid rgba(201, 169, 110, .16);
  border-radius: 1.35rem;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 48px rgba(23, 19, 15, .08);
  overflow: hidden;
}
.luxury-kicker {
  color: var(--hotopia-gold-deep);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .75rem;
  font-weight: 700;
}
.luxury-title {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
}
.text-gold { color: var(--hotopia-gold) !important; }
.bg-cream { background: var(--hotopia-cream); }

.room-result-card {
  border: 0;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 20px 54px rgba(18, 16, 12, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.room-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(18, 16, 12, .16);
}
.room-result-media {
  min-height: 230px;
  background: linear-gradient(145deg, rgba(18,16,12,.25), rgba(18,16,12,.72)),
              url("https://images.unsplash.com/photo-1590490360182-c33d57733427?w=1200&q=80") center/cover;
}
.room-badge-soft {
  background: rgba(201,169,110,.14);
  color: #7c5c2f;
  border: 1px solid rgba(201,169,110,.25);
}

.stat-pill {
  border: 1px solid rgba(201,169,110,.20);
  background: rgba(248,244,236,.72);
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .86rem;
}

.footer-luxury {
  background:
    radial-gradient(circle at 20% 0%, rgba(201,169,110,.16), transparent 36%),
    linear-gradient(135deg, #15110d, #070605);
  border-top: 1px solid rgba(201, 169, 110, .22);
}

/* ────────────────────────────────────────────────
   반응형 — 태블릿 이하 (≤ 768px)
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .display-3 { font-size: 2rem; }
  .display-5 { font-size: 1.6rem; }
  .display-6 { font-size: 1.4rem; }

  /* 히어로 */
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  .hero-copy  { font-size: 1rem; }
  .hotopia-hero { min-height: 60vh; }

  /* 예약 검색 박스 — 히어로 겹침 제거 */
  .booking-glass { margin-top: 0 !important; border-radius: 0; }

  /* 피처 이미지 */
  .feature-image  { min-height: 220px; }
  .signature-card { min-height: 180px; padding: 1.25rem; }

  /* 검색 히어로 패딩 축소 */
  .search-hero { padding: 2.5rem 0 2rem !important; }

  /* 객실 카드: 이미지 세로 축소 */
  .room-result-media { min-height: 180px; }

  /* stat-pill 줄바꿈 */
  .stat-pill { font-size: .8rem; padding: .35rem .65rem; }

  /* footer 텍스트 줄바꿈 */
  .footer-luxury .row { text-align: center; }
}

/* ────────────────────────────────────────────────
   반응형 — 스마트폰 (≤ 575px)
──────────────────────────────────────────────── */
@media (max-width: 575px) {
  /* 네비 브랜드 */
  .navbar-brand .brand-mark { font-size: 1rem; }

  /* 히어로 버튼 세로 배치 */
  .hero-panel .d-flex.gap-3 { flex-direction: column !important; }
  .hero-panel .btn { width: 100%; text-align: center; }

  /* 예약 폼 버튼 */
  .booking-glass .btn-luxury { margin-top: .5rem; }

  /* 검색 결과 카드: 이미지 숨김 (콘텐츠 우선) */
  .room-result-card .col-md-5 { display: none; }
  .room-result-card .col-md-7 { flex: 0 0 100%; max-width: 100%; }

  /* 예약 상세 가격/버튼 세로 배치 */
  .room-result-card .d-flex.align-items-end { flex-direction: column; align-items: flex-start !important; gap: .75rem; }
  .room-result-card .btn-luxury { width: 100%; text-align: center; }

  /* 헤더 날짜 정보 줄바꿈 */
  .d-flex.justify-content-between.align-items-center { flex-wrap: wrap !important; gap: .5rem; }

  /* 테이블 가로 스크롤 */
  .table-responsive-always { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* 모달 여백 */
  .modal-dialog { margin: .75rem; }

  /* 카드 패딩 */
  .luxury-card { border-radius: .85rem; }
  .p-4 { padding: 1rem !important; }
  .p-lg-5 { padding: 1rem !important; }

  /* signature cards: 1열 */
  .signature-card { min-height: 160px; }
}