@charset "UTF-8";
/* =========================================================
   TRIVN CENTUM · main.css (본페이지 메인)
========================================================= */

.fp { position: relative; }
.fp-sec { position: relative; width: 100%; overflow: hidden; }


/* =========================================================
   SECTION 1 · MAIN VISUAL
========================================================= */
.sec1 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 560px;
    background: #0d1410;
    color: #fff;
}

/* ---------- 배경 미디어 ---------- */
.sec1__media { position: absolute; inset: 0; overflow: hidden; }
.js .sec1__media { opacity: 0; }
.js.is-ready .sec1__media { opacity: 1; transition: opacity 1.8s ease; }

.sec1__layer {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.sec1__layer.is-active { opacity: 1; z-index: 1; }
.sec1__layer picture,
.sec1__poster,
.sec1__img,
.sec1__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}

/* 영상 첫 프레임이 그려지면 포스터와 즉시 교체 (포스터 = 첫 프레임) */
.sec1__video { opacity: 0; }
.sec1__layer.is-playing .sec1__video { opacity: 1; }

/* 정지 이미지는 천천히 줌 → 영상처럼 살아있는 느낌 */
.sec1__layer.is-image .sec1__img { transform: scale(1.08); }
.sec1__layer.is-image.is-active .sec1__img { transform: scale(1); transition: transform 9s cubic-bezier(.25, .46, .45, .94); }

.sec1__shade {
    position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .04) 100%);
    pointer-events: none;
}

/* ---------- 문구 ---------- */
.sec1__copy {
    position: absolute; z-index: 3;
    left: calc(208 * var(--u)); right: calc(220 * var(--u));
    top: 45%;
    display: grid;
    transform: translateY(-50%);
}
.sec1__txt {
    grid-area: 1 / 1;
    font-size: max(26px, calc(46 * var(--u)));
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.035em;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .3);
    pointer-events: none;
}
.sec1__txt i { display: inline-block; font-style: italic; padding-right: .06em; }
.sec1__txt small { font-size: .82em; letter-spacing: -.04em; }

/* 단어(.w) = 아래에서 올라오는 마스크, 글자(.c) = 하나씩 올라옴
   · 마스크는 좌우로 넉넉하게 열어서 첫 글자/느낌표가 잘리지 않음
   · 등장이 끝나면(.is-settled) 마스크를 풀어 그림자도 온전히 */
.sec1__txt .w {
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
    clip-path: inset(-.2em -.6em -.22em -.6em);
}
.sec1__txt.is-settled .w,
.sec1__txt.is-out .w { clip-path: none; }

.sec1__txt .c {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 112%, 0) rotate(5deg);
    transform-origin: 0 100%;
    transition:
        transform 1.25s cubic-bezier(.16, .84, .24, 1) calc(var(--i) * 34ms),
        opacity .7s ease calc(var(--i) * 34ms);
}
.sec1__txt.is-in .c { opacity: 1; transform: none; }

/* 나갈 때 : 같은 방향(위)으로 흐르듯 사라짐 */
.sec1__txt.is-out .c {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, -60%, 0);
    transition:
        transform .8s cubic-bezier(.55, 0, .75, .2) calc(var(--i) * 12ms),
        opacity .6s ease calc(var(--i) * 12ms),
        filter .6s ease calc(var(--i) * 12ms);
}
.no-js .sec1__txt:not(:first-child) { display: none; }
/* 새로고침 직후 : 글자를 한 자씩 나누기 전에는 문구 3개가 겹쳐 보이지 않게 숨김 */
.js .sec1__copy { visibility: hidden; }
.js .sec1__copy.is-split { visibility: visible; }

/* ---------- 우측 플로팅 (섹션1 전용 · PC) ---------- */
.sec1__float {
    position: absolute; z-index: 4;
    right: calc(58 * var(--u));
    top: calc(116 * var(--u));
    display: flex; flex-direction: column; align-items: center;
    gap: calc(22 * var(--u));
}
.sec1__reg {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: calc(148 * var(--u)); min-width: 108px;   /* 시안 크기 */
    aspect-ratio: 1;
    color: #fff;
}
.sec1__ring {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    will-change: transform;   /* 회전은 main.js (마우스오버 시 부드럽게 가속) */
}
.sec1__ring text {
    fill: currentColor;
    font-family: var(--ff-en);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 3px;
}
.sec1__ring-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sec1__reg-txt {
    position: relative;
    font-size: max(12px, calc(16 * var(--u)));
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -.02em;
    transition: transform .5s var(--ease);
}
.sec1__reg:hover .sec1__reg-txt { transform: scale(1.06); }

.sec1__soon {
    display: flex; align-items: center; justify-content: center;
    width: calc(114 * var(--u)); min-width: 84px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--navy);
    font-family: var(--ff-en);
    font-weight: 600;
    font-size: max(15px, calc(21 * var(--u)));
    line-height: 1.12;
    letter-spacing: -.01em;
    text-align: center;
    padding-top: .08em;   /* Futura 글자가 위로 쏠려 보이지 않게 (줄 간격이 좁아져 조금만) */
    box-shadow: 0 10px 30px rgba(0, 10, 40, .25);
}
/* 플로팅은 살짝 커지면서 등장 */
/* 오픈 날짜 : 숫자·OPEN 은 굵게, 한글 '월·일' 은 살짝 가늘고 작게 (시안) */
/* 한글 '월·일' : 굵기는 그대로, 크기만 살짝 작게 (시안) */
.sec1__soon small,
.tv-mbar__soon small { font-size: .88em; font-weight: 400; }

/* 플로팅은 살짝 커지면서 등장 */
.js .sec1__float [data-intro] { transform: scale(.82); }
.js.is-ready .sec1__float [data-intro] { transform: none; }



/* =========================================================
   공통 : 섹션 배경 영상 (.tv-vbox)
========================================================= */
.tv-vbox { position: absolute; inset: 0; overflow: hidden; }
.tv-vbox picture,
.tv-vbox__poster,
.tv-vbox__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}
.tv-vbox__video { opacity: 0; }
.tv-vbox.is-playing .tv-vbox__video { opacity: 1; }

/* =========================================================
   공통 : Castr 영상 (iframe) — 화면을 꽉 채우고 포스터 위로 페이드
========================================================= */
.tv-castr {
    position: absolute; inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}
.tv-castr iframe {
    position: absolute; left: 50%; top: 50%;
    width: 100%; height: 100%;          /* JS 가 cover 크기로 다시 계산 */
    max-width: none;
    border: 0;
    transform: translate(-50%, -50%);
}
.sec1__layer.is-playing .tv-castr,
.tv-vbox.is-playing .tv-castr { opacity: 1; }


/* =========================================================
   SECTION 2 · 공원 그 이상 / SUMMARY
   · .is-in    : 문구 등장
   · .is-split : 왼쪽 영상 + 오른쪽 사업개요
   · .no-anim  : 상태를 즉시 적용 (아래에서 올라올 때 등)
========================================================= */
.sec2 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #fff;
    color: var(--ink);
}
.sec2.no-anim *, .sec2.no-anim *::before, .sec2.no-anim *::after { transition: none !important; }

/* ---------- 영상 영역 : 오른쪽이 잘려 들어가며 왼쪽 패널이 됨 ---------- */
.sec2__visual {
    position: absolute; inset: 0; z-index: 2;
    background: #56606b;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.5s var(--ease-io);
}
.sec2.is-split .sec2__visual { clip-path: inset(0 73.125% 0 0); }   /* 1920 기준 왼쪽 516px */

.sec2__shade {
    position: absolute; inset: 0;
    background: rgba(12, 18, 28, .26);
    pointer-events: none;
}

/* ---------- 문구 : 화면 가운데 → 왼쪽 패널 가운데로 이동하며 작아짐 ---------- */
.sec2__copy {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    color: #fff;
    transform: translate3d(0, calc(-69 * var(--u)), 0) scale(1);
    transition: transform 1.5s var(--ease-io);
}
.sec2.is-split .sec2__copy { transform: translate3d(-36.5625%, calc(-129 * var(--u)), 0) scale(.69); }

.sec2__tit {
    font-size: max(30px, calc(58 * var(--u)));
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .18);
}
.sec2__ln { display: block; clip-path: inset(-.1em -1em -.2em -1em); }
.sec2__ln > span {
    display: inline-block;
    transform: translate3d(0, 110%, 0);
    transition: transform 1.3s cubic-bezier(.16, .84, .24, 1);
}
.sec2__ln:nth-child(2) > span { transition-delay: .14s; }
.sec2.is-in .sec2__ln > span { transform: none; }

.sec2__desc {
    margin-top: calc(22 * var(--u));
    font-size: max(15px, calc(26 * var(--u)));
    font-weight: 400;
    letter-spacing: -.02em;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 1s ease .55s, transform 1.2s var(--ease) .55s;
}
.sec2.is-in .sec2__desc { opacity: 1; transform: none; }

/* ---------- 사업개요 (오른쪽) ---------- */
.sec2__info {
    position: absolute; z-index: 1;
    left: calc(606 * var(--u)); right: 0;
    top: calc(50% - 222 * var(--u));
    height: calc(444 * var(--u));
}

/* 등장 : 오른쪽에서 차례로 */
.sec2__head, .sec2__tabs, .sec2__item {
    opacity: 0;
    transform: translate3d(calc(70 * var(--u)), 0, 0);
    transition: opacity .4s ease, transform .5s ease;
}
.sec2.is-split .sec2__head,
.sec2.is-split .sec2__tabs,
.sec2.is-split .sec2__item {
    opacity: 1; transform: none;
    transition: opacity 1s ease var(--dl), transform 1.3s var(--ease) var(--dl);
}
.sec2__head { --dl: .55s; }
.sec2__tabs { --dl: .68s; }
.sec2__item { --dl: calc(.8s + var(--k) * .1s); }

.sec2__en {
    font-family: var(--ff-en);
    font-size: max(30px, calc(52 * var(--u)));
    font-weight: 700;
    line-height: 1;
    letter-spacing: .005em;
    color: var(--navy);
}
.sec2__ko {
    margin-top: calc(22 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
    font-weight: 600;
    letter-spacing: -.02em;
}

/* 탭 : 남색 배경이 미끄러지듯 이동 + 하단 진행 바 */
.sec2__tabs {
    position: absolute; left: 0; top: calc(174 * var(--u));
    display: flex; gap: calc(12 * var(--u));
    --tw: calc(216 * var(--u));
    --tg: calc(12 * var(--u));
    /* 탭 사이 간격은 가려서, 남색 배경이 지나갈 때 틈으로 보이지 않게 */
    -webkit-mask-image: linear-gradient(90deg, #000 var(--tw), transparent var(--tw), transparent calc(var(--tw) + var(--tg)), #000 calc(var(--tw) + var(--tg)));
            mask-image: linear-gradient(90deg, #000 var(--tw), transparent var(--tw), transparent calc(var(--tw) + var(--tg)), #000 calc(var(--tw) + var(--tg)));
}
.sec2__tab:focus-visible { outline-offset: -4px; }
.sec2__tab {
    position: relative; z-index: 1;
    width: var(--tw);
    height: calc(73 * var(--u)); min-height: 44px;
    border: 1px solid #d2d2d2;
    font-size: max(13px, calc(20 * var(--u)));
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    transition: color .55s var(--ease), border-color .55s var(--ease);
}
.sec2__tab.is-on { color: #fff; border-color: transparent; }
.sec2__tab:not(.is-on):hover { border-color: var(--navy); color: var(--navy); }

.sec2__tab-bg {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: var(--tw); height: 100%;
    background: var(--navy);
    transform: translate3d(calc(var(--t, 0) * (var(--tw) + var(--tg))), 0, 0);
    transition: transform .75s var(--ease-io);
    overflow: hidden;
}
.sec2__tab-bg::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: rgba(255, 255, 255, .55);
    transform: scaleX(0); transform-origin: 0 50%;
}
.sec2__tab-bg.is-running::after { transform: scaleX(1); transition: transform var(--dur, 5000ms) linear; }

/* 이미지 : 오른쪽 끝까지, 새 이미지가 오른쪽에서 닦아내듯 */
.sec2__pics {
    position: absolute; right: 0; top: 0;
    width: calc(713 * var(--u)); height: calc(247 * var(--u));
    overflow: hidden;
    clip-path: inset(0 0 0 100%);
    transition: clip-path .5s ease;
}
.sec2.is-split .sec2__pics { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-io) .6s; }
.sec2__pic {
    position: absolute; inset: 0;
    clip-path: inset(0 0 0 100%);
}
.sec2__pic picture { display: block; width: 100%; height: 100%; }
.sec2__pic img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec2__pic.is-prev { z-index: 1; clip-path: inset(0 0 0 0); }
.sec2__pic.is-on { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease-io); }

/* 정보 3칸 */
.sec2__data {
    position: absolute; left: 0; top: calc(362 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, calc(348 * var(--u)));
    gap: calc(55 * var(--u));
}
.sec2__item dt {
    position: relative;
    padding-bottom: calc(12 * var(--u));
    font-size: max(14px, calc(22 * var(--u)));
    font-weight: 600;
    letter-spacing: -.02em;
}
/* 밑줄 : 왼쪽에서 그어짐 */
.sec2__item dt::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: #cccccc;
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .4s ease;
}
.sec2.is-split .sec2__item dt::after { transform: scaleX(1); transition: transform 1.2s var(--ease) calc(var(--dl) + .2s); }

.sec2__item dd {
    position: relative;
    height: 1.6em;
    margin-top: calc(14 * var(--u));
    overflow: hidden;
    font-size: max(13px, calc(17 * var(--u)));
    line-height: 1.6;
    color: #333;
    letter-spacing: -.01em;
}
.sec2__val {
    position: absolute; left: 0; top: 0;
    display: block;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: transform .8s var(--ease) calc(var(--k) * 70ms), opacity .6s ease calc(var(--k) * 70ms);
}
.sec2__val.is-on { opacity: 1; transform: none; }
.sec2__val.is-out { opacity: 0; transform: translate3d(0, -100%, 0); }


/* =========================================================
   SECTION 3 · Amazing Garden Project
   · .is-in   : 괄호가 벌어지고 '공원' 이 써짐
   · .is-open : 문구가 왼쪽으로 이동 + 설명 + 하단 탭
========================================================= */
.sec3 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #0e1310;
    color: #fff;
}
.sec3.no-anim *, .sec3.no-anim *::before, .sec3.no-anim *::after { transition: none !important; }

/* ---------- 배경 : 탭에 따라 부드럽게 교차 ---------- */
.sec3__bgs { position: absolute; inset: 0; }
.sec3__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.sec3__bg.is-on { opacity: 1; z-index: 1; }
.sec3__bg picture, .sec3__bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}

/* 처음엔 어둡게(괄호 연출) → 펼쳐지면 왼쪽·아래만 은은하게 */
.sec3__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sec3__shade::before, .sec3__shade::after { content: ''; position: absolute; inset: 0; transition: opacity 1.6s ease; }
.sec3__shade::before { background: rgba(4, 8, 6, .56); }
.sec3__shade::after {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, 0) 75%),
        linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 30%);
    opacity: 0;
}
.sec3.is-open .sec3__shade::before { opacity: .25; }
.sec3.is-open .sec3__shade::after { opacity: 1; }

/* ---------- 큰 문구 : 가운데(크게) → 왼쪽 위(원래 크기) ----------
   PC : 한 줄로 흐르며 통째로 이동 (글꼴 폭이 달라도 간격 유지) */
.sec3__tit {
    position: absolute; z-index: 3;
    left: calc(148 * var(--u)); top: calc(30.2% - 6 * var(--u));
    display: flex; align-items: flex-end;
    gap: calc(35 * var(--u));
    white-space: nowrap;
    pointer-events: none;
    transform-origin: 0 0;
    transform: translate3d(calc(448 * var(--u)), calc(var(--vh) * 15.6), 0) scale(1.3);
    transition: transform 1.5s var(--ease-io);
}
.sec3.is-open .sec3__tit { transform: none; }
.sec3__layer { display: contents; }

.sec3__pre {
    display: block;
    margin-bottom: calc(52 * var(--u));
    font-size: max(22px, calc(42 * var(--u)));
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.sec3__group {
    display: flex; align-items: flex-end;
    gap: calc(12 * var(--u));
}
.sec3__key {
    position: relative;
    display: block;
    padding: calc(10 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u)) calc(12 * var(--u));
}
.sec3__key em {
    display: block;
    font-family: var(--ff-serif);
    font-size: max(30px, calc(58 * var(--u)));
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
}
.sec3__post {
    margin-bottom: calc(14 * var(--u));
    font-size: max(22px, calc(42 * var(--u)));
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.03em;
}

/* 괄호 : 가운데에 모여 있다가 양 끝으로 벌어짐 */
.sec3__br {
    position: absolute;
    width: calc(18 * var(--u)); height: calc(18 * var(--u));
    min-width: 10px; min-height: 10px;
    border: 0 solid rgba(255, 255, 255, .92);
    opacity: 0;
    transition: opacity .8s ease .25s, transform 1.2s var(--ease) .25s;
}
.sec3__br--l { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; transform: translate3d(calc(48 * var(--u)), calc(26 * var(--u)), 0); }
.sec3__br--r { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; transform: translate3d(calc(-48 * var(--u)), calc(-26 * var(--u)), 0); }
.sec3.is-in .sec3__br { opacity: 1; transform: none; }

/* '공원' : 붓으로 쓰듯 왼쪽부터 드러남 */
.sec3__key em {
    clip-path: inset(-.2em 100% -.2em 0);
    filter: blur(6px);
    opacity: .4;
    transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) 1.05s, filter 1.3s ease 1.05s, opacity 1s ease 1.05s;
}
.sec3.is-in .sec3__key em { clip-path: inset(-.2em -.1em -.2em -.1em); filter: blur(0); opacity: 1; }

/* 앞뒤 문구 */
.sec3__pre, .sec3__post {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 1s ease, transform 1.2s var(--ease);
}
.sec3__post { transition-delay: .35s; }
.sec3.is-in .sec3__pre, .sec3.is-in .sec3__post { opacity: 1; transform: none; }

/* ---------- 펼쳐질 때 등장 : 영문 타이틀 / 설명 / 탭 ---------- */
.sec3__en {
    position: absolute; z-index: 3;
    left: calc(150 * var(--u)); top: calc(19.4% - 4 * var(--u));
    font-family: var(--ff-en);
    font-size: max(20px, calc(34 * var(--u)));
    font-weight: 500;
    line-height: 1;
    letter-spacing: .32em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .5s ease, letter-spacing .5s ease;
}
.sec3.is-open .sec3__en {
    opacity: 1;
    letter-spacing: .1em;
    transition: opacity 1.2s ease .5s, letter-spacing 1.8s var(--ease) .5s;
}

.sec3__desc {
    position: absolute; z-index: 3;
    left: calc(152 * var(--u)); top: 43.8%;
    letter-spacing: -.02em;
}
.sec3__lead {
    font-size: max(16px, calc(26 * var(--u)));
    font-weight: 600;
    line-height: 1.4;
    color: #ffd36e;
}
.sec3__lead i { display: inline-block; font-style: italic; padding-right: .06em; }
.sec3__zones { margin-top: calc(12 * var(--u)); }
.sec3__zone + .sec3__zone { margin-top: calc(10 * var(--u)); }
.sec3__zone dt {
    font-size: max(14px, calc(18 * var(--u)));
    font-weight: 600;
    line-height: 1.5;
}
.sec3__zone dd {
    font-size: max(12px, calc(15 * var(--u)));
    line-height: 1.73;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}

/* 등장 : 헤드라인 → 권역 순서대로 */
.sec3__lead, .sec3__zone {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec3.is-open .sec3__lead,
.sec3.is-open .sec3__zone {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(.75s + var(--k) * .09s), transform 1.2s var(--ease) calc(.75s + var(--k) * .09s);
}

/* ---------- 오른쪽 아래 사업개요 ---------- */
.sec3__info {
    position: absolute; z-index: 3;
    left: calc(1388 * var(--u)); bottom: 19.6%;
    letter-spacing: -.02em;
    white-space: nowrap;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translate3d(calc(30 * var(--u)), 0, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec3.is-open .sec3__info {
    opacity: 1; transform: none;
    transition: opacity 1s ease 1.15s, transform 1.2s var(--ease) 1.15s;
}
.sec3__info-tit {
    font-size: max(14px, calc(19 * var(--u)));
    font-weight: 600;
    line-height: 1.4;
}
.sec3__info-list {
    position: relative;
    margin-top: calc(9 * var(--u));
    padding-left: calc(20 * var(--u));
}
/* 왼쪽 세로선 : 위에서 아래로 그어짐 */
.sec3__info-list::before {
    content: ''; position: absolute; left: calc(5 * var(--u)); top: 0; bottom: 0;
    width: 1px; background: rgba(255, 255, 255, .6);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .4s ease;
}
.sec3.is-open .sec3__info-list::before { transform: scaleY(1); transition: transform 1s var(--ease) 1.45s; }
.sec3__info-list li {
    font-size: max(12px, calc(15 * var(--u)));
    line-height: 1.87;
    color: rgba(255, 255, 255, .85);
}
.sec3__info-list li small { margin-left: .2em; font-size: .68em; font-weight: 400; opacity: .85; }   /* (변경절차 이행중) */
.sec3__info-list li.is-b {
    font-size: max(13px, calc(18 * var(--u)));
    font-weight: 600;
    line-height: 1.56;
    color: #fff;
}

/* ---------- 하단 탭 ---------- */
.sec3__tabs {
    position: absolute; z-index: 3;
    left: calc(144 * var(--u)); right: calc(159 * var(--u));
    bottom: 8.4%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: calc(44 * var(--u));
}
.sec3__tab {
    position: relative;
    padding-bottom: calc(22 * var(--u));
    font-size: max(14px, calc(22 * var(--u)));
    font-weight: 300;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .7);
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity .4s ease, transform .4s ease, color .45s ease;
}
.sec3.is-open .sec3__tab {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(1s + var(--i) * .08s), transform 1.2s var(--ease) calc(1s + var(--i) * .08s), color .45s ease;
}
.sec3__tab > span { display: inline-block; transition: transform .5s var(--ease); }

/* 기본 가는 선 (왼쪽에서 그어짐) */
.sec3__tab::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: rgba(255, 255, 255, .32);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .4s ease, background-color .4s ease;
}
.sec3.is-open .sec3__tab::before { transform: scaleX(1); transition: transform 1.2s var(--ease) calc(1.1s + var(--i) * .08s), background-color .4s ease; }

/* 마우스 오버 : 글자 살짝 위로 + 흰 선이 왼쪽에서 그어짐 */
.sec3__tab::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: #fff;
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform .55s var(--ease);
}
.sec3__tab:hover, .sec3__tab:focus-visible, .sec3__tab.is-on { color: #fff; }
.sec3__tab:hover > span, .sec3__tab:focus-visible > span { transform: translate3d(0, -4px, 0); }
.sec3__tab:hover::after, .sec3__tab:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.sec3__tab:focus-visible { outline-offset: 6px; }

/* 선택된 탭 : 굵은 흰 바가 진행 시간만큼 차오름 */
.sec3__tab > i {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
    height: 3px; background: #fff;
    transform: scaleX(0); transform-origin: 0 50%;
}
.sec3__tab.is-on > i { transform: scaleX(1); }
.sec3.is-running .sec3__tab.is-on > i { animation: sec3Fill var(--dur, 5000ms) linear forwards; }
.sec3__tabs.is-paused .sec3__tab.is-on > i { animation-play-state: paused; }
@keyframes sec3Fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* =========================================================
   SECTION 4 · Amazing Centum
   · .is-in   : 「 」 괄호가 벌어지고 '중심축' 이 써짐
   · .is-open : PC  야경이 왼쪽 패널로 줄며 광안대교 쪽으로 이동
                모바일 야경이 위로 걷힘 / 문구가 제자리로 + 내용 등장
========================================================= */
.sec4 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #fff;
    color: var(--ink);
}
.sec4.no-anim *, .sec4.no-anim *::before, .sec4.no-anim *::after { transition: none !important; }

/* ---------- 야경 ---------- */
.sec4__visual {
    position: absolute; inset: 0; z-index: 2;
    overflow: hidden;
    background: #0b1530;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.6s var(--ease-io);
}
.sec4.is-open .sec4__visual { clip-path: inset(0 73.125% 0 0); }
.sec4__visual picture, .sec4__visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}
/* 패널이 되면서 사진이 왼쪽으로 흘러 광안대교가 패널 안으로 (크기 변화 없이 이동만) */
.sec4__visual picture { transition: transform 1.6s var(--ease-io); }
.sec4.is-open .sec4__visual picture { transform: translate3d(calc(-808 * var(--u)), 0, 0); }

.sec4__shade {
    position: absolute; inset: 0;
    background: rgba(4, 10, 32, .75);
    transition: opacity 1.6s ease;
}
.sec4.is-open .sec4__shade { opacity: .12; }

/* ---------- 오른쪽 내용 ---------- */
.sec4__body {
    position: absolute; z-index: 3;
    left: calc(630 * var(--u)); top: calc(50% - 160 * var(--u));
    width: calc(560 * var(--u));
}



/* 큰 문구 : 처음엔 화면 가운데 흰 글자 → 제자리로 오며 짙은 글자 */
.sec4__tit {
    display: block;
    margin-top: calc(24 * var(--u));
    color: #fff;
    white-space: nowrap;
    transform-origin: 0 0;
    transform: translate3d(calc(27 * var(--u)), calc(-15 * var(--u)), 0) scale(1.11);
    transition: transform 1.6s var(--ease-io), color 1.2s ease .3s;
}
.sec4.is-open .sec4__tit { color: var(--ink); transform: none; }

.sec4__l1 {
    display: block;
    font-size: max(24px, calc(46 * var(--u)));
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.03em;
}
.sec4__l2 {
    display: flex; align-items: flex-end;
    gap: calc(10 * var(--u));
    margin: calc(26 * var(--u)) 0 0 calc(182 * var(--u));
}
.sec4__key {
    position: relative;
    display: block;
    padding: calc(13 * var(--u)) calc(20 * var(--u)) calc(15 * var(--u)) calc(23 * var(--u));
}
.sec4__key em {
    display: block;
    font-family: var(--ff-serif);
    font-size: max(34px, calc(66 * var(--u)));
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    clip-path: inset(-.2em 100% -.2em 0);
    filter: blur(6px);
    opacity: .4;
    transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) 1.05s, filter 1.3s ease 1.05s, opacity 1s ease 1.05s;
}
.sec4.is-in .sec4__key em { clip-path: inset(-.2em -.1em -.2em -.1em); filter: blur(0); opacity: 1; }
.sec4__post {
    margin-bottom: calc(18 * var(--u));
    font-size: max(24px, calc(46 * var(--u)));
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.sec4__br {
    position: absolute;
    width: calc(20 * var(--u)); height: calc(20 * var(--u));
    min-width: 10px; min-height: 10px;
    border: 0 solid currentColor;
    opacity: 0;
    transition: opacity .8s ease .25s, transform 1.2s var(--ease) .25s;
}
.sec4__br--l { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; transform: translate3d(calc(70 * var(--u)), calc(30 * var(--u)), 0); }
.sec4__br--r { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; transform: translate3d(calc(-70 * var(--u)), calc(-30 * var(--u)), 0); }
.sec4.is-in .sec4__br { opacity: 1; transform: none; }

.sec4__l1, .sec4__post {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 1s ease, transform 1.2s var(--ease);
}
.sec4__post { transition-delay: .35s; }
.sec4.is-in .sec4__l1, .sec4.is-in .sec4__post { opacity: 1; transform: none; }

/* 설명 */
.sec4__desc {
    margin-top: calc(100 * var(--u));
    margin-left: calc(2 * var(--u));
    font-size: max(14px, calc(20 * var(--u)));
    line-height: 1.95;
    letter-spacing: -.02em;
}
.sec4__desc strong, .sec4__desc span {
    display: block;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec4__desc strong { font-size: 1.12em; font-weight: 600; color: var(--ink); }
.sec4__desc span { color: #444; }
.sec4.is-open .sec4__desc strong,
.sec4.is-open .sec4__desc span {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(1.1s + var(--k) * .1s), transform 1.2s var(--ease) calc(1.1s + var(--k) * .1s);
}

/* ---------- 사진 2장 : 아래에서 걷히듯 + 마우스 따라 살짝 움직임 ---------- */
.sec4__photos { position: absolute; inset: 0; pointer-events: none; }
.sec4__photo {
    position: absolute;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.sec4__photo--1 { left: calc(873 * var(--u)); top: calc(-42 * var(--u)); width: calc(258 * var(--u)); height: calc(369 * var(--u)); }
.sec4__photo--2 { left: calc(662 * var(--u)); top: calc(196 * var(--u)); width: calc(192 * var(--u)); height: calc(256 * var(--u)); }
.sec4__photo figure {
    width: 100%; height: 100%;
    overflow: hidden;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .5s ease;
}
.sec4__photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec4.is-open .sec4__photo figure { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease-io) 1s; }
.sec4.is-open .sec4__photo--2 figure { transition-delay: 1.25s; }

/* ---------- TRIVN CENTUM 배지 (패널 경계에 걸침) ---------- */
.sec4__badge {
    position: absolute; z-index: 4;
    left: calc(-185 * var(--u)); top: calc(-124 * var(--u));
    width: calc(137 * var(--u)); height: calc(137 * var(--u));
    min-width: 90px; min-height: 90px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    opacity: 0;
    transform: scale(.4) rotate(-40deg);
    transition: opacity .4s ease, transform .5s ease;
}
.sec4.is-open .sec4__badge {
    opacity: 1; transform: none;
    transition: opacity .8s ease 1.3s, transform 1.4s cubic-bezier(.2, 1.3, .3, 1) 1.3s;
}
.sec4__badge svg { width: 100%; height: 100%; overflow: visible; animation: sec4Spin 22s linear infinite; animation-play-state: paused; }
.sec4.is-on .sec4__badge svg { animation-play-state: running; }   /* 섹션이 보일 때만 회전 */
@keyframes sec4Spin { to { transform: rotate(360deg); } }
.sec4__badge text { fill: currentColor; font-family: var(--ff-en); font-weight: 700; font-size: 15.5px; letter-spacing: 1px; }
.sec4__badge-arc { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.sec4__bottom { display: none; }

/* ---------- 센텀2지구 바로가기 버튼 (설명 아래) ---------- */
.sec4__links {
    position: absolute; z-index: 3;
    left: calc(632 * var(--u)); top: calc(50% + 316 * var(--u));
    display: flex; gap: calc(12 * var(--u));
}
.sec4__link {
    display: inline-flex; align-items: center; justify-content: center;
    gap: calc(10 * var(--u));
    height: calc(54 * var(--u)); min-height: 40px;
    padding: 0 calc(26 * var(--u));
    border: 1px solid var(--navy);
    font-size: max(13px, calc(17 * var(--u)));
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--navy);
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease, background-color .35s ease, color .35s ease;
}
.sec4__link svg { width: calc(12 * var(--u)); min-width: 10px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sec4.is-open .sec4__link {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(1.4s + var(--k) * .1s), transform 1.2s var(--ease) calc(1.4s + var(--k) * .1s), background-color .35s ease, color .35s ease;
}
.sec4__link:hover, .sec4__link:focus-visible { background: var(--navy); color: #fff; }


/* =========================================================
   SECTION 5 · 입지 (사는 곳이 곧, 누리는 것)
   · .is-in    : 일러스트가 공원 중심에서 번지듯 펼쳐지고 문구 차례로 등장
   · .is-drawn : 펼쳐짐 완료 (마스크 해제)
========================================================= */
.sec5 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #fff;
    color: #1b0933;
}
.sec5.no-anim *, .sec5.no-anim *::before, .sec5.no-anim *::after { transition: none !important; }

/* ---------- 조감 일러스트 ---------- */
.sec5__map {
    position: absolute;
    z-index: 1;
    /*left: calc(318 * var(--u)); top: calc(50% - 435 * var(--u));*/
    width: calc(1554 * var(--u));
    height: calc(756 * var(--u));
    right: 0;
    margin: 0;
}
.sec5__map-in { position: relative; width: 100%; height: 100%; }
.sec5__map picture, .sec5__map img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}
/* 공원 한가운데서 잉크가 번지듯 펼쳐짐 */
.sec5__map picture {
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 38% 55%; mask-position: 38% 55%;
    -webkit-mask-size: 0% 0%; mask-size: 0% 0%;
    transition: -webkit-mask-size .5s ease, mask-size .5s ease;
}
.sec5.is-in .sec5__map picture {
    -webkit-mask-size: 320% 320%; mask-size: 320% 320%;
    transition: -webkit-mask-size 1.8s cubic-bezier(.5, 0, .2, 1) .05s, mask-size 1.8s cubic-bezier(.5, 0, .2, 1) .05s;
}
.sec5.is-drawn .sec5__map picture { -webkit-mask-image: none; mask-image: none; }

/* ---------- 왼쪽 문구 ---------- */
.sec5__txt {
    position: absolute; z-index: 2;
    left: calc(145 * var(--u)); top: calc(50% - 305 * var(--u));
    width: calc(1000 * var(--u));
}
/* 타이틀 : 공원의 가치와 / 센텀의 미래를 잇는 곳 */
.sec5__lead {
    margin-bottom: calc(10 * var(--u));
    font-size: max(20px, calc(36 * var(--u)));
    font-weight: 700;
    line-height: 1.39;
    letter-spacing: -.04em;
    color: #1d2a5c;
}
.sec5__lead span { display: block; }

.sec5__intro {
    font-size: max(13px, calc(19 * var(--u)));
    line-height: 1.9;
    letter-spacing: -.02em;
    color: #77737f;
}
.sec5__intro span { display: block; }

.sec5__vline {
    display: block;
    width: 1px; height: calc(198 * var(--u));
    margin: calc(22 * var(--u)) 0 0 calc(-2 * var(--u));
    background: #1b0933;
}

.sec5__head {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    pointer-events: none;
    margin-top: calc(20 * var(--u));
}
.sec5__tit { display: contents; }   /* 큰 문구와 슬로건을 한 줄 흐름으로 (글꼴 폭이 달라도 겹치지 않음) */
.sec5__l1 {
    flex: 0 0 100%;
    display: block;
    font-size: max(26px, calc(46 * var(--u)));
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
}
.sec5__key {
    position: relative;
    display: inline-block;
    margin: calc(26 * var(--u)) 0 0 calc(127 * var(--u));
    padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
}
.sec5__key em {
    display: block;
    font-family: var(--ff-serif);
    font-size: max(34px, calc(55 * var(--u)));
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.sec5__br {
    position: absolute;
    width: calc(18 * var(--u)); height: calc(18 * var(--u));
    min-width: 10px; min-height: 10px;
    border: 0 solid currentColor;
}
.sec5__br--l { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.sec5__br--r { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.sec5__slogan {
    margin: 0 0 0 20px;
    font-size: max(26px, calc(46 * var(--u)));
    font-weight: 700;
    letter-spacing: -.04em;
    white-space: nowrap;
}
.sec5__slogan i { display: inline-block; font-style: italic; padding-right: .05em; }

/* ---------- 하단 키워드 ---------- */
.sec5__keys {
    position: absolute; z-index: 2;
    left: calc(145 * var(--u)); right: calc(158 * var(--u));
    top: calc(50% + 348 * var(--u));
    display: flex; align-items: center;
}
.sec5__key-item {
    display: flex; align-items: center;
    gap: calc(18 * var(--u));
    flex: none;
}
.sec5__key-item b {
    font-family: var(--ff-en);
    font-size: max(18px, calc(30 * var(--u)));
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    color: #0066b1;
}
.sec5__key-item span {
    font-size: max(13px, calc(19 * var(--u)));
    letter-spacing: -.02em;
    color: #2a2238;
}
.sec5__sep {
    flex: 1;
    height: 1px;
    margin: 0 calc(20 * var(--u));
    background: #8d8a94;
}

/* ---------- 등장 순서 ----------
   ① 지도가 공원 중심에서 번짐                                  (0s ~)
   ② 사는 곳이 곧, → 「누리는 것」 → 더블 역세권·백화점·학군까지!  (--t2 ~)
   ③ 세로선이 위로 쭉 뻗으며 위 문구가 아래부터 차례로 등장
      + 동시에 하단 키워드가 왼쪽에서 오른쪽으로 쭉 뻗어감         (--t3 ~)
------------------------------------------------------------- */
.sec5 { --t2: 1.3s; --t3: 2.5s; }   /* 지도 → 큰 문구 → 위·아래 뻗어감 (전체 약 3.5초) */

/* ② 큰 문구 */
.sec5__l1 { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .4s ease, transform .4s ease; }
.sec5.is-in .sec5__l1 { opacity: 1; transform: none; transition: opacity 1s ease var(--t2), transform 1.2s var(--ease) var(--t2); }

.sec5__br { opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.sec5__br--l { transform: translate3d(calc(60 * var(--u)), calc(26 * var(--u)), 0); }
.sec5__br--r { transform: translate3d(calc(-60 * var(--u)), calc(-26 * var(--u)), 0); }
.sec5.is-in .sec5__br {
    opacity: 1; transform: none;
    transition: opacity .8s ease calc(var(--t2) + .2s), transform 1.2s var(--ease) calc(var(--t2) + .2s);
}
.sec5__key em {
    clip-path: inset(-.2em 100% -.2em 0);
    filter: blur(6px);
    opacity: .4;
    transition: clip-path .4s ease, filter .4s ease, opacity .4s ease;
}
.sec5.is-in .sec5__key em {
    clip-path: inset(-.2em -.1em -.2em -.1em); filter: blur(0); opacity: 1;
    transition: clip-path 1.3s cubic-bezier(.6, 0, .2, 1) calc(var(--t2) + .55s), filter 1.3s ease calc(var(--t2) + .55s), opacity 1s ease calc(var(--t2) + .55s);
}

.sec5__slogan { opacity: 0; transform: translate3d(-16px, 0, 0); transition: opacity .4s ease, transform .4s ease; }
.sec5.is-in .sec5__slogan { opacity: 1; transform: none; transition: opacity 1s ease calc(var(--t2) + 1.2s), transform 1.2s var(--ease) calc(var(--t2) + 1.2s); }

/* ③-1 세로선 : 아래(큰 문구)에서 위로 쭉 뻗어 올라감 */
.sec5__vline { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .4s ease; }
.sec5.is-in .sec5__vline { transform: scaleY(1); transition: transform 1.2s cubic-bezier(.65, 0, .25, 1) var(--t3); }

/* ③-2 위 문구 : 선이 닿는 순서대로 아래 줄부터 */

.sec5__intro span {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}

.sec5.is-in .sec5__intro span {
    opacity: 1; transform: none;
    transition: opacity .9s ease calc(var(--t3) + .85s + (2 - var(--d)) * .12s), transform 1.1s var(--ease) calc(var(--t3) + .85s + (2 - var(--d)) * .12s);
}

/* ③-2' 타이틀 : 위 문구 다음으로 (아래 줄부터) */
.sec5__lead span {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec5.is-in .sec5__lead span {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(var(--t3) + 1.25s + (1 - var(--d)) * .12s), transform 1.2s var(--ease) calc(var(--t3) + 1.25s + (1 - var(--d)) * .12s);
}

/* ③-3 하단 키워드 : 왼쪽에서 오른쪽으로 쭉 (단어 → 선 → 단어 → 선 → 단어) */
.sec5__key-item {
    opacity: 0;
    transform: translate3d(calc(-24 * var(--u)), 0, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec5.is-in .sec5__key-item {
    opacity: 1; transform: none;
    transition: opacity .8s ease calc(var(--t3) + var(--i) * .7s), transform 1s var(--ease) calc(var(--t3) + var(--i) * .7s);
}
.sec5__sep { transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s ease; }
.sec5.is-in .sec5__sep { transform: scaleX(1); transition: transform .6s cubic-bezier(.6, 0, .3, 1) calc(var(--t3) + .2s + (var(--i) - 1) * .7s); }



/* =========================================================
   SECTION 6 · TRIVN PREMIUM
   · .is-in   : 흰 화면 가운데 창이 위아래로 열리며 TRIVN PREMIUM 등장
   · .is-open : 창이 화면 가득 펼쳐짐 → 프리미엄 슬라이드
   · 슬라이드 : 사진은 비스듬히 쓸어내듯 교체, 제목은 써지듯, 아이콘은 그려지듯
========================================================= */
.sec6 {
    /* 처음 창(사진)의 위치 : 1920 기준 708 ~ 1218 / 163 ~ 853 */
    --wl: calc(708 * var(--u));
    --wr: calc(100% - 1218 * var(--u));
    --wt: calc(50% - 317 * var(--u));
    --wb: calc(50% - 373 * var(--u));
    --wc-t: calc(50% + 28 * var(--u));     /* 창 세로 가운데 */
    --wc-b: calc(50% - 28 * var(--u));
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #fff;
    color: #fff;
}
.sec6.no-anim *, .sec6.no-anim *::before, .sec6.no-anim *::after { transition: none !important; animation: none !important; }

/* ---------- 사진 무대 : 가는 선 → 창 → 화면 가득 ---------- */
.sec6__stage, .sec6__intro--light {
    clip-path: inset(var(--wc-t) var(--wr) var(--wc-b) var(--wl));
    transition: clip-path .5s ease;
}
.sec6.is-in .sec6__stage, .sec6.is-in .sec6__intro--light {
    clip-path: inset(var(--wt) var(--wr) var(--wb) var(--wl));
    transition: clip-path 1.4s var(--ease-io) .15s;
}
.sec6.is-open .sec6__stage, .sec6.is-open .sec6__intro--light {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.5s var(--ease-io);
}
.sec6__stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #2b3440; }

/* 슬라이드 사진 : 오른쪽에서 비스듬히 쓸어내듯 덮음 */
.sec6__bg {
    position: absolute; inset: 0;
    clip-path: polygon(130% 0, 130% 0, 110% 100%, 110% 100%);
}
.sec6__bg.is-prev { z-index: 1; clip-path: polygon(-20% 0, 130% 0, 110% 100%, -40% 100%); }
.sec6__bg.is-on   { z-index: 2; clip-path: polygon(-20% 0, 130% 0, 110% 100%, -40% 100%); transition: clip-path 1.5s var(--ease-io); }
.sec6__bg picture, .sec6__bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}
.sec6__shade {
    position: absolute; inset: 0; z-index: 3;
    background:
        linear-gradient(90deg, rgba(8, 12, 22, .3) 0%, rgba(8, 12, 22, .05) 50%, rgba(8, 12, 22, .25) 100%),
        rgba(8, 12, 22, .32);
}

/* ---------- 처음 화면 문구 : 사진 밖은 검정, 사진 안은 흰색 ---------- */
.sec6__intro {
    position: absolute; inset: 0; z-index: 4;
    pointer-events: none;
    color: #111;
}
.sec6__intro--dark  { z-index: 0; }           /* 사진(z 1) 아래 → 창 밖에서만 보임 */
.sec6__intro--light { z-index: 4; color: #fff; }
/* TRIVEN / CENTUM / PREMIUM : 계단형 3줄 (1920 기준 x 470·752·988 / 줄 가운데 336·478·618) */
.sec6__intro-ln {
    position: absolute;
    margin-top: -.5em;   /* top 값 = 글자 세로 가운데 */
    font-family: var(--ff-en);
    font-size: max(40px, calc(83 * var(--u)));
    font-weight: 600;
    line-height: 1;
    letter-spacing: .27em;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(calc(-60 * var(--u)), 0, 0);
    transition: opacity .5s ease, transform .5s ease;
}
.sec6__intro-ln--1 { left: calc(470 * var(--u)); top: calc(50% - 144 * var(--u)); }
.sec6__intro-ln--2 { left: calc(750 * var(--u)); top: calc(50% - 2 * var(--u)); }
.sec6__intro-ln--3 { left: calc(985 * var(--u)); top: calc(50% + 138 * var(--u)); }
/* 등장 : 위 줄부터 차례로 왼쪽에서 미끄러지듯 */
.sec6.is-in .sec6__intro-ln {
    opacity: 1; transform: none;
    transition: opacity 1s ease calc(.7s + var(--k) * .15s), transform 1.4s var(--ease) calc(.7s + var(--k) * .15s);
}
/* 펼쳐질 때 : 오른쪽으로 흐르며 사라짐 */
.sec6.is-open .sec6__intro-ln { opacity: 0; transform: translate3d(calc(60 * var(--u)), 0, 0); transition: opacity .6s ease, transform 1s var(--ease); }

/* ---------- 슬라이드 내용 ---------- */
.sec6__label {
    position: absolute; z-index: 5;
    left: calc(147 * var(--u)); top: calc(50% - 250 * var(--u));
}
.sec6__label-en {
    font-family: var(--ff-en);
    font-size: max(13px, calc(22 * var(--u)));
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .2em;
    white-space: nowrap;
    opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .4s ease, transform .4s ease;
}
.sec6.is-open .sec6__label-en { opacity: 1; transform: none; transition: opacity 1s ease 1.1s, transform 1.2s var(--ease) 1.1s; }

/* 「 제목 」 : 제목 길이가 바뀌면 괄호가 부드럽게 따라감 */
.sec6__key {
    position: absolute; z-index: 5;
    left: calc(395 * var(--u)); top: calc(50% - 250 * var(--u));
    display: block;
    padding: calc(8 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
}
.sec6__titles {
    position: relative;
    display: block;
    height: 1.2em;
    font-family: var(--ff-serif);
    font-size: max(30px, calc(52 * var(--u)));
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.04em;
    transition: width .9s var(--ease-io);
}
.sec6__title {
    position: absolute; left: 0; top: 0;
    white-space: nowrap;
    opacity: 0;
    clip-path: inset(-.2em 100% -.2em 0);
}
.sec6.is-open .sec6__title.is-on {
    opacity: 1;
    clip-path: inset(-.2em -.1em -.2em -.1em);
    transition: clip-path 1.2s cubic-bezier(.6, 0, .2, 1) var(--td, .5s), opacity .8s ease var(--td, .5s);
}
.sec6__title.is-out {
    opacity: 0;
    clip-path: inset(-.2em -.1em -.2em -.1em);
    transform: translate3d(0, -25%, 0);
    transition: opacity .5s ease, transform .7s var(--ease);
}
.sec6__br {
    position: absolute;
    width: calc(18 * var(--u)); height: calc(18 * var(--u));
    min-width: 10px; min-height: 10px;
    border: 0 solid rgba(255, 255, 255, .9);
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
}
.sec6__br--l { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; transform: translate3d(calc(40 * var(--u)), calc(20 * var(--u)), 0); }
.sec6__br--r { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; transform: translate3d(calc(-40 * var(--u)), calc(-20 * var(--u)), 0); }
.sec6.is-open .sec6__br { opacity: 1; transform: none; transition: opacity .8s ease 1.15s, transform 1.2s var(--ease) 1.15s; }

/* 오른쪽 아래 정보 */
.sec6__infos {
    position: absolute; z-index: 5;
    left: calc(1084 * var(--u)); top: calc(50% + 163 * var(--u));
    width: calc(684 * var(--u));
}
.sec6__info {
    position: absolute; left: 0; top: 0; width: 100%;
    display: grid;
    grid-template-columns: calc(84 * var(--u)) 1fr;
    column-gap: calc(32 * var(--u));
    pointer-events: none;
}
.sec6__info.is-on { pointer-events: auto; }
.sec6__icon {
    grid-row: 1 / span 2;
    width: calc(84 * var(--u)); height: calc(84 * var(--u));
    margin-top: calc(5 * var(--u));
    overflow: visible;
    fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sec6__head {
    font-size: max(17px, calc(28 * var(--u)));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.03em;
    white-space: nowrap;
}
.sec6__head i { display: inline-block; font-style: italic; padding-right: .05em; }
.sec6__list {
    margin: calc(18 * var(--u)) 0 0 calc(-5 * var(--u));
    width: calc(570 * var(--u));
}
.sec6__list li {
    position: relative;
    padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(3 * var(--u));
    font-size: max(13px, calc(18 * var(--u)));
    line-height: 1.5;
    letter-spacing: -.03em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .92);
}
.sec6__list li::before { content: '• '; }
.sec6__list li + li::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: 1px; background: rgba(255, 255, 255, .38);
    transform: scaleX(0); transform-origin: 0 50%;
}

/* 정보 등장 / 퇴장 */
/* 아이콘 : 둥근 선끝이 점으로 남지 않도록, 그려지기 전엔 아이콘 자체를 숨김 */
.sec6__icon { opacity: 0; transition: opacity .3s ease; }
.sec6__icon *, .sec6__head, .sec6__list li { transition: opacity .4s ease, transform .4s ease; }
.sec6__icon * { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.sec6__icon .dot { stroke-dasharray: 1.2 3 !important; stroke-dashoffset: 0 !important; }   /* 점선 */
.sec6__head, .sec6__list li { opacity: 0; transform: translate3d(0, 16px, 0); }

.sec6.is-open .sec6__info.is-on .sec6__icon { opacity: 1; transition: opacity .5s ease calc(var(--td, .5s) + .4s); }
.sec6.is-open .sec6__info.is-on .sec6__icon * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .3, 1) calc(var(--td, .5s) + .1s); }
.sec6.is-open .sec6__info.is-on .sec6__head { opacity: 1; transform: none; transition: opacity .9s ease calc(var(--td, .5s) + .2s), transform 1.1s var(--ease) calc(var(--td, .5s) + .2s); }
.sec6.is-open .sec6__info.is-on .sec6__list li {
    opacity: 1; transform: none;
    transition: opacity .9s ease calc(var(--td, .5s) + .35s + var(--k) * .1s), transform 1.1s var(--ease) calc(var(--td, .5s) + .35s + var(--k) * .1s);
}
.sec6.is-open .sec6__info.is-on .sec6__list li + li::after { transform: scaleX(1); transition: transform 1s var(--ease) calc(var(--td, .5s) + .45s + var(--k) * .1s); }

.sec6__info.is-out .sec6__icon { opacity: 0; transition: opacity .45s ease; }
.sec6__info.is-out .sec6__head,
.sec6__info.is-out .sec6__list li { opacity: 0; transform: translate3d(0, -12px, 0); transition: opacity .45s ease, transform .6s var(--ease); }

/* ---------- 번호 (클릭 이동 · 진행 바) ---------- */
.sec6__pager {
    position: absolute; z-index: 5;
    left: calc(147 * var(--u)); top: calc(50% + 380 * var(--u));
    display: flex; align-items: center;
    gap: calc(18 * var(--u));
    opacity: 0;
    transition: opacity .4s ease;
}
.sec6.is-open .sec6__pager { opacity: 1; transition: opacity 1s ease 1.6s; }
.sec6__page {
    display: flex; align-items: center;
    gap: calc(12 * var(--u));
    padding: 6px 0;
    font-family: var(--ff-en);
    font-size: max(12px, calc(15 * var(--u)));
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    transition: color .4s ease;
}
.sec6__page:hover, .sec6__page.is-on { color: #fff; }
.sec6__page > i {
    position: relative;
    display: block;
    width: 0; height: 1px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
    transition: width .7s var(--ease-io);
}
.sec6__page.is-on > i { width: calc(64 * var(--u)); min-width: 36px; }
.sec6__page > i::after {
    content: ''; position: absolute; inset: 0;
    background: #fff;
    transform: scaleX(0); transform-origin: 0 50%;
}
.sec6.is-running .sec6__page.is-on > i::after { animation: sec6Fill var(--dur, 5500ms) linear forwards; }
@keyframes sec6Fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* =========================================================
   SECTION 7 · COMMUNITY
   · .is-in   : COMMUNITY 글자가 한 자씩 떠오름
   · .is-open : PC  배경이 왼쪽 패널로 줄며 왼쪽 안내 + 오른쪽 단지별 사진
                모바일 배경이 위쪽 안내 영역으로 줄어듦
   · 탭 전환 : 사진 3장이 차례로 오른쪽에서 닦아내듯 교체, 사진명은 위아래로 교체
========================================================= */
.sec7 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #fff;
    color: #1e0e0e;
}
.sec7.no-anim *, .sec7.no-anim *::before, .sec7.no-anim *::after { transition: none !important; animation: none !important; }

/* ---------- 배경 : 전체 → 왼쪽 패널 (1920 기준 515px) ---------- */
.sec7__visual {
    position: absolute; inset: 0; z-index: 2;
    overflow: hidden;
    background: #ebe0d1;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.5s var(--ease-io);
}
.sec7.is-open .sec7__visual { clip-path: inset(0 73.177% 0 0); }
.sec7__visual picture, .sec7__visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
}
/* 들어오면 배경이 아주 천천히 다가옴 */
.sec7__visual picture { transform: scale(1.06); transition: transform .6s ease; }
.sec7.is-in .sec7__visual picture { transform: none; transition: transform 6s cubic-bezier(.25, .46, .45, .94); }
/* 패널이 되면서 이미지도 같이 왼쪽으로 흘러 → 밝은 가운데 부분이 패널 안으로 (1920 기준 가운데 960 → 패널 가운데 257) */
.sec7.is-open .sec7__visual picture { transform: translate3d(calc(-400 * var(--u)), 0, 0); transition: transform 1.5s var(--ease-io); }

/* ---------- 처음 화면 : COMMUNITY ---------- */
.sec7__intro {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding-top: calc(110 * var(--u));
    text-align: center;
    pointer-events: none;
    transition: opacity .6s ease, filter .6s ease, transform 1s var(--ease);
}
.sec7.is-open .sec7__intro { opacity: 0; filter: blur(6px); transform: scale(1.04); }

.sec7__intro-en {
    padding-left: .3em;            /* 마지막 글자 뒤 자간만큼 보정해 가운데 정렬 */
    font-family: var(--ff-en);
    font-size: max(44px, calc(91 * var(--u)));
    font-weight: 400;
    line-height: 1;
    letter-spacing: .3em;
    white-space: nowrap;
}
.sec7__intro-en span {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 35%, 0);
    transition: opacity .4s ease, transform .4s ease, filter .4s ease;
}
.sec7.is-in .sec7__intro-en span {
    opacity: 1; filter: blur(0); transform: none;
    transition:
            opacity 1s ease calc(.15s + var(--k) * .07s),
            transform 1.3s var(--ease) calc(.15s + var(--k) * .07s),
            filter 1s ease calc(.15s + var(--k) * .07s);
}
.sec7__intro-ko {
    margin-top: calc(29 * var(--u));
    font-size: max(15px, calc(24 * var(--u)));
    letter-spacing: -.02em;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec7.is-in .sec7__intro-ko { opacity: 1; transform: none; transition: opacity 1s ease .9s, transform 1.2s var(--ease) .9s; }

/* ---------- 왼쪽 공용 안내 ---------- */
.sec7__aside {
    position: absolute; z-index: 3;
    left: 0; top: calc(50% - 279 * var(--u));
    width: calc(540 * var(--u));
    text-align: center;
    letter-spacing: -.03em;
}
.sec7__slogan {
    display: inline-block;
    text-align: left;
    font-size: max(22px, calc(40 * var(--u)));
    font-weight: 400;
    line-height: 1.5;
}
.sec7__slogan span { display: block; white-space: nowrap; }
.sec7__slogan b { font-weight: 700; }
.sec7__slogan i { display: inline-block; font-style: italic; padding-right: .06em; }
.sec7__desc {
    margin-top: calc(10 * var(--u));
    font-size: max(13px, calc(19 * var(--u)));
    line-height: 1.58;
    color: #333;
}
.sec7__facils {
    margin-top: calc(66 * var(--u));
    padding-left: calc(90 * var(--u));
    text-align: left;
    font-size: max(12px, calc(16 * var(--u)));
    line-height: 2.19;
    color: #444;
    white-space: nowrap;
}
.sec7__facils b { margin-right: .3em; font-weight: 700; color: #1f2f6e; }

/* 등장 : 슬로건 → 설명 → 목록 차례로 */
.sec7__slogan span, .sec7__desc, .sec7__facils li {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec7.is-open .sec7__slogan span { opacity: 1; transform: none; transition: opacity 1s ease calc(.7s + var(--k) * .1s), transform 1.2s var(--ease) calc(.7s + var(--k) * .1s); }
.sec7.is-open .sec7__desc        { opacity: 1; transform: none; transition: opacity 1s ease 1.05s, transform 1.2s var(--ease) 1.05s; }
.sec7.is-open .sec7__facils li   { opacity: 1; transform: none; transition: opacity .9s ease calc(1.15s + var(--k) * .05s), transform 1.1s var(--ease) calc(1.15s + var(--k) * .05s); }

/* ---------- 오른쪽 단지별 커뮤니티 ---------- */
.sec7__main {
    position: absolute; z-index: 1;
    left: calc(593 * var(--u)); right: 0;
    top: calc(50% - 280 * var(--u));
}
.sec7__tit {
    font-family: var(--ff-en);
    font-size: max(30px, calc(52 * var(--u)));
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}
.sec7__sub {
    margin-top: calc(13 * var(--u));
    font-size: max(15px, calc(24 * var(--u)));
    line-height: 1.25;
    letter-spacing: -.03em;
    color: #222;
}

/* 등장 : 오른쪽에서 차례로 */
.sec7__tit, .sec7__sub, .sec7__tabs {
    opacity: 0;
    transform: translate3d(calc(70 * var(--u)), 0, 0);
    transition: opacity .4s ease, transform .5s ease;
}
.sec7.is-open .sec7__tit,
.sec7.is-open .sec7__sub,
.sec7.is-open .sec7__tabs {
    opacity: 1; transform: none;
    transition: opacity 1s ease var(--dl), transform 1.3s var(--ease) var(--dl);
}
.sec7__tit  { --dl: .55s; }
.sec7__sub  { --dl: .65s; }
.sec7__tabs { --dl: .75s; }

/* 탭 : 남색 배경이 미끄러지듯 이동 + 하단 진행 바 */
.sec7__tabs {
    position: relative;
    display: flex; gap: var(--tg);
    margin-top: calc(46 * var(--u));
    --tw: calc(216 * var(--u));
    --tg: calc(12 * var(--u));
    /* 탭 사이 간격은 가려서, 남색 배경이 지나갈 때 틈으로 보이지 않게 */
    -webkit-mask-image: linear-gradient(90deg, #000 var(--tw), transparent var(--tw), transparent calc(var(--tw) + var(--tg)), #000 calc(var(--tw) + var(--tg)));
    mask-image: linear-gradient(90deg, #000 var(--tw), transparent var(--tw), transparent calc(var(--tw) + var(--tg)), #000 calc(var(--tw) + var(--tg)));
}
.sec7__tab {
    position: relative; z-index: 1;
    width: var(--tw);
    height: calc(72 * var(--u)); min-height: 44px;
    border: 1px solid #d2d2d2;
    font-size: max(13px, calc(20 * var(--u)));
    font-weight: 600;
    letter-spacing: -.02em;
    color: #1e0e0e;
    transition: color .55s var(--ease), border-color .55s var(--ease);
}
.sec7__tab:focus-visible { outline-offset: -4px; }
.sec7__tab.is-on { color: #fff; border-color: transparent; }
.sec7__tab:not(.is-on):hover { border-color: var(--navy); color: var(--navy); }

.sec7__tab-bg {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: var(--tw); height: 100%;
    background: var(--navy);
    transform: translate3d(calc(var(--t, 0) * (var(--tw) + var(--tg))), 0, 0);
    transition: transform .75s var(--ease-io);
    overflow: hidden;
}
.sec7__tab-bg::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: rgba(255, 255, 255, .55);
    transform: scaleX(0); transform-origin: 0 50%;
}
.sec7__tab-bg.is-running::after { animation: sec7Fill var(--dur, 5000ms) linear forwards; }
.sec7__tabs.is-paused .sec7__tab-bg::after { animation-play-state: paused; }
@keyframes sec7Fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 사진 3컷 (1920 기준 429x235, 간격 19 · 마지막 컷은 화면 끝까지) */
.sec7__cuts {
    display: grid;
    grid-template-columns: repeat(3, calc(429 * var(--u)));
    column-gap: calc(19 * var(--u));
    margin: calc(55 * var(--u)) 0 0 calc(2 * var(--u));
}
.sec7__pic {
    position: relative;
    aspect-ratio: 429 / 235;
    overflow: hidden;
    background: #ece8e2;
    clip-path: inset(0 0 0 100%);
    transition: clip-path .5s ease;
}
.sec7.is-open .sec7__pic { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease-io) calc(.85s + var(--k) * .12s); }

.sec7__pic img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    clip-path: inset(0 0 0 100%);
    transform: scale(1.1);
}
.sec7__pic img.is-prev { z-index: 1; clip-path: inset(0 0 0 0); transform: none; }
/* 탭 전환 : 첫 컷부터 차례로 오른쪽에서 닦아내듯 + 살짝 다가오며 자리잡음 */
.sec7__pic img.is-on {
    z-index: 2;
    clip-path: inset(0 0 0 0);
    transform: none;
    transition: clip-path 1.2s var(--ease-io) calc(var(--k) * .12s), transform 1.8s var(--ease) calc(var(--k) * .12s);
}
@media (hover: hover) and (pointer: fine) {
    .sec7__cut:hover .sec7__pic img.is-on { transform: scale(1.04); transition: transform 1.2s var(--ease); }
}

/* 사진명 : 왼쪽 세로 막대 + 이름 위아래 교체 */
.sec7__cap {
    position: relative;
    height: 1.3em;
    margin-top: calc(12 * var(--u));
    overflow: hidden;
    font-size: max(14px, calc(24 * var(--u)));
    line-height: 1.3;
    letter-spacing: -.03em;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity .4s ease, transform .4s ease;
}
.sec7.is-open .sec7__cap { opacity: 1; transform: none; transition: opacity 1s ease calc(1.3s + var(--k) * .12s), transform 1.2s var(--ease) calc(1.3s + var(--k) * .12s); }
.sec7__cap::before {
    content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
    width: 2px; background: #1e0e0e;
}
.sec7__cap span {
    position: absolute; left: calc(14 * var(--u)); top: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
.sec7__cap span.is-on {
    opacity: 1; transform: none;
    transition: transform .8s var(--ease) calc(.2s + var(--k) * .12s), opacity .6s ease calc(.2s + var(--k) * .12s);
}
.sec7__cap span.is-out { opacity: 0; transform: translate3d(0, -100%, 0); transition: transform .6s var(--ease), opacity .4s ease; }


/* =========================================================
   SECTION 8 · 오시는길
   · PC 풀페이지 : .is-in 이 붙으면 문구 → 약도 → 주소 순으로 등장
   · 일반 스크롤(모바일) : 각 요소가 화면에 들어올 때 .is-rv 로 등장
========================================================= */
.sec8 {
    height: 100vh;
    height: calc(var(--vh) * 100);
    min-height: 600px;
    background: #eef1f5;
    color: #1d2433;
}
.sec8.no-anim *, .sec8.no-anim *::before, .sec8.no-anim *::after { transition: none !important; }

.sec8__bg { position: absolute; inset: 0; }
.sec8__bg picture, .sec8__bg img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 0 0;   /* 왼쪽 위 잎사귀 기준 */
}

/* ---------- 왼쪽 문구 ---------- */
.sec8__txt {
    position: absolute; z-index: 2;
    left: calc(148 * var(--u)); top: calc(50% - 108 * var(--u));
}
.sec8__tit {
    font-size: max(26px, calc(44 * var(--u)));
    font-weight: 300;
    line-height: 1.36;
    letter-spacing: -.03em;
    color: #1c2f74;
}
.sec8__ln { display: block; clip-path: inset(-.1em -.3em -.25em -.3em); }
.sec8__ln > span { display: inline-block; }
strong.sec8__ln { font-weight: 700; color: #12286b; }


/* ---------- 약도 2장 ---------- */
.sec8__maps {
    position: absolute; z-index: 2;
    left: calc(624 * var(--u)); top: calc(50% - 207 * var(--u));
    display: flex; gap: calc(35 * var(--u));
}
.sec8__map {
    width: calc(536 * var(--u)); height: calc(360 * var(--u));   /* 약도 이미지에 테두리 포함 */
    margin: 0;
    overflow: hidden;
}
.sec8__map img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ---------- 주소 3칸 ---------- */
.sec8__places {
    position: absolute; z-index: 2;
    left: calc(624 * var(--u)); top: calc(50% + 196 * var(--u));
    width: calc(1108 * var(--u));
    display: grid;
    grid-template-columns: repeat(3, calc(322 * var(--u)));
    justify-content: space-between;
}
.sec8__place-head {
    position: relative;
    display: flex; align-items: center;
    padding-bottom: calc(16 * var(--u));
}
.sec8__place-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px; background: #a3a9b4;
}
.sec8__place h3 {
    margin-right: auto;
    font-size: max(16px, calc(24 * var(--u)));
    font-weight: 700;
    letter-spacing: -.03em;
    color: #12286b;
}
.sec8__ico {
    display: block;
    flex: none;
    transition: transform .4s var(--ease), opacity .3s ease;
}
.sec8__ico img { display: block; width: 100%; height: 100%; }
/* 아이콘 실제 크기 그대로 · 핀은 오른쪽 끝선에 딱 맞춤 */
.sec8__ico--n   { width: calc(25 * var(--u)); height: calc(22 * var(--u)); min-width: 20px; min-height: 18px; }
.sec8__ico--pin { width: calc(21 * var(--u)); height: calc(24 * var(--u)); min-width: 17px; min-height: 19px; margin-left: calc(26 * var(--u)); }
.sec8__ico:hover, .sec8__ico:focus-visible { transform: translate3d(0, -4px, 0); opacity: .75; }
.sec8__addr {
    margin-top: calc(20 * var(--u));
    white-space: nowrap;
    font-size: max(14px, calc(20 * var(--u)));
    letter-spacing: -.02em;
    color: #333;
}

/* ---------- 등장 ---------- */
.sec8__ln > span { transform: translate3d(0, 108%, 0); transition: transform .4s ease; }
.sec8__place { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .4s ease, transform .4s ease; }
/* 펼침은 이미지에 적용 (figure 자체를 가리면 화면 진입 감지가 안 됨) */
.sec8__map img { clip-path: inset(0 0 100% 0); transition: clip-path .4s ease; }
.sec8__place-head::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s ease; }

.sec8.is-in .sec8__ln > span, .sec8__ln.is-rv > span {
    transform: none; transition: transform 1.2s cubic-bezier(.16, .84, .24, 1) var(--dl, 0s);
}

.sec8.is-in .sec8__place, .sec8__place.is-rv {
    opacity: 1; transform: none;
    transition: opacity 1s ease var(--dl, 0s), transform 1.2s var(--ease) var(--dl, 0s);
}
.sec8.is-in .sec8__map img, .sec8__map.is-rv img {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.3s var(--ease-io) var(--dl, 0s);
}
.sec8.is-in .sec8__place-head::after, .sec8__place.is-rv .sec8__place-head::after {
    transform: scaleX(1);
    transition: transform 1.1s var(--ease) calc(var(--dl, 0s) + .2s);
}


/* =========================================================
   PC 가로 스크롤 : 프리미엄(섹션6)
   · 휠을 내릴 때마다 화면이 옆으로 한 칸씩 이동 (풀페이지 단계)
   · 사진은 칸보다 느리게 움직여 깊이감 (패럴랙스)
   · html.is-fp 일 때만 적용 → 모바일은 기존 자동 슬라이드 그대로
========================================================= */
html.is-fp .sec6__bg {
    clip-path: none !important;
    overflow: hidden;   /* 사진(칸보다 넓게 깔림)이 옆 칸 영역으로 삐져나와 미리 보이지 않게 */
    z-index: 1;
    transform: translate3d(100%, 0, 0);
    transition: transform 1.1s var(--ease-io);
}
html.is-fp .sec6__bg.is-left { transform: translate3d(-100%, 0, 0); }
html.is-fp .sec6__bg.is-on { z-index: 2; transform: none; }

html.is-fp .sec6__bg picture {
    left: -12%; right: -12%;
    width: auto; max-width: none;
    transform: translate3d(-10%, 0, 0);
    transition: transform 1.1s var(--ease-io);
}
html.is-fp .sec6__bg.is-left picture { transform: translate3d(10%, 0, 0); }
html.is-fp .sec6__bg.is-on picture { transform: none; }

/* 프리미엄 글자 : 사진만 옆으로 넘어가고 글자는 제자리에서 연출
   · 나가는 글자 : 넘기는 방향으로 살짝 흐르며 사라짐
   · 들어오는 글자 : 반대편에서 흘러 들어옴 (제목은 써지듯 · 아이콘은 그려지듯 · 목록은 차례로)
   · .dir-prev(이전 칸) 이면 방향 반대 */

/* 들어오기 전 대기 위치 : 넘어오는 쪽(다음 = 오른쪽 / 이전 = 왼쪽) */
html.is-fp .sec6__head,
html.is-fp .sec6__list li { transform: translate3d(calc(60 * var(--u)), 0, 0); }
html.is-fp .sec6.dir-prev .sec6__head,
html.is-fp .sec6.dir-prev .sec6__list li { transform: translate3d(calc(-60 * var(--u)), 0, 0); }

/* 들어옴 (등장 시간·순서는 기본 슬라이드 규칙 그대로 사용) */
html.is-fp .sec6.is-open .sec6__info.is-on .sec6__head,
html.is-fp .sec6.is-open .sec6__info.is-on .sec6__list li { transform: none; }

/* 나감 : 넘기는 방향으로 흐르며 사라짐 */
html.is-fp .sec6__info.is-out .sec6__head,
html.is-fp .sec6__info.is-out .sec6__list li { transform: translate3d(calc(-50 * var(--u)), 0, 0); }
html.is-fp .sec6.dir-prev .sec6__info.is-out .sec6__head,
html.is-fp .sec6.dir-prev .sec6__info.is-out .sec6__list li { transform: translate3d(calc(50 * var(--u)), 0, 0); }

/* 목록은 위 줄부터 조금 더 빠르게 빠짐 → 흩어지듯 */
html.is-fp .sec6__info.is-out .sec6__list li {
    transition: opacity .4s ease calc(var(--k) * .04s), transform .6s var(--ease) calc(var(--k) * .04s);
}

/* 제목 : 나갈 땐 옆으로 흐르며 사라지고, 들어올 땐 써지듯 (기본 규칙) */
html.is-fp .sec6__title.is-out { transform: translate3d(-.5em, 0, 0); }
html.is-fp .sec6.dir-prev .sec6__title.is-out { transform: translate3d(.5em, 0, 0); }

/* 사라지는 동안 아이콘 선 · 구분선이 먼저 툭 꺼지지 않게 그대로 둠 (PC · 모바일 공통) */
.sec6__info.is-out .sec6__icon * { stroke-dashoffset: 0; }
.sec6__info.is-out .sec6__list li + li::after { transform: scaleX(1); }

/* 번호 : 자동 넘김이 없으니 현재 칸은 꽉 찬 바로 표시 */
html.is-fp .sec6__page.is-on > i::after { transform: scaleX(1); }


/* =========================================================
   MOBILE / TABLET  (≤1023px)
========================================================= */
@media (max-width: 1023px) {

    .sec1 {
        height: 100vh;
        height: 100svh;        /* 주소창이 접혀도 높이가 튀지 않음 */
        min-height: 480px;
    }
    .sec1__shade {
        background:
            linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 20%),
            rgba(0, 0, 0, .14);
    }
    .sec1__copy {
        left: calc(86 * var(--m)); right: calc(60 * var(--m));
        top: 27.5%;
        transform: none;
    }
    .sec1__txt {
        font-size: calc(45 * var(--m));
        line-height: 1.38;
        letter-spacing: -.03em;
    }
    .sec1__float { display: none; }
    /* ---------- SECTION 2 (모바일) ---------- */
    /* 영상 영역은 문서 흐름에서 405px 자리만 차지하고,
       처음엔 그 위에 풀화면으로 덮여 있다가 줄어듦
       → 페이지 높이가 변하지 않아 스크롤이 튀지 않음 */
    .sec2 { height: auto; min-height: 0; padding-top: calc(405 * var(--m)); }

    .sec2__visual {
        position: absolute; inset: auto; left: 0; right: 0; top: 0; z-index: 3;
        height: 100vh;
        height: 100svh;
        min-height: 480px;
        clip-path: none !important;
        transition: height 1.2s var(--ease-io);
    }
    .sec2.is-split .sec2__visual { height: calc(405 * var(--m)); min-height: 0; }

    /* 영상 영역이 줄어들 때 숲(아래쪽)이 남도록 아래 기준으로 맞춤 */
    .sec2 .tv-vbox__poster,
    .sec2 .tv-vbox__video { object-position: 50% 100%; }

    .sec2__copy {
        inset: auto; left: 0; right: 0; top: 35%;
        transform: translate3d(0, -50%, 0) scale(1);
        transition: top 1.2s var(--ease-io), transform 1.2s var(--ease-io);
    }
    .sec2.is-split .sec2__copy { top: 37%; transform: translate3d(0, -50%, 0) scale(.79); }
    .sec2__tit { font-size: calc(58 * var(--m)); }
    .sec2__desc { margin-top: calc(20 * var(--m)); font-size: calc(26 * var(--m)); }

    .sec2__info {
        position: relative; z-index: 1; left: auto; right: auto; top: auto;
        height: auto;
        display: flex; flex-direction: column;
        padding: calc(90 * var(--m)) calc(40 * var(--m)) 0;
    }
    .sec2__head, .sec2__tabs, .sec2__item { transform: translate3d(0, 30px, 0); }
    .sec2__head { --dl: .3s; }
    .sec2__tabs { --dl: .4s; }
    .sec2__item { --dl: calc(.5s + var(--k) * .08s); }
    .sec2__en { font-size: calc(60 * var(--m)); }
    .sec2__ko { margin-top: calc(24 * var(--m)); font-size: calc(24 * var(--m)); }

    .sec2__tabs {
        position: relative; top: auto;
        margin-top: calc(46 * var(--m));
        gap: calc(14 * var(--m));
        --tw: calc(259 * var(--m));
        --tg: calc(14 * var(--m));
    }
    .sec2__tab { height: calc(87 * var(--m)); min-height: 0; font-size: calc(26 * var(--m)); }

    .sec2__data {
        order: 3;
        position: relative; top: auto;
        grid-template-columns: 1fr;
        gap: calc(56 * var(--m));
        margin-top: calc(84 * var(--m));
        padding-left: calc(60 * var(--m));
    }
    .sec2__item dt { width: calc(348 * var(--m)); padding-bottom: calc(18 * var(--m)); font-size: calc(26 * var(--m)); }
    .sec2__item dd { margin-top: calc(18 * var(--m)); font-size: calc(22 * var(--m)); }

    /* 가운데 정렬 : 제목 · 탭 · 정보 (이미지는 전체 너비 유지) */
    .sec2__info { align-items: center; text-align: center; }
    .sec2__tabs { align-self: center; }
    .sec2__data { justify-items: center; padding-left: 0; }
    .sec2__item dd { text-align: center; }
    .sec2__val { left: 0; right: 0; }
    .sec2__pics { align-self: stretch; }

    .sec2__pics {
        order: 4;
        position: relative; right: auto; top: auto;
        width: auto; height: auto;
        aspect-ratio: 713 / 247;
        margin: calc(84 * var(--m)) calc(-40 * var(--m)) 0;   /* 양쪽 모두 화면 끝까지 (전체 너비) */
    }

    /* ---------- SECTION 3 (모바일) ---------- */
    .sec3 { height: calc(1400 * var(--m)); min-height: 0; }   /* 시안 750x1400 높이 그대로 */

    /* 처음 : 두 줄 가운데 / 펼쳐지면 : 한 줄 왼쪽 (두 덩어리를 따로 이동) */
    .sec3__tit { inset: 0; left: 0; top: 0; display: block; transform: none !important; }
    .sec3__layer {
        position: absolute; inset: 0;
        display: block;
        transition: transform 1.5s var(--ease-io);
    }
    .sec3.is-open .sec3__layer { transform: none; }
    .sec3__pre, .sec3__group { position: absolute; margin: 0; }
    .sec3__layer--a {
        transform-origin: calc(40 * var(--m)) 23.7%;
        transform: translate3d(calc(95 * var(--m)), 17.6%, 0) scale(1.3);
    }
    .sec3__layer--b {
        transform-origin: calc(300 * var(--m)) 24.6%;
        transform: translate3d(calc(-28 * var(--m)), 22.2%, 0) scale(1.3);
    }
    .sec3__pre { left: calc(40 * var(--m)); top: calc(23.7% - 5 * var(--m)); margin: 0; font-size: calc(36 * var(--m)); }
    .sec3__group { left: calc(300 * var(--m)); top: 24.6%; gap: calc(10 * var(--m)); }   /* '부산을 대표하는' 과 간격 좁힘 */
    .sec3__key { padding: calc(10 * var(--m)) calc(14 * var(--m)) calc(14 * var(--m)) calc(22 * var(--m)); }
    .sec3__key em { font-size: calc(60 * var(--m)); }
    .sec3__post { margin-bottom: calc(12 * var(--m)); font-size: calc(36 * var(--m)); }
    .sec3__br { width: calc(18 * var(--m)); height: calc(18 * var(--m)); min-width: 0; min-height: 0; }
    .sec3__br--l { transform: translate3d(calc(50 * var(--m)), calc(28 * var(--m)), 0); }
    .sec3__br--r { transform: translate3d(calc(-50 * var(--m)), calc(-28 * var(--m)), 0); }

    .sec3__en { left: calc(40 * var(--m)); top: calc(16.3% - 4 * var(--m)); font-size: calc(36 * var(--m)); }
    .sec3__desc { left: calc(40 * var(--m)); right: calc(40 * var(--m)); top: 35.1%; }
    .sec3__lead { font-size: 13px; }
    .sec3__zones { margin-top: calc(26 * var(--m)); }
    .sec3__zone + .sec3__zone { margin-top: calc(14 * var(--m)); }
    .sec3__zone dt { font-size: 10px; }
    .sec3__zone dd { margin-top: calc(4 * var(--m)); font-size: 8px; line-height: 1.7; letter-spacing: -.04em; }

    /* 사업개요 : 오른쪽 정렬, 탭 바로 위 */
    .sec3__info {
        left: auto; right: calc(40 * var(--m));
        bottom: calc(300 * var(--m));
    }
    .sec3__info-tit { font-size: 10px; }
    .sec3__info-list { margin-top: calc(10 * var(--m)); padding-left: calc(18 * var(--m)); }
    .sec3__info-list::before { left: calc(3 * var(--m)); }
    .sec3__info-list li { font-size: calc(17 * var(--m)); }
    .sec3__info-list li.is-b { font-size: 8px; }

    .sec3__tabs {
        left: calc(40 * var(--m)); right: calc(40 * var(--m));
        bottom: calc(80 * var(--m));
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(28 * var(--m));
        row-gap: calc(42 * var(--m));
    }
    .sec3__tab { padding-bottom: calc(20 * var(--m)); font-size: calc(25 * var(--m)); white-space: nowrap; letter-spacing: -.04em; }
    .sec3__tab > i { height: 2px; }

    /* ---------- SECTION 4 (모바일) ---------- */
    .sec4 { height: auto; min-height: 0; }

    /* 야경 : 처음엔 화면을 덮고 있다가 위로 걷힘 (페이지 높이 변화 없음) */
    .sec4__visual {
        inset: auto; left: 0; right: 0; top: 0; z-index: 5;
        height: 100vh;
        height: 100svh;
        clip-path: none !important;
        transition: transform 1.4s var(--ease-io), opacity .4s ease;
    }
    /* 야경이 통째로 아래로 내려가 하단 야경 자리에 내려앉고 사라짐 */
    .sec4.is-open .sec4__visual {
        transform: translate3d(0, calc(993 * var(--m)), 0);
        opacity: 0;
        pointer-events: none;   /* 투명해진 야경이 아래 버튼 터치를 막지 않게 */
        transition: transform 1.6s var(--ease-io), opacity .6s ease 1.4s;
    }
    .sec4.is-open .sec4__visual picture { transform: none; }

    .sec4__body {
        position: relative; inset: auto; z-index: 6;
        left: auto; top: auto;
        width: auto;
        height: calc(993 * var(--m));
        padding: calc(150 * var(--m)) calc(40 * var(--m)) 0;
    }


    /* 문구 : 처음엔 야경 위 흰 글자(화면 42% 위치) → 제자리 */
    .sec4__tit {
        margin-top: calc(66 * var(--m));
        transform: translate3d(calc(32 * var(--m)), calc(42.5vh - 255 * var(--m)), 0) scale(1.12);
        transform: translate3d(calc(32 * var(--m)), calc(42.5svh - 255 * var(--m)), 0) scale(1.12);
    }
    .sec4__l1 { font-size: calc(42 * var(--m)); }
    .sec4__l2 { gap: calc(10 * var(--m)); margin: calc(22 * var(--m)) 0 0 calc(185 * var(--m)); }
    .sec4__key { padding: calc(12 * var(--m)) calc(18 * var(--m)) calc(14 * var(--m)) calc(20 * var(--m)); }
    .sec4__key em { font-size: calc(60 * var(--m)); }
    .sec4__post { margin-bottom: calc(16 * var(--m)); font-size: calc(42 * var(--m)); }
    .sec4__br { width: calc(18 * var(--m)); height: calc(18 * var(--m)); min-width: 0; min-height: 0; }
    .sec4__br--l { transform: translate3d(calc(60 * var(--m)), calc(28 * var(--m)), 0); }
    .sec4__br--r { transform: translate3d(calc(-60 * var(--m)), calc(-28 * var(--m)), 0); }

    .sec4__desc { margin: calc(84 * var(--m)) 0 0; font-size: calc(24 * var(--m)); line-height: 1.75; }
    .sec4__desc strong { font-size: 1.08em; }

    .sec4__photo--1 { left: calc(452 * var(--m)); top: calc(499 * var(--m)); width: calc(258 * var(--m)); height: calc(368 * var(--m)); }
    .sec4__photo--2 { left: calc(241 * var(--m)); top: calc(737 * var(--m)); width: calc(192 * var(--m)); height: calc(256 * var(--m)); }

    .sec4__badge {
        left: calc(552 * var(--m)); top: calc(918 * var(--m));
        width: calc(137 * var(--m)); height: calc(137 * var(--m));
        min-width: 0; min-height: 0;
        z-index: 7;
    }

    .sec4__bottom {
        display: block;
        position: relative; z-index: 1;
        height: calc(410 * var(--m));
        overflow: hidden;
    }
    .sec4__bottom img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }

    /* 바로가기 버튼 : 하단 야경 아래 */
    .sec4__links {
        position: static;
        flex-direction: column;
        gap: calc(16 * var(--m));
        padding: calc(60 * var(--m)) calc(40 * var(--m)) calc(20 * var(--m));
    }
    .sec4__link { height: calc(90 * var(--m)); min-height: 0; gap: calc(14 * var(--m)); padding: 0; font-size: calc(25 * var(--m)); }
    .sec4__link svg { width: calc(16 * var(--m)); min-width: 0; }

    /* ---------- SECTION 5 (모바일) ---------- */
    .sec5 {
        height: auto; min-height: 0;
        display: flex; flex-direction: column;
        padding: calc(140 * var(--m)) 0 calc(150 * var(--m));
    }
    .sec5__txt { display: contents; }

    /* 타이틀 : 가운데 한 줄 */
    .sec5__lead { order: 0; margin-bottom: calc(18 * var(--m)); padding: 0 calc(40 * var(--m)); text-align: center; font-size: calc(30 * var(--m)); line-height: 1.4; }
    .sec5__lead span { display: inline-block; }

    /* 위 문구 : 3줄 각각 */
    .sec5__intro { order: 1; padding: 0 calc(40 * var(--m)); text-align: center; font-size: calc(24 * var(--m)); line-height: 1.9; }
    .sec5__intro span { display: block; }
    .sec5__vline { display: none; }   /* PC 전용 세로선 (모바일 시안에 없음) */



    .sec5__map {
        order: 3;
        position: relative; left: auto; top: auto;
        width: 100%; height: auto;
        aspect-ratio: 1554 / 756;
        margin-top: calc(34 * var(--m));
    }

    /* 공원을 가진 (가운데) / 「새로운 센텀시티」 가 되다! (한 줄 가운데) */
    .sec5__head {
        order: 4;
        display: flex; flex-wrap: wrap;
        justify-content: center;
        align-items: flex-end;
        margin-top: calc(58 * var(--m));
        padding: 0 calc(30 * var(--m));
    }

    .sec5__tit { display: contents; }
    .sec5__l1 { margin-left: 0; text-align: center; font-size: calc(48 * var(--m)); }
    .sec5__key {
        margin: calc(34 * var(--m)) 0 0;
        padding: calc(14 * var(--m)) calc(20 * var(--m)) calc(16 * var(--m)) calc(26 * var(--m));
    }
    .sec5__key em { font-size: calc(62 * var(--m)); }
    .sec5__br { width: calc(20 * var(--m)); height: calc(20 * var(--m)); min-width: 0; min-height: 0; }

    .sec5__slogan {
        margin: 0 0 0 calc(12 * var(--m));
        font-size: calc(46 * var(--m));
        transform: translate3d(0, 14px, 0);
    }

    .sec5__keys {
        order: 6;
        position: static;
        flex-direction: column; align-items: stretch;
        margin: calc(78 * var(--m)) calc(86 * var(--m)) 0;
    }
    .sec5__key-item { gap: calc(20 * var(--m)); padding: 0 calc(28 * var(--m)); }
    .sec5__key-item b { font-size: calc(26 * var(--m)); }
    .sec5__key-item span { font-size: calc(19 * var(--m)); white-space: nowrap; letter-spacing: -.03em; }
    .sec5__sep { flex: none; height: 1px; margin: calc(26 * var(--m)) 0; }

    /* 모바일 등장 순서 : 위 문구부터 → 지도 → 큰 문구 → 키워드 (화면 순서대로) */
    .sec5 { --t2: 1.6s; --t3: 2.7s; }
    .sec5.is-in .sec5__lead span  { transition: opacity .9s ease calc(.05s + var(--d) * .08s), transform 1.1s var(--ease) calc(.05s + var(--d) * .08s); }
    .sec5.is-in .sec5__intro span { transition: opacity .9s ease calc(.3s + var(--d) * .12s), transform 1.1s var(--ease) calc(.3s + var(--d) * .12s); }

    .sec5.is-in .sec5__map picture {
        transition: -webkit-mask-size 1.7s cubic-bezier(.5, 0, .2, 1) .5s, mask-size 1.7s cubic-bezier(.5, 0, .2, 1) .5s;
    }

    /* ---------- SECTION 6 (모바일) ---------- */
    .sec6 {
        /* 처음 창 : 750 기준 149 ~ 603 / 294 ~ 985 (높이 1400) */
        --wl: calc(149 * var(--m));
        --wr: calc(100% - 603 * var(--m));
        --wt: 21%;
        --wb: 29.6%;
        --wc-t: 45.7%;
        --wc-b: 54.3%;
        height: calc(1400 * var(--m));   /* 시안 750x1400 높이 그대로 */
        min-height: 0;
    }
    .sec6__intro-ln { font-size: calc(53.5 * var(--m)); }   /* 자간은 em 이라 PC(.27em)와 같은 비율로 맞춰짐 */
    .sec6__intro-ln--1 { left: calc(73 * var(--m));  top: 37.1%; }
    .sec6__intro-ln--2 { left: calc(241 * var(--m)); top: 45.9%; }
    .sec6__intro-ln--3 { left: calc(391 * var(--m)); top: 54.7%; }

    .sec6__label { left: calc(43 * var(--m)); top: 16.5%; }
    .sec6__label-en { font-size: calc(24 * var(--m)); line-height: 1.58; }

    .sec6__key { left: calc(40 * var(--m)); top: 24.9%; padding: calc(8 * var(--m)) calc(28 * var(--m)) calc(12 * var(--m)) calc(22 * var(--m)); }
    .sec6__titles { font-size: calc(56 * var(--m)); }
    .sec6__br { width: calc(20 * var(--m)); height: calc(20 * var(--m)); min-width: 0; min-height: 0; }

    /* 정보는 아래(번호) 기준으로 위로 쌓음 → 문구가 길어도 번호와 안 겹침 */
    .sec6__infos { left: calc(60 * var(--m)); right: calc(40 * var(--m)); top: auto; bottom: calc(80 * var(--m) + 110 * var(--m) + env(safe-area-inset-bottom, 0px)); width: auto; }
    .sec6__info { top: auto; bottom: 0; }
    .sec6__info { grid-template-columns: calc(80 * var(--m)) 1fr; column-gap: calc(45 * var(--m)); }
    .sec6__icon { width: calc(80 * var(--m)); height: calc(80 * var(--m)); margin-top: 0; }
    .sec6__head { font-size: calc(32 * var(--m)); white-space: normal; }
    .sec6__list { margin: calc(18 * var(--m)) 0 0 calc(-10 * var(--m)); width: calc(100% + 10 * var(--m)); }
    .sec6__list li { padding: calc(14 * var(--m)) 0 calc(14 * var(--m)) calc(10 * var(--m)); font-size: calc(19 * var(--m)); white-space: normal; }

    .sec6__pager { left: calc(40 * var(--m)); top: auto; bottom: calc(80 * var(--m) + 44 * var(--m) + env(safe-area-inset-bottom, 0px)); gap: calc(22 * var(--m)); }   /* 하단 바 위 */
    .sec6__page { font-size: calc(20 * var(--m)); gap: calc(12 * var(--m)); }
    .sec6__page.is-on > i { width: calc(60 * var(--m)); min-width: 0; }

    /* ---------- SECTION 7 (모바일) ---------- */
    /* 높이는 내용 그대로. 배경은 처음엔 시안 높이(1400)로 덮고 있다가
       위쪽 안내 영역 높이(--ah, JS 계산)로 줄어듦 → 페이지 높이 변화 없음 */
    .sec7 { height: auto; min-height: 0; }

    .sec7__visual {
        inset: auto; left: 0; right: 0; top: 0;
        height: calc(1400 * var(--m));
        clip-path: none !important;
        transition: height 1.4s var(--ease-io);
    }
    .sec7.is-open .sec7__visual { height: var(--ah, calc(981 * var(--m))); }
    .sec7__visual img { object-position: 50% 0; }
    .sec7.is-open .sec7__visual picture { transform: none; }   /* 모바일은 위아래로 줄어드니 옆 이동 없음 */

    /* COMMUNITY : 시안 1400 화면 기준 가운데 (배경이 줄어도 제자리에서 사라짐) */
    .sec7__intro { bottom: auto; height: calc(1400 * var(--m)); padding-top: calc(44 * var(--m)); }
    .sec7__intro-en { font-size: calc(78 * var(--m)); }
    .sec7__intro-ko { margin-top: calc(28 * var(--m)); font-size: calc(24 * var(--m)); }

    /* 위쪽 안내 */
    .sec7__aside {
        position: relative; left: auto; top: auto;
        width: auto;
        padding: calc(130 * var(--m)) calc(40 * var(--m)) calc(90 * var(--m));
    }
    .sec7__slogan { font-size: calc(54 * var(--m)); }
    .sec7__desc { margin-top: calc(19 * var(--m)); font-size: calc(23.5 * var(--m)); line-height: 1.57; }
    .sec7__facils { margin-top: calc(68 * var(--m)); padding-left: calc(90 * var(--m)); font-size: calc(20 * var(--m)); line-height: 2.23; }

    /* 아래 단지별 */
    .sec7__main {
        position: relative; left: auto; right: auto; top: auto;
        padding: calc(72 * var(--m)) calc(109 * var(--m)) calc(110 * var(--m));
        text-align: center;
    }
    .sec7__tit { font-size: calc(66 * var(--m)); }
    .sec7__sub { margin-top: calc(18 * var(--m)); font-size: calc(24 * var(--m)); }
    .sec7__tit, .sec7__sub, .sec7__tabs { transform: translate3d(0, 30px, 0); }

    .sec7__tabs {
        margin-top: calc(54 * var(--m));
        --tw: calc(259 * var(--m));
        --tg: calc(14 * var(--m));
    }
    .sec7__tab { height: calc(86 * var(--m)); min-height: 0; font-size: calc(26 * var(--m)); }

    .sec7__cuts {
        grid-template-columns: 1fr;
        row-gap: calc(66 * var(--m));
        margin: calc(51 * var(--m)) 0 0;
        text-align: left;
    }
    .sec7__cap { margin-top: calc(17 * var(--m)); font-size: calc(25 * var(--m)); }
    .sec7__cap span { left: calc(18 * var(--m)); }

    /* 사진 · 사진명 : 화면에 들어올 때 하나씩 (.is-rv · JS) */
    .sec7.is-open .sec7__pic { clip-path: inset(0 0 0 100%); transition: clip-path .4s ease; }
    .sec7__cut.is-rv .sec7__pic { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-io) .1s; }
    .sec7.is-open .sec7__cap { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .4s ease, transform .4s ease; }
    .sec7__cut.is-rv .sec7__cap { opacity: 1; transform: none; transition: opacity 1s ease .5s, transform 1.2s var(--ease) .5s; }

    /* ---------- SECTION 8 (모바일) ---------- */
    .sec8 { height: auto; min-height: 0; padding: calc(268 * var(--m)) 0 calc(110 * var(--m)); }
    .sec8__txt { position: relative; z-index: 2; left: auto; top: auto; padding: 0 calc(30 * var(--m)); text-align: center; }
    .sec8__tit { font-size: calc(48 * var(--m)); line-height: 1.4; }
    .sec8__ln { display: inline-block; }
    strong.sec8__ln { font-size: calc(54 * var(--m)); }

    .sec8__maps {
        position: relative; left: auto; top: auto;
        flex-direction: column; gap: calc(30 * var(--m));
        margin: calc(50 * var(--m)) calc(37 * var(--m)) 0;
    }
    .sec8__map { width: auto; height: auto; aspect-ratio: 536 / 360; }

    .sec8__places {
        position: relative; left: auto; top: auto;
        width: calc(404 * var(--m));
        margin: calc(72 * var(--m)) auto 0;
        grid-template-columns: 1fr;
        row-gap: calc(52 * var(--m));
    }
    .sec8__place-head { padding-bottom: calc(22 * var(--m)); }
    .sec8__place h3 { font-size: calc(32 * var(--m)); }
    .sec8__ico--n   { width: calc(31 * var(--m)); height: calc(27 * var(--m)); min-width: 0; min-height: 0; }
    .sec8__ico--pin { width: calc(25 * var(--m)); height: calc(29 * var(--m)); min-width: 0; min-height: 0; margin-left: calc(36 * var(--m)); }
    .sec8__addr { margin-top: calc(24 * var(--m)); font-size: calc(27 * var(--m)); white-space: nowrap; }

    /* 모바일은 화면에 들어오는 순서대로 바로 */
    .sec8 [data-rv] { --dl: 0s !important; }
    .sec8__maps .sec8__map:nth-child(2) { --dl: .1s !important; }
}