/* ============================================================
   VIVA SPA (호이안 비바스파) — Hoi An old-town inspired palette
   ============================================================ */

:root{
  --cream:        #FBF3E4;
  --cream-deep:   #F2E2C6;
  --paper:        #FFFDF8;
  --ink:          #3B2A1D;
  --ink-soft:     #7A6650;
  --maroon:       #8C2E2E;
  --maroon-dark:  #6C2020;
  --maroon-tint:  #F4DEDA;
  --gold:         #C9962F;
  --gold-dark:    #A87A22;
  --gold-tint:    #F6E6BE;
  --teal:         #2E5C50;
  --teal-tint:    #DCE9E2;
  --line:         #E7D6B7;
  --shadow-sm:    0 4px 14px rgba(59,34,20,.08);
  --shadow-md:    0 14px 34px rgba(59,34,20,.14);
  --radius-lg:    22px;
  --radius-md:    16px;
  --radius-sm:    10px;
  --ff-head: "Noto Serif KR", serif;
  --ff-body: "Noto Sans KR", sans-serif;
  --header-h: 64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 10px); }
body{
  margin:0;
  font-family: var(--ff-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--ff-head); margin:0; line-height:1.3; }
p{ margin:0; }

.wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.only-mobile{ display:inline; }
.only-desktop{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight:700;
  font-size: .98rem;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-kakao{ background:#FEE500; color:#391B1B; box-shadow: var(--shadow-sm); }
.btn-kakao:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.btn-on-dark{ border-color: rgba(255,255,255,.65); color:#fff; }
.btn-on-dark:hover{ background:#fff; color: var(--maroon-dark); }
.btn-primary{ background: var(--maroon); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--maroon-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lg{ padding: 16px 28px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--header-h);
  background: rgba(251,243,228,.98);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow: 0 6px 20px rgba(59,34,20,.08); }
.header-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:8px; font-family: var(--ff-head); }
.brand-icon{ width:26px; height:26px; color: var(--maroon); flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; font-weight:700; font-size:1.05rem; color: var(--ink); }
.brand-text em{ font-style:normal; font-size:.62rem; letter-spacing:.02em; color: var(--ink-soft); font-family: var(--ff-body); font-weight:500; }

.main-nav{
  position: fixed; top: var(--header-h); left:0; right:0; bottom:0;
  background: var(--paper);
  display:flex; flex-direction:column; align-items:stretch;
  padding: 18px 20px 30px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y:auto;
}
.main-nav.is-open{ transform: translateX(0); }
.main-nav a{
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
  font-weight:600;
  font-size: 1.05rem;
  color: var(--ink);
}
.main-nav .nav-cta{
  margin-top: 14px;
  text-align:center;
  background: var(--maroon);
  color:#fff;
  border-radius: 999px;
  border-bottom:none;
}
.nav-toggle{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color: var(--ink); cursor:pointer;
}
.nav-toggle svg{ width:24px; height:24px; }

/* ---------- Section basics ---------- */
.section{ padding: 68px 0; }
.section:not(.reserve):nth-of-type(even){ background: var(--paper); }
.section-eyebrow{
  font-weight:700; font-size:.78rem; letter-spacing:.14em;
  color: var(--maroon); text-transform:uppercase; margin-bottom:10px;
}
.section-title{ font-size: 1.7rem; font-weight:700; margin-bottom:14px; color:var(--ink); }
.section-desc{ color: var(--ink-soft); font-size:1rem; margin-bottom: 30px; max-width:560px; }
.section-desc strong{ color: var(--maroon); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 46px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--gold-tint) 0%, var(--cream) 62%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-arch{ position:absolute; left:0; right:0; bottom:-2px; width:100%; height:180px; }
.hero-arch path{ fill: var(--paper); }
.hero-lanterns{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.lt{ filter: drop-shadow(0 6px 10px rgba(140,46,46,.25)); animation: sway 6s ease-in-out infinite; transform-origin: 50% 0%; }
.lt-a{ fill: var(--maroon); animation-delay:0s; }
.lt-b{ fill: var(--gold); animation-delay:.6s; }
.lt-c{ fill: var(--gold-dark); animation-delay:1.2s; }
.lt-d{ fill: var(--maroon-dark); animation-delay:.3s; }
@keyframes sway{ 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(3deg); } }

.hero-inner{ position:relative; z-index:1; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:.78rem; letter-spacing:.1em;
  color: var(--maroon); background: #fff; border:1px solid var(--line);
  padding: 7px 14px; border-radius:999px; margin-bottom:20px;
}
.eyebrow svg{ width:14px; height:14px; }
.hero h1{
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight:900; color: var(--ink);
  margin-bottom: 18px;
}
.hero h1 span{ color: var(--maroon); }
.hero-sub{ color: var(--ink-soft); font-size: 1.02rem; margin-bottom: 20px; }
.hero-promo{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--gold); color: var(--gold-dark);
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:.92rem;
  margin-bottom: 30px;
}
.hero-promo svg{ width:16px; height:16px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

.marquee{
  position:relative; z-index:1; margin-top:46px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: var(--maroon); overflow:hidden;
}
.marquee-track{ display:flex; width:max-content; animation: scroll-left 26s linear infinite; }
.marquee-track span{
  white-space:nowrap; color: var(--gold-tint); font-weight:600; font-size:.86rem;
  padding: 11px 20px;
}
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Promo ---------- */
.promo-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.promo-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;
}
.promo-card.is-visible{ opacity:1; transform:none; }
.promo-card h3{ font-size:1.1rem; margin-bottom:8px; color:var(--ink); }
.promo-card p{ color: var(--ink-soft); font-size:.94rem; line-height:1.6; }
.promo-icon{ width:30px; height:30px; color: var(--maroon); margin-bottom:12px; }
.promo-card--main{
  background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.promo-card--main h3{ color:#fff; font-size:1.3rem; }
.promo-card--main p{ color: rgba(255,255,255,.88); }
.promo-badge{
  display:inline-block; background: var(--gold); color:#3a2a06; font-weight:800; font-size:.72rem;
  padding:4px 12px; border-radius:999px; margin-bottom:12px; letter-spacing:.05em;
}
.promo-note{ margin-top:18px; color: var(--ink-soft); font-size:.82rem; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
.about-visual{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.about-visual.is-visible{ opacity:1; transform:none; }
.about-illustration{ width:100%; max-width:340px; margin:0 auto; }
.av-frame{ fill: var(--gold-tint); }
.av-wave{ fill: var(--teal-tint); }
.av-lantern-a{ fill: var(--maroon); }
.av-lantern-a-ring{ fill:none; stroke: var(--gold); stroke-width:3; }
.av-lantern-b{ fill: var(--gold); }
.av-arch{ fill:none; stroke: var(--maroon); stroke-width:4; stroke-linecap:round; }
.av-leaf{ color: var(--teal); }

.about-copy{ opacity:0; transform: translateY(18px); transition: opacity .6s ease .1s, transform .6s ease .1s; }
.about-copy.is-visible{ opacity:1; transform:none; }
.about-copy .lead{ font-weight:700; font-size:1.06rem; margin-bottom:14px; }
.about-copy p{ color: var(--ink-soft); line-height:1.75; margin-bottom:22px; }

.check-list{ display:grid; gap:12px; margin-bottom:30px; }
.check-list li{
  display:flex; align-items:center; gap:10px;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size:.94rem; color:var(--ink);
}
.check-list li svg{ width:19px; height:19px; color: var(--maroon); flex:none; }
.check-list li strong{ color: var(--maroon-dark); }

.stat-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; text-align:center; }
.stat{
  background: var(--gold-tint); border-radius: var(--radius-sm); padding: 16px 6px;
}
.stat strong{ display:block; font-family: var(--ff-head); font-size:1.25rem; color: var(--maroon); }
.stat span{ display:block; font-size:.76rem; color: var(--ink-soft); margin-top:4px; }

/* ---------- Signature ---------- */
.signature-card{
  background: linear-gradient(135deg, var(--gold-tint), var(--cream-deep));
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  position: relative;
  opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;
}
.signature-card.is-visible{ opacity:1; transform:none; }
.signature-text h2{ font-size:1.5rem; margin: 10px 0 14px; color: var(--ink); }
.signature-text h2 span{ display:block; font-size:.95rem; font-family: var(--ff-body); font-weight:600; color: var(--ink-soft); margin-top:4px; }
.signature-text > p{ color: var(--ink-soft); line-height:1.7; margin-bottom:22px; }
.signature-price{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.signature-price div{
  background:#fff; border-radius: var(--radius-sm); padding:14px 18px; min-width:150px;
  box-shadow: var(--shadow-sm);
}
.signature-price span{ display:block; font-size:.8rem; color: var(--ink-soft); margin-bottom:4px; }
.signature-price b{ font-size:1.25rem; color: var(--maroon); font-family: var(--ff-head); }
.signature-price small{ font-size:.7rem; font-weight:500; margin-left:2px; color: var(--ink-soft); }
.signature-price del{ display:block; font-size:.78rem; color: var(--ink-soft); opacity:.7; margin-top:2px; }

/* ---------- Menu / Price ---------- */
.menu-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:30px; }
.menu-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;
}
.menu-card.is-visible{ opacity:1; transform:none; }
.menu-card--best{ border-color: var(--gold); background: linear-gradient(180deg, var(--gold-tint), var(--paper) 40%); }
.menu-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.menu-card-head h3{ font-size:1.02rem; color: var(--ink); font-weight:700; }
.menu-card-head h3 span{ display:block; font-family: var(--ff-body); font-weight:500; font-size:.82rem; color: var(--ink-soft); margin-top:2px; }
.menu-tag{ background: var(--gold); color:#3a2a06; font-weight:800; font-size:.68rem; padding:4px 10px; border-radius:999px; flex:none; }
.menu-desc{ color: var(--ink-soft); font-size:.88rem; line-height:1.6; margin-bottom:16px; min-height:0; }

.price-table{ width:100%; border-collapse:collapse; }
.price-table td{ padding:9px 4px; border-top:1px dashed var(--line); font-size:.9rem; vertical-align:middle; }
.price-table tr:first-child td{ border-top:none; }
.price-table .dur{ width:20%; font-weight:700; color: var(--ink); white-space:nowrap; }
.price-table .orig{ width:38%; color: var(--ink-soft); text-decoration: line-through; font-size:.8rem; white-space:nowrap; }
.price-table .disc{ width:42%; color: var(--maroon); font-weight:700; text-align:right; white-space:nowrap; }
.price-table .disc b{ font-size:1.05rem; font-family: var(--ff-head); }
.price-table .disc small{ font-size:.68rem; font-weight:500; margin-left:2px; }

.tip-box{
  background: var(--teal-tint); border-radius: var(--radius-md); padding: 20px 22px;
  opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;
}
.tip-box.is-visible{ opacity:1; transform:none; }
.tip-box h4{ font-size:1rem; color: var(--teal); margin-bottom:6px; }
.tip-box p{ color: var(--ink-soft); font-size:.86rem; margin-bottom:12px; }
.tip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tip-row span{ background:#fff; border-radius:999px; padding:7px 14px; font-size:.82rem; font-weight:600; color: var(--teal); }

/* ---------- Amenities ---------- */
.amenity-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.amenity-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-md);
  padding: 22px 16px; text-align:center;
  opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;
}
.amenity-card.is-visible{ opacity:1; transform:none; }
.amenity-card svg{ width:32px; height:32px; color: var(--maroon); margin:0 auto 12px; }
.amenity-card h3{ font-size:.98rem; margin-bottom:6px; }
.amenity-card p{ font-size:.8rem; color: var(--ink-soft); line-height:1.55; }

/* ---------- Location ---------- */
.location-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
.location-copy{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.location-copy.is-visible{ opacity:1; transform:none; }
.info-list{ display:grid; gap:14px; margin: 22px 0 26px; }
.info-list li{ display:flex; gap:12px; align-items:flex-start; }
.info-list li svg{ width:22px; height:22px; color: var(--maroon); flex:none; margin-top:2px; }
.info-list b{ display:block; font-size:.82rem; color: var(--ink-soft); margin-bottom:2px; }
.info-list span{ font-size:.96rem; color: var(--ink); line-height:1.5; }
.info-list em{ font-style:normal; color: var(--maroon); font-weight:600; }
.location-cta{ justify-content:flex-start; }
.location-map{
  border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); min-height:280px;
  opacity:0; transform: translateY(18px); transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.location-map.is-visible{ opacity:1; transform:none; }
.location-map iframe{ width:100%; height:100%; min-height:280px; border:0; }

/* ---------- Reserve CTA ---------- */
.reserve{
  background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color:#fff; text-align:center;
  position:relative; overflow:hidden;
}
.reserve-inner{ position:relative; z-index:1; max-width:640px; }
.reserve-lantern{ width:40px; height:40px; margin:0 auto 14px; color: var(--gold); }
.reserve-eyebrow{ color: var(--gold); }
.reserve h2{ font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight:800; margin-bottom:16px; }
.reserve > .wrap > p:not(.reserve-eyebrow){ color: rgba(255,255,255,.85); margin-bottom:28px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.7); padding: 40px 0 100px; }
.footer-inner{ text-align:center; }
.footer-brand{ display:flex; align-items:center; justify-content:center; gap:8px; font-family: var(--ff-head); font-weight:700; color:#fff; margin-bottom:14px; font-size:1.05rem; }
.footer-brand em{ font-style:normal; font-size:.68rem; color: rgba(255,255,255,.6); font-family: var(--ff-body); font-weight:400; margin-left:4px; }
.footer-brand svg{ width:22px; height:22px; color: var(--gold); }
.footer-addr{ font-size:.82rem; margin-bottom:8px; }
.footer-biz{ font-size:.76rem; margin-bottom:10px; color: rgba(255,255,255,.5); }
.footer-copy{ font-size:.74rem; color: rgba(255,255,255,.45); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index:150;
  display:flex; gap:10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,253,248,.92); backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  transform: translateY(0); transition: transform .3s ease;
}
.sticky-cta.is-hidden{ transform: translateY(110%); }
.sticky-cta .btn{ flex:1; padding:13px 10px; font-size:.9rem; }

/* ============================================================
   Tablet
   ============================================================ */
@media (min-width: 720px){
  .only-mobile{ display:none; }
  .only-desktop{ display:inline; }
  .section-title{ font-size:2.1rem; }
  .promo-grid{ grid-template-columns: repeat(2,1fr); }
  .amenity-grid{ grid-template-columns: repeat(3,1fr); }
  .about-grid{ grid-template-columns: .8fr 1fr; }
  .location-grid{ grid-template-columns: 1fr 1fr; }
  .signature-card{ padding: 44px 46px; }
  .menu-grid{ grid-template-columns: repeat(2,1fr); }
  .hero{ padding-top: calc(var(--header-h) + 80px); padding-bottom:60px; }
}

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width: 1024px){
  :root{ --header-h: 78px; }
  .site-header .wrap{ padding: 0 32px; }
  .nav-toggle{ display:none; }
  .main-nav{
    position:static; transform:none; flex-direction:row; align-items:center;
    background:transparent; padding:0; gap: 30px; overflow:visible; width:auto;
  }
  .main-nav a{ border-bottom:none; padding:8px 2px; font-size:.96rem; position:relative; }
  .main-nav a:not(.nav-cta)::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--maroon);
    transform: scaleX(0); transition: transform .2s ease;
  }
  .main-nav a:not(.nav-cta):hover::after{ transform: scaleX(1); }
  .main-nav .nav-cta{ margin-top:0; padding:11px 22px; }

  .hero h1{ font-size: 3.4rem; }
  .promo-grid{ grid-template-columns: repeat(4,1fr); }
  .promo-card--main{ grid-column: span 1; }
  .menu-grid{ grid-template-columns: repeat(3,1fr); }
  .amenity-grid{ grid-template-columns: repeat(6,1fr); }
  .stat-row{ max-width:420px; }
  .sticky-cta{ display:none; }
  .section{ padding: 100px 0; }
}