/* GNB 단독본 — AI 페이지(별도 스타일)가 서브 페이지와 같은 GNB 를 쓰도록 site.css 의 GNB 부분만 떼어 냈다(10/16)
   site.css 의 GNB 를 고치면 여기도 같이 고친다 */
:root{--on-g:#0A0A0A;--gpad:clamp(20px,3.6vw,56px)}
.nav{position:fixed;inset:0 0 auto;z-index:40;mix-blend-mode:difference;color:#fff}
.nav .bar{display:flex;align-items:center;justify-content:space-between;height:72px;padding-inline:var(--gpad)}
.logo{display:flex;align-items:center;gap:9px;font:800 19px/1 var(--disp);letter-spacing:-.02em}
.logo i{width:11px;height:11px;background:#fff}
.logo .lg{display:block;height:21px;width:auto}
.menu{display:flex;gap:36px;font:500 15px var(--disp);letter-spacing:.01em}
.menu a{opacity:.72;position:relative}.menu a:hover,.menu a[aria-current=page]{opacity:1}
.menu a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:#fff}
.navcta{font:600 15px var(--sans);display:flex;align-items:center;gap:10px}
.navcta i{width:9px;height:9px;background:#fff;transition:transform .3s var(--ease)}
.navcta:hover i{transform:scale(1.8)}
.nav .logo span,.nav .logo i,.menu,.navcta{transition:opacity .4s var(--ease),transform .6s var(--ease)}
.nav.min{pointer-events:none}
.nav.min .logo span,.nav.min .logo i,.nav.min .menu,.nav.min .navcta{opacity:0;transform:translateY(-16px)}
.nav.min .menu{transition-delay:.05s}.nav.min .navcta{transition-delay:.1s}
.dot{position:fixed;top:14px;right:var(--gpad);z-index:60;width:44px;height:44px;border:0;background:var(--g);cursor:pointer;display:grid;place-content:center;gap:5px;transform:scale(.2);transform-origin:100% 50%;opacity:0;pointer-events:none;transition:transform .6s var(--ease),opacity .3s,background .3s}
.dot i{display:block;width:16px;height:2px;background:var(--on-g);transition:transform .45s var(--ease),background .3s}
.min~.dot,.dot[aria-expanded=true]{transform:none;opacity:1;pointer-events:auto}
.min~.dot:hover{transform:scale(1.12)}
.dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dot[aria-expanded=true],body.ongreen .dot{background:var(--on-g)}
.dot[aria-expanded=true] i,body.ongreen .dot i{background:var(--g)}
.dot[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.dot[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.ov{position:fixed;inset:0;z-index:55;background:var(--g);color:var(--on-g);display:grid;grid-template-rows:1fr auto;gap:40px;padding:112px var(--gpad) 40px;clip-path:inset(14px var(--gpad) calc(100% - 58px) calc(100% - var(--gpad) - 44px));visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.ov.open{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease)}
/* 사파리 26 은 화면 위·아래 가장자리에 붙은 fixed 요소의 배경색으로 주소창·툴바를 칠한다 — 닫힌 메뉴의 초록 면이 잡히지 않게 */
.ov:not(.open){background:transparent;transition:clip-path .8s var(--ease),visibility 0s .8s,background 0s .8s}
.ov nav{display:flex;flex-direction:column;justify-content:center}
.ov nav a{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,28px);width:max-content;font:850 clamp(48px,8.2vw,150px)/1 var(--disp);font-stretch:112%;letter-spacing:-.055em;opacity:0;transform:translateY(36%);transition:opacity .5s var(--ease),transform .7s var(--ease),padding .4s var(--ease)}
.ov.open nav a{opacity:1;transform:none;transition-delay:calc(.18s + var(--i)*.05s),calc(.18s + var(--i)*.05s),0s}
.ov nav a small{font:500 13px var(--mono);letter-spacing:0;min-width:2.4em}
.ov nav a::after{content:"";width:.16em;height:.16em;background:var(--on-g);transform:scale(0);transition:transform .35s var(--ease)}
.ov nav a:hover,.ov nav a:focus-visible,.ov nav a[aria-current=page]{padding-left:.3em;outline:0}
.ov nav a:hover::after,.ov nav a:focus-visible::after,.ov nav a[aria-current=page]::after{transform:none}
.ov .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;font-size:15px;border-top:1px solid rgba(10,10,10,.25);padding-top:20px}
.ov .foot a{font-weight:700}
.logo i{animation:alive 1.6s steps(1) infinite}
@keyframes alive{0%{background:#fff}50%{background:var(--g)}}
@media (max-width:900px){.menu,.navcta{display:none}.dot{transform:none;opacity:1;pointer-events:auto}}