/* ============================================================
   운담공원 — 디자인 언어 시안 B (레퍼런스: 호시노리조트 카이界)
   ------------------------------------------------------------
   시안 A(기존 style.css)와의 차이
     · 좌측정렬 → 가운데정렬
     · 카드에 가둔 사진 → 풀블리드
     · 물빛 UI → 아이보리 바탕, 색은 사진에서
     · 볼드 800 → 명조 500 + 얇은 고딕
     · 3열 그리드 → 세로 한 줄
   승인되면 이 파일이 style.css를 대체한다.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/* 제목·워드마크 = 고운바탕(따뜻한 바탕체). 본문·UI = Pretendard */
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root {
  --paper:     #f7f5f0;   /* 따뜻한 아이보리 — 순백보다 눈이 편하다 */
  --paper-2:   #fdfcfa;
  --ink:       #2a2723;
  /* ⚠️ 국문은 얇은 웨이트에서 급격히 흐려진다.
     본문 회색을 영문 기준으로 잡으면 안 읽히므로 한 단계 진하게 둔다. */
  --ink-soft:  #57514a;
  --ink-faint: #948e84;
  --line:      #e3ded4;
  --line-soft: #ece6db;   /* 더 옅은 헤어라인 (표 내부 행 구분) */
  --water:     #4a7c80;   /* 아주 조금만 */
  --water-light: #cadedc; /* 카드 테두리 hover */
  --water-wash:  #ecf3f2; /* 옅은 물빛 배경(뱃지·토글·목차) */
  --mist-deep:   #dfe9e8; /* 썸네일 로딩 배경 */
  --deep:      #1d4045;   /* 짙은 물빛 (버튼 hover·강조) */
  --abyss:     #0d1a1c;   /* 진한 차콜 (푸터) */

  --wrap:   1080px;
  --gutter: clamp(20px, 5vw, 40px);

  /* ★★ 간격 원칙 — 반드시 지킨다 ★★
     1. 여백은 아래 --sp 스케일만 쓴다. 임의 px(48px, 40px 등) 직접 입력 금지.
     2. 상하 여백은 특별한 이유가 없으면 같은 토큰(대칭). padding-block은 단일값으로.
     3. 비대칭이 꼭 필요하면 그 줄에 주석으로 이유를 남긴다.
     이 원칙을 어기면 여백이 매번 어긋나 사람이 일일이 잡아야 한다. */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  clamp(36px, 4.5vw, 52px);
  --sp-6:  clamp(48px, 6vw, 72px);
  --sp-7:  clamp(60px, 8vw, 100px);
  --sp-8:  clamp(80px, 10vw, 130px);

  --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  /* 고운바탕은 400/700만 있다. 500/600을 지정하면 700으로 반올림되니 주의. */
  --serif: "Gowun Batang", "Nanum Myeongjo", serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  line-height: 1.9; letter-spacing: -0.005em;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* 한글 줄바꿈 품질: 제목·짧은 문단은 줄을 고르게(외톨이 단어 방지), 일반 문단은 orphan만 방지 */
h1, h2, h3, .lp__h, .page__title,
.lp__lead, .lp__note, .lp__story-lead, .lp__story-body, .page__lead,
.gfeat__item p, .over__txt p, .fclose__body, .fclose__lead, .lead, .story__desc, .spec__ref-note { text-wrap: balance; }
p { text-wrap: pretty; }
.brk { display: block; text-wrap: balance; }   /* 문장 단위 블록 — 각 문장 줄을 고르게 */
a { color: inherit; text-decoration: none; }
h1,h2,h3 { margin: 0; font-weight: 500; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* 세로 리듬 — 넉넉하되 과하지 않게 (상하 대칭) */
.sec { padding-block: var(--sp-7); text-align: center; }
.sec--tight { padding-block: var(--sp-6); }

/* ---------- 헤더 2단 (포도호텔 방식) — 상단 로고줄 + 하단 메뉴줄 ---------- */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; color: #fff;
  padding-top: 14px;
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
.hd__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 56px;
}
.hd__spacer { justify-self: start; grid-column: 1; }
/* 햄버거 — 데스크톱 숨김, 모바일 표시.
   ★ display:none이어도 로고가 밀리지 않도록 세 요소 모두 grid-column을 못박는다. */
.hd__burger { grid-column: 1; justify-self: start; display: none; background: none; border: 0; cursor: pointer; padding: 8px; width: 40px; }
.hd__logo { grid-column: 2; }
.hd__lang { grid-column: 3; }
.hd__burger span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .3s, opacity .2s; }
.hd.is-open .hd__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hd.is-open .hd__burger span:nth-child(2) { opacity: 0; }
.hd.is-open .hd__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* 언어 드롭다운 — 현재 언어만 보이고 호버 시 세로 목록 */
.hd__lang { justify-self: end; position: relative; }
.hd__lang-cur {
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: inherit; font-size: 13px; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
}
.hd__lang-cur::after { content: "▾"; font-size: 9px; opacity: .7; }
.hd__lang-menu {
  position: absolute; top: 100%; right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 128px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; box-shadow: 0 14px 34px rgba(42,39,35,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.hd__lang:hover .hd__lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hd__lang-menu a {
  padding: 3px 12px; border-radius: 6px; font-size: 13.5px; letter-spacing: .02em;
  color: var(--ink-soft); white-space: nowrap; transition: background .15s, color .15s;
}
.hd__lang-menu a:hover { background: var(--water-wash); color: var(--ink); }
.hd__lang-menu a.on { color: var(--water); font-weight: 600; }
.hd__logo { justify-self: center; }
/* 투명 헤더에서도 로고는 순백+그림자로 또렷하게 앞으로 나온다 */
.hd__logo b { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: .5em; padding-left: .5em; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.3); }

/* 하단 메뉴줄 — 원페이지 단순 링크 (서브메뉴 없음)
   메뉴는 로고(명조)와 대비되게 Pretendard 볼드·좁은 자간으로 단단하게 */
.hd__menu { display: flex; justify-content: center; gap: clamp(48px, 8.5vw, 108px); height: 54px; align-items: center; margin-top: 8px; }
.hd__menu a {
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  color: #fff; opacity: .72; transition: opacity .2s;   /* 로고보다 한 단계 뒤로 */
}
.hd__menu a:hover { opacity: 1; }
/* 개장 후 공개 메뉴 — 흐리게, 클릭 불가, 호버 시 안내 */
.hd__menu .soon {
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  opacity: .38; cursor: default; position: relative;
}
.hd__menu .soon::after {
  content: attr(data-soon); position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0; white-space: nowrap;
  color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 3px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.hd__menu .soon:hover::after { opacity: 1; }

/* 스크롤 시 흰 배경 — 로고는 진한 먹, 메뉴는 부드러운 회색으로 대비를 준다.
   ★ padding-top·로고 크기·top 높이를 투명 헤더와 동일하게 유지해 로고가 튀지 않게 한다. */
.hd.is-solid { background: rgba(247,245,240,.96); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
.hd.is-solid .hd__logo b { color: var(--ink); text-shadow: none; }
.hd.is-solid .hd__menu a { color: var(--ink-soft); }        /* 메뉴는 블랙을 빼고 톤다운 */
.hd.is-solid .hd__menu a:hover { color: var(--ink); opacity: 1; }
.hd.is-solid .hd__lang { color: var(--ink-soft); }

/* ---------- 히어로 (100vh 풀블리드) ---------- */
.hero {
  position: relative; height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
/* 3장 크로스페이드 슬라이드 — JS가 .on 을 옮긴다. 활성 사진은 서서히 확대(켄번스) */
.hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1); transition: opacity 1.3s ease;
}
.hero__bg img.on { opacity: 1; animation: heroKen 8s ease-out forwards; }
@keyframes heroKen { from { transform: scale(1.005); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero__bg img.on { animation: none; } }

/* 좌우 화살표 — 세로로 길고 매우 얇은 선 */
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  background: none; border: 0; color: #fff; opacity: .5; cursor: pointer;
  padding: 20px; transition: opacity .2s;
}
.hero__arrow svg { display: block; width: 20px; height: clamp(56px, 10vw, 90px); }
.hero__arrow:hover { opacity: 1; }
.hero__arrow.prev { left: clamp(6px, 2vw, 36px); }
.hero__arrow.next { right: clamp(6px, 2vw, 36px); }

/* 하단 점 */
.hero__dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 3; }
.hero__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.4); transition: background .25s, transform .25s;
}
.hero__dots button:hover { background: rgba(255,255,255,.7); }
.hero__dots button.on { background: #fff; transform: scale(1.15); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,30,32,.46) 0%, rgba(20,30,32,.14) 34%, rgba(20,30,32,.10) 62%, rgba(20,30,32,.44) 100%);
}
.hero__eyebrow { margin-bottom: 28px; font-size: 12.5px; letter-spacing: .3em; opacity: .92; text-transform: uppercase; }
.hero__en {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.1; letter-spacing: .04em;
  text-shadow: 0 2px 30px rgba(0,0,0,.34);
}
.hero__ko {
  font-family: var(--serif); font-weight: 400;
  font-size: 16px; letter-spacing: .18em; padding-left: .18em;
  text-shadow: 0 1px 16px rgba(0,0,0,.5);
}
/* 스크롤 유도 */
.hero__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .22em; opacity: .82; text-transform: uppercase;
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 42px; margin: 12px auto 0;
  background: linear-gradient(#fff, transparent);
}

/* 풀블리드 사진 (본문 중간용) */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.bleed img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; }
.bleed figcaption {
  max-width: var(--wrap); margin: 12px auto 0; padding-inline: var(--gutter);
  text-align: right; font-size: 11.5px; color: var(--ink-faint);
}

/* ---------- 두 이야기 블록 (풀블리드, 사진 위 텍스트) ---------- */
.story {
  position: relative; min-height: 82vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; padding: 80px var(--gutter);
}
.story__bg { position: absolute; inset: 0; z-index: -2; }
.story__bg img { width: 100%; height: 100%; object-fit: cover; }
.story::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,28,30,.30) 0%, rgba(18,28,30,.44) 55%, rgba(18,28,30,.58) 100%);
}
.story__num {
  font-family: var(--serif); font-weight: 300; font-size: 12.5px; letter-spacing: .28em;
  color: rgba(255,255,255,.6); margin-bottom: 24px;
}
.story__title {
  font-family: var(--serif); font-weight: 400; line-height: 1.45;
  font-size: clamp(21px, 2.7vw, 30px); letter-spacing: .03em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 22px rgba(0,0,0,.42);
}
.story__desc {
  margin: 22px auto 0; max-width: 27em; font-size: 14.5px; line-height: 2.0;
  font-weight: 300; color: rgba(255,255,255,.6);
  text-shadow: 0 1px 14px rgba(0,0,0,.36);
}
.story__link {
  display: inline-block; margin-top: 38px; padding-bottom: 4px;
  font-size: 13.5px; font-weight: 300; letter-spacing: .1em;
  color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.35);
  transition: color .25s, border-color .25s;
}
.story__link:hover { color: #fff; border-color: #fff; }

/* ---------- 본문 블록 ---------- */
.lead {
  max-width: 26em; margin: 0 auto; font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 400;
  line-height: 2.3; color: var(--ink); letter-spacing: .01em;
}
.body {
  max-width: 30em; margin: 26px auto 0; font-size: 15.5px;
  font-weight: 400; line-height: 2.05; color: var(--ink-soft);
}
.kicker {
  font-size: 12.5px; letter-spacing: .2em; color: var(--water);
  text-transform: uppercase; margin-bottom: 26px;
}
.sec h2 {
  font-family: var(--serif); font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 400; line-height: 1.6; letter-spacing: .02em;
}

/* 얇은 구분선 — 섹션 사이 숨 고르기 */
.rule { width: 1px; height: clamp(40px, 6vw, 72px); background: var(--line); margin: 0 auto; }

/* ---------- 사진 + 겹친 글 (카이 방식) ----------
   큰 사진을 깔고, 흰 글상자를 아래 모서리에 작게 얹는다.
   반반 그리드가 아니라 '사진이 주인, 글은 얹힘'이 핵심. */
.over { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.over__row { position: relative; }
.over__row + .over__row { margin-top: clamp(80px, 11vw, 150px); }
/* 사진 — 화면의 대부분. 한쪽으로 치우쳐 반대편에 글상자 자리를 만든다 */
.over__img { margin: 0; width: 76%; }
.over__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.over__row--flip .over__img { margin-left: auto; }
/* 글상자 — 사진 아래 모서리에 작게 얹힌다 */
.over__txt {
  position: absolute; bottom: -30px; z-index: 2;
  width: min(400px, 48%); background: var(--paper-2);
  padding: clamp(30px, 3.5vw, 44px); text-align: left;
  box-shadow: 0 24px 60px rgba(42,39,35,.13);
}
.over__row       .over__txt { right: 0; }
.over__row--flip .over__txt { left: 0; }
.over__depth {
  font-family: var(--serif); font-size: 14px; color: var(--water);
  letter-spacing: .1em; margin-bottom: 14px;
}
.over__txt h3 {
  font-family: var(--serif); font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600; line-height: 1.5; letter-spacing: .01em;
}
.over__txt p { margin-top: 16px; font-size: 14.5px; font-weight: 400; line-height: 1.95; color: var(--ink-soft); }
.facility__note { text-align: center; color: var(--ink-faint); font-size: 12.5px; margin-top: var(--sp-6); }
/* 쉼의 공간 — 서술식 편집 레이아웃 (큰 사진 + 아래 흐르는 글) */
.fspace { max-width: 880px; margin: 0 auto; padding: var(--sp-7) var(--gutter) 0; text-align: center; }
.fspace__img { margin: 0; }
.fspace__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; }
.fspace__label { margin-top: 28px; font-family: var(--serif); font-size: 13px; letter-spacing: .1em; color: var(--water); }
.fspace__title { margin-top: 14px; font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; line-height: 1.55; letter-spacing: .01em; color: var(--ink); }
.fspace__body { max-width: 40em; margin: 18px auto 0; font-size: 15px; font-weight: 300; line-height: 2.05; color: var(--ink-soft); }
.fspace__title .brk, .fspace__body .brk { display: block; text-wrap: balance; }

/* 쉼의 공간 맺음말 (주인장의 말) */
.fclose { max-width: 640px; margin: 0 auto; padding-top: var(--sp-8); text-align: center; }
.fclose__rule { width: 1px; height: clamp(40px, 6vw, 64px); background: var(--line); margin: 0 auto var(--sp-6); }
.fclose__lead { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 400; line-height: 1.6; letter-spacing: .01em; color: var(--ink); }
.fclose__body { margin-top: 22px; font-size: 15px; font-weight: 300; line-height: 2.05; color: var(--ink-soft); }

/* ---------- 머무는 방법 = 커머스 랜딩 (.lp) ---------- */
.lp { padding-bottom: var(--sp-8); }
/* 히어로 */
.lp__hero { position: relative; min-height: clamp(420px, 60vh, 560px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.lp__hero-bg { position: absolute; inset: 0; z-index: -1; }
.lp__hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.lp__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,28,.42), rgba(20,26,28,.30) 45%, rgba(20,26,28,.60)); }
.lp__hero-in { position: relative; z-index: 1; padding: 0 var(--gutter); max-width: 640px; }
.lp__eyebrow { font-family: var(--serif); font-size: 13px; letter-spacing: .28em; opacity: .92; }
.lp__head { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 5vw, 46px); letter-spacing: .02em; line-height: 1.32; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.lp__sub { margin-top: 16px; font-size: 15px; font-weight: 300; line-height: 1.8; opacity: .95; }
.lp__cta { display: inline-block; margin-top: 30px; padding: 14px 34px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; transition: background .2s; }
.lp__cta:hover { background: var(--paper); }
/* 주인장 내러티브 (감성 오프너) */
.lp__story { max-width: 860px; margin: var(--sp-7) auto 0; padding-inline: var(--gutter); text-align: center; }
.lp__story-img { margin: 0; }
.lp__story-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; }
.lp__story-tx { max-width: 40em; margin: var(--sp-6) auto 0; }
.lp__story-lead { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 24px); font-weight: 400; line-height: 1.6; color: var(--ink); }
.lp__story-body { margin-top: 20px; font-size: 15px; font-weight: 300; line-height: 2.05; color: var(--ink-soft); }
/* 갤러리 (공간 미리보기) */
.lp__gallery { margin-top: var(--sp-7); }
.lp__gal-title { text-align: center; font-family: var(--serif); font-size: 14px; letter-spacing: .1em; color: var(--water); margin-bottom: 22px; }
.lp__gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lp__gal-grid figure { margin: 0; }
.lp__gal-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; display: block; }
.lp__gal-grid figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-faint); }
@media (max-width: 560px) { .lp__gal-grid { grid-template-columns: 1fr; gap: 20px; } .lp__gal-grid img { aspect-ratio: 16/10; } }
/* 섹션 공통 */
.lp__sec { padding-block: var(--sp-7); text-align: center; }
.lp__sec--tint { background: var(--water-wash); }
.lp__h { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 28px); font-weight: 400; letter-spacing: .02em; }
.lp__lead { margin: 16px auto 0; max-width: 34em; font-size: 14.5px; font-weight: 300; line-height: 1.9; color: var(--ink-soft); }
.lp__lead--wide { max-width: 42em; line-height: 2.05; }
.lp__note { margin: 20px auto 0; max-width: 34em; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: var(--ink-faint); }
/* 요금 (조용한 텍스트 한 줄) */
.lp__price { margin: 24px auto 0; font-family: var(--serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 400; letter-spacing: .01em; color: var(--deep); }
/* (미사용) 요금 카드 */
.gfee { margin: 30px auto 0; max-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gfee__col { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 30px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 34px rgba(42,39,35,.06); }
.gfee__k { font-size: 13px; letter-spacing: .06em; color: var(--ink-faint); }
.gfee__v { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 40px); font-weight: 700; color: var(--deep); letter-spacing: -.02em; }
.gfee__v em { font-style: normal; font-size: .42em; font-weight: 600; color: var(--ink-soft); margin-left: 3px; letter-spacing: 0; }
.gfee__badges { margin-top: 20px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.gfee__badge { font-size: 12px; color: var(--water); background: var(--water-wash); border: 1px solid var(--water-light); border-radius: 999px; padding: 6px 14px; letter-spacing: .02em; }
/* 편의 아이콘 그리드 */
.gfeat { margin: 34px auto 0; max-width: 780px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; text-align: left; }
.gfeat__item { display: flex; gap: 14px; align-items: flex-start; }
.gfeat__ic { width: 26px; height: 26px; flex: 0 0 auto; color: var(--water); margin-top: 2px; }
.gfeat__item h3 { font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.gfeat__item p { margin-top: 4px; font-size: 13px; font-weight: 300; color: var(--ink-soft); line-height: 1.6; }
/* 시간표 카드 */
.gtime { margin: 30px auto 0; max-width: 460px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px 28px; box-shadow: 0 12px 34px rgba(42,39,35,.05); }
.gtime__row { display: grid; grid-template-columns: 60px 1fr auto; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); text-align: left; }
.gtime__row:last-child { border-bottom: 0; }
.gtime__no { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
.gtime__time { font-size: 16px; letter-spacing: .02em; color: var(--deep); }
.gtime__note { font-size: 12px; color: var(--water); white-space: nowrap; }
/* 왜 이 물인가 (짙은 밴드) */
.lp__water { padding-block: var(--sp-7); text-align: center; background: var(--deep); color: #fff; }
.lp__water .lp__h { color: #fff; }
.lp__water .lp__lead { color: rgba(255,255,255,.85); }
.lp__link { display: inline-block; margin-top: 20px; font-size: 13.5px; letter-spacing: .04em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px; }
.lp__link:hover { border-color: #fff; }
/* 예약 버튼 (개장 전 = 비활성 표기) */
.lp__btns { margin: 28px auto 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp__btn { padding: 14px 30px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft); }
.lp__btn--primary { background: var(--deep); color: #fff; border-color: var(--deep); }
.lp__note--soon { margin-top: 12px; color: var(--water); font-size: 12px; letter-spacing: .02em; }
.lp__notice { max-width: 40em; margin: var(--sp-7) auto 0; text-align: center; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: var(--ink-faint); }
@media (max-width: 620px) { .gfeat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .gfeat { grid-template-columns: 1fr; } .gtime__row { grid-template-columns: 52px 1fr; } .gtime__note { grid-column: 2; } }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-block; margin-top: 40px; padding: 15px 40px;
  border: 1px solid var(--ink); font-size: 14px; letter-spacing: .06em;
  color: var(--ink); transition: all .25s ease; background: transparent;
}
.btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- 주의 문구 ---------- */
.note {
  max-width: 32em; margin: 40px auto 0; padding: 20px 24px;
  border: 1px solid var(--line); background: var(--paper-2);
  font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--ink-soft); text-align: left;
}
.note b { font-weight: 600; color: var(--ink); }

/* ============================================================
   블로그 — 목록 (물의 바탕 · 정성의 시간)
   ============================================================ */
/* 서브 페이지는 히어로가 없으므로 헤더가 흰 배경으로 시작한다 */
.page { padding-top: 172px; padding-bottom: var(--sp-8); }
.page__hd { text-align: center; padding-bottom: clamp(30px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page__eyebrow { font-family: var(--serif); font-size: 13px; letter-spacing: .28em; color: var(--water); }
.page__title { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 42px); letter-spacing: .04em; }
.page__lead { margin: 20px auto 0; max-width: 30em; font-size: 15px; font-weight: 300; line-height: 2; color: var(--ink-soft); }

/* 글 목록 — 캐러셀 (포도호텔 SPECIAL OFFERS 방식: 좌우 화살표 + dots) */
.plist { padding-block: var(--sp-5); }   /* 상하 대칭 */
.plist__carousel { position: relative; }
.plist__track {
  display: flex; gap: clamp(20px, 2.5vw, 32px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding: 4px;
}
.plist__track::-webkit-scrollbar { display: none; }
/* 데스크톱 3개 보임 */
.plist__track > .pcard { flex: 0 0 calc((100% - 2 * clamp(20px, 2.5vw, 32px)) / 3); scroll-snap-align: start; }
@media (max-width: 900px) { .plist__track > .pcard { flex: 0 0 calc((100% - clamp(20px, 2.5vw, 32px)) / 2); } }
@media (max-width: 620px) { .plist__track > .pcard { flex: 0 0 86%; } }

/* 좌우 원형 화살표 — 썸네일(이미지)과 글의 경계선에 중심 정렬.
   정확한 top은 JS(mock.js)가 썸네일 높이를 재서 설정한다. 아래 값은 로드 전 fallback. */
.plist__arrow {
  position: absolute; top: 230px; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  box-shadow: 0 6px 20px rgba(42,39,35,.12); transition: all .2s ease;
}
.plist__arrow:hover { background: var(--water); color: #fff; border-color: var(--water); }
.plist__arrow:disabled { opacity: 0; pointer-events: none; }
.plist__arrow.prev { left: -14px; }
.plist__arrow.next { right: -14px; }
@media (max-width: 620px) { .plist__arrow { display: none; } }

/* 하단 동그란 dots */
.plist__dots { display: flex; justify-content: center; gap: 9px; margin-top: 36px; }
.plist__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--mist-deep); border: 1px solid var(--line); transition: all .2s ease;
}
.plist__dots button.on { background: var(--water); border-color: var(--water); transform: scale(1.15); }

.pcard {
  display: flex; flex-direction: column; background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
a.pcard { color: inherit; }
/* 위치는 고정. 호버 시 그림자·테두리만 살짝 (위로 뜨지 않는다) */
a.pcard:hover { box-shadow: 0 14px 36px rgba(42,39,35,.1); border-color: var(--water-light); }
.pcard__thumb { margin: 0; overflow: hidden; aspect-ratio: 3/2; background: var(--mist-deep); position: relative; }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.pcard:hover .pcard__thumb img { transform: scale(1.05); }
/* 카드 좌상단 번호 배지 */
.pcard__badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font-family: var(--serif); font-size: 12px; letter-spacing: .06em; color: #fff;
  background: rgba(29,64,69,.82); padding: 6px 12px; border-radius: 4px;
}
.pcard__body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard__no { font-family: var(--serif); font-size: 12.5px; letter-spacing: .1em; color: var(--water); }
.pcard__title { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.45; letter-spacing: .02em; }
.pcard__sub { margin-top: 11px; font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--ink-soft); flex: 1; }
.pcard__more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .06em; color: var(--water); }

@media (max-width: 900px) { .plist__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plist__grid { grid-template-columns: 1fr; } }

/* ---------- 글 하단 시리즈 목차 (전체 글로 바로 이동) ---------- */
.toc { max-width: 680px; margin: clamp(48px, 6vw, 72px) auto 0; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.toc__label { font-family: var(--serif); font-size: 13px; letter-spacing: .18em; color: var(--water); text-align: center; margin-bottom: 24px; }
.toc__list { display: grid; gap: 2px; }
.toc__item { display: flex; align-items: baseline; gap: 14px; padding: 13px 16px; border-radius: 10px; transition: background .18s; }
a.toc__item:hover { background: var(--water-wash); }
.toc__item .n { font-family: var(--serif); font-size: 13px; color: var(--water); flex-shrink: 0; width: 1.4em; }
.toc__item .t { font-size: 15px; color: var(--ink-soft); }
a.toc__item:hover .t { color: var(--ink); }
/* 현재 보고 있는 글 */
.toc__item--now { background: var(--water-wash); }
.toc__item--now .t { color: var(--ink); font-weight: 500; }
.toc__item--now .here { margin-left: auto; font-size: 11px; letter-spacing: .04em; color: var(--water); flex-shrink: 0; }
.toc__all { display: block; text-align: center; margin-top: 28px; font-size: 13.5px; letter-spacing: .04em; color: var(--water); }
.toc__all:hover { color: var(--deep); }

/* ============================================================
   블로그 — 아티클(글 본문)
   ============================================================ */
.art { padding-top: 172px; padding-bottom: clamp(56px, 7vw, 96px); }
.art__head { max-width: 760px; margin: 0 auto; text-align: center; padding-bottom: clamp(36px, 5vw, 56px); }
.art__series { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--water); }
.art__title { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.4; letter-spacing: .02em; }
.art__sub { margin-top: 18px; font-size: 15.5px; font-weight: 300; color: var(--ink-soft); line-height: 1.8; }
.art__meta { margin-top: 22px; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-faint); }
/* 커버 — 풀블리드 대신 폭을 살짝 좁혀 라운드가 보이게 한다 */
.art__cover { max-width: 1080px; margin: 0 auto clamp(44px, 6vw, 76px); padding-inline: var(--gutter); }
.art__cover img { width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover; border-radius: 20px; }
.art__cover figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
/* 본문 중간 이미지 */
.art__body figure { margin: clamp(32px, 4.5vw, 52px) 0; }
.art__body figure img { width: 100%; border-radius: 16px; }
.art__body figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; }
.art__body { max-width: 680px; margin: 0 auto; font-size: 16.5px; line-height: 2.05; color: #3a352e; font-weight: 400; }
.art__body h2 {
  margin-top: 2.4em; margin-bottom: .2em; font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 25px); letter-spacing: .02em; color: var(--ink); line-height: 1.5;
}
.art__body p { margin-top: 1.3em; }
.art__body p:first-of-type { margin-top: 0; }
.art__body strong { font-weight: 600; color: var(--ink); }
.art__body em { font-style: normal; color: var(--water); }
/* ---------- 수질 성분표 ---------- */
.spec { max-width: 680px; margin: clamp(36px, 5vw, 52px) auto; }
.spec__cap {
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em; color: var(--water);
  text-align: center; margin-bottom: 18px;
}
.spec__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--line); }
.spec__tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec__tbl thead th {
  background: var(--water-wash); color: var(--ink); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--water-light);
  white-space: nowrap;
}
.spec__tbl th.spec__refh { color: var(--ink-faint); font-weight: 500; }
.spec__tbl tbody th {
  padding: 12px 18px; text-align: left; font-weight: 700; color: var(--ink);
  font-family: var(--serif); white-space: nowrap; border-bottom: 1px solid var(--line-soft);
}
.spec__tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.spec__tbl tbody tr:last-child th, .spec__tbl tbody tr:last-child td { border-bottom: 0; }
.spec__v { font-weight: 600; color: var(--deep); font-size: 16px; letter-spacing: -.01em; }
.spec__ref { color: var(--ink-faint); font-size: 13.5px; }   /* 참고 기준 = 흐리게 */
.spec__tbl th.spec__meeth { color: var(--ink-faint); font-weight: 500; }
.spec__meet { font-weight: 700; color: var(--water); font-size: 14px; letter-spacing: -.01em; white-space: nowrap; }
.spec__unit { margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); text-align: right; }
/* 법적 분류 기준 안내 (표에만 명시) */
.spec__crit { margin-top: 18px; padding: 16px 18px; background: var(--water-wash); border-radius: 10px; }
.spec__crit-t { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--water); margin-bottom: 10px; }
.spec__crit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.spec__crit li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.spec__crit li span { flex: 0 0 auto; min-width: 76px; color: var(--ink-soft); font-weight: 600; }
.spec__crit li b { font-weight: 400; color: var(--ink-faint); }
.spec__src { margin-top: 12px; font-size: 12.5px; letter-spacing: .02em; color: var(--water); }
.spec__src + .spec__src { margin-top: 3px; }   /* 연속된 출처 줄은 붙인다 */
.spec__note { margin-top: 6px; font-size: 13.5px; font-weight: 300; line-height: 1.8; color: var(--ink-soft); }

/* 글 끝 — 시리즈 이동 */
.art__nav { max-width: 680px; margin: clamp(56px, 7vw, 88px) auto 0; padding-top: 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.art__nav a { font-size: 13.5px; letter-spacing: .04em; color: var(--ink-soft); }
.art__nav a:hover { color: var(--ink); }
.art__nav .to-list { font-family: var(--serif); color: var(--water); }

@media (max-width: 720px) {
  .pcard { grid-template-columns: 1fr; gap: 20px; }
  .pnext__grid { grid-template-columns: 1fr; }
  .art__cover img { height: 260px; }
}

/* ============================================================
   찾아오시는 길
   ============================================================ */
.loc { padding-block: var(--sp-6); }   /* 상하 대칭 */
.loc__map {
  width: 100%; aspect-ratio: 16/9; max-height: 460px; border-radius: 20px; overflow: hidden;
  background: var(--mist-deep); border: 1px solid var(--line);
}
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.loc__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px);
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.loc__item { text-align: left; }
.loc__item h3 {
  font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--water);
  letter-spacing: .06em; margin-bottom: 12px;
}
.loc__item p { font-size: 15.5px; font-weight: 300; line-height: 1.95; color: var(--ink-soft); }
.loc__item p b { font-weight: 500; color: var(--ink); }
.loc__copy {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--water); cursor: pointer; border-bottom: 1px solid var(--water-light); padding-bottom: 2px;
}
.loc__note {
  max-width: 860px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 20px 24px;
  background: var(--water-wash); border-radius: 14px;
  font-size: 14px; font-weight: 300; line-height: 1.9; color: var(--ink-soft); text-align: left;
}
@media (max-width: 680px) { .loc__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 푸터 — 진한 차콜, 한 줄 (상하 대칭 토큰) ---------- */
.ft { background: var(--abyss); padding-block: var(--sp-3); text-align: center; }
.ft p { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.5); line-height: 1.9; }

@media (max-width: 820px) {
  /* 헤더: 좌 햄버거 · 가운데 로고 · 우 언어 */
  .hd__burger { display: block; }
  .hd__lang i { display: none; }   /* 모바일에선 언어 목록 접기 */
  /* 데스크톱 가로 메뉴 → 전체화면 오버레이 */
  .hd__menu {
    position: fixed; inset: 0; z-index: 25;
    flex-direction: column; justify-content: center; gap: 8px; height: 100vh; margin: 0;
    background: rgba(247,245,240,.98); backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease;
  }
  .hd.is-open .hd__menu { opacity: 1; visibility: visible; }
  .hd__menu a { font-size: 20px; padding: 16px; color: var(--ink); }
  /* 개장 후 공개 메뉴: 모바일 밝은 배경에선 opacity .38이 배경과 뭉개진다.
     읽히는 톤으로 올리고, 호버 안내(::after) 대신 라벨을 인라인 상시표시한다. */
  .hd__menu .soon { opacity: 1; color: var(--ink-soft); }
  .hd__menu .soon::after {
    position: static; transform: none; opacity: 1; display: inline-block;
    margin-left: 9px; padding: 3px 9px; border: 1px solid var(--water-light);
    background: var(--water-wash); color: var(--water);
    font-size: 11px; font-weight: 600; letter-spacing: .02em; vertical-align: middle;
  }

  /* 겹침을 풀어 사진 아래로 흐르게 한다 (absolute → static) */
  .over__img, .over__row--flip .over__img { width: 100%; margin: 0; }
  .over__txt,
  .over__row .over__txt, .over__row--flip .over__txt {
    position: static; width: auto; margin: -40px 20px 0; bottom: auto; left: auto; right: auto;
  }
}