/* 우주선 공용 뼈대 — halmi.mandeun.com 의 구조(메가메뉴 · 번호 붙은 섹션 · 테두리 카드)를
   우주선 색(_shared.css 의 남색·금색)으로 옮겼다. 메뉴 내용은 site.js 한 곳에만 있다. */
:root{--gnb:72px;--line:rgba(126,155,217,.22);--ink-line:rgba(245,242,234,.85);--mono:"IBM Plex Mono",ui-monospace,monospace}
[hidden]{display:none!important}
body{overflow-x:hidden}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orbit)}

/* ── 머리글 · 메가메뉴 ── */
.gnb{position:sticky;top:0;z-index:50;background:rgba(8,15,38,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.gnb .row{display:flex;align-items:center;height:var(--gnb);gap:8px;max-width:1240px;margin:0 auto;padding:0 20px}
.gnb .logo{display:flex;align-items:center;gap:10px;margin-right:26px;flex-shrink:0}
.gnb .logo img{width:38px;height:38px;border-radius:50%}
.gnb .logo b{font-size:17px;letter-spacing:.2em}
.top{display:flex;list-style:none;height:100%}
.top>li{height:100%}
.top>li>a{display:flex;align-items:center;height:100%;padding:0 22px;font-weight:700;font-size:16px;position:relative;color:rgba(245,242,234,.86)}
.top>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .2s}
.top>li:hover>a,.top>li:focus-within>a,.top>li>a[aria-current]{color:var(--gold)}
.top>li:hover>a::after,.top>li:focus-within>a::after,.top>li>a[aria-current]::after{transform:scaleX(1)}
.mega{position:absolute;left:0;right:0;top:var(--gnb);background:var(--deep);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.7);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.top>li:hover .mega,.top>li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega .in{display:grid;grid-template-columns:1fr 320px;gap:40px;padding:32px 20px 38px;max-width:1240px;margin:0 auto}
.mega .cols{display:flex;gap:60px;padding-left:74px}
.mega h4{font-size:15px;margin-bottom:12px}
.mega ul{list-style:none}
.mega li a{display:block;padding:5px 0;color:var(--ash);font-size:14.5px}
.mega li a:hover{color:var(--gold)}
.promo{border-left:1px solid var(--line);padding-left:34px;display:block}
.promo .pic{height:140px;border-radius:12px;background:var(--hull) center/cover no-repeat}
.promo .mono{margin:14px 0 4px}
.promo b{display:block;font-size:18px;line-height:1.45}
.util{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13.5px}
.util a.soft{color:var(--ash)}
.util a.soft:hover{color:var(--gold)}
.util .sep{width:1px;height:13px;background:var(--line)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--paper);margin:6px 0}
.drawer{position:fixed;inset:var(--gnb) 0 0 0;background:var(--deep);overflow:auto;padding:10px 20px 40px;z-index:49}
.drawer details{border-bottom:1px solid var(--line)}
.drawer summary{list-style:none;padding:18px 0;font-weight:800;font-size:19px;cursor:pointer;display:flex;justify-content:space-between}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{content:"+";color:var(--gold)}
.drawer details[open] summary::after{content:"–"}
.drawer ul{list-style:none;margin:0 0 14px}
.drawer li a{display:block;padding:9px 0;color:var(--ash)}
.drawer .btn{margin-top:24px;width:100%;text-align:center}
@media (max-width:1040px){.top,.util{display:none}.burger{display:block}:root{--gnb:62px}}
@media (min-width:1041px){.drawer{display:none!important}}

/* ── 페이지 머리 ── */
.phead{position:relative;z-index:10;padding:clamp(56px,8vw,110px) 0 clamp(30px,4vw,50px);border-bottom:1px solid var(--line)}
.phead .mono,.phead p.mono{margin:0 0 18px;font-family:var(--mono);font-size:12px;color:var(--orbit);line-height:1.5}
.phead h1{font-size:clamp(40px,7vw,92px);font-weight:900;letter-spacing:-.045em;line-height:1.04}
.phead h1 em{font-style:normal;color:var(--gold)}
.phead p{max-width:680px;margin-top:20px;font-family:var(--log);font-size:clamp(17px,1.8vw,21px);color:rgba(245,242,234,.8);line-height:1.8}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.subnav a{padding:7px 14px;border:1px solid var(--line);border-radius:99px;font-size:13.5px}
.subnav a:hover{border-color:var(--gold);color:var(--gold)}

/* ── 섹션 ── */
.sec{position:relative;z-index:10;scroll-margin-top:calc(var(--gnb) + 8px);padding:clamp(64px,9vw,118px) 0;border-bottom:1px solid var(--line)}
.sec.deep{background:rgba(11,21,51,.72)}
.sec-head{display:grid;grid-template-columns:240px 1fr;gap:30px;margin-bottom:clamp(30px,5vw,54px)}
.sec-head h2{font-size:clamp(30px,4.6vw,54px);line-height:1.16;letter-spacing:-.035em}
.sec-head h2 em{font-style:normal;color:var(--gold)}
.sec-head p{margin-top:14px;color:rgba(245,242,234,.72);max-width:640px;line-height:1.85}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:10px}}
.lcard{border:1.5px solid var(--ink-line);border-radius:22px;padding:26px;background:rgba(8,15,38,.55);display:block}
.lcard h3{margin:6px 0 10px;font-size:22px;letter-spacing:-.02em}
.lcard p{color:rgba(245,242,234,.74);line-height:1.8;font-size:15.5px}
a.lcard{transition:border-color .2s,transform .2s}
a.lcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}
.flow .ar{color:var(--gold);font-size:22px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.flow .ar{transform:rotate(90deg);justify-self:center}}
.more{display:inline-flex;gap:6px;margin-top:16px;font-weight:700;color:var(--gold)}
.more:hover{text-decoration:underline}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--gold);color:var(--void)}
.tag.done{background:transparent;border:1px solid rgba(127,192,164,.55);color:var(--sage)}

/* ── 흐르는 띠 ── */
.marq{position:relative;z-index:10;overflow:hidden;border-block:1px solid var(--line);background:var(--gold);color:var(--void)}
.marq .t{display:flex;gap:34px;white-space:nowrap;padding:14px 0;width:max-content;animation:marq 38s linear infinite;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;font-weight:600}
@keyframes marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq .t{animation:none}}

/* ── 숫자 칸 ── */
.numgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.num{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.num .v{font-size:clamp(46px,6vw,78px);font-weight:900;letter-spacing:-.045em;line-height:1;color:var(--gold)}
.num .v small{font-size:.4em;margin-left:3px}
.num .l{margin:12px 0 4px;font-weight:700}
.num .src{font-family:var(--mono);font-size:11px;color:var(--ash);line-height:1.5}
@media (max-width:900px){.numgrid{grid-template-columns:1fr}}

/* ── 바닥글 ── */
.foot{position:relative;z-index:10;background:var(--deep);border-top:1px solid var(--line);padding:44px 0 90px}
.foot .row{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start}
.foot .logo{display:flex;align-items:center;gap:10px}
.foot .logo img{width:40px;height:40px;border-radius:50%}
.foot .logo b{letter-spacing:.2em}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:12px;font-size:14px}
.foot nav a:hover{color:var(--gold)}
.foot p{font-size:12.5px;color:var(--ash);line-height:1.9}
.foot .top-btn{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:99px;padding:8px 14px}
@media (max-width:760px){.foot .row{grid-template-columns:1fr;gap:20px}}