/* 리버힐스파 홈페이지 — 디자인 시스템 정본은 저장소 DESIGN.md 「홈페이지」 절이다.
   riverhillspa.com 의 얼굴(숲색·금색·크림, Crimson 제목, 사진, 스크롤 등장)을 가져오되 값은 체계로 다시 잡았다
   (길록 2026-10-17 「기존에 만들어졌던 게 정답은 아니니까」). 값은 아래 :root 토큰으로만 쓴다 —
   화면 규칙에 색값·px 를 적으면 apps/web/scripts/check-site-tokens.mjs 가 막는다(선 굵기 1·2px 만 예외).
   색은 ERP(apps/web/src/index.css)와 같은 값이고, 간격 사다리는 ERP 의 Tailwind 4px 눈금과 같다. */
:root {
  /* 색 — ERP 와 한 벌 */
  --forest: #20312a;    /* 면: 꼬리말·아래 띠·서랍 = ERP --sidebar */
  --green: #213f34;     /* 주 단추·아이콘 = ERP --primary */
  --gold: #c09b62;      /* 로고·선·아이콘·숲색 위 글자 = ERP --ring */
  --gold-ink: #866634;  /* 흰·크림 위 금색 글자(흰 5.3:1·크림 4.8:1) */
  --cream: #f7f4ed;     /* 크림 면 = ERP --page */
  --sand: #efe9dc;      /* 한 칸 짙은 크림 = ERP --secondary */
  --line: #e6dfd0;      /* 선 = ERP --border */
  --ink: #212121;       /* 제목·값 = ERP --foreground */
  --ink-2: #4a4843;     /* 본문 */
  --ink-3: #6b6a63;     /* 흐린 글자 = ERP --muted-foreground */
  --on-forest: #d9d3c4; /* 숲색 위 글자 = ERP --sidebar-foreground */
  --on-forest-2: #a9a596;
  --white: #fff;
  --photo: #2b2b2b;     /* 사진이 오기 전 바탕 */
  --scrim: rgba(0, 0, 0, .24);
  --glass: rgba(255, 255, 255, .2);
  --hairline-dark: rgba(255, 255, 255, .1);
  --shadow-text: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-card: 2px 4px 24px -6px rgba(24, 39, 75, .12);
  --shadow-float: 0 8px 28px -6px rgba(24, 39, 75, .12), 0 18px 88px -4px rgba(24, 39, 75, .14);
  --shadow-bar: 0 -6px 24px rgba(0, 0, 0, .18);
  --photo-veil: linear-gradient(rgba(0, 0, 0, .28), transparent 40%, transparent 70%, rgba(0, 0, 0, .32));

  /* 글꼴 — 한글·숫자는 Pretendard(ERP 와 같다), 영문 제목·라벨은 Crimson Text 하나 */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Crimson Text', 'Times New Roman', serif;

  /* 글자 — 크기 사다리 12·14·16·18·20·24·44·56, 굵기 넷 300·400·600·700. 폰은 아래 미디어에서 같은 이름을 다시 정한다 */
  --w-strong: 600;
  --t-display: 600 44px/56px var(--sans);
  --t-display-sub: 300 24px/32px var(--sans);
  --t-title: 700 56px/64px var(--serif);
  --t-card-lg: 700 24px/32px var(--sans);
  --t-lead: 400 18px/30px var(--sans);
  --t-card: 700 20px/28px var(--sans);
  --t-body: 400 16px/26px var(--sans);
  --t-small: 400 14px/22px var(--sans);
  --t-eyebrow: 700 14px/20px var(--sans);
  --t-en: 600 14px/20px var(--serif);
  --t-en-lg: 600 20px/28px var(--serif);
  --t-tile: 600 24px/32px var(--serif);
  --t-nav: 600 18px/24px var(--serif);
  --t-button: 600 16px/24px var(--sans);
  --t-tag: 700 12px/12px var(--sans);
  --track-en: .08em;

  /* 간격 사다리 — ERP Tailwind 눈금(1·2·3·4·6·8·12·16·24)과 같은 값 */
  --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;
  /* 쓰임 이름 — 폰에서 다시 정하는 것은 이것들 */
  --sec: 160px;          /* 섹션 사이 */
  --head: var(--s-7);    /* 섹션 머리와 몸 사이 · 두 단 사이 */
  --gap: var(--s-5);     /* 격자 간격 */
  --pad: var(--s-6);     /* 카드 안 */
  --gutter: var(--s-5);  /* 화면 가장자리 */

  /* 크기 */
  --w-page: 1440px;      /* 본문 폭 */
  --w-mid: 1152px;       /* 카드 묶음 */
  --w-narrow: 800px;     /* 한 줄 목록 */
  --top-h: 80px;
  --bar-h: var(--s-8);
  --control: 52px;       /* 단추 높이 */
  --btn-min: 192px;
  --float: var(--s-7);   /* 떠 있는 둥근 단추 */
  --drawer: 320px;
  --icon: var(--s-4);    /* 글자 옆 아이콘 */
  --icon-md: 20px;       /* 떠 있는 단추·아래 띠 */
  --icon-lg: var(--s-7); /* 카드 머리 아이콘 */
  --tile: 120px;         /* 줄 앞 칸 */
  --media-h: 480px;      /* 프로그램 카드·지도 */
  --hero-min: 600px;
  --logo-top: 208px;
  --logo-intro: 288px;
  --logo-foot: 176px;

  /* 모서리 셋 */
  --r-lg: 32px;   /* 큰 사진·프로그램 카드 */
  --r-md: 20px;   /* 카드·지도·사진 */
  --r-sm: 12px;   /* 단추·줄·작은 사진 */

  /* 겹 — 떠 있는 것 넷의 순서 */
  --z-top: 10;
  --z-float: 20;
  --z-dim: 30;
  --z-drawer: 40;

  /* 움직임 — 커브는 ERP 와 같은 하나 */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .25s;
  --dur-in: .9s;
  --dur-photo: .8s;
  --rise: var(--s-6);
  --zoom: 1.04;          /* 사진 호버 */
  --nudge: var(--s-1);   /* 화살표 호버 */
}
@media (max-width: 767px) {
  :root {
    --t-display: 600 28px/36px var(--sans);
    --t-display-sub: 300 16px/24px var(--sans);
    --t-title: 700 44px/48px var(--serif);
    --t-card-lg: 700 20px/28px var(--sans);
    --t-lead: 400 16px/26px var(--sans);
    --t-card: 700 18px/26px var(--sans);
    --t-body: 400 16px/24px var(--sans);
    --t-en-lg: 600 18px/26px var(--serif);
    --t-tile: 600 20px/28px var(--serif);
    --sec: var(--s-9);
    --head: var(--s-6);
    --gap: var(--s-4);
    --pad: var(--s-5);
    --gutter: var(--s-4);
    --top-h: var(--s-8);
    --control: var(--s-7);
    --icon-lg: 40px;
    --tile: var(--s-8);
    --media-h: 320px;
    --hero-min: 420px;
    --logo-top: 160px;
    --logo-intro: 192px;
    --logo-foot: 144px;
    --r-lg: 24px;
    --r-md: 16px;
    --rise: var(--s-5);
  }
}
@media (max-width: 380px) {
  :root { --t-button: 600 14px/20px var(--sans); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); }
body { font: var(--t-body); color: var(--ink); background: var(--white); word-break: keep-all; padding-bottom: var(--bar-h); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
img[hidden] { display: none; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { flex: none; }
.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
section.wrap { padding-top: var(--sec); }
section.wrap:last-of-type { padding-bottom: var(--sec); }
br.m { display: none; }

/* 스크롤 등장 — 둘뿐: 떠오름(기본)·나타남(.fade, 큰 사진). data-d 는 지연 초 */
html.js .rv:not(.in) { opacity: 0; }
.rv.in { animation: rise var(--dur-in) var(--ease) both; }
.rv.in.fade { animation-name: fade; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 섹션 머리 — 모든 섹션이 같은 꼴: 금색 한 줄 + Crimson 제목 (+ 이끄는 글) */
.head { margin-bottom: var(--head); }
.head.center { text-align: center; }
.eyebrow { font: var(--t-eyebrow); color: var(--gold-ink); margin-bottom: var(--s-2); }
.title { font: var(--t-title); color: var(--ink); }
.head .lead { margin-top: var(--s-5); font: var(--t-lead); color: var(--ink-2); }
.en { font: var(--t-en); letter-spacing: var(--track-en); text-transform: uppercase; }
.more { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-en-lg); color: var(--gold-ink); white-space: nowrap; }
.more svg { width: auto; height: var(--s-3); fill: currentColor; transition: transform var(--dur) var(--ease); }
a:hover .more svg, a.more:hover svg { transform: translateX(var(--nudge)); }

/* 단추 — 한 꼴, 채움·선 두 가지 */
.btn { min-height: var(--control); padding: 0 var(--s-6); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); font: var(--t-button); transition: background-color var(--dur) var(--ease); }
.btn svg { width: var(--icon); height: var(--icon); fill: currentColor; }
.btn.solid { background: var(--green); color: var(--cream); }
.btn.solid:hover { background: var(--forest); }
.btn.line { border: 1px solid var(--gold); color: var(--gold-ink); background: var(--white); }
.btn.line:hover { background: var(--cream); }

/* 머리 */
.top { position: fixed; inset: 0 0 auto; z-index: var(--z-top); height: var(--top-h); padding: 0 var(--gutter); display: flex; align-items: center; border-bottom: 1px solid var(--glass); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.top .brand img { width: var(--logo-top); height: auto; }
.nav { margin-left: auto; display: flex; gap: var(--s-6); }
.nav a { font: var(--t-nav); letter-spacing: var(--track-en); text-transform: uppercase; color: var(--white); transition: color var(--dur) var(--ease); }
.nav a:hover, .top.solid .nav a:hover { color: var(--gold); }
.top.solid { background: var(--white); border-bottom-color: var(--line); }
.top.solid .nav a { color: var(--ink); }
.menu-btn { display: none; margin-left: auto; width: var(--control); height: var(--control); flex-direction: column; justify-content: center; align-items: flex-end; gap: var(--s-1); }
.menu-btn span { display: block; width: var(--s-5); height: 2px; border-radius: 2px; background: var(--gold); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer); max-width: 100%; z-index: var(--z-drawer); background: var(--forest); transform: translateX(100%); transition: transform var(--dur) var(--ease); padding: var(--top-h) 0 var(--s-5); overflow-y: auto; }
.drawer-close { position: absolute; top: var(--s-4); right: var(--s-4); padding: var(--s-2); font: var(--t-small); color: var(--on-forest); }
.drawer nav a { display: block; padding: var(--s-3) var(--s-6); font: var(--t-nav); letter-spacing: var(--track-en); text-transform: uppercase; color: var(--on-forest); }
.drawer nav a:hover { color: var(--gold); }
.dim { position: fixed; inset: 0; z-index: var(--z-dim); background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
body.drawer-open .drawer { transform: none; }
body.drawer-open .dim { opacity: 1; pointer-events: auto; }

/* 첫 화면 */
.hero { position: relative; height: 100vh; min-height: var(--hero-min); background: var(--photo); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--white); }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.hero-text { position: relative; z-index: 1; padding: 0 var(--gutter); text-align: center; text-shadow: var(--shadow-text); }
.hero-sub { font: var(--t-display-sub); margin-bottom: var(--s-3); }
.hero-main { font: var(--t-display); }
.hero-main b { font-weight: 700; }

/* 두 단 — 12칸 위의 5:7 */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--head); align-items: center; }

/* 소개 */
.intro-logo img { width: var(--logo-intro); height: auto; margin-bottom: var(--pad); }
.intro-text p { font: var(--t-lead); color: var(--ink-2); }
.intro-text p + p { margin-top: var(--s-3); }
.intro-text p.strong { margin-top: var(--s-5); font-weight: var(--w-strong); color: var(--ink); }
.intro-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--photo); }
.intro-img img { width: 100%; height: 100%; object-fit: cover; }

/* 카드 — 핵심가치·값표가 같은 꼴 */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: var(--w-mid); margin: 0 auto; }
.card { background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: var(--pad); min-width: 0; }
.card .ico { width: var(--icon-lg); height: var(--icon-lg); margin-bottom: var(--s-4); }
.card h3 { font: var(--t-card); color: var(--ink); }
.card h3 + p { margin-top: var(--s-2); color: var(--ink-3); }

/* 프로그램 — 4:4:4 */
.program { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.program .head { margin-bottom: 0; }
.pcard { position: relative; height: var(--media-h); border-radius: var(--r-lg); overflow: hidden; padding: var(--pad); display: flex; flex-direction: column; color: var(--white); background: var(--photo); }
.pcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-photo) var(--ease); }
.pcard:hover > img { transform: scale(var(--zoom)); }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-veil); }
.pcard > span, .pcard > b { position: relative; z-index: 2; }
.pcard .en { color: var(--on-forest); }
.pcard b { margin-top: var(--s-1); font: var(--t-card-lg); }
.pcard .more { margin-top: auto; color: var(--gold); }

/* 값표·멤버십 */
.note { margin-top: var(--head); text-align: center; font: var(--t-small); color: var(--ink-3); }

/* 줄 — 예약 순서·층별 안내 */
.rows { display: flex; flex-direction: column; gap: var(--s-3); }
.reservation .rows { max-width: var(--w-narrow); margin: 0 auto; }
.rows li { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); gap: var(--s-3); }
.tile { background: var(--sand); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font: var(--t-tile); color: var(--gold-ink); }
.row-box { background: var(--cream); border-radius: var(--r-sm); padding: var(--s-4) var(--pad); }
.row-box .en { display: block; color: var(--ink-3); }
.row-box b { display: block; font-weight: var(--w-strong); color: var(--ink); }

/* 층별 — 5:7 */
.floor-img img { width: 100%; height: auto; border-radius: var(--r-md); }

/* 상품권 — 6:6 */
.gift { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--head); align-items: center; }
.gift-img img { width: 100%; height: auto; border-radius: var(--r-md); }
.gift .head { margin-bottom: var(--pad); }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btns .btn { min-width: var(--btn-min); }

/* 연락처 — 4:8 */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--head); align-items: start; }
.info > div { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.info > div:last-child { border-bottom: 1px solid var(--line); }
.info dt { display: flex; align-items: center; gap: var(--s-2); font: var(--t-eyebrow); color: var(--gold-ink); }
.info dt svg { width: var(--icon); height: var(--icon); fill: var(--gold); }
.info dd { margin-top: var(--s-2); padding-left: calc(var(--icon) + var(--s-2)); font-weight: var(--w-strong); color: var(--ink-2); }
.info dd small { display: block; font: var(--t-small); color: var(--ink-3); }
.info dd + dd { margin-top: var(--s-3); }
.info .btn { margin-top: var(--s-3); width: 100%; justify-content: space-between; }
.map, .park-img { border-radius: var(--r-md); overflow: hidden; background: var(--sand); }
.map iframe { display: block; width: 100%; height: var(--media-h); border: 0; }
.park-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 갤러리·인스타그램 — 사진은 3:4 한 꼴 */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); margin-bottom: var(--head); }
.sec-head .head { margin-bottom: 0; }
.sec-head .more { margin-bottom: var(--s-2); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm); background: var(--sand); }
.grid a { display: block; border-radius: var(--r-sm); overflow: hidden; }
.grid a img { transition: transform var(--dur-photo) var(--ease); }
.grid a:hover img { transform: scale(var(--zoom)); }
.more-btn { margin-top: var(--head); text-align: center; }
.more-btn .btn { min-width: var(--btn-min); }

/* 꼬리말 — 로고 · 회사 · 링크 넷 */
.foot { background: var(--forest); color: var(--on-forest-2); font: var(--t-small); }
.foot-grid { max-width: var(--w-page); margin: 0 auto; padding: var(--s-9) var(--gutter) var(--s-8); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) repeat(4, minmax(0, 1.5fr)); gap: var(--head) var(--gap); }
.foot-logo { width: var(--logo-foot); height: auto; }
.foot h4 { margin-bottom: var(--s-3); font: var(--t-eyebrow); color: var(--gold); white-space: nowrap; }
.foot-co a { margin-top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); color: var(--gold); font-weight: var(--w-strong); }
.foot-co svg { width: var(--icon); height: var(--icon); }
.foot-col a { display: flex; align-items: center; gap: var(--s-2); color: var(--on-forest); white-space: nowrap; transition: color var(--dur) var(--ease); }
.foot-col a + a { margin-top: var(--s-3); }
.foot-col a img { width: var(--icon); height: var(--icon); object-fit: contain; }
.foot-col a:hover, .foot-co a:hover { color: var(--white); }
.foot-base { max-width: var(--w-page); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-6); border-top: 1px solid var(--hairline-dark); text-align: center; }
.foot-base span { display: inline-block; margin: 0 var(--s-2); }
.foot-base p + p { margin-top: var(--s-2); }

/* 떠 있는 단추 셋·아래 띠 — 단추는 띠 위로 한 칸(--float + --s-4)씩 쌓인다 */
.fbtn { --step: calc(var(--float) + var(--s-4)); position: fixed; right: var(--gutter); z-index: var(--z-float); width: var(--float); height: var(--float); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); color: var(--green); box-shadow: var(--shadow-float); transition: background-color var(--dur) var(--ease); }
.fbtn:hover { background: var(--cream); }
.fbtn svg, .bar svg { width: var(--icon-md); height: var(--icon-md); fill: currentColor; }
.fbtn.totop svg { width: var(--s-3); height: auto; }
.fbtn.totop { bottom: calc(var(--bar-h) + var(--s-4)); display: none; flex-direction: column; gap: var(--s-1); }
.fbtn.ig { bottom: calc(var(--bar-h) + var(--s-4) + var(--step)); }
.fbtn.tel { bottom: calc(var(--bar-h) + var(--s-4) + 2 * var(--step)); }
.fbtn.totop.on { display: flex; }
.fbtn.totop span { font: var(--t-tag); }
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float); height: var(--bar-h); display: flex; background: var(--forest); box-shadow: var(--shadow-bar); }
.bar a { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: var(--s-2); color: var(--white); font: var(--t-button); white-space: nowrap; transition: background-color var(--dur) var(--ease); }
.bar a + a { border-left: 1px solid var(--hairline-dark); }
.bar a:hover { background: var(--green); }

/* 중간 폭 */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .program { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--gap); }
  .program .head { grid-column: 1 / -1; margin-bottom: var(--head); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot-brand, .foot-co { grid-column: span 2; }
}
@media (max-width: 960px) {
  .split, .gift, .contact-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--head); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 폰 — 값은 위 :root 에서 바뀌고, 여기는 배치만 */
@media (max-width: 767px) {
  br.d, .grid .d { display: none; }
  br.m { display: inline; }

  .hero { height: var(--hero-min); padding-top: var(--top-h); }

  .intro { text-align: center; }
  .intro-logo img { margin-left: auto; margin-right: auto; }

  .cards { grid-template-columns: minmax(0, 1fr); }

  .program { display: block; }
  .pcard { margin-top: var(--gap); }

  .floor { display: flex; flex-direction: column; }
  .floor-body { display: contents; }
  .floor .head { order: 1; margin-bottom: 0; text-align: center; }
  .floor-img { order: 2; }
  .floor .rows { order: 3; }

  .btns .btn { flex: 1 1 100%; }

  .contact-grid .map { order: -1; }

  .sec-head { display: block; }
  .sec-head .more { margin: var(--s-3) 0 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-8) var(--gutter) var(--s-7); }
  .foot-base span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv.in { animation: none; }
}