/* 상단 메뉴 '노무사 의뢰하기' 강조 + 선택 창 (2026-09-11). 짝: /site-nav.js */

/* 메뉴 가운데 자리라 채운 버튼 대신 굵은 남색 글자 + 민트 밑줄로 눈에 걸리게 한다.
   ⚠ .nav-links a(0,1,1)·body[data-stage] 규칙보다 위에서 못박는다. */
/* 창을 여는 버튼이라 <button> 이다(링크로 두면 일부 브라우저·앱이 주소로 먼저 이동한다). */
.nav-links button.nav-pro,.mobile-menu button.nav-pro{background:none;border:0;cursor:pointer;font-family:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}
.nav-links button.nav-pro,body[data-stage] .nav-links button.nav-pro{color:#0F2744;font-size:15px;font-weight:800;position:relative;padding:0;line-height:inherit}
.nav-links button.nav-pro::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:#00B893}
body[data-stage="4"] .nav-links button.nav-pro{color:#fff}
.mobile-menu button.nav-pro{color:#0F2744;font-size:17px;font-weight:800;padding:9px 0;text-align:left}

.npro{position:fixed;inset:0;z-index:2000;background:rgba(12,24,38,.42);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .18s}
.npro.on{opacity:1}
.npro[hidden]{display:none}
.npro-lock,.npro-lock body{overflow:hidden}
.npro-sheet{width:100%;max-width:460px;background:#fff;border-radius:20px;padding:20px 22px 24px;box-shadow:0 30px 80px rgba(12,24,38,.28);
  transform:translateY(10px);transition:transform .2s;font-family:inherit;color:#191919;text-align:left}
.npro.on .npro-sheet{transform:none}
.npro-step[hidden]{display:none}
.npro-top{display:flex;align-items:center;min-height:34px;margin-bottom:4px}
.npro-back,.npro-x{border:0;background:none;cursor:pointer;color:#6B6B66;font:inherit;font-size:14px;font-weight:700;padding:6px 8px;border-radius:8px}
.npro-back:hover,.npro-x:hover{background:#F2F2EF;color:#191919}
.npro-x{font-size:24px;line-height:1;padding:2px 10px;margin-left:auto}
.npro-h{margin:4px 0 18px;font-size:22px;line-height:1.35;font-weight:800;letter-spacing:-.03em;color:#191919;text-wrap:balance}
.npro-who{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.npro-who>a,.npro-who>button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px;min-height:128px;
  padding:16px;border-radius:16px;border:1.5px solid #E4E2DC;background:#FCFCFB;cursor:pointer;text-align:left;font:inherit;
  font-size:19px;font-weight:800;letter-spacing:-.03em;color:#191919;text-decoration:none;transition:border-color .15s,background .15s,transform .12s}
.npro-who>a:hover,.npro-who>button:hover{border-color:#00B893;background:#F5FBF9}
.npro-who>a:active,.npro-who>button:active{transform:scale(.98)}
.npro-who svg{width:34px;height:34px}
.npro-jobs{display:flex;flex-direction:column;border-top:1px solid #E4E2DC}
.npro-jobs a{display:flex;align-items:center;gap:10px;padding:17px 4px;border-bottom:1px solid #E4E2DC;font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:#191919;text-decoration:none}
.npro-jobs a::after{content:"›";margin-left:auto;color:#B4B2AB;font-size:22px;font-weight:400;line-height:1}
.npro-jobs a:hover{color:#00806A}
.npro :focus-visible{outline:2.5px solid #00B893;outline-offset:2px}
@media(max-width:640px){
  .npro{place-items:end stretch;padding:0}
  .npro-sheet{max-width:none;border-radius:20px 20px 0 0;padding:14px 18px calc(22px + env(safe-area-inset-bottom,0px));transform:translateY(24px)}
}
@media(prefers-reduced-motion:reduce){.npro,.npro-sheet{transition:none}}

/* ── 모든 페이지 메뉴를 같은 크기·간격으로 (2026-09-11 지민: "두 페이지의 메뉴 서체 크기와 간격이 다름")
   페이지마다 제 CSS 에 메뉴 규칙 사본이 있어 조금씩 달랐다(첫 화면 간격 20px, 다른 곳 24px 등).
   크기·굵기·간격만 여기서 못박는다. ⛔ 글자색은 건드리지 않는다 — 어두운 구간(body[data-stage])이 제 색을 쓴다. */
nav.nav .nav-inner{height:56px;max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
nav.nav .logo{font-size:24px;font-weight:900;letter-spacing:-1px;line-height:1.2;padding:2px 0}
nav.nav .nav-links{display:flex;align-items:center;gap:28px}
nav.nav .nav-links > a,nav.nav .nav-links > button.nav-pro{font-family:inherit;font-size:15px;line-height:1.2;letter-spacing:-.2px;padding:0}
nav.nav .nav-links > a{font-weight:500}
nav.nav .nav-links > a.active{font-weight:700}
nav.nav .mobile-menu > a,nav.nav .mobile-menu > button.nav-pro{font-size:17px;line-height:1.3;padding:9px 0}
@media(max-width:768px){
  nav.nav .nav-inner{padding:0 20px}
  nav.nav .nav-links{display:none}
  nav.nav .hamburger{display:flex}
}