:root{--pad:clamp(18px,5.5vw,112px);--brand:#555eff;--border:rgba(0,0,0,.1)}
*{box-sizing:border-box}body{margin:0;font-family:'Pretendard Variable',Pretendard,system-ui}
.frame{padding-inline:var(--pad);max-width:1600px;margin-inline:auto}

.logo-font{font-family:'Vonique 92','Pretendard Variable',serif}
/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:80}
.nav{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.brand{width:92px;height:26px;background:#000;display:block;border-radius:6px}
/* hide brand when overlay open (logo goes behind) */
body.nav-open .brand{opacity:0;pointer-events:none;transition:opacity .35s ease}

/* burger (→ X) */
.burger{display:grid;gap:5px;background:transparent;border:0;cursor:pointer;padding:6px 4px}
.burger span{width:22px;height:2px;background:#111;display:block;transition:transform .35s ease,opacity .35s ease,background .6s ease}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* X turns to white slowly */
body.nav-open .burger span{background:#fff}

/* overlay */
.nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);color:#fff;z-index:120;
  display:grid;grid-template-rows:1fr auto;opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease}
.nav-overlay.is-open{opacity:1;visibility:visible}
.overlay-inner{display:contents}
.overlay-nav{display:flex;align-items:center;justify-content:center}
.mega-row{display:flex;gap:clamp(24px,5vw,64px);list-style:none;margin:0;padding:0}
.mega-item{text-align:center}
.mega-link{font-family:'Vonique 92','Pretendard Variable',sans-serif;font-size:clamp(34px,6.2vw,80px);
  color:#fff;text-decoration:none;transition:color .25s ease}
/* 5) Hover dim except target */
.overlay-nav .mega-row:hover .mega-link{color:#a5a5a5}
.overlay-nav .mega-item:hover > .mega-link{color:#fff}
/* 6) Submenus centered & always visible (spans, not links) */
.sub.show{list-style:none;margin:10px 0 0;padding:0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sub.show span{font-weight:700;color:#a5a5a5;transition:color .25s ease,opacity .25s ease;opacity:.9}
.mega-item:hover .sub.show span{color:#fff;opacity:1}

.overlay-meta{align-self:end;opacity:.7;padding:0 var(--pad) var(--pad) var(--pad)}

/* demo page makeup */
.hero{padding-top:120px;padding-bottom:40px;border-bottom:1px solid var(--border)}
section.frame{padding-block:60px;border-bottom:1px solid var(--border)}