/* ==========================================================================
   북전주 광신프로그레스 — 분양 홍보 홈페이지
   디자인 레퍼런스: elyse-residence-dev.webflow.io
   팔레트 / 타이포 스케일 / 레이아웃 골격을 참고하여 재구성
   ========================================================================== */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  /* 색상 */
  --ink:        #121717;
  --ink-800:    #1b2322;
  --ink-600:    #2b3534;
  --green:      #254441;
  --green-600:  #2f5450;
  --green-300:  #6d8a86;
  --sand:       #e7e1dc;
  --sand-light: #f5f2ef;
  --white:      #ffffff;
  --brand:      #f5c400;   /* 광신 시그니처 옐로우 */
  --brand-deep: #c99b00;

  --w-a90: rgba(255,255,255,.9);
  --w-a70: rgba(255,255,255,.7);
  /* 실제 불투명도는 .58 — 이름은 유지하되 --section--green 배경에서 WCAG AA(4.5:1)를
     충족하도록 상향 조정함(2026-09-22 접근성 점검). */
  --w-a50: rgba(255,255,255,.58);
  --w-a15: rgba(255,255,255,.15);
  --w-a08: rgba(255,255,255,.08);
  /* 실제 불투명도는 .64 — .lede 등 본문 크기 텍스트가 --sand 배경 위에서도
     WCAG AA(4.5:1)를 충족하도록 상향 조정함(2026-09-22 접근성 점검). */
  --i-a60: rgba(18,23,23,.64);
  --i-a40: rgba(18,23,23,.4);
  --i-a12: rgba(18,23,23,.12);
  --i-a06: rgba(18,23,23,.06);

  /* 폰트 */
  --ff-display: "Cormorant Garamond", "Nanum Myeongjo", "Apple SD Gothic Neo", serif;
  --ff-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* 타이포 스케일 (레퍼런스의 초대형 세리프 디스플레이를 한글에 맞게 조정) */
  --fs-hero:  clamp(2.9rem, 8.2vw, 7.5rem);
  --fs-h2:    clamp(2rem, 4.3vw, 4rem);
  --fs-h3:    clamp(1.5rem, 2.8vw, 2.5rem);
  --fs-h4:    clamp(1.15rem, 1.8vw, 1.5rem);
  --fs-b0:    clamp(1.25rem, 2.2vw, 2rem);
  --fs-b1:    clamp(1rem, 1.25vw, 1.1875rem);
  --fs-b2:    1rem;
  --fs-cap:   .8125rem;
  --fs-eyebrow: .75rem;

  --ls-tight: -.03em;
  --ls-wide:  .26em;

  /* 레이아웃 */
  --header-h: 6.75rem;
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1480px;
  --sec-y: clamp(72px, 9vw, 168px);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 900px) {
  :root { --header-h: 3.875rem; }
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-b2);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand-light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--brand); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -200%);
  z-index: 999; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 2px;
}
.skip-link:focus { transform: translate(-50%, 0); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- 3. 공통 레이아웃 ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1080px; }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 104px); }
.section--ink   { background: var(--ink);   color: var(--white); }
.section--green { background: var(--green); color: var(--white); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }

/* --- 섹션 구분 플로리시: 상단 룰 + 대형 인덱스 번호 --- */
.sect { position: relative; }
.sect__no {
  position: absolute; top: clamp(20px, 3vw, 44px); right: var(--gutter);
  font-family: var(--ff-display); font-weight: 300; line-height: 1;
  font-size: clamp(3.5rem, 9vw, 8.5rem); letter-spacing: -.04em;
  color: currentColor; opacity: .06; pointer-events: none; user-select: none;
  font-variant-numeric: lining-nums tabular-nums;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transform: translateY(12px);
}
.section--ink .sect__no, .section--green .sect__no { opacity: .09; }
html.anim-ready .sect__no { opacity: 0; }
.sect.sect-in .sect__no { opacity: .06; transform: none; }
.section--ink.sect-in .sect__no, .section--green.sect-in .sect__no { opacity: .1; }
@media (max-width: 720px) { .sect__no { font-size: clamp(2.6rem, 16vw, 4.2rem); top: 14px; } }

/* 섹션 상단을 가로지르는 얇은 룰이 왼→오 로 그어짐 */
.sect::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px;
  background: var(--i-a12); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.section--ink.sect::before, .section--green.sect::before { background: var(--w-a15); }
.shero + .sect::before, .sect:first-of-type::before { display: none; }
.sect.sect-in::before { transform: scaleX(1); }
html:not(.anim-ready) .sect::before,
html.anim-fallback .sect::before,
html.anim-static .sect::before { transform: scaleX(1); }

/* 섹션 진입 시 콘텐츠가 살짝 떠오름 — 투명도는 절대 건드리지 않음(가독성 안전).
   .sect-in 이 안 붙어도 20px 어긋난 채 보일 뿐이고, 붙으면 부드럽게 정착. */
html.gsap-on .sect > .wrap { transform: translateY(20px); transition: transform 1s var(--ease); }
html.gsap-on .sect.sect-in > .wrap,
html.gsap-on .shero + .sect > .wrap { transform: none; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--i-a40);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.section--ink .eyebrow, .section--green .eyebrow { color: var(--w-a50); }
.eyebrow--brand { color: var(--brand-deep); }
.section--ink .eyebrow--brand, .section--green .eyebrow--brand { color: var(--brand); }

.display {
  font-family: var(--ff-display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: var(--ls-tight);
}

/* Cormorant Garamond 는 기본이 올드스타일 숫자(3·5가 아래로 내려감)라
   수치를 보여주는 곳에서는 라이닝 숫자로 고정합니다. */
.stat__num, .tl__date, .unit__name,
.prem__no, .loclist__dist, .display {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
h2.display { font-size: var(--fs-h2); }
h3.display { font-size: var(--fs-h3); line-height: 1.25; }
.display em { font-style: normal; color: var(--brand-deep); }
.section--ink .display em, .section--green .display em { color: var(--brand); }

.lede { font-size: var(--fs-b1); line-height: 1.8; color: var(--i-a60); max-width: 62ch; }
.section--ink .lede, .section--green .lede { color: var(--w-a70); }

.sec-head { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 28px); }
.sec-head--split {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(24px, 4vw, 72px); align-items: end;
}
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; align-items: start; } }

.hr { height: 1px; background: var(--i-a12); border: 0; margin: 0; }
.section--ink .hr, .section--green .hr { background: var(--w-a15); }

/* ---------- 4. 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; transition: all .35s var(--ease);
  text-align: center;
}
.btn--brand { background: var(--brand); color: var(--ink); }
.btn--brand:hover { background: var(--ink); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--brand); color: var(--ink); }
.btn--ghost { border-color: var(--i-a12); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.section--ink .btn--ghost, .section--green .btn--ghost { border-color: var(--w-a15); color: #fff; }
.section--ink .btn--ghost:hover, .section--green .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--lg { padding: 20px 40px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- 5. 이미지 슬롯 (교체용 플레이스홀더) ----------
   images/ 폴더에 지정된 파일명으로 이미지를 넣으면 자동으로 표시됩니다.
   파일이 없으면 파일명이 적힌 빈 칸이 보입니다.                             */
.media {
  position: relative; overflow: hidden; background: var(--sand);
  border-radius: var(--radius);
}
.media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease), opacity .6s ease;
}
.media--zoom:hover img { transform: scale(1.045); }
.media--1x1   { aspect-ratio: 1 / 1; }
.media--4x3   { aspect-ratio: 4 / 3; }
.media--3x2   { aspect-ratio: 3 / 2; }
.media--16x9  { aspect-ratio: 16 / 9; }
.media--3x4   { aspect-ratio: 3 / 4; }
.media--4x5   { aspect-ratio: 4 / 5; }
.media--contain { background: var(--white); }
.media--contain img { object-fit: contain; }

.media.is-empty img { opacity: 0; }
.media.is-empty {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.5), transparent 60%),
    var(--sand);
  outline: 1px dashed var(--i-a12); outline-offset: -6px;
}
.media.is-empty::after {
  content: "사진 자리 · " attr(data-slot) "\A" attr(data-hint);
  position: absolute; inset: 0; white-space: pre-wrap; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px;
  font-family: var(--ff-body); font-size: .8125rem; line-height: 1.75;
  letter-spacing: .01em; color: var(--i-a40);
}
.media.is-empty::before {
  content: "PHOTO";
  position: absolute; z-index: 1;
  left: 50%; top: calc(50% - 3.4em); transform: translateX(-50%);
  font-size: .625rem; font-weight: 700; letter-spacing: .28em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--brand); color: var(--ink);
}
.section--ink .media.is-empty, .section--green .media.is-empty {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    rgba(255,255,255,.05);
  outline-color: var(--w-a15);
}
.section--ink .media.is-empty::after, .section--green .media.is-empty::after { color: var(--w-a50); }

/* ---------- 6. 헤더 ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  color: var(--white);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(18,23,23,.55), transparent);
  transition: opacity .4s var(--ease);
}
.header.is-solid { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--i-a12); }
.header.is-solid::before { opacity: 0; }
.header__inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand__mark {
  font-family: var(--ff-display); font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 400; letter-spacing: .02em; line-height: 1;
}
.brand__sub {
  font-size: .625rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: .6; font-weight: 500;
}
.nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 38px); }
.nav a { font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; position: relative; padding-block: 4px; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header__tel { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.header .btn { padding: 12px 24px; font-size: .875rem; }

.burger {
  display: none; width: 44px; height: 44px; margin-right: -10px; flex: none;
  align-items: center; justify-content: center;
}
.burger span { position: relative; width: 22px; height: 1.5px; background: currentColor; transition: .3s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: currentColor;
  transition: .3s var(--ease);
}
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav, .header__tel { display: none; }
  .burger { display: flex; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
  /* 브랜드가 넓어서 햄버거 버튼을 밀어내지 않도록 */
  .brand__sub { display: none; }
  .brand__mark { font-size: 1.0625rem; }
}

/* 모바일 메뉴 */
.mobilemenu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink); color: #fff;
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: 28px;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.mobilemenu.is-open { opacity: 1; visibility: visible; transform: none; }
.mobilemenu a.mm__link {
  font-family: var(--ff-display); font-size: 1.85rem; font-weight: 300; letter-spacing: -.02em;
  padding-block: 10px; border-bottom: 1px solid var(--w-a08); display: block;
}
.mobilemenu__foot { margin-top: auto; display: grid; gap: 12px; }
.mobilemenu__foot .btn { width: 100%; }

/* ==========================================================================
   7. 히어로 — 스크롤 스크럽 (짧은 핀 → 자동 해제)
   .shero__track 높이만큼 스크롤하는 동안 .shero__pin 이 sticky 로 고정되고,
   그 진행도(0~1)로 배경 줌·크로스페이드·제목/태그라인/지표를 스크럽한다.
   position:fixed 로 body 를 붙잡지 않으므로 스크롤은 언제나 자유롭다.
   ========================================================================== */
:root { --shero-len: 280svh; }
@media (max-width: 820px) { :root { --shero-len: 190svh; } }

.shero { position: relative; background: var(--ink); color: #fff; }
.shero__track { height: var(--shero-len); }
.shero__pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  isolation: isolate;
}

.shero__layer { position: absolute; inset: 0; margin: 0; z-index: 0; }
.shero__layer img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transform-origin: 50% 55%; will-change: transform;
}
.shero__layer--b { opacity: 0; }
.shero__layer.is-empty { background: var(--ink); outline: none; }
.shero__layer.is-empty img { opacity: 0; }
.shero__layer.is-empty::after { color: var(--w-a50); z-index: 1; }

.shero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(5,7,13,.44) 0%, rgba(5,7,13,.05) 34%, rgba(5,7,13,.30) 62%, rgba(5,7,13,.80) 100%),
    linear-gradient(100deg, rgba(5,7,13,.42) 0%, transparent 56%);
  pointer-events: none;
}

.shero__stage {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 3vw, 32px);
  padding-top: var(--header-h);
}
.shero__badge {
  align-self: flex-start; padding: 9px 18px; border-radius: 999px;
  background: var(--brand); color: var(--ink);
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
  will-change: opacity, transform;
}
.shero__title {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(2.9rem, 8.6vw, 8rem); line-height: 1.02;
  letter-spacing: var(--ls-tight); max-width: 16ch;
  will-change: transform, filter, opacity;
}
.shero__title strong { font-weight: 400; }

/* .wrap 이 max-width/여백/가운데정렬을 담당 → left/right 은 0 으로 두고
   세로 위치만 top+transform 으로 잡는다 (제목과 좌측 정렬 일치) */
.shero__tag {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); z-index: 3;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.45rem, 3.6vw, 3rem); line-height: 1.28;
  letter-spacing: -.02em;
  opacity: 0; will-change: transform, filter, opacity;
}
.shero__tag strong, .shero__tag em { font-style: normal; color: var(--brand); }

.shero__resolve {
  position: absolute; left: 0; right: 0; bottom: clamp(30px, 6vh, 60px); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 4vw, 52px);
  opacity: 0; will-change: transform, opacity;
}
.shero__facts { display: flex; gap: clamp(16px, 3vw, 40px); }
.shero__facts li { display: flex; flex-direction: column; }
.shero__facts b {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.shero__facts span { margin-top: 4px; font-size: .78rem; color: var(--w-a70); letter-spacing: -.01em; }
@media (max-width: 820px) {
  .shero__resolve { bottom: 76px; gap: 16px; }
  .shero__facts { flex-wrap: wrap; gap: 14px 26px; }
}

.shero__hint {
  position: absolute; left: 50%; bottom: clamp(18px, 5vh, 40px); z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--w-a70); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: opacity .4s var(--ease);
}
.shero__hint i {
  width: 1px; height: 30px; background: currentColor; position: relative; overflow: hidden;
}
.shero__hint i::after { content:""; position:absolute; inset:0; background:#fff; animation: cue 2.2s var(--ease) infinite; }
@media (max-width: 820px) { .shero__hint { display: none; } }

.shero__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 2px; background: rgba(255,255,255,.14);
}
.shero__bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.5), var(--brand));
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

/* --- 정적 모드: 동작 줄이기 / JS·GSAP 없음 → 스크럽 없이 최종 상태로 --- */
.shero--static .shero__track { height: 100svh; }
.shero--static .shero__pin { position: static; }
.shero--static .shero__layer--a img { transform: scale(1.06); }
.shero--static .shero__layer--b { opacity: 1; }
.shero--static .shero__tag { display: none; }
.shero--static .shero__resolve { opacity: 1; transform: none; }
.shero--static .shero__hint { display: none; }
.shero--static .shero__bar i { transform: scaleX(1); }

/* 시네마틱 오프닝: 기존 단지 사진과 서체를 유지한 중앙 타이포그래피 */
.shero__stage { align-items: center; text-align: center; padding-bottom: 12svh; }
.shero__badge { align-self: center; }
.shero__title { max-width: none; font-size: clamp(2.8rem, 7.4vw, 7.5rem); line-height: 1.18; letter-spacing: -.065em; text-shadow: 0 4px 40px rgba(0,0,0,.28); }
.shero__title strong { color: #fff; }
.shero__tag { text-align: center; line-height: 1.55; text-shadow: 0 3px 28px rgba(0,0,0,.45); }
.shero__resolve { justify-content: center; bottom: 110px; }
.shero__facts { text-align: center; gap: clamp(24px, 5vw, 72px); }
.shero__scrim { background: linear-gradient(180deg, rgba(10,18,19,.42), rgba(10,18,19,.12) 45%, rgba(10,18,19,.72)), linear-gradient(90deg, rgba(10,18,19,.15), transparent); }
.shero__skip { position: absolute; z-index: 6; right: clamp(20px, 4vw, 64px); bottom: 32px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #fff; background: rgba(16,24,25,.4); font-size: .8125rem; transition: background .25s, transform .25s; }
.shero__skip span { margin-left: 16px; }
.shero__controls { position: absolute; z-index: 6; left: clamp(20px, 4vw, 64px); bottom: 32px; display: flex; gap: 10px; align-items: center; }
.shero__controls .shero__skip { position: static; white-space: nowrap; }
.shero__motion { font-size: .75rem; }
.shero__skip:hover { background: var(--ink); transform: translateY(-3px); }
.shero__skip:focus-visible, .shero__hint:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
/* 대형 블러 배경을 계속 돌리지 않고 사진의 움직임에 집중 */
.shero .shero__pin::before, .shero .shero__pin::after { display: none; }
@media (max-width: 820px) {
  .shero__stage { padding-bottom: 16svh; }
  .shero__title { font-size: clamp(2.55rem, 10vw, 4.5rem); }
  .shero__badge { font-size: .65rem; }
  .shero__tag { font-size: clamp(1.2rem, 4.8vw, 2rem); }
  .shero__resolve { bottom: 152px; }
  .shero__facts { gap: 18px; flex-wrap: nowrap; }
  .shero__facts b { font-size: 1.7rem; }
  .shero__facts span { font-size: .66rem; }
  .shero__skip { bottom: 82px; right: 20px; }
  .shero__controls { bottom: 82px; left: 20px; }
  .shero__controls .shero__skip { padding: 10px 12px; }
}
@media (max-height: 550px) and (min-width: 821px) {
  .shero__title { font-size: 3rem; }
  .shero__resolve { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .shero__skip { transition: none; }
}

/* ---------- 8. 스탯 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--i-a12); }
.section--ink .stats, .section--green .stats { background: var(--w-a15); }
.stat { background: inherit; padding: clamp(24px,3vw,44px) clamp(18px,2.4vw,34px); }
.section--sand .stat { background: var(--sand); }
.section--white .stat { background: var(--white); }
.section--ink .stat { background: var(--ink); }
.section--green .stat { background: var(--green); }
.stat__num {
  font-family: var(--ff-display); font-weight: 300; line-height: 1;
  font-size: clamp(2.4rem, 4.6vw, 4.25rem); letter-spacing: -.04em;
}
.stat__num small { font-family: var(--ff-body); font-size: clamp(.9rem,1.2vw,1.1rem); font-weight: 500; letter-spacing: 0; margin-left: 4px; opacity: .8; }
.stat__cap { margin-top: 12px; font-size: .875rem; color: var(--i-a60); letter-spacing: -.01em; }
.section--ink .stat__cap, .section--green .stat__cap { color: var(--w-a70); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 9. 사업개요 표 ---------- */
.spec { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,72px); align-items: start; }
.spec > * { min-width: 0; }
@media (max-width: 900px) { .spec { grid-template-columns: 1fr; } }
.dtable { width: 100%; }
.dtable tr { border-bottom: 1px solid var(--i-a12); }
.section--ink .dtable tr, .section--green .dtable tr { border-color: var(--w-a15); }
.dtable tr:first-child { border-top: 1px solid var(--i-a12); }
.section--ink .dtable tr:first-child, .section--green .dtable tr:first-child { border-color: var(--w-a15); }
.dtable th {
  text-align: left; padding: 15px 12px 15px 0; width: 34%; font-weight: 500;
  font-size: .875rem; letter-spacing: .01em; color: var(--i-a60); vertical-align: top;
}
.section--ink .dtable th, .section--green .dtable th { color: var(--w-a50); }
.dtable td { padding: 15px 0; font-size: .9375rem; letter-spacing: -.01em; vertical-align: top; }
.dtable td b { font-weight: 600; }

/* 분양면적표 */
.gtable { width: 100%; font-size: .875rem; }
.gtable caption { text-align: left; font-size: .8125rem; color: var(--i-a40); padding-bottom: 12px; }
.gtable th, .gtable td { padding: 13px 10px; text-align: center; border-bottom: 1px solid var(--i-a12); }
.gtable thead th { background: var(--ink); color: #fff; font-weight: 500; font-size: .8125rem; letter-spacing: .01em; border-bottom: 0; }
.gtable tbody th { font-weight: 600; text-align: left; }
.gtable tfoot td, .gtable tfoot th { background: var(--i-a06); font-weight: 700; }
.table-scroll {
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.table-hint { display: none; }
@media (max-width: 640px) {
  .table-hint {
    display: flex; align-items: center; justify-content: space-between;
    margin: -10px 0 10px; padding: 8px 10px;
    border: 1px solid var(--i-a12); color: var(--i-a60);
    font-size: .72rem; line-height: 1.4;
  }
  .table-hint span { color: var(--brand-deep); font-size: 1rem; }
  .gtable { width: 660px; min-width: 660px; table-layout: fixed; font-size: .75rem; }
  .gtable th, .gtable td { padding: 11px 7px; white-space: nowrap; }
  .gtable th:first-child { width: 72px; }
  .gtable th:nth-child(2) { width: 58px; }
}

/* ---------- 10. 주택형 카드 ---------- */
.units { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(20px,3vw,44px); }
@media (max-width: 860px) { .units { grid-template-columns: 1fr; } }
.unit { display: flex; flex-direction: column; gap: 20px; }
.unit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.unit__name { font-family: var(--ff-display); font-size: clamp(2rem,3.4vw,3rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.unit__tag { font-size: .8125rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; }
.unit__tag--alt { background: var(--green); }
.unit__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--i-a12); border-block: 1px solid var(--i-a12); }
.unit__meta div { background: var(--sand-light); padding: 14px 12px; }
.section--white .unit__meta div { background: var(--white); }
.unit__meta dt { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--i-a40); }
.unit__meta dd { margin-top: 4px; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.unit__feat { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: .8125rem; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--i-a12); color: var(--i-a60); letter-spacing: -.01em;
}
.section--ink .chip, .section--green .chip { border-color: var(--w-a15); color: var(--w-a70); }
.chip--fill { background: var(--brand); border-color: var(--brand); color: var(--ink); font-weight: 600; }

/* ---------- 11. 프리미엄 6 ---------- */
.prem { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--w-a15); }
.prem__item { background: var(--green); padding: clamp(26px,3vw,44px); display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.prem__no { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 300; color: var(--brand); line-height: 1; }
.prem__title { font-family: var(--ff-display); font-size: clamp(1.4rem,2.1vw,1.9rem); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; }
.prem__desc { font-size: .9375rem; line-height: 1.75; color: var(--w-a70); letter-spacing: -.01em; }
.prem__punch { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--w-a15); font-size: .875rem; font-weight: 600; color: var(--brand); letter-spacing: -.01em; }
@media (max-width: 980px) { .prem { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .prem { grid-template-columns: 1fr; } .prem__item { min-height: 0; } }

/* ---------- 12. 입지 ---------- */
.loc { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(24px,3.5vw,60px); align-items: start; }
@media (max-width: 980px) { .loc { grid-template-columns: 1fr; } }
.loclist { display: grid; gap: 1px; background: var(--i-a12); border-block: 1px solid var(--i-a12); }
.loclist__row { background: var(--white); padding: 18px 4px; display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: baseline; }
.section--sand .loclist__row { background: var(--sand); }
.loclist__cat { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-a40); }
.loclist__body { font-size: .9375rem; letter-spacing: -.015em; line-height: 1.6; }
.loclist__dist { font-family: var(--ff-display); font-size: 1.05rem; color: var(--brand-deep); white-space: nowrap; }

/* 어두운 섹션용 반전 — 없으면 흰 배경에 흰 글씨가 되어 본문이 사라집니다 */
.section--ink .loclist,
.section--green .loclist { background: var(--w-a15); border-color: var(--w-a15); }
.section--ink .loclist__row   { background: var(--ink); }
.section--green .loclist__row { background: var(--green); }
.section--ink .loclist__cat,
.section--green .loclist__cat { color: var(--w-a50); }
.section--ink .loclist__dist,
.section--green .loclist__dist { color: var(--brand); }
@media (max-width: 560px) { .loclist__row { grid-template-columns: 1fr auto; } .loclist__cat { grid-column: 1 / -1; } }

.mapbox { position: relative; aspect-ratio: 1 / 1; background: var(--sand); border: 1px solid var(--i-a12); }
.mapbox .media { width: 100%; height: 100%; border-radius: 0; }
.mapbox > * { width: 100%; height: 100%; }
.mapbox__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  font-size: .875rem; color: var(--i-a40); line-height: 1.8;
}
.mapbox__ph code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; background: var(--i-a06); padding: 2px 6px; }

/* ---------- 13. 갤러리 (룩북형) ----------
   칸은 js/main.js 가 js/photos.js(PHOTOS.gallery) 목록만큼 생성합니다.
   size: "wide" → .gcell--wide (가로 2배) / "tall" → .gcell--tall (세로 2배) */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 19vw, 260px);
  gap: clamp(8px, 1.1vw, 16px);
}
.gallery > * { grid-column: span 4; grid-row: span 1; }
.gallery > .g--wide,   .gallery > .gcell--wide { grid-column: span 8; }
.gallery > .g--full { grid-column: span 12; }
.gallery > .gcell--tall { grid-row: span 2; }

.gcell { position: relative; }
.gcell img { width: 100%; height: 100%; object-fit: cover; }
.gcell__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 26px 18px 14px;
  width: 100%;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: linear-gradient(to top, rgba(12,15,15,.62), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gcell:hover .gcell__cap,
.gcell:focus-within .gcell__cap { opacity: 1; transform: none; }
.gcell.is-empty .gcell__cap { display: none; }

@media (max-width: 860px) {
  .gallery { grid-auto-rows: clamp(128px, 30vw, 210px); }
  .gallery > * { grid-column: span 6; }
  .gallery > .g--wide, .gallery > .gcell--wide, .gallery > .g--full { grid-column: span 12; }
  .gcell__cap { opacity: 1; transform: none; }
}

figcaption { margin-top: 10px; font-size: .8125rem; color: var(--i-a40); letter-spacing: -.01em; }
.section--ink figcaption, .section--green figcaption { color: var(--w-a50); }

/* ---------- 13-B. 대형 사진 띠 (.photoband) ----------
   섹션 사이에서 사진이 시야를 가득 채우는 구간. 배경은 스크롤 패럴랙스. */
.photoband {
  position: relative; overflow: hidden;
  min-height: clamp(360px, 56vh, 640px);
  display: flex; align-items: flex-end;
  color: #fff; background: var(--ink);
}
.photoband--tall { min-height: clamp(420px, 68vh, 760px); }
.photoband__bg { position: absolute; inset: -8% 0; border-radius: 0; background: var(--ink); }
.photoband__bg img { width: 100%; height: 100%; object-fit: cover; }
.photoband__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,13,13,.82) 0%, rgba(10,13,13,.15) 46%, rgba(10,13,13,.35) 100%),
    linear-gradient(105deg, rgba(10,13,13,.5) 0%, transparent 52%);
}
.photoband__cap {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(32px, 5vw, 68px);
  display: flex; flex-direction: column; gap: 16px;
}
.photoband__cap .eyebrow { color: var(--brand); }
.photoband__txt {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.16; letter-spacing: var(--ls-tight);
  max-width: 20ch;
}
.photoband__txt em { font-style: normal; color: var(--brand); }
.photoband__note { font-size: .72rem; color: var(--w-a50); letter-spacing: -.01em; }
/* 사진이 아직 없을 때: 안내판만 단정하게 */
.photoband__bg.is-empty { inset: 0; }
.photoband__bg.is-empty::after { color: var(--w-a50); }
.photoband__bg.is-empty ~ .photoband__scrim { background: rgba(255,255,255,.02); }

/* ---------- 14. 탭 (평면도) ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab {
  padding: 12px 26px; border-radius: 999px; border: 1px solid var(--i-a12);
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; transition: .3s var(--ease);
}
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab:hover:not([aria-selected="true"]) { border-color: var(--ink); }
.tabpanel[hidden] { display: none; }
.plan { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(24px,3.5vw,60px); align-items: start; }
@media (max-width: 900px) { .plan { grid-template-columns: 1fr; } }

/* ---------- 15. 타임라인 ---------- */
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1px; background: var(--i-a12); border-block: 1px solid var(--i-a12); }
.tl { background: var(--white); padding: clamp(20px,2.4vw,32px) clamp(14px,1.6vw,22px); display: flex; flex-direction: column; gap: 10px; }
.section--sand .tl { background: var(--sand); }
.tl__step { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--i-a40); }
.tl__date { font-family: var(--ff-display); font-size: clamp(1.35rem,2.1vw,1.9rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.15; }
.tl__name { font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
.tl.is-now { background: var(--ink); color: #fff; }
.tl.is-now .tl__step { color: var(--brand); }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .timeline { grid-template-columns: 1fr; } }

/* ---------- 16. 신뢰 배지 ---------- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2.4vw,32px); }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; } }
.trust__card { border: 1px solid var(--w-a15); padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; gap: 12px; }
.trust__icon { font-size: 1.75rem; line-height: 1; }
.trust__title { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 400; letter-spacing: -.02em; }
.trust__desc { font-size: .9375rem; line-height: 1.75; color: var(--w-a70); letter-spacing: -.01em; }

/* ---------- 17. 아코디언 FAQ ---------- */
.acc { border-top: 1px solid var(--i-a12); }
.acc__item { border-bottom: 1px solid var(--i-a12); }
.acc__btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(20px,2.4vw,30px) 0; text-align: left;
  font-family: var(--ff-display); font-size: clamp(1.15rem,1.9vw,1.65rem); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.4;
}
.acc__q { flex: 1; min-width: 0; }
.acc__ico { flex: none; width: 22px; height: 22px; position: relative; margin-top: .35em; }
.acc__ico::before, .acc__ico::after { content:""; position:absolute; background: currentColor; transition: transform .4s var(--ease); }
.acc__ico::before { left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); }
.acc__ico::after  { top: 0; left: 50%; height: 100%; width: 1px; transform: translateX(-50%); }
.acc__item.is-open .acc__ico::after { transform: translateX(-50%) scaleY(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-bottom: clamp(20px,2.4vw,30px); max-width: 78ch; color: var(--i-a60); font-size: .9375rem; line-height: 1.85; letter-spacing: -.01em; }

/* ---------- 18. 폼 ---------- */
.formwrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(28px,4vw,80px); align-items: start; }
@media (max-width: 900px) { .formwrap { grid-template-columns: 1fr; } }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field__label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--w-a70); }
.field__label .req { color: var(--brand); margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px; background: transparent;
  border: 1px solid var(--w-a15); border-radius: var(--radius); color: #fff;
  font-size: .9375rem; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.32); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: var(--w-a08); outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--ink); color: #fff; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: .8125rem; line-height: 1.7; color: var(--w-a70); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.formnote { font-size: .75rem; line-height: 1.8; color: var(--w-a50); }
.formmsg { font-size: .875rem; padding: 14px 16px; border: 1px solid var(--brand); color: var(--brand); border-radius: var(--radius); }

/* 방문예약 접수 — 구글폼 임베드 (2026-09-22) */
.gform { display: grid; gap: 16px; scroll-margin-top: calc(var(--header-h) + 16px); }
.gform__frame {
  width: 100%; min-height: 1060px; display: block;
  background: #fff; border: 1px solid var(--w-a15); border-radius: var(--radius);
}
@media (max-width: 640px) { .gform__frame { min-height: 1320px; } }

.benefit { display: grid; gap: 14px; }
.benefit li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.7; color: var(--w-a70); }
.benefit li::before { content: "—"; color: var(--brand); flex: none; }

/* ---------- 19. CTA 밴드 ---------- */
.ctaband { position: relative; min-height: clamp(420px, 62vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.ctaband__bg { position: absolute; inset: 0; }
.ctaband__bg img { width: 100%; height: 100%; object-fit: cover; }
.ctaband__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,23,23,.9) 0%, rgba(18,23,23,.25) 65%, rgba(18,23,23,.5) 100%); }
.ctaband__inner { position: relative; z-index: 2; padding-block: clamp(40px,6vw,90px); display: grid; gap: clamp(18px,2.4vw,32px); }
.ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 20. 푸터 ---------- */
.footer { background: var(--ink); color: var(--w-a70); padding-block: clamp(48px,6vw,88px) 32px; font-size: .875rem; }
.footer__top { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(2, minmax(0,1fr)); gap: clamp(24px,4vw,60px); padding-bottom: clamp(32px,4vw,56px); }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } }
.footer h3 { font-size: .75rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--w-a50); margin-bottom: 16px; font-weight: 500; }
.footer__brand { font-family: var(--ff-display); font-size: clamp(1.6rem,2.6vw,2.2rem); font-weight: 300; color: #fff; letter-spacing: -.02em; line-height: 1.25; }
.footer dl { display: grid; gap: 10px; }
.footer dl div { display: flex; gap: 10px; }
.footer dt { color: var(--w-a50); min-width: 68px; flex: none; }
.footer dd { margin: 0; color: var(--w-a90); }
.footer a:hover { color: #fff; }
.legal { border-top: 1px solid var(--w-a15); padding-top: 28px; display: grid; gap: 14px; }
.legal__list { display: grid; gap: 7px; font-size: .75rem; line-height: 1.8; color: var(--w-a50); }
.legal__list li { position: relative; padding-left: 12px; }
.legal__list li::before { content: "·"; position: absolute; left: 2px; }
.legal__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .75rem; color: var(--w-a50); padding-top: 8px; }
.legal__bar nav { display: flex; gap: 18px; }
.legal__bar a { color: var(--w-a70); }
.legal mark { background: rgba(245,196,0,.16); color: var(--brand); padding: 1px 6px; border-radius: 2px; }

/* ---------- 21. 상시 버튼(방문예약·전화) / 하단 고정 CTA ---------- */
.float {
  position: fixed; right: 20px; bottom: 28px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.float a {
  height: 52px; border-radius: 999px; display: flex; align-items: center; gap: 10px;
  padding: 0 20px 0 16px;
  background: var(--ink); color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.24);
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.float a svg { flex: none; }
.float a:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.float a.is-visit { background: var(--brand); color: var(--ink); }
.float a.is-visit:hover { background: var(--brand-deep); }
.float a.is-call:hover { background: #000; }
.float a.is-top {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  background: var(--white); color: var(--ink); border: 1px solid var(--i-a12);
  font-size: 1.1rem; font-weight: 400; align-self: flex-end;
}
@media (max-width: 900px) {
  /* 모바일은 하단 고정 CTA 바(방문예약·전화)가 있으므로 상시 버튼은 '맨 위로'만,
     그마저 스크롤을 내린 뒤에만 나타남 */
  .float { right: 14px; bottom: 72px; }
  .float a.is-visit, .float a.is-call { display: none; }
  .float a.is-top {
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .float.is-visible a.is-top { opacity: 1; pointer-events: auto; transform: none; }
}

.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--i-a12);
  box-shadow: 0 -2px 20px rgba(0,0,0,.1);
}
.stickycta a { padding: 16px 8px; text-align: center; font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.stickycta a:first-child { background: var(--ink); color: #fff; }
.stickycta a:last-child { background: var(--brand); color: var(--ink); }
@media (max-width: 900px) { .stickycta { display: grid; } body { padding-bottom: 0; } }

/* ==========================================================================
   22. 애니메이션
   참고 사이트(GSAP + ScrollTrigger + SplitText)의 동작을 재현합니다.
   · 텍스트: 마스크 안에서 글자/줄이 아래에서 밀려 올라옴
   · 이미지: clip-path 로 아래에서 위로 닦이며 등장 + 미세 줌아웃
   · 숫자: 0 부터 카운트 업
   · 배경: 스크롤 연동 패럴랙스
   아래 초기 상태는 모두 html.anim-ready 에만 적용되므로
   JS가 꺼져 있거나 '동작 줄이기' 설정이면 전부 그냥 보입니다.
   ========================================================================== */

/* --- 텍스트 분해 조각 (GSAP SplitText 대체) ---
   글자/줄이 위아래로 잘려 보이면 padding-block 값을 키우세요. */
.ch, .wd { display: inline-block; overflow: hidden; vertical-align: bottom;
           padding-block: .18em; margin-block: -.18em; }
.ch__i, .wd__i { display: inline-block; will-change: transform; }
.sl  { display: block; overflow: hidden; padding-block: .16em; margin-block: -.16em; }
.sl__i { display: block; will-change: transform; }
/* 3D 플립용 조각은 마스크 없이 넘쳐야 함 */
.ch__i.is-plain, .wd__i.is-plain { display: inline-block; will-change: transform, opacity;
  backface-visibility: hidden; }
[data-anim].anim-3d { perspective: 900px; }
[data-anim].anim-3d .ch__i, [data-anim].anim-3d .wd__i { transform-style: preserve-3d; }

/* JS 대기 중 초기 은닉 상태 (html.anim-ready 에서만) */
html.anim-ready .ch__i,
html.anim-ready .wd__i,
html.anim-ready .sl__i { transform: translateY(120%); }
html.anim-ready .ch__i.is-plain,
html.anim-ready .wd__i.is-plain { transform: none; opacity: 0; }
html.anim-ready [data-anim="fade"],
html.anim-ready [data-anim="fade-up"],
html.anim-ready [data-anim="chars-3d"],
html.anim-ready [data-anim="words-3d"] { opacity: 0; }
html.anim-ready [data-anim="fade-up"] { transform: translateY(26px); }
html.anim-ready [data-anim="wipe"] { clip-path: inset(0% 0% 100% 0%); }
html.anim-ready [data-anim="stagger"] > *,
html.anim-ready [data-anim="stagger"] [data-anim-child] { opacity: 0; transform: translateY(24px); }

/* --- [data-reveal] 컨테이너 페이드 (기존 유지) --- */
[data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.anim-ready [data-reveal] { opacity: 0; transform: translateY(26px); }
html.gsap-on [data-reveal] { transition: none; }
[data-reveal].is-in { opacity: 1 !important; transform: none !important; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }
[data-reveal][data-delay="5"] { transition-delay: .40s; }

/* --- eyebrow 앞 선 긋기 --- */
.eyebrow::before { transform-origin: left; transition: transform 1s var(--ease) .1s; }
html.anim-ready .eyebrow::before { transform: scaleX(0); }
.eyebrow.is-in::before { transform: scaleX(1); }

/* --- 이미지 와이프 --- */
html.anim-ready .media[data-wipe] { clip-path: inset(0% 0% 100% 0%); }
.media[data-wipe] img { will-change: transform; }

.tabpanel { will-change: opacity, transform; }

/* --- 폴백: GSAP 없음 / JS 실패 → IntersectionObserver 로 가볍게 페이드 --- */
html.anim-fallback [data-reveal] { opacity: 1; transform: none; }
html.anim-fallback [data-anim="stagger"] > *,
html.anim-fallback [data-anim="stagger"] [data-anim-child] { opacity: 1; transform: none; }
html.anim-fallback .ch__i,
html.anim-fallback .wd__i,
html.anim-fallback .sl__i { transform: none; }
html.anim-fallback [data-anim] { transition: opacity .7s var(--ease), transform .7s var(--ease); clip-path: none; }
html.anim-fallback [data-anim]:not(.is-in) { opacity: 0; }
html.anim-fallback [data-anim]:not(.is-in)[data-anim="fade-up"] { transform: translateY(22px); }
html.anim-fallback [data-anim].is-in { opacity: 1; transform: none; }

/* --- 정적 표시: '동작 줄이기' 설정 → 애니메이션 없이 전부 즉시 노출 --- */
html.anim-static [data-anim],
html.anim-static [data-reveal],
html.anim-static [data-anim="stagger"] > *,
html.anim-static [data-anim="stagger"] [data-anim-child] {
  opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}
html.anim-static .ch__i, html.anim-static .wd__i, html.anim-static .sl__i { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-reveal],
  html.anim-ready [data-anim],
  html.anim-ready [data-anim="stagger"] > *,
  html.anim-ready [data-anim="stagger"] [data-anim-child],
  html.anim-ready .header { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  html.anim-ready .media[data-wipe] { clip-path: none !important; }
  html.anim-ready .ch__i, html.anim-ready .wd__i, html.anim-ready .sl__i { transform: none !important; }
}

/* ---------- 22-B. 모바일 보정 ----------
   (뒤에 와야 앞의 기본값을 덮어씁니다 — 순서 주의) */
@media (max-width: 900px) {
  /* 하단 고정 CTA 바에 푸터가 가리지 않도록 */
  .footer { padding-bottom: 86px; }

  /* 모바일에서는 전화 버튼이 하단 바와 중복되므로 숨기고,
     플로팅 버튼은 스크롤을 내린 뒤에만 나타나게 (히어로와 겹침 방지) */
  .float { bottom: 84px; right: 14px; opacity: 0; pointer-events: none;
           transition: opacity .35s var(--ease), transform .35s var(--ease);
           transform: translateY(10px); }
  .float.is-visible { opacity: 1; pointer-events: auto; transform: none; }
  .float a[href^="tel"] { display: none; }
}

/* ---------- 23. 편집용 표시 ----------
   .todo = 아직 확정되지 않아 채워 넣어야 하는 값.
   내용을 모두 채운 뒤에는 아래 규칙 한 줄만 지우면 표시가 사라집니다. */
.todo {
  background: rgba(245,196,0,.22);
  box-shadow: inset 0 -2px 0 var(--brand-deep);
  padding: 0 4px; border-radius: 2px;
}

/* ---------- 24. 인쇄 ---------- */
@media print {
  .header, .float, .stickycta, .mobilemenu { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 24px; }
}

/* ==========================================================================
   25. 인터랙션 강화 (v6) — 히어로 오로라 · 호버 · 라이트박스 · 스크롤바 · 리빌
   모든 모션은 맨 아래 prefers-reduced-motion 블록에서 일괄 해제됩니다.
   ========================================================================== */

/* --- 25-1. 히어로: 은은하게 움직이는 그라데이션(오로라) --- */
.shero__pin::before,
.shero__pin::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: -30%;
  background:
    radial-gradient(38% 44% at 22% 30%, rgba(245,196,0,.22), transparent 70%),
    radial-gradient(34% 40% at 78% 24%, rgba(90,150,255,.20), transparent 70%),
    radial-gradient(46% 50% at 60% 82%, rgba(255,120,90,.16), transparent 72%);
  mix-blend-mode: screen; filter: blur(30px); opacity: .55;
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
.shero__pin::after {
  animation-duration: 30s; animation-direction: alternate-reverse;
  opacity: .4; filter: blur(46px);
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg)   scale(1);   }
  50%  { transform: translate3d( 3%,  2%, 0) rotate(8deg)   scale(1.12);}
  100% { transform: translate3d( 5%, -4%, 0) rotate(-6deg)  scale(1.05);}
}

/* --- 25-2. 버튼: 올리면 살짝 떠오르고 커지며 광택이 지나감 --- */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none;
}
.btn:hover { transform: translateY(-2px) scale(1.025); box-shadow: 0 14px 30px -12px rgba(18,23,23,.4); }
.btn:active { transform: translateY(0) scale(.99); }
.btn:hover::after { transform: translateX(120%); }
.btn--brand:hover { box-shadow: 0 16px 34px -12px rgba(245,196,0,.6); }

/* --- 25-3. 카드·행: 올리면 떠오름 --- */
.prem__item, .trust__card, .unit, .acc__item, .tl {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background-color .4s var(--ease), border-color .4s var(--ease);
  will-change: transform;
}
.prem__item:hover, .trust__card:hover, .unit:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -22px rgba(18,23,23,.45);
}
.section--ink .prem__item:hover, .section--ink .trust__card:hover,
.section--green .prem__item:hover, .section--green .trust__card:hover {
  background: rgba(255,255,255,.05); border-color: var(--brand);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,.55);
}
.loclist__row { transition: background-color .3s var(--ease), padding-left .3s var(--ease); }
.loclist__row:hover { background: rgba(245,196,0,.08); padding-left: 8px; }
.dtable tbody tr { transition: background-color .25s var(--ease); }
.dtable tbody tr:hover { background: rgba(245,196,0,.08); }

/* --- 25-4. 내비게이션: 밑줄이 좌→우로 그어짐 --- */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }

/* --- 25-5. 갤러리: 확대 커서 + 강한 호버 --- */
#galleryGrid .gcell:not(.is-empty) { cursor: zoom-in; }
#galleryGrid .gcell img { transition: transform 1s var(--ease), filter .5s var(--ease); }
#galleryGrid .gcell:not(.is-empty):hover img { transform: scale(1.07); filter: saturate(1.08) brightness(1.03); }

/* --- 25-6. 상단 스크롤 진행 바 --- */
.scrollbar {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 200;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
  transition: transform .1s linear; pointer-events: none;
}

/* --- 25-7. 라이트박스 (갤러리 클릭 시 확대) --- */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,12,.92); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .32s var(--ease);
}
.lb.is-open { opacity: 1; }
.lb__stage {
  position: relative; max-width: min(92vw, 1400px); max-height: 86vh;
  transform: scale(.94); transition: transform .32s var(--ease);
}
.lb.is-open .lb__stage { transform: scale(1); }
.lb__img {
  display: block; max-width: 100%; max-height: 86vh;
  object-fit: contain; border-radius: 3px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7);
  background: #0c0f0f;
}
.lb__cap {
  position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
  color: rgba(255,255,255,.7); font-size: .8125rem; letter-spacing: .02em;
}
.lb__btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.4rem; line-height: 1;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.lb__btn:hover { background: var(--brand); color: var(--ink); transform: scale(1.08); }
.lb__prev { left: -8px; top: 50%; margin-top: -24px; }
.lb__next { right: -8px; top: 50%; margin-top: -24px; }
.lb__close { top: -8px; right: -8px; width: 42px; height: 42px; font-size: 1.1rem; }
@media (max-width: 700px) {
  .lb__prev { left: 4px; } .lb__next { right: 4px; }
  .lb__close { top: 6px; right: 6px; }
  .lb__cap { bottom: -30px; }
}

/* --- 25-8. 리빌 강화: 더 크게 떠오르고 초점이 잡히듯 또렷해짐 --- */
html.anim-ready [data-reveal] { transform: translateY(24px); }
[data-reveal].is-in { filter: none !important; transform: none !important; }
html.anim-ready [data-anim="fade-up"] { transform: translateY(40px); }

/* 섹션 대형 인덱스 번호에 살짝 패럴랙스(자바스크립트가 --py 를 갱신) */
.sect__no { transition: transform .1s linear; }

/* --- 25-9. 동작 줄이기: 위 인터랙션 모션 일괄 해제 --- */
@media (prefers-reduced-motion: reduce) {
  .shero__pin::before, .shero__pin::after { animation: none; opacity: .3; }
  .btn:hover, .btn:active,
  .prem__item:hover, .trust__card:hover, .unit:hover { transform: none; }
  .btn::after { display: none; }
  .scrollbar { display: none; }
  .lb, .lb__stage { transition: none; }
  #galleryGrid .gcell:not(.is-empty):hover img { transform: none; }
  html.anim-ready [data-reveal],
  html.gsap-on [data-reveal],
  html.anim-ready [data-anim="fade-up"] { filter: none; transform: none; }
}