/* 한결, 돌아오는 곳 — v3 (2026-10-25 · 빈 파일에서 새로 · 레퍼 ERA 는 재서 뼈대만, 코드 · 글꼴 · 색 · 사진은 우리 것)
   설계: docs/한결_v3_메인_전환지도_2026-10-25.md
   판(.pn)마다 진행값 --p(0 → 1) 하나로 전환을 그린다.
     폰 = 판에 들어오면 한 번(CSS 전환) · PC = 스크롤에 맞춰(ScrollTrigger 가 --p 를 씀)
   상시 움직임(.live)은 보이는 판(.is-live)에서만 돈다 · 움직임 줄이기 설정이면 모두 멈춘 마지막 장면 */

@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --q { syntax: '<number>'; inherits: true; initial-value: 0; }

:root{
  --ink:#1f1d1a; --paper:#f0eae2; --mist:#e2d9cc; --gold:#ba8f71; --gold-d:#8a6247; --night:#0e1726; --cream:#efe8dd;
  --line:rgba(31,29,26,.18);
  --serif:'MaruBuri','Noto Serif KR',serif;
  --sans:'Pretendard Variable','Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --en:'Archivo','Pretendard Variable','Pretendard',sans-serif; --it:'Instrument Serif','MaruBuri',serif; --script:'Italianno',cursive;
  --pad:clamp(20px,5vw,72px); --ease:cubic-bezier(.2,.8,.2,1);
  --sh:100vh; --head:64px;
}
@supports (height:100svh){ :root{ --sh:100svh; } }   /* 폰: 주소창이 들락날락해도 판 높이가 안 바뀜 */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;background:var(--night)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2{font-weight:400}

.tone-paper{background:var(--paper);color:var(--ink)}
.tone-mist{background:var(--mist);color:var(--ink)}
.tone-ink{background:#1b1a18;color:var(--cream)}
.tone-night{background:var(--night);color:var(--cream)}
.tone-gold{background:var(--gold);color:#fff9f0}
.lab{font-family:var(--en);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.note{font-size:11.5px;line-height:1.6;opacity:.66}

/* Lenis(PC 부드러운 휠 · MIT) 가 붙일 때 필요한 기본값 */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* 폰 걸림(js initSnap)이 켜지면 세로 끌기는 우리 코드가 맡는다 — 입력칸 · 두 손가락 확대는 그대로 */
html.is-snap,html.is-snap body{touch-action:pinch-zoom;overscroll-behavior:none}
html.is-snap input,html.is-snap textarea,html.is-snap select{touch-action:manipulation}

/* 판 */
.pn{position:relative;overflow:hidden;min-height:var(--sh);--p:0;transition:--p 1.25s var(--ease)}
.pn.is-in{--p:1}
html.is-pc .pn{transition:none}                       /* PC 는 스크롤이 --p 를 쥔다 */
.pn:not(.is-live) .live,.pn:not(.is-live) .live::after{animation-play-state:paused}

/* 고정 띠 · 머리글 · 메뉴 */
.badge{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;min-height:26px;padding:0 10px;border-radius:4px;background:rgba(14,23,38,.82);color:#efe8dd;font-size:11px;letter-spacing:.02em;pointer-events:none}
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:6px;height:var(--head);padding:0 max(12px,calc(var(--pad) - 8px));color:var(--cream);transition:color .35s}
.top::before{content:"";position:absolute;inset:0 0 -24px;background:linear-gradient(180deg,rgba(14,23,38,.42),rgba(14,23,38,0));opacity:1;transition:opacity .35s;pointer-events:none}
body[data-head="light"] .top{color:var(--ink)}
body[data-head="light"] .top::before{opacity:0}
.top>*{position:relative}
.top__logo{font-family:var(--en);font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.2em;display:flex;align-items:center;min-height:44px;padding:0 8px 0 0;margin-right:auto}
.top__nav{display:none}
.top__sound{display:flex;align-items:center;gap:2px;min-width:44px;min-height:44px;justify-content:center}
.top__sound i{width:2px;height:6px;background:currentColor;border-radius:1px}
.top__sound[aria-pressed="true"] i{animation:eq .9s ease-in-out infinite alternate}
.top__sound i:nth-child(2){animation-delay:-.3s}.top__sound i:nth-child(3){animation-delay:-.6s}
@keyframes eq{from{height:4px}to{height:13px}}
.top__sound span{display:none;margin-left:6px;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:10px;letter-spacing:.14em}
.top__cta{display:flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid currentColor;border-radius:999px;font-size:12.5px;white-space:nowrap}
.top__menu{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:44px;min-height:44px;align-items:center}
.top__menu i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s}
.top__menu[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.top__menu[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:88px var(--pad) 72px;background:var(--night);color:var(--cream)}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:baseline;gap:14px;min-height:56px;padding:6px 0;font-family:var(--serif);font-size:26px;border-bottom:1px solid rgba(239,232,221,.14)}
.menu small{font-family:var(--en);font-stretch:125%;font-weight:700;font-size:11px;letter-spacing:.14em;opacity:.6}
body.menu-open{overflow:hidden}

/* 1. 첫 화면 — 새벽 → 아침 */
.hero{color:#fff9f0;background:var(--night)}
.hero__pic{position:absolute;inset:0;animation:kb 20s ease-in-out infinite alternate;transform-origin:50% 60%}
.hero__pic img{width:100%;height:100%;object-fit:cover}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero__cool,.hero__warm{position:absolute;inset:0;pointer-events:none}
.hero__cool{background:linear-gradient(180deg,rgba(14,23,38,.72),rgba(34,58,104,.34) 46%,rgba(14,23,38,.74));opacity:calc(1 - var(--p))}
.hero__warm{background:linear-gradient(180deg,rgba(14,23,38,.5),rgba(214,150,96,.14) 48%,rgba(14,23,38,.62));opacity:var(--p)}
.hero__flow{position:absolute;inset:-10% -60%;background:linear-gradient(104deg,transparent 42%,rgba(255,232,200,.13) 50%,transparent 58%);animation:flow 11s linear infinite;pointer-events:none}
@keyframes flow{from{transform:translateX(-26%)}to{transform:translateX(26%)}}
.hero__title{position:absolute;left:0;right:0;top:calc(var(--sh)*.2);text-align:center;padding:0 16px}
.hero__title h1{font-family:var(--it);font-size:clamp(50px,15.2vw,168px);line-height:.92;letter-spacing:.005em}
.hero__title h1 span{display:block;transform:translateY(calc((1 - var(--p))*34px));opacity:calc(.25 + .75*var(--p))}
.hero__title h1 span+span{transition-delay:.08s}
.hero__script{display:block;margin-top:-.32em;font-family:var(--script);font-style:normal;font-size:clamp(38px,11vw,104px);line-height:1;color:#e7c39a;opacity:var(--p)}
.hero__sub{margin-top:10px;font-family:var(--serif);font-size:clamp(17px,4.6vw,26px);letter-spacing:.04em;opacity:calc(.3 + .7*var(--p))}
.hero__note{position:absolute;left:16px;right:16px;bottom:calc(98px + env(safe-area-inset-bottom));text-align:center;font-size:11px;opacity:.72}
.hero__next{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:10.5px;letter-spacing:.14em;white-space:nowrap}
.hero__next span{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

/* 2. 사업개요 — 창이 하나씩 켜지듯 */
.ov{display:flex;align-items:center;padding:calc(var(--head) + 24px) var(--pad) 72px}
.ov__win{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:3px;pointer-events:none}   /* 칸 사이 틈으로 미색 면이 비친다 = 건물 창틀 */
.ov__win i{--s:calc(var(--i) / 12 * .5);--t:clamp(0,(var(--p) - var(--s)) / .38,1);position:relative;background:var(--night);opacity:calc(1 - var(--t))}
.ov__win i::after{content:"";position:absolute;inset:22% 26%;border-radius:2px;background:linear-gradient(180deg,#f6d6a6,#c99467);opacity:calc(var(--t) * (1 - var(--t)) * 3.6)}
.ov__body{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto}
.ov__h{margin:12px 0 26px;font-family:var(--serif);font-size:clamp(30px,8vw,66px);line-height:1.28}
.ov__facts{list-style:none;display:grid;gap:4px}
.ov__facts li{--u:clamp(0,(var(--p) - .5 - var(--k) * .1) / .3,1);position:relative;display:grid;gap:1px;padding:15px 0 13px;border-top:1px solid var(--line);opacity:var(--u);transform:translateY(calc((1 - var(--u)) * 22px))}
.ov__k{font-size:12px;letter-spacing:.08em;color:var(--gold-d)}
.ov__facts b{font-family:var(--serif);font-weight:400;font-size:clamp(23px,6.2vw,34px);line-height:1.3}
.ov__facts span:not(.ov__k){font-size:13.5px;opacity:.78}
.ov__facts i{position:absolute;left:0;top:-1px;width:42%;height:1px;background:var(--gold);transform-origin:left;animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleX(.5)}}
.ov .note{margin-top:16px}

/* 3. 조감도 — 해가 떠오르듯 */
.jg{background:#1b1a18}
.jg__fig{position:absolute;inset:0;overflow:hidden}
.jg__fig img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - .12 * var(--p) - .05 * var(--q)))}
.jg__veil{position:absolute;inset:0;background:linear-gradient(0deg,#e8ad78 0%,#7d5d72 28%,#26304e 58%,#0e1726 82%);transform-origin:50% 0;transform:scaleY(calc(1 - var(--p)))}
.jg__band{position:absolute;inset:-10% -60%;background:linear-gradient(98deg,transparent 46%,rgba(0,0,0,.16) 50%,transparent 54%);animation:flow 16s linear infinite}
.jg::after{content:"";position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.78));pointer-events:none}
.jg__cap{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(64px + env(safe-area-inset-bottom));color:#fff9f0;opacity:clamp(0,(var(--p) - .5) * 2.4,1);transform:translateY(calc((1 - var(--p)) * 20px))}
.jg__big{margin:8px 0 10px;font-family:var(--serif);font-size:clamp(34px,10vw,72px);line-height:1.15}
.jg__big span{font-size:.5em;opacity:.85}

/* 4. 입지 · 하루 동선 — 노선이 그려지듯 */
.route{position:relative;background:var(--paper);--rh:calc(var(--sh) * .36)}
.route__stage{position:relative}
.route__head{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;justify-content:flex-end;height:var(--rh);padding:calc(var(--head) + 4px) var(--pad) 14px;background:var(--paper)}
.route__h{margin:6px 0 10px;font-family:var(--serif);font-size:clamp(22px,6vw,44px);line-height:1.3}
.route__line{width:100%;height:auto;overflow:visible}
.route__line path{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.route__bg{stroke:rgba(31,29,26,.14)}
.route__draw{stroke:var(--gold);stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--q));transition:stroke-dashoffset 1.6s var(--ease)}
.route.is-in{--q:1}
html.is-pc .route__draw{transition:none}
.route__st circle{fill:var(--paper);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:fill .4s,transform .4s}
.route__st circle.is-home{stroke:var(--gold-d)}
.route[data-at="0"] .route__st circle:nth-child(1),.route[data-at="1"] .route__st circle:nth-child(2),.route[data-at="2"] .route__st circle:nth-child(3),.route[data-at="3"] .route__st circle:nth-child(4){fill:var(--gold);transform:scale(1.35);animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.55}}
.route__names{display:flex;justify-content:space-between;margin-top:4px;font-size:11.5px;letter-spacing:.04em}
.route__names span{width:25%;text-align:center}.route__names span:first-child{text-align:left}.route__names span:last-child{text-align:right}
.route__names .is-home{font-weight:700;color:var(--gold-d)}
.scene{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:calc(var(--rh) + 10px) var(--pad) 84px;background:var(--paper)}
.scene img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.scene__t{margin-top:6px;font-family:var(--serif);font-size:clamp(20px,5.6vw,30px);line-height:1.35;opacity:clamp(0,(var(--p) - .35) * 2,1)}
.scene__t small{display:block;margin-bottom:4px;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:10.5px;letter-spacing:.14em;color:var(--gold-d)}
.scene__d{font-size:14px;opacity:calc(clamp(0,(var(--p) - .5) * 2,1) * .8)}
.route__note{position:relative;z-index:2;height:78px;margin-top:-78px;padding:0 var(--pad);font-size:11px}   /* 폰: 마지막 장면 아래 여백 안으로 — 따로 자리를 만들면 어느 멈출 자리에서도 다 안 보였다 */

/* 5. 전경 — 해 지는 온도(금색 전면) */
.vista__pic{position:absolute;inset:0 0 30% 0;overflow:hidden}
.vista__pic picture{display:block;width:100%;height:100%;animation:pan 24s ease-in-out infinite alternate}
.vista__pic img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.1 - .1 * var(--p)))}
@keyframes pan{from{transform:translateX(-1.6%) scale(1.04)}to{transform:translateX(1.6%) scale(1.04)}}
.vista__dusk{position:absolute;inset:0;background:linear-gradient(180deg,rgba(242,170,104,.08),rgba(214,122,72,.3) 55%,rgba(186,143,113,.78));opacity:var(--p)}
.vista__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(58px + env(safe-area-inset-bottom))}
.vista__en{font-family:var(--en);font-stretch:125%;font-weight:700;font-size:clamp(24px,8.2vw,64px);line-height:1;letter-spacing:.02em;transform:translateY(calc((1 - var(--p)) * 26px))}
.vista__ko{margin:10px 0 6px;font-family:var(--serif);font-size:clamp(16px,4.4vw,24px);opacity:clamp(0,(var(--p) - .4) * 2,1)}

/* 6. 필름 — 블라인드가 올라가듯 */
.film{background:#1b1a18}
.film__frame{position:absolute;inset:0;overflow:hidden;background:#2a2622}
.film__v{width:100%;height:100%;object-fit:cover}
.film__blind{position:absolute;inset:0;display:grid;grid-template-rows:repeat(10,1fr)}
.film__blind i{background:linear-gradient(180deg,#eae2d6,#d9cfbf);transform-origin:50% 0;transform:scaleY(calc(1 - clamp(0,(var(--p) - var(--j) * .045) / .5,1)));box-shadow:0 1px 0 rgba(0,0,0,.08)}
.film::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.72));pointer-events:none}
.film__cap{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(64px + env(safe-area-inset-bottom));color:#fff9f0;opacity:clamp(0,(var(--p) - .55) * 2.4,1)}
.film__t{margin:6px 0 6px;font-family:var(--serif);font-size:clamp(24px,6.6vw,40px);line-height:1.3}

/* 7. 세대 — 문이 열리듯 */
.units{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:calc(var(--head) + 16px) var(--pad) 72px}
.units__h{margin:8px 0 14px;font-family:var(--serif);font-size:clamp(28px,7.6vw,56px);line-height:1.25}
.units__h span{display:block;font-size:.48em;opacity:.78}
.units__tabs{display:flex;gap:8px}
.units__tabs button{min-width:64px;min-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:12px;letter-spacing:.08em;transition:background .3s,color .3s}
.units__tabs button[aria-selected="true"]{background:var(--ink);color:var(--mist)}
.units__door{position:relative;overflow:hidden;width:100%;aspect-ratio:1600/1089;background:#fbf8f3;border-radius:3px}
.units__plan{width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.units__plan.is-swap{opacity:0}
.units__l,.units__r{position:absolute;top:0;bottom:0;width:50.4%;background:linear-gradient(90deg,#cbbba3,#d9ccb8 70%,#cbbba3)}
.units__l{left:0;transform:translateX(calc(var(--p) * -101%))}
.units__r{right:0;transform:translateX(calc(var(--p) * 101%))}
.units__l::after,.units__r::after{content:"";position:absolute;top:44%;width:3px;height:12%;border-radius:2px;background:var(--gold-d)}
.units__l::after{right:10px}.units__r::after{left:10px}

/* 8. 저녁 귀가 — 불이 켜지듯(남색 전면) */
.eve{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:calc(var(--head) + 16px) 0 72px}
.eve__pic{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9}
.eve__pic img{width:100%;height:100%;object-fit:cover}
.eve__dark{position:absolute;inset:0;background:#05080f;opacity:calc((1 - var(--p)) * .78)}
.eve__glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 62%,rgba(255,196,120,.32),rgba(255,196,120,0) 70%);opacity:var(--p);animation:glow 3.6s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.04);filter:none}}
.eve__cap{padding:0 var(--pad)}
.eve__t{margin:10px 0 8px;font-family:var(--serif);font-size:clamp(30px,8.4vw,60px);line-height:1.25;opacity:clamp(0,(var(--p) - .3) * 2,1);transform:translateY(calc((1 - var(--p)) * 18px))}
.eve__d{font-size:15px;opacity:calc(clamp(0,(var(--p) - .55) * 2.2,1) * .78)}

/* 9. 머무는 공간 — 빛이 드는 */
.space{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:calc(var(--head) + 12px) var(--pad) 70px}
.space__h{position:relative;font-family:var(--serif);font-size:clamp(30px,8.6vw,62px);line-height:1.2}
.space__h em{font-style:normal}
.space__script{display:inline-block;margin-left:.18em;font-family:var(--script);font-size:1.25em;line-height:.8;color:var(--gold);opacity:.9}
.space__d{font-size:14.5px;opacity:.8}
.space__col{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;grid-template-rows:1fr 1fr;gap:8px;height:calc(var(--sh) * .46);overflow:hidden}
.space__col img{--u:clamp(0,(var(--p) - var(--d)) / .32,1);width:100%;height:100%;object-fit:cover;border-radius:2px;opacity:var(--u);transform:translateY(calc((1 - var(--u)) * 16px))}
.space__col .s0{--d:.05;grid-row:span 2}
.space__col .s1{--d:.2}
.space__col .s2{--d:.35;display:none}
.space__col .s3{--d:.5}
.space__ray{position:absolute;inset:-30% -80%;background:linear-gradient(118deg,transparent 45%,rgba(255,243,222,.42) 50%,transparent 55%);transform:translateX(calc(-46% + var(--p) * 60%));pointer-events:none}
.space__ray::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 47%,rgba(255,243,222,.16) 50%,transparent 53%);animation:flow 13s linear infinite}

/* 10. 건축 — 한 획(먹 전면) */
.archi{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:calc(var(--head) + 16px) var(--pad) 74px}
.archi__word{position:absolute;left:0;top:14%;white-space:nowrap;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:26vw;line-height:1;color:var(--cream);opacity:.06;pointer-events:none;animation:mq 46s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.archi__fig{--o:clamp(0,(var(--p) - .42) / .58,1);position:relative;width:min(70vw,360px);aspect-ratio:781/1400;overflow:hidden;clip-path:inset(calc(50% - var(--o) * 50%) 0 calc(50% - var(--o) * 50%) 0)}
.archi__fig img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - .14 * var(--o)))}
.archi__stroke{position:absolute;left:10%;right:10%;top:calc(50% - 30px);height:2px;background:var(--gold);transform-origin:left;transform:scaleX(clamp(0,var(--p) * 2.4,1));opacity:calc(1 - clamp(0,(var(--p) - .6) * 3,1))}
.archi__cap{position:relative;text-align:center;opacity:clamp(0,(var(--p) - .62) * 2.6,1)}
.archi__t{font-family:var(--serif);font-size:clamp(26px,7vw,44px);line-height:1.3}
.archi__d{margin:6px 0;font-size:14px;opacity:.8}

/* 11. 현장 위치 — 직선거리 선이 그어짐 */
.site{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:calc(var(--head) + 12px) var(--pad) 70px}
.site__h{margin:6px 0 2px;font-family:var(--serif);font-size:clamp(28px,7.6vw,52px);line-height:1.22}
.site__h span{display:block;font-size:.52em;opacity:.78}
.site__map{position:relative;width:100%;max-width:520px;aspect-ratio:1;align-self:center;overflow:hidden;border-radius:3px}
.site__map img{width:100%;height:100%;object-fit:cover}
.site__path{position:absolute;inset:0;width:100%;height:100%}
.site__dots{fill:none;stroke:#c2552f;stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p))}
.site__pin{position:absolute;left:68%;top:28.8%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#c2552f;opacity:clamp(0,(var(--p) - .8) * 5,1)}
.site__pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #c2552f;animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3);opacity:0}}
.site__d{font-size:13.5px}

/* 12. 옥상정원 — 돌아오는 문(끝 확대) */
.garden{background:var(--paper)}
.garden__win{position:absolute;inset:0;overflow:hidden;transform:scale(calc(.5 + .5 * var(--p)));border-radius:calc((1 - var(--p)) * 46vw) calc((1 - var(--p)) * 46vw) 0 0}
.garden__win img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - .25 * var(--p)))}
.garden::after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.7));opacity:var(--p);pointer-events:none}
.garden__cap{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:calc(64px + env(safe-area-inset-bottom));color:#fff9f0;opacity:clamp(0,(var(--p) - .6) * 2.6,1)}
.garden__t{margin:8px 0;font-family:var(--serif);font-size:clamp(28px,7.8vw,52px);line-height:1.25}

/* 13. 관심고객 등록 · 바닥글(남색) */
.reg{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:calc(var(--head) + 12px) var(--pad) 76px}
.reg__h{font-family:var(--serif);font-size:clamp(30px,8vw,56px);line-height:1.2;transform:translateY(calc((1 - var(--p)) * 20px));opacity:calc(.3 + .7 * var(--p))}
.reg__d{font-size:14px;opacity:.78}
.reg__form{display:grid;gap:12px;margin-top:10px;max-width:520px}
.reg__form label{display:grid;gap:4px;font-size:12.5px;opacity:.92}
.reg__form input[type=text],.reg__form input[type=tel]{min-height:46px;padding:0 14px;border:1px solid rgba(239,232,221,.3);border-radius:3px;background:rgba(255,255,255,.06);color:var(--cream);font:inherit;font-size:16px}
.reg__form input::placeholder{color:rgba(239,232,221,.4)}
.reg__chk{display:flex!important;align-items:center;gap:10px;min-height:32px}
.reg__chk input{width:20px;height:20px;flex:none;accent-color:var(--gold)}
.reg__form button{min-height:50px;margin-top:6px;border-radius:999px;background:var(--cream);color:var(--night);font-size:15px;font-weight:600}
.reg__msg{font-size:12px;opacity:.6}
.reg__form.is-sent .reg__msg{opacity:1;color:#e7c39a}
.foot{padding:40px var(--pad) calc(64px + env(safe-area-inset-bottom));font-size:12.5px;line-height:1.75}
.foot__logo{font-family:var(--serif);font-size:26px;line-height:1.2}
.foot__logo small{display:block;font-family:var(--en);font-stretch:125%;font-weight:700;font-size:10px;letter-spacing:.2em;opacity:.7}
.foot__biz{margin:16px 0 12px;opacity:.82}
.foot__legal{list-style:none;display:grid;gap:4px;opacity:.62;font-size:11.5px}
.foot__copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;font-size:11px;opacity:.75}
.foot__top{display:flex;align-items:center;min-height:32px;padding:0 4px;border-bottom:1px solid currentColor}

/* PC(761px 이상) */
@media (min-width:761px){
  :root{--head:76px}
  .top{gap:22px}
  .top__logo{font-size:14px}
  .top__nav{display:flex;gap:26px;font-size:13.5px;margin-right:6px}
  .top__nav a{display:flex;align-items:center;min-height:44px;opacity:.86}
  .top__nav a:hover{opacity:1}
  .top__sound span{display:inline}
  .top__menu{display:none}
  .badge{left:22px;bottom:20px}
  .hero__title{top:calc(var(--sh)*.24)}
  .hero__note{bottom:96px}
  .ov{min-height:100vh}
  .ov__win{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
  .ov__facts{grid-template-columns:repeat(3,1fr);gap:34px}
  .jg{display:grid;grid-template-columns:44vw 1fr;height:100vh}
  .jg__fig{position:relative;inset:auto;height:100vh}
  .jg::after{display:none}
  .jg__cap{position:relative;left:auto;right:auto;bottom:auto;align-self:center;padding:0 8vw 0 6vw}
  .jg__big{font-size:clamp(56px,6vw,96px)}
  .route{--rh:0px}
  .route__stage{display:grid;grid-template-columns:30vw 1fr;grid-template-rows:1fr auto;align-items:center;height:100vh;overflow:hidden}
  .route__head{position:relative;top:auto;z-index:5;align-self:stretch;height:auto;justify-content:center;padding:0 3vw 0 var(--pad);background:var(--paper)}
  .route__track{display:flex;gap:3vw;width:max-content;padding-right:8vw;transform:translateX(var(--x,0px));will-change:transform}
  .scene{width:38vw;min-height:0;padding:0;justify-content:flex-start;background:none}
  .route__note{grid-column:1 / -1;height:auto;margin:0;padding:0 var(--pad) 26px;background:none}
  .vista__pic{inset:0 36% 0 0}
  .vista__cap{left:auto;right:0;bottom:0;top:0;width:36%;display:flex;flex-direction:column;justify-content:center;padding:0 4vw}
  .film__frame{left:50%;right:auto;top:9vh;bottom:9vh;width:calc(82vh * 9 / 16);transform:translateX(-50%)}
  .film::after{display:none}
  .film__cap{left:auto;right:8vw;bottom:auto;top:50%;width:26vw;transform:translateY(-50%)}
  .units{display:grid;grid-template-columns:34vw 1fr;align-items:center;gap:4vw;min-height:100vh}
  .units__note{grid-column:2}
  .eve{display:grid;grid-template-columns:30vw 1fr;align-items:center;gap:4vw;min-height:100vh;padding-left:var(--pad)}
  .eve__pic{order:2;aspect-ratio:16/9}
  .eve__cap{padding:0}
  .space{display:grid;grid-template-columns:32vw 1fr;align-items:center;gap:4vw;min-height:100vh}
  .space__col{height:72vh;grid-template-columns:.8fr 1.1fr .9fr;grid-template-rows:1fr 1fr}
  .space__col .s0{grid-row:span 2}
  .space__col .s2{display:block}
  .space__col .s3{grid-column:3;grid-row:span 2}
  .space__note{grid-column:2}
  .archi{min-height:100vh}
  .archi__fig{width:min(28vw,420px)}
  .archi__word{font-size:22vw}
  .site{display:grid;grid-template-columns:1fr 44vw;align-items:center;gap:4vw;min-height:100vh}
  .site__map{grid-row:span 4;grid-column:2;max-width:none}
  .garden__win{border-radius:calc((1 - var(--p)) * 26vw) calc((1 - var(--p)) * 26vw) 0 0}
  .garden__cap{max-width:560px}
  .reg{display:grid;grid-template-columns:1fr 1fr;column-gap:6vw;align-content:center;min-height:100vh}
  .reg>.lab,.reg__h,.reg__d{grid-column:1}
  .reg__form{grid-column:2;grid-row:1 / span 4;align-self:center}
}

@media (prefers-reduced-motion:reduce){
  .pn,.route{--p:1;--q:1;transition:none}
  .live,.live::after,.hero__next span,.top__sound i{animation:none!important}
}