.progress { position:fixed; top:0; left:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); z-index:100;
  background:#111; }

.bg-blue { background:#f2f2f0; } .bg-yellow { background:#ecebe6; }
.bg-green { background:#f5f5f3; } .bg-pink { background:#efeeea; }
.bg-orange { background:#f0efeb; } .bg-sky { background:#f5f5f3; }

.xhero { position:relative; min-height:min(92vh,900px); display:grid; align-items:end; overflow:hidden; color:#fff; isolation:isolate; }
.xhero__bg { position:absolute; inset:-8% 0 0 0; z-index:-2; }
.xhero__bg img { width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:kenburns 18s var(--ease-c) infinite alternate; }
@keyframes kenburns { to { transform:scale(1.18) translate(-2%,-2%); } }
.xhero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0000 20%,#000a 70%,#000d 100%); }
.xhero__inner { padding-block:120px 64px; display:grid; gap:22px; }
.xhero h1 { font-size:clamp(2.6rem,1.4rem + 5.2vw,6.2rem); line-height:1.02; font-weight:500; letter-spacing:-.035em; max-width:13ch; }
html[lang="ko"] .xhero h1 { font-weight:600; letter-spacing:-.03em; line-height:1.12; max-width:15ch; }
.xhero p { max-width:52ch; color:#fffc; font-size:clamp(1.0625rem,.95rem + .4vw,1.3rem); line-height:1.6; }
.xhero .btn--primary { background:#fff; color:#000; } .xhero .btn--primary:hover { background:#e8e8e8; }
.xhero .btn--ghost { color:#fff; border-color:#fff6; } .xhero .btn--ghost:hover { background:#fff1; }
.xhero .badge { background:#fff2; color:#fff; border-color:#fff4; backdrop-filter:blur(10px); }
.xhero .badge__dot { background:#fff; box-shadow:0 0 0 0 #fff; animation:ping 2s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 10px #fff0; } 100% { box-shadow:0 0 0 0 #fff0; } }

.rot { display:inline-block; position:relative; height:1.3em; vertical-align:bottom; overflow:hidden; transition:width .6s var(--ease-out-expo); padding-bottom:.08em; }
.rot span { position:absolute; left:0; top:0; line-height:1.3; transform:translateY(120%); opacity:0; transition:transform .7s var(--ease-out-expo), opacity .5s; white-space:nowrap;
  color:#fff; text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.14em; }
.rot span.on { transform:none; opacity:1; } .rot span.out { transform:translateY(-120%); opacity:0; }

.floaters { position:absolute; inset:0; pointer-events:none; z-index:0; }
.glass { position:absolute; background:#ffffffe6; color:#000; border-radius:18px; padding:14px 16px; box-shadow:0 20px 50px -20px #0008; backdrop-filter:blur(10px);
  font-size:.8125rem; line-height:1.35; transition:transform .25s linear; animation:bob 6s ease-in-out infinite; }
.glass b { display:block; font-size:1.4rem; letter-spacing:-.02em; font-weight:600; }
.glass:nth-child(2) { animation-delay:-2s; } .glass:nth-child(3) { animation-delay:-4s; }
@keyframes bob { 50% { translate:0 -10px; } }
@media (max-width:899px){ .floaters { display:none; } }

.statement { font-size:clamp(1.8rem,1.1rem + 2.8vw,3.6rem); line-height:1.25; font-weight:500; letter-spacing:-.025em; }
html[lang="ko"] .statement { font-weight:600; line-height:1.4; }
.statement .w { opacity:.14; transition:opacity .25s linear; }
.statement .w.lit { opacity:1; }
.statement em { font-style:normal; text-decoration:underline; text-decoration-thickness:.05em; text-underline-offset:.16em; }

.story { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); }
.story__media { position:sticky; top:calc(var(--header-h) + 24px); height:calc(100vh - var(--header-h) - 48px); max-height:720px; border-radius:var(--radius-3xl); overflow:hidden; background:#000; }
.story__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .8s var(--ease-c), transform 1.4s var(--ease-out-expo); }
.story__media img.on { opacity:1; transform:none; }
.story__tag { position:absolute; left:18px; top:18px; z-index:2; background:#fff; border-radius:999px; padding:8px 14px; font-size:.8125rem; font-weight:600; }
.story__steps { display:grid; }
.story__step { min-height:72vh; display:flex; flex-direction:column; justify-content:center; gap:14px; opacity:.28; transition:opacity .5s; }
.story__step.on { opacity:1; }
.story__time { font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.08em; color:var(--fg-44); }
@media (max-width:899px){
  .story { grid-template-columns:1fr; }
  .story__media { display:none; }
  .story__step { min-height:auto; opacity:1; padding-block:28px; border-top:1px solid var(--fg-12); }
  .story__step img.m { display:block; border-radius:var(--radius-lg); aspect-ratio:16/10; object-fit:cover; width:100%; }
}
.story__step img.m { display:none; }

.bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:14px; }
.b { border-radius:var(--radius-3xl); overflow:hidden; position:relative; padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:190px; }
.b--photo { padding:0; color:#fff; }
.b--photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out-expo); }
.b--photo:hover img { transform:scale(1.06); }
.b--photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0000 45%,#000b); }
.b--photo .b__txt { position:relative; z-index:1; margin-top:auto; padding:22px; }
.b__n { font-size:clamp(2.4rem,1.6rem + 2.6vw,4.2rem); line-height:1; font-weight:500; letter-spacing:-.04em; }
.b__l { font-size:.9375rem; color:var(--fg-60); }
.b--dark { background:#000; color:#fff; } .b--dark .b__l { color:#fff9; }
.s2 { grid-column:span 2; } .s3 { grid-column:span 3; } .s4 { grid-column:span 4; } .r2 { grid-row:span 2; }
@media (max-width:899px){ .bento { grid-template-columns:repeat(2,minmax(0,1fr)); } .s2,.s3,.s4 { grid-column:span 2; } .s2.half { grid-column:span 1; } .r2 { grid-row:span 1; min-height:320px; } }

.hs { position:relative; }
.hs__track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px var(--pad-x) 24px; scrollbar-width:none; cursor:grab; }
.hs__track::-webkit-scrollbar { display:none; }
.hs__track.drag { cursor:grabbing; scroll-snap-type:none; }
.hs__item { flex:0 0 clamp(260px,34vw,460px); scroll-snap-align:start; }
.hs__ph { aspect-ratio:4/5; border-radius:var(--radius-3xl); overflow:hidden; background:var(--solid-4); }
.hs__ph img { width:100%; height:100%; object-fit:cover; pointer-events:none; transition:transform 1s var(--ease-out-expo); }
.hs__item:hover .hs__ph img { transform:scale(1.05); }
.hs__cap { padding:14px 4px 0; display:grid; gap:2px; }
.hs__nav { display:flex; gap:8px; }
.hs__nav button { width:44px; height:44px; border-radius:999px; border:1px solid var(--fg-12); display:grid; place-items:center; transition:background .2s; }
.hs__nav button:hover { background:var(--fg-4); }
.hs__bar { height:2px; background:var(--fg-12); margin:0 var(--pad-x); border-radius:2px; overflow:hidden; }
.hs__bar i { display:block; height:100%; width:30%; background:#000; transform-origin:0; transition:transform .1s linear; }

.pmq { overflow:hidden; display:grid; gap:14px; }
.pmq__row { display:flex; gap:14px; width:max-content; animation:marquee 60s linear infinite; }
.pmq__row.rev { animation-direction:reverse; animation-duration:70s; }
.pmq__row img { width:auto; height:clamp(140px,16vw,220px); aspect-ratio:4/3; object-fit:cover; border-radius:18px; }
.pmq:hover .pmq__row { animation-play-state:paused; }

.cmp { border-radius:var(--radius-3xl); background:#fff; border:1px solid var(--fg-12); overflow:hidden; }
.cmp__sw { display:inline-flex; padding:4px; border-radius:999px; background:var(--fg-4); margin:24px; position:relative; }
.cmp__sw button { position:relative; z-index:1; padding:10px 18px; border-radius:999px; font-size:.875rem; font-weight:500; transition:color .3s; }
.cmp__sw button[aria-pressed="true"] { color:#fff; }
.cmp__sw .knob { position:absolute; top:4px; bottom:4px; left:4px; border-radius:999px; background:#000; transition:transform .45s var(--ease-out-expo), width .45s var(--ease-out-expo); }
.cmp__rows { display:grid; }
.cmp__row { display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:16px; padding:18px 24px; border-top:1px solid var(--fg-12); align-items:center; }
.cmp__v { font-size:1.125rem; font-weight:500; transition:opacity .3s, transform .45s var(--ease-out-expo); }
.cmp__v.swap { opacity:0; transform:translateY(8px); }
.cmp[data-mode="glf"] .cmp__v { color:var(--ok); }
.cmp[data-mode="apt"] .cmp__v { color:var(--no); }

.mask[data-reveal] { opacity:1; transform:none; clip-path:inset(10% 8% 10% 8% round 32px); transition:clip-path 1.2s var(--ease-out-expo); }
.mask[data-reveal].is-in { clip-path:inset(0 0 0 0 round 24px); }
.tilt { transform-style:preserve-3d; transition:transform .3s var(--ease-c); will-change:transform; }
.tilt__in { transform:translateZ(30px); }

.cursor { position:fixed; left:0; top:0; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:#000; color:#fff;
  display:grid; place-items:center; font-size:.8125rem; font-weight:600; pointer-events:none; z-index:80; transform:scale(0); transition:transform .25s var(--ease-out-expo); }
.cursor.on { transform:scale(1); }
@media (hover:none){ .cursor { display:none; } }

.phero { position:relative; overflow:hidden; }
.phero__grid { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:end; padding-block:clamp(48px,6vw,96px) clamp(40px,5vw,72px); }
@media (max-width:899px){ .phero__grid { grid-template-columns:1fr; } }
.phero h1 { font-size:clamp(2.4rem,1.4rem + 3.6vw,4.8rem); line-height:1.05; letter-spacing:-.035em; font-weight:500; }
html[lang="ko"] .phero h1 { font-weight:600; line-height:1.18; }
.phero__ph { aspect-ratio:4/3; border-radius:var(--radius-3xl); overflow:hidden; }
.phero__ph img { width:100%; height:100%; object-fit:cover; }
.blob { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(70px); opacity:.55; z-index:-1; animation:drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate(60px,-40px) scale(1.15); } }

.megacta { border-radius:40px; padding:clamp(40px,6vw,88px); background:#000; color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.megacta .blob { opacity:.6; }
.megacta h2 { font-size:clamp(2.2rem,1.3rem + 3.2vw,4.4rem); line-height:1.05; letter-spacing:-.035em; font-weight:500; max-width:14ch; }
html[lang="ko"] .megacta h2 { font-weight:600; line-height:1.2; }
.megacta .btn--primary { background:#fff; color:#000; }
.megacta .btn--secondary { background:#fff2; color:#fff; }

.tline { position:relative; padding-left:28px; }
.tline::before { content:''; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--fg-12); }
.tline__fill { position:absolute; left:6px; top:0; width:2px; background:#000; height:0; }
.tline li { position:relative; padding:22px 0; display:grid; grid-template-columns:110px 1fr; gap:16px; }
.tline li::before { content:''; position:absolute; left:-27px; top:30px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--fg-44); transition:all .3s; }
.tline li.on::before { background:#000; border-color:#000; transform:scale(1.2); }
.tline .y { font-family:var(--font-mono); font-size:.875rem; color:var(--fg-44); padding-top:3px; }
@media (max-width:599px){ .tline li { grid-template-columns:1fr; gap:4px; } }

@media (prefers-reduced-motion:reduce){ .xhero__bg img, .blob, .glass, .pmq__row { animation:none; } }

.film { position:relative; height:520vh; background:#000; color:#fff; }
.film__stage { position:sticky; top:0; height:100vh; overflow:hidden; }
.film canvas { position:absolute; inset:0; width:100%; height:100%; background:#000; }
.film__veil { position:absolute; inset:0; background:linear-gradient(90deg,#000c 0%,#0006 42%,#0000 70%), linear-gradient(0deg,#0009,#0000 40%); pointer-events:none; }
.film__beats { position:absolute; left:0; right:0; bottom:0; top:0; }
.film__beat { position:absolute; left:var(--pad-x); bottom:clamp(64px,12vh,140px); max-width:min(560px,80vw); opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-c), transform .8s var(--ease-out-expo); }
@media (min-width:1200px){ .film__beat { left:max(var(--pad-x), calc((100vw - 1088px)/2)); } }
.film__beat.on { opacity:1; transform:none; }
.film__beat .k { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:#fffa; }
.film__beat h3 { font-size:clamp(2rem,1.2rem + 3vw,4rem); line-height:1.08; letter-spacing:-.03em; font-weight:500; margin:10px 0 12px; }
html[lang="ko"] .film__beat h3 { font-weight:600; line-height:1.2; }
.film__beat p { color:#fffd; font-size:clamp(1rem,.9rem + .3vw,1.2rem); line-height:1.6; }
.film__clock { position:absolute; right:var(--pad-x); top:calc(var(--header-h) + 24px); text-align:right; }
.film__clock b { font-size:clamp(3rem,2rem + 4vw,6rem); font-weight:500; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.film__clock span { display:block; font-size:.8125rem; color:#fffa; }
.route2 { position:absolute; right:var(--pad-x); top:50%; transform:translateY(-35%); display:grid; gap:18px; padding-right:20px; }
.route2::before { content:''; position:absolute; right:5px; top:6px; bottom:6px; width:2px; background:#fff3; }
.route2__fill { position:absolute; right:5px; top:6px; bottom:6px; width:2px; background:#ffe08a; transform-origin:top; transform:scaleY(0); }
.route2 li { position:relative; font-size:.8125rem; color:#fff8; text-align:right; transition:color .3s; }
.route2 li::after { content:''; position:absolute; right:-20px; top:4px; width:12px; height:12px; border-radius:50%; background:#000; border:2px solid #fff6; transition:all .3s; }
.route2 li.on { color:#fff; } .route2 li.on::after { background:#ffe08a; border-color:#ffe08a; }
.route2 li.now { font-weight:600; } .route2 li.now::after { box-shadow:0 0 0 6px #ffe08a44; }
@media (max-width:767px){ .route2 { display:none; } .film__clock { top:auto; bottom:24px; } .film__beat { bottom:120px; } }
.film__hint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); font-size:.75rem; color:#fff9; letter-spacing:.1em; }

.nb { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,3vw,40px); align-items:start; }
@media (max-width:959px){ .nb { grid-template-columns:1fr; } }
.nb__map { position:relative; background:#fff; border:1px solid var(--fg-12); border-radius:var(--radius-3xl); padding:10px; }
.nb__map svg { width:100%; height:auto; }
.nb__sweep { animation:sweep 6s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.nb__dot { cursor:pointer; opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:opacity .5s var(--d), transform .6s var(--ease-out-expo) var(--d); }
.nb.go .nb__dot { opacity:1; transform:none; }
.nb.go .nb__dot.dim { opacity:.15; }
.nb__dot.hl circle:last-child { r:10; }
.nb__tip { position:absolute; left:20px; top:20px; background:#000; color:#fff; border-radius:12px; padding:10px 12px; font-size:.8125rem; line-height:1.4; pointer-events:none; }
.nb__chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.nb__list { max-height:560px; overflow:auto; border-top:1px solid var(--fg-12); }
.nb__list li { display:grid; grid-template-columns:12px 1fr auto; gap:12px; align-items:center; padding:14px 6px; border-bottom:1px solid var(--fg-12); transition:background .2s; cursor:default; }
.nb__list li.hl { background:var(--fg-4); }
.nb__list li div { display:grid; gap:2px; }
.nb__pin { width:10px; height:10px; border-radius:50%; }
.nb__walk { font-size:.8125rem; font-weight:600; white-space:nowrap; }

.blob { display:none; }
.route2__fill { background:#fff; }
.route2 li.on::after { background:#fff; border-color:#fff; }
.route2 li.now::after { box-shadow:0 0 0 6px #ffffff33; }
.nb__sweep path { fill:#0000000d; }
.fnd-link { font-size:.8125rem; color:var(--fg-44); margin-left:-18px; white-space:nowrap; transition:color .2s; }
.fnd-link:hover { color:var(--fg); }
@media (max-width:1100px){ .fnd-link { display:none; } }

/* hero illustration (residence-scene.js) */
.xhero__scene { background:linear-gradient(180deg,#1c2350 0%,#5a4488 55%,#e58a6c 80%,#2a2a40 100%); }
.xhero__scene canvas { display:block; width:100%; height:100%; }
.xhero--scene::after { pointer-events:none; background:linear-gradient(90deg,rgba(12,14,34,.72) 0%,rgba(12,14,34,.38) 36%,rgba(12,14,34,0) 60%),linear-gradient(180deg,rgba(12,14,34,0) 62%,rgba(12,14,34,.5) 100%); }
.scene-hint { position:absolute; right:24px; bottom:22px; z-index:1; display:flex; align-items:center; gap:8px; font:500 12px/1 inherit; letter-spacing:0; color:#fffd; background:rgba(12,14,34,.38); border:1px solid #fff3; border-radius:999px; padding:8px 12px; backdrop-filter:blur(8px); pointer-events:none; transition:opacity .6s; }
.scene-hint span { width:7px; height:7px; border-radius:50%; background:#ffc46e; box-shadow:0 0 10px #ffc46e; animation:ping 2s infinite; }
.scene-hint.is-done { opacity:0; }
@media (max-width:899px){
  .xhero--scene::after { background:linear-gradient(180deg,rgba(12,14,34,0) 0%,rgba(12,14,34,0) 36%,rgba(12,14,34,.55) 50%,rgba(12,14,34,.82) 100%); }
  .scene-hint { top:16px; bottom:auto; right:16px; }
}