:root {
  --brand: #e5484d;
  --brand-dark: #c93b40;
  --text: #1f2328;
  --text-sub: #656d76;
  --border: #d0d7de;
  --bg: #f6f7f9;
  --card: #ffffff;
  --error: #cf222e;
  --error-bg: #ffebe9;
  --ok: #1a7f37;
  --ok-bg: #dafbe1;
  --warn: #9a6700;
  --warn-bg: #fff8c5;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  font-size: 15px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ---------- 헤더 ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 24px;
  background: var(--card); border-bottom: 1px solid var(--border);
}

.logo { font-size: 20px; font-weight: 800; color: var(--brand); letter-spacing: -0.5px; }
.logo:hover { text-decoration: none; }

.header-nav { display: flex; align-items: center; gap: 16px; }
.header-nav a { color: var(--text); font-weight: 600; }
.header-user { font-weight: 600; }

.btn-small {
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand); color: #fff !important;
}
.btn-small:hover { background: var(--brand-dark); text-decoration: none; }

.btn-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-sub);
}
.btn-link:hover { color: var(--text); text-decoration: underline; }

.header-menu { position: relative; }
.header-menu-button {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); cursor: pointer;
}
.header-menu-button:hover, .header-menu-button[aria-expanded="true"] { background: var(--bg); }
.header-menu-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.header-menu-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 100;
  min-width: 160px; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
}
.header-menu-list a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--text); font-weight: 600;
}
.header-menu-list a:hover, .header-menu-list a:focus-visible { background: var(--bg); text-decoration: none; }
.header-menu-list a[aria-current="page"] { color: var(--brand); }

/* ---------- 고객센터·설정 ---------- */

.info-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.info-page > h1 { font-size: 28px; margin: 0 0 4px; }
.info-page .page-sub { color: var(--text-sub); margin: 0 0 28px; }

.info-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; margin-bottom: 20px;
}
.info-card h2 { font-size: 18px; margin: 0 0 4px; }
.info-card .card-sub { color: var(--text-sub); font-size: 14px; margin: 0 0 16px; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.contact-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.contact-item dt { color: var(--text-sub); font-size: 13px; }
.contact-item dd { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.contact-item .contact-note { font-size: 13px; font-weight: 400; color: var(--text-sub); }

.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.faq-tab {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font: inherit; font-size: 14px; cursor: pointer;
}
.faq-tab[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }

.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary {
  display: flex; gap: 10px; padding: 14px 0; cursor: pointer; font-weight: 600; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "Q"; color: var(--brand); font-weight: 800; }
.faq-list summary::after { content: "+"; margin-left: auto; color: var(--text-sub); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: 0 0 14px 22px; color: var(--text-sub); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-bottom: 1px solid var(--border); }
.link-list li:last-child { border-bottom: 0; }
.link-list a, .link-list .link-disabled {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; color: var(--text); font-weight: 600;
}
.link-list a::after { content: "›"; color: var(--text-sub); font-size: 20px; }
.link-list a:hover { text-decoration: none; color: var(--brand); }
.link-list .link-disabled { color: var(--text-sub); font-weight: 400; }
.link-list .danger { color: var(--error); }

/* 내 활동 · 이용 내역 */
.stay-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.stay-history-item {
  display: flex; align-items: center; gap: 14px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.stay-history-item:hover { text-decoration: none; border-color: var(--brand); }
.stay-history-thumb {
  flex: none; width: 96px; height: 72px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg); color: var(--text-sub); font-size: 11px;
}
.stay-history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stay-history-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stay-history-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.setting-row:last-of-type { border-bottom: 0; }
.setting-row .setting-text { display: flex; flex-direction: column; }
.setting-row .setting-text span:first-child { font-weight: 600; }
.setting-row .setting-text span + span { color: var(--text-sub); font-size: 13px; }

.setting-select {
  height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; background: #fff; color: var(--text);
}

.settings-saved { margin: -8px 0 20px; font-size: 13px; color: var(--ok); }

/* ---------- 마이페이지(설정) 레이아웃 ---------- */

.settings-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start;
  max-width: 1040px; margin: 0 auto; padding: 40px 24px 72px;
}

.settings-side {
  position: sticky; top: 24px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 12px;
}
.settings-side-title { margin: 4px 8px 12px; font-size: 18px; font-weight: 800; }

.settings-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-tabs a {
  display: block; padding: 11px 12px; border-radius: 8px;
  color: var(--text-sub); font-weight: 600;
}
.settings-tabs a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.settings-tabs a[aria-current="page"] { background: var(--error-bg); color: var(--brand); }

.settings-main > .settings-panel > h1 { font-size: 26px; margin: 0 0 4px; }
.settings-main .page-sub { color: var(--text-sub); margin: 0 0 24px; }

.profile-list { margin: 0; }
.profile-list div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.profile-list div:last-child { border-bottom: 0; }
.profile-list dt { flex: none; width: 80px; color: var(--text-sub); }
.profile-list dd { margin: 0; font-weight: 600; word-break: break-all; }

.mileage-summary {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-bottom: 20px; padding: 28px 24px; border-radius: 14px;
  background: var(--brand); color: #fff;
}
.mileage-label { margin: 0; opacity: 0.9; }
.mileage-balance { margin: 4px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.5px; }
.mileage-stats { display: flex; gap: 24px; margin: 0; }
.mileage-stats dt { font-size: 13px; opacity: 0.9; }
.mileage-stats dd { margin: 2px 0 0; font-weight: 700; }

.info-card h2 + .faq-tabs { margin-top: 12px; }
.mileage-history { list-style: none; margin: 0; padding: 0; }
.mileage-history li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.mileage-history li:last-child { border-bottom: 0; }
.mileage-desc { margin: 0; font-weight: 600; }
.mileage-meta { margin: 2px 0 0; font-size: 13px; color: var(--text-sub); }
.mileage-amount { flex: none; margin: 0; font-weight: 700; }
.mileage-amount.plus { color: var(--brand); }
.mileage-amount.minus { color: var(--text-sub); }
.mileage-empty { margin: 16px 0 4px; text-align: center; color: var(--text-sub); }

.guide-list { margin: 0; padding-left: 18px; color: var(--text-sub); font-size: 14px; }
.guide-list li + li { margin-top: 6px; }

@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px 56px; }
  .settings-side { position: static; padding: 8px; }
  .settings-side-title { display: none; }
  .settings-tabs { flex-direction: row; }
  .settings-tabs li { flex: 1 1 auto; }
  .settings-tabs a { text-align: center; padding: 10px 6px; font-size: 13px; white-space: nowrap; }
  .info-card { padding: 20px 16px; }
}

/* ---------- 메인 ---------- */

.hero { max-width: 720px; margin: 120px auto; padding: 0 24px; text-align: center; }
.hero h1 { font-size: 32px; margin: 0 0 8px; }
.hero p { color: var(--text-sub); margin: 0; }
.hero:has(+ .home-search) { margin-bottom: 32px; }
.home-search { max-width: 960px; margin: 0 auto 80px; }
.home-search-all { margin: 12px 0 0; text-align: right; font-size: 14px; }

/* ---------- 로그인·회원가입 카드 ---------- */

.auth-wrap { display: flex; justify-content: center; padding: 48px 16px 64px; }

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 36px 32px;
}

.auth-card h1 { font-size: 24px; margin: 0 0 4px; }
.auth-sub { color: var(--text-sub); margin: 0 0 24px; }

.field { margin-bottom: 18px; }

.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.req { color: var(--brand); }

input[type="email"], input[type="password"], input[type="text"], input[type="tel"] {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: var(--text); background: #fff;
}
input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
input[aria-invalid="true"] { border-color: var(--error); }

.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex: 1; min-width: 0; }

.btn-inline {
  flex: none; height: 46px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-inline:hover:not(:disabled) { background: var(--bg); }
.btn-inline:disabled { color: var(--text-sub); cursor: default; }

.field-error { margin: 6px 0 0; font-size: 13px; color: var(--error); }
.field-status { margin: 6px 0 0; font-size: 13px; }
.field-status.ok { color: var(--ok); }

.rules {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--text-sub);
}
.rules li::before { content: "○ "; }
.rules li.ok { color: var(--ok); }
.rules li.ok::before { content: "✓ "; }

.agree {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin: 4px 0 22px;
}
.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.check-all { font-weight: 700; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }

.btn-primary {
  width: 100%; height: 50px; border: 0; border-radius: var(--radius);
  background: var(--brand); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.btn-social {
  width: 100%; height: 46px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; font: inherit; color: var(--text-sub); cursor: not-allowed;
}

.auth-links {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 20px; color: var(--text-sub); font-size: 14px;
}
.muted { color: var(--text-sub); }

.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; color: var(--text-sub); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.alert { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px; font-size: 14px; }
.alert-error { background: var(--error-bg); color: var(--error); }
.alert-success { background: var(--ok-bg); color: var(--ok); }
.alert-warning { background: var(--warn-bg); color: var(--warn); }

@media (max-width: 480px) {
  .site-header { padding: 0 16px; }
  .auth-wrap { padding: 24px 16px 48px; }
  .auth-card { padding: 28px 20px; border-radius: 12px; }
}

/* ========================================
   숙소 목록 / 검색
   ======================================== */

.accommodation-page {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.accommodation-header {
  margin-bottom: 28px;
}

.accommodation-header h1 {
  margin: 0 0 8px;
}

.accommodation-header p {
  margin: 0;
  color: #666;
}


/* 검색 영역 */

.search-box {
  padding: 24px;
  margin-bottom: 36px;

  border: 1px solid #ddd;
  border-radius: 12px;

  background: #fff;
}

#accommodation-search-form,
#home-search-form {
  display: grid;

  grid-template-columns:
    minmax(180px, 2fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(90px, 0.7fr)
    auto;

  gap: 12px;

  align-items: end;
}

.search-field {
  display: flex;
  flex-direction: column;

  gap: 6px;
}

.search-field label {
  font-size: 14px;
  font-weight: 600;
}

.search-field input {
  box-sizing: border-box;

  width: 100%;

  height: 42px;

  padding: 0 12px;

  border: 1px solid #ccc;
  border-radius: 8px;

  font: inherit;
}


/* 결과 */

.result-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

.result-header h2 {
  margin: 0;
}

#result-count {
  color: #666;
}


/* 숙소 카드 */

.accommodation-list {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(280px, 1fr)
    );

  gap: 20px;
}

.accommodation-card {
  overflow: hidden;

  border: 1px solid #ddd;
  border-radius: 12px;

  background: #fff;
}

.accommodation-card-content {
  padding: 20px;
}

.accommodation-card h3 {
  margin: 0 0 10px;

  font-size: 20px;
}

.accommodation-address {
  margin: 0 0 10px;

  color: #666;

  font-size: 14px;
}

.accommodation-description {
  min-height: 44px;

  margin: 0 0 16px;

  line-height: 1.5;
}

.accommodation-time {
  margin: 0 0 18px;

  color: #555;

  font-size: 14px;
}

.accommodation-detail-button {
  display: inline-block;

  text-decoration: none;
}


/* 화면 폭이 작은 경우 */

@media (max-width: 850px) {

  #accommodation-search-form,
  #home-search-form {
    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 560px) {

  .accommodation-page {
    width: min(
      100% - 24px,
      1100px
    );

    padding-top: 30px;
  }

  #accommodation-search-form,
  #home-search-form {
    grid-template-columns:
      1fr;
  }

}

/* ========================================
   메인 숙소 검색
   ======================================== */

.home-page {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px 0 80px;
}


/* 메인 상단 */

.home-hero {
  text-align: center;
}

.home-hero h1 {
  margin: 0 0 10px;
  font-size: 36px;
}

.home-hero > p {
  margin: 0 0 32px;
  color: var(--text-sub);
  font-size: 17px;
}


/* 메인 검색창 */

.home-search-box {
  display: grid;

  grid-template-columns:
    minmax(200px, 2fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(90px, 0.7fr)
    100px;

  gap: 12px;
  align-items: end;

  padding: 24px;

  background: var(--card);

  border: 1px solid var(--border);
  border-radius: 16px;

  box-shadow:
    0 8px 24px
    rgba(31, 35, 40, 0.06);

  text-align: left;
}

.home-search-field {
  min-width: 0;
}

.home-search-field label {
  display: block;

  margin-bottom: 7px;

  font-size: 14px;
  font-weight: 700;
}

.home-search-field input {
  width: 100%;
  height: 48px;

  padding: 0 13px;

  border: 1px solid var(--border);
  border-radius: var(--radius);

  background: #fff;

  font: inherit;
  color: var(--text);
}

.home-search-button {
  height: 48px;

  border: 0;
  border-radius: var(--radius);

  background: var(--brand);

  color: #fff;

  font: inherit;
  font-weight: 700;

  cursor: pointer;
}

.home-search-button:hover {
  background: var(--brand-dark);
}

#home-search-alert {
  max-width: 650px;

  margin: 16px auto 0;

  text-align: left;
}


/* 숙소 미리보기 */

.home-accommodations {
  margin-top: 70px;
}

.home-section-header {
  display: flex;

  align-items: end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}

.home-section-header h2 {
  margin: 0 0 4px;

  font-size: 26px;
}

.home-section-header p {
  margin: 0;

  color: var(--text-sub);
}

.home-section-header > a {
  font-weight: 700;
}

.home-accommodation-list {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;
}

.home-accommodation-card {
  padding: 24px;

  background: var(--card);

  border: 1px solid var(--border);
  border-radius: 14px;
}

.home-accommodation-card h3 {
  margin: 0 0 10px;

  font-size: 21px;
}

.home-accommodation-address {
  margin: 0 0 12px;

  color: var(--text-sub);

  font-size: 14px;
}

.home-accommodation-description {
  min-height: 48px;

  margin: 0 0 22px;
}

.home-accommodation-time {
  margin: 0 0 20px;

  color: var(--text-sub);

  font-size: 14px;
}


/* 반응형 */

@media (max-width: 900px) {

  .home-search-box {
    grid-template-columns:
      1fr 1fr;
  }

  .home-search-keyword {
    grid-column:
      1 / -1;
  }

  .home-search-button {
    width: 100%;
  }

  .home-accommodation-list {
    grid-template-columns:
      1fr 1fr;
  }
}


@media (max-width: 600px) {

  .home-page {
    width:
      calc(100% - 24px);

    padding-top: 40px;
  }

  .home-hero h1 {
    font-size: 28px;
  }

  .home-search-box {
    grid-template-columns:
      1fr;
  }

  .home-search-keyword {
    grid-column:
      auto;
  }

  .home-accommodation-list {
    grid-template-columns:
      1fr;
  }

  .home-section-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}

/* ========================================
   공통 이미지 placeholder
   ======================================== */

.image-placeholder {
  display: flex;
  width: 100%;
  height: 100%;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      #eef0f3,
      #dfe4ea
    );

  color: var(--text-sub);

  font-size: 14px;
}


/* ========================================
   메인 / 목록 이미지
   ======================================== */

.home-accommodation-image {
  height: 180px;

  margin:
    -24px -24px 20px;

  overflow: hidden;

  border-radius:
    14px 14px 0 0;
}

.home-accommodation-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.accommodation-card-image {
  width: 100%;
  height: 200px;

  overflow: hidden;
}

.accommodation-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ========================================
   숙소 상세 전체
   ======================================== */

.hotel-detail-page {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  padding:
    30px 0 80px;
}


.hotel-back {
  margin-bottom: 18px;
}

.hotel-back a {
  color: var(--text-sub);

  font-weight: 600;
}


/* ========================================
   상세 사진 갤러리
   ======================================== */

.hotel-gallery {
  display: grid;

  grid-template-columns:
    1.8fr 1fr;

  gap: 8px;

  height: 430px;

  margin-bottom: 18px;
}


.hotel-gallery-main {
  overflow: hidden;

  border-radius:
    16px 0 0 16px;
}


.hotel-gallery-main img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.hotel-gallery-side {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-rows:
    1fr 1fr;

  gap: 8px;
}


.hotel-gallery-sub {
  overflow: hidden;
}


.hotel-gallery-sub:nth-child(2) {
  border-radius:
    0 16px 0 0;
}


.hotel-gallery-sub:nth-child(4) {
  border-radius:
    0 0 16px 0;
}


.hotel-gallery-sub img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ========================================
   숙소 제목/요약
   ======================================== */

.hotel-summary {
  display: flex;

  justify-content:
    space-between;

  gap: 30px;

  padding: 26px;

  margin-bottom: 14px;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius: 14px;
}


.hotel-summary h1 {
  margin:
    8px 0 8px;

  font-size: 30px;
}


.hotel-address {
  margin: 0;

  color: var(--text-sub);
}


.hotel-status {
  display: inline-block;

  padding:
    5px 10px;

  border-radius:
    999px;

  background:
    var(--ok-bg);

  color:
    var(--ok);

  font-size: 13px;

  font-weight: 700;
}


.hotel-status.inactive {
  background:
    var(--error-bg);

  color:
    var(--error);
}


.hotel-time-box {
  display: flex;

  gap: 30px;

  flex: none;

  align-items: center;
}


.hotel-time-box div {
  min-width: 90px;
}


.hotel-time-box span {
  display: block;

  color:
    var(--text-sub);

  font-size: 13px;

  margin-bottom: 4px;
}


.hotel-time-box strong {
  font-size: 18px;
}


/* ========================================
   상세 탭
   ======================================== */

.hotel-tabs {
  display: flex;

  gap: 30px;

  padding:
    0 24px;

  margin-bottom: 18px;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    12px;
}


.hotel-tabs a {
  padding:
    16px 4px;

  color:
    var(--text);

  font-weight: 700;
}


.hotel-tabs a:hover {
  color:
    var(--brand);

  text-decoration: none;
}


/* ========================================
   숙소 정보 카드
   ======================================== */

.hotel-content-card {
  padding: 26px;

  margin-bottom: 16px;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    14px;
}


.hotel-content-card h2 {
  margin:
    0 0 18px;

  font-size: 23px;
}


.hotel-description {
  margin: 0;

  color:
    var(--text-sub);

  line-height: 1.8;
}


/* ========================================
   편의시설
   ======================================== */

.hotel-amenities {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px 28px;

  list-style: none;

  padding: 0;
  margin: 0;
}


.hotel-amenities li::before {
  content: '✓';

  margin-right: 10px;

  color:
    var(--ok);

  font-weight: 800;
}


/* ========================================
   이용 규칙
   ======================================== */

.hotel-rules {
  margin: 0;

  padding-left: 22px;

  color:
    var(--text-sub);
}


.hotel-rules li {
  margin-bottom: 10px;
}


/* ========================================
   객실
   ======================================== */

.hotel-rooms-section {
  margin-top: 36px;
}


.hotel-room-heading {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  margin-bottom: 16px;
}


.hotel-room-heading h2 {
  margin: 0;

  font-size: 27px;
}


.hotel-room-heading span {
  color:
    var(--text-sub);
}


.hotel-room-list {
  display: flex;

  flex-direction: column;

  gap: 16px;
}


/* Agoda 느낌의 가로형 객실 카드 */

.hotel-room-card {
  display: grid;

  grid-template-columns:
    1.1fr 1.5fr 0.8fr;

  min-height: 230px;

  overflow: hidden;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    16px;
}


.hotel-room-left {
  padding: 18px;

  border-right:
    1px solid var(--border);
}


.hotel-room-image {
  height: 145px;

  overflow: hidden;

  margin-bottom: 14px;

  border-radius:
    10px;
}


.hotel-room-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.hotel-room-info h3 {
  margin:
    0 0 6px;

  font-size: 21px;
}


.hotel-room-info p {
  margin: 0;

  color:
    var(--text-sub);
}


.hotel-room-center {
  padding: 24px;

  border-right:
    1px solid var(--border);
}


.hotel-room-center strong {
  display: block;

  margin-bottom: 18px;

  font-size: 17px;
}


.hotel-room-center p {
  margin:
    10px 0;
}


.hotel-room-available {
  color:
    var(--ok);

  font-weight: 700;
}


.hotel-room-soldout {
  color:
    var(--error);

  font-weight: 700;
}


.hotel-room-right {
  display: flex;

  flex-direction: column;

  align-items:
    flex-end;

  justify-content:
    center;

  padding: 24px;
}


.hotel-room-right > span {
  color:
    var(--text-sub);

  font-size: 13px;
}


.hotel-room-price {
  margin:
    5px 0 20px;

  color:
    var(--brand);

  font-size: 28px;
}


.hotel-booking-button {
  min-width: 130px;

  padding:
    12px 20px;

  border-radius:
    999px;

  text-align: center;

  background:
    var(--brand);

  color:
    #fff !important;

  font-weight: 800;
}


.hotel-booking-button:hover {
  background:
    var(--brand-dark);

  text-decoration: none;
}


.hotel-booking-button.disabled {
  opacity: 0.45;

  pointer-events: none;
}


/* ========================================
   반응형
   ======================================== */

@media (
  max-width: 800px
) {

  .hotel-gallery {
    display: block;

    height: 280px;
  }


  .hotel-gallery-main {
    height: 100%;

    border-radius: 14px;
  }


  .hotel-gallery-side {
    display: none;
  }


  .hotel-summary {
    flex-direction:
      column;
  }


  .hotel-time-box {
    justify-content:
      flex-start;
  }


  .hotel-tabs {
    overflow-x: auto;
  }


  .hotel-amenities {
    grid-template-columns:
      1fr 1fr;
  }


  .hotel-room-card {
    grid-template-columns:
      1fr;
  }


  .hotel-room-left,
  .hotel-room-center {
    border-right: 0;

    border-bottom:
      1px solid var(--border);
  }


  .hotel-room-right {
    align-items:
      flex-start;
  }

}

/* ========================================
   예약 생성
   ======================================== */

.booking-page {
  width:
    min(
      1100px,
      calc(100% - 40px)
    );

  margin: 0 auto;

  padding:
    34px 0 80px;
}


.booking-back {
  margin-bottom: 24px;
}


.booking-back a {
  color:
    var(--text-sub);

  font-weight: 600;
}


.booking-title {
  margin-bottom: 28px;
}


.booking-title h1 {
  margin:
    0 0 6px;

  font-size: 30px;
}


.booking-title p {
  margin: 0;

  color:
    var(--text-sub);
}


/* ========================================
   예약 레이아웃
   ======================================== */

.booking-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    330px;

  gap: 24px;

  align-items: start;
}


.booking-main {
  display: flex;

  flex-direction: column;

  gap: 18px;
}


/* ========================================
   공통 카드
   ======================================== */

.booking-card {
  padding: 26px;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    14px;
}


.booking-card h2 {
  margin:
    0 0 20px;

  font-size: 22px;
}


/* ========================================
   선택 객실 요약
   ======================================== */

.booking-room-summary {
  display: grid;

  grid-template-columns:
    180px 1fr;

  gap: 20px;
}


.booking-room-image {
  height: 135px;

  overflow: hidden;

  border-radius:
    10px;
}


.booking-room-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.booking-accommodation-name {
  margin:
    0 0 5px;

  color:
    var(--brand);

  font-weight: 700;
}


.booking-room-summary-info h3 {
  margin:
    0 0 8px;

  font-size: 22px;
}


.booking-address,
.booking-capacity {
  margin:
    6px 0;

  color:
    var(--text-sub);
}


/* ========================================
   예약 폼
   ======================================== */

.booking-form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr 0.7fr;

  gap: 14px;
}


.booking-field label {
  display: block;

  margin-bottom: 7px;

  font-weight: 700;
}


.booking-field input {
  width: 100%;

  height: 48px;

  padding:
    0 12px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  background:
    #fff;

  color:
    var(--text);

  font: inherit;
}


.booking-notice {
  margin-top: 24px;

  padding: 18px;

  background:
    var(--bg);

  border-radius:
    10px;
}


.booking-notice strong {
  display: block;

  margin-bottom: 8px;
}


.booking-notice ul {
  margin:
    0;

  padding-left:
    20px;

  color:
    var(--text-sub);

  font-size: 14px;
}


.booking-notice li {
  margin:
    5px 0;
}


/* ========================================
   오른쪽 가격 카드
   ======================================== */

.booking-price-card {
  position: sticky;

  top: 20px;

  padding: 24px;

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    14px;
}


.booking-price-card h2 {
  margin:
    0 0 24px;

  font-size: 22px;
}


.booking-price-row {
  display: flex;

  justify-content:
    space-between;

  gap: 16px;

  margin:
    14px 0;
}


.booking-price-row span {
  color:
    var(--text-sub);
}


.booking-price-divider {
  height: 1px;

  margin:
    20px 0;

  background:
    var(--border);
}


.booking-total-row {
  align-items: center;
}


.booking-total-row strong {
  color:
    var(--brand);

  font-size: 24px;
}


.booking-price-note {
  margin:
    20px 0;

  color:
    var(--text-sub);

  font-size: 13px;

  line-height: 1.6;
}


.booking-submit-button {
  width: 100%;

  height: 50px;

  border: 0;

  border-radius:
    999px;

  background:
    var(--brand);

  color:
    #fff;

  font:
    inherit;

  font-weight:
    800;

  cursor:
    pointer;
}


.booking-submit-button:hover:not(:disabled) {
  background:
    var(--brand-dark);
}


.booking-submit-button:disabled {
  opacity: 0.6;

  cursor:
    default;
}


/* ========================================
   이용자 정보 · 마일리지 · 결제수단
   ======================================== */

.booking-card h2 + .booking-card-sub {
  margin-top: -12px;
}

.booking-card-sub {
  margin: 0 0 18px;
  color: var(--text-sub);
  font-size: 14px;
}

.booking-card-sub strong {
  color: var(--brand);
}

.booking-form-grid.booking-form-grid-two {
  grid-template-columns: 1fr 1fr;
}

.booking-field input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: transparent;
}

.booking-field-help {
  margin: 8px 0 0;
  color: var(--text-sub);
  font-size: 13px;
}

.booking-mileage-input {
  display: flex;
  gap: 8px;
}

.booking-mileage-input input {
  flex: 1;
  min-width: 0;
}

.booking-inline-button {
  flex: none;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.booking-inline-button:hover:not(:disabled) { background: var(--bg); }
.booking-inline-button:disabled { color: var(--text-sub); cursor: default; }

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.payment-method,
.easy-pay-option {
  height: 52px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.payment-method:hover:not(:disabled),
.easy-pay-option:hover { background: var(--bg); }

.payment-method[aria-checked="true"],
.easy-pay-option[aria-checked="true"] {
  border: 2px solid var(--brand);
  background: var(--error-bg);
  color: var(--brand);
}

.payment-method:disabled { opacity: 0.45; cursor: default; }

.payment-method:focus-visible,
.easy-pay-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.payment-panel .booking-field + .booking-form-grid { margin-top: 14px; }

.easy-pay-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.payment-mileage-only {
  margin: 0;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 600;
}

.booking-submit-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--error-bg);
  color: var(--error);
  font-size: 13px;
}

@media (max-width: 480px) {
  .booking-form-grid.booking-form-grid-two,
  .easy-pay-options { grid-template-columns: 1fr; }
  .payment-method { padding: 0 8px; font-size: 14px; white-space: nowrap; }
}


/* ========================================
   모바일
   ======================================== */

@media (
  max-width: 780px
) {

  .booking-layout {
    grid-template-columns:
      1fr;
  }


  .booking-price-card {
    position:
      static;
  }


  .booking-room-summary {
    grid-template-columns:
      1fr;
  }


  .booking-room-image {
    height:
      220px;
  }


  .booking-form-grid {
    grid-template-columns:
      1fr;
  }

}

/* ---------- 고객센터 문의하기 ---------- */

.help-banner { padding: 18px; border-radius: var(--radius); background: var(--bg); margin: 12px 0 20px; }
.help-banner p { margin: 0 0 12px; font-weight: 600; }
.btn-block-link {
  display: flex; align-items: center; justify-content: center; height: 46px; font-size: 15px;
}
.btn-block-link:hover { text-decoration: none; color: #fff; }

.inquiry-recent-title { margin: 0 0 4px; font-size: 15px; }
.inquiry-list { list-style: none; margin: 0; padding: 0; }
.inquiry-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.inquiry-list li:last-child { border-bottom: 0; }
.inquiry-title { margin: 0; font-weight: 600; word-break: break-all; }
.inquiry-lock {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--bg); color: var(--text-sub); font-size: 11px; font-weight: 600; vertical-align: 2px;
}
.inquiry-meta { margin: 2px 0 0; font-size: 13px; color: var(--text-sub); }
.inquiry-badge { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.inquiry-badge.wait { background: var(--warn-bg); color: var(--warn); }
.inquiry-badge.done { background: var(--ok-bg); color: var(--ok); }
.inquiry-empty { margin: 12px 0; text-align: center; color: var(--text-sub); }

.btn-outline {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 46px; margin-top: 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.btn-outline:hover:not(:disabled) { background: var(--bg); text-decoration: none; }
.btn-outline:disabled { color: var(--text-sub); cursor: default; }

/* ---------- 1:1 문의 작성 ---------- */

.breadcrumb { margin: 0 0 8px; font-size: 14px; color: var(--text-sub); }
.breadcrumb a { color: var(--text-sub); }

.optional { color: var(--text-sub); font-weight: 400; font-size: 13px; }
.field-label { display: block; font-weight: 600; margin-bottom: 6px; }

.form-select, .form-textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; color: var(--text); background: #fff;
}
.form-select { height: 46px; padding: 0 12px; }
.form-textarea { min-height: 180px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.form-select:focus, .form-textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: transparent; }
.form-select[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: var(--error); }
.char-count { margin: 4px 0 0; text-align: right; font-size: 12px; color: var(--text-sub); }

.file-box {
  display: block; padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius);
  text-align: center; color: var(--text-sub); font-size: 14px; cursor: pointer; word-break: break-all;
}
.file-box:hover { background: var(--bg); }
input[type="file"]:focus-visible + .file-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.file-preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.file-preview[hidden] { display: none; }
.file-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.secret-check { margin: 4px 0 22px; }
.secret-check small { color: var(--text-sub); }

.form-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.form-actions .btn-outline { margin-top: 0; height: 50px; }


/* =========================
   리뷰
   ========================= */

.review-section {
  margin-top: 32px;
  margin-bottom: 48px;
}

.review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.review-section-header h2 {
  margin: 0 0 8px;
}

.review-section-description {
  margin: 0;
  color: #6b7280;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  margin-bottom: 24px;
  background: #f8f9fb;
  border-radius: 12px;
}

.review-summary strong {
  font-size: 28px;
}

.review-summary span {
  font-size: 20px;
}

.review-summary p {
  margin: 0;
  color: #6b7280;
}

.review-list {
  display: flex;
  flex-direction: column;
}

.review-item {
  padding: 24px 0;
  border-top: 1px solid #e5e7eb;
}

.review-item:first-child {
  border-top: 0;
}

.review-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.review-item p {
  margin: 0 0 12px;
  line-height: 1.7;
}

.review-item small {
  color: #6b7280;
}

.review-empty {
  margin: 8px 0 0;
  text-align: center;
  color: var(--text-sub);
}

#review-write-button {
  box-shadow: none;
  border: none;
  padding: 10px 18px;
}


.review-item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.review-edit-button,
.review-delete-button {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  cursor: pointer;
}

.review-edit-button:hover {
  background: #f3f4f6;
}

.review-delete-button {
  color: #dc2626;
}

.review-delete-button:hover {
  background: #fef2f2;
}

/* 수정은 후기 작성 페이지로 가는 링크, 삭제는 버튼 — 같은 모양으로 맞춘다 */
.review-edit-button,
.review-delete-button {
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

a.review-edit-button {
  display: inline-block;
  color: var(--text);
}

a.review-edit-button:hover {
  text-decoration: none;
}


.withdraw-link {
  border: 0;
  background: none;
  padding: 0;
  color: #dc2626;
  cursor: pointer;
  font: inherit;
}

.withdraw-box {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fffafa;
}

.withdraw-box h3 {
  margin-top: 0;
}

.withdraw-check {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}

.withdraw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#qna-edit-button[hidden],
#qna-delete-button[hidden] {
  display: none !important;
}

.review-item-image {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin: 12px 0;
}

/* display:block 이 hidden 속성을 덮어써 첨부 사진이 없는 글에도 빈 사진 칸이 보이지 않도록 */
.review-item-image[hidden] { display: none; }
/* ---------- 안내 카드 (관리자 화면의 로딩·권한 없음 카드가 쓴다) ---------- */

.pay-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px 28px; text-align: center;
}
.pay-card h1 { margin: 0 0 6px; font-size: 24px; }
.pay-sub { margin: 0 0 20px; color: var(--text-sub); font-size: 14px; }

.pay-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; font-weight: 800;
}
.pay-icon.ok { background: var(--ok-bg); color: var(--ok); }
.pay-icon.fail { background: var(--error-bg); color: var(--error); }
.pay-icon.wait { background: var(--warn-bg); color: var(--warn); }

.pay-actions { display: flex; gap: 10px; margin-top: 22px; }
.pay-actions > .btn-primary,
.pay-actions > .btn-outline {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 48px; margin: 0; font-size: 15px;
}
.pay-actions > a.btn-primary { color: #fff; }
.pay-actions > a:hover { text-decoration: none; }
.pay-actions > [hidden] { display: none; }

@media (max-width: 480px) {
  .pay-card { padding: 26px 18px; }
}

.find-result { list-style: none; margin: 0 0 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.find-result li { padding: 4px 0; font-weight: 600; word-break: break-all; }