/* 하이엔드_V1 — 기준서(문서/기준서.md) 수치로 새로 작성한 스타일.
   레이아웃 모드: 모바일 = (≤768) 또는 (769~1366 이면서 세로) / 데스크톱 = 그 밖. §2 */
:root { --ease-layout: cubic-bezier(0.1, 0.51, 0.55, 1); --ease-soft: cubic-bezier(0.1, 0.59, 0.39, 0.94); --ease-wipe: cubic-bezier(0.16, 0.62, 0.23, 0.99); --ease-track: cubic-bezier(0.33, 0, 0.25, 1); --page-dur: 1.6s; --gutter: clamp(24px, 4vw, 52px); --rail-x: clamp(18px, 2.5vw, 48px); --bar-h: 96px; --vh: 100dvh; --f-en: "Jost", "Noto Sans KR", sans-serif; --f-ko: "Noto Sans KR", system-ui, sans-serif; --f-serif: "Noto Serif KR", serif }
:where(*) { box-sizing: border-box; margin: 0 }
:where(*) { padding: 0 }
html, body { height: 100% }
body { overflow: hidden; background: var(--c-navy); color: #fff; font: 400 17px/1.6 var(--f-ko); letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overscroll-behavior: none; word-break: keep-all; overflow-wrap: break-word }
img { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
a { color: inherit; text-decoration-line: none }
ul, ol { list-style: none }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.hl-skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: #fff; color: var(--c-navy); padding: 10px 14px }
.hl-skip:focus { top: 12px }
/* ---------- 공통 글자 ---------- */
.eyebrow { font: 500 14px/1 var(--f-en); letter-spacing: 0.32em; color: rgba(255,255,255,.82) }
.eyebrow--dark { color: var(--c-taupe) }
.display { font: 500 72px/1 var(--f-en); letter-spacing: 0.04em; color: #fff }
.display--dark { color: var(--c-navy) }
.display--xl { font-size: 116px; letter-spacing: 0.06em }
.heading { font: 500 30px/40px var(--f-ko); letter-spacing: -0.055em; color: var(--c-navy) }
.heading--sm { font-size: 24px; line-height: 34px }
.serif { font-family: var(--f-serif); font-weight: 300 }
.cg-note { position: absolute; right: var(--gutter); bottom: 14px; font-size: 12px; color: rgba(255,255,255,.62); letter-spacing: -0.02em; z-index: 3 }
.cg-note--dark { color: rgba(21,33,58,.5) }
/* 브랜드 마크(글자로 그린 락업 — 고해상도에서도 선명) */
.mark { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-en); line-height: 1 }
.mark__the { font-weight: 300; letter-spacing: 0.12em; white-space: nowrap }
.mark__est { font-weight: 600; letter-spacing: 0.16em; padding: 6px 4px 6px 8px; background: currentColor }
.mark__est { color: inherit }
.mark__est { -webkit-text-fill-color: var(--mark-ink, #fff) }
.mark--sm { font-size: 17px }
/* ---------- 인트로 (매 진입 재생) ----------
   장면A: 세로 사진 3장이 0.75s 간격으로 올라오며 낱말이 붙는다 → 머문 뒤 함께 사라짐
   장면B: 가로 사진이 천천히 드러나고 큰 명조 문구 두 줄 → 사이트로 */
.opening { position: fixed; inset: 0; z-index: 400; background: #fff; color: var(--c-navy); overflow: hidden; transition: opacity 1.1s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.1s }
.opening.is-gone { opacity: 0%; visibility: hidden }
html.hl-adpass .opening { display: none }
.opening__scene { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 1.1s cubic-bezier(.4,0,.2,1) }
.opening__scene--a { grid-template-columns: repeat(3,auto); column-gap: clamp(18px,2.4vw,40px); align-content: center; justify-content: center }
.opening__scene--b { opacity: 0 }
.opening.scene-b .opening__scene--a { opacity: 0 }
.opening.scene-b .opening__scene--b { opacity: 1 }
.ocard { display: grid; gap: 14px; justify-items: center }
.ocard--2 { margin-top: 12vh }
.ocard--3 { margin-top: -4vh }
.ocard img { width: clamp(110px,10.5vw,170px); aspect-ratio: 9/20; object-fit: cover; opacity: 0; transform: translateY(46px); transition: opacity 1.7s cubic-bezier(.4,0,.2,1),transform 2.45s cubic-bezier(.4,0,.2,1) }
.ocard__word { font: 300 clamp(16px,1.5vw,22px)/1 var(--f-serif); letter-spacing: .06em; opacity: 0; transform: translateY(18px); transition: opacity 1.6s cubic-bezier(.4,0,.2,1),transform 2.35s cubic-bezier(.4,0,.2,1) }
.opening.a1 .ocard--1 img, .opening.a1 .ocard--1 .ocard__word, .opening.a2 .ocard--2 img, .opening.a2 .ocard--2 .ocard__word, .opening.a3 .ocard--3 img, .opening.a3 .ocard--3 .ocard__word { opacity: 100%; transform: none }
.opening.a1 .ocard__word, .opening.a2 .ocard__word, .opening.a3 .ocard__word { transition-delay: .35s }
.owide { position: absolute; left: 50%; top: 50%; width: min(64vw,980px); aspect-ratio: 2.36/1; transform: translate(-50%,-50%); overflow: hidden; clip-path: inset(0 50%0 50%); transition: clip-path 1.8s cubic-bezier(.65,0,.35,1),width 2.6s cubic-bezier(.65,0,.35,1),height 2.6s cubic-bezier(.65,0,.35,1) }
.owide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 4s cubic-bezier(.22,1,.36,1) }
.opening.b1 .owide { clip-path: inset(0 0 0 0) }
.opening.b1 .owide img { transform: none }
.opening.b2 .owide { width: 100vw }
.owide__copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 6px; text-align: center; color: #fff; z-index: 2 }
.owide__copy span { font: 300 clamp(26px,3vw,46px)/1.25 var(--f-serif); letter-spacing: .02em; opacity: 0; transform: translateY(24px); transition: opacity 1.6s cubic-bezier(.4,0,.2,1),transform 2.35s cubic-bezier(.4,0,.2,1); text-shadow: 0 2px 18px rgba(0,0,0,.25) }
.opening.b2 .owide__copy span { opacity: 100%; transform: none }
.opening.b2 .owide__copy span:last-child { transition-delay: .35s }
.opening__skip { position: fixed; left: 0; top: 0; z-index: 3; width: 76px; height: 76px; border-radius: 50%; background: var(--c-navy); color: #fff; font: 500 13px/1 var(--f-en); letter-spacing: .12em; opacity: 0; transform: translate(calc(100vw - 110px),calc(100dvh - 110px)); transition: transform .45s var(--ease-soft),opacity .6s ease }
.opening.has-skip .opening__skip { opacity: 1 }
.opening__skip::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 6px solid var(--c-navy); animation: ring-breathe 2.1s linear infinite }
@keyframes ring-breathe { 0%, 30% { transform: scale(.7); opacity: 0 } 50% { opacity: .3 } 80%, 100% { transform: scale(1); opacity: 0 } }
/* 글자 흩어짐 등장: 글자마다 다른 지연으로 천천히 떠오르고 자간이 벌어진다 */
.spread { font: 500 120px/1.1 var(--f-en); color: #fff; letter-spacing: .02em; white-space: nowrap; transition: letter-spacing 2.8s var(--ease-soft),font-size 1.5s var(--ease-soft) }
.spread .ch { display: inline-block; opacity: 0; transition: opacity 4.2s cubic-bezier(.19,1,.22,1) }
.spread .sp { display: inline-block; width: .32em }
.page.hl-is-current .spread { letter-spacing: .14em }
.page.hl-is-current .spread .ch { opacity: 1 }
.spread--xl { font-size: 110px }
/* ---------- 상단 바 ---------- */
.topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: var(--bar-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gutter); color: #fff; --mark-ink: var(--c-navy); transition: color .8s var(--ease-soft),height .7s var(--ease-layout) }
body.tone-light .topbar { color: var(--c-navy); --mark-ink: #fff }
body.tone-split .topbar__brand, body.tone-split .topbar__right { color: var(--c-navy); --mark-ink: #fff }
body.tone-split .orb { color: var(--c-navy) }
body.drawer-open .topbar { color: #fff; --mark-ink: var(--c-navy) }
.topbar__info { display: flex; align-items: center; gap: 14px; font-size: 15px; letter-spacing: -0.04em }
.topbar__info b { font-family: var(--f-en); font-weight: 600 }
.topbar__info i { width: 1px; height: 14px; background: currentColor; opacity: .5 }
.topbar__brand { display: flex }
.topbar__brand { align-items: center }
.topbar__brand { gap: 10px }
.topbar__name { display: grid; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em }
.topbar__name span:last-child { letter-spacing: 0.62em; font-weight: 500 }
.topbar__right { display: flex; justify-content: flex-end; align-items: center; gap: 28px }
.topbar__tel { display: flex; align-items: center; gap: 8px; font: 500 19px/1 var(--f-en); letter-spacing: .02em }
.topbar__tel svg { inline-size: 20px; height: 20px; fill: currentColor }
/* 메뉴 버튼(실측): 64×30, 길이 58·두께 1px 선 2개(위 8px·아래 21px, 간격 13px).
   열림 = 두 선이 가운데로 6.5px 모이며 ±45° 회전 → 정사각형 X. 길이·위치를 따로 바꾸지 않는다(따로 움직이면 중간에 뭉개진다). */
.burger { position: relative; width: 64px; height: 30px; --gap-half: 6.5px }
.burger span { position: absolute; left: 0; width: 58px; height: 1px; background: currentColor; transform-origin: 50% 50%; transition: transform .8s var(--ease-layout),background-color .8s var(--ease-soft) }
.burger span:first-child { top: 8px }
.burger span:last-child { top: 21px }
body.drawer-open .burger span:first-child { transform: translateY(var(--gap-half)) rotate(45deg) }
body.drawer-open .burger span:last-child { transform: translateY(calc(var(--gap-half)*-1)) rotate(-45deg) }
/* ---------- 전체 메뉴 ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--c-navy); display: grid; place-items: center; align-content: center; gap: 48px; clip-path: inset(0 0 100%0); visibility: hidden; transition: clip-path 1.12s var(--ease-layout),visibility 0s linear 1.12s }
body.drawer-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s }
.drawer__list { width: min(560px,calc(100vw - 36px)) }
.drawer__list li { border-bottom: 1px solid rgba(255,255,255,.18); opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-soft),transform 1.2s var(--ease-layout) }
body.drawer-open .drawer__list li { opacity: 100%; transform: none }
body.drawer-open .drawer__list li:nth-child(2) { transition-delay: .06s }
body.drawer-open .drawer__list li:nth-child(3) { transition-delay: .12s }
body.drawer-open .drawer__list li:nth-child(4) { transition-delay: .18s }
body.drawer-open .drawer__list li:nth-child(5) { transition-delay: .24s }
.drawer__list>li>a, .drawer__list>li>button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 26px 0; font: 500 30px/1.2 var(--f-ko); letter-spacing: -0.04em; color: #fff }
.drawer__list a[aria-current="page"] .hl-roll>span:first-child { color: var(--c-green) }
.drawer__toggle i { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .45s var(--ease-layout) }
.drawer__group.hl-is-open .drawer__toggle i { transform: rotate(-135deg) translateY(-3px) }
.drawer__sub { display: grid; gap: 2px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: max-height .45s var(--ease-layout),opacity .3s ease,transform .45s var(--ease-layout) }
.drawer__group.hl-is-open .drawer__sub { max-height: 140px; opacity: 1; transform: none; padding-bottom: 18px }
/* 하위 메뉴 항목엔 구분선·등장 연출을 다시 걸지 않는다(.drawer__list li 규칙이 내려와 선이 겹쳤다) */
.drawer__list .drawer__sub li { border-bottom: 0; opacity: 1; transform: none; transition: none }
.drawer__sub a { display: block; padding: 8px 0; text-align: center; font-size: 17px; color: rgba(255,255,255,.72); transition: color .25s ease }
.drawer__sub a:hover, .drawer__sub a:focus-visible, .drawer__sub a[aria-current="page"] { color: var(--c-green) }
@media (hover:hover) and (pointer:fine) and (min-width:769px) {
  .drawer__group:hover .drawer__sub { max-height: 140px; opacity: 1; transform: none; padding-bottom: 18px }
}
.hl-roll { display: inline-grid; overflow: hidden; height: 1.2em }
.hl-roll>span { grid-area: 1/1; transition: transform .8s var(--ease-layout) }
.hl-roll>span:last-child { transform: translateY(100%); color: var(--c-green) }
.drawer__list>li>:is(a, button):hover .hl-roll>span:first-child, .drawer__list>li>:is(a, button):focus-visible .hl-roll>span:first-child { transform: translateY(-100%) }
.drawer__list>li>:is(a, button):hover .hl-roll>span:last-child, .drawer__list>li>:is(a, button):focus-visible .hl-roll>span:last-child { transform: none }
.drawer__foot { font-size: 14px; color: rgba(255,255,255,.6) }
.drawer__foot a { color: #fff; font-family: var(--f-en) }
/* ---------- 왼쪽 섹션 표시 ---------- */
.rail { position: fixed; left: var(--rail-x); top: 50%; transform: translateY(-50%); z-index: 80; width: 210px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.5s var(--ease-soft),visibility 0s linear 1.5s }
body.rail-ready:not(.drawer-open):not(.sheet-open) .rail { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
.rail ol { position: relative; display: grid; gap: 4px }
.rail ol::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .4 }
.rail { color: #fff }
body.tone-light .rail { color: var(--c-navy) }
.rail button { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding-left: 14px }
.rail button::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 3px; background: var(--c-green); transform: scaleY(0); transition: transform .5s var(--ease-layout) }
.rail i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; transition: opacity .3s ease,transform .4s cubic-bezier(.22,.8,.2,1) }
.rail span { font: 500 12px/1 var(--f-en); letter-spacing: .18em; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: max-width .6s var(--ease-layout),opacity .5s var(--ease-soft),transform .6s var(--ease-layout) }
.rail .is-on::before { transform: none }
.rail .is-on i { opacity: 1; background: var(--c-green) }
.rail .is-on span, .rail button:hover span, .rail button:focus-visible span { max-width: 170px; opacity: 1; transform: none }
.rail button:hover i { opacity: 100%; transform: scale(1.35) }
/* ---------- 원형 등록 버튼 ---------- */
.orb { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 178px; height: 178px; color: #fff; transition: opacity .6s var(--ease-soft),transform .6s var(--ease-layout) }
body.tone-light .orb { color: var(--c-navy) }
body.drawer-open .orb, body.sheet-open .orb, body.is-booting .orb { opacity: 0; pointer-events: none; transform: scale(.9) }
.orb__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: orb-spin 18s linear infinite }
.orb__ring text { font: 500 14px var(--f-en); letter-spacing: .32em; fill: currentColor }
@keyframes orb-spin { 100% { transform: rotate(360deg) } }
/* 팝업 보기 위성 — 등록 원의 왼쪽 위에서 천천히 떠 있다 */
.hl-moon { position: fixed; right: 144px; bottom: 152px; z-index: 81; width: 64px; height: 64px; border-radius: 50%; background: var(--c-taupe); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(8,14,28,.28); animation: moon-drift 4.2s ease-in-out infinite; transition: opacity .6s var(--ease-soft),background-color .4s ease }
.hl-moon span { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; letter-spacing: -0.02em }
.hl-moon:hover { background: var(--c-navy) }
@keyframes moon-drift { 50% { transform: translate(-4px,-6px) } }
.hl-moon[hidden] { display: none }
/* 등록 폼이 떠 있는 문의 칸에서는 위성이 「등록하기」 단추를 가린다(1280×720 실측) → 숨김 */
body:has(.page--contact.hl-is-current) .hl-moon { opacity: 0%; pointer-events: none; transform: scale(.85) }
body.drawer-open .hl-moon, body.sheet-open .hl-moon, body.is-booting .hl-moon, body.popup-open .hl-moon { opacity: 0%; pointer-events: none; transform: scale(.85) }
.orb__core { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0-56px; border-radius: 50%; background: var(--c-green-deep); color: #fff; display: grid; place-items: center; overflow: hidden }
/* 흰 글자 대비 4.4:1 — 밝은 초록(--c-green)은 2.3:1 이라 진한 쪽 */
.orb__fill { position: absolute; inset: 0; border-radius: 50%; background: var(--c-navy); transform: scale(0); transition: transform .7s var(--ease-layout) }
.orb__label { position: relative; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; transition: opacity .4s var(--ease-soft) }
.orb__arrow { position: absolute; font: 400 34px/1 var(--f-en); opacity: 0; transform: translateX(-14px); transition: opacity .75s var(--ease-soft),transform .8s var(--ease-soft) }
@media (hover:hover) and (pointer:fine) {
  .orb:hover .orb__fill { transform: scale(1) }
  .orb:hover .orb__label { opacity: 0 }
  .orb:hover .orb__arrow { opacity: 1; transform: none; transition-delay: .3s }
}
/* ---------- 페이저 ---------- */
.pager { position: fixed; inset: 0; overflow: hidden hidden }
.pager__track { height: 100%; transition: transform var(--page-dur) ease; will-change: transform }
.page { position: relative; height: var(--vh); overflow: hidden }
/* 공통 등장: 현재 화면이 된 섹션의 [data-rise] 가 계단으로 올라온다 */
.page .rise { opacity: 0; transform: translateY(36px); transition: opacity 1.05s var(--ease-soft),transform 1.35s var(--ease-layout) }
.page.hl-is-current .rise { opacity: 100%; transform: none }
.page.hl-is-current .rise.d1 { transition-delay: .18s }
.page.hl-is-current .rise.d2 { transition-delay: .34s }
.page.hl-is-current .rise.d3 { transition-delay: .5s }
/* 1) 메인 */
.page--hero { background: #0d1424 }
.hero__media, .hero__shot, .hero__shot img { position: absolute; inset: 0; width: 100%; height: 100% }
.hero__shot { opacity: 0; transition: opacity 2.4s ease }
.hero__shot.is-on { opacity: 1 }
.hero__shot img { object-fit: cover; animation: slow-zoom 22s ease-in-out infinite }
@keyframes slow-zoom { 0%, 100% { transform: scale(1.03) } 50% { transform: scale(1.15) } }
.hero__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 52% 40%at 50% 50%,rgba(8,14,28,.5) 0%,rgba(8,14,28,0) 100%),linear-gradient(180deg,rgba(8,14,28,.55) 0%,rgba(8,14,28,.12) 38%,rgba(8,14,28,.18) 62%,rgba(8,14,28,.62) 100%) }
.hero__copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; display: grid; justify-items: center; gap: 22px; padding: 0 var(--gutter) }
.hero__title { font: 500 120px/1.05 var(--f-en); letter-spacing: 0.14em; margin-right: -0.14em }
.hero__title .hl-line { display: block; overflow: hidden }
.hero__title .hl-line>span { display: inline-block; clip-path: inset(0 0 100%0); transform: translateY(40%); transition: clip-path 1.05s var(--ease-wipe),transform 1.35s var(--ease-layout) }
body.hero-go .hero__title .hl-line>span { clip-path: inset(0 0 0 0); transform: none }
body.hero-go .hero__title .hl-line:nth-child(2)>span { transition-delay: .2s }
.hero__lead { font-size: 35px; line-height: 1.2; letter-spacing: 0.02em }
.hero__sub { font-size: 16px; color: rgba(255,255,255,.82) }
.hero__tag { padding: 13px 24px 13px calc(24px + .3em); border: 1.5px solid rgba(255,255,255,.75); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: .3em }
.hero__copy .eyebrow, .hero__copy .hero__tag, .hero__lead, .hero__sub { opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease-soft),transform 1.3s var(--ease-layout) }
body.hero-go .hero__copy .eyebrow, body.hero-go .hero__copy .hero__tag { opacity: 100%; transform: none }
body.hero-go .hero__lead { opacity: 1; transform: none; transition-delay: .55s }
body.hero-go .hero__sub { opacity: 1; transform: none; transition-delay: .75s }
.cue { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; z-index: 3; font: 500 12px/1 var(--f-en); letter-spacing: .3em; opacity: 0; transition: opacity 1.2s var(--ease-soft) 1s }
body.hero-go .cue { opacity: 1 }
.cue i { position: relative; width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.7); border-radius: 14px }
.cue i::after { content: ""; position: absolute; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: cue-drop 2.2s infinite }
@keyframes cue-drop { 0% { top: 28%; opacity: 0; transform: translateX(-50%) scale(.7) } 20% { opacity: 1; transform: translateX(-50%) scale(1) } 72%, 100% { top: 64%; opacity: 0; transform: translateX(-50%) scale(.9) } }
/* 2) 사업개요 — 단계0: 그림 전체 + 제목 / 단계1: 오른쪽 판이 1.5s 에 걸쳐 밀려 들어오고 그림·제목이 왼쪽으로 줄어든다 */
.page--overview { background: #0e1626; color: #fff }
.ov__visual { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; transition: width 1.5s var(--ease-soft) }
.ov__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: zoom-26 26s linear infinite }
@keyframes zoom-26 { 0%, 100% { transform: scale(1.02) } 50% { transform: scale(1.16) } }
.ov__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(10,20,40,.55) 0%,rgba(10,20,40,.12) 45%,rgba(10,20,40,.25) 100%) }
.ov__intro { position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-38%); display: grid; justify-items: center; gap: 22px; text-align: center; transition: width 1.5s var(--ease-soft),transform 1.5s var(--ease-soft) }
.ov__lead { font-size: 26px; color: #fff; opacity: 0; transform: translateY(26px); transition: opacity 2.4s cubic-bezier(.22,1,.36,1) 1.5s,transform 2.4s cubic-bezier(.22,1,.36,1) 1.5s }
.page--overview.hl-is-current .ov__lead { opacity: 100%; transform: none }
.ov__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 58vw; background: #f6f4f0; color: var(--c-navy); padding: calc(var(--bar-h) + 30px) clamp(40px,5vw,96px) 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; transform: translateX(100%); transition: transform 1.5s var(--ease-soft) }
.ov__panel>* { opacity: 0; transition: opacity .7s var(--ease-soft) .55s }
.ov__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; border-top: 2px solid var(--c-navy) }
.ov__facts>div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(21,33,58,.14); opacity: 0; transform: translateY(18px); transition: opacity 1.12s ease,transform 1.12s ease }
.ov__facts>div:first-child { grid-column: 1/-1 }
.ov__facts dt { font-size: 14px; font-weight: 700; letter-spacing: -0.045em }
.ov__facts dd { font-size: 14px; letter-spacing: -0.045em; color: #3d4559 }
.ov__nums { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px }
.ov__nums li { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--c-taupe) }
.ov__nums b { font: 500 38px/1 var(--f-en); color: var(--c-navy) }
.ov__nums span { font-size: 13px; color: var(--c-taupe); font-weight: 500 }
.page--overview.stage-1 .ov__visual { width: 42vw }
.page--overview.stage-1 .ov__intro { width: 42vw; transform: translateY(-50%) }
.page--overview.stage-1 .spread { font-size: 60px; letter-spacing: .1em }
.page--overview.stage-1 .ov__lead { font-size: 20px }
.page--overview.stage-1 .ov__panel { transform: none }
.page--overview.stage-1 .ov__panel>* { opacity: 1 }
.page--overview.stage-1 .ov__facts>div { opacity: 100%; transform: none }
.page--overview.stage-1 .ov__facts>div:nth-child(1) { transition-delay: .65s }
.page--overview.stage-1 .ov__facts>div:nth-child(2) { transition-delay: .8s }
.page--overview.stage-1 .ov__facts>div:nth-child(3) { transition-delay: .95s }
.page--overview.stage-1 .ov__facts>div:nth-child(4) { transition-delay: 1.1s }
.page--overview.stage-1 .ov__facts>div:nth-child(5) { transition-delay: 1.25s }
.page--overview.stage-1 .ov__facts>div:nth-child(6) { transition-delay: 1.4s }
.page--overview.stage-1 .ov__facts>div:nth-child(7) { transition-delay: 1.55s }
/* 3) 입지 — 단계0: 파노라마 + 제목 / 단계1: 격자 점이 사각형으로 자라 화면을 덮은 뒤 걷히며 지도 화면 */
.page--location { background: #0e1626; color: #fff }
.loc__scene { position: absolute; inset: 0; overflow: hidden hidden }
.loc__scene img { width: 100%; height: 100%; object-fit: cover; animation: zoom-32 32s linear infinite }
@keyframes zoom-32 { 0%, 100% { transform: scale(1.03) } 50% { transform: scale(1.15) } }
.loc__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(10,20,40,.5) 0%,rgba(10,20,40,.15) 45%,rgba(10,20,40,.45) 100%) }
.loc__scene-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; justify-items: center; gap: 20px; text-align: center }
.loc__scene-copy .eyebrow { opacity: 0; transition: opacity 1.1s ease 1.6s }
.loc__scene-lead { font-size: 26px; opacity: 0; transform: translateY(20px); transition: opacity 2.4s cubic-bezier(.22,1,.36,1) 1.5s,transform 2.4s cubic-bezier(.22,1,.36,1) 1.5s }
.page--location.hl-is-current .loc__scene-copy .eyebrow, .page--location.hl-is-current .loc__scene-lead { opacity: 100%; transform: none }
.loc__detail { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 56% 44%; background: #fff; color: var(--c-navy); visibility: hidden }
.page--location.show-detail .loc__detail { visibility: visible }
.page--location.show-detail .loc__scene-copy { visibility: hidden }
.loc__map { position: relative; overflow: hidden hidden }
/* PC: 지도 칸이 세로로 길어 좌우가 잘린다 — 단지 표시·확대 원이 있는 오른쪽을 살리고 왼쪽을 자른다(2026-10-03 대표) */
.loc__map img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50% }
.loc__body { background: var(--c-beige); padding: calc(var(--bar-h) + 30px) var(--gutter) 60px clamp(32px,4vw,72px); display: flex; flex-direction: column; justify-content: center; gap: 16px }
.loc__points { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 8px }
.loc__points li { padding: 18px 0; border-top: 1px solid rgba(21,33,58,.18); display: grid; gap: 6px; opacity: 0; transform: translateY(20px); transition: opacity 1.1s var(--ease-soft),transform 1.3s var(--ease-layout) }
.page--location.show-detail .loc__points li { opacity: 100%; transform: none }
.page--location.show-detail .loc__points li:nth-child(1) { transition-delay: .9s }
.page--location.show-detail .loc__points li:nth-child(2) { transition-delay: 1.05s }
.page--location.show-detail .loc__points li:nth-child(3) { transition-delay: 1.2s }
.page--location.show-detail .loc__points li:nth-child(4) { transition-delay: 1.35s }
.loc__points b { font: 500 18px/1 var(--f-en); letter-spacing: .06em; color: var(--c-taupe) }
.loc__points h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.04em }
.loc__points p { font-size: 14px; line-height: 1.55; color: #4a5266; letter-spacing: -0.035em }
.page--location.show-detail .cg-note { color: rgba(21,33,58,.5) }
/* 모자이크: JS 가 칸을 깔고, 덮기(.cover) → 걷기(.uncover) 순서로 클래스를 바꾼다 */
.mosaic { position: absolute; inset: 0; z-index: 4; display: grid; pointer-events: none }
.mosaic i { background: #fff; transform: scale(0); transition: transform .5s cubic-bezier(.65,0,.35,1) }
.mosaic.cover i { transform: scale(1.02) }
.mosaic.uncover i { transform: scale(0) }
/* 4) 조경 — 단계: 0 전체 / 1 레이아웃 전환 / 2·3 슬라이드 */
.page--park { background: #0b1220 }
.park__slides, .park__img { position: absolute; inset: 0 0 0 0 }
.park__img { opacity: 0 }
.park__img.is-on { opacity: 100%; z-index: 1 }
/* 세로 블라인드: 새 그림 한 장에 빗살 모양 clip-path(띠 N개, % 좌표)를 씌워 오른쪽 띠부터 연다 — JS 가 프레임마다 갱신 */
.park__img.hl-is-in { opacity: 1; z-index: 2; will-change: clip-path }
.park__img picture, .park__img img { display: block; inline-size: 100%; height: 100% }
.park__img img { object-fit: cover }
.park__veil { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(8,14,28,.7) 0%,rgba(8,14,28,.25) 45%,rgba(8,14,28,0) 70%),linear-gradient(0deg,rgba(8,14,28,.45),rgba(8,14,28,0) 40%) }
.park__head { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; display: grid; gap: 18px; justify-items: center; transition: left 1.3s var(--ease-layout),top 1.3s var(--ease-layout),transform 1.3s var(--ease-layout) }
.park__head .spread { transition: font-size 1.3s var(--ease-layout),letter-spacing 2.8s var(--ease-soft) }
.page--park.is-shifted .park__head { left: calc(var(--rail-x) + 230px); top: 30%; transform: translate(0,-50%); text-align: left; justify-items: start }
.page--park.is-shifted .park__head .spread { font-size: 72px }
.park__copy { position: absolute; left: calc(var(--rail-x) + 230px); top: 47%; width: min(420px,36vw); min-height: 120px }
.park__veil { z-index: 3 }
.park__head, .park__copy, .park__nav { z-index: 4 }
.park__desc { position: absolute; inset: 0 auto auto 0; display: grid; gap: 10px; opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease-soft),transform 1.3s var(--ease-layout) }
.park__desc h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.05em }
.park__desc p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86) }
.page--park.is-shifted .park__desc.is-on { opacity: 100%; transform: none }
.park__nav { position: absolute; left: calc(var(--rail-x) + 230px); bottom: 12vh; display: flex; gap: 26px; opacity: 0; transition: opacity .8s var(--ease-soft) }
.page--park.is-shifted .park__nav { opacity: 1 }
.park__nav button { position: relative; font: 500 18px/1 var(--f-en); letter-spacing: .06em; color: rgba(255,255,255,.5); padding-bottom: 10px; transition: color .4s ease }
.park__nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-taupe); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-layout) }
.park__nav button.is-on { color: #fff }
.park__nav button.is-on::after { transform: none }
/* 탑층 장(첫 장): 배경 테라스 + 오른쪽 아래 다락 액자. 주석은 이 장에서만 탑층 문구로 바꾼다(대표 10/15) */
.park__img--top::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; background: linear-gradient(180deg,rgba(8,14,28,.55),rgba(8,14,28,0)); pointer-events: none }
.park__inset { position: absolute; right: 7vw; bottom: 31vh; width: min(30vw,460px); aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 18px 44px rgba(4,8,18,.45) }
.park__inset img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover }
.park__inset em { position: absolute; left: 14px; top: 14px; padding: 7px 13px; background: rgba(8,14,28,.74); color: #fff; font-size: 15px; font-style: normal; font-weight: 500; letter-spacing: .12em }
.page--park .hl-note-top { display: none }
.page--park.stage-0 .hl-note-top { display: block }
.page--park.stage-0 .cg-note:not(.hl-note-top) { display: none }
/* 5) 주택형 — 휠 세로량을 가로 이동으로 */
.page--units { background: var(--c-ivory); color: var(--c-navy); display: flex; flex-direction: column; padding: calc(var(--bar-h) + 24px)0 54px }
.units__head { padding: 0 var(--gutter)0 calc(var(--rail-x) + 230px); display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap }
.units__head .eyebrow { flex-basis: 100%; margin-bottom: -14px }
.units__head .heading { flex: 1 1 auto }
.units__hint { font-size: 13px; color: var(--c-taupe); display: flex; gap: 10px; align-items: center }
.units__hint span { font: 600 12px/1 var(--f-en); letter-spacing: .2em; border: 1px solid currentColor; border-radius: 20px; padding: 6px 10px }
.units__viewport { flex: 1; min-height: 0; overflow: hidden; margin-top: 28px; cursor: grab; touch-action: pan-y }
.units__viewport.is-drag { cursor: grabbing }
.units__track { display: flex; gap: 28px; height: 100%; padding: 0 var(--gutter)0 calc(var(--rail-x) + 230px); will-change: transform }
.ucard { flex: 0 0 auto; width: clamp(300px,30vw,460px); height: 100%; display: flex; flex-direction: column; background: #fff }
.ucard figure { flex: 1; min-height: 0; display: grid; place-items: center; padding: 18px; overflow: hidden }
.ucard figure img { max-height: 100%; width: auto; object-fit: contain; opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100%0); transition: opacity 1.05s var(--ease-soft),transform 1.35s var(--ease-layout),clip-path 1.45s var(--ease-layout) }
.ucard__txt { padding: 18px 22px 22px; border-top: 1px solid rgba(21,33,58,.1); display: grid; gap: 6px }
.ucard__type { font: 500 24px/1 var(--f-en); letter-spacing: .02em; opacity: 0; transform: translateY(16px); transition: opacity .85s var(--ease-soft) .18s,transform 1.05s var(--ease-layout) .18s }
.ucard__type small { font-size: 15px; margin-left: 2px }
.ucard__line, .ucard__meta { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-soft) .34s,transform 1.1s var(--ease-layout) .34s }
.ucard__line { font-size: 15px; font-weight: 500; letter-spacing: -0.04em }
.ucard__meta { font-size: 13px; color: #59617a; letter-spacing: -0.03em }
.ucard__meta b { color: var(--c-taupe) }
.page--units.hl-is-current .ucard figure img { opacity: 1; transform: none; clip-path: inset(0 0 0 0) }
.page--units.hl-is-current .ucard__type, .page--units.hl-is-current .ucard__line, .page--units.hl-is-current .ucard__meta { opacity: 100%; transform: none }
.ucard--plan { background: var(--c-navy); color: #fff }
.ucard__attic { justify-self: stretch; margin-top: 4px; display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border: 1px solid var(--c-taupe); color: var(--c-taupe); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; opacity: 0; transition: opacity .9s var(--ease-soft) .5s,background-color .35s ease,color .35s ease }
.ucard__attic img { display: block; height: 52px; width: auto; max-width: 46%; object-fit: contain; background: #fff }
.ucard__attic span { flex: 1; text-align: left }
.ucard__attic i { font: 400 18px/1 var(--f-en); font-style: normal }
.ucard__attic:hover { background: var(--c-taupe); color: #fff }
.page--units.hl-is-current .ucard__attic { opacity: 100% }
.ucard--plan figure { padding: 10px; background: #1b2741 }
.ucard--plan figure img { width: 100%; height: 100%; object-fit: contain; max-height: none }
.ucard--plan .ucard__meta { color: rgba(255,255,255,.7) }
.units__bar { margin: 22px var(--gutter)0 calc(var(--rail-x) + 230px); height: 2px; background: rgba(21,33,58,.12) }
.units__bar i { display: block; height: 100%; width: 0; background: var(--c-navy); transition: width .2s linear }
/* 6) 등록·오시는 길 */
.page--contact { background: var(--c-beige); color: var(--c-navy) }
.contact__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch }
.contact__grid { min-height: calc(var(--vh) - 150px); padding: calc(var(--bar-h) + 40px) var(--gutter) 50px calc(var(--rail-x) + 230px); display: grid; grid-template-columns: 1fr minmax(340px,440px) 1fr; gap: 48px; align-items: center }
.contact__lead { display: grid; gap: 14px; align-content: center }
.contact__desc { font-size: 15px; color: #4a5266; letter-spacing: -0.04em }
.contact__call { display: grid; gap: 4px; margin-top: 10px }
.contact__call span { font-size: 13px; color: var(--c-taupe); font-weight: 500 }
.contact__call b { font: 500 38px/1 var(--f-en); letter-spacing: .01em }
.contact__places { display: grid; gap: 26px }
.contact__places article { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(21,33,58,.18) }
.contact__places h3 { font-size: 14px; font-weight: 700; letter-spacing: .3em }
.contact__places p { font-size: 14px; letter-spacing: -0.03em }
.mapbtns { display: flex; gap: 8px; margin-top: 4px }
.mapbtn { flex: 1; height: 44px; display: grid; place-items: center; font-size: 13px; background: var(--c-navy); color: #fff; transition: background-color .45s var(--ease-soft) }
.mapbtn span { transition: letter-spacing .7s var(--ease-soft) }
.mapbtn:hover { background: var(--c-navy2) }
.mapbtn:hover span { letter-spacing: .14em }
.mapbtn--k { background: var(--c-taupe) }
.mapbtn--k:hover { background: #85705f }
/* 폼 */
.lead { display: grid; gap: 12px; background: #fff; padding: 30px 28px }
.lead--sheet { padding: 0; background: none; margin-top: 18px }
.lead label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500 }
.lead input[type=text], .lead input[type=tel], .lead input[type=date], .lead select { width: 100%; height: 48px; border: 1px solid rgba(21,33,58,.22); background: #fff; padding: 0 14px; font: 400 16px var(--f-ko); color: var(--c-navy); border-radius: 0; -webkit-appearance: none; appearance: none; min-width: 0 }
.lead input:focus, .lead select:focus { outline: 2px solid var(--c-taupe); outline-offset: -1px }
.lead .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.agree-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px }
.agree { display: flex; gap: 8px; align-items: center }
.agree input { width: 18px; height: 18px; accent-color: var(--c-navy) }
.agree-view { font-size: 12px; color: var(--c-taupe) }
.agree-body { max-height: 180px; overflow-y: auto; font-size: 12px; line-height: 1.6; color: #4a5266; background: var(--c-ivory); padding: 12px 14px; display: grid; gap: 6px }
.agree-body[hidden] { display: none }
.agree-body ul { padding-left: 14px; list-style: disc }
.lead__submit { height: 56px; background: var(--c-navy); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; transition: background-color .45s var(--ease-soft) }
.lead__submit:hover { background: var(--c-taupe) }
.lead__submit:disabled { opacity: .6; cursor: wait }
.form-status { min-height: 1.4em; font-size: 13px }
.form-status.is-ok { color: #1f7a4d }
.form-status.is-warn { color: #b3261e }
/* 바닥글 */
.foot { position: relative; background: var(--c-navy); color: rgba(255,255,255,.7); padding: 40px var(--gutter) 46px calc(var(--rail-x) + 230px); display: grid; gap: 8px; font-size: 12px; line-height: 1.6 }
.foot__brand { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; font-weight: 700; --mark-ink: var(--c-navy); margin-bottom: 6px }
.foot__info { display: grid; gap: 2px }
.foot__info>div { display: flex }
.foot__info>div { gap: 10px }
.foot__info dt { min-width: 64px; color: rgba(255,255,255,.9); font-weight: 500 }
.foot__notes { display: grid; gap: 2px; margin-top: 8px; color: rgba(255,255,255,.6); font-size: 12px }
.foot__copy { margin-top: 10px; color: rgba(255,255,255,.5); font-size: 12px }
.foot__top { position: absolute; right: var(--gutter); top: 0; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; background: var(--c-taupe); color: #fff; font-size: 22px; transition: background-color .4s ease,transform .4s ease }
.foot__top:hover { background: rgb(26 37 80); transform: translateY(calc(-50% - 4px)) }
/* 그림 크게 보기 */
.zoomable { position: relative; display: block; width: 100%; height: 100%; cursor: zoom-in }
.zoomable img { inline-size: 100%; height: 100% }
.loc__map .zoomable img { object-fit: cover }
.ucard figure .zoomable { display: grid; place-items: center }
.ucard figure .zoomable img { width: auto; height: auto; max-height: 100%; max-width: 100% }
.ucard--plan figure .zoomable img { width: 100%; height: 100%; max-height: none; object-fit: contain }
.viewer { position: fixed; inset: 0; z-index: 250; background: rgba(8,12,22,.94); visibility: hidden; opacity: 0; transition: opacity .4s ease,visibility 0s linear .4s }
body.viewer-open .viewer { visibility: visible; opacity: 1; transition-delay: 0s }
.viewer__stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; touch-action: none; cursor: grab }
.viewer__stage.is-drag { cursor: grabbing }
.viewer__stage img { max-width: 96vw; max-height: calc(var(--vh) - 120px); transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-drag: none }
.viewer__bar { position: absolute; right: 16px; top: calc(16px + env(safe-area-inset-top)); display: flex; gap: 8px; z-index: 2 }
.viewer__bar button { min-width: 44px; height: 44px; padding: 0 12px; background: rgba(21,33,58,.9); color: #fff; font-size: 18px; border: 1px solid rgba(255,255,255,.3) }
.viewer__close { font-size: 14px !important }
/* 등록 창 */
.sheet { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease-soft),visibility 0s linear .6s }
body.sheet-open .sheet { visibility: visible; opacity: 1; transition-delay: 0s }
.sheet__dim { position: absolute; inset: 0; background: rgba(8,14,28,.72) }
.sheet__panel { position: relative; width: min(520px,calc(100vw - 32px)); max-height: calc(var(--vh) - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--c-ivory); color: var(--c-navy); padding: 44px 36px 32px; transform: translateY(30px); transition: transform .8s var(--ease-layout) }
body.sheet-open .sheet__panel { transform: none }
/* 등록 창 전화 줄 — 설명 아래 한 줄, 누르면 전화(대표 10/16) */
.sheet__call { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 16px 2px; padding-block: 12px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); color: inherit; text-decoration: none }
.sheet__call > span { font-size: 14px; font-weight: 500; color: var(--c-taupe) }
.sheet__call b { display: inline-flex; align-items: center; gap: 8px; font: 500 28px/1 var(--f-en); letter-spacing: .02em }
.sheet__call svg { inline-size: 20px; block-size: 20px; fill: currentColor }
.sheet__call:active b { opacity: .7 }
.sheet__close { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; transition: transform .6s var(--ease-layout) }
.sheet__close span { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--c-navy) }
.sheet__close span:first-child { transform: rotate(45deg) }
.sheet__close span:last-child { transform: rotate(-45deg) }
.sheet__close:hover, .sheet__close:focus-visible { transform: rotate(-180deg) }
/* ---------- 데스크톱 세로 압축 (가로 넓고 높이 낮은 화면) ---------- */
@media (min-width:1440px) and (max-height:900px) {
  .hero__title { font-size: 104px }
  .display--xl { font-size: 100px }
}
@media (min-width:769px) and (max-height:800px) {
  :root { --bar-h: 80px }
  .loc__points li { padding: 12px 0 }
  .ov__facts>div { padding: 9px 0 }
}
@media (min-width:769px) and (max-width:1439px) {
  .hero__title { font-size: clamp(76px,8vw,110px) }
  .display--xl { font-size: clamp(72px,7.6vw,110px) }
  .display { font-size: clamp(48px,5vw,72px) }
  .ov__intro .display { font-size: clamp(70px,7.4vw,110px) }
  .topbar__info { font-size: 13px }
  .contact__grid { grid-template-columns: 1fr minmax(320px,400px) }
  .contact__places { grid-column: 1/-1; grid-template-columns: 1fr 1fr }
}
/* ---------- 모바일 배치: ≤768 또는 769~1366 세로 ---------- */
@media (max-width:768px),(min-width:769px) and (max-width:1366px) and (orientation:portrait) {
  :root { --bar-h: 72px; --gutter: 20px }
  body { font-size: 16px }
  .topbar { grid-template-columns: auto 1fr auto; gap: 12px }
  .topbar__info { display: none }
  .topbar__brand { justify-self: start }
  .topbar__tel span { display: none }
  .topbar__tel svg { inline-size: 22px; height: 22px }
  .topbar__right { gap: 18px }
  /* 모바일 실측: 24×16, 길이 24 선 2개(위 4px·아래 11px), 열림 시 3.5px 모이며 ±45° */
  .burger { width: 24px; height: 16px; --gap-half: 3.5px }
  .burger span { width: 24px }
  .burger span:first-child { top: 4px }
  .burger span:last-child { top: 11px }
  /* 열림 시 선 길이 24→22 도 transform 안에서(scaleX) — width 를 따로 바꾸면 회전과 어긋나 뭉개진다 */
  body.drawer-open .burger span:first-child { transform: translateY(var(--gap-half)) rotate(45deg) scaleX(.9167) }
  body.drawer-open .burger span:last-child { transform: translateY(calc(var(--gap-half)*-1)) rotate(-45deg) scaleX(.9167) }
  .mark--sm { font-size: 14px }
  .topbar__name { font-size: 10.5px }
  /* 대전: 롯데캐슬 로고(독수리+글자)가 가로로 길어 한글 표기는 줄바꿈 금지 */
  .topbar__name span { white-space: nowrap }
  .rail { display: none }
  .orb { width: 112px; height: 112px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)) }
  .orb__ring text { font-size: 15px }
  .orb__core { width: 70px; height: 70px; margin: -35px 0 0-35px }
  .orb__label { font-size: 12px }
  body:has(.page--units.hl-is-current) .hl-moon { opacity: 0%; pointer-events: none; transform: scale(.85) }
  .hl-moon { right: 42px; bottom: calc(128px + env(safe-area-inset-bottom)); width: 48px; height: 48px }
  .hl-moon span { font-size: 10.5px }
  .eyebrow { font-size: 12px; letter-spacing: .26em }
  .display { font-size: 36px }
  .display--xl { font-size: 54.6px }
  .heading { font-size: 24px; line-height: 34px }
  .heading--sm { font-size: 20px; line-height: 28px }
  .cg-note { left: var(--gutter); right: 128px; bottom: 10px; font-size: 12px }
  /* 오른쪽 원형 버튼(112px+10) 자리를 비운다 */
  .hero__title { font-size: 46px; letter-spacing: .12em }
  .hero__lead { font-size: 21.45px }
  .hero__tag { padding: 11px 18px 11px calc(18px + .3em); font-size: 20px }
  .hero__sub { font-size: 13px }
  .cue { bottom: 34px }
  /* 폭·높이를 둘 다 길이값으로 — 비율(aspect-ratio)→높이 100% 전환은 애니메이션이 안 돼 한 번에 튄다 */
  .owide { width: 78vw; height: 104vw; aspect-ratio: auto }
  .opening.b2 .owide { width: 100vw; height: var(--vh) }
  .owide__copy span { font-size: 24px }
  .ocard img { width: 26vw }
  .ov__visual::after { background: linear-gradient(180deg,rgba(10,20,40,.6) 0%,rgba(10,20,40,.2) 40%,rgba(10,20,40,.1) 70%,rgba(10,20,40,.45) 100%) }
  .spread { font-size: 44px }
  .spread--xl { font-size: 46px }
  .ov__lead, .loc__scene-lead { font-size: 18px; padding: 0 var(--gutter) }
  .ov__intro { transform: translateY(-50%) }
  .ov__panel { width: 100%; top: 34%; padding: 22px var(--gutter) 30px; justify-content: flex-start; gap: 14px; overflow-y: auto; transform: translateY(100%) }
  .ov__panel .eyebrow, .ov__panel .heading { display: none }
  .ov__facts { grid-template-columns: 1fr }
  .ov__facts>div { grid-template-columns: 96px 1fr; padding: 9px 0 }
  .ov__facts dt, .ov__facts dd { font-size: 13px }
  .ov__nums b { font-size: 26px }
  .ov__nums span { font-size: 12px }
  .page--overview.stage-1 .ov__visual { width: 100%; height: 34% }
  .page--overview.stage-1 .ov__intro { width: 100%; top: 17%; transform: translateY(-30%) }
  .page--overview.stage-1 .spread { font-size: 32px }
  .page--overview.stage-1 .ov__lead { font-size: 15px }
  .page--overview.stage-1 .ov__panel { transform: none }
  .ov__visual { transition: width 1.5s var(--ease-soft),height 1.5s var(--ease-soft); height: 100% }
  .loc__detail { grid-template-columns: 1fr; grid-template-rows: 36% 64% }
  .loc__map img { object-position: 50% 50% }
  .loc__body { padding: 20px var(--gutter) 130px; gap: 10px; justify-content: flex-start; overflow-y: auto }
  .loc__body .heading { font-size: 18px; line-height: 26px }
  .loc__points { grid-template-columns: 1fr; margin-top: 2px }
  .loc__points li { padding: 11px 0; gap: 4px }
  .loc__points b { font-size: 14px }
  .loc__points h3 { font-size: 15px }
  .loc__points p { font-size: 13px }
  .page--location .cg-note { left: var(--gutter); right: var(--gutter) }
  .page--location.show-detail .cg-note { top: calc(36% - 30px); bottom: auto; background: rgba(255,255,255,.88); padding: 3px 8px }
  .page--park.is-shifted .park__head { left: var(--gutter); top: 26% }
  .page--park.is-shifted .park__head .spread { font-size: 40px }
  .park__copy, .park__nav { left: var(--gutter) }
  .park__copy { top: 40%; width: calc(100vw - 2*var(--gutter)) }
  .park__desc h3 { font-size: 22px }
  .park__inset { right: var(--gutter); bottom: 30vh; width: 46vw }
  .park__inset em { left: 10px; top: 10px; padding: 5px 10px; font-size: 13px }
  .park__desc p { font-size: 15px }
  .park__nav { bottom: 22vh }
  .park__nav button { font-size: 14px }
  .park__veil { background: linear-gradient(0deg,rgba(8,14,28,.75) 0%,rgba(8,14,28,.2) 60%,rgba(8,14,28,.35) 100%) }
  .page--units { padding: calc(var(--bar-h) + 14px)0 70px }
  /* 진행 막대와 아래 안내 문구(2줄)가 겹치지 않게 */
  .units__head, .units__track { padding-left: var(--gutter) }
  .units__bar { margin-left: var(--gutter) }
  .units__hint { display: none }
  /* 모바일도 PC 처럼: 세로로 밀면 카드가 한 장씩 옆으로 넘어간다(가로 스와이프 불필요) */
  .units__viewport { margin-top: 16px; touch-action: none }
  .units__track { gap: 12px }
  .ucard { width: 86vw }
  .ucard__type { font-size: 20px }
  .contact__grid { grid-template-columns: 1fr; min-height: 0; padding: calc(var(--bar-h) + 16px) var(--gutter) 36px; gap: 26px }
  .contact__call b { font-size: 30px }
  .contact__places { grid-template-columns: 1fr }
  .lead { padding: 22px 18px }
  .foot { padding: 36px var(--gutter) 120px }
  .sheet__panel { padding: 40px 20px 26px }
}
@media (max-width:360px) {
  .hero__title { font-size: 40px }
  .display--xl { font-size: 46px }
}
/* =================== 서브페이지(일반 스크롤) =================== */
body.is-sub { overflow: visible; height: auto; background: var(--c-ivory); color: var(--c-navy); overscroll-behavior: auto }
html:has(body.is-sub) { height: auto }
.is-sub .topbar { transition: color .8s var(--ease-soft),transform .55s var(--ease-layout),background-color .45s ease,border-color .45s ease; border-bottom: 1px solid transparent }
body.is-sub.bar-solid .topbar { background: rgba(250,248,244,.96); border-bottom-color: rgba(21,33,58,.1) }
body.is-sub.bar-hide .topbar { transform: translateY(-100%) }
body.is-sub.drawer-open .topbar { background: transparent; border-bottom-color: transparent; transform: none }
.hl-wrap { width: min(1240px,calc(100% - 2*var(--gutter))); margin-left: auto; margin-right: auto }
.sub-hero { position: relative; height: clamp(300px,29vw,440px); overflow: hidden; background: #0e1626; color: #fff; display: grid; place-items: center }
.sub-hero__bg, .sub-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100% }
.sub-hero__bg img { object-fit: cover; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.22,1,.36,1) }
.sub-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,14,28,.62) 0%,rgba(8,14,28,.35) 55%,rgba(8,14,28,.5) 100%) }
body.sub-go .sub-hero__bg img { transform: scale(1) }
.sub-hero__copy { position: relative; z-index: 1; text-align: center; padding-top: 40px }
.sub-hero__en { font: 500 50px/1.1 var(--f-en); letter-spacing: .02em; margin-right: -.02em; opacity: 0; transition: letter-spacing 2.8s var(--ease-soft),margin-right 2.8s var(--ease-soft),opacity 1.6s var(--ease-soft) }
body.sub-go .sub-hero__en { letter-spacing: .22em; margin-right: -.22em; opacity: 1 }
.sub-hero__ko { margin-top: 12px; font-size: 15px; font-weight: 400; letter-spacing: .04em; opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease-soft) .35s,transform 1.4s var(--ease-layout) .35s }
body.sub-go .sub-hero__ko { opacity: .9; transform: none }
/* 보이는 순간 올라오기 */
[data-reveal] { opacity: 0%; transform: translateY(40px); transition: opacity 1s var(--ease-soft) var(--d, 0s),transform 1.1s var(--ease-layout) var(--d, 0s) }
[data-reveal].hl-is-in { opacity: 100%; transform: none }
.sub-block { padding: 90px 0 0 }
.sub-block--first { padding-top: 100px }
.sub-head { display: grid; gap: 12px; margin-bottom: 28px }
.sub-head--lead { margin-bottom: 44px }
.sub-title { font-size: 34px; line-height: 1.35; font-weight: 400; letter-spacing: -0.02em }
.sub-desc { font-size: 16px; line-height: 1.75; color: #4a5266; letter-spacing: -0.035em; max-width: 760px }
.sub-figure { background: #fff; border: 1px solid rgba(21,33,58,.08) }
.sub-figure .zoomable img { display: block; inline-size: 100%; height: auto }
/* 사업개요 */
.sum-intro { padding-top: 100px; display: grid; grid-template-columns: 300px 260px 1fr; gap: 48px; align-items: center }
.sum-card { position: relative; padding: 70px 0 70px 34px }
.sum-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 90%; border: 4px solid var(--c-navy); border-right: 0 }
.sum-card::after { content: ""; position: absolute; left: 0; top: 0; width: 90%; height: 100%; border-right: 4px solid var(--c-navy); clip-path: inset(0 0 0 0); top: 0; height: 18% }
.sum-card__line { font-size: 34px; line-height: 1.3; letter-spacing: -0.06em; font-weight: 300 }
.sum-card__line b { font-weight: 700 }
.sum-card__line--2 { padding-left: 1em }
.sum-card__name { margin-top: 26px; font-size: 15px; font-weight: 700; letter-spacing: -0.04em }
.sum-photo { height: 380px; overflow: hidden }
.sum-photo img { inline-size: 100%; height: 100%; object-fit: cover }
.sum-facts { display: grid; border-top: 2px solid var(--c-navy) }
.sum-facts>div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(21,33,58,.12) }
.sum-facts dt { font-size: 14px; font-weight: 700; letter-spacing: -0.045em }
.sum-facts dd { font-size: 14px; color: #3d4559; letter-spacing: -0.045em }
.tbl-wrap { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; letter-spacing: -0.03em; text-align: center; min-width: 560px }
.tbl th, .tbl td { padding: 15px 10px; border-bottom: 1px solid rgba(21,33,58,.12) }
.tbl thead th { background: var(--c-navy); color: #fff; font-weight: 500 }
.tbl tbody th { font: 500 17px var(--f-en) }
.tbl tfoot th, .tbl tfoot td { font-weight: 700; background: var(--c-beige) }
.btn-line { height: 54px; padding: 0 30px; border: 1px solid var(--c-navy); color: var(--c-navy); font-size: 15px; font-weight: 500; letter-spacing: -0.02em; transition: background-color .4s ease,color .4s ease }
.btn-line:hover, .btn-line:focus-visible { background: var(--c-navy); color: #fff }
/* 입지 */
.sub-figure--map { margin-bottom: 40px }
.loc-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid rgba(21,33,58,.18) }
.loc-cards li { display: grid; gap: 8px; align-content: start; padding: 30px 26px 34px; border-right: 1px solid rgba(21,33,58,.1) }
.loc-cards li:last-child { border-right: 0 }
.loc-cards svg { width: 40px; height: 40px; fill: none; stroke: var(--c-navy); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.loc-cards b { font: 500 15px/1 var(--f-en); letter-spacing: .1em; color: var(--c-green-deep); margin-top: 8px }
.loc-cards h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.04em }
.loc-cards p { font-size: 14px; line-height: 1.65; color: #4a5266; letter-spacing: -0.035em }
/* 프리미엄: 사진·글이 좌우로 엇갈리는 목록 */
.prem-title { font: 500 40px/1.45 var(--f-ko); letter-spacing: -.025em; color: var(--c-navy) }
.prem-list { display: grid; gap: 90px }
.prem { display: grid; grid-template-columns: 58% 1fr; gap: 56px; align-items: center }
.prem--r { grid-template-columns: 1fr 58% }
.prem--r figure { order: 2 }
.prem figure { position: relative; aspect-ratio: 16/10; overflow: hidden }
.prem figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-layout) }
.prem.hl-is-in figure img { transform: none }
.prem figcaption { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.5) }
.prem__txt { display: grid; gap: 14px }
.prem__no { font: 400 20px/1 var(--f-en); color: var(--c-taupe) }
.prem__no b { font-weight: 600; color: var(--c-green-deep); letter-spacing: .04em; margin-left: 4px }
.prem__txt h3 { font-size: 28px; line-height: 1.35; font-weight: 700; letter-spacing: -0.05em }
.prem__txt p:last-child { font-size: 16px; line-height: 1.75; color: #4a5266; letter-spacing: -0.035em }
/* ── 관심 고객 등록 화면 ── */
.reg { display: grid; grid-template-columns: 1fr minmax(360px,520px); gap: 70px; align-items: start }
.reg__lead { display: grid; gap: 16px; padding-top: 20px }
.reg__form .lead { border: 1px solid rgba(21,33,58,.1) }
.reg__form .agree-body { max-height: 260px }
/* 오시는길 */
.cont__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 54px; align-items: start }
.cont__info { display: grid; gap: 34px }
.cont__info h3 { font-size: 14px; font-weight: 700; letter-spacing: .3em; margin-bottom: 10px }
.cont__info p { font-size: 17px; letter-spacing: -0.03em }
.cont__tel { font: 500 40px/1 var(--f-en); color: var(--c-navy) }
/* 안내 상자 */
.hl-notice { margin-top: 100px; margin-bottom: 110px; display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: center; background: #ecebe7; padding: 34px 40px }
.notice__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--c-navy); color: #fff; display: grid; place-items: center; font: 600 22px/1 var(--f-en) }
.hl-notice ul { display: grid; gap: 4px; font-size: 13px; line-height: 1.7; color: #5a6276; letter-spacing: -0.03em }
.page-register .sub-block, .page-news .sub-block { padding-bottom: 110px }
.news__list { border-top: 2px solid var(--c-navy) }
.news__list li { border-bottom: 1px solid rgba(21,33,58,.12) }
.news__list a { display: grid; grid-template-columns: 130px 1fr 110px 24px; gap: 20px; align-items: center; padding: 24px 6px; transition: background-color .35s ease }
.news__list a:hover, .news__list a:focus-visible { background: rgba(21,33,58,.04) }
.news__src { font-size: 14px; font-weight: 700; color: var(--c-green-deep); letter-spacing: -0.03em }
.news__tit { font-size: 17px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.5 }
.news__date { font: 400 15px/1 var(--f-en); color: #7a8193; text-align: right }
.news__go { font: 400 18px/1 var(--f-en); color: var(--c-navy); transition: transform .35s var(--ease-layout) }
.news__list a:hover .news__go { transform: translateX(4px) }
.news__note { margin-top: 22px; font-size: 13px; color: #7a8193 }
/* 서브 바닥글: 메인용 왼쪽 띠 여백 없이 */
.sub-foot .foot { padding-left: var(--gutter); padding-right: var(--gutter) }
@media (max-width:1100px) {
  .sum-intro { grid-template-columns: 1fr 1fr }
  .sum-facts { grid-column: 1/-1 }
  .loc-cards { grid-template-columns: 1fr 1fr }
  .loc-cards li:nth-child(2) { border-right: 0 }
  .loc-cards li:nth-child(-n+2) { border-bottom: 1px solid rgba(21,33,58,.1) }
}
@media (max-width:768px),(min-width:769px) and (max-width:1366px) and (orientation:portrait) {
  .sub-hero { height: 260px }
  .sub-hero__en { font-size: 30px }
  .sub-hero__ko { font-size: 13px }
  .sub-block { padding-top: 60px }
  .sub-block--first { padding-top: 56px }
  .sub-head--lead { margin-bottom: 28px }
  .sub-title { font-size: 28px }
  .sub-desc { font-size: 14.5px }
  .sum-intro { grid-template-columns: 1fr; gap: 30px; padding-top: 56px }
  .sum-card { padding: 44px 0 44px 26px }
  .sum-card__line { font-size: 27px }
  .sum-photo { height: 260px }
  .sum-facts>div { grid-template-columns: 100px 1fr }
  .sum-facts dt, .sum-facts dd { font-size: 13px }
  .tbl { font-size: 13.5px; min-width: 0 }
  .tbl th, .tbl td { padding: 12px 4px }
  .tbl tbody th { font-size: 15px }
  .loc-cards { grid-template-columns: 1fr }
  .loc-cards li { border-right: 0; border-bottom: 1px solid rgba(21,33,58,.1); padding: 24px 4px }
  .prem-title { font-size: 30px }
  .prem-list { gap: 56px }
  .prem, .prem--r { grid-template-columns: 1fr; gap: 20px }
  .prem--r figure { order: 0 }
  .prem__txt h3 { font-size: 21px }
  .prem__txt p:last-child { font-size: 14.5px }
  .reg { grid-template-columns: 1fr; gap: 30px }
  .cont__grid { grid-template-columns: 1fr; gap: 30px }
  .cont__tel { font-size: 32px }
  .news__list a { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 18px 2px }
  .news__src { grid-column: 1 }
  .news__date { grid-column: 2; grid-row: 1 }
  .news__tit { grid-column: 1/-1; font-size: 15.5px }
  .news__go { display: none }
  .hl-notice { grid-template-columns: 1fr; gap: 14px; padding: 26px 22px; margin-top: 60px; margin-bottom: 70px }
  .hl-notice ul { font-size: 12px }
  .drawer__list>li>a, .drawer__list>li>button { padding: 20px 0; font-size: 24px }
  .drawer__sub a { font-size: 16px }
}
@media (prefers-reduced-motion:reduce) {
  [data-reveal] { opacity: 100%; transform: none }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important }
}
/* ---------- 상품안내(평면정보·인테리어·E-모델하우스) — 타입 탭 ---------- */
.ptabs__bar { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px }
.ptabs__bar button { min-width: 108px; padding: 14px 20px; border: 1px solid #d6d2ca; background: #fff; color: var(--c-navy); font: 500 15px/1.2 var(--f-ko); letter-spacing: -0.02em; transition: background .3s var(--ease-soft),color .3s var(--ease-soft),border-color .3s var(--ease-soft) }
.ptabs__bar button small { display: block; margin-top: 4px; font-size: 11px; color: var(--c-taupe) }
.ptabs__bar button.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff }
.ptabs__bar button.is-on small { color: rgba(255,255,255,.7) }
.ptabs__bar button:focus-visible { outline: 2px solid var(--c-green-deep); outline-offset: 2px }
@media (hover:hover) and (pointer:fine) {
  .ptabs__bar button:not(.is-on):hover { border-color: var(--c-navy) }
}
.ptab[hidden] { display: none }
.ptab__docs { display: flex; justify-content: flex-end; gap: 8px; max-width: 1000px; margin: 0 auto 16px }
.docbtn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--c-navy); color: var(--c-navy); font-size: 14px; letter-spacing: -0.02em; transition: background .3s var(--ease-soft),color .3s var(--ease-soft) }
.docbtn i { font-style: normal; font-size: 13px }
@media (hover:hover) and (pointer:fine) {
  .docbtn:hover { background: var(--c-navy); color: #fff }
}
.ptab__fig { max-width: 1000px; margin: 0 auto; background: #fff }
.ptab__fig img { display: block; inline-size: 100%; height: auto }
/* E-모델하우스 */
.vr__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px }
.vr__badge { font-size: 14px; color: var(--c-taupe); letter-spacing: -0.02em }
.vr__switch { display: inline-flex; border: 1px solid #d6d2ca }
.vr__switch button { padding: 10px 18px; background: #fff; color: var(--c-navy); font-size: 14px }
.vr__switch button+button { border-left: 1px solid #d6d2ca }
.vr__switch button[aria-pressed="true"] { background: var(--c-green-deep); color: #fff }
.vr__frame { position: relative; aspect-ratio: 16/9.6; background: #1c2436 }
.vr__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.vr__open { margin-top: 12px; text-align: right; font-size: 14px }
.vr__open a { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px }
.vr__open i { font-style: normal }
@media (max-width:768px),(min-width:769px) and (max-width:1366px) and (orientation:portrait) {
  /* 탭 줄은 한 줄 가로 넘김 — 일곱 개를 두세 줄로 쌓으면 그림이 화면 밖으로 밀린다 */
  .ptabs__bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1*var(--gutter)) 24px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter) }
  .ptabs__bar::-webkit-scrollbar { display: none }
  .ptabs__bar button { flex: 0 0 auto; min-width: 0; padding: 12px 16px; font-size: 14px }
  .ptab__docs { justify-content: stretch }
  .docbtn { flex: 1; justify-content: center; padding: 11px 10px; font-size: 13px }
  .vr__frame { aspect-ratio: 4/5 }
  .vr__switch button { padding: 9px 14px; font-size: 13px }
}
.hl-popup { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; visibility: hidden; pointer-events: none; transition: visibility 0s linear .6s }
body.popup-open .hl-popup { visibility: visible; pointer-events: auto; transition: none }
.popup__veil { position: absolute; inset: 0; border: 0; background: rgba(7,11,22,.74); transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.65,0,.35,1); cursor: default }
body.popup-open .popup__veil { transform: scaleY(1) }
/* 팝업이 떠 있는 동안 상단바 오른쪽(전화·메뉴)을 감춘다 — 폰에서 팝업 X 가 메뉴 단추 바로 위에 겹쳐 보였다(대표 10/14) */
.topbar__right { transition: opacity .4s ease }
body.popup-open .topbar__right { opacity: 0%; visibility: hidden; pointer-events: none }
/* 폭은 화면 기준 — 가운데 정렬 격자 안에서 100% 는 내용 폭(400)을 가리켜 폰에서 넘쳤다.
   높이가 낮은 PC 에서는 그림(5:7)+유의문구+하단 막대가 화면 안에 들어오게 높이로도 폭을 묶는다 */
.popup__box { position: relative; width: min(400px,calc(100vw - 30px),calc((var(--vh, 100vh) - 240px)*0.714)); opacity: 0; transform: translateY(28px); transition: opacity .3s ease,transform .3s ease }
body.popup-open .popup__box { opacity: 1; transform: none; transition: opacity .55s ease .48s,transform .75s cubic-bezier(.22,1,.36,1) .48s }
.popup__close { position: absolute; right: -2px; top: -48px; width: 40px; height: 40px }
.popup__close span { position: absolute; left: 8px; top: 19px; width: 24px; height: 2px; background: #fff }
.popup__close span:first-child { transform: rotate(45deg) }
.popup__close span:last-child { transform: rotate(-45deg) }
.popup__viewport { overflow-x: hidden; overflow-y: auto; max-height: calc(var(--vh, 100vh) - 150px); overscroll-behavior: contain; scrollbar-width: none }
.popup__viewport::-webkit-scrollbar { display: none }
.popup__track { display: flex; align-items: flex-start; transition: transform .6s cubic-bezier(.65,0,.35,1) }
.popup__viewport { transition: height .45s cubic-bezier(.65,0,.35,1) }
@media (min-width:769px) and (orientation:landscape) { .popup__track { align-items: stretch } }
.pcard { flex: 0 0 100%; min-width: 0 }
.popup__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px 11px 16px; background: #0d1424; color: #fff; font-size: 13px; letter-spacing: -0.02em }
.popup__today { display: inline-flex; align-items: center; gap: 8px; cursor: pointer }
.popup__today input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid rgba(255,255,255,.55); background: transparent; display: grid; place-items: center }
.popup__today input:checked { background: var(--c-green); border-color: var(--c-green) }
.popup__today input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) }
.popup__nav { display: flex; align-items: center; gap: 4px }
.popup__count { min-width: 44px; text-align: center; font: 500 13px/1 var(--f-en); letter-spacing: .04em }
.popup__count i { margin: 0 6px; font-style: normal; opacity: .35 }
.popup__prev, .popup__next { position: relative; width: 30px; height: 30px }
.popup__prev::before, .popup__next::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid #fff; border-width: 0 0 1.5px 1.5px }
.popup__prev::before { transform: translate(-30%,-50%) rotate(45deg) }
.popup__next::before { transform: translate(-70%,-50%) rotate(-135deg) }
.hl-popup.is-single .popup__nav { display: none }
/* 카드 = GPT 그림 한 장(누르면 링크·등록 창) + 그 아래 HTML 유의문구(작은 글자는 그림에 굽지 않는다) */
.pcard { background: var(--c-navy) }
.pcard__img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer }
.pcard__img img { display: block; inline-size: 100%; height: auto }
.pcard__fine { display: grid; gap: 2px; padding: 8px 14px 10px; background: color-mix(in srgb,var(--c-navy) 82%,#000); font-size: 10.5px; line-height: 1.5; color: rgba(255,255,255,.64); letter-spacing: -0.03em }
@media (hover:hover) and (pointer:fine) {
  .pcard__img:hover img { filter: brightness(1.04) }
}
/* 폰: 팝업이 화면을 꽉 채우지 않게 폭을 줄인다(대표 2026-10-03 「모바일에서 폭이 너무 커서 꽉 참」) */
@media (max-width:480px) {
  /* [2026-10-28 대표 「카톡에서 열면 팝업 아래가 잘린다」] 폭만 보고 높이를 안 봐서, 세로가 짧은 화면(카톡 인앱·작은 폰)에서
     카드(그림+유의문구)가 칸보다 길어 아래를 스크롤해야 보였다(실측 390x626 86px). PC 처럼 화면 높이로도 폭을 묶는다.
     카드 높이 ≈ 폭×1.4 + 여백 34px(유의문구는 아래에서 뺐다) → 칸(화면 − 140px) 안에 들게 폭 ≤ (화면 − 180px) × 5/7 */
  .popup__box { width: min(320px,calc(100vw - 64px),calc((var(--vh, 100vh) - 180px)*0.714)) }
  .popup__close { top: -44px }
  .popup__viewport { max-height: calc(var(--vh, 100vh) - 140px) }
  .pcard__fine { padding: 7px 10px 8px; font-size: 10px }
  .popup__foot { padding: 9px 8px 9px 12px; font-size: 12px }
  /* [2026-10-28] 위에서 폭이 화면 높이로 줄면 「오늘 하루동안 보지 않기」 가 두세 줄로 꺾여 막대가 길어지고 ✕ 가 화면 위로 밀렸다(375x520 실측).
     글은 한 줄로 두고 넘기기 단추를 촘촘히, 그래도 모자라면 넘기기만 다음 줄 오른쪽으로 내린다. */
  .popup__foot { flex-wrap: wrap; column-gap: 6px; row-gap: 2px }
  .popup__today { gap: 6px; white-space: nowrap }
  .popup__nav { margin-left: auto }
  .popup__prev, .popup__next { width: 26px }
  .popup__count { min-width: 34px }
}
/* ---------- 배경음악 단추 — 상단바 글자색을 따른다. 켜져 있으면 막대 4개가 오르내린다. 폰은 글자 없이 막대만(10/16 폰도 켬) ---------- */
.bgm { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: inherit; font: 500 12px/1 var(--f-en); letter-spacing: .18em; opacity: .85; transition: opacity .3s var(--ease-soft) }
.bgm:hover { opacity: 1 }
.bgm__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px }
.bgm__bars i { width: 2px; height: 3px; background: currentColor; transition: height .3s var(--ease-soft) }
.bgm.is-on .bgm__bars i { animation: bgm-bar 1s ease-in-out infinite alternate }
.bgm.is-on .bgm__bars i:nth-child(2) { animation-delay: -.35s; animation-duration: .8s }
.bgm.is-on .bgm__bars i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.15s }
.bgm.is-on .bgm__bars i:nth-child(4) { animation-delay: -.15s; animation-duration: .9s }
@keyframes bgm-bar { 0% { height: 3px } 100% { height: 14px } }
@media (max-width:768px) {
  .bgm { justify-content: center; min-inline-size: 40px; min-block-size: 40px; padding: 0 }
  .bgm__txt { display: none }
}
@media (prefers-reduced-motion:reduce) {
  .bgm.is-on .bgm__bars i { animation: none; height: 10px }
}
/* ---------- 팝업 PC: 카드 세 장을 나란히 한 번에(대표 2026-10-03) — 폰·세로 태블릿은 위의 한 장씩 넘기기 그대로 ----------
   카드 폭 = 330px · (화면 높이 − 닫기·유의문구·하단 막대 자리) × 5/7 · (화면 폭 − 여백) ÷ 3 중 가장 작은 값 */
@media (min-width:769px) and (orientation:landscape) {
  .popup__box { --pcw: min(330px, calc((var(--vh, 100vh) - 250px) * 0.714), calc((100vw - 120px) / 3)); width: calc(var(--pcw)*3 + 24px) }
  .popup__viewport { overflow: visible; max-height: none }
  .popup__track { gap: 12px; transform: none !important; transition: none }
  .pcard { flex: 0 0 var(--pcw); width: var(--pcw) }
  .popup__nav { display: none }
  .hl-popup.is-single .popup__box { --pcw: min(400px, calc((var(--vh, 100vh) - 250px) * 0.8)); width: var(--pcw) }
  /* 두 장일 때는 자리가 남아 더 크게(대표 10/15 「pc에서 팝업 좀더 크게」) — 화면 높이 안에 유의문구·하단 막대까지 들어오게 높이로도 묶는다 */
  .popup__box:has(.pcard:nth-child(2):last-child) { --pcw: min(440px, calc((var(--vh, 100vh) - 250px) * 0.714), calc((100vw - 120px) / 2)); width: calc(var(--pcw)*2 + 12px) }
}
.mark--logo { gap: 0 }
.mark--logo svg { display: block; height: 1.3em; width: auto }
.siteplans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.siteplans .sub-figure { margin: 0 }
.sub-figure__cap { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--c-navy); text-align: center }
@media (max-width:768px) {
  .siteplans { grid-template-columns: 1fr }
}
.cont__grid--solo { grid-template-columns: 1fr }
.cont__grid--solo .cont__info { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; align-items: start }
@media (max-width:768px) {
  .cont__grid--solo .cont__info { grid-template-columns: 1fr; gap: 30px }
}
.hero__shot--video picture, .hero__shot--video video { position: absolute; inset: 0; width: 100%; height: 100% }
.hero__shot--video img { animation: none }
.hero__shot--video video { object-fit: cover; opacity: 0; transition: opacity .8s ease }
.hero__shot--video video.is-playing { opacity: 1 }

/* [2026-10-28 대표 「팝업 가이드문구는 전부 없애」] 팝업 카드 아래 ※ 유의문구를 화면에서 뺀다(PC·폰 모두).
   문구 원본은 site-config.json 팝업.카드[].주석 에 그대로 있다 — 다시 보이게 하려면 이 규칙만 지우면 된다. */
.pcard__fine { display: none }

/* 전환 개선: 첫 화면 진입점 + 선택 일정 표시. 접수·전환 이벤트는 기존 공용 로직 사용. */
.hero__action { display: grid; justify-items: center; gap: 10px; }
.conversion-button { min-height: 54px; padding: 14px 28px; background: var(--c-green-deep); color: #fff; font-size: 17px; font-weight: 700; border: 1px solid rgba(255,255,255,.6); cursor: pointer; }
.conversion-button:hover { background: var(--c-navy); }
.conversion-button:focus-visible, .orb:focus-visible, .lead__schedule summary:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hero__action p { font-size: 14px; color: #fff; text-shadow: 0 1px 4px #080e1c; }
.hero__copy { gap: 16px; }
.hero__title { font-size: clamp(48px,6.4vw,96px); }
.lead__guide { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.lead__schedule { margin: 4px 0 18px; border-block: 1px solid #c7c7bf; }
.lead__schedule summary { padding: 14px 0; cursor: pointer; font-size: 14px; font-weight: 500; }
.lead__schedule .row2 { padding: 4px 0 12px; }
.orb__separator { display: none; }
@media (max-width:768px), (max-width:1366px) and (orientation:portrait) {
  .hero__copy { gap: 12px; }
  .hero__title { font-size: clamp(34px,8vw,46px); }
  .hero__action p { font-size: 12px; }
  .conversion-button { min-height: 50px; font-size: 15px; padding: 12px 20px; }
  .sheet__panel .lead { padding: 16px 0; }
}
@media (max-height:700px) {
  .hero__copy { gap: 9px; }
  .hero__title { font-size: clamp(30px,6vw,64px); }
  .hero__tag { font-size: 16px; padding: 8px 16px; }
  .hero__lead { font-size: 18px; }
  .hero__action { gap: 6px; }
  .page--hero .cue { display: none; }
}

/* 한국어 히어로: 상품 특화와 적용 조건을 같은 화면에 표시 */
.hero__title--ko { font-family: var(--f-ko); font-size: clamp(48px,5vw,76px); font-weight: 500; line-height: 1.22; letter-spacing: -.035em; margin-right: 0; }
.hero__condition { max-width: 42ch; font-size: 13px; line-height: 1.6; color: #fff; text-shadow: 0 1px 4px #080e1c; }
@media (max-width:768px), (max-width:1366px) and (orientation:portrait) {
  .hero__title--ko { font-size: clamp(30px,8vw,44px); }
  .hero__copy .hero__lead { font-size: 18px; }
  .hero__condition { font-size: 11px; }
}
@media (max-height:700px) { .hero__title--ko { font-size: clamp(28px,5vw,50px); } }

.hero__name { font-family: var(--f-ko); font-size: 16px; font-weight: 500; line-height: 1.5; color: #fff; }
@media (max-width:768px), (max-width:1366px) and (orientation:portrait) { .hero__name { font-size: 14px; } }

/* 히어로 카피 집중: 밝은 사진 위 가독성과 여백 */
.page--hero .hero__veil { background: linear-gradient(180deg,rgba(8,14,28,.35),rgba(8,14,28,.28) 20%,rgba(8,14,28,.62) 48%,rgba(8,14,28,.52) 75%,rgba(8,14,28,.4)); }
.page--hero .hero__copy { gap: 24px; }
.hero__title--ko { font-weight: 700; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.page--hero .hero__lead { font-family: var(--f-ko); font-weight: 400; font-size: 22px; line-height: 1.6; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.page--hero .hero__action { margin-top: 8px; }
@media (max-width:768px), (max-width:1366px) and (orientation:portrait) {
 .page--hero .hero__copy { gap: 20px; }
 .page--hero .hero__title--ko { font-size: clamp(30px,8.2vw,46px); line-height: 1.35; }
 .page--hero .hero__lead { font-size: 17px; }
}
@media (max-height:600px) { .page--hero .hero__copy { gap: 14px; } }

/* 메인 카피 명조: 지나치게 가는 획을 피하고 사진 위 판독성 유지 */
.page--hero .hero__title--ko { font-family: var(--f-serif); font-weight: 400; letter-spacing: -.025em; line-height: 1.4; }
.page--hero .hero__lead { font-family: var(--f-serif); font-weight: 400; font-size: 21px; }
@media (max-width:768px), (max-width:1366px) and (orientation:portrait) {
 .page--hero .hero__title--ko { font-size: clamp(29px,8vw,44px); line-height: 1.45; }
 .page--hero .hero__lead { font-size: 17px; }
}

/* 모바일: 상단 벽면 여백에 카피를 두어 테라스 가구를 가리지 않는다. */
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
  .page--hero .hero__copy { top: clamp(120px,17vh,200px); transform: none; gap: 12px; }
  .page--hero .hero__title--ko { font-size: clamp(28px,7.6vw,38px); line-height: 1.3; }
  .page--hero .hero__lead { font-size: 16px; line-height: 1.5; }
  .page--hero .hero__action { margin-top: 4px; }
  .page--hero .hero__veil { background: linear-gradient(180deg,rgba(8,14,28,.35) 0%,rgba(8,14,28,.55) 16%,rgba(8,14,28,.42) 34%,rgba(8,14,28,.08) 48%,rgba(8,14,28,.06) 73%,rgba(8,14,28,.42) 100%); }
}

/* 한 장면으로 이어지는 테라스 24시간 조명 연출. */
.hero__media { overflow: hidden; }
.hero__shot img { animation: none; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .65s ease; pointer-events: none; }
.hero__video.is-playing { opacity: 1; }
@media (min-width:769px) and (orientation:landscape) {
 .page--hero .hero__veil { background: radial-gradient(ellipse at center,rgba(8,14,28,.4),rgba(8,14,28,.04) 65%),linear-gradient(180deg,rgba(8,14,28,.25),transparent 35%,transparent 70%,rgba(8,14,28,.3)); }
}
@media (prefers-reduced-motion:reduce) { .hero__video { transition: none; } }

/* 팝업 뒤에서 소진되지 않는 빛결 활자: 대각선 마스크와 짧은 잔상이 제자리에서 합쳐진다. */
body.hero-type-ready .hero__title .hl-line { overflow: visible; }
body.hero-type-ready .hero__title .hl-line>span { clip-path: none; transform: none; transition: none; }
body.hero-type-ready .hero__lead { opacity: 1; transform: none; transition: none; }
.hero-glyph { position: relative; display: inline-block; white-space: pre; }
.hero-glyph__ink { display: inline-block; }
.hero-glyph__echo { position: absolute; inset: 0; color: rgba(255,224,180,.52); pointer-events: none; opacity: 0; }
body.hero-type-ready .hero-glyph__ink { opacity: 0; clip-path: polygon(0 0,0 0,-40% 100%,-40% 100%); }
body.hero-type-playing .hero-glyph__ink { animation: terrace-ink 1050ms var(--ease-layout) var(--glyph-delay) both; }
body.hero-type-playing .hero-glyph__echo { animation: terrace-echo 1050ms var(--ease-soft) var(--glyph-delay) both; }
body.hero-type-playing .hero__lead .hero-glyph__ink, body.hero-type-playing .hero__lead .hero-glyph__echo { animation-duration: 880ms; }
@keyframes terrace-ink {
  0% { opacity: 0; clip-path: polygon(0 0,0 0,-40% 100%,-40% 100%); transform: perspective(420px) rotateY(-22deg) translateX(.10em); }
  26% { opacity: 1; }
  78% { clip-path: polygon(0 0,140% 0,100% 100%,0 100%); }
  100% { opacity: 1; clip-path: polygon(0 0,140% 0,100% 100%,0 100%); transform: perspective(420px) rotateY(0) translateX(0); }
}
@keyframes terrace-echo {
  0% { opacity: 0; clip-path: polygon(0 0,0 0,-40% 100%,-40% 100%); transform: translateX(-.075em); }
  24% { opacity: .65; clip-path: polygon(0 0,140% 0,100% 100%,0 100%); }
  72%,100% { opacity: 0; clip-path: polygon(0 0,140% 0,100% 100%,0 100%); transform: translateX(0); }
}
@media (prefers-reduced-motion:reduce) {
  body.hero-type-ready .hero-glyph__ink, body.hero-type-playing .hero-glyph__ink { animation: none; opacity: 1; clip-path: none; transform: none; }
  .hero-glyph__echo { display: none; }
}

.hero-spoken { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 히어로 다음, 공식 브랜드 모델의 크림 톤 에디토리얼 화면. */
.page--brand { background: #e5e8e2; color: var(--c-navy); }
.brand__photo { position: absolute; right: 0; bottom: 0; width: 53%; height: 100%; }
.brand__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.brand__copy { position: absolute; z-index: 1; left: calc(var(--gutter) + 100px); top: 49%; transform: translateY(-50%); width: calc(44% - 100px); max-width: 620px; }
.brand__eyebrow { font: 500 12px/1.4 var(--f-en); letter-spacing: .22em; color: #5b645e; }
.brand__title { margin-top: 24px; font: 400 clamp(36px,4.8vw,74px)/1.34 var(--f-serif); letter-spacing: -.045em; }
.brand__lead { margin-top: 24px; font-size: 18px; line-height: 1.7; color: #4c5855; }
.brand__model { margin-top: 30px; font-size: 14px; line-height: 1.6; color: #5b645e; }
.brand__model strong { margin-left: 9px; font-weight: 600; color: var(--c-navy); }
.brand__next { display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(21,33,58,.35); background: transparent; color: var(--c-navy); font: inherit; font-size: 14px; cursor: pointer; }
.brand__next span { font-size: 20px; }
.brand__next:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .brand__photo { width: 100%; height: 58%; }
 .brand__photo img { object-position: 50% 0; }
 .brand__copy { left: var(--gutter); right: var(--gutter); top: 108px; width: auto; max-width: none; transform: none; }
 .brand__eyebrow { font-size: 10px; letter-spacing: .18em; }
 .brand__title { margin-top: 14px; font-size: clamp(30px,7.8vw,42px); line-height: 1.35; }
 .brand__lead { margin-top: 16px; font-size: 15px; }
 .brand__model { margin-top: 16px; font-size: 12px; }
 .brand__next { margin-top: 14px; min-height: 44px; gap: 18px; font-size: 13px; }
}
@media (max-height:740px) and (max-width:768px) {
 .brand__copy { top: 90px; }
 .brand__title { margin-top: 10px; font-size: 28px; line-height: 1.25; }
 .brand__lead { display: none; }
 .brand__model { margin-top: 12px; }
 .brand__next { margin-top: 6px; }
}

@media (min-width:769px) and (orientation:landscape) and (max-height:650px) {
 .brand__copy { top: 54%; }
 .brand__title { margin-top: 12px; font-size: clamp(32px,4.4vw,48px); line-height: 1.25; }
 .brand__lead { margin-top: 12px; font-size: 15px; }
 .brand__model { margin-top: 14px; font-size: 12px; }
 .brand__next { margin-top: 10px; font-size: 13px; }
}

/* 서브페이지 제목 기준: 한글 고딕, 단어 단위 줄바꿈, 읽을 수 있는 행간. */
body.is-sub .sub-head { gap: 14px; }
body.is-sub .sub-head :is(.prem-title,.sub-title,.heading) { font-family: var(--f-ko); font-weight: 500; line-height: 1.45; letter-spacing: -.025em; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; max-width: 28em; }
body.is-sub .sub-desc { font-size: 16px; line-height: 1.8; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: normal; max-width: 46em; }
body.is-sub .sub-head--lead { margin-bottom: 36px; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 body.is-sub .prem-title { font-size: clamp(28px,7.3vw,30px); }
 body.is-sub .sub-desc { font-size: 15px; line-height: 1.8; }
 body.is-sub .sub-head--lead { margin-bottom: 28px; }
}
/* 프리미엄_V2 M07 책자형 인테리어: 평형 꺾쇠 표기와 크기가 다른 좌우 사진. */
.page--interior-story { background: var(--c-ivory); color: var(--c-navy); }
.interior-story__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; }
.interior-story__inner { position: relative; width: min(1180px,calc(100% - 2*var(--gutter) - 100px)); margin-left: calc(var(--gutter) + 100px); padding: calc(var(--bar-h) + 64px) 0 90px; }
.story-head-wash { position: absolute; top: 110px; right: 0; width: 62%; opacity: .14; pointer-events: none; mask-image: linear-gradient(90deg,transparent,#000 45%),linear-gradient(0deg,transparent,#000 80%); mask-composite: intersect; }
.interior-story__head { position: relative; margin-bottom: 110px; }
.interior-story__head>p { font-size: 13px; letter-spacing: .06em; color: #667068; }
.interior-story__head h2 { margin-top: 20px; font: 400 clamp(34px,4vw,58px)/1.45 var(--f-serif); letter-spacing: -.04em; }
.interior-story__head>span { display: block; margin-top: 24px; font-size: 16px; line-height: 1.8; color: #535f59; max-width: 25em; }
.story-type { margin: 95px 0 45px; }
.story-type>p { display: inline-block; position: relative; padding: 24px 0 0 28px; font: 400 58px/1 var(--f-en); letter-spacing: -.03em; }
.story-type>p::before { content: ""; position: absolute; left: 0; top: 0; width: 175px; height: 90px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; pointer-events: none; }
.story-type>p::after { content: ""; position: absolute; left: 0; top: 0; width: 32px; border-top: 1px solid currentColor; transform: rotate(45deg); transform-origin: left top; }
.story-type>span { display: block; margin: 17px 0 0 28px; font-size: 13px; color: #68716b; }
.story-row { width: 88%; margin: 0 0 100px; }
.story-row:nth-of-type(even) { width: 74%; margin-left: auto; }
.story-figure { overflow: hidden; }
.story-figure img { display: block; width: 100%; height: auto; }
.story-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-top: 18px; }
.story-caption>p { font-size: 12px; line-height: 1.7; color: #667068; }
.story-caption h3 { font: 400 20px/1.6 var(--f-serif); letter-spacing: -.025em; text-wrap: balance; }
/* 사진마다 한 번: 좌우 커튼, 깊이가 풀리는 이미지, 뒤따르는 짧은 문구. */
.interior-story--motion .story-figure { position: relative; opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-soft),transform 1.5s var(--ease-layout); }
.interior-story--motion .story-figure::after { content: ""; position: absolute; inset: -1px; background: var(--c-ivory); transform: scaleX(1); transform-origin: right center; transition: transform 1.5s var(--ease-wipe); pointer-events: none; }
.interior-story--motion .story-row:nth-of-type(even) .story-figure::after { transform-origin: left center; }
.interior-story--motion .story-figure img { transform: scale(1.09); transition: transform 2.6s var(--ease-layout); }
.interior-story--motion .story-caption { opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease-soft) .35s,transform 1.3s var(--ease-layout) .35s; }
.interior-story--motion .story-row.is-seen .story-figure,
.interior-story--motion .story-row.is-seen .story-caption { opacity: 1; transform: none; }
.interior-story--motion .story-row.is-seen .story-figure::after { transform: scaleX(0); }
.interior-story--motion .story-row.is-seen .story-figure img { transform: none; }
.interior-story__end { padding: 30px 0 0; }
.interior-story__end h3 { font: 400 32px/1.5 var(--f-serif); letter-spacing: -.03em; }
.interior-story__end .conversion-button { margin-top: 28px; }
.interior-story__end>p { margin-top: 26px; max-width: 42em; color: #68716b; font-size: 12px; line-height: 1.8; }
.interior-story__end .brand__next { display: flex; width: fit-content; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .interior-story__inner { width: calc(100% - 2*var(--gutter)); margin-left: var(--gutter); padding-top: 120px; padding-bottom: 90px; }
 .story-head-wash { top: 90px; width: 92%; }
 .interior-story__head { margin-bottom: 66px; }
 .interior-story__head h2 { font-size: 30px; line-height: 1.5; }
 .interior-story__head>span { font-size: 14px; }
 .story-type { margin: 66px 0 34px; }
 .story-type>p { padding: 20px 0 0 22px; font-size: 43px; }
 .story-type>p::before { width: 145px; height: 72px; }
 .story-type>p::after { width: 25px; }
 .story-type>span { margin-left: 22px; }
 .story-row { width: 100%; margin-bottom: 62px; }
 .story-row:nth-of-type(even) { width: 82%; }
 .story-caption { display: block; margin-top: 12px; }
 .story-caption h3 { margin-top: 5px; font-size: 17px; line-height: 1.65; }
 .story-caption>p { font-size: 11px; }
 .interior-story__end h3 { font-size: 28px; }
}
@media (prefers-reduced-motion:reduce) {
 .interior-story--motion .story-figure, .interior-story--motion .story-figure img, .interior-story--motion .story-caption { opacity: 1; transform: none; transition: none; }
 .interior-story--motion .story-figure::after { display: none; }
}

body.is-sub .prem__txt h3 { font-weight: 500; line-height: 1.5; letter-spacing: -.025em; word-break: keep-all; text-wrap: balance; }

/* 긴 사진 구간에서는 헤더 아래 글자·사진이 비치지 않게 한다. */
body.story-scrolled .topbar { background: rgba(250,248,244,.97); border-bottom: 1px solid rgba(21,33,58,.08); }
.story-caption { display: block; }
.story-caption h3 { margin-top: 6px; max-width: 26em; }
body.is-sub .reg__lead .heading { font-weight: 500; line-height: 1.45; letter-spacing: -.025em; word-break: keep-all; text-wrap: balance; }

/* 사진·문구 한 화면 단위 정렬: 브라우저의 네이티브 스크롤 스냅 사용. */
.interior-story__scroll { scroll-snap-type: none; scroll-padding-top: 0; }
.interior-story__inner { padding-top: var(--bar-h); padding-bottom: 0; }
.interior-story__head,
.story-row,
.interior-story__end { scroll-snap-align: center; scroll-snap-stop: normal; min-height: 0; box-sizing: border-box; }
.interior-story__head { display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; padding: 32px 0; }
.story-row { display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; padding: 30px 0; }
.story-row .story-type { margin: 0 0 24px; }
.story-row .story-type>p { font-size: 36px; padding-top: 12px; }
.story-row .story-type>p::before { height: 54px; width: 125px; }
.story-row .story-type>span { margin-top: 10px; }
.story-figure { flex: 0 0 auto; }
.story-figure img { max-height: calc(100dvh - var(--bar-h) - 180px); object-fit: contain; }
.story-row:has(.story-type) .story-figure img { max-height: calc(100dvh - var(--bar-h) - 280px); }
.interior-story__end { display: flex; flex-direction: column; justify-content: center; padding: 32px 0 72px; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .interior-story__head { padding-top: 24px; }
 .story-row { padding: 24px 0; }
 .story-row .story-type { margin-bottom: 28px; }
}

/* 연속된 사진 흐름: 손을 멈춘 위치 가까이에서만 부드럽게 정렬한다. */
.interior-story__head { min-height: min(540px,60dvh); scroll-snap-align: start; }
.story-row { padding: 32px 0; margin-bottom: clamp(28px,5dvh,64px); }
.story-row .story-type { margin-bottom: 24px; }
.interior-story__end { min-height: calc(100dvh - var(--bar-h)); scroll-snap-align: start; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .interior-story__head { min-height: min(440px,52dvh); }
 .story-row { padding: 24px 0; margin-bottom: 36px; }
}

/* 마지막 사진 뒤 신청 안내는 별도 화면으로 정렬하지 않고 본문 흐름에 잇는다. */
.interior-story__end { min-height: 0; scroll-snap-align: none; scroll-snap-stop: normal; justify-content: flex-start; padding: 12px 0 140px; }
.story-row:last-of-type { margin-bottom: 24px; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .interior-story__end { padding-top: 12px; padding-bottom: 180px; }
 .story-row:last-of-type { margin-bottom: 20px; }
}

/* 인테리어는 연속된 본문: 사진·제목 어느 위치에서도 자동 정렬하지 않는다. */
.interior-story__scroll { scroll-snap-type: none; scroll-behavior: auto; }
.interior-story__head, .story-row, .interior-story__end { scroll-snap-align: none; scroll-snap-stop: normal; }

/* 마지막 사진에서 신청 안내로 넘어갈 때 짧은 숨 쉴 여백. */
.interior-story__end { padding-top: 48px; }

/* 사진 사이를 잇는 직접 그린 펜 선. 스크롤과 클릭을 가로막지 않는다. */
.story-row { position: relative; }
.story-sketch-arrow { position: absolute; bottom: -52px; left: 57%; width: 136px; height: 80px; color: #a78f79; opacity: .78; pointer-events: none; overflow: visible; }
.story-row:nth-of-type(even) .story-sketch-arrow { left: 18%; transform: scaleX(-1) rotate(-6deg); }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .story-sketch-arrow { width: 112px; height: 72px; bottom: -50px; left: 49%; }
 .story-row:nth-of-type(even) .story-sketch-arrow { left: 9%; }
}

/* 고리 선 → 화살촉. 분리된 경로로 화살촉의 선행 노출을 막는다. */
.interior-story--motion .story-sketch-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 2.4s linear,opacity 0s; }
.interior-story--motion .story-sketch-arrow .story-arrow-accent { transition: stroke-dashoffset .7s linear .3s,opacity 0s .3s; }
.interior-story--motion .story-sketch-arrow .story-arrow-head { transition: stroke-dashoffset .45s linear 2.4s,opacity 0s 2.4s; }
.interior-story--motion .story-sketch-arrow.is-drawn path { stroke-dashoffset: 0; opacity: 1; }
.interior-story--motion .story-sketch-arrow.is-drawn .story-arrow-accent { opacity: .45; }
@media (prefers-reduced-motion:reduce) {
 .interior-story--motion .story-sketch-arrow path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; transition: none; }
 .interior-story--motion .story-sketch-arrow .story-arrow-accent { opacity: .45; }
}

/* 화면 밖으로 나간 화살표는 즉시 초기화하고, 재진입할 때 다시 그린다. */
.interior-story--motion .story-sketch-arrow:not(.is-drawn) path { transition: none; }

/* 사진이 화면 밖으로 나갔을 때만 대기 상태로 즉시 되돌린다. */
.interior-story--motion .story-row:not(.is-seen) .story-figure,
.interior-story--motion .story-row:not(.is-seen) .story-figure::after,
.interior-story--motion .story-row:not(.is-seen) .story-figure img,
.interior-story--motion .story-row:not(.is-seen) .story-caption { transition: none; }

.foot__music { margin-top: 20px; font-size: 11px; line-height: 1.7; opacity: .7; }
.foot__music a { text-decoration: underline; text-underline-offset: 3px; }

/* 풀스크린 구간의 네이티브 오버레이 스크롤바가 우측 경계에 번쩍이지 않게 한다.
   스크롤 영역 자체와 휠·터치·키보드 동작은 그대로 유지한다. */
.pager .interior-story__scroll,
.pager .contact__scroll,
.pager .ov__panel,
.pager .loc__body { scrollbar-width: none; }
.pager .interior-story__scroll::-webkit-scrollbar,
.pager .contact__scroll::-webkit-scrollbar,
.pager .ov__panel::-webkit-scrollbar,
.pager .loc__body::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 사업개요의 확대 사진은 자신의 경계 안에서만 합성한다. */
.ov__visual { clip-path: inset(0); }

/* 화면 밖 패널은 경계에서 2px 더 밀어 소수점 합성으로 비치지 않게 한다. */
.page--overview:not(.stage-1) .ov__panel { transform: translateX(calc(100% + 2px)); }
.page:not(.hl-is-current) [data-page-scroll]:focus { outline: none; }
[data-page-scroll]:focus-visible { outline-offset: -3px; }
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .page--overview:not(.stage-1) .ov__panel { transform: translateY(calc(100% + 2px)); }
}

/* 사진·문구·연결 화살표가 함께 들어오도록 사진 높이만 조절한다.
   위치 보정·스냅 없이 네이티브 연속 스크롤을 유지한다. */
.story-figure img { max-height: calc(100dvh - var(--bar-h) - 260px); }
.story-row:has(.story-type) .story-figure img { max-height: calc(100dvh - var(--bar-h) - 360px); }

/* 모바일 끝 위치: 주방 사진과 신청 안내를 함께 보여 준다. */
@media (max-width:768px), (min-width:769px) and (max-width:1366px) and (orientation:portrait) {
 .interior-story__end { padding-bottom: clamp(150px,19.67dvh,200px); }
}