@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   POOL VILLA AUREL CHEONGPYEONG — V3
   레퍼런스 구조: 오티에르 포레 (fixed video + mask 개방형 히어로,
   좌우 교차 섹션, 러닝 텍스트, 스와이퍼 갤러리, 2패널 모션)
   서체 체계 동일: Arita Buri(디스플레이) + SUIT(본문)
   컨셉 컬러만 브랜드에 맞춰 프러시안 블루 → 블랙 + 골드

   ── 폰트 굵기 규칙 ──────────────────────────────────────────────
   10~12px 의 작은 글자는 Light 금지, 반드시 400 이상.
   (작은데 얇기까지 하면 가독성이 무너진다 — 캡션·고지·라벨이 여기 해당)
   50px 이상 대형 디스플레이 텍스트는 Light(300) 사용 가능.
   ══════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');

@font-face{font-family:'Arita Buri';src:url('https://cdn.jsdelivr.net/gh/webfontbox/Arita@main/src/Arita-buri-L.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'Arita Buri';src:url('https://cdn.jsdelivr.net/gh/webfontbox/Arita@main/src/Arita-buri-M.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Arita Buri';src:url('https://cdn.jsdelivr.net/gh/webfontbox/Arita@main/src/Arita-buri-SB.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Arita Buri';src:url('https://cdn.jsdelivr.net/gh/webfontbox/Arita@main/src/Arita-buri-B.woff') format('woff');font-weight:700;font-display:swap}

:root{
  --concept:#090909;          /* 레퍼런스의 프러시안블루 자리 */
  --concept-2:#090909;
  --surface-deep:#000000;     /* 바닥(#090909)보다 한 단 가라앉는 면. 패널 구분용 */
  --gold:#CDA767;
  --gold-d:#8A6A2F;
  --gold-l:#CDA767;
  --gold-em:#A97D33;          /* 헤드라인 강조어 (피그마 지정 딥골드) */
  --beige:#DED1B7;
  --ink:#111111;
  --ink-2:#3A3A3A;
  --ink-3:#767676;
  --line:#E5E5E5;
  --line-d:rgba(255,255,255,.16);
  --white:#FFFFFF;
  --bg:#FFFFFF;

  --buri:'Arita Buri','Noto Serif KR',serif;
  --suit:'SUIT Variable','SUIT','Noto Sans KR',-apple-system,sans-serif;

  --gut:clamp(20px,5vw,120px);

  /* 데스크탑 그리드 : 프레임 1400 / 12컬럼 / 컬럼 80 / 거터 40
     검산 → 80*12 + 40*11 = 960 + 440 = 1400 (외곽 여백은 --gut 이 담당) */
  --grid:1400px;
  --fs-min:12px;             /* 타이포 하한. 이 값보다 작은 글자는 두지 않는다 */
  --grid-cols:12;
  --grid-col:80px;
  --grid-gutter:40px;

  --sec:clamp(90px,12vw,200px);
  --hdr:88px;
  --e:cubic-bezier(.19,1,.22,1);
  --e2:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--suit);font-weight:400;font-size:16px;line-height:1.85;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.lock{overflow:hidden}
img,video,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.blind,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mo_only{display:none}
/* box-sizing:border-box 이므로 max-width 에 좌우 --gut 을 더해야
   실제 콘텐츠 폭이 정확히 --grid(1400px) 가 된다 */
.inner{max-width:calc(var(--grid) + var(--gut) * 2);width: 100%;margin-inline:auto;padding-inline:var(--gut)}
/* ══ AOS (경량 구현) ══ */
/* 이동은 얕게, 시간은 길게 — 문구가 숨 쉬듯 떠오른다 */
[data-aos]{opacity:0;transition:opacity 2s var(--e),transform 2s var(--e);will-change:opacity,transform}
[data-aos="fade-up"]{transform:translateY(20px)}
[data-aos="fade-down"]{transform:translateY(-20px)}
[data-aos="fade-left"]{transform:translateX(28px)}
[data-aos="fade-right"]{transform:translateX(-28px)}[data-aos="fade-in"]{transform:none}[data-aos].aos-in{opacity:1;transform:none}
/* 세로 라인 전용 : 통째로 내려오는 fade-down 과 달리 위에서 아래로 그어진다.
   높이 1px 짜리 선은 페이드보다 draw 가 훨씬 또렷하다. */
[data-aos="line-down"]{opacity:1;transform:scaleY(0);transform-origin:50% 0}
/* 작은 사각형에서 화면 폭까지 펼쳐진다. 이미지를 키우는 대신 보이는 창을 넓혀
   글자·오버레이가 함께 확대되며 흐려지는 것을 막는다.
   will-change 는 실제로 애니메이션하는 속성으로 둬야 clip-path 래스터가 어긋나지 않는다. */
[data-aos="grow"]{
  clip-path:inset(12% 14%);
  transition:opacity 1.4s var(--e),clip-path 1.9s var(--e);
  will-change:clip-path,opacity;
}
[data-aos="grow"].aos-in{clip-path:inset(0 0 0 0)}

/* ══ HEADER ══ */
#header{
  position:fixed;inset:0 0 auto;z-index:120;height:var(--hdr);
  display:flex;align-items:center;transition:background .6s var(--e),height .6s var(--e);
}
#header.solid{background:rgba(0,0,0,.94);height:70px;backdrop-filter:blur(12px)}
.hd-in{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px}
/* 헤더 로고 : 가로형 락업 이미지 (심볼+워드마크+태그라인 일체형) */
.logoArea{display:flex;align-items:center}
.logoArea img{height:42px;width:auto;display:block}
.hd-r{display:flex;align-items:center;gap:clamp(12px,2vw,30px)}
.hd-tel{font-family:var(--buri);font-weight:600;font-size:19px;letter-spacing:.06em;color:var(--gold-l)}
.hd-cta{font-size:12.5px;letter-spacing:.14em;color:var(--gold-l);border:1px solid rgba(205,167,103,.5);padding:11px 20px;transition:.35s}
.hd-cta:hover{background:var(--gold-l);color:#000}
.menu-icon{width:46px;height:46px;position:relative;flex:none}
.menu-icon span{position:absolute;left:11px;height:1px;background:#fff;transition:.45s var(--e)}
.menu-icon__line-left{top:18px;width:14px}
.menu-icon__line-center{top:24px;width:24px}
.menu-icon__line-right{top:30px;width:14px;left:auto;right:11px}
.menu-icon[aria-expanded="true"] .menu-icon__line-left{opacity:0}
.menu-icon[aria-expanded="true"] .menu-icon__line-right{opacity:0}
.menu-icon[aria-expanded="true"] .menu-icon__line-center{transform:rotate(45deg)}
.menu-icon[aria-expanded="true"]::after{content:'';position:absolute;left:11px;top:24px;width:24px;height:1px;background:#fff;transform:rotate(-45deg)}

/* ══ NAV ══ */
.nav{
  position:fixed;inset:0;z-index:110;background:var(--concept);
  clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--e);
  display:flex;flex-direction:column;justify-content:center;overflow-y:auto;
  padding-block:calc(var(--hdr) + 40px) 40px;
}
.nav.on{clip-path:inset(0 0 0 0)}
.nav__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.nav__g{opacity:0;transform:translateY(26px);transition:opacity .7s var(--e),transform .7s var(--e)}
.nav.on .nav__g{opacity:1;transform:none}
.nav.on .nav__g:nth-child(1){transition-delay:.28s}
.nav.on .nav__g:nth-child(2){transition-delay:.36s}
.nav.on .nav__g:nth-child(3){transition-delay:.44s}
.nav.on .nav__g:nth-child(4){transition-delay:.52s}
.nav.on .nav__g:nth-child(5){transition-delay:.60s}
.nav.on .nav__g:nth-child(6){transition-delay:.68s}
.nav__num{display:block;font-family:var(--suit);font-weight:400;font-size:var(--fs-min);letter-spacing:.3em;color:var(--gold);margin-bottom:16px}
.nav__top{
  display:block;font-family:var(--buri);font-weight:600;font-size:clamp(26px,3vw,44px);
  letter-spacing:.05em;color:#fff;line-height:1.1;padding-bottom:18px;
  border-bottom:1px solid var(--line-d);transition:color .35s var(--e);
}
.nav__top:hover{color:var(--gold-l)}
.nav__sub{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.nav__sub a{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;font-size:14.5px;
  color:rgba(255,255,255,.62);transition:color .35s var(--e),padding-left .35s var(--e);
}
.nav__sub a::before{content:'';width:0;height:1px;background:var(--gold);transition:width .35s var(--e)}
.nav__sub a:hover{color:#fff;padding-left:4px}
.nav__sub a:hover::before{width:16px}
.nav__sub a[aria-current]{color:var(--gold-l)}
.nav__foot{
  margin-top:clamp(36px,5vw,72px);padding-top:26px;border-top:1px solid var(--line-d);
  display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:rgba(255,255,255,.5);
}
.nav__foot a{font-family:var(--buri);font-weight:600;font-size:26px;letter-spacing:.08em;color:var(--gold-l)}

/* ══════════════════════════════════════════════════════════════
   MAIN (index) — 피그마 node 79:3131 "Main" 구현
   1920 기준 좌표를 1400 그리드에 매핑. 인터랙션은 레퍼런스와 동일하게
   고정 히어로 + 마스크 개방 + 스크롤 리빌(AOS) + 이미지 스케일 인.
   ══════════════════════════════════════════════════════════════ */

/* 히어로 → 첫 이미지 사이 블랙 여백.
   .contentsWrap 이 고정 히어로 위를 덮으며 올라오고, 이미지 상단 .fade-t 가
   그 검정에서 서서히 떠오르게 만든다. 1920 기준 600px. */
body.main .contentsWrap{padding-top:clamp(210px,32.4vw,622px)}

/* 헤드라인 : 기본 Light(300), 강조어만 SemiBold + 딥골드.
   60~80px 대형이라 Light 를 써도 획이 죽지 않는다 (10~12px 금지 규칙과 별개) */
.mtit{font-family:var(--buri);font-weight:300;color:#fff;letter-spacing:-.02em;line-height:1.2}
.mtit span{font-weight:600;color:var(--gold-em)}
.mtit--alt span{color:var(--gold)}    /* 강조어가 라이트 골드 #c9aa74 — 최고를 경험하는 시간 */
.mtit--xl{font-size:clamp(30px,4.17vw,80px)}
.mtit--lg{font-size:clamp(26px,3.1vw,60px)}
/* Light 는 50px 이상에서만. 화면이 좁아져 그 아래로 떨어지면 Regular 로 되돌린다
   (--xl 은 1200px, --lg 는 1620px 부터 50px 미만이 된다) */
@media (max-width:1200px){ .mtit--xl{font-weight:400} }
@media (max-width:1620px){ .mtit--lg{font-weight:400} }
.mtit--bold{font-weight:600}          /* 전체 SemiBold — 청평호 최적의 입지 (위 규칙보다 항상 우선) */
.mtit--bold em{font-style:normal;font-weight:300}   /* "최적의 입지" 만 Light */
@media (max-width:1200px){ .mtit--bold em{font-weight:400} }   /* 80px→50px 경계 */
/* 본문 : 다크 배경에서 400 이 굵게 번져 보여 Light 로 내린다.
   단 폭이 좁아져 글자가 작아지는 구간에서는 Regular 로 되돌린다 (작은데 얇으면 안 됨) */
.mtxt{margin-top:clamp(12px,1.04vw,20px);font-weight:300;font-size:clamp(15px,1.04vw,20px);line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}
@media (max-width:1440px){ .mtxt{font-weight:400} }   /* clamp 가 15px 로 바닥나는 지점 */

/* 풀블리드 비주얼 : 위/아래 페이드로 페이지 배경과 이어붙는다 */
.vfull{position:relative;width:100%;overflow:hidden;background:var(--bg)}
.vfull > img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vfull .veil{position:absolute;inset:0;background:rgba(0,0,0,.4);pointer-events:none}
.vfull .fade{position:absolute;left:0;width:100%;height:clamp(90px,17vw,323px);pointer-events:none;z-index:1}
.vfull .fade-t{top:0;background:linear-gradient(to bottom,var(--bg),rgba(9,9,9,0))}
.vfull .fade--full{height:100%}   /* 피그마 : 딤드가 이미지 전체를 덮는다 */
/* 풀블리드 위에 얹는 카피 (피그마 : 이미지 상단에서 19% 지점) */
.vfull-wrap{position:relative}
.vfull-over{position:absolute;left:0;top:17.6%;width:100%;z-index:2}
/* 이미지 하단에 54px 만 걸치고 아래로 흐르는 카피 (피그마 : 청평호 최적의 입지) */
.vfull-under{position:relative;z-index:2;margin-top:calc(-1 * clamp(20px,2.81vw,54px))}
.vfull-over .sub{margin-top:clamp(12px,.94vw,18px);font-family:var(--buri);font-weight:300;font-size:clamp(16px,1.25vw,24px);line-height:1.8;color:#fff;word-break:keep-all}
@media (max-width:1280px){ .vfull-over .sub{font-weight:400} }   /* 20px 아래로 내려가면 Regular */
/* 고지문 — 축소 시에도 12px 밑으로 내려가지 않게 하한을 잡는다 */
/* CG 고지도 다른 고지 문구와 같은 속성으로 (12 / 400 / .6). 두 줄 문단이라 행간만 1.8 유지 */
.vfull-over .note{max-width:54.3%;margin-top:clamp(18px,2.1vw,40px);font-weight:400;font-size:12px;line-height:1.8;color:rgba(255,255,255,.6);word-break:keep-all}

/* 이미지 캡션 (※ 이미지컷) */
.cap{position:absolute;bottom:clamp(10px,1.9vw,37px);z-index:2;font-weight:400;font-size:12px;line-height:1.5;color:rgba(255,255,255,.6)}
.cap-l{left:var(--gut)}
.cap-r{right:var(--gut);text-align:right}
/* 교차 오프셋 이미지 : 화면 한쪽 끝까지 흘려보낸다 (피그마 1300/1920 = 67.7%) */
.vrow{position:relative;margin-top:clamp(110px,17.71vw,340px)}
.vrow--c{margin-top:clamp(118px,18.75vw,360px)}
/* 캡션은 사진 안이 아니라 이미지 밖 아래. 각 이미지의 안쪽 모서리에 정렬한다 (피그마) */
.vcap{margin-top:clamp(9px,1.15vw,22px);font-weight:400;font-size:12px;line-height:1.5;color:rgba(255,255,255,.6)}
.vrow--r .vcap{width:67.7%;margin-left:auto}
.vrow--l .vcap{width:67.7%;text-align:right}
.vrow--c .vcap{width:72.9%;margin-inline:auto;text-align:center}
.vrow__img{position:relative;overflow:hidden;background:var(--bg);width:67.7%}
.vrow--r .vrow__img{margin-left:auto}
.vrow--c .vrow__img{width:72.9%;margin-inline:auto}
.vrow__img img{display:block;width:100%;height:auto;aspect-ratio:1300/732;object-fit:cover;transform:scale(1.07);transition:transform 1.8s var(--e)}
.vrow__img.aos-in img{transform:none}
/* 사진이 놓인 쪽에서 밀려 들어온다. 우측 사진은 오른쪽→왼쪽, 좌측 사진은 왼쪽→오른쪽,
   가운데 사진은 아래→위. 기본 46/60px 은 큰 사진에서 방향이 안 읽혀 폭을 키웠다. */
.vrow__img[data-aos="fade-left"]{transform:translateX(clamp(40px,6.25vw,120px))}
.vrow__img[data-aos="fade-right"]{transform:translateX(calc(-1 * clamp(40px,6.25vw,120px)))}
.vrow__img[data-aos="fade-up"]{transform:translateY(clamp(40px,4.69vw,90px))}
.vrow__img[data-aos].aos-in{transform:none}

/* 이미지에 딸린 카피 : 그리드 안에서 좌 / 우 / 중앙 (캡션 아래 약 120px) */
.vtxt{margin-top:clamp(50px,6.51vw,125px)}
.vtxt--r{margin-left:auto;text-align:right}
.vtxt--c{margin-inline:auto;text-align:center}
.vtxt--l,.vtxt--r{max-width:min(100%,720px)}
.vtxt--c{max-width:min(100%,640px)}

/* 라이프스타일 : 큰 타이틀 + 세로로 쌓이는 이미지 */
.vlife{text-align:center}
/* 피그마 구간 : CG↓242→센터블록 / 센터블록↓256→AUREL / 30→스택 / 스택간 60 / 62→LIFE STYLE */
.vlife .centerBlock{padding-block:clamp(118px,16.67vw,320px) 0}
.vlife .centerBlock .txt2{font-weight:300}                                    /* 본문과 같은 Light */
@media (max-width:1440px){ .vlife .centerBlock .txt2{font-weight:400} }
.vlife__stack{margin-top:clamp(90px,13.33vw,256px)}.vlife__tit{font-family:var(--buri);font-weight:600;font-size:clamp(30px,4.7vw,90px);letter-spacing:.02em;color:#fff}
/* ── 두 카드가 겹치며 올라오는 스택 (레퍼런스 .motionWrap 구조) ──
   ul 을 세로로 쌓고 li 를 각각 sticky 로 물린다. 뒤 카드(c2)가 불투명 배경을
   가지고 있어 앞 카드(c1)를 덮으며 올라온다. JS 없이 sticky 만으로 동작한다. */
.vlife__stack{position:relative;padding-bottom:clamp(40px,5.2vw,100px)}
.vlife__stack ul{display:block;width:min(100%,clamp(280px,35.4vw,680px));margin-inline:auto}
.vlife__stack li{
  position:sticky;top:15vh;display:block;width:100%;
  height:clamp(420px,44vw,846px);            /* 라벨 밴드 + 이미지 */
  background:var(--bg);                       /* 불투명 — 앞 카드를 가린다 */
}
.vlife__stack .c2{top:calc(15vh + clamp(24px,2.6vw,50px))}   /* 살짝 아래에 물려 겹침이 보이게 */
.vlife__stack .text-wrap{
  position:absolute;left:0;width:100%;height:clamp(60px,6.25vw,120px);z-index:2;
  display:flex;align-items:center;justify-content:center;background:var(--bg);
}
.vlife__stack .c1 .text-wrap{top:0}
.vlife__stack .c2 .text-wrap{bottom:0}
.vlife__stack .bg{position:absolute;left:0;width:100%;overflow:hidden;background:var(--bg)}
.vlife__stack .c1 .bg{top:clamp(60px,6.25vw,120px);bottom:0}
.vlife__stack .c2 .bg{top:0;bottom:clamp(60px,6.25vw,120px)}
.vlife__stack img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.8s var(--e)}
.vlife__stack .bg.aos-in img{transform:none}

@media (max-width:900px){
  .vrow__img,.vrow--c .vrow__img{width:86%}
  .vtxt--l,.vtxt--r,.vtxt--c{max-width:none;margin-inline:0;text-align:left}
  .vfull > img{aspect-ratio:4/3}
  /* 좁은 화면에선 캡션을 사진 위에 얹지 않는다 : 절대배치를 풀어 흐름 안으로 내린다.
     하단 패딩에 앉히면 줄 수를 예측해야 하고, 아래 걸침 카피의 음수 마진과 겹친다.
     relative + z-index 로 두어야 .fade 그라데이션(z-index:1)에 글자가 묻히지 않는다. */
  .vfull{padding-bottom:0}
  .vfull > .cap,.bs-wide > .cap{
    position:relative;z-index:2;inset:auto;transform:none;max-width:none;white-space:normal;
    margin:clamp(10px,2.6vw,14px) var(--gut) 0;text-align:left;word-break:keep-all;
  }
  /* 데스크탑의 '이미지에 걸치는' 카피는 모바일에선 캡션 아래로 떨어뜨린다 */
  .vfull-under{margin-top:clamp(28px,7vw,56px)}
  /* 여기에 있던 .cap{max-width:calc(100% - var(--gut)*2)} 는 삭제.
     풀블리드 캡션은 위에서 흐름으로 내렸으므로 불필요해졌고,
     남아 있으면 .swiper-slide .cap(딤드)까지 40px 좁혀 썸네일보다 작아진다. */
  .cap{line-height:1.45}
 .vrow--r .vcap,.vrow--l .vcap,.vrow--c .vcap{width:86%;margin-inline:auto;text-align:left}  .cap-r{right:auto;left:var(--gut);text-align:left}
  /* 좁은 화면에선 이미지 위에 얹지 않고 아래로 흘린다 */
  .vfull-over{position:static;padding-block:clamp(28px,7vw,60px)}
  .vlife__stack ul{width:min(100%,520px)}
  .vlife__stack li{height:clamp(360px,86vw,560px);top:12vh}
  .vlife__stack .c2{top:calc(12vh + 20px)}
  .vlife__stack .text-wrap{height:clamp(52px,13vw,80px)}
  .vlife__stack .c1 .bg{top:clamp(52px,13vw,80px)}
  .vlife__stack .c2 .bg{bottom:clamp(52px,13vw,80px)}
}

/* ══════════════════════════════════════════════════════════════
   BRAND STORY (about-brand) — 피그마 node 57:605
   인터랙션은 레퍼런스 overview 를 따른다 :
   ① 타이틀 sticky → 이미지가 위로 올라와 겹친다
   ② 콜라주 : 이미지끼리 / 이미지와 카피가 음수 마진으로 물린다
   ③ 2겹 패럴럭스 (JS: [data-plx])
   ══════════════════════════════════════════════════════════════ */

/* ── ① 서브 타이틀 (전 서브페이지 공통) : sticky 타이틀 위로 이미지 밴드가 덮으며 올라온다 ── */
/* 헤더는 이 페이지에서 항상 .solid = 70px. 그 아래 100px 여백 (피그마 70 → 170) */
.subtop{position:relative;padding-top:calc(70px + clamp(44px,5.2vw,100px))}
.subtop__tit{position:relative;z-index:3;text-align:center}   /* 밴드(z2) 위 — 골드 라인이 이미지에 가리지 않는다 */
.subtop__tit .en{
  display:block;font-family:var(--buri);font-weight:400;font-size:clamp(34px,4.17vw,80px);
  letter-spacing:.02em;color:var(--gold-l);line-height:1.2;
}
.subtop__tit .ko{
  display:block;margin-top:clamp(8px,1.04vw,20px);font-weight:600;
  font-size:clamp(16px,1.56vw,30px);letter-spacing:-.01em;color:#fff;
}
.subtop__line{width:1px;height:clamp(48px,5.7vw,110px);background:var(--gold-l);margin:clamp(24px,3.125vw,60px) auto 0}
/* 밴드 = 이미지 + 그 위에 얹히는 브레드크럼. 라인 하단이 이미지로 35px 파고든다 */
.subtop__band{position:relative;z-index:2;margin-top:calc(-1 * clamp(14px,1.82vw,35px))}
.subtop__crumb{
  position:absolute;right:max(var(--gut), (100% - var(--grid)) / 2);bottom:calc(100% + clamp(12px,1.56vw,30px));z-index:3;
  display:flex;align-items:center;gap:13px;font-size:12px;font-weight:500;letter-spacing:.12em;color:#fff;
}
.subtop__crumb i{width:14px;height:1px;background:rgba(255,255,255,.8);flex:none}
.subtop__crumb b{font-weight:500;color:var(--gold-l)}
/* 스르륵 나타나며 양옆으로 펼쳐진다 (레퍼런스 environment).
   width 를 늘리면 사진이 함께 늘어나므로, 사진은 고정하고 clip-path 로 보이는 창만 연다. */
.subtop__img{
  position:relative;width:100%;overflow:hidden;background:var(--bg);aspect-ratio:1920/470;
  clip-path:inset(0 20% 0 20%);
  transition:opacity 1.2s var(--e),clip-path 1.7s var(--e);
  /* [data-aos] 의 will-change:opacity,transform 이 합성 레이어를 만들어 clip-path 래스터가 어긋난다.
     실제로 애니메이션하는 속성으로 교체한다 */
  will-change:clip-path,opacity;
}
.subtop__img.aos-in{clip-path:inset(0 0 0 0)}
/* 안쪽 줌아웃도 clip-path 와 같이 출발해야 한다. 마크업의 data-aos-delay="350" 과 짝. */
.subtop__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2.1s var(--e) .35s}
.subtop__img.aos-in img{transform:none}
.subtop__img .veil{position:absolute;inset:0;background:rgba(0,0,0,.28)}
/* 밴드 하단 그라디언트 + 고지 문구. 마크업에 있는 페이지에서만 나온다 */
.subtop__img .dimd{position:absolute;left:0;bottom:0;width:100%;height:68.7%;pointer-events:none;
  background:linear-gradient(to top,rgba(9,9,9,.5),rgba(9,9,9,0))}
.subtop__cap{
  position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(12px,1.04vw,20px);z-index:3;
  font-weight:400;font-size:12px;line-height:1.4;
  color:rgba(255,255,255,.6);white-space:nowrap;text-align:center;
}
@media (max-width:760px){ .subtop__cap{white-space:normal;width:88%;word-break:keep-all} }

/* ── ② 브랜드 마크 : 크레스트 + 이미지로 채운 AUREL 워드마크 ── */
.section.bs-mark{text-align:center;padding-block:clamp(120px,19.79vw,380px) 0}   /* .section 의 --sec 을 이겨야 한다 */
.bs-mark__crest{width:clamp(76px,7.97vw,153px);height:auto;margin-inline:auto}
/* 골드 실크가 박힌 도형이라 합성 PNG→JPEG 로 추출 (배경이 항상 #090909 이라 알파 불필요) */
.bs-mark__word{display:block;width:clamp(200px,39.58vw,760px);height:auto;margin:clamp(20px,2.66vw,51px) auto 0}
.bs-mark__sub{
  margin-top:clamp(20px,2.66vw,51px);font-weight:500;font-size:clamp(12px,1.458vw,28px);
  letter-spacing:.5em;text-indent:.5em;color:rgba(255,255,255,.8);
}

/* ── ③ 콜라주 : 두 이미지와 카피가 서로 물린다 (그리드 1400 기준 %) ── */
.bs-col{position:relative;padding-top:clamp(130px,20.83vw,400px)}
.bs-col__a{width:57.4%;overflow:hidden;background:var(--bg)}
.bs-col__b{width:40.3%;margin-left:59.7%;margin-top:-27.5%;overflow:hidden;background:var(--bg)}
.bs-col__a img,.bs-col__b img{display:block;width:100%;height:auto;object-fit:cover}
.bs-col__a img{aspect-ratio:803/881}
.bs-col__b img{aspect-ratio:564/769}
.bs-col__t{position:relative;z-index:2;width:47.5%;margin-top:-11.1%}
.bs-col__t h3{font-family:var(--buri);font-weight:600;font-size:clamp(26px,3.125vw,60px);color:var(--gold-em);line-height:1.2}
.bs-col__t p{margin-top:clamp(14px,1.56vw,30px);font-weight:300;font-size:clamp(13.5px,1.04vw,20px);line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}

/* ── 풀블리드 + 하단 오버레이 카피 ── */
.bs-wide{position:relative;width:100%;overflow:hidden;background:var(--bg)}
.bs-wide > img{display:block;width:100%;height:auto;aspect-ratio:1920/1081;object-fit:cover}
.bs-wide .veil{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.bs-wide .dimd{position:absolute;left:0;top:0;width:100%;height:60%;background:linear-gradient(to bottom,var(--bg),rgba(9,9,9,0))}
/* 피그마 : 카피 블록이 이미지 하단 경계에 53px 만 걸친다 (나머지는 검정 위로 흐른다) */
.bs-wide-wrap{position:relative;margin-top:clamp(150px,26.93vw,517px)}
.bs-wide__over{position:relative;z-index:2;margin-top:calc(-1 * clamp(10px,2.76vw,53px))}
.bs-wide__over h3{font-family:var(--buri);font-weight:300;font-size:clamp(30px,4.17vw,80px);color:#fff;line-height:1.2}
.bs-wide__over h3 b{font-weight:600}
@media (max-width:1200px){ .bs-wide__over h3{font-weight:400} }   /* 50px 미만이 되면 Regular */
.bs-list{margin-top:clamp(16px,1.9vw,36px);display:flex;flex-direction:column;gap:clamp(10px,1.25vw,24px)}
.bs-list li{display:flex;align-items:center;gap:10px;font-weight:400;font-size:clamp(13px,1.04vw,20px);color:#fff;word-break:keep-all}
.bs-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-em);flex:none}
.bs-list em{font-style:normal;color:var(--gold-em)}

/* ── ③ 패럴럭스 : 두 레이어가 서로 다른 속도로 흐른다 ── */
.bs-plx{position:relative;width:100%;overflow:hidden;background:var(--bg);aspect-ratio:1920/741;margin-top:clamp(150px,23.96vw,460px)}
/* 피그마 : 프레임 1920x741 안에 이미지를 1920x1280(3:2 원본비)으로 깐다.
   1280/741 = 172.7% → 위아래로 각 36.35% 씩 여유가 생기고, 그만큼이 시차 이동 폭이다. */
.bs-plx__l{position:absolute;left:0;top:0;width:100%;height:100svh;will-change:transform}
.bs-plx__l img{width:100%;height:100%;object-fit:cover}
.bs-plx__l::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18)}   /* 밝은 수면 위 캡션 가독성 */

/* ── 중앙 카피 ── */
.section.bs-note{text-align:center;padding-block:clamp(60px,8.33vw,160px) 0}
.bs-note h3{font-family:var(--buri);font-weight:300;font-size:clamp(26px,3.125vw,60px);color:#fff;line-height:1.2}
@media (max-width:1620px){ .bs-note h3{font-weight:400} }
.bs-note h3 span{font-weight:600;color:var(--gold-em)}
.bs-note p{margin-top:clamp(20px,2.4vw,47px);font-weight:300;font-size:clamp(13.5px,1.04vw,20px);line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}


@media (max-width:900px){
 .subtop__band{margin-top:clamp(20px,4vw,40px)}
  .subtop__crumb{display:none}
  .subtop__img{aspect-ratio:16/10;clip-path:inset(0 10% 0 10%)}   /* 좁은 화면은 펼침 폭을 줄인다 */
  .bs-col__a,.bs-col__b,.bs-col__t{width:100%;margin-left:0}
  .bs-col__b{margin-top:clamp(14px,3vw,26px)}
  .bs-col__t{margin-top:clamp(28px,6vw,50px)}
  .bs-wide > img{aspect-ratio:4/5}
  .bs-wide__over{margin-top:clamp(28px,7vw,56px)}   /* .vfull-under 와 같은 이유 : 걸침 해제 */
  .bs-plx{aspect-ratio:4/3}
}

/* ══════════════════════════════════════════════════════════════
   SIGNATURE HOUSE (about-signature) — 피그마 node 57:683
   서브 타이틀은 공통 .subtop 사용. 이 페이지 고유 블록만 아래에 정의.
   ══════════════════════════════════════════════════════════════ */

/* 헤드라인이 고정된 채 아래 이미지가 올라와 겹친다 (레퍼런스 overview)
   .sig-stick 범위 안에서만 sticky 가 걸리므로 이미지가 다 지나가면 자연히 풀린다 */
.sig-stick{position:relative;padding-top:clamp(120px,23.96vw,460px)}
.sig-stick__tit{
  /* 2행 x 행간 1.2 = 제목 높이. 그 절반을 빼야 박스 상단이 아닌 '가운데'가 화면 중앙에 선다 */
  --tit-h:calc(2 * clamp(28px,4.17vw,80px) * 1.2);
  position:sticky;top:calc(50vh - var(--tit-h) / 2);z-index:3;
}
.sig-stick__tit h3{
  font-family:var(--buri);font-weight:300;font-size:clamp(28px,4.17vw,80px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;word-break:keep-all;
}
.sig-stick__tit h3 b{font-weight:600;color:var(--gold-em)}
.sig-plx{
  position:relative;z-index:1;width:100%;overflow:hidden;background:var(--bg);
  aspect-ratio:1920/600;margin-top:clamp(85px,11.35vw,218px);
}
/* 이미지는 화면에 고정하고 마스크(컨테이너)만 지나간다.
   레이어를 뷰포트 높이로 잡고 JS 가 -box.top 만큼 올려 붙박아 둔다. */
.sig-plx__l{position:absolute;left:0;top:0;width:100%;height:100svh;will-change:transform}
.sig-plx__l img{width:100%;height:100%;object-fit:cover}
.sig-plx__l::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sig-cap{margin-top:clamp(9px,1.04vw,20px);text-align:center}

/* 견본이 아니라 기준선 : 좌 제목 / 우 본문 + 표 */
.sig-def{
  display:grid;grid-template-columns:48.5% 51.5%;align-items:start;
  column-gap:0;padding-top:clamp(120px,19.01vw,365px);
}
.sig-def__tit{
  position:sticky;top:calc(70px + clamp(30px,4.17vw,80px));align-self:start;
  font-family:var(--buri);font-weight:300;font-size:clamp(26px,3.85vw,74px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;
}
.sig-def__tit span{font-weight:600;color:var(--gold-em)}
.sig-def__txt{font-weight:300;font-size:clamp(14.5px,1.25vw,24px);line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}
.sig-tbl{margin-top:clamp(38px,5.15vw,99px);border-top:1px solid #fff}
.sig-tbl li{
  display:flex;align-items:center;gap:clamp(20px,6.25vw,120px);
  padding:clamp(15px,1.98vw,38px) 0 clamp(15px,1.98vw,38px) clamp(14px,4.11vw,79px);
  border-bottom:1px solid rgba(255,255,255,.15);
  font-size:clamp(13px,1.04vw,20px);color:#fff;
}
.sig-tbl li:last-child{border-bottom:1px solid #fff}
.sig-tbl b{font-weight:700;flex:none;font-variant-numeric:tabular-nums}
.sig-tbl span{font-weight:500;word-break:keep-all}

/* GALLERY 머리글 (아래 기존 .slideWrap 갤러리로 이어진다) */
.section.sig-gal{padding-block:clamp(90px,20.83vw,400px) 0}   /* .section 의 --sec 을 이겨야 한다 */
.sig-gal__tit{
  font-family:var(--buri);font-weight:400;font-size:clamp(26px,3.125vw,60px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;
}
.sig-gal__tit span{color:var(--gold-em)}

@media (max-width:900px){
  .sig-stick{padding-top:clamp(60px,12vw,110px)}
  .sig-stick__tit{position:static}
  .sig-def__tit{position:static}
  .sig-plx{aspect-ratio:4/3;margin-top:clamp(40px,8vw,80px)}
  .sig-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .sig-tbl li{flex-direction:row;gap:16px;padding-left:0}
  .section.sig-gal{padding-block:clamp(70px,14vw,130px) 0}
}

/* ══ FIXED HERO (레퍼런스 fixed-image) ══ */
.fixed-image{position:relative;width:100%;height:100svh;text-align:center;overflow:hidden}
.fixed-image .vod{position:fixed;top:0;left:0;width:100%;height:100svh;overflow:hidden;z-index:-1}
.fixed-image .vod .s{position:absolute;inset:0;opacity:0;transition:opacity 2.2s var(--e2)}
.fixed-image .vod .s.on{opacity:1}
.fixed-image .vod img{width:100%;height:100%;object-fit:cover}
.fixed-image .vod::after{content:'';position:absolute;inset:0;background:#000;opacity:.6}  /* 피그마 rgba(0,0,0,.6) */
.mask_a{position:absolute;top:0;left:0;width:52%;height:100svh;background:var(--concept);z-index:4}
.mask_b{position:absolute;top:0;right:0;width:52%;height:100svh;background:var(--concept);z-index:4}
.mask_c{position:absolute;bottom:0;left:0;width:100%;height:120px;background:var(--concept);z-index:4}
/* 피그마 Con(38:1446) : 상단 y=266 = 헤더 70 + 196.
   뷰포트 높이와 무관하게 헤더에서 196px 고정으로 떨어뜨린다 (퍼센트로 잡으면 화면 높이마다 달라짐)
   로고 111x120 → gap 20 → 텍스트그룹(상하 패딩 10) → 40px Medium / 80px SemiBold, 행간 1.2 */
.slogan{
  position:absolute;top:calc(70px + clamp(90px,10.2vw,196px));left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;padding-inline:var(--gut);
}
.slogan .slogan-logo{
  width:clamp(62px,5.83vw,112px);height:auto;margin-bottom:clamp(14px,1.56vw,30px);
  opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity 2.2s var(--e),transform 2.6s var(--e);
}
.slogan .slogan-tit{
  font-family:var(--buri);font-weight:300;font-size:clamp(17px,2.08vw,40px);line-height:1.2;
  letter-spacing:-.01em;color:#fff;text-shadow:1px 1px 16px rgba(0,0,0,.2);
  opacity:0;transform:translateY(14px);transition:opacity 2.2s var(--e),transform 2.4s var(--e);
}
.slogan .slogan-txt{
  margin-top:clamp(5px,.52vw,10px);   /* 피그마 : 1행↔2행 gap 10 */
  font-family:var(--buri);font-weight:600;
  font-size:clamp(26px,4.17vw,80px);line-height:1.2;letter-spacing:-.02em;color:#fff;
  text-shadow:1px 1px 16px rgba(0,0,0,.2);
  opacity:0;transform:translateY(14px);transition:opacity 2.2s var(--e) .4s,transform 2.4s var(--e) .4s;
}
.slogan .slogan-txt span{font-weight:600;color:var(--gold-em)}
@media (max-width:1200px){ .slogan .slogan-tit{font-weight:400} }
.fixed-image.open .slogan-logo{opacity:1;transform:none}
.fixed-image.show .slogan-tit,.fixed-image.show .slogan-txt{opacity:1;transform:none}
.scroll-line{position:absolute;left:50%;bottom:38px;transform:translateX(-50%);z-index:5;width:1px;height:62px;background:rgba(255,255,255,.22);overflow:hidden}
.scroll-line::after{content:'';position:absolute;inset:0;background:var(--gold-l);animation:sl 2.4s var(--e2) infinite}
@keyframes sl{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes fillx{to{transform:scaleX(1)}}

/* 본문은 고정 비주얼 위를 덮으며 지나간다 */
.contentsWrap{position:relative;z-index:2;background:var(--bg)}

/* ══ SECTION 공통 ══ */
/* --surface = 그 섹션이 실제로 깔고 있는 면색. 하위 타일/카드가 이 값을 참조한다 */
.section{position:relative;padding-block:var(--sec);--surface:var(--bg)}.section.dark2{background:var(--concept-2);color:#fff;--surface:var(--concept-2)}
/* 페이지 전체 다크 : <body class="dark">
   --bg 토큰만 바꾸면 body / .contentsWrap 이 함께 뒤집히고,
   기존 `.dark .xxx` 컴포넌트 규칙이 그대로 활성화된다 */
/* --gold-d 는 '밝은 배경용 진한 골드'. 다크 페이지에선 밝은 골드로 치환한다.
   JS가 인라인으로 찍는 color:var(--gold-d) 까지 한 번에 잡힌다 */
body.dark{--bg:#090909;--gold-d:var(--gold-l);color:#fff}
.main-tit{
  font-family:var(--buri);font-weight:600;font-size:clamp(28px,3.6vw,58px);
  line-height:1.34;letter-spacing:-.03em;margin-bottom:clamp(24px,3vw,44px);
}
.main-tit span{font-weight:600;color:var(--gold-d)}
.dark .main-tit span,.dark2 .main-tit span{color:var(--gold-l)}
.main-txt{font-size:clamp(15px,1.05vw,17px);line-height:2.05;color:var(--ink-2)}
.dark .main-txt,.dark2 .main-txt{color:rgba(255,255,255,.74)}
.ft_txt{margin-top:14px;font-size:var(--fs-min);line-height:1.8;color:var(--ink-3)}
.dark .ft_txt,.dark2 .ft_txt{color:rgba(255,255,255,.42)}
.sg{width:clamp(46px,4vw,64px);height:1px;background:var(--gold);margin-bottom:26px}
.dark .sg,.dark2 .sg{background:var(--gold-l)}

/* 좌우 교차 2단 (레퍼런스 sec-contents) */
.sec-contents{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,96px);align-items:center;
}.imgArea .vod-wrap{position:relative;overflow:hidden}.imgArea.motion{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);align-items:start}/* ══ SWIPER 갤러리 ══ */
/* --edge = .inner 의 콘텐츠 좌측선. --gut 는 1920 에서 120px 이라 그대로 쓰면
   갤러리가 1400 그리드보다 140px 바깥에서 시작해 전체 그리드가 어긋난다 */
.slideWrap{position:relative;padding-block:clamp(60px,8vw,120px);
  --edge:max(var(--gut), (100% - var(--grid)) / 2)}.swiper_main{overflow:hidden;padding-inline:var(--edge) var(--gut)}
.swiper-wrapper{display:flex;gap:clamp(12px,1.6vw,26px);transition:transform .9s var(--e)}
.swiper-slide{flex:0 0 clamp(250px,26vw,400px)}
.swiper-slide a{display:block;position:relative;overflow:hidden}
.swiper-slide img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--e)}
.swiper-slide a:hover img{transform:scale(1.06)}
.swiper-slide .cap{
  position:absolute;left:0;right:0;bottom:0;max-width:none;padding:20px 18px;color:#fff;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);
}   /* max-width:none — 공용 .cap 규칙이 딤드 폭을 줄이지 못하게 못박는다 */
.swiper-slide .cap b{display:block;font-family:var(--buri);font-weight:600;font-size:17px;letter-spacing:.02em}
.swiper-slide .cap span{display:block;font-size:12px;color:rgba(255,255,255,.66);margin-top:4px}
.swiper-button-prev,.swiper-button-next{
  position:absolute;top:calc(50% + 30px);z-index:3;width:54px;height:54px;border:1px solid var(--line);
  display:grid;place-items:center;background:rgba(255,255,255,.9);transition:.35s;
}
.dark .swiper-button-prev,.dark .swiper-button-next,
.dark2 .swiper-button-prev,.dark2 .swiper-button-next{background:rgba(0,0,0,.5);border-color:var(--line-d)}
.swiper-button-prev{left:calc(var(--edge) - 27px)}
.swiper-button-next{right:calc(var(--gut) - 27px)}
.swiper-button-prev:hover,.swiper-button-next:hover{background:var(--gold);border-color:var(--gold)}
.swiper-button-prev svg,.swiper-button-next svg{width:15px;stroke:var(--ink);fill:none;stroke-width:1.4}
.dark .swiper-button-prev svg,.dark .swiper-button-next svg,
.dark2 .swiper-button-prev svg,.dark2 .swiper-button-next svg{stroke:#fff}
.swiper-button-prev:hover svg,.swiper-button-next:hover svg{stroke:#fff}
/* 썸네일 — 클릭 시 전체 이미지 팝업 */
.swiper-slide a{cursor:zoom-in}
.swiper-slide .zoom{
  position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:3;
  width:56px;height:56px;border:1px solid rgba(255,255,255,.72);border-radius:50%;
  display:grid;place-items:center;opacity:0;scale:.82;pointer-events:none;
  transition:opacity .4s var(--e),scale .4s var(--e);
}
.swiper-slide a:hover .zoom,.swiper-slide a:focus-visible .zoom{opacity:1;scale:1}
.swiper-slide .zoom::before,.swiper-slide .zoom::after{content:'';position:absolute;background:#fff}
.swiper-slide .zoom::before{width:17px;height:1px}
.swiper-slide .zoom::after{width:1px;height:17px}

/* ── LIGHTBOX ─────────────────────────────────── */
#lightbox{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.96);
  display:none;place-items:center;padding:clamp(16px,4vw,64px);
  opacity:0;transition:opacity .7s var(--e);
}
#lightbox.on{display:grid}
#lightbox.show{opacity:1}
#lightbox .lb-stage{position:relative;display:grid;place-items:center;gap:20px;max-width:100%}
#lightbox img{
  max-width:min(1680px,92vw);max-height:82svh;width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(.97);transition:opacity .6s var(--e),transform .6s var(--e);
}
#lightbox.show img{opacity:1;transform:none}
/* 확대 이미지의 AI 고지 — 이미지 우하단에 딤드 박스로 얹는다.
   figure 를 이미지 크기에 맞춰야(inline-block) 문구가 이미지 밖으로 나가지 않는다. */
#lightbox .lb-fig{position:relative;display:inline-block;line-height:0;max-width:100%;margin:0}
#lightbox .lb-note{
  position:absolute;right:clamp(10px,1.04vw,20px);bottom:clamp(10px,1.04vw,20px);z-index:1;
  max-width:calc(100% - clamp(20px,2.08vw,40px));
  padding:clamp(6px,.63vw,12px) clamp(9px,.94vw,18px);
  background:rgba(0,0,0,.55);
  font-size:12px;font-weight:400;line-height:1.45;letter-spacing:-.01em;
  color:rgba(255,255,255,.85);text-align:right;text-transform:none;
  opacity:0;transition:opacity .6s var(--e) .25s;
}
#lightbox.show .lb-note{opacity:1}
@supports (backdrop-filter:blur(2px)){ #lightbox .lb-note{backdrop-filter:blur(3px)} }
@media (max-width:600px){
  #lightbox .lb-note{left:clamp(10px,1.04vw,20px);max-width:none;text-align:left;word-break:keep-all}
}
#lightbox .lb-cap{font-size:var(--fs-min);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center}
#lightbox .lb-cap b{display:block;font-family:var(--buri);font-weight:600;font-size:18px;letter-spacing:.04em;text-transform:none;color:var(--gold-l);margin-bottom:8px}
#lightbox .lb-x{position:absolute;top:clamp(14px,2.4vw,34px);right:clamp(14px,2.4vw,34px);z-index:2;width:54px;height:54px;display:grid;place-items:center;color:#fff;transition:.4s}
#lightbox .lb-x::before,#lightbox .lb-x::after{content:'';position:absolute;width:22px;height:1px;background:currentColor}
#lightbox .lb-x::before{transform:rotate(45deg)}
#lightbox .lb-x::after{transform:rotate(-45deg)}
#lightbox .lb-x:hover{color:var(--gold-l);rotate:90deg}
#lightbox .lb-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:60px;height:60px;display:grid;place-items:center;color:#fff;transition:.4s}
#lightbox .lb-prev{left:clamp(6px,1.6vw,28px)}
#lightbox .lb-next{right:clamp(6px,1.6vw,28px)}
#lightbox .lb-nav:hover{color:var(--gold-l)}
#lightbox .lb-nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3}
#lightbox .lb-count{position:absolute;left:50%;bottom:clamp(14px,2.4vw,30px);translate:-50% 0;z-index:2;font-size:var(--fs-min);letter-spacing:.2em;color:rgba(255,255,255,.5)}
#lightbox .lb-count b{color:var(--gold-l);font-weight:400}
@media (max-width:640px){
  #lightbox .lb-nav{width:48px;height:48px}
  #lightbox img{max-height:70svh}
}

/* ══ 중앙 카피 블록 (sec6 stit/line/txt) ══ */
.centerBlock{text-align:center;padding-block:clamp(60px,9vw,150px)}
.centerBlock .stit{font-family:var(--buri);font-weight:600;font-size:clamp(15px,1.3vw,20px);letter-spacing:.28em;color:var(--gold-d)}
.dark .centerBlock .stit,.dark2 .centerBlock .stit{color:var(--gold-l)}
.centerBlock .line{width:1px;height:clamp(48px,6vw,90px);background:var(--gold);margin:26px auto}
.centerBlock .txt1{font-family:var(--buri);font-weight:600;font-size:clamp(24px,3vw,46px);letter-spacing:-.03em;line-height:1.35}
.centerBlock .txt2{margin-top:26px;font-size:clamp(15px,1.1vw,17.5px);line-height:2.1;color:var(--ink-2)}
.dark .centerBlock .txt2,.dark2 .centerBlock .txt2{color:rgba(255,255,255,.72)}
.centerBlock .txt3{margin-top:34px;font-family:var(--buri);font-weight:600;font-size:clamp(18px,1.8vw,28px);letter-spacing:-.02em}
.centerBlock .txt3 span{font-weight:600;color:var(--gold-d)}
.dark .centerBlock .txt3 span,.dark2 .centerBlock .txt3 span{color:var(--gold-l)}/* ══ 하단 정보 (sec7) ══ */
.sec7 .box_inner{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,52vw,660px)}
.sec7 .left{position:relative;overflow:hidden;display:grid;align-items:center}
.sec7 .left .bg{position:absolute;inset:0;z-index:0}
.sec7 .left .bg img{width:100%;height:100%;object-fit:cover}
.sec7 .left .bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.62)}
.sec7 .txt_box{position:relative;z-index:1;padding:clamp(28px,4vw,70px);color:#fff;display:grid;gap:clamp(20px,2.6vw,38px)}
.sec7 .box .top_box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sec7 .box .top_box p:first-child{font-family:var(--buri);font-weight:600;font-size:17px;color:var(--gold-l);flex:none}
.sec7 .box .top_box span{width:22px;height:1px;background:rgba(255,255,255,.3);flex:none}
.sec7 .box .top_box p:last-child{font-size:14.4px;color:rgba(255,255,255,.82)}
.sec7 .btm_box{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.sec7 .btm_box a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid rgba(255,255,255,.24);font-size:12.5px;letter-spacing:.06em;transition:.35s}
.sec7 .btm_box a:hover{background:var(--gold);border-color:var(--gold);color:#000}
/* 전화안내 패널 : 바닥(#090909)과 같은 값이면 위 콘텐츠와 경계가 사라진다 */
.sec7 .right{background:var(--surface-deep);display:grid;align-items:center;padding:clamp(28px,4vw,70px);color:#fff}
.sec7 .right .title{font-family:var(--buri);font-weight:600;font-size:clamp(21px,2.2vw,34px);line-height:1.45;letter-spacing:-.03em}
.sec7 .right .title strong{display:block;font-weight:600;color:var(--gold-l);margin-top:10px}
.sec7 .right .logo{margin-top:clamp(24px,3vw,44px)}
.sec7 .right .logo img{height:clamp(34px,3vw,48px);width:auto;display:block}
.sec7 .household{margin-top:clamp(22px,3vw,40px);padding-top:24px;border-top:1px solid var(--line-d)}
.sec7 .household h3{font-family:var(--buri);font-weight:600;font-size:clamp(19px,1.8vw,26px)}
.sec7 .household h3 strong{font-weight:600;color:var(--gold-l)}
.sec7 .household p{margin-top:12px;font-size:13.6px;color:rgba(255,255,255,.6);display:flex;flex-wrap:wrap;gap:6px 16px}@keyframes zoomout{to{transform:scale(1)}}/* 아이콘 서비스 카드 그리드 (기본 5열) */
.svc{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:clamp(9px,.85vw,16px)}
.svc li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,1.25vw,20px);min-height:clamp(142px,11.5vw,184px);
  padding:clamp(20px,2.1vw,34px) clamp(10px,1.05vw,18px);
  border:1px solid var(--line);background:var(--bg);text-align:center;
  transition:border-color .55s var(--e),background-color .55s var(--e),transform .55s var(--e);
}
.dark .svc li,.dark2 .svc li{border-color:var(--line-d)}
.svc svg{
  width:clamp(34px,3.1vw,46px);height:auto;flex:none;
  stroke:var(--gold-d);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .55s var(--e);
}
.dark .svc svg,.dark2 .svc svg{stroke:var(--gold-l)}
.svc .t{
  font-size:clamp(13px,1vw,16px);line-height:1.55;letter-spacing:-.02em;
  word-break:keep-all;color:var(--ink-2);
}
.dark .svc .t,.dark2 .svc .t{color:rgba(255,255,255,.82)}
@media (hover:hover){
  .svc li:hover{border-color:var(--gold);background:rgba(205,167,103,.07);transform:translateY(-4px)}
  .svc li:hover svg{stroke:var(--gold-l)}
}

/* 스탯 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.dark .stats,.dark2 .stats{background:var(--line-d)}
/* 타일은 자기가 놓인 섹션의 면색을 그대로 따른다 (헤어라인 그리드만 남김) */
.stat{background:var(--surface,var(--bg));padding:clamp(24px,3vw,44px) clamp(16px,2vw,30px)}
.stat .v{font-family:var(--buri);font-weight:600;font-size:clamp(30px,3.6vw,56px);line-height:1}
.stat .v i{font-style:normal;font-size:max(var(--fs-min),.36em);font-family:var(--suit);font-weight:400;margin-left:6px;color:var(--ink-3)}
.dark .stat .v i,.dark2 .stat .v i{color:rgba(255,255,255,.5)}
.stat .k{margin-top:13px;font-size:var(--fs-min);letter-spacing:.18em;color:var(--ink-3)}
.dark .stat .k,.dark2 .stat .k{color:rgba(255,255,255,.5)}

/* 탭 */
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.dark .tabs,.dark2 .tabs{border-color:var(--line-d)}
.tabs button{padding:19px 28px;font-size:12.5px;letter-spacing:.14em;color:var(--ink-3);border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.35s}
.tabs button[aria-selected="true"]{color:var(--gold-d);border-bottom-color:var(--gold)}
.dark .tabs button,.dark2 .tabs button{color:rgba(255,255,255,.5)}
.dark .tabs button[aria-selected="true"],.dark2 .tabs button[aria-selected="true"]{color:var(--gold-l)}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}/* 테이블 */
.tbl{width:100%;border-collapse:collapse;font-size:clamp(14px,1.04vw,20px)}
.tbl thead th{font-size:clamp(12px,.83vw,16px);letter-spacing:.1em;color:var(--gold-d);text-align:left;padding:0 clamp(10px,.94vw,18px) clamp(14px,1.15vw,22px);border-bottom:1px solid var(--ink);font-weight:500;white-space:nowrap}
.tbl tbody td{padding:clamp(16px,1.35vw,26px) clamp(10px,.94vw,18px);border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl tbody tr:hover{background:#FAFAF9}
/* 동 번호 칸 : 동번호(디스플레이) + 필지번호(보조) + 판매완료 배지 */
.tbl .no{font-family:var(--buri);font-weight:600;font-size:clamp(20px,1.56vw,30px);color:var(--ink);width:clamp(150px,17vw,320px);white-space:nowrap}
.tbl .no .unit{font-family:var(--sans);font-weight:400;font-size:clamp(12px,.83vw,16px)}
.tbl .no .lot{font-family:var(--sans);font-weight:400;font-size:clamp(12px,.83vw,16px);
  color:rgba(255,255,255,.5);margin-left:8px}
.tbl .no .tag{margin-left:12px;vertical-align:middle}
/* 면적 : 숫자는 본문 크기, 괄호 안 평수는 한 단 작고 흐리게 */
.tbl .c-excl,.tbl .c-supply{font-variant-numeric:tabular-nums}
.tbl .c-excl em,.tbl .c-supply em{font-style:normal;font-size:clamp(12px,.83vw,16px);color:rgba(255,255,255,.55)}
/* 판매완료 행 : 면적 두 칸을 합쳐 대시 하나로 */
.tbl .c-none{text-align:center;color:rgba(255,255,255,.32)}
.tbl .grade{font-size:clamp(12px,.83vw,16px);letter-spacing:.1em;color:var(--gold-d)}
.tbl td.last{text-align:right}
.tbl .none{font-size:clamp(12px,.83vw,16px);color:rgba(255,255,255,.32)}
.tbl .ask{font-size:clamp(12px,.83vw,16px);letter-spacing:.08em;color:var(--gold-d);border-bottom:1px solid var(--gold);white-space:nowrap}
.dark .tbl thead th,.dark2 .tbl thead th{border-bottom-color:rgba(255,255,255,.34)}
.dark .tbl tbody td,.dark2 .tbl tbody td{border-bottom-color:var(--line-d);color:rgba(255,255,255,.74)}
.dark .tbl tbody tr:hover,.dark2 .tbl tbody tr:hover{background:rgba(255,255,255,.045)}
.dark .tbl .no,.dark2 .tbl .no{color:#fff}
.tag{display:inline-block;padding:clamp(5px,.42vw,8px) clamp(10px,.94vw,18px);font-size:clamp(var(--fs-min),.83vw,16px);letter-spacing:.06em;white-space:nowrap;border:1px solid currentColor}
.tag--a{color:var(--gold-d)}.tag--b{color:var(--ink-3)}.tag--c{color:#8A8A8A}
/* 다크에선 밝기 서열이 뒤집힌다 : 계약완료(비활성)가 가장 흐려야 한다 */
.dark .tag--b,.dark2 .tag--b{color:rgba(255,255,255,.6)}
.dark .tag--c,.dark2 .tag--c{color:rgba(255,255,255,.6)}   /* 판매완료는 표의 핵심 정보 — 32%는 2.7:1 로 못 읽는다 */.err{font-size:12.5px;color:#E9A87F;min-height:0}.fmsg{font-size:14px;color:var(--gold-l);min-height:22px}/* ══ FOOTER ══ */
footer{position:relative;z-index:2;background:var(--concept);color:rgba(255,255,255,.5);padding-block:clamp(52px,7vw,96px) 38px;font-size:13px;line-height:2.1}
.ft-t{display:grid;grid-template-columns:1.1fr 2fr auto;gap:clamp(26px,4vw,60px);padding-bottom:42px;border-bottom:1px solid var(--line-d)}
/* 푸터 로고 : 세로형 락업 이미지 */
.ft-b img{width:clamp(124px,11vw,152px);height:auto;display:block}
.ft-n{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 22px;font-size:13.2px;color:rgba(255,255,255,.62)}
.ft-n .g{font-size:var(--fs-min);letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
.ft-n a:hover{color:var(--gold-l)}
.ft-tel small{display:block;font-size:var(--fs-min);letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:11px}
.ft-tel a{font-family:var(--buri);font-weight:600;font-size:clamp(25px,3vw,36px);color:#fff;letter-spacing:.05em}
.ft-i{padding-top:28px}
.ft-i .row{display:flex;flex-wrap:wrap;gap:5px 22px}
.ft-i .k{color:rgba(255,255,255,.7);margin-right:7px}
.duck{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:var(--fs-min);line-height:1.95;color:rgba(255,255,255,.3)}
.copy{margin-top:20px;font-size:var(--fs-min);letter-spacing:.2em;color:rgba(255,255,255,.26)}

/* 퀵 */
.quick{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column}
.quick a{display:grid;place-items:center;width:88px;min-height:92px;gap:9px;padding:15px 8px;background:rgba(0,0,0,.9);color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.1);font-size:var(--fs-min);letter-spacing:.04em;text-align:center;line-height:1.55;transition:.35s}
.quick a:hover,.quick a.hi{background:var(--gold);color:#000}
.quick svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.3}
.mbar{position:fixed;inset:auto 0 0;z-index:105;display:none;grid-template-columns:1fr 1.4fr;background:var(--bg);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:grid;place-items:center;min-height:57px;font-size:14px;color:#fff}
.mbar a.hi{background:var(--gold);color:#000}

/* 다음페이지 */
/* 배경을 #090909 로 통일한 뒤로는 면 차이가 없어 하단도 라인으로 닫아야
   푸터와 구분된다. 위아래 같은 값을 써서 배너가 하나의 띠로 읽히게 한다. */
.nextp{display:grid;grid-template-columns:1fr 1fr;background:var(--concept-2);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.nextp a{padding:clamp(30px,4vw,64px) var(--gut);transition:background .6s var(--e)}
.nextp a:hover{background:#1A1A1A}
.nextp a + a{border-left:1px solid var(--line-d);text-align:right}
.nextp .k{display:block;font-size:var(--fs-min);letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
.nextp .t{font-family:var(--buri);font-weight:600;font-size:clamp(20px,2.4vw,34px);color:#fff;letter-spacing:.03em}

/* ══ RESPONSIVE ══ */
@media (max-width:1100px){
  .nav__grid{grid-template-columns:repeat(2,1fr)}
  .sec7 .box_inner{grid-template-columns:1fr}  .svc{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  :root{--hdr:64px}.mo_only{display:block}
  .hd-tel,.hd-cta{display:none}
  .logoArea img{height:34px}
  .quick{display:none}.mbar{display:grid}
  body{padding-bottom:57px}
  .sec-contents{grid-template-columns:1fr}  .stats{grid-template-columns:1fr 1fr}  .ft-t{grid-template-columns:1fr}
  .nextp{grid-template-columns:1fr}
  .nextp a + a{border-left:0;border-top:1px solid var(--line-d);text-align:left}
  .swiper-button-prev,.swiper-button-next{display:none}
}
@media (max-width:640px){
  .imgArea.motion{grid-template-columns:1fr}  .ft-n{grid-template-columns:1fr 1fr}
  /* ── 필지 표 : 좁은 화면에서는 행을 카드로 접는다 ──────────────
     thead 를 숨기면 값만 남아 무엇이 무엇인지 알 수 없으므로,
     각 셀의 data-th 를 ::before 로 꺼내 항목명을 값 옆에 세운다.
     [동번호 + 판매완료] 머리 / 면적 2줄 / [가격문의] 발 구조. */
  .tbl{display:block;font-size:var(--fs-min)}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tbody tr{
    display:grid;grid-template-columns:1fr;row-gap:0;
    padding:16px 16px 14px;margin-bottom:10px;
    border:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .dark .tbl tbody tr,.dark2 .tbl tbody tr{border-color:var(--line-d)}
  .dark .tbl tbody tr:hover,.dark2 .tbl tbody tr:hover{background:none}   /* 터치에는 호버가 없다 */
  .tbl tbody td{display:block;border:0;padding:0}

  /* 머리줄 : 동번호 · 필지번호 왼쪽, 판매완료 배지는 오른쪽 끝으로 */
  .tbl .no{
    grid-row:1;width:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;
    font-size:26px;line-height:1.15;
  }
  .tbl .no .unit{font-size:13px}
  .tbl .no .lot{font-size:13px;margin-left:0}
  .tbl .no .tag{margin-left:auto;align-self:center}

  /* 면적 2줄 : 라벨 폭을 고정해 값의 좌측선을 맞춘다 */
  .tbl .c-excl{grid-row:2;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-d)}
  .tbl .c-supply{grid-row:3}
  .tbl .c-excl,.tbl .c-supply{
    display:grid;grid-template-columns:5.5em 1fr;column-gap:10px;
    padding-bottom:7px;font-size:13px;line-height:1.5;
  }
  .tbl .c-excl em,.tbl .c-supply em{font-size:12px}
  .tbl td[data-th]::before{
    content:attr(data-th);color:rgba(255,255,255,.42);font-size:var(--fs-min);letter-spacing:.02em;
  }
  /* 판매완료 행은 면적이 없으므로 대시 칸을 통째로 감춘다 (배지가 이미 상태를 말한다) */
  .tbl .c-none{display:none}

  .tbl .c-cta{grid-row:4;justify-self:end;margin-top:12px}
  .tbl .c-cta:has(.none){display:none}   /* 판매완료 행의 '—' 는 카드에서 군더더기 */
  .tbl .ask{display:inline-block;padding:9px 16px;font-size:13px;border:1px solid var(--gold-l);border-bottom-width:1px}
  .svc{grid-template-columns:repeat(2,1fr);gap:8px}
  .svc li{min-height:132px;padding:22px 12px;gap:13px}
  .nav__grid{grid-template-columns:1fr;gap:26px}
  .nav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-aos]{opacity:1;transform:none}
}

/* ══ 푸터 앞 여백 : 전 페이지 360px 고정 ══
   nextp 바로 앞 형제의 하단 여백을 없애고 nextp 에만 간격을 준다.
   페이지마다 마지막 블록이 달라도 결과가 항상 같아진다. */
*:has(+ .nextp){padding-bottom:0!important;margin-bottom:0!important}
*:has(+ .nextp) .slideWrap{padding-bottom:0}
/* 면색이 깔린 섹션은 여백까지 지우면 색 띠가 잘려 보인다. 위 규칙의 예외.
   현재 이 조합인 페이지는 없지만 360px 불변식을 지키는 시스템 가드라 남겨둔다. */
.section.dark2:not(.cc-svc):has(+ .nextp){padding-bottom:var(--sec)!important}
.nextp{margin-top:clamp(120px,18.75vw,360px)}
/* nextp 가 없는 페이지(index) : contentsWrap 마지막 블록 하단으로 360 을 준다 */
.contentsWrap:not(:has(.nextp)) > *:last-child{padding-bottom:0!important}   /* index 는 예외 : 배너 컨텐츠가 푸터에 붙는다 */
@media (max-width:1440px){ .bs-col__t p, .bs-note p{font-weight:400} }

/* Signature House 보정 */
@media (max-width:1200px){ .sig-stick__tit h3{font-weight:400} }   /* 80px→50px 경계 */
@media (max-width:1300px){ .sig-def__tit{font-weight:400} }        /* 74px→50px 경계 */
@media (max-width:1440px){ .sig-def__txt{font-weight:400} }
.sig-def > div{padding-top:clamp(4px,.57vw,11px)}   /* 피그마 : 우측 본문이 좌측 제목보다 11px 아래 */
.sig-gal .slideWrap{padding-top:0}                  /* 머리글↔슬라이드 간격은 마크업에서 준다 */

/* ══════════════════════════════════════════════════════════════
   MEDIA (피그마 122:415)
   서브 타이틀은 공통 .subtop. 이 페이지는 라벨 + 16:9 임베드 두 벌뿐이다.
   피그마 1920 기준 : 밴드↓200 → 라벨(40px) ↓56 → 영상(1160x654)
                      ↓200 → 라벨 ↓56 → 영상 ↓56 → 각주 (↓360 은 .nextp 가 준다)
   ══════════════════════════════════════════════════════════════ */

.section.md-films{padding-block:clamp(80px,10.42vw,200px) 0}
.md-film__tit{
  text-align:center;font-family:var(--buri);font-weight:300;
  font-size:clamp(26px,2.08vw,40px);line-height:1.2;letter-spacing:-.01em;
  color:var(--gold-em);
}
/* clamp 가 30px 아래로 내려가면 Light 는 획이 죽는다 (.mtxt 와 같은 전환점) */
@media (max-width:1440px){ .md-film__tit{font-weight:400} }
.md-film__tit--2nd{margin-top:clamp(80px,10.42vw,200px)}

/* 1160/1920 = 1400 그리드의 10컬럼(80x10 + 40x9). 그 아래에서는 폭을 다 쓴다 */
.md-film{
  width:min(100%,1160px);margin:clamp(28px,2.92vw,56px) auto 0;
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--surface-deep);   /* 레터박스는 플레이어와 같은 순검정 */
}
.md-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

.md-note{
  width:min(100%,1160px);margin:clamp(28px,2.92vw,56px) auto 0;text-align:center;
  font-weight:400;font-size:var(--fs-min);line-height:1.5;
  color:rgba(255,255,255,.6);word-break:keep-all;
}

/* ══════════════════════════════════════════════════════════════
   ARCHITECTURE (피그마 65:716)
   서브 타이틀은 공통 .subtop, "제목 고정 + 표" 는 .sig-def__tit / .sig-tbl 재사용.
   ══════════════════════════════════════════════════════════════ */

/* 밴드↓ 460 / 자재 팔레트까지 180 */
.section.arc-lead{padding-block:clamp(120px,23.96vw,460px) clamp(85px,11.46vw,220px)}
.arc-lead__tit{
  text-align:center;font-family:var(--buri);font-weight:300;
  font-size:clamp(24px,3.125vw,60px);line-height:1.2;letter-spacing:-.02em;
  color:#fff;word-break:keep-all;
}
.arc-lead__tit span{font-weight:600;color:var(--gold-em)}
@media (max-width:1600px){ .arc-lead__tit{font-weight:400} }   /* 60px→50px 경계 */

/* 자재 팔레트↓ 400 */
.section.arc-def-sec{padding-block:clamp(110px,20.83vw,400px) 0}
/* 피그마 : 제목 260|표 740~1660 → 34.3 / 65.7 */
.arc-def{display:grid;grid-template-columns:34.3% 65.7%;align-items:start;column-gap:0}
.arc-tbl{margin-top:0}
.arc-tbl li{font-size:clamp(14px,1.25vw,24px)}   /* 이 페이지만 24px */

/* 2단 엇갈림 콜라주 */
.arc-col{margin-top:clamp(110px,20.83vw,400px)}
.arc-col img{display:block;width:100%;height:auto;object-fit:cover;background:var(--bg)}
.arc-col .vcap{text-align:right}
.arc-col__a{width:57.1%;margin:0 0 0 42.9%}
.arc-col__a img{aspect-ratio:800/1008;object-position:24% 50%}
/* 좌측 이미지가 우측 이미지 하단을 547px(=39.07%) 파고든다 */
.arc-col__b{width:40%;margin:-39.07% 0 0}
.arc-col__b img{aspect-ratio:560/769;object-position:79.5% 48%}

@media (max-width:900px){
  .arc-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .arc-col__a,.arc-col__b{width:100%;margin:0}
  .arc-col__b{margin-top:clamp(30px,6vw,60px)}
  .arc-col .vcap{text-align:left}
}

/* ── 자재 팔레트 : 계단형 등장 ──
   계단은 '올라오는 동안'에만 보이고, 끝나면 다섯 개가 한 줄로 가지런히 정렬된다.
   - 순서 : 오른쪽(GLASS) → 왼쪽(WHITE), 딜레이 0→560ms
   - 깊이 : 왼쪽으로 갈수록 더 아래에서 출발한다(--n 이 커진다)
   둘이 겹쳐 스크롤 중에는 대각선으로 읽히고, 도착점은 모두 같다. */
.arc-mat{--rise:clamp(40px,3.75vw,72px);--rise-step:clamp(8px,.83vw,16px)}
.arc-mat .box[data-aos="fade-up"]{transform:translateY(calc(var(--rise) + var(--rise-step) * var(--n,0)))}
.arc-mat .box:nth-child(1){--n:4}   /* WHITE — 가장 깊은 곳에서 가장 늦게 */
.arc-mat .box:nth-child(2){--n:3}
.arc-mat .box:nth-child(3){--n:2}
.arc-mat .box:nth-child(4){--n:1}
.arc-mat .box:nth-child(5){--n:0}   /* GLASS — 가장 얕은 곳에서 가장 먼저 */
.arc-mat .box[data-aos="fade-up"].aos-in{transform:none}   /* 도착점은 전부 동일 */

/* ══════════════════════════════════════════════════════════════
   INFINITY POOL (피그마 57:793)
   서브타이틀 .subtop / 제목+표 .sig-def__tit·.sig-tbl /
   엇갈림 콜라주 .arc-col / 걸침 텍스트 .bs-wide 를 그대로 재사용한다.
   ══════════════════════════════════════════════════════════════ */

/* 밴드↓ 460 */
.section.pl-lead{padding-block:clamp(120px,23.96vw,460px) 0}
.pl-lead__tit{
  font-family:var(--buri);font-weight:300;font-size:clamp(28px,4.375vw,84px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;word-break:keep-all;
}
.pl-lead__tit span{font-weight:600;color:var(--gold-em)}
@media (max-width:1140px){ .pl-lead__tit{font-weight:400} }   /* 84px→50px 경계 */
.pl-lead__txt{margin-top:clamp(18px,2.08vw,40px);font-weight:300;font-size:clamp(13.5px,1.04vw,20px);
  line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}
@media (max-width:1440px){ .pl-lead__txt{font-weight:400} }

/* 풀블리드 : 이미지 고정 / 마스크만 흐른다 (about-signature 와 같은 방식) */
.pl-plx{position:relative;width:100%;overflow:hidden;background:var(--bg);
  aspect-ratio:1920/600;margin-top:clamp(85px,12.92vw,248px)}
.pl-plx__l{position:absolute;left:0;top:0;width:100%;height:100svh;will-change:transform}
.pl-plx__l img{width:100%;height:100%;object-fit:cover}
.pl-plx__l::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)}

/* 캡션 하단 기준 365 (= 패럴럭스 하단 기준 400) */
.section.pl-def-sec{padding-block:clamp(120px,19.01vw,365px) 0}
.pl-def{display:grid;grid-template-columns:42.9% 57.1%;align-items:start;column-gap:0}  /* 260 | 860~1660 */
.pl-tbl{margin-top:0}
.pl-tbl li{font-size:clamp(15px,1.56vw,30px)}   /* 이 페이지만 30px */

/* 콜라주 : 캡션이 없어 파고드는 깊이가 다르다 (-512 / 1400 = 36.57%) */
.pl-col .arc-col__b{margin-top:-36.57%}
.pl-col .arc-col__a img{object-position:48.8% 66.5%}
.pl-col .arc-col__b img{object-position:81% 0}

/* 걸침 텍스트 : 90px SemiBold, 불릿 18, 고지 30 */
.pl-wide-wrap{margin-top:clamp(110px,20.83vw,400px)}
.pl-over{margin-top:calc(-1 * clamp(9px,2.24vw,43px))}   /* 피그마 : 걸침 -43 */
.pl-over .bs-list{margin-top:clamp(9px,.94vw,18px)}
.pl-over__cap{margin-top:clamp(15px,1.56vw,30px);text-align:left}

@media (max-width:900px){
  .pl-plx{aspect-ratio:4/3}
  .pl-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .pl-col .arc-col__b{margin-top:clamp(30px,6vw,60px)}
}

/* ══════════════════════════════════════════════════════════════
   YACHT LIFESTYLE (피그마 57:880)
   콜라주는 Brand Story 의 .bs-col 과 좌표가 완전히 같아 그대로 쓴다
   (57.4% / 40.3% / 좌측선 60% / -27.5% / 텍스트 47.5%).
   캡션 두 줄이 끼어들어 파고드는 깊이만 다시 잡았다.
   ══════════════════════════════════════════════════════════════ */

/* 밴드↓ 460 */
.section.yc-lead{padding-block:clamp(120px,23.96vw,460px) 0}
.yc-lead__tit{
  text-align:center;font-family:var(--buri);font-weight:300;font-size:clamp(24px,3.125vw,60px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;word-break:keep-all;
}
.yc-lead__tit span{font-weight:600;color:var(--gold-em)}
@media (max-width:1600px){ .yc-lead__tit{font-weight:400} }   /* 60px→50px 경계 */
.yc-lead__txt{margin-top:clamp(18px,2.08vw,40px);text-align:center;font-weight:300;
  font-size:clamp(13.5px,1.04vw,20px);line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}
@media (max-width:1440px){ .yc-lead__txt{font-weight:400} }

/* 리드↓ 400. 캡션이 들어가 .bs-col 기본 오프셋을 덮어쓴다 */
.yc-col{padding-top:clamp(130px,20.83vw,400px)}
.yc-cap{text-align:left}
.yc-cap--a{width:57.4%}                       /* 좌측 이미지 폭에 맞춘다 */
.yc-cap--b{width:40.3%;margin-left:60%}       /* 우측 이미지 폭·좌측선에 맞춘다 */
.yc-col .bs-col__b{margin-top:-30%}           /* 캡션 35px 만큼 더 끌어올린다 (-420/1400) */
.yc-col .bs-col__t{margin-top:-13.64%}        /* 〃 (-191/1400) */
.yc-col .bs-col__a img{aspect-ratio:803/881;object-position:70% 47%}
.yc-col .bs-col__b img{aspect-ratio:564/769;object-position:43.2% 0}

/* 풀블리드 : 이미지 고정 / 마스크만 흐른다 */
.yc-plx{position:relative;width:100%;overflow:hidden;background:var(--bg);
  aspect-ratio:1920/600;margin-top:clamp(115px,21.72vw,417px)}   /* From the Water 하단 → 417 */
.yc-plx__l{position:absolute;left:0;top:0;width:100%;height:100svh;will-change:transform}
.yc-plx__l img{width:100%;height:100%;object-fit:cover}
.yc-plx__l::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28)}

/* 캡션 하단 기준 365 (= 풀블리드 하단 기준 400) */
.section.yc-def-sec{padding-block:clamp(120px,19.01vw,365px) 0}
.yc-def{display:grid;grid-template-columns:42.9% 57.1%;align-items:start;column-gap:0}  /* 260 | 860~1660 */
.yc-tbl{margin-top:0}
.yc-tbl li{font-size:clamp(15px,1.56vw,30px)}
.yc-note{margin-top:clamp(24px,2.71vw,52px);text-align:left}

/* A WEEKEND : 각주 하단 기준 400, 머리글↓ 64 는 마크업에서 */
.section.yc-gal{padding-block:clamp(110px,20.83vw,400px) 0}
.yc-gal .slideWrap{padding-top:0}

@media (max-width:900px){
  .yc-plx{aspect-ratio:4/3}
  .yc-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .yc-cap--a,.yc-cap--b{width:100%;margin-left:0}
}

/* ══ CONCIERGE (피그마 57:1038) — 리드는 Yacht 의 .yc-lead 컴포넌트 재사용 ══ */
.subtop__img .dimd.cc-dimd{height:47.9%}          /* 이 페이지 딤드는 225/470 */
.cc-main{margin-top:clamp(70px,10.42vw,200px)}
.cc-main img{display:block;width:100%;height:auto;aspect-ratio:1400/933;object-fit:cover;background:var(--bg)}
.cc-main__cap{text-align:center}
.section.dark2.cc-svc{margin-top:clamp(70px,10.1vw,194px);background:var(--bg);--surface:var(--bg)}

/* ══════════════════════════════════════════════════════════════
   모바일 보정
   ══════════════════════════════════════════════════════════════ */

/* 1) 등장 전 transform 이 화면 밖으로 나가 가로 스크롤이 생기는 것을 막는다.
      overflow-x:clip 은 스크롤 컨테이너를 만들지 않아 내부 position:sticky 가 그대로 동작한다
      (hidden 을 쓰면 sticky 가 깨진다). */
.contentsWrap{overflow-x:clip}

@media (max-width:900px){
  /* 2) 갤러리 : 데스크탑은 버튼+JS transform, 모바일은 네이티브 가로 스크롤.
        버튼이 숨겨져 있어 모바일에서는 넘길 방법이 아예 없었다. */
  .swiper_main{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);   /* 스냅이 좌측 거터에 맞게 선다 (없으면 화면 끝에 붙는다) */
    -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .swiper_main::-webkit-scrollbar{display:none}
  .swiper-wrapper{transform:none!important;transition:none}
  .swiper-slide{scroll-snap-align:start}
  /* 화살표를 감추면 터치가 아닌 환경(좁은 데스크탑 창)에서 다음 썸네일로 갈 방법이
     아예 없어진다. 스크롤바까지 숨긴 상태라 스와이프 가능하다는 단서도 없다.
     소형 버튼으로 되살리되 사진 위에 얹지 않고, 제목과 같은 선(제목 블록의
     세로 중심)에 우측 정렬로 세운다. 네이티브 스와이프와 병행 동작한다.

     기준점 : .slideWrap 상단(0) → 위로 margin-top 64px → 그 위가 제목 2행.
     제목 높이 = 2행 x 행간 1.2 x font-size 이므로 절반은 1.2 x font-size.
     .sig-gal__tit 의 clamp 를 그대로 써서 폭이 변해도 중심이 따라간다. */
  .swiper-button-prev,.swiper-button-next{
    display:grid;width:38px;height:38px;left:auto;
    top:calc(-64px - 1.2 * clamp(26px,3.125vw,60px) - 19px);
  }
  .swiper-button-next{right:var(--gut)}
  .swiper-button-prev{right:calc(var(--gut) + 46px)}
  .swiper-button-prev svg,.swiper-button-next svg{width:13px}
  .swiper-button-prev[disabled],.swiper-button-next[disabled]{opacity:.26;pointer-events:none}

  /* 3) 좌우 등장은 세로로 바꾼다. 우측 정렬 이미지를 오른쪽으로 밀면 화면을 넘는다 */
  .vrow__img[data-aos="fade-left"],
  .vrow__img[data-aos="fade-right"]{transform:translateY(clamp(24px,5vw,40px))}

  /* 4) Yacht 콜라주 : 페이지 전용 음수 마진이 특이도 때문에
        .bs-col 의 모바일 리셋을 이기고 있었다 (이미지와 텍스트가 겹쳤다) */
  .yc-col .bs-col__b,
  .yc-col .bs-col__t{margin-top:clamp(28px,6vw,50px)}
}

/* ══════════════════════════════════════════════════════════════
   VILLA TYPES (피그마 60:439)
   이미지는 1300/1920 = 67.7% 로 한쪽 화면 끝에 붙고,
   텍스트 박스가 반대쪽에서 이미지 하단 100px 을 덮으며 겹친다.
   박스는 페이지 배경과 같은 불투명 #090909 라 이미지를 가린다.
   ══════════════════════════════════════════════════════════════ */

.section.vt-lead{padding-block:clamp(90px,13.54vw,260px) 0}
.vt-lead__txt{text-align:center;font-weight:400;font-size:clamp(15px,1.25vw,24px);
  line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}

.vt{position:relative;margin-top:clamp(110px,20.83vw,400px)}

/* 라벨 : 120px Bold 골드 + 60px Medium, 베이스라인 정렬. 이미지 안쪽 선에 맞춘다 */
.vt__label{display:flex;align-items:baseline;gap:clamp(6px,.73vw,14px);
  font-family:var(--buri);line-height:1.2;white-space:nowrap}
.vt__label b{font-weight:700;font-size:clamp(52px,6.25vw,120px);color:var(--gold-em)}
.vt__label span{font-weight:400;font-size:clamp(26px,3.125vw,60px);color:#fff;letter-spacing:.01em}
.vt--r .vt__label{margin-left:32.3%}                    /* 이미지 좌측선(620) */
.vt--l .vt__label{width:67.7%;justify-content:flex-end} /* 이미지 우측선(1300) */

/* 이미지 : 한쪽 화면 끝에 붙는 67.7% */
.vt__img{position:relative;width:67.7%;overflow:hidden;background:var(--bg);
  margin-top:clamp(8px,.83vw,16px)}
.vt--r .vt__img{margin-left:auto}
.vt--l .vt__img{margin-right:auto}
.vt__img img{display:block;width:100%;height:auto;aspect-ratio:1300/732;object-fit:cover}
.vt__img--flip img{transform:scaleX(-1)}   /* 피그마 : D 타입은 좌우 반전 */

/* 캡션은 이미지 쪽 그리드 끝에, 텍스트 박스는 반대쪽에 */
.vt__cap{margin-top:clamp(9px,1.04vw,20px)}
.vt--r .vt__cap{text-align:right}
.vt--l .vt__cap{text-align:left}
.vt__con{
  position:relative;z-index:2;width:48.9%;              /* 685/1400 */
  background:var(--bg);padding-top:clamp(24px,3.65vw,70px);
  margin-top:calc(-1 * clamp(52px,7.19vw,138px));       /* 이미지 하단 100 겹침 + 캡션 블록 */
}
.vt--r .vt__con{margin-right:auto;padding-right:clamp(24px,3.65vw,70px)}
.vt--l .vt__con{margin-left:auto;padding-left:clamp(24px,3.65vw,70px)}
.vt__tit{font-family:var(--buri);font-weight:400;font-size:clamp(26px,3.125vw,60px);
  line-height:1.25;letter-spacing:-.05em;color:#fff;word-break:keep-all}
.vt__tit span{color:var(--gold-em)}
.vt__txt{margin-top:clamp(18px,2.4vw,46px);font-weight:500;font-size:clamp(13.5px,.94vw,18px);
  line-height:1.8;color:rgba(255,255,255,.8);word-break:keep-all}

/* 스펙 표 : 항목 좌 / 값 우, 행마다 밑줄 */
.vt__spec{margin-top:clamp(18px,2.4vw,46px);display:flex;flex-direction:column;gap:13px}
.vt__spec > div{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.3);font-size:14px;color:#fff}
.vt__spec dt{font-weight:500;flex:none}
.vt__spec dd{margin:0;font-weight:600;text-align:right;word-break:keep-all}

@media (max-width:900px){
  /* 겹침·좌우 배치를 풀고 한 줄로 세운다 */
  .vt{margin-top:clamp(70px,14vw,130px)}
  .vt__label,.vt--r .vt__label,.vt--l .vt__label{width:100%;margin-left:0;justify-content:flex-start}
  .vt__img{width:100%}
  .vt__con,.vt--r .vt__con,.vt--l .vt__con{
    width:100%;margin:clamp(24px,5vw,40px) 0 0;padding:0;background:none}
  .vt--r .vt__cap,.vt--l .vt__cap{text-align:left}
  /* 좌우 등장은 세로로 (화면을 넘지 않게) */
  .vt__label[data-aos],.vt__img[data-aos],.vt__con[data-aos]{transform:translateY(clamp(24px,5vw,40px))}
  .vt__label[data-aos].aos-in,.vt__img[data-aos].aos-in,.vt__con[data-aos].aos-in{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   MASTER PLAN (피그마 67:2496)
   "단지구성 + 표" 는 Signature 의 .sig-def__tit / .sig-tbl 재사용
   ══════════════════════════════════════════════════════════════ */

/* 밴드↓ 160 (스탯 블록은 기존 코드 그대로) */
.section.mp-stats{padding-block:clamp(70px,8.33vw,160px) 0}

/* 배치도 : 1000/1920 = 52.1% 중앙. 캡션은 이미지 밖 아래 중앙 */
.mp-plan{width:52.1%;margin-inline:auto;margin-top:clamp(70px,9.17vw,176px)}
.mp-plan img{display:block;width:100%;height:auto;aspect-ratio:1000/1078;object-fit:cover;background:var(--bg)}
.mp-plan__cap{text-align:center}

/* 캡션↓ 206 (배치도 하단 기준 241) */
.section.mp-def-sec{padding-block:clamp(80px,10.73vw,206px) 0}
.mp-def{display:grid;grid-template-columns:34.3% 65.7%;align-items:start;column-gap:0}  /* 260 | 740~1660 */
.mp-tbl{margin-top:0}
.mp-tbl li{font-size:clamp(14px,1.25vw,24px)}

@media (max-width:900px){
  .mp-plan{width:100%}
  .mp-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
}

/* ══════════════════════════════════════════════════════════════
   PRICE INQUIRY (피그마 74:2794)
   ══════════════════════════════════════════════════════════════ */

.subtop__img .dimd.pr-dimd{background:linear-gradient(to top,rgba(9,9,9,.8),rgba(9,9,9,0))}  /* 이 페이지 딤드는 .8 */
.section.pr-lead{padding-block:clamp(90px,11.67vw,224px) 0}
.section.pr-tbl-sec{padding-block:clamp(50px,5.21vw,100px) 0}
.pr-note{margin-top:clamp(24px,3.13vw,60px);text-align:left}

/* ── 박스형 탭 : 가로 100% 4등분 ──
   기존 12.5px + 자간 .14em 밑줄 탭은 다크 배경에서 거의 읽히지 않았다.
   글자를 키우고 선택 상태를 골드 면으로 채워 한눈에 구분되게 한다. */
.tabs.tabs--box{
  display:grid;grid-template-columns:repeat(4,1fr);width:100%;
  border:1px solid var(--line-d);border-bottom:1px solid var(--line-d);overflow:visible;
}
.tabs.tabs--box button{
  padding:clamp(15px,1.46vw,28px) 6px;margin:0;
  border:0;border-left:1px solid var(--line-d);
  background:transparent;color:rgba(255,255,255,.55);
  font-size:clamp(13.5px,1.15vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.2;
  white-space:nowrap;cursor:pointer;transition:background .35s var(--e),color .35s var(--e);
}
.tabs.tabs--box button:first-child{border-left:0}
.tabs.tabs--box button:hover{background:rgba(255,255,255,.05);color:#fff}
.tabs.tabs--box button[aria-selected="true"]{
  background:var(--gold-em);color:#fff;font-weight:600;
}
.tabs.tabs--box button:focus-visible{outline:2px solid var(--gold-l);outline-offset:-4px}

@media (max-width:600px){
  /* 네 칸이 한 줄에 들어가면 글자가 너무 작아진다. 2x2 로 접는다 */
  .tabs.tabs--box{grid-template-columns:repeat(2,1fr)}
  .tabs.tabs--box button:nth-child(3){border-left:0}
  .tabs.tabs--box button:nth-child(n+3){border-top:1px solid var(--line-d)}
}

/* ══════════════════════════════════════════════════════════════
   INQUIRY (contact-inquiry)
   서브타이틀 .subtop / 폼 .rsv / "제목 고정 + 표" 는 .sig-def__tit·.sig-tbl 재사용.
   이 페이지 고유는 지도 박스·지점 2단·외부지도 버튼 뿐이다.
   ══════════════════════════════════════════════════════════════ */

.section.iq-def-sec{padding-block:clamp(90px,11.46vw,220px) 0}
.iq-def{display:grid;grid-template-columns:34.3% 65.7%;align-items:start;column-gap:0}
.iq-def > div{padding-top:clamp(4px,.57vw,11px)}   /* 우측 본문이 좌측 제목보다 11px 아래 */
/* 이 페이지 제목만 74px → 64px. 다른 페이지의 .sig-def__tit 는 건드리지 않는다 */
.iq-def .sig-def__tit{font-size:clamp(26px,3.33vw,64px)}
/* 항목표 : 라벨 폭을 고정해 값의 좌측선을 맞춘다 (번호 대신 말머리라 정렬 기준이 필요하다) */
.iq-tbl b{width:clamp(78px,6.77vw,130px);color:var(--gold-l);font-weight:500}
.iq-tbl .ask{border-bottom:1px solid var(--gold);color:var(--gold-l);letter-spacing:.02em}

/* 현장 약도 */
.iq-map{position:relative;margin-top:clamp(30px,3.65vw,70px);overflow:hidden;background:var(--bg)}
.iq-map img{display:block;width:100%;height:auto;aspect-ratio:1400/565;object-fit:cover}
.iq-map .veil{position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none}

/* 외부 지도 버튼 */
.iq-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,2.08vw,40px)}
.iq-links a{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid rgba(255,255,255,.24);font-size:12.5px;letter-spacing:.06em;transition:.35s;
}
.iq-links a:hover{background:var(--gold);border-color:var(--gold);color:#000}

/* 홍보관 1단 — 지점을 상하로 쌓는다.
   블록 내부 여백(표 30px · 버튼 40px)보다 지점 간 간격이 커야 그룹이 읽힌다 */
.iq-branch{display:grid;grid-template-columns:1fr;gap:clamp(48px,4.69vw,90px);margin-top:clamp(34px,4.17vw,80px)}
.iq-branch__n{font-family:var(--buri);font-weight:600;font-size:clamp(19px,1.77vw,34px);
  letter-spacing:-.01em;color:#fff}
.iq-branch .sig-tbl{margin-top:clamp(16px,1.56vw,30px)}
/* 표가 위 섹션들과 같은 폭이 되었으므로 라벨 폭도 통일해 값의 좌측선을 맞춘다 */

@media (max-width:900px){
  .iq-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .iq-def > div{padding-top:0}
}

/* ══════════════════════════════════════════════════════════════
   LOCATION (피그마 76:2874)
   리드는 Yacht 의 .yc-lead, "주변 인프라 + 표" 는 .sig-def__tit / .sig-tbl 재사용
   ══════════════════════════════════════════════════════════════ */

.section.lo-lead{padding-block:clamp(110px,15.83vw,304px) 0}
/* 이 페이지 리드 본문만 24px (Yacht·Concierge 는 20px) */
.lo-lead .yc-lead__txt{font-weight:400;font-size:clamp(15px,1.25vw,24px)}

/* 광역 조감도 : 그리드 폭 그대로 */
.lo-aerial{margin-top:clamp(70px,9.375vw,180px)}
.lo-aerial img{display:block;width:100%;height:auto;aspect-ratio:1400/565;object-fit:cover;background:var(--bg)}
.lo-aerial__cap{text-align:center}

/* 도착까지의 시간 : 74px 중앙, 스탯은 기존 코드 그대로 */
.section.lo-time{padding-block:clamp(110px,15.05vw,289px) 0}
.lo-tit{
  text-align:center;font-family:var(--buri);font-weight:300;font-size:clamp(26px,3.85vw,74px);
  line-height:1.2;letter-spacing:-.02em;color:#fff;
}
.lo-tit span{font-weight:600;color:var(--gold-em)}
@media (max-width:1300px){ .lo-tit{font-weight:400} }   /* 74px→50px 경계 */
.lo-time .stats{margin-top:clamp(26px,2.81vw,54px)}

/* 주변 인프라 : 260 | 740~1660 */
.section.lo-def-sec{padding-block:clamp(110px,16.67vw,320px) 0}
.lo-def{display:grid;grid-template-columns:34.3% 65.7%;align-items:start;column-gap:0}
.lo-def > div{padding-top:clamp(4px,.57vw,11px)}   /* 피그마 : 우측이 좌측 제목보다 11px 아래 */
.lo-def__txt{font-weight:400;font-size:clamp(15px,1.25vw,24px);line-height:1.8;
  color:rgba(255,255,255,.8);word-break:keep-all}
.lo-tbl{margin-top:clamp(50px,5.21vw,100px)}
.lo-tbl li{font-size:clamp(14px,1.25vw,24px)}
.lo-note{margin-top:clamp(20px,2.4vw,46px);text-align:left}

@media (max-width:900px){
  .lo-def{grid-template-columns:1fr;row-gap:clamp(24px,5vw,40px)}
  .lo-def > div{padding-top:0}
}

/* ══════════════════════════════════════════════════════════════
   VIP TOUR 예약 폼 (.rsv)
   첨부 시안의 구성(좌 라벨 / 우 입력 + 동의 표 2종 + 예·아니요 + 등록·취소)을
   사이트의 다크 톤으로 옮겼다.
   ══════════════════════════════════════════════════════════════ */

.rsv{max-width:calc(1160px + var(--gut) * 2);margin-inline:auto}
.vip-lead{padding-block:clamp(70px,7.55vw,145px) clamp(120px,18.75vw,360px)}   /* 밴드↓ 145 / 각주↓ 360 */
/* 배너(.sec7)는 푸터 영역에 그대로 붙는다 (index 와 같은 처리).
   .sec7 이 .nextp 바로 앞인 페이지는 vip-tour 뿐이라 구조로 좁혀도 안전하다. */
.sec7 + .nextp{margin-top:0}

/* 좌 라벨 / 우 입력 */
.rsv__rows{border-top:1px solid rgba(255,255,255,.22)}
.rsv__row{display:grid;grid-template-columns:clamp(120px,14.6vw,220px) 1fr;align-items:center;
  gap:clamp(12px,1.56vw,30px);padding:clamp(12px,1.15vw,22px) 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.rsv__row > label{font-size:clamp(14px,1.04vw,18px);font-weight:500;color:#fff;letter-spacing:-.01em}
.rsv__row > label b{color:#C0603F;font-weight:500}          /* 필수 표시 */
.rsv__in{min-width:0}
.rsv__in input,.rsv__in select,.rsv__in textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  padding:clamp(12px,1.04vw,18px) clamp(12px,1.04vw,20px);color:#fff;
  font-size:clamp(14px,1.04vw,18px);min-height:clamp(48px,3.85vw,64px);border-radius:0;
  transition:border-color .3s var(--e),background .3s var(--e);
}
.rsv__in textarea{min-height:clamp(160px,14.6vw,280px);line-height:1.8;resize:vertical;display:block}
.rsv__in select option{background:#090909;color:#fff}
.rsv__in input:focus,.rsv__in select:focus,.rsv__in textarea:focus{border-color:var(--gold-l);background:rgba(255,255,255,.06);outline:none}
.rsv__in ::placeholder{color:rgba(255,255,255,.34)}
/* 날짜·시간 입력의 기본 아이콘을 다크에서 보이게 */
.rsv__in input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55;cursor:pointer}

/* 라벨이 여러 줄 입력과 나란히 설 때는 위쪽 정렬 */
.rsv__row--top{align-items:start}
.rsv__row--top > label{padding-top:clamp(12px,1.04vw,18px)}
/* 글자 수 카운터 */
.rsv__count{margin-top:8px;text-align:right;font-size:var(--fs-min);color:rgba(255,255,255,.42)}
.rsv__count b{font-weight:500;color:rgba(255,255,255,.72)}
.rsv__count.is-max b{color:var(--gold-l)}
/* 보안코드 : 코드 + 새로고침 + 입력 한 줄 */
.rsv__sec{display:flex;align-items:stretch;gap:clamp(8px,.83vw,14px);flex-wrap:wrap}
.rsv__sec-code{
  display:grid;place-items:center;flex:none;min-width:clamp(96px,8.85vw,170px);
  padding-inline:clamp(12px,1.04vw,20px);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  font-family:var(--buri);font-weight:600;font-size:clamp(20px,1.77vw,34px);
  letter-spacing:.28em;text-indent:.28em;color:var(--gold-l);user-select:none;
}
.rsv__sec-new{
  flex:none;padding-inline:clamp(12px,1.04vw,18px);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  font-size:var(--fs-min);letter-spacing:.04em;color:rgba(255,255,255,.62);
  transition:border-color .3s var(--e),color .3s var(--e);
}
.rsv__sec-new:hover{border-color:var(--gold-l);color:var(--gold-l)}
.rsv__sec input{flex:1 1 clamp(140px,14vw,240px);width:auto}
/* 작성 안내 */
.rsv__notes{margin-top:clamp(22px,2.6vw,44px);padding-top:clamp(18px,1.98vw,32px);border-top:1px solid var(--line-d)}
.rsv__notes li{position:relative;padding-left:15px;font-size:clamp(12.5px,.94vw,15px);
  line-height:1.95;color:rgba(255,255,255,.5);word-break:keep-all}
.rsv__notes li::before{content:'';position:absolute;left:0;top:.85em;width:5px;height:1px;background:var(--gold-l)}

/* 동의 블록 */
.rsv__agree{margin-top:clamp(40px,4.69vw,90px)}
.rsv__agree h4{font-size:clamp(15px,1.15vw,22px);font-weight:600;color:#fff;letter-spacing:-.01em}
.rsv__agree h4 em{font-style:normal;color:var(--gold-l)}
.rsv__agree h4 em.opt{color:rgba(255,255,255,.55)}
.rsv__lead{margin-top:clamp(10px,1.04vw,20px);font-size:clamp(13px,.94vw,16px);line-height:1.8;
  color:rgba(255,255,255,.7);word-break:keep-all}
.rsv__tbl{width:100%;margin-top:clamp(16px,1.56vw,30px);border-collapse:collapse;
  font-size:clamp(12.5px,.89vw,15px);line-height:1.8;border-top:1px solid rgba(255,255,255,.22)}
.rsv__tbl th,.rsv__tbl td{padding:clamp(12px,1.04vw,20px) clamp(10px,.94vw,18px);
  border-bottom:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top;word-break:keep-all}
.rsv__tbl th{width:clamp(110px,13.5vw,230px);font-weight:500;color:#fff;
  background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.12)}
.rsv__tbl td{color:rgba(255,255,255,.78)}
.rsv__tbl td b{font-weight:600;color:#fff}
.rsv__tbl .sm{display:inline-block;margin-top:4px;font-size:max(var(--fs-min),.92em);color:rgba(255,255,255,.55)}
/* 위탁 표는 머리행이 위에 온다 */
.rsv__tbl--col th{width:auto;text-align:left;border-right:1px solid rgba(255,255,255,.12)}
.rsv__tbl--col thead th{color:var(--gold-l);font-weight:500}
.rsv__tbl--col td{border-right:1px solid rgba(255,255,255,.12)}
.rsv__tbl--col td:last-child,.rsv__tbl--col th:last-child{border-right:0}

/* 예 / 아니요 */
.rsv__ask{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,40px);
  flex-wrap:wrap;margin-top:clamp(20px,2.08vw,40px);padding:clamp(14px,1.35vw,26px) clamp(14px,1.35vw,26px);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.rsv__ask p{font-size:clamp(13.5px,1.04vw,18px);color:#fff;letter-spacing:-.01em}
.rsv__ask p em{font-style:normal;color:var(--gold-l)}
.rsv__ask p em.opt{color:rgba(255,255,255,.55)}
.rsv__radio{display:flex;gap:clamp(16px,1.56vw,30px);flex:none}
.rsv__radio input{position:absolute;opacity:0;width:1px;height:1px}
.rsv__radio label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:clamp(13.5px,1.04vw,18px);color:rgba(255,255,255,.7);transition:color .3s var(--e)}
.rsv__radio label::before{content:'';width:18px;height:18px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.4);transition:.3s var(--e)}
.rsv__radio input:checked + label{color:#fff}
.rsv__radio input:checked + label::before{border-color:var(--gold-l);border-width:5px}
.rsv__radio input:focus-visible + label::before{outline:2px solid var(--gold-l);outline-offset:3px}

/* 등록 / 취소 */
.rsv__btns{display:flex;justify-content:center;gap:clamp(10px,1.04vw,20px);
  margin-top:clamp(36px,4.17vw,80px);flex-wrap:wrap}
/* 단일 CTA — 폭을 넓게 잡아 전환 지점을 분명히 한다 */
.rsv__submit{min-width:clamp(240px,29.2vw,560px);padding:clamp(16px,1.46vw,28px) 30px;
  font-size:clamp(15px,1.15vw,22px);font-weight:600;letter-spacing:.02em;cursor:pointer;
  background:var(--gold-em);color:#fff;border:1px solid var(--gold-em);transition:.35s var(--e)}
.rsv__submit:hover{background:var(--gold-l);border-color:var(--gold-l);color:#000}
.rsv__submit:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.rsv__foot{margin-top:clamp(16px,1.56vw,30px);text-align:center;
  font-size:clamp(12px,.83vw,14px);color:rgba(255,255,255,.5);word-break:keep-all}
.rsv .fmsg{margin-top:14px;text-align:center}
.rsv .err{margin-top:6px}

@media (max-width:760px){
  .rsv__row{grid-template-columns:1fr;align-items:stretch;gap:8px}
  .rsv__ask{flex-direction:column;align-items:flex-start}
  /* 위탁 표(5열)는 좁은 화면에서 옆으로 밀지 않고 접는다.
     overflow-x:auto + nowrap 은 가로 스크롤을 만들어 법정 고지를 놓치게 한다.
     thead 의 항목명을 각 셀의 data-th 로 옮겨 위 필수동의 표와 같은
     '라벨 | 값' 2열 구조로 세운다. */
  .rsv__tbl--col{display:block;overflow:visible;white-space:normal}
  .rsv__tbl--col thead,.rsv__tbl--col thead tr,.rsv__tbl--col tbody,.rsv__tbl--col tr{display:block}
  .rsv__tbl--col thead th{display:none}
  .rsv__tbl--col thead th:first-child{                 /* 표 제목은 머리 띠로 남긴다 */
    display:block;width:auto;border-right:0;
  }
  .rsv__tbl--col td{
    display:grid;grid-template-columns:clamp(88px,25vw,124px) 1fr;
    padding:0;border-right:0;
  }
  .rsv__tbl--col td:empty{display:none}               /* 제목열의 빈 칸 */
  .rsv__tbl--col td::before{
    content:attr(data-th);
    padding:clamp(12px,3vw,16px) 10px;color:#fff;font-weight:500;
    background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.12);
  }
  .rsv__tbl--col td > span{display:block;padding:clamp(12px,3vw,16px) 12px}
  .rsv__submit{width:100%;min-width:0}
}


/* ══ LENIS (부드러운 스크롤) ══ */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}