/* ============================================================
   STUDIO TERRA STRATA — 해링턴 플레이스 진사 상업시설
   레인: parallax.js 레이어드 깊이 · 자연/진사 어스톤
   ============================================================ */

:root{
  --clay:        #b4623a;   /* 테라코타 어닝 */
  --clay-deep:   #8c4326;
  --sand:        #e7dac4;   /* 크림빛 스톤 */
  --sand-soft:   #f3ecdf;
  --bark:        #2b2419;   /* 어두운 흙갈 */
  --bark-2:      #3a3122;
  --moss:        #5c6b48;   /* 진사 세이지/녹 */
  --moss-deep:   #3f4a31;
  --dusk:        #c9a06a;   /* 황혼 골드 */
  --ink:         #211b12;
  --paper:       #faf6ee;
  --line:        rgba(43,36,25,.14);
  --line-light:  rgba(247,246,238,.22);

  --serif: "Fraunces", "Gowun Batang", serif;
  --batang: "Gowun Batang", serif;
  --sans: "Pretendard", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --r: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }
:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; border-radius:3px; }

.wrap{ width:min(var(--wrap), 92vw); margin-inline:auto; }

/* scroll progress */
.prog{ position:fixed; inset:0 0 auto 0; height:3px; z-index:120; background:transparent; }
.prog__bar{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--clay),var(--dusk)); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.95em 1.7em; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
}
.btn--solid{ background:var(--clay); color:#fff; box-shadow:0 10px 30px -12px rgba(140,67,38,.7); }
.btn--solid:hover{ background:var(--clay-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line-light); color:#fff; backdrop-filter:blur(4px); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }
.btn--full{ width:100%; padding:1.1em; font-size:1.05rem; }

/* ============ TOPBAR ============ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.6rem);
  transition:background .4s, box-shadow .4s, padding .4s;
}
.topbar.is-stuck{
  background:rgba(250,246,238,.92); backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line); padding-block:.8rem;
}
.topbar__brand{ display:flex; flex-direction:column; line-height:1.05; color:#fff; transition:color .4s; }
.topbar.is-stuck .topbar__brand{ color:var(--ink); }
.topbar__mark{ font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:.06em; }
.topbar__sub{ font-size:.62rem; letter-spacing:.32em; opacity:.8; }
.topbar__nav{ display:flex; gap:2rem; }
.topbar__nav a{ font-size:.92rem; font-weight:500; color:#fff; opacity:.92; transition:color .4s,opacity .25s; }
.topbar.is-stuck .topbar__nav a{ color:var(--bark); }
.topbar__nav a:hover{ opacity:1; color:var(--dusk); }
.topbar.is-stuck .topbar__nav a:hover{ color:var(--clay); }
.topbar__cta{
  font-size:.88rem; font-weight:600; padding:.6em 1.3em; border-radius:999px;
  background:var(--clay); color:#fff; transition:transform .3s var(--ease),background .3s;
}
.topbar__cta:hover{ background:var(--clay-deep); transform:translateY(-2px); }
.topbar__burger{ display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:6px; }
.topbar__burger span{ width:26px; height:2px; background:#fff; transition:.3s; }
.topbar.is-stuck .topbar__burger span{ background:var(--ink); }

.drawer{
  position:fixed; inset:0; z-index:99; background:var(--bark);
  display:grid; place-items:center;
}
.drawer[hidden]{ display:none; }
.drawer nav{ display:flex; flex-direction:column; gap:1.6rem; text-align:center; }
.drawer a{ font-family:var(--serif); font-size:1.8rem; color:var(--sand); }
.drawer a:hover{ color:var(--clay); }

/* ============ HERO ============ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--bark); }
.hero__stage{ position:absolute; inset:-8%; z-index:0; }
.hero__layer{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__layer--sky{
  inset:-10%;
  background:radial-gradient(120% 90% at 70% 18%, #f3d9ad 0%, #d9a86a 30%, #8c5e3b 65%, #2b2419 100%);
}
.hero__layer--far{ inset:-12%; opacity:0; filter:saturate(.85) brightness(.7); transition:opacity 1s; mix-blend-mode:overlay; }
.hero__layer--far.has-img{ opacity:.55; }
.hero__layer--photo{ inset:-6%; opacity:0; transition:opacity 1.1s var(--ease); transform:scale(1.04); }
.hero__layer--photo.has-img{ opacity:1; }
.hero__layer--grain{
  inset:-15%; opacity:.12; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(33,27,18,.42) 0%, rgba(33,27,18,.05) 38%, rgba(33,27,18,.55) 78%, rgba(33,27,18,.9) 100%);
}
.hero__copy{ position:relative; z-index:2; padding:0 clamp(1rem,5vw,3rem) clamp(4rem,9vh,7rem); max-width:840px; color:#fff; }
.hero__eyebrow{ font-size:.82rem; letter-spacing:.34em; text-transform:uppercase; color:var(--dusk); margin:0 0 1rem; font-weight:600; }
.hero__title{
  font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(2.7rem, 7.5vw, 5.4rem); margin:0 0 1.4rem; letter-spacing:-.01em;
}
.hero__title em{ color:var(--dusk); font-style:italic; }
.hero__lead{ font-size:clamp(1rem,1.9vw,1.22rem); max-width:46ch; color:rgba(255,255,255,.92); margin:0 0 2rem; }
.hero__lead strong{ color:#fff; font-weight:600; border-bottom:2px solid var(--clay); }
.hero__facts{ display:flex; flex-wrap:wrap; gap:1.6rem; margin:0 0 2.2rem; }
.hero__facts span{ font-size:.92rem; color:rgba(255,255,255,.82); }
.hero__facts b{ display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; font-weight:600; }
.hero__act{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; bottom:1.6rem; right:clamp(1rem,5vw,3rem); z-index:2;
  display:flex; align-items:center; gap:.7rem; font-size:.66rem; letter-spacing:.3em; color:rgba(255,255,255,.7);
}
.hero__scroll span{ width:1px; height:34px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.hero__scroll span::after{ content:""; position:absolute; inset:0; background:var(--dusk); animation:scrolldn 1.8s var(--ease) infinite; }
@keyframes scrolldn{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(100%);} }

/* ============ SECTION SHELL ============ */
.sect{ padding:clamp(4.5rem,11vh,8rem) 0; }
.sect__head{ max-width:760px; margin:0 0 3rem; }
.sect__no{ font-size:.76rem; letter-spacing:.28em; color:var(--clay); font-weight:600; text-transform:uppercase; }
.sect__title{
  font-family:var(--serif); font-weight:500; line-height:1.12;
  font-size:clamp(1.8rem,4.2vw,3rem); margin:.7rem 0 1.1rem; letter-spacing:-.01em;
}
.sect__title em{ color:var(--clay); font-style:italic; }
.sect__desc{ font-size:clamp(1rem,1.6vw,1.1rem); color:#4a4232; }
.sect__desc strong{ color:var(--clay-deep); }
.sect__head--light .sect__title,
.sect__head--light .sect__desc{ color:#fff; }
.sect__head--light .sect__desc{ color:rgba(255,255,255,.9); }
.sect__head--light .sect__no{ color:var(--dusk); }

/* ============ OVERVIEW ============ */
.overview{ background:var(--paper); }
.overview__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:0; }
.ov-card{ background:var(--sand-soft); padding:1.8rem 1.5rem; }
.ov-card dt{ font-size:.74rem; letter-spacing:.18em; color:var(--moss); text-transform:uppercase; font-weight:600; }
.ov-card dd{ margin:.6rem 0 0; font-family:var(--batang); font-size:1.12rem; line-height:1.5; color:var(--ink); }
.overview__note{
  margin:2.4rem 0 0; padding:1.6rem 1.8rem; border-left:3px solid var(--clay);
  background:var(--sand-soft); border-radius:0 var(--r) var(--r) 0;
  font-size:.98rem; color:#4a4232; max-width:760px;
}

/* ============ STRATA (location interlude) ============ */
.strata{ position:relative; padding:clamp(5rem,13vh,9rem) 0; overflow:hidden; background:var(--moss-deep); color:#fff; }
.strata__stage{ position:absolute; inset:-8%; z-index:0; }
.strata__layer{ position:absolute; inset:0; background-size:cover; background-position:center; }
.strata__layer--back{ inset:-10%; opacity:0; filter:brightness(.5) saturate(.9); transition:opacity 1s; }
.strata__layer--back.has-img{ opacity:1; }
.strata__layer--mid{ inset:-8%; opacity:0; mix-blend-mode:soft-light; transition:opacity 1.1s; }
.strata__layer--mid.has-img{ opacity:.5; }
.strata__layer--tint{ inset:0; background:linear-gradient(115deg, rgba(43,36,25,.86) 0%, rgba(63,74,49,.7) 55%, rgba(43,36,25,.5) 100%); }
.strata__inner{ position:relative; z-index:1; }
.loc-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.loc-item{ background:rgba(250,246,238,.06); border:1px solid var(--line-light); border-radius:var(--r); padding:1.8rem; backdrop-filter:blur(6px); transition:transform .4s var(--ease), background .3s; }
.loc-item:hover{ transform:translateY(-5px); background:rgba(250,246,238,.1); }
.loc-item__tag{ font-size:.7rem; letter-spacing:.2em; font-weight:700; color:var(--dusk); }
.loc-item h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:.7rem 0 .5rem; }
.loc-item p{ font-size:.94rem; color:rgba(255,255,255,.82); margin:0; }
.strata__caveat{ margin:2rem 0 0; font-size:.84rem; color:rgba(255,255,255,.7); }

/* ============ COMPOSE ============ */
.compose{ background:var(--sand-soft); }
.prem{ list-style:none; padding:0; margin:0 0 3.5rem; display:flex; flex-wrap:wrap; gap:.7rem; }
.prem__chip{
  display:flex; align-items:baseline; gap:.6rem; padding:.85rem 1.3rem; border-radius:999px;
  background:#fff; border:1px solid var(--line); transition:transform .3s var(--ease),box-shadow .3s;
}
.prem__chip:hover{ transform:translateY(-3px); box-shadow:0 10px 24px -14px rgba(43,36,25,.4); }
.prem__chip b{ font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--bark); }
.prem__chip span{ font-size:.84rem; color:#6a6150; }
.prem__chip--key{ background:var(--bark); border-color:var(--bark); }
.prem__chip--key b{ color:var(--dusk); }
.prem__chip--key span{ color:rgba(255,255,255,.78); }

.floor{ display:grid; grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:center; }
.floor__visual{ margin:0; }
.floor__img{
  aspect-ratio:4/3; border-radius:var(--r); background:var(--sand) center/cover no-repeat;
  background-image:linear-gradient(135deg,var(--sand),var(--dusk)); position:relative; transition:opacity .8s;
}
.floor__img.has-img{ background-image:none; }
.floor__visual figcaption{ font-size:.8rem; color:#6a6150; margin-top:.8rem; }
.floor__list{ list-style:none; counter-reset:f; padding:0; margin:0; }
.floor__list li{ display:flex; gap:1.3rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.floor__list li:last-child{ border-bottom:0; }
.floor__lv{ flex:0 0 3.2rem; font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--clay); }
.floor__list h3{ margin:0 0 .35rem; font-size:1.12rem; font-weight:600; color:var(--ink); }
.floor__list p{ margin:0; font-size:.94rem; color:#5a5140; }

/* ============ INVEST ============ */
.invest{ background:var(--paper); }
.invest__rows{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.ivt{ background:var(--sand-soft); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.9rem; position:relative; transition:transform .4s var(--ease); }
.ivt:hover{ transform:translateY(-4px); }
.ivt__no{ font-family:var(--serif); font-size:2.2rem; font-weight:600; color:var(--dusk); line-height:1; }
.ivt h3{ font-family:var(--serif); font-weight:500; font-size:1.32rem; margin:.6rem 0 .6rem; }
.ivt p{ margin:0; font-size:.96rem; color:#4a4232; }
.ivt--watch{ background:var(--bark); border-color:var(--bark); }
.ivt--watch .ivt__no{ color:var(--clay); }
.ivt--watch h3{ color:#fff; }
.ivt--watch p{ color:rgba(255,255,255,.85); }
.invest__cap{ margin:2.4rem 0 0; font-size:.95rem; color:var(--clay-deep); font-weight:500; }

/* ============ REGISTER ============ */
.register{ position:relative; overflow:hidden; color:#fff; background:var(--bark); }
.register__bg{ position:absolute; inset:-8%; z-index:0; }
.register__layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s; }
.register__layer.has-img{ opacity:.55; }
.register__layer--dim{ inset:0; opacity:1; background:linear-gradient(180deg, rgba(33,27,18,.78), rgba(33,27,18,.92)); }
.register__inner{ position:relative; z-index:1; }
.rform{
  max-width:640px; margin:0 auto; background:rgba(250,246,238,.06);
  border:1px solid var(--line-light); border-radius:calc(var(--r) + 4px); padding:clamp(1.6rem,4vw,2.6rem);
  backdrop-filter:blur(10px);
}
.rform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.rform__field{ display:block; margin-bottom:1.1rem; }
.rform__field > span{ display:block; font-size:.84rem; margin-bottom:.45rem; color:rgba(255,255,255,.86); letter-spacing:.02em; }
.rform__field i{ color:var(--clay); }
.rform__field input{
  width:100%; padding:.95em 1.1em; font-size:1rem; font-family:var(--sans);
  background:rgba(255,255,255,.95); border:1.5px solid transparent; border-radius:10px; color:var(--ink);
  transition:border-color .25s;
}
.rform__field input:focus{ border-color:var(--clay); outline:none; }
.rform__agree{ display:flex; align-items:flex-start; gap:.6rem; font-size:.86rem; color:rgba(255,255,255,.84); margin-bottom:1.4rem; cursor:pointer; }
.rform__agree input{ margin-top:.3rem; accent-color:var(--clay); width:18px; height:18px; flex:0 0 auto; }
.rform__agree i{ color:var(--clay); }
.rform__msg{ margin:1rem 0 0; min-height:1.4em; font-size:.92rem; text-align:center; }
.rform__msg.is-ok{ color:var(--dusk); font-weight:600; }
.rform__msg.is-err{ color:#ffb4a0; }

/* ============ FOOTER ============ */
.foot{ background:var(--ink); color:rgba(247,246,238,.78); padding:clamp(3rem,7vh,4.5rem) 0 2rem; }
.foot__inner{ display:grid; gap:1.4rem; }
.foot__mark{ font-family:var(--serif); font-size:1.25rem; color:var(--sand); letter-spacing:.04em; }
.foot__brand p{ margin:.4rem 0 0; font-size:.92rem; }
.foot__meta{ display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-size:.9rem; }
.foot__meta p{ margin:0; }
.foot__disc{ font-size:.8rem; line-height:1.75; color:rgba(247,246,238,.55); border-top:1px solid rgba(247,246,238,.14); padding-top:1.4rem; max-width:900px; }
.foot__copy{ font-size:.78rem; color:rgba(247,246,238,.45); margin:0; }

/* ============ STICKY DOCK ============ */
.dock{
  position:fixed; left:50%; bottom:1rem; transform:translate(-50%, 140%); z-index:90;
  display:none; flex-direction:column; align-items:center; gap:.1rem;
  width:min(92vw,420px); padding:.85rem 1.4rem; border-radius:999px;
  background:var(--clay); color:#fff; text-align:center; box-shadow:0 14px 36px -12px rgba(140,67,38,.8);
  transition:transform .5s var(--ease);
}
.dock.is-on{ transform:translate(-50%,0); }
.dock span{ font-weight:600; font-size:1rem; }
.dock b{ font-weight:400; font-size:.74rem; opacity:.9; }

/* ============ REVEAL ============ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .overview__grid{ grid-template-columns:repeat(2,1fr); }
  .loc-list{ grid-template-columns:1fr; }
  .floor{ grid-template-columns:1fr; gap:1.8rem; }
  .invest__rows{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .topbar__nav,.topbar__cta{ display:none; }
  .topbar__burger{ display:flex; }
  .dock{ display:flex; }
  .hero{ align-items:flex-end; }
  .hero__facts{ gap:1.2rem; }
  .rform__row{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
}
@media (max-width:480px){
  .overview__grid{ grid-template-columns:1fr; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__layer,.strata__layer,.register__layer{ transform:none !important; }
}

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

/* 예시 평면/배치도(원본 도면 부재 시 대체) · 테마무관 */
.ex-plan{--plan-accent:currentColor;margin:30px auto 4px}
.ex-plan>svg{display:block;width:100%;max-width:720px;margin:0 auto;background:color-mix(in srgb,currentColor 5%,transparent);border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:16px;padding:14px}
.ex-plan--wide>svg{max-width:880px}
.ex-plan--sec{padding:clamp(48px,8vw,90px) clamp(18px,5vw,40px)}
.ex-plan__h{max-width:880px;margin:0 auto 20px;text-align:center;font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;letter-spacing:-.01em}
.ex-plan__why{max-width:760px;margin:16px auto 0;text-align:center;font-size:.94rem;opacity:.85;line-height:1.65}
.ex-plan__cap{max-width:880px;margin:8px auto 0;text-align:center;font-size:.8rem;opacity:.6}
.ex-plan__cap b,.ex-plan__why b{font-weight:700}