/* UTOP MARINA — prototype draft styles
   콘텐츠/이미지는 현재 운영 사이트(www.utopmarina.com)에서 가져온 링크값 기반.
   실제 빌드(Next.js + Supabase)는 utopmarina_dev_plan_structured.md 참조. */

:root {
  --ink: #0d1f2a;
  --ocean: #15596b;
  --teal: #1f7a86;
  --brass: #b8924f;
  --gold: #c9a86a;
  --sand: #f6f2ea;
  --mist: #eef2f3;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }

.font-serif { font-family: "Cormorant Garamond", "Pretendard", serif; }

/* eyebrow label */
.eyebrow {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 600;
}

/* hero */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }
.hero-veil { background: linear-gradient(180deg, rgba(8,22,30,.45) 0%, rgba(8,22,30,.15) 35%, rgba(8,22,30,.65) 100%); }

/* cards */
.card-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.room-card { transition: transform .35s ease, box-shadow .35s ease; }
.room-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(13,31,42,.45); }
.room-card:hover .room-card-img { transform: scale(1.06); }
.room-card-img { transition: transform .6s ease; }

.exp-card { transition: transform .4s ease; }
.exp-card:hover { transform: translateY(-4px); }
.exp-card:hover .exp-img { transform: scale(1.05); }
.exp-img { transition: transform .8s ease; }

/* booking bar */
.booking-field { border-right: 1px solid rgba(13,31,42,.12); }
.booking-field:last-of-type { border-right: 0; }

/* header: transparent over hero, solid on scroll */
#site-header { transition: background .35s ease, box-shadow .35s ease, color .35s ease; }
#site-header.scrolled, #site-header.header-solid {
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(13,31,42,.08); color: var(--ink);
}
#site-header.scrolled .nav-on-dark, #site-header.header-solid .nav-on-dark { color: var(--ink); }
#site-header.scrolled .logo-light, #site-header.header-solid .logo-light { display: none; }
#site-header:not(.scrolled):not(.header-solid) .logo-dark { display: none; }

/* nav underline */
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0;
  background: var(--brass); transition: width .3s ease;
}
.navlink:hover::after { width: 100%; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .reveal, .room-card, .room-card-img, .exp-card, .exp-img { transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}