:root{
  --bg:#fbfaf6;
  --paper:#fffefa;
  --panel:#f6f3eb;
  --navy:#1f2d42;
  --ink:#273140;
  --muted:#6d7480;
  --gold:#b79055;
  --gold2:#d7bd8b;
  --blue:#dbe9f8;
  --blue2:#edf5fd;
  --line:rgba(183,144,85,.30);
  --shadow:0 24px 70px rgba(62,75,94,.12);
  --nav:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Noto Sans KR",sans-serif;overflow-x:hidden}
button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}
label{color:var(--gold);font-size:11px;letter-spacing:.30em;font-weight:700}

.topnav{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--nav);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(255,254,250,.88);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.brand{font:12px Georgia,"Noto Serif KR",serif;letter-spacing:.18em;white-space:nowrap;color:var(--navy)}
.brand span{display:inline-grid;place-items:center;width:29px;height:29px;margin-right:10px;border:1px solid var(--gold2);border-radius:50%;color:var(--gold);font-size:14px;background:#fff}
.navlinks{display:flex;height:100%;align-items:center;gap:clamp(14px,2.5vw,38px)}
.navlinks a{height:100%;display:flex;align-items:center;position:relative;color:#767a82;font-size:12px;white-space:nowrap}
.navlinks a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:.3s}
.navlinks a:hover,.navlinks a.active{color:var(--navy)}
.navlinks a:hover:after,.navlinks a.active:after{transform:scaleX(1)}

.hero{min-height:100svh;padding-top:var(--nav);position:relative;display:grid;place-items:center;overflow:hidden;text-align:center;background:radial-gradient(circle at 50% 30%,#fff 0 18%,rgba(255,255,255,.78) 36%,transparent 64%),linear-gradient(180deg,#eaf5ff 0,#fbfaf6 74%)}
.hero:before{content:"";position:absolute;inset:26px;border:1px solid var(--line);border-radius:2px;pointer-events:none}
.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 18% 24%,rgba(183,144,85,.32) 0 1px,transparent 1.5px),radial-gradient(circle at 78% 34%,rgba(91,134,185,.26) 0 1px,transparent 1.5px),radial-gradient(circle at 56% 76%,rgba(183,144,85,.22) 0 1px,transparent 1.5px);background-size:150px 150px,210px 210px,176px 176px;opacity:.55;pointer-events:none}
.halo{position:absolute;border:1px solid rgba(183,144,85,.15);border-radius:50%;box-shadow:0 0 90px rgba(174,204,235,.26),inset 0 0 80px rgba(255,255,255,.8)}
.halo-a{width:min(720px,74vw);aspect-ratio:1}.halo-b{width:min(520px,58vw);aspect-ratio:1;border-color:rgba(183,144,85,.11)}
.heroMark{position:absolute;color:rgba(183,144,85,.10);font:300 min(38vw,470px)/1 Georgia,serif;transform:rotate(18deg)}
.heroText{position:relative;z-index:2;padding:58px 20px;max-width:920px}
.hero h1{font:400 clamp(58px,9vw,120px)/.95 Georgia,"Noto Serif KR",serif;margin:18px 0 30px;letter-spacing:-.06em;color:var(--navy);text-shadow:0 10px 30px rgba(93,118,145,.10)}
.heroLead{font:clamp(24px,3.7vw,47px)/1.38 Georgia,"Noto Serif KR",serif;margin:0;color:#354155}
.hero em{color:var(--gold);font-style:normal}
.heroCopy{color:#707a87;font:14px/2 Georgia,"Noto Serif KR",serif;margin:28px 0}
.heroActions{display:flex;justify-content:center;gap:12px}
.heroActions a{border:1px solid var(--line);padding:14px 24px;background:rgba(255,255,255,.76);letter-spacing:.12em;font-size:11px;color:var(--navy);box-shadow:0 8px 30px rgba(87,111,139,.08);transition:.25s}
.heroActions a:hover{transform:translateY(-2px);border-color:rgba(183,144,85,.65);box-shadow:0 12px 34px rgba(87,111,139,.13)}
.scrollmark{position:absolute;z-index:2;bottom:36px;color:#9ba2aa;font-size:9px;letter-spacing:.3em}

.section{padding:120px 5vw;position:relative}
.sectionHead{text-align:center;max-width:850px;margin:0 auto 65px}
.sectionHead.compact{margin-bottom:40px}
.sectionHead h2{font:400 clamp(38px,6vw,68px)/1.2 Georgia,"Noto Serif KR",serif;margin:15px 0 20px;color:var(--navy)}
.sectionHead p{color:var(--muted);font:15px/1.9 Georgia,"Noto Serif KR",serif}

.world{background:radial-gradient(circle at 50% 0,#e5f2ff 0,transparent 34%),#fbfaf6}
.realmGrid{max-width:1450px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);box-shadow:var(--shadow);background:rgba(255,255,255,.52)}
.realm{padding:42px 32px;min-height:440px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,244,236,.78));border-right:1px solid var(--line)}
.realm:last-child{border-right:0}
.realm>span,.anomaly>span{font-size:9px;letter-spacing:.25em;color:var(--gold)}
.realm h3{font:35px Georgia,"Noto Serif KR",serif;margin:34px 0;color:var(--navy)}
.realm h3 small{display:block;font-size:10px;letter-spacing:.28em;color:#8b94a0;margin-top:8px}
.realm p{color:#6e7580;font:14px/1.92 Georgia,"Noto Serif KR",serif}
.realm b{color:#9d7640;font-weight:600}
.sealedGrid{max-width:1450px;margin:25px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sealedGrid div{border:1px solid var(--line);padding:24px;background:rgba(255,255,255,.72);position:relative;overflow:hidden}
.sealedGrid div:after{content:"ARCHIVE";position:absolute;right:-10px;bottom:-7px;font:27px Georgia,serif;color:rgba(183,144,85,.07);transform:rotate(-7deg)}
.sealedGrid b,.sealedGrid span{display:block}
.sealedGrid b{font:18px Georgia,"Noto Serif KR",serif;color:var(--navy)}
.sealedGrid span{margin-top:12px;color:#87909a;font-size:11px;letter-spacing:.08em;line-height:1.5}

.residents{background:linear-gradient(180deg,#f7f3ea 0,#fffefa 100%)}
.grid{max-width:1450px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;aspect-ratio:3/4;border:1px solid rgba(183,144,85,.30);background:#eef3f7;overflow:hidden;padding:0;text-align:left;color:white;cursor:pointer;box-shadow:0 16px 45px rgba(59,71,86,.10);transition:.3s}
.card>img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,26%) center;transition:.65s}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 34%,rgba(24,35,50,.92))}
.card:before{content:"";position:absolute;z-index:1;inset:10px;border:1px solid rgba(255,255,255,.36);pointer-events:none}
.card:hover img{transform:scale(1.045)}
.card:hover{border-color:rgba(183,144,85,.78);transform:translateY(-3px)}
.card>div{position:absolute;z-index:2;left:22px;right:20px;bottom:22px}
.card small{color:#ead3a7;letter-spacing:.22em;font-size:9px}
.card h3{font:400 29px Georgia,"Noto Serif KR",serif;margin:8px 0}
.card p{color:#d8dde4;font-size:11px;margin:0 0 9px}
.card div>b{font-size:9px;letter-spacing:.22em;color:#f1dfbb}
.num{position:absolute;z-index:2;top:18px;right:18px;font:12px Georgia,serif;color:#fff}

.villa{background:radial-gradient(circle at 80% 10%,#e6f2fd 0,transparent 28%),#fbfaf6}
.villaVisual{max-width:1200px;margin:0 auto 55px;border:1px solid var(--line);padding:8px;background:white;box-shadow:var(--shadow)}
.villaVisual img{display:block;width:100%;height:auto}
.buildingFacts{max-width:1200px;margin:0 auto 70px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:rgba(255,255,255,.72)}
.buildingFacts div{padding:25px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.buildingFacts div:nth-child(3n){border-right:0}.buildingFacts div:nth-last-child(-n+3){border-bottom:0}
.buildingFacts small,.job small{display:block;color:#9aa0a8;font-size:9px;letter-spacing:.20em;margin-bottom:10px}
.buildingFacts b{font:15px Georgia,"Noto Serif KR",serif;color:var(--navy)}
.floors{max-width:1200px;margin:auto;border-top:1px solid var(--line)}
.floor{display:grid;grid-template-columns:100px 1fr auto;gap:30px;align-items:center;padding:30px 24px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.68);transition:.25s}
.floor:hover{background:white;transform:translateX(5px);box-shadow:0 10px 35px rgba(70,84,100,.06)}
.floorNo{font:38px Georgia,serif;color:var(--gold)}
.floor h3{font:25px Georgia,"Noto Serif KR",serif;margin:0 0 8px;color:var(--navy)}
.floor b{color:#a98049;font-size:12px}
.floor p{color:var(--muted);font:13px/1.7 Georgia,"Noto Serif KR",serif;margin:9px 0 0}
.floor>span{color:#a3a7ad;font-size:8px;letter-spacing:.2em}
.floor.tenant{border-left:3px solid var(--gold);background:#fffaf1}
.anomaly{max-width:1200px;margin:35px auto 0;padding:35px;border:1px solid rgba(183,144,85,.43);background:linear-gradient(120deg,#fffdf8,#edf6fd);box-shadow:0 15px 45px rgba(70,84,100,.07)}
.anomaly h3{font:26px Georgia,"Noto Serif KR",serif;margin:16px 0;color:var(--navy)}
.anomaly p{color:#66717e;font:14px/1.85 Georgia,"Noto Serif KR",serif}

.crosslink{background:#f4f0e8;border-top:1px solid var(--line)}
.linkPoster{display:block;max-width:1200px;margin:auto;border:1px solid rgba(183,144,85,.45);background:#05060a;padding:6px;box-shadow:0 25px 70px rgba(36,39,47,.18);overflow:hidden;transition:.3s}
.linkPoster img{display:block;width:100%;height:auto;transition:.55s}
.linkPoster:hover{transform:translateY(-4px);box-shadow:0 30px 80px rgba(36,39,47,.25)}
.linkPoster:hover img{transform:scale(1.012)}

.backdrop{position:fixed;z-index:100;inset:0;background:rgba(232,239,246,.88);backdrop-filter:blur(13px);padding:30px}
.backdrop[hidden]{display:none}
.modal{position:relative;width:min(1080px,100%);height:min(90svh,760px);margin:auto;top:50%;transform:translateY(-50%);overflow:auto;display:grid;grid-template-columns:43% 57%;background:var(--paper);border:1px solid rgba(183,144,85,.55);box-shadow:0 32px 100px rgba(54,67,83,.22)}
.modal figure{margin:0;overflow:hidden;background:#edf3f7;position:relative}
.modal figure:after{content:"";position:absolute;inset:0;border:14px solid rgba(255,255,255,.26);pointer-events:none}
.modal figure img{width:100%;height:100%;object-fit:cover;object-position:var(--modal-pos,28%) center}
.close{position:absolute;z-index:3;right:15px;top:10px;background:rgba(255,255,255,.90);border:1px solid var(--line);border-radius:50%;width:42px;height:42px;color:var(--navy);font-size:27px;line-height:1;cursor:pointer;box-shadow:0 7px 20px rgba(65,78,93,.10)}
.profile{padding:55px 48px}
.profile h2{font:400 42px Georgia,"Noto Serif KR",serif;margin:10px 0 25px;color:var(--navy)}
.profile h2 span{font-size:16px;color:var(--gold)}
.facts{display:flex;gap:40px;border-block:1px solid var(--line)}
.facts p{font-size:9px;letter-spacing:.18em;color:#90969e}
.facts b{display:block;color:#435064;font-size:12px;letter-spacing:0;margin-top:7px}
.job{border-bottom:1px solid var(--line);padding:15px 0;margin:0}
.job b{font:16px Georgia,"Noto Serif KR",serif;color:#9b7440}
.profile dl div{display:grid;grid-template-columns:95px 1fr;padding:8px 0}
.profile dt{color:var(--gold);font-size:12px}.profile dd{margin:0;color:#68727f;font-size:13px;line-height:1.55}
.profile blockquote{border-left:2px solid var(--gold);margin:20px 0 0;padding:10px 18px;font:16px/1.55 Georgia,"Noto Serif KR",serif;color:#39485c;background:#fbf8f0}

footer{text-align:center;padding:75px;border-top:1px solid var(--line);background:#fffefa}
.footerStar{color:var(--gold);font-size:22px}
footer b,footer small{display:block;margin:13px;color:#8b8f96}
footer b{font-family:Georgia,serif;color:var(--navy);letter-spacing:.25em}

@media(max-width:1100px){.realmGrid{grid-template-columns:repeat(2,1fr)}.realm:nth-child(2){border-right:0}.realm:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:980px){
  :root{--nav:112px}
  .topnav{height:auto;min-height:var(--nav);padding:14px 20px;display:block}
  .brand{display:block;margin-bottom:12px}.navlinks{height:43px;overflow-x:auto;gap:25px;padding-right:20px}.navlinks::-webkit-scrollbar{display:none}
  .sealedGrid{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(2,1fr)}
  .buildingFacts{grid-template-columns:repeat(2,1fr)}.buildingFacts div,.buildingFacts div:nth-child(3n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.buildingFacts div:nth-child(2n){border-right:0}.buildingFacts div:nth-last-child(-n+2){border-bottom:0}
  .modal{grid-template-columns:42% 58%}.profile{padding:45px 28px}
}
@media(max-width:600px){
  :root{--nav:106px}.topnav{padding:11px 14px}.brand span{width:24px;height:24px}.navlinks{gap:20px}
  .hero:before{inset:10px}.section{padding:88px 14px}.heroText{padding-inline:16px}.sectionHead{margin-bottom:42px}.sectionHead p br{display:none}
  .realmGrid{grid-template-columns:1fr}.realm{min-height:0;border-right:0!important;border-bottom:1px solid var(--line)!important;padding:32px 24px}.realm:last-child{border-bottom:0!important}
  .sealedGrid{grid-template-columns:1fr}.grid{gap:9px}.card>div{left:14px;bottom:15px}.card h3{font-size:21px}.card div>b{display:none}.card p{font-size:10px}
  .villaVisual{padding:4px;margin-bottom:35px}.buildingFacts{grid-template-columns:1fr}.buildingFacts div,.buildingFacts div:nth-child(n){border-right:0;border-bottom:1px solid var(--line)}.buildingFacts div:last-child{border-bottom:0}
  .floor{grid-template-columns:58px 1fr;padding:23px 12px;gap:14px}.floorNo{font-size:28px}.floor h3{font-size:20px}.floor>span{display:none}
  .backdrop{padding:10px}.modal{display:block;height:calc(100svh - 20px)}.modal figure{height:48svh;min-height:340px}.profile{padding:28px 22px}.profile h2{font-size:30px}.profile dl div{grid-template-columns:76px 1fr}.profile dd{font-size:12px}
  .crosslink{padding-top:75px;padding-bottom:75px}.linkPoster{padding:3px}
}