/* 케이잡스 공용 GNB (정적 사이트용) — kjobs-gnb.js 가 그리는 마크업의 스타일.
   본사이트 팔레트를 그대로 쓴다: 주색 #005baa, 밝은 파랑 #0089d0, 먹 #13161a.

   **본사이트 헤더(client/src/components/header)와 같은 규격이다 — 2026-10-30 다시 맞췄다.**
   책임자 지적: 「AI전직지원센터 · 희망리턴패키지센터를 번갈아 누르면 대메뉴 모양이 바뀐다」.
   실측(1700px) 이 판은 높이 81px · 로고 40px · 메뉴 글자 14px · 시스템 글꼴이었고, 1520px 아래에서는
   대메뉴를 통째로 접고 로그인 · ☰ 를 왼쪽에 두었다. 본사이트는 90px · 45px · 15.75px · Pretendard 에
   640px 부터 대메뉴를 띄우고 1600px 아래에서 ☰ 를 같이 띄운다. 그 규격을 그대로 옮긴다.

   본사이트는 루트 글자가 17px(768px 이상 18px)이라 Tailwind 의 rem 값이 그만큼 커진다.
   정적 페이지는 루트가 16px 이므로 rem 을 쓰지 않고 --kg-u(본사이트의 1rem)에 곱해 쓴다.
   본사이트 쪽 숫자를 바꾸면 여기도 같이 바꾼다. */
:root { --kjobs-gnb-h: 85px; }
@media (min-width: 768px) { :root { --kjobs-gnb-h: 90px; } }

#kjobs-gnb { --kg-u: 17px; position: sticky; top: 0; z-index: 9000; }
@media (min-width: 768px) { #kjobs-gnb { --kg-u: 18px; } }
#kjobs-gnb * { box-sizing: border-box; }

#kjobs-gnb .kg-bar {
  position: relative;
  background: #fff;
  /* 본사이트 헤더의 shadow-md */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.5;
}
/* px-4 sm:px-6 min-[1024px]:px-4 · h-20 */
#kjobs-gnb .kg-inner {
  width: 100%; margin: 0 auto; padding: 0 var(--kg-u);
  height: calc(var(--kg-u) * 5); display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 640px) { #kjobs-gnb .kg-inner { padding: 0 calc(var(--kg-u) * 1.5); } }
@media (min-width: 1024px) { #kjobs-gnb .kg-inner { padding: 0 var(--kg-u); } }

#kjobs-gnb .kg-logo { display: flex; align-items: center; gap: calc(var(--kg-u) * .5); margin-right: calc(var(--kg-u) * .5); text-decoration: none; flex-shrink: 0; }
#kjobs-gnb .kg-logo-img { height: calc(var(--kg-u) * 2.5); width: auto; display: block; }
#kjobs-gnb .kg-brand { color: #2f3743; font-weight: 600; font-size: calc(var(--kg-u) * 1.125); white-space: nowrap; }

/* 대메뉴 줄 — 640px 부터. 넘치는 칸은 잘라 내고 ☰ 로 본다(본사이트와 같다).
   overflow-x 는 clip 이어야 한다. auto 면 overflow-y 도 auto 가 되어 드롭다운 판이 통째로 잘린다. */
#kjobs-gnb nav.kg-nav {
  display: none; flex: 1; min-width: 0; margin: 0; padding: 0; gap: 0; height: auto; max-width: none;
  align-items: center; justify-content: safe center; flex-wrap: nowrap;
  overflow-x: clip; overflow-y: visible;
}
@media (min-width: 640px) { #kjobs-gnb nav.kg-nav { display: flex; } }
#kjobs-gnb .kg-group { position: relative; }
#kjobs-gnb .kg-top {
  position: relative; display: inline-flex; align-items: center; white-space: nowrap;
  padding: calc(var(--kg-u) * .5) calc(var(--kg-u) * .375); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: calc(var(--kg-u) * .875); font-weight: 500; color: #374151;
  text-decoration: none; border-radius: calc(var(--kg-u) * .375);
}
#kjobs-gnb .kg-top:hover, #kjobs-gnb .kg-group.kg-open > .kg-top { color: #111827; }
#kjobs-gnb .kg-chev { position: relative; top: 1px; width: calc(var(--kg-u) * .75); height: calc(var(--kg-u) * .75); margin-left: calc(var(--kg-u) * .25); transition: transform .2s; flex-shrink: 0; }
#kjobs-gnb .kg-group.kg-open > .kg-top .kg-chev { transform: rotate(180deg); }
/* 지금 있는 갈래 — 굵은 글씨 + 칸 안쪽 밑줄(본사이트 active-menu.ts 와 같은 판단, 같은 모양). */
#kjobs-gnb .kg-top.kg-active { font-weight: 700; color: #111827; }
#kjobs-gnb .kg-top.kg-active::after {
  content: ""; position: absolute; left: calc(var(--kg-u) * .5); right: calc(var(--kg-u) * .5);
  bottom: calc(var(--kg-u) * .25); height: calc(var(--kg-u) * .125); border-radius: 9999px; background: #005baa;
}

#kjobs-gnb .kg-panel {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 1;
  background: #fff; border: 1px solid #e6e8ea; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(19,22,26,.12); padding: .35rem;
}
#kjobs-gnb .kg-group.kg-open > .kg-panel { display: block; }
#kjobs-gnb .kg-item {
  display: block; padding: .75rem 1.25rem; font-size: 14px; color: #41464a;
  text-decoration: none; border-radius: 6px; white-space: nowrap;
}
#kjobs-gnb .kg-item:hover { background: #f0f8fe; color: #005baa; }
#kjobs-gnb .kg-subhead {
  padding: .5rem .65rem .25rem; font-size: 11px; font-weight: 700;
  color: #767b80; border-top: 1px solid #f1f4f6; margin-top: .25rem;
}
#kjobs-gnb .kg-subitem { padding-left: 1.6rem; }

/* 두 칸 판 — DesktopNav ColumnsPanel 과 같은 규격(칸 제목 12px 굵게, 이름 14px, 설명 12px 회색).
   1000px 미만은 한 칸으로 떨어뜨린다(본사이트와 같다 — 판이 줄보다 넓으면 어디로 밀어도 잘린다). */
#kjobs-gnb .kg-panel-cols { padding: .75rem; max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
#kjobs-gnb .kg-cols { display: grid; grid-template-columns: 1fr; column-gap: 1rem; }
@media (min-width: 1000px) { #kjobs-gnb .kg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 999px) { #kjobs-gnb .kg-panel-cols { min-width: 224px !important; } }
#kjobs-gnb .kg-colhead { padding: .25rem .75rem .375rem; font-size: 12px; font-weight: 700; color: #9ca3af; }
#kjobs-gnb .kg-colitem { display: block; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }
#kjobs-gnb .kg-colitem:hover { background: #f9fafb; }
#kjobs-gnb .kg-colname { display: block; font-size: 14px; font-weight: 500; color: #1f2937; }
#kjobs-gnb .kg-coldesc { display: block; margin-top: .125rem; font-size: 12px; color: #6b7280; }
#kjobs-gnb .kg-colfoot {
  display: block; margin-top: .5rem; padding: .5rem .75rem; border-top: 1px solid #f3f4f6;
  font-size: 14px; font-weight: 500; color: #005baa; text-decoration: none; border-radius: 6px;
}
#kjobs-gnb .kg-colfoot:hover { background: #f9fafb; }

/* 로그인 칸 — 본사이트 HeaderControls 처럼 640px 부터 오른쪽 끝(☰ 바로 왼쪽). 줄지 않는다. */
#kjobs-gnb .kg-auth { display: none; align-items: center; gap: calc(var(--kg-u) * .5); flex-shrink: 0; margin-left: calc(var(--kg-u) * .5); }
@media (min-width: 640px) { #kjobs-gnb .kg-bar > .kg-inner > .kg-auth { display: flex; } }
#kjobs-gnb .kg-cta {
  display: inline-flex; align-items: center; height: calc(var(--kg-u) * 2); padding: 0 calc(var(--kg-u) * .75);
  border-radius: calc(var(--kg-u) * .375); font: inherit; font-size: calc(var(--kg-u) * .75); font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
#kjobs-gnb .kg-cta-solid { background: #005baa; color: #fff; }
#kjobs-gnb .kg-cta-solid:hover { background: #1d4977; }
#kjobs-gnb .kg-cta-ghost { background: #fff; color: #374151; border-color: #d3d8de; }
#kjobs-gnb .kg-cta-ghost:hover { color: #005baa; border-color: #cadae8; }
#kjobs-gnb .kg-cta[disabled] { opacity: .6; cursor: default; }

/* ☰ — 1600px 아래(본사이트 min-[1600px]:hidden). 맨 오른쪽. */
#kjobs-gnb .kg-burger {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: calc(var(--kg-u) * .5); border: 0; background: none; cursor: pointer; color: #21242c;
}
#kjobs-gnb .kg-burger svg { width: 24px; height: 24px; display: block; }
@media (min-width: 1600px) { #kjobs-gnb .kg-burger, #kjobs-gnb .kg-sheet { display: none !important; } }

/* ☰ 판 — 막대 바로 밑에 펼친다. 대메뉴 전부 + (640px 미만이면) 로그인. */
#kjobs-gnb .kg-sheet {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #e6e8ea; box-shadow: 0 10px 30px rgba(19,22,26,.12);
  max-height: calc(100vh - var(--kjobs-gnb-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: .5rem var(--kg-u) 1rem;
}
#kjobs-gnb .kg-bar.kg-sheet-on .kg-sheet { display: block; }
#kjobs-gnb .kg-sheet .kg-group { position: static; }
#kjobs-gnb .kg-sheet .kg-top { display: flex; width: 100%; text-align: left; padding: .7rem .5rem; font-size: calc(var(--kg-u) * .875); }
#kjobs-gnb .kg-sheet .kg-panel { position: static; box-shadow: none; border: 0; padding: 0 0 .4rem .6rem; min-width: 0 !important; max-height: none; }
#kjobs-gnb .kg-sheet .kg-auth { display: flex; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid #f1f4f6; }
@media (min-width: 640px) { #kjobs-gnb .kg-sheet .kg-auth { display: none; } }
@media (min-width: 768px) { #kjobs-gnb .kg-sheet .kg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ☰ 판에서는 칸이 한 줄 전체라 밑줄이 화면 폭만큼 늘어난다 — 굵은 글씨로만 표시한다. */
#kjobs-gnb .kg-sheet .kg-top.kg-active::after { display: none; }