/* ============================================
   다낭 풀빌라 - Coastal Luxury Design System
   ============================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Noto+Serif+KR:wght@400;500;600;700;900&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Colors - Bright Coastal Luxury */
  --c-primary: #E85A4F;          /* coral red */
  --c-primary-dark: #D03F33;
  --c-primary-soft: #FCE8E5;
  --c-gold: #C9A961;             /* warm gold accent */
  --c-gold-dark: #A8884B;
  --c-gold-soft: #F5EFE0;
  --c-teal: #2A9D8F;             /* ocean teal */
  --c-teal-soft: #E0F2EF;

  --c-bg: #FFFFFF;
  --c-bg-soft: #FAF7F4;          /* warm off-white */
  --c-bg-cream: #F5F0E8;
  --c-bg-blue: #F4F8FB;
  --c-line: #EAE4DB;
  --c-line-soft: #F2EDE5;

  --c-ink: #1A1A1A;
  --c-ink-2: #4A4A4A;
  --c-ink-3: #7A7A7A;
  --c-ink-4: #A8A8A8;

  --c-success: #2A9D8F;
  --c-warning: #E9C46A;
  --c-danger: #E76F51;

  /* Typography */
  --f-display: 'Playfair Display', 'Noto Serif KR', serif;
  --f-serif-kr: 'Noto Serif KR', 'Playfair Display', serif;
  --f-body: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'DM Mono', 'Courier New', monospace;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(26,26,26,.04), 0 1px 3px rgba(26,26,26,.06);
  --sh-md: 0 4px 12px rgba(26,26,26,.06), 0 2px 4px rgba(26,26,26,.04);
  --sh-lg: 0 16px 40px rgba(26,26,26,.08), 0 4px 12px rgba(26,26,26,.06);
  --sh-xl: 0 32px 80px rgba(26,26,26,.12), 0 8px 24px rgba(26,26,26,.08);
  --sh-coral: 0 8px 24px rgba(232,90,79,.25);
  --sh-gold: 0 8px 24px rgba(201,169,97,.30);

  /* Transition */
  --tr: 220ms cubic-bezier(.4,0,.2,1);
  --tr-slow: 440ms cubic-bezier(.4,0,.2,1);

  /* Container */
  --max-w: 1280px;
  --nav-h: 76px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  font-feature-settings: "ss03", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1,h2,h3,h4,h5,h6 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }

/* ===== Utilities ===== */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s-5); }
.container-lg { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
.text-display { font-family: var(--f-display); font-style: italic; font-weight: 500; }
.text-serif { font-family: var(--f-serif-kr); }
.text-mono { font-family: var(--f-mono); letter-spacing: -.02em; }
.text-gold { color: var(--c-gold-dark); }
.text-coral { color: var(--c-primary); }
.text-muted { color: var(--c-ink-3); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-line-soft);
  height: var(--nav-h);
}
.nav-wrap {
  max-width: var(--max-w); margin: 0 auto;
  height: 100%; padding: 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-6);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-style: italic; font-weight: 700;
  font-size: 22px; letter-spacing: -.01em; color: var(--c-ink);
  white-space: nowrap;
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-gold) 100%);
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-display); font-weight: 800; font-style: normal; font-size: 18px;
  box-shadow: var(--sh-coral);
}
.brand-sub {
  font-family: var(--f-body); font-style: normal; font-weight: 500;
  font-size: 11px; color: var(--c-ink-3); letter-spacing: .15em; text-transform: uppercase;
  margin-top: -4px; display: block;
}
.nav-list {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0; flex: 1;
  flex-wrap: nowrap;
}
.nav-list li { white-space: nowrap; flex-shrink: 0; }
.nav-link {
  position: relative; display: inline-block;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  white-space: nowrap;
  transition: color var(--tr), background var(--tr);
}
.nav-link:hover { color: var(--c-ink); background: var(--c-bg-soft); }
.nav-link.active {
  color: var(--c-primary); font-weight: 600;
}
.nav-link.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--c-primary); border-radius: 2px;
}

/* Dropdown */
.nav-item-drop { position: relative; }
.nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); list-style: none; margin: 6px 0 0; padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .2s; z-index: 100;
}
.nav-item-drop:hover .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop li { width: 100%; }
.nav-drop a {
  display: block; padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--c-ink-2); text-decoration: none;
  transition: all .15s;
}
.nav-drop a:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.nav-drop a.active { color: var(--c-primary); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: var(--s-2); }
.btn-mobile-menu { display: none; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-bg-soft); }
.btn-mobile-menu svg { width: 22px; height: 22px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  transition: all var(--tr);
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-primary); color: #fff;
  box-shadow: var(--sh-coral);
}
.btn-primary:hover { background: var(--c-primary-dark); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(232,90,79,.32); }
.btn-gold {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  color: #fff; box-shadow: var(--sh-gold);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(201,169,97,.4); }
.btn-outline {
  background: transparent; color: var(--c-ink); border: 1.5px solid var(--c-line);
}
.btn-outline:hover { border-color: var(--c-ink); }
.btn-ghost { background: var(--c-bg-soft); color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-line-soft); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===== Floating Side Actions (왼쪽 빠른 상담) ===== */
.fab-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: flex; flex-direction: column; gap: 10px;
}
.fab {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: var(--sh-lg);
  transition: all var(--tr);
  position: relative;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab-kakao { background: #FEE500; }
.fab-phone { background: var(--c-teal); color: #fff; }
.fab-quote { background: linear-gradient(135deg, var(--c-primary), var(--c-gold)); color: #fff; }
.fab svg { width: 26px; height: 26px; }
.fab-label {
  position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
  background: var(--c-ink); color: #fff;
  padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--tr);
}
.fab:hover .fab-label { opacity: 1; }
.fab-label::after {
  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 5px solid var(--c-ink);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: 80px 0 100px;
  background:
    linear-gradient(105deg, rgba(255,253,250,.88) 0%, rgba(255,250,245,.75) 40%, rgba(255,235,225,.45) 70%, rgba(232,90,79,.20) 100%),
    url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?w=1800&q=85&auto=format&fit=crop') center/cover no-repeat,
    linear-gradient(135deg, #fde6e2 0%, #f7e6c9 50%, #d8ebe8 100%);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 90% 10%, rgba(232,90,79,.18), transparent 60%),
    radial-gradient(600px 300px at 5% 90%, rgba(201,169,97,.20), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, var(--c-bg, #fff));
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-8);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-primary-dark);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero h1 {
  font-family: var(--f-serif-kr);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.08; font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: var(--s-5);
  color: var(--c-ink);
}
.hero h1 em {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  color: var(--c-primary);
  position: relative;
}
.hero h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px;
  background: var(--c-gold-soft); z-index: -1;
}
.hero p.lead {
  font-size: 18px; color: var(--c-ink-2); max-width: 540px;
  margin-bottom: var(--s-6); line-height: 1.7;
}
.hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hero-meta {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-7);
  padding-top: var(--s-5); border-top: 1px solid var(--c-line-soft);
}
.hero-meta-item .num {
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  font-size: 32px; color: var(--c-ink); line-height: 1;
}
.hero-meta-item .num span { color: var(--c-primary); }
.hero-meta-item .lbl {
  display: block; margin-top: 6px;
  font-size: 12.5px; color: var(--c-ink-3); letter-spacing: .05em; text-transform: uppercase;
}

/* Hero visual collage */
.hero-visual { position: relative; height: 540px; }
.hv-card {
  position: absolute; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-xl); background: #f0f0f0;
}
.hv-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.3) 100%);
}
.hv-1 { top: 0; right: 0; width: 70%; height: 60%; }
.hv-2 { bottom: 0; left: 0; width: 55%; height: 50%; transform: rotate(-3deg); }
.hv-3 {
  top: 35%; left: 8%; width: 38%; aspect-ratio: 1;
  border-radius: 50%; box-shadow: var(--sh-lg);
  background: linear-gradient(135deg, var(--c-gold-soft), var(--c-bg-cream));
  display: grid; place-items: center;
  z-index: 2;
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  color: var(--c-gold-dark); text-align: center;
  padding: 20px;
}
.hv-3::after { display: none; }
.hv-badge {
  position: absolute; padding: 10px 16px; border-radius: var(--r-pill);
  background: #fff; box-shadow: var(--sh-md);
  font-size: 13px; font-weight: 600; z-index: 3;
  display: flex; align-items: center; gap: 8px;
}
.hv-badge.tl { top: 20px; left: -10px; }
.hv-badge.br { bottom: 30px; right: 10px; }

/* ===== Search Bar ===== */
.search-bar {
  margin-top: var(--s-7);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: var(--sh-lg);
  display: flex; align-items: stretch; gap: 0;
  max-width: 760px;
}
.search-field {
  flex: 1;
  padding: 12px 22px;
  border-right: 1px solid var(--c-line-soft);
  cursor: pointer;
  transition: background var(--tr);
  border-radius: var(--r-pill);
}
.search-field:hover { background: var(--c-bg-soft); }
.search-field:last-of-type { border-right: 0; }
.search-field .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.search-field .val { font-size: 14px; color: var(--c-ink-3); margin-top: 2px; }
.search-field input, .search-field select {
  width: 100%; border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--c-ink); padding: 0; margin-top: 2px;
}
.search-submit {
  background: var(--c-primary); color: #fff;
  width: 56px; min-width: 56px; border-radius: 50%;
  display: grid; place-items: center;
  transition: all var(--tr);
  align-self: center;
  margin: 0 4px;
  height: 56px;
}
.search-submit:hover { background: var(--c-primary-dark); transform: scale(1.05); }
.search-submit svg { width: 22px; height: 22px; }

/* ===== Section Common ===== */
.sec { padding: var(--s-9) 0; }
.sec-tight { padding: var(--s-7) 0; }
.sec-head { margin-bottom: var(--s-7); }
.sec-head .kicker {
  display: inline-block;
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--c-primary);
  margin-bottom: 14px; font-weight: 500;
}
.sec-head h2 {
  font-family: var(--f-serif-kr); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.18;
  max-width: 720px; letter-spacing: -.02em;
}
.sec-head h2 em {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  color: var(--c-primary);
}
.sec-head p { color: var(--c-ink-3); margin-top: 14px; max-width: 600px; font-size: 16px; }
.sec-head-row {
  display: flex; align-items: end; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
}

/* ===== Tabs / Chips ===== */
.tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.tab {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  transition: all var(--tr);
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { border-color: var(--c-ink-3); color: var(--c-ink); }
.tab.active {
  background: var(--c-ink); color: #fff; border-color: var(--c-ink);
}
.tab .ic { font-size: 16px; }

/* ===== Villa Card ===== */
.villa-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
}
.villa-grid-3 { grid-template-columns: repeat(3, 1fr); }
.villa-card {
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--tr);
  position: relative;
  cursor: pointer;
}
.villa-card:hover { transform: translateY(-4px); }
.villa-card:hover .villa-thumb img { transform: scale(1.06); }
.villa-thumb {
  position: relative; aspect-ratio: 4/5;
  overflow: hidden; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-bg-cream), var(--c-line-soft));
}
.villa-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--tr-slow);
}
.villa-thumb-placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--c-ink-4);
  font-family: var(--f-display); font-style: italic; font-size: 22px;
  background: linear-gradient(135deg, #FCE8E5 0%, #F5EFE0 50%, #E0F2EF 100%);
}
.villa-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.villa-badge {
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--c-ink); box-shadow: var(--sh-sm);
}
.villa-badge.hot { background: var(--c-primary); color: #fff; }
.villa-badge.best { background: var(--c-gold); color: #fff; }
.villa-badge.new { background: var(--c-teal); color: #fff; }
.villa-fav {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  transition: all var(--tr);
}
.villa-fav:hover { transform: scale(1.1); }
.villa-fav svg { width: 18px; height: 18px; }
.villa-fav.on svg { fill: var(--c-primary); stroke: var(--c-primary); }
.villa-info { padding: var(--s-4) 4px; }
.villa-region {
  font-family: var(--f-mono); font-size: 11px; color: var(--c-primary);
  letter-spacing: .15em; text-transform: uppercase; font-weight: 500;
}
.villa-name {
  font-family: var(--f-serif-kr); font-size: 17px; font-weight: 600;
  margin: 6px 0; color: var(--c-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.villa-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--c-ink-3); margin-bottom: 10px;
}
.villa-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.villa-meta-item svg { width: 13px; height: 13px; }
.villa-stars { color: var(--c-gold); font-size: 12px; letter-spacing: 1px; }
.villa-price {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed var(--c-line);
}
.villa-price .amt {
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  font-size: 22px; color: var(--c-ink);
}
.villa-price .amt small {
  font-family: var(--f-body); font-style: normal; font-size: 12px;
  color: var(--c-ink-3); font-weight: 500; margin-left: 4px;
}
.villa-rate {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--c-ink-2); font-weight: 500;
}
.villa-rate svg { width: 14px; height: 14px; fill: var(--c-gold); }

/* ===== CTA Banner ===== */
.cta-banner {
  background:
    linear-gradient(135deg, rgba(26,26,26,.88), rgba(26,26,26,.7)),
    linear-gradient(135deg, var(--c-primary), var(--c-gold));
  color: #fff;
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(232,90,79,.4), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201,169,97,.4), transparent 40%);
  z-index: 0;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  font-family: var(--f-serif-kr); font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; font-weight: 700;
}
.cta-banner h2 em { font-family: var(--f-display); font-style: italic; color: var(--c-gold); font-weight: 500; }
.cta-banner p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 30px; }
.cta-banner .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== Feature Cards (왜 우리인가) ===== */
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
}
.feature-card {
  padding: var(--s-6) var(--s-5);
  background: #fff;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: all var(--tr);
}
.feature-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.feature-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--c-primary-soft); color: var(--c-primary);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-card.gold .feature-icon { background: var(--c-gold-soft); color: var(--c-gold-dark); }
.feature-card.teal .feature-icon { background: var(--c-teal-soft); color: var(--c-teal); }
.feature-card.dark .feature-icon { background: #1A1A1A; color: var(--c-gold); }
.feature-card h3 { font-family: var(--f-serif-kr); font-size: 19px; margin-bottom: 8px; }
.feature-card p { color: var(--c-ink-3); font-size: 14px; line-height: 1.65; }

/* ===== Process / Steps ===== */
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  position: relative;
}
.process-step { position: relative; padding-top: 30px; }
.process-step .num {
  font-family: var(--f-display); font-style: italic; font-weight: 600;
  font-size: 56px; color: var(--c-gold); line-height: 1;
  -webkit-text-stroke: 1px var(--c-gold-dark);
  margin-bottom: var(--s-4);
}
.process-step h4 { font-family: var(--f-serif-kr); font-size: 18px; margin-bottom: 8px; }
.process-step p { color: var(--c-ink-3); font-size: 14px; }

/* ===== Reviews ===== */
.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
.review-card {
  background: var(--c-bg-soft);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
}
.review-card .quote {
  font-family: var(--f-display); font-size: 60px; line-height: 1;
  color: var(--c-primary); opacity: .25;
  position: absolute; top: 16px; right: 20px;
}
.review-stars { color: var(--c-gold); font-size: 14px; margin-bottom: 10px; letter-spacing: 1px; }
.review-text { font-size: 15px; color: var(--c-ink-2); line-height: 1.7; margin-bottom: var(--s-4); }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-gold));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-family: var(--f-display); font-style: italic;
}
.review-author .name { font-weight: 600; font-size: 14px; }
.review-author .meta { font-size: 12px; color: var(--c-ink-3); }

/* ===== Footer ===== */
.site-footer {
  background: #1A1A1A;
  color: #B8B8B8;
  padding: var(--s-9) 0 var(--s-6);
  margin-top: var(--s-9);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7);
  padding-bottom: var(--s-7); border-bottom: 1px solid #333;
}
.footer-brand .brand { color: #fff; }
.footer-brand p { color: #888; font-size: 14px; line-height: 1.7; margin-top: var(--s-3); max-width: 320px; }
.footer-col h5 {
  color: #fff; font-family: var(--f-serif-kr); font-size: 15px;
  margin-bottom: var(--s-4); letter-spacing: -.01em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: #B8B8B8; font-size: 14px; transition: color var(--tr); }
.footer-col a:hover { color: var(--c-gold); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-5); flex-wrap: wrap; gap: var(--s-3);
}
.footer-bottom p { color: #666; font-size: 12.5px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: #2a2a2a; display: grid; place-items: center;
  transition: background var(--tr);
}
.footer-social a:hover { background: var(--c-primary); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }

/* ===== Forms ===== */
.field { margin-bottom: var(--s-4); }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--c-ink); margin-bottom: 6px; letter-spacing: -.01em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  background: #fff;
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(232,90,79,.1);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* ===== Page Hero (서브 페이지용) ===== */
.page-hero {
  padding: 70px 0 50px;
  background:
    linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--c-line-soft);
}
.breadcrumb {
  display: flex; gap: 6px; font-size: 13px; color: var(--c-ink-3);
  margin-bottom: var(--s-4);
}
.breadcrumb a:hover { color: var(--c-primary); }
.breadcrumb span { color: var(--c-line); }
.page-hero h1 {
  font-family: var(--f-serif-kr); font-weight: 700;
  font-size: clamp(34px, 5vw, 54px); letter-spacing: -.025em;
  margin-bottom: 14px;
}
.page-hero h1 em {
  font-family: var(--f-display); font-style: italic; font-weight: 500; color: var(--c-primary);
}
.page-hero p { color: var(--c-ink-3); font-size: 17px; max-width: 700px; }

/* ===== Filter Bar ===== */
.filter-bar {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
}
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-group label { font-size: 12px; font-weight: 600; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.filter-group select { padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 13.5px; background: var(--c-bg-soft); }
.filter-spacer { flex: 1; }
.filter-count { font-size: 13px; color: var(--c-ink-3); }
.filter-count b { color: var(--c-primary); font-family: var(--f-display); font-style: italic; font-size: 18px; }

/* ===== Detail Page ===== */
.detail-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; height: 480px; border-radius: var(--r-lg); overflow: hidden;
}
.detail-gallery > div {
  background: linear-gradient(135deg, var(--c-bg-cream), var(--c-line-soft));
  position: relative; overflow: hidden;
}
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tr); }
.detail-gallery > div:hover img { transform: scale(1.04); }
.detail-gallery > div:first-child { grid-row: 1 / 3; }
.detail-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: var(--s-7);
  margin-top: var(--s-6);
}
.detail-main h1 { font-family: var(--f-serif-kr); font-size: 38px; margin-bottom: 12px; }
.detail-stats { display: flex; gap: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--c-line-soft); border-bottom: 1px solid var(--c-line-soft); margin-bottom: var(--s-5); }
.detail-stats .stat .v { font-family: var(--f-display); font-style: italic; font-size: 26px; color: var(--c-ink); font-weight: 600; }
.detail-stats .stat .l { font-size: 12px; color: var(--c-ink-3); margin-top: 2px; }
.amenity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--s-3); }
.amenity { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-ink-2); }
.amenity .ic {
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-bg-soft);
  display: grid; place-items: center; color: var(--c-primary);
}
.amenity .ic svg { width: 18px; height: 18px; }

.booking-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: sticky; top: 96px;
  box-shadow: var(--sh-md);
}
.booking-card .price-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line-soft);
}
.booking-card .price-amt {
  font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 32px;
}
.booking-card .price-amt small {
  font-family: var(--f-body); font-style: normal; font-size: 14px;
  font-weight: 500; color: var(--c-ink-3); margin-left: 6px;
}

/* ===== Map page ===== */
.map-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 0; height: calc(100vh - var(--nav-h)); }
.map-list { background: #fff; border-right: 1px solid var(--c-line); overflow-y: auto; padding: var(--s-4); }
.map-list .villa-card { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px; border-radius: var(--r-sm); border: 1px solid var(--c-line-soft); }
.map-list .villa-card .villa-thumb { aspect-ratio: 1; width: 100px; flex-shrink: 0; border-radius: var(--r-sm); }
.map-list .villa-card .villa-info { padding: 0; flex: 1; }
.map-list .villa-card .villa-name { font-size: 14px; }
.map-list .villa-card .villa-meta { font-size: 11.5px; }
.map-canvas {
  background:
    radial-gradient(circle at 30% 40%, rgba(42,157,143,.15), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(232,90,79,.12), transparent 30%),
    linear-gradient(135deg, #E0F2EF 0%, #F4F8FB 100%);
  position: relative;
}
.map-pin {
  position: absolute; width: 36px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform var(--tr);
}
.map-pin:hover { transform: scale(1.15); z-index: 5; }
.map-pin .pin {
  width: 36px; height: 44px;
  background: var(--c-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C7 0 3 4 3 9c0 7 9 15 9 15s9-8 9-15c0-5-4-9-9-9zm0 12.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C7 0 3 4 3 9c0 7 9 15 9 15s9-8 9-15c0-5-4-9-9-9zm0 12.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.map-pin .price-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #fff; padding: 4px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
  box-shadow: var(--sh-md); border: 1px solid var(--c-line);
}

/* ===== Admin Panel ===== */
.admin-wrap { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--c-bg-soft); }
.admin-side {
  background: #1A1A1A; color: #B8B8B8;
  padding: var(--s-5) var(--s-3);
}
.admin-brand {
  color: #fff; font-family: var(--f-display); font-style: italic; font-weight: 700;
  font-size: 22px; padding: 0 var(--s-3) var(--s-5); border-bottom: 1px solid #333;
  margin-bottom: var(--s-4);
}
.admin-brand small { display: block; font-family: var(--f-body); font-style: normal; font-weight: 500; font-size: 11px; color: var(--c-gold); letter-spacing: .15em; text-transform: uppercase; margin-top: 4px; }
.admin-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-nav button {
  width: 100%; text-align: left;
  padding: 11px var(--s-3); border-radius: var(--r-sm);
  color: #b8b8b8; font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  transition: all var(--tr);
}
.admin-nav button:hover { background: #2a2a2a; color: #fff; }
.admin-nav button.active { background: var(--c-primary); color: #fff; }
.admin-nav button svg { width: 17px; height: 17px; }
.admin-side-foot { margin-top: auto; padding: var(--s-4) var(--s-3); border-top: 1px solid #333; font-size: 12px; color: #666; }

.admin-main { padding: var(--s-6); }
.admin-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }
.admin-head h1 { font-family: var(--f-serif-kr); font-size: 28px; }
.admin-head .actions { display: flex; gap: 10px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-6); }
.kpi {
  background: #fff; padding: var(--s-5); border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
}
.kpi .kpi-lbl { font-size: 12px; font-weight: 600; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi .kpi-val { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 36px; color: var(--c-ink); margin-top: 8px; }
.kpi .kpi-trend { font-size: 12px; color: var(--c-success); margin-top: 4px; font-weight: 600; }

.admin-card {
  background: #fff; border-radius: var(--r-md); border: 1px solid var(--c-line-soft);
  margin-bottom: var(--s-5); overflow: hidden;
}
.admin-card-head {
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line-soft);
  display: flex; justify-content: space-between; align-items: center;
}
.admin-card-head h3 { font-family: var(--f-serif-kr); font-size: 18px; }
.admin-card-body { padding: var(--s-5); }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  padding: 14px 16px; text-align: left; font-size: 13.5px;
  border-bottom: 1px solid var(--c-line-soft);
}
.admin-table th { font-weight: 600; color: var(--c-ink-3); text-transform: uppercase; letter-spacing: .03em; font-size: 11.5px; background: var(--c-bg-soft); }
.admin-table td { color: var(--c-ink-2); }
.admin-table tbody tr:hover { background: var(--c-bg-soft); }
.admin-table .row-actions { display: flex; gap: 6px; }
.admin-table .row-actions button {
  width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--c-bg-soft);
  display: grid; place-items: center; transition: all var(--tr);
}
.admin-table .row-actions button:hover { background: var(--c-line-soft); }
.admin-table .row-actions button.del:hover { background: var(--c-danger); color: #fff; }
.admin-table .row-actions button svg { width: 14px; height: 14px; }

.tag {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600;
}
.tag-success { background: rgba(42,157,143,.12); color: var(--c-success); }
.tag-warn { background: rgba(233,196,106,.18); color: #b8860b; }
.tag-danger { background: rgba(231,111,81,.12); color: var(--c-danger); }
.tag-info { background: var(--c-primary-soft); color: var(--c-primary-dark); }

/* Modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-bg.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--r-lg); max-width: 720px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn .3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--c-line-soft); display: flex; justify-content: space-between; align-items: center; }
.modal-head h3 { font-family: var(--f-serif-kr); font-size: 22px; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-soft); display: grid; place-items: center; }
.modal-body { padding: var(--s-6); }
.modal-foot { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--c-line-soft); display: flex; justify-content: end; gap: 10px; background: var(--c-bg-soft); }

/* Toast */
.toast-stack { position: fixed; top: 90px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1A1A1A; color: #fff; padding: 12px 18px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  box-shadow: var(--sh-lg); animation: toastIn .3s ease;
  display: flex; align-items: center; gap: 10px;
  min-width: 220px;
}
.toast.success { background: var(--c-success); }
.toast.error { background: var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* ===== Marquee ===== */
.marquee {
  background: var(--c-ink); color: #fff; padding: 12px 0;
  overflow: hidden; position: relative;
}
.marquee-track {
  display: flex; gap: 50px; white-space: nowrap;
  animation: marqueeMove 30s linear infinite;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; }
.marquee-track .dot { color: var(--c-gold); }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .villa-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .booking-card { position: static; }
}

@media (max-width: 820px) {
  .nav-list { display: none; }
  .nav-cta { display: flex; gap: 8px; }          /* 햄버거 버튼이 여기 안에 있어 보이게 유지 */
  .nav-cta > .btn-sm { display: none; }           /* 카톡상담·견적 텍스트 버튼만 숨김 */
  .btn-mobile-menu { display: grid; place-items: center; }
  .nav-list.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #fff; padding: var(--s-4); border-bottom: 1px solid var(--c-line);
    box-shadow: var(--sh-lg);
  }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-visual { height: 380px; }
  .hero-meta { gap: var(--s-4); }
  .villa-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .review-grid { grid-template-columns: 1fr; }
  .map-wrap { grid-template-columns: 1fr; height: auto; }
  .map-canvas { height: 50vh; }
  .detail-gallery { height: 320px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .detail-gallery > div:first-child { grid-row: auto; grid-column: 1/3; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-side { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .search-bar { flex-direction: column; border-radius: var(--r-md); }
  .search-field { border-right: 0; border-bottom: 1px solid var(--c-line-soft); width: 100%; }
  .search-submit { width: 100%; border-radius: var(--r-sm); margin: 4px 0 0; height: 48px; }
  .feature-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .sec { padding: var(--s-7) 0; }
  .cta-banner { padding: var(--s-7) var(--s-5); }
}

@media (max-width: 480px) {
  .villa-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 30px 0 50px; }
  .fab { width: 52px; height: 52px; }
  .fab-stack { right: 14px; bottom: 14px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-group { justify-content: space-between; }
}

/* ===== Animation utilities ===== */
.fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp .8s cubic-bezier(.4,0,.2,1) forwards; }
.fade-up-d1 { animation-delay: .1s; }
.fade-up-d2 { animation-delay: .2s; }
.fade-up-d3 { animation-delay: .3s; }
.fade-up-d4 { animation-delay: .4s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Print */
@media print {
  .site-header, .fab-stack, .site-footer { display: none; }
}

/* ============================================================
   Page Hero / Crumb / Detail Page additions
   ============================================================ */
.page-hero {
  padding: 120px 0 56px;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(232,90,79,.08), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(201,169,97,.08), transparent 60%),
    var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.crumb { font-size: 13px; color: var(--c-text-soft); margin-bottom: 12px; letter-spacing: .02em; }
.crumb a { color: var(--c-text-soft); text-decoration: none; }
.crumb a:hover { color: var(--c-primary); }
.crumb span { color: var(--c-line); margin: 0 6px; }
.crumb em { font-family: var(--font-display); font-style: italic; color: var(--c-text); }
.page-title { font-family: var(--font-serif-kr); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; }
.page-title em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--c-primary); }
.page-sub { color: var(--c-text-soft); font-size: 16px; }
.detail-main { padding: 48px 0 80px; }

.detail-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 8px;
  height: 448px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 40px;
}
.dg-cell { position: relative; overflow: hidden; background: var(--c-surface); }
.dg-main { grid-row: 1 / 3; }
.dg-cell img { width:100%; height:100%; object-fit:cover; transition: transform .5s; }
.dg-cell:hover img { transform: scale(1.04); }

/* Placeholder gradient panels for missing images */
.dg-ph { background: linear-gradient(135deg, #f5e9e7, #fdf6f0); position: relative; }
.dg-ph::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 30% 30%, rgba(232,90,79,.18), transparent 50%); }
.dg-ph-1 { background: linear-gradient(135deg, #fde6e2, #f7d9d2 60%, #efb8ad); }
.dg-ph-2 { background: linear-gradient(135deg, #f7e6c9, #ead9b3); }
.dg-ph-3 { background: linear-gradient(135deg, #d8ebe8, #b8d8d2); }
.dg-ph-4 { background: linear-gradient(135deg, #f0e0d4, #d6bfa8); }
.dg-ph-5 { background: linear-gradient(135deg, #ead7e0, #d2b9c5); }

.detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.detail-body { min-width: 0; }

.dt-top { display:flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.dt-badges { display:flex; gap: 6px; flex-wrap: wrap; }
.btn-fav {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--c-line); background: #fff;
  color: var(--c-text-soft); cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s;
}
.btn-fav:hover { color: var(--c-primary); border-color: var(--c-primary); }
.btn-fav.on { color: var(--c-primary); border-color: var(--c-primary); background: #fff5f3; }

.dt-name { font-family: var(--font-serif-kr); font-size: 32px; font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.dt-rating { display:flex; align-items:center; gap: 8px; font-size: 15px; margin-bottom: 16px; }
.dt-avg { color: var(--c-text-soft); font-size: 14px; }
.dt-chips { display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 20px; }
.chip { display:inline-block; padding: 4px 12px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; font-size: 12px; color: var(--c-text-soft); }
.dt-desc { font-size: 16px; line-height: 1.8; color: var(--c-text-soft); margin-bottom: 32px; }

.dt-specs { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 40px; padding: 20px; background: var(--c-surface); border-radius: var(--r-lg); }
.dt-spec { text-align: center; }
.dt-spec span { display:block; font-size: 12px; color: var(--c-text-soft); margin-bottom: 4px; }
.dt-spec strong { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--c-primary); font-weight: 600; }

.dt-section { margin-bottom: 40px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.dt-h3 { font-family: var(--font-serif-kr); font-size: 22px; font-weight: 700; margin: 0 0 16px; }
.dt-h3 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--c-text-soft); font-size: 16px; }

.amenity-list { list-style: none; padding: 0; margin: 0; display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.amenity-list li { display:flex; align-items:center; gap: 10px; font-size: 14px; color: var(--c-text); }
.amenity-list svg { color: var(--c-teal); flex-shrink:0; }

.dt-map-mini { position: relative; height: 200px; background: linear-gradient(135deg, #e8f0ee, #d4e2dd); border-radius: var(--r-md); overflow: hidden; margin-top: 12px; border: 1px solid var(--c-line); }
.mini-pin { position: absolute; width: 16px; height: 16px; background: var(--c-primary); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(232,90,79,.4); transform: translate(-50%,-50%); }
.mini-pin::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background: rgba(232,90,79,.2); animation: ping 2s infinite; }
@keyframes ping { 0%{transform:translate(-50%,-50%) scale(.5);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
.mini-coord { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.9); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-family: var(--font-mono); color: var(--c-text-soft); }

.rv-list { display:grid; gap: 12px; }
.rv-card { padding: 20px; background: var(--c-surface); border-radius: var(--r-md); border: 1px solid var(--c-line); }
.rv-head { display:flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rv-stars { font-size: 14px; }
.rv-meta { font-size: 13px; color: var(--c-text-soft); }
.rv-meta strong { color: var(--c-text); }
.rv-body { margin: 0; line-height: 1.7; color: var(--c-text); font-size: 15px; }

.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px dashed var(--c-line); font-size: 14px; }
.notice-list li:last-child { border: 0; }
.notice-list li::before { content:"·"; position:absolute; left:8px; color: var(--c-primary); font-size: 24px; line-height: 1; }
.notice-list strong { color: var(--c-primary); }

/* Booking card */
.booking-card {
  position: sticky; top: 96px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--sh-lg);
}
.bc-price-row { display:flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.bc-original { font-size: 14px; color: var(--c-text-soft); text-decoration: line-through; }
.bc-price { font-family: var(--font-display); font-style: italic; font-size: 32px; font-weight: 600; color: var(--c-text); }
.bc-unit { font-size: 13px; color: var(--c-text-soft); }
.bc-discount { display:inline-block; background: var(--c-primary); color:#fff; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-bottom: 16px; }

.bc-form { display:grid; gap: 10px; margin: 16px 0; }
.bc-form label { display:flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--c-text-soft); font-weight: 500; }
.bc-form input, .bc-form select {
  padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--c-text);
}
.bc-form input:focus, .bc-form select:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; border-color: var(--c-primary); }

.bc-summary { padding: 12px 0; border-top: 1px dashed var(--c-line); border-bottom: 1px dashed var(--c-line); margin-bottom: 12px; }
.bc-summary:empty { display:none; }
.sum-row { display:flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.text-primary { color: var(--c-primary); }

.bc-trust { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: 12px; color: var(--c-text-soft); }

.empty-card { text-align: center; padding: 80px 20px; }
.empty-card h3 { font-family: var(--font-serif-kr); font-size: 24px; margin: 0 0 8px; }
.empty-card p { color: var(--c-text-soft); margin: 0 0 20px; }
.muted { color: var(--c-text-soft); font-size: 14px; }

@media (max-width: 980px) {
  .detail-grid { grid-template-columns: 1fr; }
  .booking-card { position: static; }
  .detail-gallery { height: 360px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .dg-main { grid-row: auto; grid-column: 1 / 3; }
  .dg-cell:nth-child(n+5) { display: none; }
  .amenity-list { grid-template-columns: 1fr; }
  .dt-specs { grid-template-columns: repeat(2, 1fr); }
}

/* ========== Map page ========== */
.map-page { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 80px); min-height: 600px; }
.map-sidebar { background: #fff; border-right: 1px solid var(--c-line); display: flex; flex-direction: column; min-height: 0; }
.map-side-head { padding: 16px 20px; border-bottom: 1px solid var(--c-line); display: flex; gap: 12px; align-items: center; }
.map-side-sel { flex:1; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 13px; }
.map-count { font-size: 12px; color: var(--c-text-soft); white-space: nowrap; }
.map-list { flex:1; overflow-y: auto; padding: 8px 0; }
.map-li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 20px; text-decoration: none; color: var(--c-text); border-bottom: 1px solid #f5f5f5; transition: background .2s; }
.map-li:hover, .map-li.hover { background: #fdf6f0; }
.map-li-num { font-family: var(--font-display); font-style: italic; color: var(--c-primary); font-weight: 600; font-size: 18px; }
.map-li-name { display: block; font-weight: 600; font-size: 14px; }
.map-li-meta { display: block; font-size: 12px; color: var(--c-text-soft); margin-top: 2px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot-coral { background: var(--c-primary); }
.dot-gold { background: var(--c-gold); }
.map-canvas { position: relative; background: linear-gradient(135deg, #e8f0ee 0%, #d4e5e1 50%, #e2d8c4 100%); overflow: hidden; }
.map-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 40%, rgba(168,200,180,.4), transparent 30%), radial-gradient(circle at 70% 60%, rgba(232,210,170,.4), transparent 35%); }
.map-label { position: absolute; font-family: var(--font-display); font-style: italic; color: rgba(60,60,60,.4); font-size: 14px; pointer-events: none; }
.map-l-1 { right: 8%; top: 30%; } .map-l-2 { right: 18%; top: 12%; font-size: 16px; } .map-l-3 { left: 30%; top: 50%; }
.map-l-4 { left: 18%; top: 28%; font-size: 16px; } .map-l-5 { left: 5%; bottom: 30%; } .map-l-6 { right: 8%; bottom: 8%; }
.map-pins { position: absolute; inset: 0; }
.map-pin { position: absolute; transform: translate(-50%,-100%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 0; transform-origin: bottom left; background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.2); text-decoration: none; cursor: pointer; transition: all .25s; z-index: 1; }
.map-pin .pin-num { transform: rotate(45deg); }
.map-pin.gold { background: var(--c-gold); }
.map-pin:hover, .map-pin.hover { transform: translate(-50%,-110%) scale(1.2) rotate(-45deg); z-index: 10; }
.map-pin .pin-card { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) rotate(45deg); background: #fff; color: var(--c-text); padding: 10px 14px; border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--sh-md); opacity: 0; pointer-events: none; transition: opacity .2s; font-size: 12px; }
.map-pin .pin-card strong { display: block; font-size: 13px; }
.map-pin .pin-card small { color: var(--c-text-soft); }
.map-pin:hover .pin-card, .map-pin.hover .pin-card { opacity: 1; }
.map-legend { position: absolute; bottom: 20px; right: 20px; background: rgba(255,255,255,.92); padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; display: flex; gap: 16px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-soft); }
@media (max-width: 980px) { .map-page { grid-template-columns: 1fr; height: auto; } .map-sidebar { max-height: 50vh; } .map-canvas { min-height: 500px; } }

/* ========== Booking / Payment / MyBooking ========== */
.booking-page { padding: 48px 0 80px; }
.bp-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.bp-form-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 40px; }
.bp-h2 { font-family: var(--font-serif-kr); font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.bp-h2 em { font-family: var(--font-display); font-style: italic; color: var(--c-text-soft); font-size: 16px; font-weight: 500; }
.bp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bp-lbl { font-size: 12px; color: var(--c-text-soft); font-weight: 600; letter-spacing: .02em; }
.bp-lbl i { color: var(--c-primary); font-style: normal; }
.bp-field input, .bp-field select, .bp-field textarea { padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 14px; font-family: inherit; background: #fff; color: var(--c-text); transition: border-color .2s, box-shadow .2s; }
.bp-field input:focus, .bp-field select:focus, .bp-field textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(232,90,79,.12); }
.bp-checks { display: block; margin-bottom: 16px; }
.bp-chk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff; margin-top: 6px; }
.bp-chk-grid label { font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.bp-agree { padding: 16px; background: var(--c-surface); border-radius: var(--r-sm); margin-bottom: 20px; font-size: 13px; }
.bp-agree label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bp-direct { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-soft); }
.bp-aside { display: grid; gap: 16px; }
.bp-summary-card, .bp-tip-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 96px; }
.bp-tip-card { position: static; }
.bp-summary-card h3, .bp-tip-card strong { font-family: var(--font-serif-kr); font-size: 17px; font-weight: 700; margin: 0 0 14px; display: block; }
.ls-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.ls-row span { color: var(--c-text-soft); }
.ls-row strong { color: var(--c-text); font-weight: 600; }
.ls-row.big { font-size: 16px; padding: 12px 0; }
.ls-row.big strong { font-family: var(--font-display); font-style: italic; font-size: 22px; }
.ls-divider { height: 1px; background: var(--c-line); margin: 8px 0; }
.ls-note { font-size: 11px; color: var(--c-text-soft); margin: 12px 0 0; }
.pop-li { display: block; padding: 10px 0; border-bottom: 1px dashed var(--c-line); text-decoration: none; color: var(--c-text); }
.pop-li:last-child { border: 0; }
.pop-li:hover { color: var(--c-primary); }
.pop-name { display: block; font-size: 14px; font-weight: 600; }
.pop-meta { font-size: 12px; color: var(--c-text-soft); }
.pay-method h3 { font-size: 14px; font-weight: 600; margin: 16px 0 12px; color: var(--c-text-soft); }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pm-opt { padding: 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-sm); text-align: center; cursor: pointer; transition: all .2s; }
.pm-opt input { display: none; }
.pm-opt:hover { border-color: var(--c-primary); }
.pm-opt.active { border-color: var(--c-primary); background: #fff5f3; color: var(--c-primary); font-weight: 600; }
.pay-bank { padding: 16px; background: var(--c-surface); border-radius: var(--r-sm); margin: 12px 0; }
.pay-bank h4 { margin: 0 0 8px; font-size: 14px; }
.bank-line { font-family: var(--font-mono); font-size: 14px; margin: 0 0 8px; color: var(--c-primary); font-weight: 600; }
.lookup-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 32px; max-width: 720px; margin: 0 auto; }
.lookup-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; background: var(--c-surface); border-radius: var(--r-sm); }
.ltab { flex: 1; padding: 10px; background: transparent; border: 0; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--c-text-soft); transition: all .2s; }
.ltab.active { background: #fff; color: var(--c-text); box-shadow: var(--sh-sm); }
.lookup-form { display: flex; gap: 8px; }
.lookup-form input { flex: 1; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 15px; }
.lookup-form input:focus { outline: 2px solid var(--c-primary); outline-offset: -1px; }
.mybook-list { display: grid; gap: 16px; margin-top: 20px; }
.mybook-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; }
.mb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mb-id { font-family: var(--font-mono); font-size: 13px; color: var(--c-text-soft); }
.mb-status { padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.mb-pending { background: #fff3cd; color: #8a6d3b; }
.mb-confirmed { background: #d4edda; color: #155724; }
.mb-cancelled { background: #f8d7da; color: #721c24; }
.mb-completed { background: #d1ecf1; color: #0c5460; }
.mb-title { font-family: var(--font-serif-kr); font-size: 20px; margin: 0 0 14px; }
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; background: var(--c-surface); border-radius: var(--r-sm); margin-bottom: 12px; }
.mb-grid div span { display: block; font-size: 11px; color: var(--c-text-soft); margin-bottom: 4px; }
.mb-grid div strong { font-size: 14px; }
.mb-opts { font-size: 13px; color: var(--c-text-soft); padding: 8px 0; }
.mb-note { padding: 12px; background: #fffbe6; border-left: 3px solid var(--c-gold); border-radius: 4px; font-size: 13px; margin-top: 8px; }
.mb-note span { font-weight: 600; color: var(--c-text); margin-right: 6px; }
.mb-actions { display: flex; gap: 8px; margin-top: 16px; }
@media (max-width: 980px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-row { grid-template-columns: 1fr; }
  .bp-chk-grid { grid-template-columns: repeat(2, 1fr); }
  .bp-form-card { padding: 24px; }
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
  .mb-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== About / Reviews / FAQ / Info pages ========== */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ai-text .kicker { display: block; margin-bottom: 12px; }
.ai-h2 { font-family: var(--font-serif-kr); font-size: clamp(28px, 3.5vw, 44px); line-height: 1.2; margin: 0 0 24px; font-weight: 700; }
.ai-h2 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--c-primary); }
.ai-text p { font-size: 16px; line-height: 1.8; color: var(--c-text-soft); margin: 0 0 16px; }
.ai-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.ai-stats div strong { display: block; font-family: var(--font-display); font-style: italic; font-size: 28px; color: var(--c-primary); font-weight: 600; }
.ai-stats div span { font-size: 12px; color: var(--c-text-soft); }
.ai-visual { position: relative; height: 460px; }
.ai-card { position: absolute; padding: 24px; border-radius: var(--r-lg); font-family: var(--font-serif-kr); font-weight: 700; font-size: 22px; line-height: 1.3; box-shadow: var(--sh-lg); }
.ai-c1 { left: 0; top: 0; width: 220px; height: 200px; background: linear-gradient(135deg, #fde6e2, #f7d9d2); color: var(--c-primary); transform: rotate(-3deg); }
.ai-c2 { right: 20px; top: 80px; width: 200px; height: 220px; background: linear-gradient(135deg, #f7e6c9, #ead9b3); color: var(--c-text); transform: rotate(4deg); }
.ai-c3 { left: 80px; bottom: 0; width: 200px; height: 180px; background: linear-gradient(135deg, #d8ebe8, #b8d8d2); color: #2A6F69; transform: rotate(-1deg); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 32px 28px; transition: all .3s; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-primary); }
.why-num { font-family: var(--font-display); font-style: italic; font-size: 36px; color: var(--c-gold); font-weight: 600; margin-bottom: 12px; }
.why-card h3 { font-family: var(--font-serif-kr); font-size: 18px; margin: 0 0 10px; font-weight: 700; }
.why-card p { font-size: 14px; line-height: 1.7; color: var(--c-text-soft); margin: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.contact-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 28px 20px; text-align: center; text-decoration: none; color: var(--c-text); transition: all .3s; display: block; }
.contact-card:hover { border-color: var(--c-primary); transform: translateY(-2px); box-shadow: var(--sh-md); }
.cc-icon { font-size: 32px; margin-bottom: 12px; }
.contact-card strong { display: block; font-family: var(--font-serif-kr); font-size: 16px; margin-bottom: 6px; }
.contact-card span { display: block; font-size: 14px; color: var(--c-text); margin-bottom: 4px; word-break: break-all; }
.contact-card small { font-size: 11px; color: var(--c-text-soft); }
@media (max-width: 980px) {
  .about-intro { grid-template-columns: 1fr; }
  .ai-visual { height: 380px; max-width: 400px; margin: 0 auto; }
  .why-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-stats { grid-template-columns: repeat(2, 1fr); }
}

.rev-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.rs-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; text-align: center; }
.rs-card strong { display: block; font-family: var(--font-display); font-style: italic; font-size: 32px; color: var(--c-primary); font-weight: 600; }
.rs-card span { font-size: 12px; color: var(--c-text-soft); }
.rev-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.rev-toolbar select { padding: 10px 14px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 14px; font-family: inherit; background: #fff; }
.rev-toolbar .btn { margin-left: auto; }
.rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rev-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 24px; transition: border-color .2s; }
.rev-card:hover { border-color: var(--c-primary); }
.rev-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rev-stars { color: var(--c-gold); font-size: 16px; letter-spacing: .1em; }
.rev-head small { color: var(--c-text-soft); font-size: 12px; }
.rev-title { font-family: var(--font-serif-kr); font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.rev-body { font-size: 14px; line-height: 1.7; color: var(--c-text); margin: 0 0 12px; }
.rev-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed var(--c-line); font-size: 12px; }
.rev-author { color: var(--c-text); font-weight: 600; }
.rev-villa { color: var(--c-primary); text-decoration: none; }
.rev-villa:hover { text-decoration: underline; }
.rating-input { display: flex; gap: 4px; }
.r-star { background: transparent; border: 0; font-size: 28px; color: #ddd; cursor: pointer; padding: 0; }
.r-star.on { color: var(--c-gold); }

.faq-cats { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.cat-tab { padding: 8px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 999px; font-size: 13px; cursor: pointer; transition: all .2s; }
.cat-tab.active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.faq-item summary { list-style: none; padding: 20px 24px; cursor: pointer; display: flex; align-items: center; gap: 16px; font-size: 15px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .fq-q { flex: 1; }
.faq-item .fq-q b { color: var(--c-primary); margin-right: 8px; font-family: var(--font-display); font-style: italic; font-size: 18px; }
.faq-item .fq-cat { font-size: 11px; padding: 3px 10px; background: var(--c-surface); border-radius: 999px; color: var(--c-text-soft); }
.faq-item .fq-chev { color: var(--c-text-soft); transition: transform .25s; }
.faq-item[open] .fq-chev { transform: rotate(180deg); }
.faq-answer { padding: 0 24px 20px 60px; font-size: 14px; line-height: 1.8; color: var(--c-text-soft); }
.faq-answer b { color: var(--c-primary); margin-right: 8px; font-family: var(--font-display); font-style: italic; font-size: 18px; }

.info-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; }
.info-toolbar select { padding: 10px 14px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 14px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; transition: all .3s; }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.ic-thumb { aspect-ratio: 4/3; position: relative; }
.ic-ph-1 { background: linear-gradient(135deg, #fde6e2, #f7d9d2); }
.ic-ph-2 { background: linear-gradient(135deg, #f7e6c9, #ead9b3); }
.ic-ph-3 { background: linear-gradient(135deg, #d8ebe8, #b8d8d2); }
.ic-ph-4 { background: linear-gradient(135deg, #f0e0d4, #d6bfa8); }
.ic-ph-5 { background: linear-gradient(135deg, #ead7e0, #d2b9c5); }
.ic-rec { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: var(--c-primary); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.ic-body { padding: 20px; }
.ic-cat { display: inline-block; font-size: 11px; padding: 3px 10px; background: var(--c-surface); border-radius: 999px; color: var(--c-text-soft); margin-bottom: 8px; }
.ic-body h3 { font-family: var(--font-serif-kr); font-size: 18px; margin: 0 0 6px; font-weight: 700; }
.ic-area { font-size: 12px; color: var(--c-text-soft); margin: 0 0 8px; }
.ic-desc { font-size: 13px; line-height: 1.6; color: var(--c-text); margin: 0 0 8px; }
.ic-tip { font-size: 12px; color: var(--c-gold); margin: 0; padding: 8px 10px; background: #fffbe6; border-radius: 4px; }
.ic-price { font-size: 12px; color: var(--c-primary); font-weight: 600; margin: 8px 0 0; }
.info-list { display: grid; gap: 12px; }
.info-row { display: grid; grid-template-columns: 100px 1fr 40px; gap: 20px; align-items: center; padding: 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); text-decoration: none; color: var(--c-text); transition: all .2s; }
.info-row:hover { border-color: var(--c-primary); transform: translateX(4px); }
.ir-cat { font-size: 11px; padding: 4px 10px; background: var(--c-surface); border-radius: 999px; text-align: center; color: var(--c-text-soft); }
.ir-body h3 { font-family: var(--font-serif-kr); font-size: 18px; margin: 0 0 6px; }
.ir-body p { font-size: 13px; color: var(--c-text-soft); margin: 0 0 6px; }
.ir-body small { font-size: 11px; color: var(--c-text-soft); }
.ir-arrow { font-size: 24px; color: var(--c-text-soft); }
.info-row:hover .ir-arrow { color: var(--c-primary); }
.info-detail { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 48px; }
.back-link { font-size: 13px; color: var(--c-text-soft); text-decoration: none; margin-bottom: 16px; display: inline-block; }
.back-link:hover { color: var(--c-primary); }
.info-cat { display: inline-block; font-size: 11px; padding: 4px 12px; background: var(--c-surface); border-radius: 999px; color: var(--c-text-soft); margin-bottom: 16px; }
.info-title { font-family: var(--font-serif-kr); font-size: 32px; margin: 0 0 8px; line-height: 1.2; }
.info-date { font-size: 13px; color: var(--c-text-soft); margin: 0 0 32px; }
.info-content { font-size: 16px; line-height: 1.9; color: var(--c-text); }
@media (max-width: 980px) {
  .info-grid { grid-template-columns: 1fr; }
  .rev-grid { grid-template-columns: 1fr; }
  .rev-stats { grid-template-columns: repeat(2, 1fr); }
  .info-row { grid-template-columns: 1fr; gap: 8px; }
  .info-detail { padding: 24px; }
}

/* ========== Modal / Login / Admin ========== */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; backdrop-filter: blur(4px); }
.modal { background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-wide { max-width: 760px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--c-line); }
.modal-head h3 { font-family: var(--font-serif-kr); font-size: 20px; margin: 0; }
.modal-x { background: none; border: 0; font-size: 28px; cursor: pointer; color: var(--c-text-soft); padding: 0; line-height: 1; }
.modal-x:hover { color: var(--c-primary); }
.modal-body { padding: 28px; overflow-y: auto; flex: 1; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 28px; border-top: 1px solid var(--c-line); background: var(--c-surface); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.view-grid div { padding: 12px; background: var(--c-surface); border-radius: var(--r-sm); }
.view-grid span { display: block; font-size: 11px; color: var(--c-text-soft); margin-bottom: 4px; }
.view-grid strong { font-size: 14px; }

.login-body { background: linear-gradient(135deg, #fde6e2 0%, #f7e6c9 50%, #d8ebe8 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-wrap { width: 100%; max-width: 440px; }
.login-card { background: #fff; border-radius: var(--r-lg); padding: 48px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.login-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-text); margin-bottom: 32px; font-family: var(--font-serif-kr); font-weight: 700; font-size: 18px; }
.login-h1 { font-family: var(--font-serif-kr); font-size: 28px; margin: 0 0 8px; font-weight: 700; }
.login-h1 em { font-family: var(--font-display); font-style: italic; color: var(--c-primary); font-weight: 500; }

.admin-body { background: var(--c-surface); }
.admin-wrap { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.admin-side { background: #1a1a1a; color: #ddd; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.as-brand { padding: 24px 20px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; gap: 10px; font-family: var(--font-serif-kr); font-weight: 700; font-size: 16px; color: #fff; }
.as-brand small { display: block; font-size: 10px; letter-spacing: .2em; color: #888; margin-top: 2px; }
.as-brand .brand-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--c-primary), var(--c-gold)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; color: #fff; font-size: 18px; flex-shrink: 0; }
.as-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.as-link { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 14px; background: transparent; border: 0; color: #aaa; font-size: 14px; font-family: inherit; cursor: pointer; border-radius: var(--r-sm); margin-bottom: 2px; text-align: left; transition: all .2s; }
.as-link:hover { background: #2a2a2a; color: #fff; }
.as-link.active { background: linear-gradient(135deg, var(--c-primary), #d4503e); color: #fff; }
.as-link span:first-child { font-size: 16px; }
.as-foot { padding: 16px; border-top: 1px solid #2a2a2a; display: flex; flex-direction: column; gap: 6px; }
.as-mini { background: transparent; border: 1px solid #333; color: #aaa; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; font-size: 12px; text-align: center; text-decoration: none; transition: all .2s; }
.as-mini:hover { border-color: var(--c-primary); color: var(--c-primary); }
.as-logout:hover { border-color: #d4503e; color: #ff6b5b; }
.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-top { background: #fff; border-bottom: 1px solid var(--c-line); padding: 18px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; }
.admin-top h1 { font-family: var(--font-serif-kr); font-size: 22px; margin: 0; }
.admin-user { font-size: 13px; color: var(--c-text-soft); }
.admin-user strong { color: var(--c-primary); }
.admin-content { padding: 28px 32px; flex: 1; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 24px; }
.kpi { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 18px 20px; }
.kpi span { font-size: 11px; color: var(--c-text-soft); display: block; }
.kpi strong { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--c-primary); display: block; line-height: 1.2; margin: 4px 0; font-weight: 600; }
.kpi small { font-size: 11px; color: var(--c-text-soft); }
.ad-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ad-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; }
.ad-card h3 { font-family: var(--font-serif-kr); font-size: 16px; margin: 0 0 16px; font-weight: 700; }
.ad-card.ad-danger { border-color: #f5c6cb; background: #fff8f8; }
.ad-card.ad-danger h3 { color: #b91c1c; }
.ad-mini-list { display: flex; flex-direction: column; gap: 8px; }
.ad-li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 10px; background: var(--c-surface); border-radius: var(--r-sm); align-items: center; }
.ad-li-tag { font-size: 10px; padding: 4px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.ad-li-pending { background: #fff3cd; color: #8a6d3b; }
.ad-li-confirmed { background: #d4edda; color: #155724; }
.ad-li-cancelled { background: #f8d7da; color: #721c24; }
.ad-li-completed { background: #d1ecf1; color: #0c5460; }
.ad-li-stars { background: #fffbe6; color: var(--c-gold); }
.ad-li-body { font-size: 13px; }
.ad-li-body small { color: var(--c-text-soft); font-size: 11px; }
.ad-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.ad-toolbar input, .ad-toolbar select { padding: 9px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm); font-size: 13px; flex: 1; max-width: 280px; }
.ad-toolbar .btn { margin-left: auto; }
.admin-table { width: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); border-collapse: collapse; font-size: 13px; overflow: hidden; }
.admin-table th { background: var(--c-surface); text-align: left; padding: 12px 16px; font-weight: 700; font-size: 12px; color: var(--c-text-soft); letter-spacing: .03em; border-bottom: 1px solid var(--c-line); }
.admin-table td { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: #fafafa; }
.admin-table code { font-family: var(--font-mono); font-size: 11px; background: var(--c-surface); padding: 3px 6px; border-radius: 4px; }
.adt-tag { display: inline-block; font-size: 10px; padding: 2px 8px; background: var(--c-surface); border-radius: 999px; color: var(--c-text-soft); margin-right: 4px; font-weight: 600; }
.adt-tag.tag-gold { background: #fff5e1; color: #b88a30; }
.btn-mini { padding: 5px 10px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 4px; font-size: 11px; cursor: pointer; font-family: inherit; margin-right: 4px; transition: all .2s; }
.btn-mini:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-mini-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.status-sel { padding: 5px 8px; border: 1px solid var(--c-line); border-radius: 4px; font-size: 12px; background: #fff; font-family: inherit; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { display: none; }
.switch span { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 999px; transition: .3s; }
.switch span::before { content:""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.switch input:checked + span { background: var(--c-primary); }
.switch input:checked + span::before { transform: translateX(18px); }

@media (max-width: 980px) {
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .as-nav { display: flex; overflow-x: auto; padding: 8px; }
  .as-link { white-space: nowrap; flex-shrink: 0; }
  .as-foot { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ad-grid-2 { grid-template-columns: 1fr; }
  .admin-content { padding: 16px; }
  .admin-table { font-size: 11px; }
  .admin-table th, .admin-table td { padding: 8px; }
  .view-grid { grid-template-columns: 1fr; }
}

/* ========== Toast ========== */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--c-text); color: #fff; padding: 12px 20px; border-radius: var(--r-sm); font-size: 14px; box-shadow: var(--sh-lg); transform: translateX(120%); transition: transform .3s cubic-bezier(.4,0,.2,1); max-width: 360px; }
.toast.show { transform: translateX(0); }
.toast-success { background: #2A9D8F; }
.toast-error { background: #d4503e; }
.toast-info { background: var(--c-text); }

/* ========== Image fills inside info cards ========== */
.ic-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s; }
.info-card:hover .ic-thumb img { transform: scale(1.05); }
.ic-ph-fill { width:100%; height:100%; }
.villa-thumb img { width:100%; height:100%; object-fit:cover; }
.dg-cell img { width:100%; height:100%; object-fit:cover; }

/* ========== Hero visual cards (image fill) ========== */
.hv-card { position: absolute; border-radius: var(--r-lg, 16px); overflow: hidden; box-shadow: var(--sh-lg); }
.hv-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-card-label {
  position: absolute; bottom: 12px; left: 14px;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: 18px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  background: rgba(0,0,0,.25); padding: 4px 12px; border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* ============================================================
   빌라 상세페이지 — 잡지형 정보 섹션 (vd-*)
   ============================================================ */
.vd-kicker {
  display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-gold-dark); margin-bottom:10px;
}
.detail-body .dt-name { font-family:var(--f-serif-kr); font-size:34px; line-height:1.2; color:var(--c-ink); margin:0 0 10px; font-weight:700; }
.detail-body .dt-rating { font-size:15px; color:var(--c-ink-2); margin-bottom:14px; }
.detail-body .dt-rating .dt-avg { font-family:var(--f-display); font-style:italic; color:var(--c-gold-dark); font-weight:600; }
.detail-body .dt-rating .dt-avg small { font-style:normal; color:var(--c-ink-4); font-family:var(--f-body); }
.detail-body .dt-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.detail-body .dt-desc { font-size:16px; line-height:1.85; color:var(--c-ink-2); margin-bottom:8px; }

/* 핵심 스펙 스트립 */
.vd-specs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--c-line); border:1px solid var(--c-line); border-radius:16px;
  overflow:hidden; margin:28px 0 8px;
}
.vd-spec { background:var(--c-bg); padding:20px 12px; text-align:center; }
.vd-spec-v { display:block; font-family:var(--f-display); font-style:italic; font-size:28px; font-weight:600; color:var(--c-ink); line-height:1; }
.vd-spec-l { display:block; font-size:12px; color:var(--c-ink-3); margin-top:8px; letter-spacing:.02em; }

/* 섹션 공통 */
.vd-section { margin-top:52px; }
.vd-shead { margin-bottom:20px; }
.vd-eyebrow {
  display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--c-primary); margin-bottom:6px;
}
.vd-h { font-family:var(--f-serif-kr); font-size:23px; font-weight:600; color:var(--c-ink); margin:0; }
.vd-h .vd-count { font-family:var(--f-display); font-style:italic; color:var(--c-gold-dark); font-size:18px; margin-left:4px; }
.vd-textlink { display:inline-block; margin-top:14px; font-size:14px; font-weight:600; color:var(--c-primary); }
.vd-textlink:hover { color:var(--c-primary-dark); }

/* 층별 구성 — 세로 타임라인 */
.vd-floors { list-style:none; margin:0; padding:0; position:relative; }
.vd-floors::before { content:''; position:absolute; left:8px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--c-gold) 0%, var(--c-primary-soft) 100%); }
.vd-floors li { position:relative; padding:0 0 22px 36px; }
.vd-floors li:last-child { padding-bottom:0; }
.vd-floors li::before { content:''; position:absolute; left:2px; top:5px; width:14px; height:14px; border-radius:50%; background:var(--c-bg); border:3px solid var(--c-gold); }
.vd-floor-tag { display:block; font-family:var(--f-display); font-style:italic; font-weight:600; font-size:16px; color:var(--c-ink); margin-bottom:3px; }
.vd-floor-desc { display:block; font-size:14.5px; color:var(--c-ink-2); line-height:1.6; }

/* 수영장 카드 */
.vd-pool { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.vd-pool-cell {
  background:linear-gradient(150deg, var(--c-teal-soft), var(--c-bg-blue));
  border:1px solid var(--c-line-soft); border-radius:14px; padding:20px 16px; text-align:center;
}
.vd-pool-cell span { display:block; font-size:12px; color:var(--c-teal); letter-spacing:.04em; margin-bottom:8px; }
.vd-pool-cell strong { font-family:var(--f-display); font-style:italic; font-size:19px; color:var(--c-ink); font-weight:600; }

/* 위치 & 거리 */
.vd-addr { font-size:15px; color:var(--c-ink); font-weight:500; margin:0 0 4px; }
.vd-addr-vn { font-size:13px; color:var(--c-ink-3); margin:0 0 16px; font-family:var(--f-mono); }
.vd-dist { list-style:none; margin:0 0 4px; padding:0; }
.vd-dist li { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; border-bottom:1px dashed var(--c-line); }
.vd-dist li:last-child { border-bottom:none; }
.vd-dist-p { font-size:14.5px; color:var(--c-ink-2); }
.vd-dist-t { font-family:var(--f-display); font-style:italic; font-weight:600; color:var(--c-gold-dark); font-size:15px; }

/* 구비 시설 */
.vd-facility { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; }
.vd-facility li { position:relative; padding-left:24px; font-size:14.5px; color:var(--c-ink-2); line-height:1.5; }
.vd-facility li::before {
  content:''; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%;
  background:var(--c-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23E85A4F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* 예약 정책 — 정의 리스트 */
.vd-policy { margin:0; display:grid; gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden; }
.vd-policy > div { display:grid; grid-template-columns:130px 1fr; background:var(--c-bg); }
.vd-policy dt { padding:15px 16px; font-size:13.5px; color:var(--c-ink-3); background:var(--c-bg-soft); font-weight:500; }
.vd-policy dd { padding:15px 16px; margin:0; font-size:14.5px; color:var(--c-ink); line-height:1.55; }

/* 함께 즐기는 서비스 */
.vd-services { display:flex; flex-wrap:wrap; gap:10px; }
.vd-svc {
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px;
  background:var(--c-gold-soft); border:1px solid var(--c-line); color:var(--c-gold-dark);
  font-size:13.5px; font-weight:500;
}
.vd-svc-note { margin-top:14px; font-size:13px; color:var(--c-ink-3); }

/* 후기 카드 제목 */
.rv-title { font-family:var(--f-serif-kr); font-size:15.5px; font-weight:600; color:var(--c-ink); margin:6px 0 6px; }

/* 예약 카드 보조 문구 */
.bc-note { font-size:12.5px; color:var(--c-ink-3); text-align:center; margin:12px 0 0; line-height:1.5; }

@media (max-width: 720px) {
  .detail-body .dt-name { font-size:27px; }
  .vd-specs { grid-template-columns:repeat(2,1fr); }
  .vd-pool { grid-template-columns:1fr; }
  .vd-facility { grid-template-columns:1fr; }
  .vd-policy > div { grid-template-columns:108px 1fr; }
  .vd-section { margin-top:42px; }
}

/* 관리자 빌라 편집 — 섹션 구분선 */
.bp-divider {
  margin:26px 0 14px; padding-bottom:9px; border-bottom:2px solid var(--c-line);
  font-size:13px; font-weight:700; color:var(--c-primary); letter-spacing:.02em;
}
.bp-divider:first-of-type { margin-top:20px; }

/* ============================================================
   매거진 그리드 (서비스/메인) — 큰 카드 + 작은 카드 비대칭
   ============================================================ */
.mag-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  grid-auto-rows:minmax(180px,auto);
}
.mag-card {
  position:relative; border-radius:18px; overflow:hidden; min-height:180px;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:#fff; isolation:isolate;
  box-shadow:0 4px 20px rgba(0,0,0,.08); transition:transform .35s ease, box-shadow .35s ease;
}
.mag-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.mag-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.mag-card::after { content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(20,16,14,.82) 0%, rgba(20,16,14,.25) 50%, rgba(20,16,14,.05) 100%); }
.mag-card.big { grid-column:span 2; grid-row:span 2; min-height:380px; }
.mag-ico { position:absolute; top:16px; left:16px; width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:19px; }
.mag-body { padding:20px; }
.mag-card.big .mag-body { padding:26px; }
.mag-title { font-family:var(--f-serif-kr); font-size:18px; font-weight:700; margin:0 0 5px; }
.mag-card.big .mag-title { font-size:25px; }
.mag-desc { font-size:13px; line-height:1.5; opacity:.9; margin:0; }
.mag-card.big .mag-desc { font-size:14.5px; }
@media (max-width:820px){
  .mag-grid { grid-template-columns:repeat(2,1fr); }
  .mag-card.big { grid-column:span 2; grid-row:span 1; min-height:240px; }
}
@media (max-width:520px){
  .mag-grid { grid-template-columns:1fr; }
  .mag-card.big { grid-column:span 1; }
}
/* 상세페이지 본문 안 매거진 그리드 (좁은 컬럼 대응) */
.vd-mag { grid-template-columns:repeat(3,1fr); gap:12px; grid-auto-rows:minmax(150px,auto); margin-top:6px; }
.vd-mag .mag-card { min-height:150px; }
.vd-mag .mag-card.big { grid-column:span 2; grid-row:span 2; min-height:312px; }
.vd-mag .mag-title { font-size:16px; }
.vd-mag .mag-card.big .mag-title { font-size:21px; }
.vd-mag .mag-desc { font-size:12.5px; }
@media (max-width:900px){ .vd-mag { grid-template-columns:repeat(2,1fr); } .vd-mag .mag-card.big { grid-column:span 2; grid-row:span 1; min-height:200px; } }
@media (max-width:520px){ .vd-mag { grid-template-columns:1fr; } .vd-mag .mag-card.big { grid-column:span 1; } }

/* ============================================================
   카드 슬라이드 (인기 풀빌라)
   ============================================================ */
.vslider { position:relative; }
.vslider-track {
  display:flex !important; flex-wrap:nowrap !important; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding:6px 2px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.vslider-track::-webkit-scrollbar { display:none; }
.vslider-track > * { flex:0 0 300px !important; width:300px; max-width:300px; scroll-snap-align:start; }
.vslide-item { display:block; }
.vslide-item .villa-card { width:100%; }
@media (max-width:520px){ .vslider-track > * { flex:0 0 82% !important; width:82%; max-width:82%; } }
.vslider-nav {
  position:absolute; top:38%; width:46px; height:46px; border-radius:50%; border:none;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.16); cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center; color:var(--c-ink); transition:transform .2s, background .2s;
}
.vslider-nav:hover { background:var(--c-primary); color:#fff; transform:scale(1.06); }
.vslider-prev { left:-14px; } .vslider-next { right:-14px; }
@media (max-width:680px){ .vslider-nav { display:none; } }

/* ============================================================
   사진 라이트박스 (상세 갤러리)
   ============================================================ */
.lightbox { position:fixed; inset:0; background:rgba(10,8,8,.94); z-index:9999;
  display:none; align-items:center; justify-content:center; }
.lightbox.on { display:flex; }
.lb-img { max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,.5); object-fit:contain; }
.lb-close { position:absolute; top:20px; right:24px; font-size:30px; color:#fff; background:none; border:none; cursor:pointer; line-height:1; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.14); border:none; color:#fff; font-size:26px; cursor:pointer; transition:background .2s; }
.lb-nav:hover { background:rgba(255,255,255,.28); }
.lb-prev { left:20px; } .lb-next { right:20px; }
.lb-count { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:#fff; font-size:14px; font-family:var(--f-mono); opacity:.85; }
.dg-cell { cursor:pointer; }
.detail-gallery.many { grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; }

/* ============================================================
   지도 (Leaflet)
   ============================================================ */
.map-wrap { width:100%; height:520px; border-radius:18px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.vd-map { width:100%; height:300px; border-radius:14px; overflow:hidden; margin-top:4px; box-shadow:0 2px 14px rgba(0,0,0,.07); }
.leaflet-popup-content { font-family:var(--f-body); }
.lmap-pop-title { font-weight:700; color:var(--c-ink); font-size:14px; }
.lmap-pop-price { color:var(--c-primary); font-weight:700; font-size:13px; margin:3px 0 6px; }
.lmap-pop-link { display:inline-block; font-size:12px; color:#fff; background:var(--c-primary); padding:5px 12px; border-radius:8px; text-decoration:none; }

/* Leaflet 지도 컨테이너 높이 확보 */
.map-page .map-canvas { min-height: 600px; height: auto; }
.map-page .map-canvas #leafletMap { min-height: 600px; }
@media (max-width:900px){
  .map-page .map-canvas, .map-page .map-canvas #leafletMap { min-height: 460px; }
}
.lmap-pin { background:transparent; border:none; }

/* =========================================================
   v4 추가: 서비스 카드 다양화 · SEO 본문 · 모바일 카드 최적화
   ========================================================= */

/* ----- 서비스 매거진 카드 다양화 (tag 배지 + accent 톤 + 호버) ----- */
.mag-card { transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s; }
.mag-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,16,14,.18); }
.mag-card img { transition: transform .6s cubic-bezier(.4,0,.2,1); }
.mag-card:hover img { transform: scale(1.07); }
.mag-card .mag-ico { background: rgba(255,255,255,.22); transition: transform .35s; }
.mag-card:hover .mag-ico { transform: scale(1.08) rotate(-4deg); }
.mag-tag {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
/* accent 별 오버레이 톤 (specificity 높여 인라인 base 오버레이를 덮음) */
.mag-card.acc-coral::after  { background: linear-gradient(to top, rgba(176,58,46,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-gold::after   { background: linear-gradient(to top, rgba(150,107,30,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-purple::after { background: linear-gradient(to top, rgba(86,46,120,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-wine::after   { background: linear-gradient(to top, rgba(110,30,52,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-teal::after   { background: linear-gradient(to top, rgba(20,96,104,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-green::after  { background: linear-gradient(to top, rgba(34,90,52,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-blue::after   { background: linear-gradient(to top, rgba(28,66,120,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-slate::after  { background: linear-gradient(to top, rgba(48,54,64,.86) 0%, rgba(20,16,14,.28) 52%, rgba(20,16,14,.04) 100%); }
.mag-card.acc-coral  .mag-tag { background: rgba(176,58,46,.92); }
.mag-card.acc-gold   .mag-tag { background: rgba(150,107,30,.92); }
.mag-card.acc-purple .mag-tag { background: rgba(86,46,120,.92); }
.mag-card.acc-teal   .mag-tag { background: rgba(20,96,104,.92); }

/* ----- SEO 본문: 다낭 풀빌라 장점 ----- */
.seo-article { background: var(--c-bg-cream); }
.seo-inner { max-width: 920px; margin: 0 auto; }
.seo-inner h2 { font-size: clamp(26px, 4vw, 40px); margin: 6px 0 18px; }
.seo-lead { font-size: 17px; line-height: 1.85; color: var(--c-ink-2); margin-bottom: 26px; }
.seo-inner p { font-size: 15.5px; line-height: 1.85; color: var(--c-ink-2); }
.seo-inner strong { color: var(--c-ink); font-weight: 700; }
.seo-points { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 26px; }
.seo-point { background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); padding: 22px; }
.sp-ico { font-size: 26px; display: block; margin-bottom: 10px; }
.seo-point h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--c-ink); }
.seo-point p { font-size: 14px; line-height: 1.7; color: var(--c-ink-3); margin: 0; }
.seo-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 680px) { .seo-points { grid-template-columns: 1fr; } }

/* ----- 모바일 풀빌라 카드 글자 최적화 (2칼럼 좁은 카드에서 깔끔하게) ----- */
@media (max-width: 520px) {
  .villa-info { padding: 12px 4px 6px; }
  .villa-region { font-size: 9.5px; letter-spacing: .08em; }
  .villa-name { font-size: 14px; margin: 5px 0; line-height: 1.32; -webkit-line-clamp: 2; min-height: 2.6em; }
  .villa-meta { font-size: 11.5px; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
  .villa-meta-item svg { width: 11px; height: 11px; }
  .villa-price { padding-top: 8px; }
  .villa-price .amt { font-size: 15px; }
  .villa-price .amt small { font-size: 10px; }
  .villa-fav { width: 30px; height: 30px; top: 8px; right: 8px; }
  .villa-fav svg { width: 15px; height: 15px; }
  .villa-badge { padding: 3px 7px; font-size: 9.5px; }
}
/* 슬라이더 안 카드는 넓으니 이름 2줄 허용으로 통일 (잘림 방지) */
.vslide-item .villa-name { -webkit-line-clamp: 2; }

/* ----- 관리자 진입 기어 (좌하단, 밤통령 스타일) ----- */
.admin-gear {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(20,16,14,.30); color: #fff;
  opacity: .35; transition: opacity .25s, transform .25s, background .25s;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.admin-gear:hover { opacity: 1; transform: rotate(45deg); background: rgba(20,16,14,.7); }
@media (max-width: 520px) { .admin-gear { width: 34px; height: 34px; font-size: 15px; left: 12px; bottom: 12px; opacity: .28; } }

/* ----- v5: SEO 소제목 + 모바일 서비스 카드 축소 ----- */
.seo-h3 { font-size: 19px; font-weight: 700; color: var(--c-ink); margin: 30px 0 10px; }
.seo-inner > p { margin-bottom: 14px; }

/* 모바일에서 서비스 매거진 카드 높이 낮춤 (너무 커 보이던 문제) */
@media (max-width: 520px) {
  .mag-grid { gap: 12px; }
  .mag-card { min-height: 150px; }
  .mag-card.big { min-height: 200px; }
  .mag-body { padding: 14px; }
  .mag-card.big .mag-body { padding: 16px; }
  .mag-title { font-size: 16px; }
  .mag-card.big .mag-title { font-size: 19px; }
  .mag-desc { font-size: 12px; }
  .mag-card.big .mag-desc { font-size: 12.5px; }
  .mag-ico { width: 34px; height: 34px; font-size: 16px; top: 12px; left: 12px; }
  .mag-tag { top: 12px; right: 12px; padding: 3px 9px; font-size: 10px; }
}

/* ----- v5: 상세페이지 '공간 둘러보기' 갤러리 ----- */
.vd-tour {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vd-tour::-webkit-scrollbar { display: none; }
.vd-tour-cell {
  flex: 0 0 78%; max-width: 520px; aspect-ratio: 4/3;
  border-radius: 14px; overflow: hidden; scroll-snap-align: start; background: var(--c-bg-cream);
}
.vd-tour-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.vd-tour-cell:hover img { transform: scale(1.04); }
@media (min-width: 821px) { .vd-tour-cell { flex-basis: 46%; } }