/* 함덕 오션하우스 — 공통 스타일 (모바일 우선)
   글꼴: 고운돋움(한글) + Lato(영문·숫자) · 글자 크기 18~50px, 히어로만 최대 150px (업종 규칙)
   색·여백은 analysis.json 의 디자인 시스템 값 그대로 */
:root {
  --ink: #1C1A16;
  --mute: #8C8880;
  --grey: #C8C4BE;
  --line: #E6E6E4;
  --white: #FFFFFF;
  --surface: #F4F4F0;
  --accent: #577662;
  --nav-h: 62px;
  --pad: 20px;
  --gutter: 12px;
  --fs-body: 18px;
  --fs-lg: 20px;
  --fs-h4: 24px;
  --fs-h3: 28px;
  --fs-h2: 32px;
  --fs-h1: 36px;
  --fs-hero: clamp(38px, 9.4vw, 52px);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --quick: .15s;
  --default: .3s;
  --slow: .6s;
  --font: "Lato", "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
@media (min-width: 700px) {
  :root { --pad: 40px; --fs-h3: 30px; --fs-h2: 36px; --fs-h1: 42px; --fs-hero: clamp(48px, 7vw, 76px); }
}
@media (min-width: 1100px) {
  :root { --pad: 78px; --fs-h3: 32px; --fs-h2: 40px; --fs-h1: 48px; --fs-hero: clamp(60px, 4.6vw, 72px); }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.55; font-weight: 400;
  letter-spacing: 0; overflow-wrap: anywhere; word-break: keep-all;
  padding-top: var(--nav-h); -webkit-font-smoothing: antialiased;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; border-radius: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; font-weight: 400; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: fixed; left: 8px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 200; clip-path: inset(50%); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; white-space: nowrap; }
.skip:focus { clip-path: none; }

/* ── 머리글 ── */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; background: var(--white);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad);
}
.nav-left, .nav-right { display: none; align-items: center; }
.logo-mark {
  width: 44px; height: 44px; background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: 24px; line-height: 1; flex: none;
}
.nav-link { position: relative; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; padding: 0 12px; transition: opacity var(--quick) ease, color var(--quick) ease; }
.nav-link:hover { opacity: .5; }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: var(--ink); }
.nav-book { gap: 10px; }
.nav-book i { width: 12px; height: 12px; background: var(--ink); display: inline-block; }
.menu-btn { width: 44px; height: 44px; display: grid; place-items: center; }
.menu-btn span, .menu-btn span::before { display: block; width: 24px; height: 2px; background: var(--ink); position: relative; }
.menu-btn span::before { content: ""; position: absolute; top: 8px; left: 0; }
.menu-btn span { margin-top: -8px; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 120; background: var(--white); padding: 0 var(--pad) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s; overflow-y: auto; height: 100dvh;
}
.mobile-nav.open { transform: none; visibility: visible; transition-delay: 0s; }
.mobile-nav-top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.mobile-close { width: 44px; height: 44px; position: relative; }
.mobile-close::before, .mobile-close::after { content: ""; position: absolute; left: 10px; top: 21px; width: 24px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.mobile-close::after { transform: rotate(-45deg); }
.mobile-nav a.m-link { font-size: var(--fs-h3); line-height: 1.3; min-height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mobile-nav .m-book { margin-top: 24px; background: var(--ink); color: #fff; min-height: 56px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
@media (min-width: 1100px) {
  .nav-left, .nav-right { display: flex; }
  .nav-left { gap: 4px; margin-left: 24px; }
  .menu-btn, .mobile-nav { display: none; }
  .site-header { display: grid; grid-template-columns: auto 1fr auto; }
  .nav-right { gap: 4px; }
  .nav-right .nav-link:last-child { padding-right: 0; }
}

/* ── 공통 부품 ── */
.wrap { width: 100%; max-width: 1269px; margin-inline: auto; padding-inline: var(--pad); }
@media (min-width: 1100px) { .wrap { max-width: none; padding-inline: var(--pad); } }
.w-1255 { max-width: 1255px; }
.eyebrow { color: var(--mute); font-size: var(--fs-body); line-height: 1.4; }
.mute { color: var(--mute); }
.h1 { font-size: var(--fs-h1); line-height: 1.2; }
.h2 { font-size: var(--fs-h2); line-height: 1.25; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; }
.h4 { font-size: var(--fs-h4); line-height: 1.35; }
.lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--mute); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  background: var(--ink); color: #fff; font-size: var(--fs-body); transition: background-color var(--quick) ease, opacity var(--quick) ease;
}
.btn:hover { opacity: .78; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-grey { background: #E6E6E4; color: var(--ink); }
.link-sq { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; transition: opacity var(--quick) ease; }
.link-sq::before { content: ""; width: 12px; height: 12px; background: var(--ink); flex: none; }
.link-sq:hover { opacity: .5; }
.ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stack > * + * { margin-top: 24px; }
.prose p + p { margin-top: 1.1em; }
.prose p { line-height: 1.7; }
.prose strong { font-weight: 700; }
.hr { height: 1px; background: var(--line); border: 0; }
.photo { position: relative; overflow: hidden; background: var(--surface); }
a.photo { display: block; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.section-gap { padding-block: 120px; }
@media (min-width: 1100px) { .section-gap { padding-block: 240px; } }
.band { background: var(--surface); }

/* ── 등장 효과 (원본: reveal-word / reveal-up / reveal-fade) ── */
.js [data-rv] .rw, .js .reveal-up, .js .reveal-fade, .js .enter-fade { opacity: 0; }
.rw { display: inline-block; }
@keyframes reveal-word { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes reveal-left6 { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes btn-in { from { opacity: .3; } to { opacity: 1; } }
@keyframes reveal-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
[data-rv].in .rw { animation: reveal-word var(--slow) var(--ease) both; animation-delay: calc(var(--i) * 100ms + var(--d, 0ms)); }
.reveal-up.in { animation: reveal-up var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.reveal-fade.in { animation: reveal-fade var(--slow) var(--ease) both; }
/* 인트로: 원본은 접속 약 0.6초 뒤부터 글자가 한 낱말씩(100ms 간격) 올라온다 — 스크립트 없이 CSS 로 시작 */
.js [data-intro] [data-rv] .rw { animation: reveal-word var(--slow) var(--ease) both; animation-delay: calc(var(--intro, 150ms) + var(--i) * 100ms + var(--d, 0ms)); }
.js [data-intro] .enter-fade { animation: reveal-fade var(--slow) var(--ease) both; animation-delay: calc(var(--intro, 150ms) + var(--d, 0ms)); }
.reveal-left.in { animation: reveal-left var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
.js .reveal-left, .js .reveal-drop, .js .reveal-left6 { opacity: 0; }
.reveal-drop.in { animation: reveal-drop var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 200ms); }
.reveal-left6.in { animation: reveal-left6 var(--slow) var(--ease) both; }
.enter-fade.in { animation: reveal-fade var(--slow) var(--ease) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] .rw, .js .reveal-up, .js .reveal-fade, .js .enter-fade, .js .reveal-left, .js .reveal-drop, .js .reveal-left6 { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ── 히어로(영상) — 주변 명소 페이지 ── */
.hero-media { position: relative; margin: 0 12px; overflow: hidden; background: #2a3a44; color: #fff; isolation: isolate; }
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,18,24,.62) 0%, rgba(10,18,24,.18) 42%, rgba(10,18,24,.08) 100%); }
.hero-inner { position: relative; z-index: 2; height: 100%; padding: 0 calc(var(--pad) - 12px); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-title { font-size: var(--fs-hero); line-height: 1.16; max-width: 14em; text-shadow: 0 2px 28px rgba(0,0,0,.35); }
.hero-foot { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.hero-foot p { max-width: 20em; font-size: var(--fs-lg); line-height: 1.5; }
.hero-hint { position: absolute; z-index: 2; right: var(--pad); bottom: 32px; font-size: var(--fs-body); opacity: .85; display: none; }
@media (min-width: 1100px) { .hero-hint { display: block; } }

/* ── 첫 화면 히어로 — 원본(societies.ai) 첫 화면 그대로 + 스크롤 연출(hm-scroll3d 키트) ──
   그림 틀: 머리글 바로 아래(62px)부터 좌우 12px·아래 12px 띄운 박스(원본 1440 실측 12~1413 × 62~화면높이-12).
   글 자리(원본 실측, 그림 틀 기준):
   - 제목 2줄: 왼쪽 = 본문 격자 여백(5vw+6px), 글자 윗선 = 틀 높이의 33.1%(휴대폰 39%). 40/48px(휴대폰 24/28.8px), 굵기 400
   - 설명 3줄 + 흰 버튼: 왼쪽 같은 줄, 버튼 아랫변 = 틀 아래 40px(휴대폰 20px), 설명과 버튼 사이 48px, 설명 폭 308px(12칸 중 3칸)
   - 오른쪽 작은 라벨: 틀 폭의 71.45%, 설명 첫 줄과 같은 높이(원본은 3D 장면 속 인물 라벨) — 휴대폰 원본엔 없음
   - 흰 점 4개(10px): 원본 3D 장면의 점, 인트로 순서대로 하나씩 — 휴대폰 원본엔 없음
   글자 크기는 업종 규칙의 최저 18px 을 지킨다(원본 설명 16·버튼 14·라벨 12px → 18px), 버튼 높이는 누르는 대상 44px 규칙. */
.hero-s3d { margin-top: calc(-1 * var(--nav-h)); }
.hero-s3d .hm-s3d-sticky { padding: var(--nav-h) 12px 12px; }
.hero-s3d .hm-s3d-media { top: var(--nav-h); left: 12px; right: 12px; bottom: 12px; background: #DCE3E4; }

.hero-home { --intro: 580ms; } /* 원본 인트로: 접속 약 0.6초 뒤 제목 첫 낱말, 100ms 간격 — 설명 +400ms, 버튼 +500ms */
.hx {
  --hx-x: 12px;              /* 휴대폰: 틀 안쪽 12px(원본 화면 24px) */
  position: relative; height: 100%; color: #fff; pointer-events: none;
  overflow: hidden; overflow: clip;
}
.hx a { pointer-events: auto; }
/* 장면이 원본 사진보다 밝아 흰 글자가 묻히는 것만 막는 아주 옅은 그늘(키트 바깥 레이어) */
.hx-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(28, 26, 22, .36) 0%, rgba(28, 26, 22, .2) 30%, rgba(28, 26, 22, 0) 55%),
    linear-gradient(0deg, rgba(28, 26, 22, .26) 0%, rgba(28, 26, 22, 0) 40%), rgba(28, 26, 22, .3);
}
@media (min-width: 768px) {
  .hx-shade { background: linear-gradient(90deg, rgba(28, 26, 22, .36) 0%, rgba(28, 26, 22, .2) 30%, rgba(28, 26, 22, 0) 55%),
    linear-gradient(0deg, rgba(28, 26, 22, .26) 0%, rgba(28, 26, 22, 0) 40%), rgba(28, 26, 22, .22); }
}
.hx-title {
  position: absolute; left: var(--hx-x); top: 39%;
  font-size: 24px; line-height: 28.8px; font-weight: 400; letter-spacing: normal; white-space: nowrap;
}
.hx-foot { position: absolute; left: 0; right: 0; bottom: 20px; }
.hx-desc { margin-left: var(--hx-x); max-width: 308px; font-size: 18px; line-height: 1.3; font-weight: 400; }
.hx-cta { margin-left: var(--hx-x); margin-top: 44px; display: flex; } /* 원본 48px(버튼 38px) — 버튼이 44px 라 글자~버튼 간격 49px 이 같게 */
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 14px;
  background: #fff; color: var(--ink); font-size: 18px; line-height: 1; border-radius: 0;
  transition: opacity var(--quick) ease;
}
.hx-btn:hover { opacity: .7; }
.hx-label, .hx-dots { display: none; }

@media (min-width: 768px) {
  .hx { --hx-x: calc(5vw + 6px - 12px); } /* 원본 --grid-margin: calc(5vw + 6px) 에서 틀 여백 12px 을 뺀 값 */
  .hx-title { top: calc(33.1% - 5px); font-size: 40px; line-height: 48px; } /* 글자 윗선이 틀의 33.1% */
  .hx-foot { bottom: 40px; }
  .hx-label {
    display: block; position: absolute; left: 71.45%; top: calc(78.5% - 3px); margin: 0; /* 글자 윗선이 틀의 78.5% */
    font-size: 18px; line-height: 1.3; white-space: nowrap;
  }
  .hx-dots { display: block; position: absolute; inset: 0; }
  .hx-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; }
}

/* 인트로 — 점은 하나씩(원본 캡처: 0.7초에 1개, 1.3초 2개, 2.2초 3개, 3.5초 4개), 라벨은 인트로가 끝난 뒤 */
@keyframes hx-in { from { opacity: 0; } to { opacity: 1; } }
.js .hx-dot { opacity: 0; animation: hx-in .3s ease var(--dd, 0ms) both; }
.js .hx-label { opacity: 0; animation: hx-in var(--slow) ease 3600ms both; }
@media (prefers-reduced-motion: reduce) {
  .js .hx-dot, .js .hx-label { opacity: 1; animation: none; }
}

/* ── 바닥글 ── */
.site-footer { border-top: 1px solid var(--line); margin-top: 0; }
.footer-grid { display: grid; gap: 40px 12px; padding: 24px var(--pad) 24px; grid-template-columns: 1fr 1fr; }
.footer-grid > :first-child { grid-column: 1 / -1; }
.footer-col h2 { color: var(--mute); font-size: var(--fs-body); margin-bottom: 8px; }
.footer-col a { display: flex; align-items: center; min-height: 44px; transition: opacity var(--quick) ease; }
.footer-col a:hover { opacity: .5; }
.foot-form { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; background: var(--surface); max-width: 308px; transition: opacity var(--quick) ease; }
.foot-form:hover { opacity: .75; }
.foot-form i { width: 12px; height: 12px; background: var(--ink); }
.foot-note { color: var(--grey); margin-top: 14px; max-width: 308px; line-height: 1.5; }
.foot-note a { text-decoration: underline; }
.wordmark { font-size: var(--fs-h1); line-height: 1.1; align-self: end; margin-top: 40px; }
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); padding-top: 24px; min-height: 361px; }
  .footer-grid > :first-child { grid-column: 1 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; }
  .footer-grid > .footer-col:nth-child(2) { grid-column: 7 / 10; grid-row: 1; }
  .footer-grid > .footer-col:nth-child(3) { grid-column: 10 / 13; grid-row: 1; }
  .footer-grid > .footer-col:nth-child(4) { grid-column: 7 / 10; grid-row: 2; }
  .wordmark { margin-top: auto; }
}
@media (max-width: 1099px) { .wordmark { grid-column: 1 / -1; } }

/* ── 카드·표·목록 공통 ── */
.cards-4 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }
.surface { background: var(--surface); }
.tabs { display: flex; gap: 8px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab { min-height: 48px; min-width: 44px; padding: 0 4px; color: var(--grey); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color var(--quick) ease; }
.tab:hover { color: var(--mute); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.row-list > li + li { margin-top: 4px; }
.row-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 14px; background: var(--surface); transition: opacity var(--quick) ease; }
a.row-item:hover { opacity: .65; }
.row-item i { width: 12px; height: 12px; background: var(--grey); flex: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; min-width: 560px; }
.table th { text-align: left; color: var(--mute); font-weight: 400; padding: 10px 12px 10px 0; }
.table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--line); }
.table td.num, .table th.num { text-align: right; }
.num { font-variant-numeric: tabular-nums; }

/* ── 이미지 비율 틀 ── */
.ar-3x2 { aspect-ratio: 3 / 2; }
.ar-16x9 { aspect-ratio: 16 / 9; }
.ar-4x5 { aspect-ratio: 4 / 5; }

/* ── 홈 ── */
.home-stack { display: flex; flex-direction: column; gap: 120px; padding-top: 120px; padding-bottom: 0; }
@media (min-width: 1100px) { .home-stack { gap: 240px; padding-top: 240px; } }
.home-lead { max-width: 640px; margin-bottom: 64px; }
.quote-cards { margin-bottom: 96px; }
.quote-card { position: relative; min-height: 440px; overflow: hidden; color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; background: #1C2a33; }
.quote-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10,20,28,.62), rgba(10,20,28,.12) 55%, rgba(10,20,28,.55)); }
.quote-card p { position: relative; z-index: 2; }
.quote-card .who { color: rgba(255,255,255,.82); }
@media (min-width: 1100px) { .quote-card { min-height: 472px; } }
.near { text-align: center; }
.near-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 8px; margin: 32px auto 0; max-width: 1000px; }
@media (min-width: 700px) { .near-grid { grid-template-columns: repeat(5, 1fr); } }
.near-grid li { min-height: 44px; display: grid; place-items: center; font-size: var(--fs-h4); line-height: 1.25; }
.near-grid .a { font-weight: 700; letter-spacing: -.01em; }
.near-grid .b { font-weight: 300; font-family: "Lato", "Gowun Dodum", sans-serif; }
.near-grid .c { letter-spacing: .08em; font-size: 20px; }
.near-grid .d { font-style: normal; font-size: 22px; }
.home-band { margin: 0 12px; }
.band-video { aspect-ratio: 16 / 9; max-height: 775px; width: 100%; }
.band-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,24,.55), transparent 45%); }
.band-cap { position: absolute; z-index: 2; left: calc(var(--pad) - 12px); bottom: 28px; color: #fff; }
.home-methods { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; text-align: center; background: var(--white); }
.methods-band { height: min(340px, 56svh); overflow: hidden; width: 100%; position: relative; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.methods-list { transition: transform .3s var(--ease); }
.methods-list li { font-size: var(--fs-h2); line-height: 1.5; color: var(--mute); transition: color .3s ease; padding: 0 var(--pad); }
.methods-list li.on { color: var(--ink); }
.methods-list li.gap-before { margin-top: 40px; }
.home-sol { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; background: var(--white); }
.sol-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.sol-list li { font-size: var(--fs-h3); line-height: 1.5; color: var(--grey); transition: color .3s ease; }
.sol-list li a { display: inline-flex; align-items: center; min-height: 44px; }
.sol-list li.on { color: var(--ink); }
.sol-desc { margin-top: 20px; max-width: 360px; min-height: 120px; color: var(--mute); }
.sol-desc [data-step-panel] { display: none; }
.sol-desc [data-step-panel].on { display: block; }
.sol-art { position: relative; aspect-ratio: 5 / 4; width: min(100%, 460px); margin-inline: auto; }
.sol-art [data-step-panel] { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; }
.sol-art [data-step-panel].on { opacity: 1; }
.frame { margin: 0; border: 6px solid #6b4a2f; box-shadow: 0 0 0 2px #1c1a16, 0 22px 28px -10px rgba(0,0,0,.28); background: #fff; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .sol-grid { grid-template-columns: 1fr 1fr; } .sol-art { margin-left: 8%; width: min(100%, 408px); aspect-ratio: 408 / 462; } }
.home-photo { margin: 0 12px; }
.home-photo .photo { height: clamp(320px, 62vw, 600px); }
.home-photo img { height: 120%; }
.home-cta { display: grid; gap: 40px; padding-bottom: 240px; }
.cta-left { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.feat-grid li { padding: 16px 20px; min-height: 150px; }
.feat-grid h3 { font-size: var(--fs-body); }
.feat-grid p, .feat-grid a { color: var(--mute); margin-top: 2px; display: block; }
.feat-grid a { color: var(--ink); min-height: 44px; display: flex; align-items: flex-end; }
@media (min-width: 640px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .home-cta { grid-template-columns: 1fr 1fr; } .cta-left { padding-right: 20%; } }

/* ── 공통(안쪽 페이지) ── */
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: var(--fs-body); }
.wrap.w-938, .wrap.w-1044 { margin-left: 0; margin-right: auto; }
.w-938 { max-width: calc(938px + var(--pad) * 2); }
.w-1044 { max-width: calc(1044px + var(--pad) * 2); }
.btn-sm { min-height: 44px; padding: 0 14px; background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 32px; }
.fld { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fld > span { color: var(--mute); }
.fld input, .fld select, .fld textarea { background: var(--surface); border: 0; min-height: 48px; padding: 10px 14px; width: 100%; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--grey); }
.inquiry { display: flex; flex-direction: column; gap: 12px; }
.inq-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 600px) { .inq-row { flex-direction: row; } }
.inq-note { color: var(--mute); }
.sq { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); transition: opacity var(--quick) ease; }
.sq:hover:not(:disabled) { opacity: .6; }
.sq:disabled { opacity: .35; cursor: default; }
.car-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.carousel { margin-top: 40px; }
.car-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.car-track::-webkit-scrollbar { display: none; }
.car-card { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
.car-card p { margin: 12px 0 4px; line-height: 1.45; }
.car-card strong { font-weight: 400; }
.photo img { transition: transform .6s var(--ease); }
.car-card a:hover img, .room-card a:hover img, .rv-card a:hover img, .more-grid a:hover img { transform: scale(1.03); }

/* ── 객실 타입 (/solutions) ── */
.sol-hero { padding-top: 56px; }
.sol-hero .h1 { margin-bottom: 20px; }
.sol-hero .lead { max-width: 720px; margin-inline: auto; }
.tile-grid { height: 150px; max-width: 560px; margin: 32px auto; background-image: radial-gradient(circle, #E6E6E4 0 3px, transparent 3.5px); background-size: 14px 14px; }
.center-tabs { justify-content: center; }
.tab-panel { max-width: 720px; margin: 24px auto 0; min-height: 5.5em; }
.sol-stack { display: flex; flex-direction: column; gap: 120px; padding-top: 96px; }
@media (min-width: 1100px) { .sol-stack { gap: 240px; padding-top: 160px; } }
.parts { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; background: var(--white); }
.parts-inner { width: 100%; }
.parts-head { margin-bottom: 28px; }
.parts-grid { display: grid; gap: 24px; }
.parts-list li button { font-size: var(--fs-h3); line-height: 1.45; color: var(--grey); min-height: 44px; text-align: left; transition: color .3s ease; }
.parts-list li.on button { color: var(--ink); }
.parts-desc { margin-top: 16px; min-height: 120px; color: var(--mute); max-width: 360px; }
.parts-desc [data-step-panel] { display: none; }
.parts-desc [data-step-panel].on { display: block; }
.parts-art { position: relative; aspect-ratio: 3 / 2; }
.parts-art [data-step-panel] { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; margin: 0; }
.parts-art [data-step-panel].on { opacity: 1; }
.parts-note { margin-top: 12px; }
@media (min-width: 900px) { .parts-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } }
@media (min-width: 1100px) { .car-card { flex-basis: calc((100% - 36px) / 4); } }
.sol-photo { margin: 0 12px; }
.sol-photo .photo { height: clamp(300px, 56vw, 560px); }
.sol-photo img { height: 120%; }
.sol-form { display: grid; gap: 32px; padding-bottom: 160px; }
@media (min-width: 1100px) { .sol-form { grid-template-columns: 1fr 1fr; padding-bottom: 240px; } }

/* ── 객실 목록 / 상세 ── */
.list-hero { padding-top: 56px; padding-bottom: 32px; }
.list-hero .h1 { max-width: 640px; margin-top: 12px; }
.room-grid { display: grid; gap: 56px 80px; grid-template-columns: 1fr; padding-bottom: 120px; }
@media (min-width: 800px) { .room-grid { grid-template-columns: 1fr 1fr; padding-bottom: 160px; } }
.room-card p { margin: 14px 0 6px; line-height: 1.5; }
.room-card strong { font-weight: 400; }
.room-hero-wrap { padding-top: 40px; }
.room-hero { aspect-ratio: 4 / 3; max-height: 627px; width: 100%; }
@media (min-width: 800px) { .room-hero { aspect-ratio: 1255 / 627; } }
.room-hero img { position: absolute; inset: 0; }
.room-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,18,24,.6), transparent 55%); }
.room-hero-txt { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 24px; color: #fff; }
.room-hero-txt h1 { font-size: var(--fs-h2); line-height: 1.25; margin-top: 6px; }
@media (min-width: 900px) { .room-hero-txt { left: 56px; bottom: 40px; max-width: 640px; } }
.room-art { display: flex; flex-direction: column; gap: 48px; padding: 56px 0 96px; }
.rc { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: var(--pad); }
@media (min-width: 740px) { .rc { padding-inline: 0; } }
.rc.stack > * + * { margin-top: 28px; }
.facts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.facts li { padding: 16px; min-height: 120px; display: flex; flex-direction: column; gap: 4px; }
.facts .k { color: var(--mute); }
@media (min-width: 600px) { .facts { grid-template-columns: 1fr 1fr; } .facts li { min-height: 160px; } }
.facts3 li .v { font-size: var(--fs-h4); }
.quote { text-align: center; }
.quote p { font-size: var(--fs-h3); line-height: 1.35; }
.quote footer { margin-top: 16px; }
.shots { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shot { aspect-ratio: 4 / 3; }
@media (min-width: 600px) { .shot { height: 255px; aspect-ratio: auto; } }
.shots p { margin-top: 8px; color: var(--mute); }
.note-line { color: var(--mute); }
.note-line p { max-width: 680px; margin-inline: auto; }
@media (min-width: 1100px) { .note-line p { margin-left: calc(50% - 340px); margin-right: 0; } }
.more { padding-bottom: 160px; }
.more-grid { display: grid; gap: 32px 12px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 800px) { .more-grid { grid-template-columns: repeat(3, 1fr); } }
.more-grid p { margin: 12px 0 4px; line-height: 1.5; }
.more-grid strong { font-weight: 400; }

/* ── 펜션 소개 / 이용 요금 ── */
.co-hero { padding-top: 56px; }
.co-lead { max-width: 640px; margin-top: 10px; }
.tour-track .car-card { flex-basis: min(60vw, 216px); }
@media (min-width: 1100px) { .tour-track .car-card { flex-basis: calc((100% - 48px) / 5.1); } }
.co-mission { margin-top: 96px; }
.co-h2 { max-width: 760px; margin: 10px 0 28px; }
.co-mission .prose { max-width: 560px; }
.co-photos { margin: 120px 12px; }
@media (min-width: 1100px) { .co-photos { margin: 240px 12px; } }
.co-two { display: grid; gap: 12px; }
.co-two .photo { aspect-ratio: 4 / 3; }
@media (min-width: 800px) { .co-two { grid-template-columns: 1fr 1fr; } .co-two .photo { aspect-ratio: 628 / 515; } }
.co-band { padding: 96px 0; }
.co-band-h { margin-bottom: 56px; }
.grp { margin-bottom: 48px; }
.grp .eyebrow { margin-bottom: 12px; }
.row-item span:last-child { display: inline-flex; align-items: center; gap: 12px; text-align: right; }
.row-item i { background: #D5D3CE; }
.co-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 72px; }
@media (min-width: 800px) { .co-foot { flex-direction: row; justify-content: space-between; } }
.loc { margin-top: 24px; }
.loc h2 { margin-top: 8px; }
.loc-list { margin-top: 32px; display: grid; gap: 18px; max-width: 760px; }
.loc-list > div { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .loc-list > div { grid-template-columns: 220px 1fr; } }
.loc-list dt { color: var(--mute); }
.pub { padding-top: 40px; padding-bottom: 80px; }
.pub-grid { display: grid; gap: 32px; margin-top: 24px; }
.pub-box { margin-top: 12px; max-height: 640px; overflow-y: auto; }
.pub-cards { display: flex; flex-direction: column; gap: 12px; }
.pub-card { background: #FCFCFA; padding: 24px 28px; }
.pub-card h2 { font-size: var(--fs-h4); line-height: 1.35; margin-bottom: 8px; }
.pub-card p { margin-bottom: 8px; }
.pub-right { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) { .pub-grid { grid-template-columns: minmax(0, 522px) 1fr; gap: 80px; } .pub-right { aspect-ratio: auto; min-height: 560px; } }

/* ── 프라이빗 풀 (/radiant) ── */
.rad-hero { margin: 0 12px; background: var(--surface); }
.rad-hero-in { display: grid; gap: 32px; padding-block: 56px; align-items: center; }
.rad-hero-txt { max-width: 520px; }
.rad-hero-txt .lead { margin-top: 20px; }
.rad-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.rad-hero-ph { aspect-ratio: 3 / 2; }
@media (min-width: 1000px) { .rad-hero-in { grid-template-columns: 1fr 1fr; min-height: 660px; padding-block: 0; gap: 60px; } }
.rad-ask { display: grid; gap: 28px; padding-top: 120px; padding-bottom: 120px; }
.ask-cards { display: grid; gap: 12px; }
.ask-cards li { padding: 20px; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; position: relative; }
.ask-cards .dots { position: absolute; top: 18px; left: 20px; width: 40px; height: 24px; background-image: radial-gradient(circle, #D5D3CE 0 2.5px, transparent 3px); background-size: 8px 8px; }
@media (min-width: 640px) { .ask-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .rad-ask { grid-template-columns: 5fr 7fr; gap: 40px; padding-top: 160px; padding-bottom: 240px; } .rad-ask-l { display: flex; flex-direction: column; gap: 24px; } .rad-ask-l p:last-child { margin-top: auto; } }
.rad-inside { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; background: var(--white); }
.rad-in-grid { display: grid; gap: 24px; width: 100%; }
.rad-tabs li button { font-size: var(--fs-h3); line-height: 1.45; min-height: 44px; color: var(--grey); text-align: left; transition: color .3s ease; }
.rad-tabs li.on button { color: var(--ink); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.rad-desc { margin-top: 20px; min-height: 130px; color: var(--mute); max-width: 380px; }
.rad-desc [data-step-panel] { display: none; }
.rad-desc [data-step-panel].on { display: block; }
.rad-in-r { position: relative; aspect-ratio: 3 / 2; background: #FCFCFA; }
.rad-in-r [data-step-panel] { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; margin: 0; }
.rad-in-r [data-step-panel].on { opacity: 1; }
@media (min-width: 900px) { .rad-in-grid { grid-template-columns: 4fr 7fr; gap: 60px; align-items: center; } }
.rad-band { position: relative; margin: 120px 12px 0; min-height: 520px; display: grid; place-items: center; color: #fff; overflow: hidden; text-align: center; }
@media (min-width: 1100px) { .rad-band { min-height: 960px; margin-top: 240px; } }
.rad-band-bg { position: absolute; inset: 0; }
.rad-band-bg img { width: 100%; height: 100%; object-fit: cover; animation: kb 24s ease-in-out infinite alternate; }
.rad-band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(12,20,28,.5); }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .rad-band-bg img { animation: none; } }
.rad-band-in { position: relative; z-index: 2; }
.rad-band .rad-btns { justify-content: center; }

/* ── 이용 안내 / 관리 기준 공통 ── */
.q-hero { padding-top: 96px; padding-bottom: 24px; }
.q-hero .h1 { margin: 6px 0 18px; }
.q-hero .lead { max-width: 640px; margin-bottom: 28px; }
.q-sec { padding-top: 72px; }
.q-sec .h3 { margin-bottom: 14px; }
.q-sec .eyebrow { margin-bottom: 20px; }
.q-sec .prose { max-width: 680px; }
.two-lists { display: grid; gap: 12px; margin-top: 32px; }
.two-lists ul { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.two-lists li::before { content: ""; display: inline-block; width: 8px; height: 8px; background: currentColor; margin-right: 10px; }
@media (min-width: 800px) { .two-lists { grid-template-columns: 1fr 1fr; } }
.matrix { margin-top: 28px; padding: 20px; }
.mx { min-width: 460px; }
.mx tbody th { color: var(--ink); white-space: nowrap; font-weight: 400; }
.mx td { border-top: 4px solid var(--surface); text-align: right; padding: 14px 16px; }
.mx-cap { margin-top: 10px; }
.tri { display: grid; gap: 12px; margin-top: 12px; }
.tri li { padding: 20px; }
.tri li h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.tri .dark { background: var(--ink); color: #fff; }
.tri .dark p { color: rgba(255,255,255,.75); }
@media (min-width: 800px) { .tri { grid-template-columns: repeat(3, 1fr); } }
.grid2 { display: grid; gap: 12px; margin-top: 28px; }
.grid2 li, .grid2 > div { padding: 20px; }
.grid2 h3 { margin: 12px 0 6px; }
@media (min-width: 800px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.sqs { display: inline-flex; gap: 4px; }
.sqs i { width: 8px; height: 8px; background: var(--ink); }
.confirm { display: grid; gap: 28px; }
.report { padding: 20px; }
.rep-h { display: flex; justify-content: space-between; margin-bottom: 16px; }
.report dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.report dt { color: var(--mute); }
@media (min-width: 900px) { .confirm { grid-template-columns: 1fr 1fr; gap: 60px; } }
.q-form { max-width: 680px; margin-bottom: 20px; }
.faq-i { background: var(--surface); margin-bottom: 4px; }
.faq-i summary { list-style: none; cursor: pointer; min-height: 52px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: opacity var(--quick) ease; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { opacity: .65; }
.faq-i summary::after { content: ""; width: 12px; height: 12px; background: #C8C4BE; flex: none; }
.faq-i summary i { display: none; }
.faq-i[open] summary::after { background: var(--ink); }
.faq-i p { padding: 4px 14px 18px; color: var(--mute); max-width: 720px; }
.q-sec > .faq + p { margin-top: 20px; }

/* ── 요금표 ── */
.dd-hero { padding-top: 96px; padding-bottom: 16px; }
.dd-h1 { font-size: clamp(36px, 7vw, 50px); line-height: 1.2; margin: 6px 0 18px; }
.dd-hero .lead { max-width: 640px; margin-bottom: 28px; }
.dd-hero p:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-body { padding-top: 56px; padding-bottom: 120px; }
.dd-tabs { gap: 0 24px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tab2 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 8px 0 10px; min-height: 64px; flex: none; }
.tab2 small { font-size: 18px; color: var(--mute); }
.tab[aria-selected="false"] small { color: var(--grey); }
.dd-h2 { margin: 72px 0 16px; max-width: 640px; }
.dd-lead { max-width: 640px; }
.dd-panel { margin-top: 56px; }
.dd-cols { display: grid; gap: 40px; }
.dd-l .h3 { margin: 10px 0 16px; }
.dd-l p + p { margin-top: 12px; }
.dd-q { margin-bottom: 18px; color: var(--mute); }
.bar-row { margin-bottom: 16px; }
.bar-l { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bar { height: 6px; background: #EFEEEB; }
.bar i { display: block; height: 100%; width: 0; transition: width 1s var(--ease); }
.dd-panel:not([hidden]) .bar i { width: var(--w); }
@media (min-width: 1000px) { .dd-cols { grid-template-columns: 5fr 7fr; gap: 80px; } }
.dd-why { margin-top: 72px; }
.why { display: grid; gap: 28px; margin-top: 12px; }
.why li { border-top: 1px solid var(--ink); padding-top: 14px; }
.why-t { color: var(--mute); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.why-t i { width: 10px; height: 10px; display: inline-block; }
.neg { background: #DE7B4E; }
.mix { background: #C8C4BE; }
.why .h4 { margin-bottom: 8px; }
@media (min-width: 800px) { .why { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.dd-quote { margin-top: 96px; max-width: 880px; }
.dd-quote p { font-size: var(--fs-h2); line-height: 1.3; }
.dd-quote footer { margin-top: 18px; }
.dd-foot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 96px; }
@media (min-width: 800px) { .dd-foot { flex-direction: row; justify-content: space-between; } .dd-foot p:first-child { max-width: 520px; } }

/* ── 관리 기준 ── */
.tri3 { display: grid; gap: 12px; margin-top: 32px; }
.tri3 li { padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.tri3 .h3 { font-size: var(--fs-h4); margin: 0; }
@media (min-width: 900px) { .tri3 { grid-template-columns: repeat(3, 1fr); } }
.quad-wrap { display: grid; gap: 28px; margin-top: 12px; }
.quad { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); aspect-ratio: 1 / 1; max-width: 420px; width: 100%; }
.quad > div { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); padding: 8px; gap: 4px; }
.quad small { color: var(--mute); font-size: 18px; }
.quad .hit { color: #B5502A; }
.flow { display: flex; flex-direction: column; gap: 8px; }
.flow li { background: var(--surface); padding: 24px 20px; }
.flow li.hl { border: 1px solid #DE7B4E; }
@media (min-width: 900px) { .quad-wrap { grid-template-columns: 420px 1fr; gap: 12px; align-items: center; } }
.ex-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ex-head .car-nav { margin: 0; }
.ex-row { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.badge { background: var(--ink); color: #fff; padding: 10px 14px; }
@media (min-width: 800px) { .ex-row { flex-direction: row; justify-content: space-between; align-items: center; } .badge { white-space: nowrap; } }
.bars2 { margin-top: 24px; display: grid; gap: 14px; }
.track { display: flex; height: 22px; background: #E6E6E4; }
.track i { display: block; width: var(--w); }
.b-l { display: flex; justify-content: space-between; margin-bottom: 6px; }
.legend { display: flex; gap: 20px; color: var(--mute); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; }
.who { margin-top: 32px; }
.notes li { min-height: 140px; }
.notes h3 { margin-top: 0; }

/* ── 자주 묻는 질문 / 약관 / 개인정보 ── */
.kb-hero { padding-top: 96px; padding-bottom: 24px; }
.kb-hero .h1 { margin: 6px 0 18px; }
.kb-hero .lead { max-width: 680px; }
.kb-list { padding-top: 40px; padding-bottom: 160px; }
.kb-g { margin-bottom: 64px; max-width: 938px; }
.kb-g .eyebrow { margin-bottom: 14px; }
.lg-list { padding-top: 40px; padding-bottom: 160px; }
.lg-list .row-list { max-width: 1255px; }
.lg-row { align-items: flex-start; padding-block: 14px; }
.lg-text { margin-top: 56px; max-width: 720px; }
.pp-in { max-width: 621px; margin-inline: auto; padding-block: 28px; }
@media (min-width: 1100px) { .pp-in { margin-left: max(0px, calc((100% - 1255px) / 2)); } }
.pp-in .h4 { font-size: 24px; margin-bottom: 10px; }
.pp-h3 { font-size: 20px; margin: 6px 0 8px; }
.pp-in p { line-height: 1.65; }
.pp-ul { margin-top: 10px; padding-left: 22px; list-style: disc; line-height: 1.65; }
.pp { padding-top: 72px; padding-bottom: 96px; }

/* ── 해변 정보 (/live) ── */
.live-hero { padding-top: 72px; padding-bottom: 40px; }
.lv-h { font-size: clamp(30px, 6vw, 48px); line-height: 1.2; max-width: 960px; }
.live-hero .lead { margin-top: 8px; }
.lv-grid { display: grid; gap: 32px; margin-top: 40px; }
.seat { position: relative; height: 440px; max-width: 560px; }
.oval { position: absolute; left: 50%; top: 40%; width: min(300px, 60%); height: 144px; transform: translateX(-50%); border-radius: 80px; background: var(--surface); }
.av { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; transition: opacity var(--quick) ease; }
.av:hover { opacity: .7; }
.avc { width: 72px; height: 72px; border-radius: 50%; display: block; outline: 3px solid transparent; outline-offset: 2px; opacity: .9; transition: outline-color .2s ease, opacity .2s ease; }
.av.on .avc { outline-color: #ABBBB1; opacity: 1; }
.avl { font-size: 18px; color: var(--mute); white-space: nowrap; }
.av.on .avl { color: var(--ink); }
.av0 { left: 18%; top: 15%; }
.av1 { left: 50%; top: 7%; }
.av2 { left: 82%; top: 15%; }
.av3 { left: 12%; top: 58%; }
.av4 { left: 88%; top: 58%; }
.av5 { left: 50%; top: 88%; }
.feed { position: relative; }
.feed-top { text-align: right; margin-bottom: 12px; }
.bubble { background: var(--surface); padding: 20px 24px; max-width: 560px; }
.bubble h2 { margin-bottom: 10px; }
.lv-note { margin-top: 28px; padding: 16px 20px; border: 1px solid var(--line); color: var(--mute); max-width: 800px; }
@media (min-width: 1000px) { .lv-grid { grid-template-columns: 7fr 5fr; gap: 80px; align-items: start; } .seat { height: 470px; } }
.lv-text { padding-top: 32px; padding-bottom: 120px; }
.lv-text .prose { max-width: 680px; margin-top: 24px; }

/* ── 하루 일정 (/live-society) ── */
.day-hero { display: grid; gap: 0; }
.day-map { position: relative; min-height: 460px; background: var(--surface); }
.day-map video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.day-map::after { content: ""; position: absolute; inset: 0; background: rgba(12,20,28,.28); }
.chip { position: absolute; z-index: 2; top: 20px; background: rgba(255,255,255,.92); padding: 8px 12px; max-width: calc(100% - 40px); }
.chip-l { left: 20px; }
.chip-r { display: none; }
.dot { display: inline-block; width: 10px; height: 10px; background: #DE5A14; margin-right: 8px; }
.tl { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.94); padding: 6px 10px; }
.tl-btn { background: var(--ink); color: #fff; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.tl-bar { flex: 1; display: block; }
.tl-bar input { width: 100%; accent-color: var(--ink); min-height: 44px; }
.tl-time { min-width: 3.4em; text-align: right; }
.day-side { padding: 20px var(--pad) 32px; border-top: 1px solid var(--line); }
.day-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.day-panel { padding-top: 20px; }
.day-now { font-size: var(--fs-h4); margin: 4px 0 8px; }
.day-all li { padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.5; }
@media (min-width: 1000px) {
  .day-hero { grid-template-columns: 1fr 374px; min-height: 799px; }
  .day-map { min-height: 799px; }
  .chip-r { display: block; left: auto; right: 24px; }
  .day-side { border-top: 0; border-left: 1px solid var(--line); padding-inline: 24px; }
}
.day-find { padding-top: 56px; padding-bottom: 120px; }
.find-head { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid var(--line); }
.find-head .h1 { font-size: clamp(34px, 6vw, 48px); }
.find-head .tabs { border-bottom: 0; }
@media (min-width: 800px) { .find-head { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.find-p { margin-top: 28px; max-width: 680px; }
.day-find .small { margin-top: 36px; }

/* ── 주변 명소 (/talk-of-the-town) ── */
.talk-hero { height: min(78svh, 787px); min-height: 520px; background: var(--surface); }
.talk-card { position: absolute; z-index: 3; left: var(--pad); top: 24px; width: min(360px, calc(100% - var(--pad) * 2)); background: rgba(255,255,255,.94); color: var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.talk-card .btn { align-self: flex-start; margin-top: 8px; }
.talk-q { font-size: var(--fs-h4); line-height: 1.3; }
.talk-hero .hero-hint { color: #fff; }
.board { padding-top: 72px; padding-bottom: 160px; }
.board .find-head { margin-bottom: 8px; }
.bnote { margin: 18px 0 8px; }
.sq-o { display: inline-block; width: 10px; height: 10px; background: #DE5A14; margin-left: 8px; }
.board-p td:nth-child(2) { white-space: nowrap; }
.board-p .table td, .board-p .table th { padding-right: 24px; }

/* ── 예약하기 ── */
.rv-hero { padding-top: 56px; padding-bottom: 24px; }
.rv-hero .h1 { max-width: 760px; margin: 8px 0 16px; }
.rv-hero .lead { max-width: 680px; }
.rv-bar { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 16px; background: var(--surface); align-items: end; }
.rv-bar .fld input, .rv-bar .fld select { background: #fff; }
.rv-count { display: flex; align-items: center; min-height: 48px; }
@media (min-width: 700px) { .rv-bar { grid-template-columns: repeat(3, 1fr) auto; } .rv-count { justify-content: flex-end; padding-left: 12px; } }
.rv-sum { margin-top: 12px; min-height: 3em; max-width: 880px; }
.rv-grid { display: grid; gap: 40px 24px; grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 96px; }
@media (min-width: 720px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .rv-grid { grid-template-columns: repeat(3, 1fr); } }
.rv-card { scroll-margin-top: calc(var(--nav-h) + 16px); background: #fff; transition: opacity .3s ease; }
.rv-card.is-off { opacity: .45; }
.rv-card.is-hit .rv-body { outline: 2px solid var(--ink); outline-offset: 8px; }
.rv-body { padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.rv-spec { color: var(--mute); display: grid; gap: 2px; }
.rv-price { font-size: var(--fs-h3); line-height: 1.2; margin-top: 6px; }
.rv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rv-btns .btn { flex: 1 1 140px; }
.rv-btns a[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.rv-info { padding-bottom: 160px; }
.rv-list { margin-top: 14px; padding-left: 22px; list-style: disc; display: grid; gap: 8px; max-width: 760px; color: var(--mute); }
.rv-list a { color: var(--ink); }

/* 일부 요소의 세부 움직임 */
.tab2 { transition: opacity .3s ease, color var(--quick) ease; }
.tab2[aria-selected="false"] { opacity: .3; }
.tab2[aria-selected="false"]:hover { opacity: .6; }
.feed-top .btn { animation: btn-in .15s ease both; animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) { .feed-top .btn { animation: none; } }