/* ════════════════════════════════════════
   THE PARKSIDE SUITES — Unified Design System
   Black × Gold · Video + Image + Type
════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --k:  #080808; --k1: #111; --k2: #181818; --k3: #222; --k4: #2c2c2c;
  --g:  #c9a84c; --g1: #e0c870; --g2: #8b6318;
  --w:  #f0ebe0; --w2: #ccc5b5; --w3: rgba(240,235,224,.5);
  --ln: rgba(201,168,76,.18); --ln2: rgba(240,235,224,.07);

  /* 간격 시스템 */
  --sec: 88px; /* 섹션 상하 여백 */
  --gap: 3px;   /* 그리드/사진 간격 */
  --rad: 0px;

  --HH: 68px;
  --serif: 'Cormorant Garamond','Noto Serif KR',Georgia,serif;
  --sans:  'Noto Sans KR',-apple-system,sans-serif;
  --e:  cubic-bezier(.4,0,.2,1);
  --p:  cubic-bezier(.2,1,.3,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--k); color:var(--w); font-family:var(--sans); font-weight:300; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased }
img  { display:block; width:100%; height:100%; object-fit:cover }
a    { color:inherit; text-decoration:none }
button { background:none; border:none; font:inherit; cursor:pointer }
ul   { list-style:none }

/* ── LAYOUT ── */
.wrap { max-width:1080px; margin:0 auto; padding:0 52px }
.sec  { padding:var(--sec) 0 }
.dark { background:var(--k1) }
.rel  { position:relative }

/* ── TYPOGRAPHY SYSTEM ── */
.lbl {
  display:block; font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--g); margin-bottom:18px;
}
.lbl.light { color:var(--g1) }
h2 {
  font-family:var(--serif);
  font-size:clamp(2.6rem,5.5vw,4.4rem); /* 더 크게 */
  font-weight:200; line-height:1.08; letter-spacing:-.035em;
  color:var(--w); margin-bottom:28px;
}
h2.light { color:var(--w) }
h3 { font-family:var(--serif); font-size:1.15rem; font-weight:300; color:var(--w); margin-bottom:8px }
.bp { font-size:.92rem; color:var(--w2); line-height:1.95; max-width:540px; margin-bottom:40px }

/* ── REVEAL ── */
.r { opacity:0; transform:translateY(24px); transition:opacity .85s var(--p), transform .85s var(--p) }
.r.in { opacity:1; transform:none }
.d1 { transition-delay:.12s } .d2 { transition-delay:.22s }
.d3 { transition-delay:.32s } .d4 { transition-delay:.40s }

/* ── BUTTONS ── */
.bg {
  display:inline-block; padding:15px 48px; background:var(--g); color:var(--k);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  transition:background .25s,transform .2s;
}
.bg:hover { background:var(--g1); transform:translateY(-2px) }
.bo {
  display:inline-block; padding:15px 38px; border:1px solid rgba(240,235,224,.25);
  color:var(--w3); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .25s,color .25s;
}
.bo:hover { border-color:var(--g); color:var(--g) }

/* ══════════════════════
   VIDEO BACKGROUND BASE
══════════════════════ */
.vbg { position:absolute; inset:0; overflow:hidden }
.vbg-v { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vbg-img { position:absolute; inset:0; display:none }
@media(max-width:768px){ .vbg-v{display:none} .vbg-img{display:block} }
@media(prefers-reduced-motion:reduce){ .vbg-v{display:none} .vbg-img{display:block} }

.vbg-veil {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.3) 0%, rgba(8,8,8,.05) 30%, rgba(8,8,8,.55) 65%, rgba(8,8,8,.94) 100%),
    linear-gradient(to right, rgba(8,8,8,.65) 0%, transparent 55%);
}
.vbg-dark    { position:absolute; inset:0; background:rgba(8,8,8,.72) }
.vbg-bottom  { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,8,8,.08) 0%, rgba(8,8,8,.0) 15%, rgba(8,8,8,.5) 65%, rgba(8,8,8,.95) 100%) }
.vbg-veil-soft { position:absolute; inset:0; background:rgba(8,8,8,.35) }

/* ════ NAV ════ */
.nav { position:fixed; top:0; left:0; right:0; height:var(--HH); z-index:100; transition:background .5s,border-color .5s; border-bottom:1px solid transparent }
.nav.on { background:rgba(8,8,8,.93); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-color:var(--ln) }
.nav-in { max-width:1280px; margin:0 auto; padding:0 44px; height:100%; display:flex; align-items:center; justify-content:space-between }
.logo { display:flex; align-items:center; gap:11px; color:var(--w) }
.logo span { font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; font-weight:400 }
.logo em { display:block; color:var(--g); font-style:normal; letter-spacing:.26em }
.dnav { display:flex; align-items:center; gap:24px }
.dnav a { font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--w3); transition:color .2s }
.dnav a:hover { color:var(--g) }
.ncta { padding:8px 22px; border:1px solid var(--g); color:var(--g)!important; transition:background .2s,color .2s!important }
.ncta:hover { background:var(--g); color:var(--k)!important }
.burger { display:none; flex-direction:column; gap:5px }
.burger span { display:block; width:22px; height:1px; background:var(--w); transition:.3s }
.burger.x span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger.x span:nth-child(2){ opacity:0 }
.burger.x span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.drawer { position:fixed; top:0; right:-100%; width:260px; height:100vh; background:var(--k1); border-left:1px solid var(--ln); z-index:99; display:flex; flex-direction:column; padding:calc(var(--HH)+32px) 32px 40px; gap:2px; transition:right .4s var(--e) }
.drawer.open { right:0 }
.drawer a { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--w3); padding:13px 0; border-bottom:1px solid var(--ln2); transition:color .2s }
.drawer a:hover { color:var(--g) }
.dcta { margin-top:16px; padding:13px 20px!important; text-align:center; border:1px solid var(--g)!important; color:var(--g)!important }

/* ════ HERO ════ */
.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end }
.hero .vbg-v { object-position:center 40% }
.hero .vbg-img { object-position:center 40% }
.hero-body { position:relative; z-index:2; padding:0 52px 88px; max-width:820px }
.eyebrow { display:block; font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--g); margin-bottom:22px }
.hero-h1 { display:flex; flex-direction:column; gap:0; margin-bottom:32px }
.h1a { font-family:var(--serif); font-size:clamp(5rem,13vw,11rem); font-weight:200; line-height:.88; letter-spacing:-.04em; color:var(--w) }
.h1b { font-family:var(--serif); font-size:clamp(1.8rem,4.2vw,3.6rem); font-weight:200; line-height:1.05; letter-spacing:-.02em; color:var(--w2); padding-left:.06em }
.h1c { font-family:var(--serif); font-size:clamp(3.5rem,10vw,8.5rem); font-weight:200; line-height:.9; letter-spacing:-.04em; color:var(--g1); font-style:italic }
.hero-rule { width:48px; height:1px; background:var(--g); margin:0 0 22px }
.hero-addr { font-size:.7rem; letter-spacing:.1em; color:var(--w3); text-transform:uppercase; margin-bottom:14px; display:block }
.hero-meta { display:flex; align-items:center; gap:14px; margin-bottom:36px; flex-wrap:wrap }
.hero-meta span { font-size:.68rem; letter-spacing:.06em; color:var(--w3) }
.hero-meta i { display:block; width:3px; height:3px; border-radius:50%; background:var(--g) }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap }
.hero-scr { position:absolute; right:48px; bottom:0; z-index:2; width:1px; height:72px; background:linear-gradient(var(--g),transparent); animation:hs 2.2s ease-in-out infinite alternate }
.hero-scr span { position:absolute; bottom:-18px; right:-18px; font-size:.45rem; letter-spacing:.2em; color:var(--g); writing-mode:vertical-lr; transform:rotate(180deg) }
@keyframes hs { from{opacity:.35;height:48px} to{opacity:.75;height:76px} }

/* ════ STATS ════ */
.stats { background:var(--k2); border-top:1px solid var(--ln); border-bottom:1px solid var(--ln) }
.stats-in { max-width:1080px; margin:0 auto; padding:0 52px; display:flex; align-items:stretch }
.si { flex:1; text-align:center; padding:44px 12px }
.si b { display:block; font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:200; color:var(--g); line-height:1; margin-bottom:8px }
.si s { display:block; font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(240,235,224,.3); text-decoration:none }
.sdv { width:1px; background:var(--ln2); flex-shrink:0; margin:16px 0 }

/* ════ OVERVIEW ════ */
.ov { padding:0; overflow:hidden }
.ov-in { display:grid; grid-template-columns:46% 54%; min-height:680px }
.ov-text { padding:var(--sec) 52px; display:flex; flex-direction:column; justify-content:center; background:var(--k) }
.spdl { border-top:1px solid var(--ln); margin-top:24px }
.spdl>div { display:grid; grid-template-columns:44% 56%; padding:14px 0; border-bottom:1px solid var(--ln2) }
.spdl dt { font-size:.68rem; color:rgba(240,235,224,.4); letter-spacing:.04em }
.spdl dd { font-size:.82rem; color:var(--w2) }
.spdl .gold dt { color:var(--g) } .spdl .gold dd { color:var(--g1) }
.ov-photo { position:relative; overflow:hidden; margin-right:calc(-1 * (50vw - 540px)) }
.ov-photo img { width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform .8s var(--e) }
.ov-photo:hover img { transform:scale(1.04) }
.ov-cap { position:absolute; bottom:0; left:0; right:0; padding:24px 18px 12px; background:linear-gradient(transparent,rgba(8,8,8,.65)); font-size:.52rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(201,168,76,.6); text-align:center }

/* ════ YONGSAN VALUE ════ */
.vsec { position:relative; overflow:hidden; padding:var(--sec) 0 }
.vsec .vbg-v, .vsec .vbg-img { filter:grayscale(100%) brightness(.38) }
.val-g { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,168,76,.1); border:1px solid rgba(201,168,76,.1); margin-top:52px }
.vc { background:rgba(8,8,8,.75); backdrop-filter:blur(8px); padding:48px 36px; transition:background .25s }
.vc:hover { background:rgba(8,8,8,.88) }
.vcn { font-family:var(--serif); font-size:clamp(3.2rem,7vw,5.8rem); font-weight:200; color:var(--g); line-height:1; margin-bottom:20px }
.vcn sup { font-size:.4em; color:var(--g2); vertical-align:.3em }
.vc h3 { font-size:1.1rem; font-family:var(--serif); font-weight:300; color:var(--w); margin-bottom:12px }
.vc p { font-size:.82rem; color:var(--w2); line-height:1.85; margin-bottom:16px }
.vc ul { display:flex; flex-direction:column; gap:5px }
.vc li { font-size:.64rem; letter-spacing:.04em; color:rgba(201,168,76,.55); padding-left:12px; position:relative }
.vc li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:1px; background:var(--g2) }

/* ════ MXD — 이미지 블리드 + 카드 그리드 ════ */
.mxd-sec { display:grid; grid-template-columns:30% 70%; padding:0; overflow:hidden; background:var(--k2); min-height:760px }
.mxd-photo { position:relative; overflow:hidden; margin-top:-40px; margin-bottom:-40px }
.mxd-photo img { width:100%; height:calc(100% + 80px); object-fit:cover; object-position:center 30% }
.mxd-pcap { position:absolute; bottom:0; left:0; right:0; padding:24px 16px 14px; background:linear-gradient(transparent,rgba(8,8,8,.65)); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(201,168,76,.5); text-align:center }
.mxd-text { padding:var(--sec) 64px var(--sec) 56px; display:flex; flex-direction:column; justify-content:center }

/* MXD 카드 2×3 */
.mxd-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ln); border:1px solid var(--ln); margin-top:8px }
.mc { background:var(--k2); padding:24px 22px; display:flex; gap:16px; align-items:flex-start; transition:background .2s }
.mc:hover { background:rgba(201,168,76,.05) }
.mc.gold-card { background:rgba(201,168,76,.07); border-bottom:1px solid var(--ln) }
.mc span { font-family:var(--serif); font-size:1.5rem; font-weight:200; color:rgba(201,168,76,.3); flex-shrink:0; min-width:26px; line-height:1; padding-top:2px }
.mc b { display:block; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--w); margin-bottom:4px; font-weight:500 }
.mc p { font-size:.76rem; color:var(--w2); line-height:1.6 }

/* ════ VIDEO STRIP ════ */
.vid-strip { position:relative; overflow:hidden }
.way-strip { height:75vh; min-height:520px; display:flex; align-items:flex-end } /* 더 크게 */
.vs-body { position:relative; z-index:2; max-width:560px }
.vs-left { padding:0 52px 72px }
.vs-p { font-size:.9rem; color:rgba(240,235,224,.75); line-height:1.85; margin-top:12px }
.comm-strip { height:55vh; min-height:400px; position:relative } /* 더 크게 */
.cs-tag { position:absolute; bottom:24px; right:32px; z-index:2; font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(201,168,76,.5) }

/* ════ ROSEWOOD ════ */
.rw { display:grid; grid-template-columns:55% 45%; padding:0; overflow:hidden; min-height:680px; background:var(--k) }
.rw-vid { position:relative; overflow:hidden; margin-right:-2px }
.rw-vid .vbg-v, .rw-vid .vbg-img { width:100%; height:100%; object-fit:cover; object-position:center 30% }
.rw-vid-fade { position:absolute; inset:0; background:linear-gradient(to right,var(--k) 0%,rgba(8,8,8,.5) 35%,transparent 75%) }
.rw-text { padding:var(--sec) 52px; display:flex; flex-direction:column; justify-content:center }
.rw-nums { display:flex; gap:36px; flex-wrap:wrap; padding:24px 0; border-top:1px solid var(--ln); border-bottom:1px solid var(--ln); margin-bottom:24px }
.rw-nums b { display:block; font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:200; color:var(--g); line-height:1; margin-bottom:5px }
.rw-nums b i { font-style:normal; font-size:.6em; color:var(--g2) }
.rw-nums span { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(240,235,224,.35) }
.rw-li { display:flex; flex-direction:column; gap:8px }
.rw-li li { font-size:.8rem; color:var(--w2); padding-left:16px; position:relative }
.rw-li li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:6px; height:1px; background:var(--g) }

/* ════ FACILITY 3-GRID ════ */
.fac .wrap { margin-bottom:44px }
.fac-g { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
.fac-g .fg { position:relative; overflow:hidden; aspect-ratio:2/3 }
.fac-g .fg img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e) }
.fac-g .fg:hover img { transform:scale(1.06) }
.fg-v { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,8,8,.85) 0%,rgba(8,8,8,.3) 40%,transparent 70%) }
.fg-t { position:absolute; bottom:0; left:0; right:0; padding:32px 26px }
.fg-t h3 { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g); margin-bottom:8px; font-weight:400 }
.fg-t p { font-size:.78rem; color:rgba(240,235,224,.75); line-height:1.6 }

/* ════ SUITES ════ */
.sui { position:relative; overflow:hidden; background:var(--k) }
.sui-bg { position:absolute; inset:0 }
.sui-bg img { width:100%; height:100%; object-fit:cover; object-position:center 25% }
.sui-veil { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(8,8,8,.3) 0%,rgba(8,8,8,.6) 40%,rgba(8,8,8,.9) 70%,var(--k) 100%) }
.sui-body { position:relative; z-index:2; padding:var(--sec) 52px; max-width:1080px; margin:0 auto }
.sui-head { margin-bottom:52px }
.sui-head h2 { font-size:clamp(1.9rem,4vw,3.4rem) }
.sui-row { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start }
.sui-specs { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ln); border:1px solid var(--ln) }
.sp { background:rgba(8,8,8,.6); padding:32px 24px; backdrop-filter:blur(8px) }
.sp b { display:block; font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2rem); font-weight:200; color:var(--g); margin-bottom:6px }
.sp b i { font-size:.65em; font-style:normal; color:var(--g2) }
.sp s { font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(240,235,224,.32); text-decoration:none }
.price-block { border:1px solid var(--ln); background:rgba(8,8,8,.5); backdrop-filter:blur(6px) }
.pbn { font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(201,168,76,.45); padding:18px 20px 12px; border-bottom:1px solid var(--ln) }
.pbr { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--ln2) }
.pbr:last-child { border-bottom:none }
.pbr span { font-size:.68rem; letter-spacing:.06em; color:var(--w3) }
.pbr b { font-family:var(--serif); font-size:1.05rem; font-weight:200; color:var(--g1) }
.pbr.gold { background:rgba(201,168,76,.06) } .pbr.gold b { color:var(--g) }

/* ════ COMMUNITY ════ */
.comm-mosaic { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; grid-template-rows:300px 220px; gap:var(--gap); margin-bottom:52px }
.cm-a{grid-column:1;grid-row:1/3;position:relative;overflow:hidden}
.cm-b{grid-column:2;grid-row:1;position:relative;overflow:hidden}
.cm-txt{grid-column:3/5;grid-row:1;background:var(--k2);padding:36px 32px;display:flex;align-items:center}
.cm-txt p{font-size:.83rem;color:var(--w2);line-height:1.9}
.cm-c{grid-column:2;grid-row:2;position:relative;overflow:hidden}
.cm-d{grid-column:3;grid-row:2;position:relative;overflow:hidden}
.cm-e{grid-column:4;grid-row:2;position:relative;overflow:hidden}
.cm-f{grid-column:4;grid-row:1;position:relative;overflow:hidden}
.cm-a img,.cm-b img,.cm-c img,.cm-d img,.cm-e img,.cm-f img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.cm-a:hover img,.cm-b:hover img,.cm-c:hover img,.cm-d:hover img,.cm-e:hover img,.cm-f:hover img{transform:scale(1.07)}
.cm-a::after,.cm-b::after,.cm-c::after,.cm-d::after,.cm-e::after,.cm-f::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(8,8,8,.72))}
.cm-a span,.cm-b span,.cm-c span,.cm-d span,.cm-e span,.cm-f span{position:absolute;bottom:0;left:0;right:0;padding:20px 14px 10px;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);text-align:center;z-index:1}

/* 어메니티 3열 카드 */
.amen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ln2); border:1px solid var(--ln2) }
.ag-card { background:var(--k); padding:36px 32px }
.ag-card h4 { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--g); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--ln) }
.ag-card ul { display:flex; flex-direction:column; gap:8px }
.ag-card li { font-size:.8rem; color:var(--w2); padding-left:13px; position:relative }
.ag-card li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:1px; background:var(--g2) }

/* ════ LOCATION ════ */
.loc-g { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ln2); border:1px solid var(--ln2); margin-bottom:40px }
.lc { background:var(--k1); padding:32px 26px; transition:background .2s }
.lc:hover { background:rgba(201,168,76,.04) }
.li { display:block; font-size:1.3rem; margin-bottom:10px }
.lc h4 { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--g); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--ln) }
.lc ul { display:flex; flex-direction:column; gap:6px }
.lc li { font-size:.76rem; color:var(--w2); padding-left:11px; position:relative }
.lc li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:1px; background:var(--g2) }
.pcmp { border:1px solid var(--ln); padding:32px 40px; display:flex; flex-direction:column; gap:22px }
.pcr { display:grid; grid-template-columns:220px 1fr 130px; align-items:center; gap:18px }
.pl { font-family:var(--serif); font-size:.92rem; font-weight:200; color:var(--w2) }
.pl em { font-style:normal; font-size:.7em; color:var(--g); margin-left:6px }
.pcr.gold .pl { color:var(--g1) }
.pb2 { height:2px; background:var(--ln2); border-radius:1px; overflow:hidden }
.pf { height:100%; background:linear-gradient(to right,var(--g2),var(--g)); border-radius:1px; width:0; transition:width 1.4s cubic-bezier(0,0,.2,1) }
.pr2 { font-size:.7rem; text-align:right; color:var(--w3) }
.pcr.gold .pr2 { color:var(--g1) }

/* ════ SCHEDULE ════ */
.sched { background:var(--k2) }
.sg-g { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ln2); border:1px solid var(--ln2); margin-top:52px }
.sg { background:var(--k2); padding:44px 36px }
.sg.on { background:rgba(201,168,76,.05) }
.sd { display:block; font-size:.68rem; letter-spacing:.1em; color:var(--g); margin-bottom:14px }
.sdot { width:7px; height:7px; border-radius:50%; background:var(--k2); border:1px solid var(--g); margin-bottom:18px }
.sg.on .sdot { background:var(--g); box-shadow:0 0 0 4px rgba(201,168,76,.2) }
.sg b { display:block; font-size:.95rem; font-weight:400; color:var(--w); margin-bottom:9px }
.sg p { font-size:.78rem; color:var(--w2); line-height:1.8 }

/* ════ FAQ ════ */
.fql { border-top:1px solid var(--ln); margin-top:52px }
.fq { border-bottom:1px solid var(--ln2) }
.fq summary { list-style:none; padding:20px 0; cursor:pointer; font-size:.92rem; color:var(--w2); display:flex; justify-content:space-between; align-items:center; transition:color .2s; user-select:none }
.fq summary::-webkit-details-marker { display:none }
.fq summary::after { content:'+'; font-size:1.3rem; font-weight:200; color:var(--g); margin-left:14px; flex-shrink:0; transition:transform .25s }
details[open] .fq summary { color:var(--g1) }
details[open] .fq summary::after { transform:rotate(45deg) }
.fa { padding:0 0 18px; font-size:.84rem; color:rgba(240,235,224,.5); line-height:1.9 }

/* ════════════════════════
   CONTACT — 풍성한 레이아웃
════════════════════════ */
.ct { background:var(--k) }
.ct-g { display:grid; grid-template-columns:1fr 380px; gap:52px; align-items:start; margin-top:48px }

/* 폼 */
.ct-form-col form { display:flex; flex-direction:column; gap:12px }
.fg { display:flex; flex-direction:column; gap:7px; aspect-ratio:auto; position:static; overflow:visible }
.fg label { font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(240,235,224,.4) }
.fg label em { color:var(--g); font-style:normal }
.fg input, .fg textarea {
  background:var(--k2); border:1px solid var(--ln); color:var(--w);
  padding:14px 18px; font-family:var(--sans); font-size:.88rem;
  outline:none; border-radius:0; -webkit-appearance:none; transition:border-color .2s;
}
.fg input:focus, .fg textarea:focus { border-color:var(--g) }
.fg textarea { resize:vertical; min-height:100px }

/* 개인정보 동의 */
.privacy-box { background:var(--k2); border:1px solid var(--ln2); padding:20px }
.chk { display:flex; align-items:flex-start; gap:10px; font-size:.78rem; color:var(--w2); cursor:pointer; margin-bottom:8px }
.chk input { width:14px; height:14px; accent-color:var(--g); flex-shrink:0; margin-top:2px }
.privacy-txt { font-size:.7rem; color:rgba(240,235,224,.35); line-height:1.7; padding-left:24px }

.csub {
  padding:16px; background:var(--g); color:var(--k);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:background .2s,transform .2s; width:100%;
}
.csub:hover { background:var(--g1); transform:translateY(-2px) }
.csub:disabled { opacity:.6; cursor:not-allowed; transform:none }
.fn { font-size:.72rem; color:rgba(240,235,224,.4); line-height:1.7; min-height:20px }
.fn.ok { color:var(--g) }
.fn.err { color:#e05555 }

/* 우측 정보 컬럼 */
.ct-info-col { display:flex; flex-direction:column; gap:16px }

/* 플래너 카드 */
.planner-card {
  background:var(--k2); border:1px solid var(--ln);
  padding:32px 28px;
}
.pc-badge {
  font-size:.54rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g); margin-bottom:10px; display:block;
}
.pc-name {
  font-family:var(--serif); font-size:2rem; font-weight:200;
  color:var(--w); line-height:1; margin-bottom:4px;
}
.pc-role { font-size:.72rem; color:var(--w3); margin-bottom:24px }
.pc-btns { display:flex; flex-direction:column; gap:10px }
.pc-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; transition:opacity .2s;
}
.pc-btn:hover { opacity:.85 }
.pc-tel { background:var(--g); color:var(--k) }
.pc-kako {
  background:var(--k3); color:var(--g1);
  border:1px solid var(--ln);
}

/* 상담 안내 카드들 */
.ct-info-cards { display:flex; flex-direction:column; gap:1px; background:var(--ln2); border:1px solid var(--ln2) }
.ci-card {
  background:var(--k2); padding:20px 22px;
  display:flex; gap:14px; align-items:flex-start;
  transition:background .2s;
}
.ci-card:hover { background:rgba(201,168,76,.04) }
.ci-icon { font-size:1.2rem; flex-shrink:0; margin-top:1px }
.ci-card b { display:block; font-size:.72rem; color:var(--w); font-weight:500; margin-bottom:4px; letter-spacing:.02em }
.ci-card p { font-size:.76rem; color:var(--w2); line-height:1.6 }

/* ════ FOOTER ════ */
.ft { background:var(--k); border-top:1px solid var(--ln); padding:44px 0 88px }
.ftin { max-width:1080px; margin:0 auto; padding:0 52px }
.ftop { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--ln2) }
.ftop span { font-family:var(--serif); font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(240,235,224,.35) }
.ftop a { font-family:var(--serif); font-size:.95rem; font-weight:200; color:var(--g); transition:color .2s }
.ftop a:hover { color:var(--g1) }
.ft p { font-size:.7rem; color:rgba(240,235,224,.28); line-height:1.8 }
.fdsc { margin-top:16px; padding-top:14px; border-top:1px solid var(--ln2); font-size:.63rem; color:rgba(240,235,224,.2); line-height:1.8 }
.legal { margin-top:14px; display:flex; flex-direction:column; gap:5px; list-style:none }
.legal li { font-size:.62rem; color:rgba(240,235,224,.18); line-height:1.7 }

/* ════════════════════════
   FIXED CTA — 4버튼
════════════════════════ */
.fcta {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  display:grid; grid-template-columns:repeat(4,1fr);
  height:52px;
  transform:translateY(100%); transition:transform .4s var(--e);
}
.fcta.show { transform:translateY(0) }
.fc {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  transition:opacity .2s;
}
.fc:hover { opacity:.82 }
.fc-a { background:var(--g); color:var(--k) }
.fc-b { background:var(--k2); color:var(--w); border-top:1px solid var(--ln) }
.fc-c { background:var(--k3); color:var(--g1); border-top:1px solid var(--ln) }
.fc-d { background:var(--k4); color:var(--w2); border-top:1px solid var(--ln) }

/* ════════════════════════
   RESPONSIVE — TABLET ≤1024
════════════════════════ */
@media(max-width:1024px){
  .wrap { padding:0 32px }
  .stats-in { padding:0 32px }
  .ov-in { grid-template-columns:1fr; min-height:auto }
  .ov-photo { height:440px; margin-right:0 }
  .ov-text { padding:80px 32px }
  .mxd-sec { grid-template-columns:1fr; min-height:auto }
  .mxd-photo { height:360px; margin:0 }
  .mxd-photo img { height:100% }
  .mxd-text { padding:72px 32px }
  .rw { grid-template-columns:1fr; min-height:auto }
  .rw-vid { height:400px }
  .rw-vid-fade { background:linear-gradient(to bottom,var(--k) 0%,rgba(8,8,8,.3) 40%,transparent 70%) }
  .rw-text { padding:72px 32px }
  .fac-g { grid-template-columns:1fr 1fr }
  .fac-g .fg { aspect-ratio:3/4 }
  .loc-g { grid-template-columns:repeat(2,1fr) }
  .sg-g { grid-template-columns:1fr }
  .ct-g { grid-template-columns:1fr }
  .sui-row { grid-template-columns:1fr }
  .pcr { grid-template-columns:160px 1fr 100px }
  .comm-mosaic { grid-template-columns:1fr 1fr 1fr; grid-template-rows:240px 200px 200px }
  .cm-a{grid-column:1;grid-row:1/3}.cm-b{grid-column:2;grid-row:1}.cm-f{grid-column:3;grid-row:1}
  .cm-txt{grid-column:2/4;grid-row:2}
  .cm-c{grid-column:1;grid-row:3}.cm-d{grid-column:2;grid-row:3}.cm-e{grid-column:3;grid-row:3}
  .val-g { grid-template-columns:1fr }
  .mxd-cards { grid-template-columns:1fr }
  .amen-grid { grid-template-columns:1fr }
}

/* ════════════════════════
   RESPONSIVE — MOBILE ≤768
════════════════════════ */
@media(max-width:768px){
  :root { --HH:58px; --sec:64px }
  .wrap { padding:0 20px }
  .dnav { display:none } .burger { display:flex } .nav-in { padding:0 20px }

  .stats-in { padding:0; flex-wrap:wrap }
  .si { min-width:50%; padding:28px 8px; border-right:1px solid var(--ln2) }
  .si:nth-child(3){ border-right:none } .sdv { display:none }

  .hero-body { padding:0 24px 72px }
  .h1a { font-size:clamp(3.5rem,17vw,7rem) }
  .h1b { font-size:clamp(1.3rem,5.5vw,2.5rem) }
  .h1c { font-size:clamp(2.8rem,13vw,5.5rem) }
  .hero-scr { right:20px }
  .hero-btns { flex-direction:column }
  .bg,.bo { width:100%; max-width:280px; text-align:center }

  .ov-text { padding:60px 20px }
  .mxd-text { padding:52px 20px }
  .rw-text { padding:56px 20px }
  .sui-body { padding:60px 20px 80px }
  .sui-specs { grid-template-columns:1fr 1fr }
  .way-strip { height:60vh }
  .vs-left { padding:0 24px 48px }
  .comm-strip { height:45vh }
  .fac-g { grid-template-columns:1fr } .fac-g .fg { aspect-ratio:16/9 }
  .loc-g { grid-template-columns:1fr }
  .pcmp { padding:24px 20px } .pcr { grid-template-columns:1fr; gap:8px } .pr2 { text-align:left }

  /* 모자이크 단순화 */
  .comm-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:240px 200px }
  .cm-a{grid-column:1/3;grid-row:1}
  .cm-txt{grid-column:1/3;grid-row:2}
  .cm-b,.cm-c,.cm-d,.cm-e,.cm-f{display:none}

  /* Contact */
  .ct-g { grid-template-columns:1fr }
  .ftin { padding:0 20px }
  .ft { padding-bottom:80px }

  /* Fixed CTA — 모바일 2열 */
  .fcta { grid-template-columns:1fr 1fr; height:auto }
  .fc { padding:14px 8px; font-size:.58rem }
  .fc-a { grid-column:1; border-bottom:1px solid rgba(201,168,76,.2) }
  .fc-b { grid-column:2; border-bottom:1px solid var(--ln2) }
  .fc-c { grid-column:1 }
  .fc-d { grid-column:2 }
}

@media(max-width:480px){
  .val-g { grid-template-columns:1fr }
  .mxd-cards { grid-template-columns:1fr }
  .amen-grid { grid-template-columns:1fr }
}