/* ===========================================================
   nav.css — GNB 단일 소스 (2026-09-01 신설 · v1.0)

   전 페이지(portfolio · capability · resume · case 5종)가 이 파일 하나를
   공유한다. 페이지별 <style> 안에 GNB 규칙을 다시 쓰지 말 것.
   이 파일은 각 페이지의 인라인 <style> **뒤에** 링크되므로,
   페이지에 남아 있는 옛 규칙보다 항상 이 파일이 이긴다.

   고정값 원칙 — 헤더 폭은 --maxw를 따르지 않는다.
   케이스 페이지 본문은 820px지만 헤더는 1120px로 고정.
   =========================================================== */

/* line-height를 여기서 못 박는다 — 페이지마다 body line-height가 달라(메인 1.6 / 케이스 1.68)
   상속되면 브랜드·메뉴 글자가 0.6px씩 다른 높이에 앉는다. 상속 금지. */
header.nav{position:sticky;top:0;z-index:50;padding-top:18px;padding-bottom:2px;line-height:1.5}
header.nav .wrap{max-width:1120px;margin:0 auto;padding:0 28px}

.nav-pill{display:flex;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;
  background:var(--card);border:1px solid rgba(23,22,20,.05);border-radius:100px;
  padding:11px 12px 11px 24px;
  box-shadow:0 2px 6px rgba(23,22,20,.04),0 14px 34px rgba(23,22,20,.10)}

.nav-pill .nav-left,.nav-left{display:flex;align-items:center;gap:34px;min-width:0}
.nav-pill .nav-right,.nav-right{display:flex;align-items:center;gap:6px}

.nav-pill .brand,.brand{display:flex;align-items:center;gap:9px;line-height:24px;
  font-family:"Space Grotesk";font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.nav-pill .brand .kr,.brand .kr{font-family:"Inter";font-weight:450;font-size:12px;line-height:24px;color:var(--muted)}

.nav-menu{display:flex;align-items:center;gap:26px}
.nav-menu>a{font-size:15px;line-height:24px;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-menu>a:hover,.nav-menu>a.on{color:var(--ink)}

/* Work 드롭다운 */
.nav-menu .dd{position:relative}
.nav-menu .dd>button{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  font-family:inherit;font-size:15px;line-height:24px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:color .2s}
.nav-menu .dd>button:hover,.nav-menu .dd.open>button{color:var(--ink)}
.nav-menu .dd>button .cv{display:block;width:6px;height:6px;
  border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .2s var(--ease),margin-top .2s var(--ease)}
.nav-menu .dd.open>button .cv{transform:rotate(-135deg);margin-top:2px}

.dd-panel{position:absolute;top:calc(100% + 16px);left:-14px;min-width:344px;
  background:var(--card);border:1px solid var(--faint);border-radius:18px;padding:8px;
  box-shadow:0 2px 6px rgba(23,22,20,.04),0 18px 44px rgba(23,22,20,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.nav-menu .dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-panel a{display:block;padding:9px 12px;border-radius:12px;color:var(--ink);font-size:14px;font-weight:500;line-height:1.35}
.dd-panel a:hover,.dd-panel a.on{background:var(--chip)}
.dd-panel a .num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin-right:9px}
.dd-panel a .sub{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:3px;padding-left:29px}
.dd-panel .all{border-top:1px solid var(--faint);margin:6px 4px 0;padding-top:6px}
.dd-panel .all a{font-size:13px;font-weight:500;color:var(--ink-soft)}

/* 우측 보조 링크 (Portfolio PDF · PDF로 저장) */
.nav-right .login,.nav-pill .login{font-size:15px;line-height:22px;font-weight:500;color:var(--ink-soft);padding:9px 14px;background:none;border:0;font-family:inherit;cursor:pointer}
.nav-right .login:hover,.nav-pill .login:hover{color:var(--ink)}
.print-btn{font-size:15px;font-weight:500;color:var(--ink-soft);padding:9px 14px;background:none;border:0;font-family:inherit;cursor:pointer;line-height:22px}
.print-btn:hover{color:var(--ink)}

/* CTA — 전 페이지 동일 규격. case-voc의 라이브 데모만 accent 유지 */
.nav-cta,.nav-pill .cta{background:var(--ink);color:var(--paper);
  font-family:inherit;font-weight:600;font-size:14px;line-height:22px;
  padding:11px 20px;border-radius:100px;white-space:nowrap;
  transition:background .25s var(--ease)}
.nav-cta:hover,.nav-pill .cta:hover{background:var(--accent)}
.nav-pill .cta.demo-cta{background:var(--accent);color:#fff;font-family:"JetBrains Mono",monospace;font-weight:400}
.nav-pill .cta.demo-cta:hover{background:var(--ink)}

/* 모바일 */
.burger{display:none;background:none;border:1px solid var(--faint);border-radius:100px;
  width:38px;height:38px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger span{display:block;width:15px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:15px;height:2px;background:var(--ink)}
.burger span::before{top:-5px}.burger span::after{top:5px}

.m-menu{display:none;flex-direction:column;gap:2px;max-width:1120px;margin:10px auto 0;
  background:var(--card);border:1px solid var(--faint);border-radius:20px;padding:10px;
  box-shadow:0 14px 34px rgba(23,22,20,.10)}
.m-menu.open{display:flex}
.m-menu a{padding:11px 14px;font-size:15px;line-height:22px;font-weight:500;color:var(--ink-soft);border-radius:12px}
.m-menu a:hover{background:var(--chip)}
.m-menu .mh{padding:12px 14px 4px;font-family:"JetBrains Mono",monospace;font-size:11px;line-height:18px;letter-spacing:.08em;color:var(--muted)}
.m-menu a.sub-a{padding-left:26px;font-size:14px;color:var(--ink)}
.m-menu a.sub-a .num{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);margin-right:8px}
.m-menu a.all-a{font-size:13px;color:var(--ink-soft);padding-left:26px}
.m-menu .msep{height:1px;background:var(--faint);margin:8px 6px}

@media(max-width:900px){
  .nav-menu{display:none}
  .burger{display:flex}
}
@media(max-width:520px){
  .nav-right .login,.nav-pill .login,.print-btn{display:none}
  .nav-pill .brand,.brand{display:flex;font-size:18px}
  .nav-pill .brand .kr,.brand .kr{display:none}
}
@media(max-width:430px){
  .nav-pill .cta{font-size:11px;line-height:22px;padding:11px 13px}
  .nav-pill .cta.demo-cta{font-size:11px;padding:11px 13px}
}