/* 한강 푸르지오 리버프론트 — 원본 사이트의 「느낌」을 얹는 층
   site.css 다음에 읽힙니다. 여기 있는 것만 지우면 담백한 원래 모습으로 돌아갑니다.

   1) 글자 등장 — 화면에 들어오면 한 자씩 / 한 줄씩
   2) 제목 명조 — 원본이 쓰는 명조 결
   3) 섹션 한 화면 — 한 섹션이 한 화면을 채운다
*/

/* ── 1) 글자 등장 ──────────────────────────── */
[data-ani]{--ani-stagger:34ms}
[data-ani] .ani-u{display:inline-block;opacity:0;transform:translateY(.5em);
  filter:blur(5px);transition:opacity .7s cubic-bezier(.16,1,.3,1),
  transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}
[data-ani] .ani-u.is-sp{width:.28em}
[data-ani="line"] .ani-u{display:block;transform:translateY(.6em)}
[data-ani].on .ani-u{opacity:1;transform:none;filter:blur(0)}

@media (prefers-reduced-motion:reduce){
  [data-ani] .ani-u{opacity:1!important;transform:none!important;filter:none!important;
    transition:none!important}
}

/* ── 2) 제목 명조 ──────────────────────────── */
.hero__title,.sec__title,.split__txt h3,.prem h3,.phead__in h1{
  font-family:var(--font-serif);font-weight:700;letter-spacing:-.01em}
.sec__eyebrow,.phead__eng{letter-spacing:.34em;text-indent:.34em}

/* ── 3) 섹션 한 화면 ───────────────────────── */
@media (min-width:1081px){
  .sec{min-height:100vh;display:flex;align-items:center}
  .sec>.wrap{width:100%}
}

/* ── 배경음악 켜기·끄기 ────────────────────── */
.bgm{position:fixed;right:18px;bottom:104px;z-index:55;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(22,52,79,.12)}
.bgm i{display:block;width:2px;height:3px;border-radius:1px;background:var(--navy);
  transition:height .3s ease}
.bgm.is-on i:nth-child(1){height:9px}.bgm.is-on i:nth-child(2){height:15px}
.bgm.is-on i:nth-child(3){height:6px}.bgm.is-on i:nth-child(4){height:12px}
.bgm.is-on i:nth-child(5){height:8px}
.bgm.is-on i{animation:bgm 1.1s ease-in-out infinite alternate}
.bgm.is-on i:nth-child(2){animation-delay:.15s}
.bgm.is-on i:nth-child(3){animation-delay:.3s}
.bgm.is-on i:nth-child(4){animation-delay:.45s}
.bgm.is-on i:nth-child(5){animation-delay:.6s}
@keyframes bgm{from{height:3px}to{height:16px}}
@media (max-width:1080px){ .bgm{right:14px;bottom:88px;width:40px;height:40px} }

/* 로고 SVG 는 fill="currentColor" 라 글자색만 정해 주면 따라온다.
   휴대폰은 상단바가 항상 흰색이라 브랜드색을 쓰고,
   데스크톱에서 바가 투명해 사진 위에 얹혔을 때만 흰색을 쓴다. */
.nav__logo{color:var(--wine)}
/* 예전 글자 로고 시절의 규칙(.nav__brand span)이 새 로고 SVG 까지 회색으로
   만들고 있었다. 로고 칸은 위에서 정한 색을 그대로 받게 된다. */
.nav__brand .nav__roll,
.nav__brand .nav__roll > span{color:inherit}
.foot__logo{color:var(--wine);opacity:1}

@media (min-width:1081px){
  .nav:not(.is-solid):not(:hover) .nav__logo{color:#fff}
}

/* ── 맨 아래 광고대행 칸 ───────────────────── */
.foot2{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.75;color:var(--muted)}
.foot2 p{margin:0}
.foot2 a{color:inherit;border-bottom:1px solid transparent}
.foot2 a:hover{color:var(--wine);border-bottom-color:currentColor}
.foot2 span{padding:0 6px;opacity:.5}
.foot2__note{margin-top:8px!important;opacity:.85}

/* ── 타일이 걷히며 영상이 드러난다 ─────────── */
.vstage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep)}
.vstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vstage__grid{position:absolute;inset:0;display:grid}
.vstage__grid i{display:block;background-repeat:no-repeat;
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.vstage.is-open .vstage__grid i{opacity:0;transform:scale(.82)}
.vstage__cap{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;
  color:rgba(255,255,255,.7);font-size:12px;letter-spacing:-.01em;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (max-width:1080px){ .vstage__cap{font-size:11px} }

/* ── 흐르는 글자 띠 ────────────────────────── */
.rail{overflow:hidden;margin:0 0 26px;white-space:nowrap;
  font-family:var(--font-serif);font-size:clamp(38px,7vw,96px);line-height:1;
  color:var(--wine);opacity:.12;user-select:none}
.rail span{display:inline-block;padding-right:.5em}
.rail__in{display:inline-block;animation:rail 26s linear infinite}
@media (prefers-reduced-motion:reduce){ .rail__in{animation:none} }
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 히어로 글씨 가독성 ────────────────────── */
/* 원본 영상에 하늘·물빛이 밝게 나오는 장면이 섞여 있어,
   흰 글씨가 묻히는 구간이 생긴다. 글씨가 놓이는 아래쪽을 더 눌러 준다. */
.hero::after{background:linear-gradient(180deg,
  rgba(16,42,66,.30) 0%, rgba(16,42,66,.12) 32%,
  rgba(16,42,66,.44) 64%, rgba(16,42,66,.74) 100%)}
.hero__in{text-shadow:0 2px 24px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.45)}

/* ── hidden 이 먹히게 ──────────────────────── */
/* site.css 의 img{display:block} 이 브라우저 기본 [hidden]{display:none} 을
   눌러버려서, 숨긴 그림이 빈 자리로 남았다. */
[hidden]{display:none!important}

/* 키맵이 없는 타입에서는 KEY MAP 칸을 통째로 접는다.
   이 현장은 평면도 그림 안에 이미 키맵이 들어 있다. */
.uinfo__body.no-key{grid-template-columns:1fr}

/* 블록이 하나뿐이고 KEY MAP 도 없는 이 현장에서는,
   면적 항목을 세로로 늘어놓지 않고 가로로 편다. */
@media (min-width:781px){
  /* 블록이 하나라 2단 격자를 한 단으로 펴다 */
  .uinfo__body.no-key .ublocks{grid-template-columns:1fr}
  .uinfo__body.no-key .ublock{border-right:0;padding:30px 34px}
  .uinfo__body.no-key .ublock dl{
    display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;
    width:calc(20% - 14px);padding:0;border-bottom:0;vertical-align:top}
  .uinfo__body.no-key .ublock dl + dl{margin-left:16px;padding-left:16px;
    border-left:1px solid var(--line)}
  .uinfo__body.no-key .ublock dt{font-size:12.5px}
  .uinfo__body.no-key .ublock dd{font-size:19px}
}

/* 타입 이름이 얹히는 머리 사진이 너무 어두워 빈 칸처럼 보였다.
   글씨는 그림자로 지키고 사진을 살린다. */
.uinfo__head::after{background:linear-gradient(180deg,
  rgba(16,42,66,.30) 0%, rgba(16,42,66,.52) 100%)}
.uinfo__name,.uinfo__count{text-shadow:0 2px 14px rgba(0,0,0,.55)}