/* 상단 메뉴 '노무사 의뢰하기' 강조 + 선택 창 (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}
/* 2026-09-28 지민 "여기 뭔가 이상" — 다른 칸이 선택돼 있으면 이 강조 밑줄을 감춘다. 밑줄이 둘이면 두 칸이 다 선택된 것처럼 보인다. */
.nav-links:has(> a.active) button.nav-pro::after{display:none}
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:8px;padding:20px 22px 24px;box-shadow:0 8px 24px rgba(15,39,68,.12);
  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:3px}
.npro-back:hover,.npro-x:hover{background:#F2F2EF;color:#191919}
.npro-x{font-size:24px;line-height:1;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;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:3px;border:1px solid #CFCFCF;background:#FCFCFB;cursor:pointer;text-align:left;font:inherit;
  font-size:18px;font-weight:800;letter-spacing:-.03em;color:#191919;text-decoration:none;transition:border-color .15s,background .15s,transform .12s}
@media (hover:hover) and (pointer:fine){.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 #E4E4E4}
.npro-jobs a{display:flex;align-items:center;gap:10px;padding:17px 4px;border-bottom:1px solid #E4E4E4;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#191919;text-decoration:none}
.npro-jobs a::after{content:"→";margin-left:auto;color:#8A8A8A;font-size:17px;font-weight:400;line-height:1;transition:transform .2s ease,color .15s}
@media (hover:hover) and (pointer:fine){.npro-jobs a:hover{color:#00806A}.npro-jobs a:hover::after{color:#00B893;transform:translateX(4px)}}
.npro :focus-visible{outline:2px solid #00B893;outline-offset:2px}
@media(max-width:640px){
  .npro{place-items:end stretch;padding:0}
  .npro-sheet{max-width:none;border-radius:8px 8px 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}
}

/* 모바일 푸터를 절반 크기로 (2026-09-11 지민: "보일락말락하게 조그맣게… 지금의 절반이면 될듯").
   글자·여백·로고를 한꺼번에 줄이려고 zoom 을 쓴다. 페이지마다 푸터 글자 크기가 따로 적혀 있어
   font-size 로 하나씩 덮으면 빠지는 자리가 생긴다. 사업자 정보는 법정 표시라 지우지 않고 작게만 둔다. */
@media(max-width:768px){
  footer.footer{zoom:.5}
}

/* 상단 로고 4/5 (2026-09-11 지민: '노무바나나 로고가 모바일에서 너무 커. 한 4/5정도로') */
@media(max-width:768px){
  nav.nav .logo{zoom:.8}
}

/* 의뢰 선택 창이 떠 있는 동안 AI 위젯 단추를 감춘다 (2026-09-11 지민 '여기 간섭있다').
   위젯은 z-index 최댓값이라 창 위에 올라와 근로자·사용자 카드를 가렸다. 위젯이 display 를 인라인으로
   바꾸므로 !important 로 이긴다. 창을 닫으면 클래스가 빠져 원래대로 보인다. */
html.npro-lock .nvw-dock,html.npro-lock .nvw-fab{display:none!important}

/* ── 원티드 산스 · 공통 바닥글 · 로고 그라데이션 (2026-09-15 · Claude Design '노무바나나 시안' 1안 채택)
   지민: "글자체가 좀 못생겼는데… 명조체 느낌은 쓰지 말고 고딕 느낌으로 훨씬 세련되게" ·
   "홈페이지에서 우리 정보를 클로드 홈페이지 정도로만 넣자. 지금 너무 크고 너무 상세하고 방대해."
   ⛔ 바닥글의 법정 표시 사항(상호·대표자·사업자등록번호·통신판매업 신고·주소·전화·이메일)은 빼지 않는다. */
:root{--nb-font:'Wanted Sans Variable','Wanted Sans','Pretendard Variable','Noto Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
nav.nav .logo-nomu,.home-mark .logo-nomu{background:linear-gradient(90deg,#00B893 0%,#3B82F6 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
footer.site-footer{zoom:1;position:relative;z-index:1;margin:0;padding:28px 20px 32px;text-align:center;font:400 12px/1.7 var(--nb-font);letter-spacing:0;color:#767676;word-break:keep-all;background:transparent;border:0}
footer.site-footer p{margin:0;padding:0;font:inherit;color:inherit}
footer.site-footer a{color:inherit;text-decoration:none}
footer.site-footer a:hover{color:#2F5FD0;text-decoration:underline}
footer.site-footer .notice{margin-top:4px;font-size:11px;color:#767676}
@media(max-width:480px){footer.site-footer{font-size:10.5px;line-height:1.55;padding:16px 20px 20px}footer.site-footer .notice{font-size:10px;line-height:1.5}}


/* 시안 A (2026-09-29) — 장식은 그대로, 마감만 정리. 메뉴 크기·간격·'메뉴' 글자·'노무사 의뢰하기' 밑줄은 손대지 않는다.
   · 선은 불투명 몇 값(#E4E4E4 가는 선 · #CFCFCF 중간 선)으로. 페이지마다 제 CSS 에 rgba 선이 사본으로 있어 여기서 덮는다.
   · 첫 화면(입력창 .ask-box 가 있는 쪽)은 9/15 모양 그대로 — 메뉴 아래 선을 일부러 투명하게 두었다. :has 로 비켜 간다. */
body:not(:has(.ask-box)) nav.nav{border-bottom-color:#E4E4E4}
body[data-stage="4"] nav.nav{border-bottom-color:#22384F}
/* 모바일 메뉴: 떠 있는 판 그림자 한 가지, 하위 목록 세로선 불투명, 선택 표시 2px(위 메뉴 밑줄과 같은 두께) */
nav.nav .mobile-menu{box-shadow:0 8px 24px rgba(15,39,68,.12)}
nav.nav .mobile-menu .m-sub{border-left-color:#A6E6D9}
nav.nav .mobile-menu a.active{border-left-width:2px}
/* 햄버거 '메뉴' — 크기·글자는 그대로, 모서리만 사이트 버튼(3px)과 같게, 선·바탕은 불투명으로 */
nav.nav .hamburger{border-radius:3px;background:#F4F5F7;border-color:#CFCFCF}
body[data-stage="4"] nav.nav .hamburger{background:#273D57;border-color:#617084}

/* 폼 요소가 브라우저 기본 글꼴로 새지 않게 — 글꼴만 물려받는다(글자 크기는 쪽마다 정한 값을 그대로 둔다).
   :where 라 어떤 쪽 규칙보다도 약하다. */
:where(button,input,select,textarea,optgroup){font-family:inherit}