/* ============================================================
   제일풍경채 계양 위너스카이 — 인천 계양 35층 올인원 복합 랜드마크 (주거+오피+상가)
   STUDIO VERTIKAL — 레이아웃: 브루탈리즘 스위스 그리드 + 수직 '어센트'.
   라이트 고대비 / 초압축 대문자(Anton) × 그로테스크(Archivo) / 두꺼운 룰 / 가로 마퀴 /
   스크롤=층수 카운터(00F→35F). 모션: Lenis 스무스스크롤 + anime.js(easeOutExpo 스태거).
   팔레트: 미드나잇 네이비 + 비비드 골드, 검은 hairline 그리드. (※ #01 BASALT와 정반대 — 밝고 시끄럽고 각짐)
   ============================================================ */

:root{
  --paper:#f4f3ee; --paper-2:#eceae2;
  --ink:#191f31; --ink-soft:#5a6075;
  --navy:#232a44; --navy-2:#1a2036;
  --gold:#c08a1e; --gold-hi:#d8a02a;
  --hair:#191f31; --line:#d6d3c7;
  --disp:"Anton","Black Han Sans","Noto Sans KR",sans-serif;
  --sans:"Archivo","Pretendard","Noto Sans KR",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#fff}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.005em;line-height:.92;text-transform:uppercase}
.wrap{width:min(1280px,94vw);margin:0 auto}
.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* 모션 초기상태(anime가 해제) */
[data-anim]{opacity:0;transform:translateY(30px)}
[data-anim=fade]{transform:none}
[data-anim=clip]{opacity:1;clip-path:inset(0 100% 0 0)}

/* ---- 톱바 + 층수 카운터 ---- */
.bar{position:fixed;top:0;left:0;width:100%;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,3vw,34px);height:62px;background:var(--paper);border-bottom:2px solid var(--hair);transition:background .3s,color .3s}
.bar__brand{font-family:var(--disp);font-size:1.32rem;letter-spacing:.02em;text-transform:uppercase}
.bar__brand b{color:var(--gold)}
.bar__nav{display:flex;gap:26px;justify-self:center}
.bar__nav a{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);transition:color .25s}
.bar__nav a:hover{color:var(--ink)}
.bar__floor{justify-self:end;display:flex;align-items:baseline;gap:6px;font-family:var(--disp);font-size:1.5rem;line-height:1}
.bar__floor .cur{color:var(--gold);min-width:2.4ch;text-align:right}
.bar__floor .tot{font-size:.9rem;color:var(--ink-soft)}
.burger{display:none;justify-self:end;width:30px;height:18px;position:relative;background:none;border:0;cursor:pointer}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--ink)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:8px}.burger span:nth-child(3){top:16px}
.drawer{position:fixed;inset:0;z-index:90;background:var(--navy);color:#fff;display:none;flex-direction:column;justify-content:center;padding:0 30px}
.drawer.open{display:flex}
.drawer a{font-family:var(--disp);font-size:2.4rem;text-transform:uppercase;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.drawer .x{position:absolute;top:18px;right:26px;font-size:2rem;background:none;border:0;color:#fff;cursor:pointer}

/* ---- HERO ---- */
.hero{position:relative;min-height:100vh;padding-top:62px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__img{position:absolute;inset:62px 0 0 0;background:linear-gradient(150deg,#232a44,#191f31);background-size:cover;background-position:center}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,40,.9),rgba(20,24,40,.25) 60%,rgba(20,24,40,.55))}
.hero__grid{position:absolute;inset:62px 0 0 0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:calc(100%/6) 100%}
.hero__inner{position:relative;z-index:2;color:#fff;padding:0 clamp(16px,3vw,34px) clamp(40px,5vw,70px)}
.hero__tag{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero__tag span{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(216,160,42,.5);padding:6px 12px}
.hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(3.4rem,12vw,11rem);line-height:.84;letter-spacing:.01em}
.hero h1 .gold{color:var(--gold-hi)}
.hero__sub{margin-top:24px;max-width:52ch;color:rgba(255,255,255,.82);font-size:1.04rem}
.hero__floornum{position:absolute;right:clamp(16px,3vw,34px);top:120px;z-index:2;font-family:var(--disp);font-size:clamp(4rem,11vw,9rem);color:rgba(255,255,255,.12);line-height:.8;text-align:right}

/* ---- MARQUEE ---- */
.marq{background:var(--navy);color:#fff;border-top:2px solid var(--hair);border-bottom:2px solid var(--hair);overflow:hidden;white-space:nowrap;padding:16px 0}
.marq__t{display:inline-block;font-family:var(--disp);font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em;animation:marq 26s linear infinite}
.marq__t span{color:var(--gold-hi);margin:0 8px}
.marq__t b{font-weight:400;margin:0 28px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- STACK / OVERVIEW (브루탈리즘 층 테이블) ---- */
.stack{padding:clamp(70px,9vw,128px) 0}
.stack__head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;padding-bottom:42px;border-bottom:3px solid var(--hair);margin-bottom:0}
.stack__head h2{font-family:var(--disp);font-size:clamp(2.4rem,6vw,5rem);text-transform:uppercase;line-height:.9}
.stack__head p{color:var(--ink-soft);max-width:38ch;justify-self:end}
.floor{display:grid;grid-template-columns:130px 1fr auto;gap:26px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.floor .fn{font-family:var(--disp);font-size:clamp(2.4rem,5vw,3.8rem);color:var(--ink);line-height:1}
.floor .fl{font-size:1.16rem;font-weight:700}
.floor .fl small{display:block;font-weight:400;color:var(--ink-soft);font-size:.92rem;margin-top:4px}
.floor .fv{font-family:var(--disp);font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--gold);text-transform:uppercase;text-align:right;white-space:nowrap}

/* ---- ABOUT (브루탈리즘 스플릿 + 박스 스펙) ---- */
.about{padding:clamp(60px,8vw,110px) 0;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px)}
.about__lead{font-family:var(--disp);font-size:clamp(1.9rem,4.2vw,3.4rem);text-transform:uppercase;line-height:.96}
.about__lead .gold{color:var(--gold)}
.about__body{margin-top:22px;color:var(--ink-soft);max-width:44ch}
.specgrid{border:2px solid var(--hair)}
.specgrid div{display:flex;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line)}
.specgrid div:last-child{border-bottom:0}
.specgrid .k{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.specgrid .v{font-weight:700;text-align:right}

/* ---- PANEL (다크 풀블리드) ---- */
.panel{background:var(--navy);color:#fff;padding:clamp(70px,9vw,130px) 0;border-top:2px solid var(--hair);border-bottom:2px solid var(--hair)}
.panel__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.panel h2{font-family:var(--disp);font-size:clamp(2.2rem,5vw,4.2rem);text-transform:uppercase;line-height:.92}
.panel h2 .gold{color:var(--gold-hi)}
.panel__list{list-style:none}
.panel__list li{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:1.02rem}
.panel__list li b{color:var(--gold-hi);font-family:var(--disp);font-size:1.3rem;min-width:2ch}

/* ---- GALLERY (프레임 그리드) ---- */
.gal{padding:clamp(70px,9vw,128px) 0}
.gal__head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--hair);padding-bottom:26px;margin-bottom:30px;flex-wrap:wrap;gap:12px}
.gal__head h2{font-family:var(--disp);font-size:clamp(2.2rem,5vw,4rem);text-transform:uppercase;line-height:.9}
.gal__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-rows:200px}
.gframe{position:relative;overflow:hidden;border:2px solid var(--hair)}
.gframe .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.gframe:hover .bg{transform:scale(1.06)}
.gframe figcaption{position:absolute;left:0;bottom:0;z-index:2;background:var(--gold);color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px}
.gframe::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,40,.4),transparent 50%)}
.g1{grid-column:span 8;grid-row:span 2}.g2{grid-column:span 4}.g3{grid-column:span 4}
.g4{grid-column:span 6}.g5{grid-column:span 6}

/* ---- PLANS (박스 카드) ---- */
.plans{padding:clamp(60px,8vw,110px) 0;background:var(--paper-2);border-top:2px solid var(--hair)}
.plans__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.plans__head h2{font-family:var(--disp);font-size:clamp(2.2rem,5vw,4rem);text-transform:uppercase}
.plans__head p{color:var(--ink-soft);max-width:36ch}
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{border:2px solid var(--hair);background:var(--paper);padding:26px 20px;transition:background .3s,color .3s}
.pcard:hover{background:var(--navy);color:#fff}
.pcard:hover .pc-d{color:rgba(255,255,255,.7)}
.pc-t{font-family:var(--disp);font-size:2.6rem;line-height:.9}
.pc-t b{color:var(--gold);font-size:.5em}
.pcard:hover .pc-t b{color:var(--gold-hi)}
.pc-d{margin-top:12px;color:var(--ink-soft);font-size:.9rem}

/* ---- REGISTER ---- */
.reg{padding:clamp(70px,9vw,128px) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.reg h2{font-family:var(--disp);font-size:clamp(2.6rem,6vw,5rem);text-transform:uppercase;line-height:.88}
.reg h2 .gold{color:var(--gold)}
.reg p{margin-top:18px;color:var(--ink-soft);max-width:40ch}
.rform{display:grid;gap:18px}
.rfield label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.rfield input,.rfield select{width:100%;border:2px solid var(--hair);background:var(--paper);padding:14px;font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none}
.rfield input:focus,.rfield select:focus{border-color:var(--gold)}
.ragree{display:flex;gap:10px;font-size:.84rem;color:var(--ink-soft);align-items:flex-start;cursor:pointer}
.rsubmit{background:var(--gold);color:#fff;border:0;padding:18px;font-family:var(--disp);font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:background .3s}
.rsubmit:hover{background:var(--navy)}

/* ---- FOOTER ---- */
.foot{background:var(--navy);color:#fff;padding:clamp(50px,6vw,80px) 0 40px;border-top:2px solid var(--hair)}
.foot__brand{font-family:var(--disp);font-size:2.4rem;text-transform:uppercase}
.foot__brand b{color:var(--gold-hi)}
.foot__legal{margin-top:18px;color:rgba(255,255,255,.62);font-size:.86rem;line-height:1.85;max-width:64ch}
.foot__disc{margin-top:16px;color:rgba(255,255,255,.34);font-size:.72rem;line-height:1.7}

/* ---- 퀵 + 팝업 ---- */
.quick{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.35s}
.quick.show{opacity:1;transform:none;pointer-events:auto}
.quick a{width:52px;height:52px;background:var(--navy);color:#fff;display:grid;place-items:center;border:2px solid var(--hair)}
.quick a.primary{background:var(--gold);border-color:var(--gold)}
.quick svg{width:20px;height:20px}
.popup-mask{position:fixed;inset:0;z-index:95;background:rgba(20,24,40,.62);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.35s;padding:20px}
.popup-mask.open{opacity:1;pointer-events:auto}
.popup{background:var(--paper);max-width:400px;width:100%;border:2px solid var(--hair)}
.popup__img{height:190px;background-size:cover;background-position:center;background:var(--navy)}
.popup__body{padding:24px}
.popup__body h3{font-family:var(--disp);font-size:1.7rem;text-transform:uppercase;margin:6px 0}
.popup__body p{color:var(--ink-soft);font-size:.92rem}
.popup__cta{display:block;text-align:center;margin-top:16px;background:var(--gold);color:#fff;padding:13px;font-family:var(--disp);text-transform:uppercase}
.popup__foot{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-soft)}
.popup__foot button{background:none;border:0;cursor:pointer;color:var(--ink-soft)}

/* ---- 반응형 ---- */
@media(max-width:900px){
  .bar__nav{display:none}.burger{display:block}
  .stack__head,.about,.panel__grid,.reg{grid-template-columns:1fr;gap:30px}
  .stack__head p{justify-self:start}
  .pcards{grid-template-columns:1fr 1fr}
  .g1,.g2,.g3,.g4,.g5{grid-column:1/-1;grid-row:auto}
}
@media(max-width:560px){
  .floor{grid-template-columns:72px 1fr;gap:14px}
  .floor .fv{grid-column:1/-1;text-align:left;margin-top:4px}
  .pcards{grid-template-columns:1fr}
  .bar__floor .tot{display:none}
}

/* PLOT-KO-WRAP: 한글 어절 단위 줄바꿈 + 오버플로 방지 (어떤 폭에서도 자연스럽게) */
:where(html){word-break:keep-all;overflow-wrap:break-word}