/* Venture Space — 공용 상단 바(GNB)
   2026-09-21. 랜딩(index.html)과 모든 서브 페이지가 이 파일 하나를 씁니다.
   전에는 랜딩의 <style> 과 app/public/auth.css 에 상단 바가 따로 있어
   메뉴를 바꿀 때마다 두 곳이 갈라졌습니다. 마크업은 assets/gnb.js 가 그립니다.

   ★ 모든 선택자를 `.gnb` 아래로 묶었습니다 — 페이지마다 이미 .logo/.lang/.btn 이
     정의되어 있어, 묶지 않으면 서로 덮어씁니다.
   ★ 두 가지 모양:
       .gnb.fixed  랜딩 — 히어로 위에 투명하게 떠 있다가 스크롤하면 어두워짐(높이 70px)
       .gnb        서브 페이지 — 문서 흐름 안의 검은 띠(높이 66px)
   ★ 항목 높이 34px 규칙: 로고·메뉴·KO/EN·버튼·햄버거를 모두 34px 로 세워 중심선을 맞춥니다.
     우측에 무언가를 추가할 때 이 규칙을 깨지 마십시오. */

.gnb{--gnb-h:66px;
  background:var(--black,#000);color:var(--white,#fff);
  border-bottom:1px solid var(--line-d,rgba(255,255,255,.14));
  position:relative;z-index:200}
.gnb.fixed{--gnb-h:70px;
  position:fixed;inset:0 0 auto;background:transparent;border-bottom-color:transparent;transition:.35s}
.gnb.fixed.on{background:rgba(0,0,0,.9);backdrop-filter:blur(18px);border-bottom-color:var(--line-d,rgba(255,255,255,.14))}
.gnb-in{max-width:1180px;margin:0 auto;padding:0 24px;height:var(--gnb-h);
  display:flex;align-items:center;gap:18px;flex-wrap:nowrap}

/* 로고 */
.gnb .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17.5px;letter-spacing:-.02em;
  flex:0 0 auto;white-space:nowrap;text-decoration:none;color:#fff}
.gnb .logo img{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:block}
.gnb:not(.fixed) .logo{font-size:16.5px}
.gnb:not(.fixed) .logo img{width:31px;height:31px}

/* 최상위 5개 대분류 — 좌우 여백이 대칭이 되도록 margin-inline:auto 로 가운데 둡니다.
   flex:1 1 auto 로 늘리면 폭에 따라 좌우 여백이 달라져 오와 열이 어긋나 보입니다. */
.gnb .nav-links{display:flex;align-items:center;gap:16px;font-size:13.5px;
  color:var(--mut-d,#9a9a9a);font-weight:500;flex:0 1 auto;margin-inline:auto;justify-content:center;padding:0}
@media(max-width:1240px){.gnb .nav-links{gap:13px;font-size:13px}}
@media(max-width:1100px){.gnb .nav-links{gap:11px;font-size:12.5px}}

.gnb .nvg{position:relative;flex:0 0 auto;display:flex;align-items:center;height:34px}
.gnb .nvt{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0;white-space:nowrap;
  color:inherit;font:inherit;background:none;border:0;cursor:pointer;letter-spacing:-.01em;text-decoration:none}
.gnb .nvt::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:#fff;transition:.28s}
.gnb .nvg:hover>.nvt,.gnb .nvg.open>.nvt,.gnb .nvg.here>.nvt{color:#fff}
.gnb .nvg:hover>.nvt::after,.gnb .nvg.open>.nvt::after,.gnb .nvg.here>.nvt::after{right:0}
/* 하위가 있는 항목에만 화살표를 답니다 — 없는 항목(데모데이)에 달면 거짓 안내가 됩니다 */
.gnb .nvg.has>.nvt .cv{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:.22s;flex:0 0 auto}
.gnb .nvg.has:hover>.nvt .cv,.gnb .nvg.has.open>.nvt .cv{transform:rotate(-135deg) translate(-2px,-2px)}

/* 드롭다운 — 부모 좌측 기준 정렬, 5개 모두 같은 최소폭 */
.gnb .nvp{position:absolute;top:100%;left:0;margin-top:8px;min-width:210px;padding:8px 0;
  background:rgba(8,8,8,.97);backdrop-filter:blur(18px);
  border:1px solid var(--line-d,rgba(255,255,255,.14));border-radius:2px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:210}
.gnb .nvg:hover>.nvp,.gnb .nvg.open>.nvp{opacity:1;visibility:visible;transform:none}
.gnb .nvp a{display:block;padding:9px 18px;font-size:13px;line-height:1.35;
  color:var(--mut-d,#9a9a9a);white-space:nowrap;text-align:left;text-decoration:none}
.gnb .nvp a:hover{color:#fff;background:rgba(255,255,255,.08)}

/* 우측 묶음 */
.gnb .nav-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
@media(max-width:1100px){.gnb .nav-r{gap:8px}}
.gnb .lang{display:flex;align-items:stretch;flex:0 0 auto;height:34px;margin:0;
  border:1px solid var(--line-d,rgba(255,255,255,.14));border-radius:2px;overflow:hidden}
.gnb .lang button{display:flex;align-items:center;background:none;border:0;color:var(--mut-d,#9a9a9a);
  font:700 11.5px Inter,sans-serif;letter-spacing:.04em;padding:0 10px;cursor:pointer;transition:.2s}
.gnb .lang button+button{border-left:1px solid var(--line-d,rgba(255,255,255,.14))}
.gnb .lang button:hover{color:#fff}
.gnb .lang button.on{background:#fff;color:#000}
@media(max-width:1100px){.gnb .lang{height:32px}.gnb .lang button{padding:0 8px;font-size:11px}}

/* 페이지 전용 링크(쪽지함 등) — 대분류가 아니라 우측 묶음에 답니다 */
.gnb .nav-x{display:flex;align-items:center;gap:14px;flex:0 0 auto;height:34px;font-size:13px;color:var(--mut-d,#9a9a9a)}
.gnb .nav-x a{display:inline-flex;align-items:center;height:34px;white-space:nowrap;text-decoration:none;color:inherit}
.gnb .nav-x a:hover{color:#fff}
@media(max-width:1000px){.gnb .nav-x{display:none}}
.gnb .nvm-x{display:flex;flex-wrap:wrap;gap:14px;padding:0 2px 14px;font-size:14px;color:var(--mut-d,#9a9a9a)}
.gnb .nvm-x a{text-decoration:none;color:inherit}
.gnb .nvm-x:empty{display:none}
.gnb .nav-me{display:flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap;min-height:34px}
@media(max-width:1100px){.gnb .nav-me{gap:7px}}
.gnb .navlg{display:inline-flex;align-items:center;height:34px;font-size:13px;color:var(--mut-d,#9a9a9a);
  white-space:nowrap;letter-spacing:-.01em;padding:0 2px;text-decoration:none}
.gnb .navlg:hover{color:#fff}
.gnb .gbtn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 18px;
  border:1px solid transparent;border-radius:2px;font-weight:700;font-size:13.5px;
  letter-spacing:-.01em;text-decoration:none;transition:.25s;background:#fff;color:#000}
.gnb .gbtn:hover{background:#ededea}
.gnb .gbtn.ghost{background:transparent;color:#fff;border-color:var(--line-d,rgba(255,255,255,.14))}
.gnb .gbtn.ghost:hover{background:#fff;color:#000}
/* 로그인 상태 칩 */
.gnb .who{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px 0 6px;text-decoration:none;
  border:1px solid var(--line-d,rgba(255,255,255,.14));border-radius:2px;transition:.25s;max-width:178px}
.gnb .who:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42)}
.gnb .who .avph{width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:#fff;color:#000;font:800 11.5px Inter,sans-serif}
.gnb .who .tx{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.2}
.gnb .who .nm{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.gnb .who .rl{font-size:10.5px;color:var(--mut-d,#9a9a9a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.gnb .who .bdg{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#fff;color:#000;
  font:800 10.5px Inter,sans-serif;display:grid;place-items:center}
@media(max-width:1240px){.gnb .who{max-width:158px}.gnb .who .nm,.gnb .who .rl{max-width:84px}}
@media(max-width:620px){.gnb .who .tx .rl{display:none}.gnb .who .nm{max-width:104px}}
.gnb .navout{display:inline-flex;align-items:center;height:34px;font-size:11.5px;color:var(--dim-d,#6e6e6e);
  white-space:nowrap;letter-spacing:-.01em;text-decoration:none}
.gnb .navout:hover{color:#fff;text-decoration:underline}

/* 햄버거 — 1000px 이하 */
.gnb .nvb{display:none;flex:0 0 auto;width:34px;height:34px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-d,rgba(255,255,255,.14));border-radius:2px;cursor:pointer;padding:0}
.gnb .nvb span{display:block;position:relative;width:16px;height:1.5px;background:#fff;transition:.22s}
.gnb .nvb span::before,.gnb .nvb span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:#fff;transition:.22s}
.gnb .nvb span::before{top:-5px}
.gnb .nvb span::after{top:5px}
.gnb .nvb.on span{background:transparent}
.gnb .nvb.on span::before{top:0;transform:rotate(45deg)}
.gnb .nvb.on span::after{top:0;transform:rotate(-45deg)}
@media(max-width:1000px){.gnb .nav-links{display:none}.gnb .nvb{display:inline-flex}}
/* 620px 이하에서는 로고·KO/EN·햄버거만 남깁니다.
   로그인·회원가입까지 다섯을 한 줄에 두면 360px 에서 폭을 넘깁니다(실측).
   두 항목은 햄버거 패널 맨 위로 내려갑니다. */
/* 로그인 상태의 회사명 칩도 같은 이유로 내립니다 — 칩은 폭이 116px 이라
   360px 에서 로고·KO/EN·햄버거와 함께 서면 넘칩니다(실측). 햄버거 패널의
   '내 계정 / 로그아웃'이 같은 역할을 합니다. */
@media(max-width:620px){.gnb .navlg,.gnb .gbtn,.gnb .navout,.gnb .who{display:none}}

/* 모바일 아코디언 패널 */
.gnb .nvm{display:none;position:fixed;left:0;right:0;top:var(--gnb-h);bottom:0;overflow-y:auto;
  background:rgba(0,0,0,.97);backdrop-filter:blur(18px);
  border-top:1px solid var(--line-d,rgba(255,255,255,.14));z-index:199}
.gnb .nvm.on{display:block}
.gnb .nvm-in{max-width:1180px;margin:0 auto;padding:14px 24px 34px}
.gnb .nvm-auth{display:flex;gap:8px;padding:4px 0 16px}
.gnb .nvm-auth a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  padding:12px 10px;font-size:14px;font-weight:700;border:1px solid transparent;border-radius:2px;
  text-decoration:none;background:#fff;color:#000}
.gnb .nvm-auth a.ghost{background:transparent;color:#fff;border-color:var(--line-d,rgba(255,255,255,.14))}
.gnb .nvm details{border-bottom:1px solid var(--line-d,rgba(255,255,255,.14))}
.gnb .nvm summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 2px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;list-style:none}
.gnb .nvm summary::-webkit-details-marker{display:none}
.gnb .nvm summary .cv{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:.22s;flex:0 0 auto;margin-right:4px}
.gnb .nvm details[open] summary .cv{transform:rotate(-135deg)}
.gnb .nvm details>div{padding:0 2px 12px}
.gnb .nvm details>div a{display:block;padding:10px 0 10px 12px;font-size:14px;
  color:var(--mut-d,#9a9a9a);text-decoration:none;border-left:1px solid var(--line-d,rgba(255,255,255,.14))}
.gnb .nvm details>div a:hover{color:#fff}
.gnb .nvm a.solo{display:block;padding:15px 2px;font-size:15px;font-weight:700;color:#fff;
  text-decoration:none;border-bottom:1px solid var(--line-d,rgba(255,255,255,.14))}

/* 자바스크립트가 꺼진 환경용 대체 메뉴(각 페이지 <noscript>) */
.gnb-ns{max-width:1180px;margin:0 auto;padding:10px 24px 14px;display:flex;flex-wrap:wrap;gap:14px;
  font-size:13px;color:var(--mut-d,#9a9a9a)}
.gnb-ns a{color:inherit;text-decoration:underline}