/* 공통 상단 메뉴(common.js 가 그린다). 화면마다 위치·항목이 같아야 이동할 때 메뉴가 들쑥날쑥하지 않다.
   다크 전용. 한글은 본문 글꼴, 글자 14px 이상, 대비 4.5:1 이상. */
[data-gnav]{display:block;position:sticky;top:0;z-index:90;min-height:60px;padding:0;justify-content:initial;background:rgba(3,3,6,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(244,246,255,.16);flex:none}
.gnav-in{max-width:1100px;margin:0 auto;height:60px;padding:0 clamp(16px,4vw,40px);display:flex;align-items:center;gap:10px}
.gnav-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;text-decoration:none;color:#F4F6FF;flex:none}
.gnav-mark{width:48px;height:28px;flex:none;overflow:visible}
/* 점 → 선 → 면: 마우스를 올리거나 포커스하면 한 단계씩 이어진다 */
.m-ln{transform-box:fill-box;transform-origin:left center}
.m-pl{transform-box:fill-box;transform-origin:center}
.gnav-logo:hover .m-ln,.gnav-logo:focus-visible .m-ln{animation:gnavLn .5s ease-out both}
.gnav-logo:hover .m-pl,.gnav-logo:focus-visible .m-pl{animation:gnavPl .5s .45s ease-out both}
.gnav-logo:hover .m-pt,.gnav-logo:focus-visible .m-pt{animation:gnavPt .45s ease-out both}
@keyframes gnavPt{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes gnavLn{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes gnavPl{0%{transform:scale(.4);opacity:.2}100%{transform:scale(1);opacity:1}}
.m-pt{transform-box:fill-box;transform-origin:center}
/* 글자는 홈 로고와 같은 모양(Syne 800 · 자간 .04em · A 그라데이션 · i 막대+궤도 점) */
.gnav-word{display:inline-flex;align-items:flex-end;font:800 22px/1 "Syne",system-ui,sans-serif;letter-spacing:.04em;color:#F4F6FF;padding-top:8px;min-width:96px;white-space:nowrap}
.gnav-word .ai{background:linear-gradient(95deg,#3CF0FF,#FF2E88 70%,#FFC857);-webkit-background-clip:text;background-clip:text;color:transparent}
.gnav-word .i{position:relative;display:inline-block;width:.16em;height:.7em;margin-left:.07em;border-radius:1px;background:linear-gradient(180deg,#FF2E88,#FFC857)}
.gnav-word .i i{position:absolute;left:50%;top:-.44em;width:.26em;height:.26em;border-radius:50%;background:#F4F6FF;transform:translateX(-50%);box-shadow:0 0 10px #3CF0FF,0 0 22px #3CF0FF;animation:gnavOrbit 2.4s ease-in-out infinite}
@keyframes gnavOrbit{0%,100%{transform:translate(-50%,0) scale(1)}25%{transform:translate(-120%,-30%) scale(1.3);background:#3CF0FF}50%{transform:translate(-50%,-55%) scale(.8)}75%{transform:translate(20%,-30%) scale(1.3);background:#FFC857}}
@media (prefers-reduced-motion:reduce){.gnav-word .i i{animation:none}.gnav-logo:hover .m-ln,.gnav-logo:hover .m-pl,.gnav-logo:hover .m-pt,.gnav-logo:focus-visible .m-ln,.gnav-logo:focus-visible .m-pl,.gnav-logo:focus-visible .m-pt{animation:none}}
.gnav-links{display:flex;align-items:center;gap:0}
.gnav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 9px;border-radius:999px;color:#C9CEE2;text-decoration:none;font:500 14px/1 "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;white-space:nowrap}
.gnav-links a:hover{color:#3CF0FF}
.gnav-links a[aria-current="page"]{color:#030306;background:#3CF0FF;font-weight:700}
.gnav-links a:focus-visible,.gnav-burger:focus-visible,.gnav-logo:focus-visible{outline:2px solid #FFC857;outline-offset:2px}
/* 화면별 추가 요소(진행 표시·토큰·로그아웃 등)는 막대 아래 줄. 보이는 것이 없으면 자리도 없다 */
.gnav-sub{max-width:1100px;margin:0 auto;padding:6px clamp(16px,4vw,40px) 0;display:flex;align-items:center;gap:8px;font:500 14px "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;color:#C9CEE2}
.gnav-sub:not(:has(>:not([hidden]))){display:none}
.gnav-sub .mono{font:500 14px "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
.gnav-burger{display:none;width:44px;height:44px;border:1px solid rgba(244,246,255,.3);border-radius:10px;background:transparent;color:#F4F6FF;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.gnav-burger i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.gnav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gnav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.gnav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1060px){
  .gnav-burger{display:inline-flex}
  .gnav-links{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(16px,4vw,40px) 14px;background:rgba(3,3,6,.98);border-bottom:1px solid rgba(244,246,255,.2)}
  .gnav-links.open{display:flex}
  .gnav-links a{justify-content:flex-start;min-height:48px;font-size:16px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.gnav-burger i{transition:none}}
/* 워크벤치: 화면 전체 높이 구조라 상단 메뉴 아래 도구줄의 로고는 중복이라 감춘다 */
.wbpage .wbtop .logo{display:none}