:root {
  --bg: #F3ECE0;
  --bg-2: #EAE1D2;
  --surface: #FBF7F0;
  --surface-2: #FFFFFF;
  --ink: #221F1A;
  --ink-soft: #5B564C;
  --ink-faint: #8A8374;
  --green: #1F3B2D;
  --green-deep: #12261E;
  --green-on: #F3ECE0;
  --green-soft: #E3E9E1;
  --brass: #A9793C;
  --brass-soft: #F1E4CE;
  --line: #DED2BB;
  --line-strong: #C9BB9F;
  --shadow: 0 18px 40px -22px rgba(18, 38, 30, 0.35);
  --pad-x: 100px;
  --pad-x-mobile: 24px;
  --pad-md: 4rem;
  --pad-md-mobile: 2.5rem;
  --pad-sm: 2rem;
  --pad-sm-mobile: 1.25rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 120%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Noto Sans',
    'S-CoreDream', 'NanumGothic', '나눔고딕', sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }
button { font-family: inherit; }

.page { max-width: 1380px; margin: 0 auto; padding: 0 var(--pad-x-mobile); }
@media (min-width: 760px) { .page { padding: 0 var(--pad-x); } }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem var(--pad-x-mobile) 1rem;
  max-width: 1380px; margin: 0 auto;
}
@media (min-width: 760px) { .topbar { padding: 1.6rem var(--pad-x) 1rem; } }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  width: 168px; height: 168px; flex-shrink: 0; object-fit: cover;
  clip-path: circle(50%);
}

a:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center;
  padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile);
}
@media (min-width: 760px) { .hero { padding: var(--pad-sm) 0 var(--pad-md); } }
@media (min-width: 900px) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

.hero-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brass);
  text-transform: uppercase; margin-bottom: 0.9rem;
}
.hero-copy h1 {
  font-size: clamp(2.1rem, 3.6vw + 1rem, 3.3rem); font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-copy .sub { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 34ch; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.fact-chip {
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 0.5rem 0.95rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn {
  border: none; cursor: pointer; border-radius: 0;
  font-weight: 700; font-size: 0.92rem; padding: 0.85rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--green); color: var(--green-on); }
.btn-primary:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* hero-art는 사진이 들어오기 전엔 일러스트(svg)를, image-slot.js가 assets/images/hero.jpg를
   찾으면 자동으로 사진으로 교체합니다 (has-photo 클래스가 svg를 가리고 배경사진을 보여줌) */
.hero-art {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(180deg, var(--green-soft), var(--bg-2));
  background-size: cover; background-position: center;
  border: 1px solid var(--line); position: relative;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-art.has-photo svg { display: none; }

/* ---------- Amenities ---------- */
.amenities {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem;
  padding: var(--pad-sm-mobile) 0; border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .amenities { padding: var(--pad-sm) 0; } }
@media (min-width: 640px) { .amenities { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .amenities { grid-template-columns: repeat(6, 1fr); } }
.amenity {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  padding: 1rem; background: var(--surface); border: 1px solid var(--line);
}
.amenity svg { width: 22px; height: 22px; color: var(--green); }
.amenity span { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }

/* ---------- Section heading ---------- */
.section-head { padding-top: 1rem; margin-bottom: 1.6rem; }
.section-head .eyebrow {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brass);
  text-transform: uppercase;
}
.section-head h2 { font-size: clamp(1.4rem, 1.4vw + 1rem, 1.9rem); font-weight: 800; margin-top: 0.5rem; }

/* ---------- Booking (네이버 예약으로 연결) ---------- */
.booking { padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile); }
@media (min-width: 760px) { .booking { padding: var(--pad-sm) 0 var(--pad-md); } }

.booking-card {
  background: var(--green); color: var(--green-on);
  padding: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
}
.booking-card .bc-text h3 { font-size: 1.15rem; font-weight: 800; }
.booking-card .bc-text p { margin-top: 0.5rem; font-size: 0.88rem; opacity: 0.85; max-width: 42ch; }
.booking-card .btn-primary { background: var(--bg); color: var(--green-deep); flex-shrink: 0; }

.booking-hints { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.2rem; }
.booking-hints .hint { font-size: 0.8rem; color: var(--ink-soft); }
.booking-hints .hint b { color: var(--ink); }

/* ---------- Gallery (공간 둘러보기) ---------- */
.gallery { padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile); scroll-margin-top: 1.5rem; }
@media (min-width: 760px) { .gallery { padding: var(--pad-sm) 0 var(--pad-md); } }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
@media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
  aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--line);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  flex-direction: column; color: var(--ink-faint);
}
.gallery-item svg { width: 22px; height: 22px; }
.gallery-item .placeholder-label { font-size: 0.74rem; font-weight: 600; }
.gallery-item.has-photo .placeholder-label,
.gallery-item.has-photo svg { display: none; }

/* ---------- Video (소개 영상) ---------- */
.video { padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile); scroll-margin-top: 1.5rem; }
@media (min-width: 760px) { .video { padding: var(--pad-sm) 0 var(--pad-md); } }
.video-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.video-frame {
  aspect-ratio: 16 / 9; max-width: 900px; flex: 1 1 600px; background: var(--green-deep);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.video-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.video-placeholder { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(243, 236, 224, 0.55); }
.video-placeholder svg { width: 40px; height: 40px; }
.video-placeholder span { font-size: 0.8rem; font-weight: 600; }

/* ---------- Location (오시는길) ---------- */
.location { padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile); scroll-margin-top: 1.5rem; }
@media (min-width: 760px) { .location { padding: var(--pad-sm) 0 var(--pad-md); } }
.location-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .location-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.location-info { display: flex; flex-direction: column; gap: 0.7rem; }
.location-info .info-row { font-size: 0.9rem; color: var(--ink-soft); }
.location-info .info-row b { color: var(--ink); display: inline-block; min-width: 4.5em; margin-right: 0.6rem; }
.map-preview {
  aspect-ratio: 4 / 3; background: var(--bg-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.map-preview svg { width: 36px; height: 36px; color: var(--green); opacity: 0.5; }
.map-overlay-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.map-overlay-btn:hover { transform: translate(-50%, -50%); }

/* ---------- Contact (문의) ---------- */
.contact { padding: var(--pad-sm-mobile) 0 var(--pad-md-mobile); scroll-margin-top: 1.5rem; }
@media (min-width: 760px) { .contact { padding: var(--pad-sm) 0 var(--pad-md); } }
.contact-form {
  display: flex; flex-direction: column; gap: 1.1rem; max-width: 640px;
  background: var(--surface); border: 1px solid var(--line); padding: 1.8rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.form-row input, .form-row textarea {
  border: 1px solid var(--line-strong); padding: 0.7rem 0.85rem;
  background: var(--surface-2); color: var(--ink); font-size: 0.9rem; font-family: inherit;
}
.form-row textarea { resize: vertical; min-height: 6rem; }
.consent-row {
  display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem;
  color: var(--ink-soft); background: var(--bg-2); padding: 0.9rem; line-height: 1.5;
}
.consent-row input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }
.form-submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { box-shadow: none; transform: none; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line); padding: var(--pad-sm-mobile) 0 80px;
  display: flex; flex-direction: column; gap: 0.6rem;
}
@media (min-width: 760px) { footer { padding: var(--pad-sm) 0 80px; } }
footer .f-name { font-weight: 800; font-size: 1rem; }
footer .f-meta { font-size: 0.8rem; color: var(--ink-faint); }
.social-links { display: flex; gap: 0.8rem; }
.social-icon { width: 160px; height: 160px; display: block; }
.social-icon svg { width: 100%; height: 100%; display: block; }
.social-icon:hover { opacity: 0.85; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--bg); padding: 0.8rem 1.2rem;
  font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.01s; } }