/**
 * 새 머리글(nav2) — 한 줄 머리글: 로고 · 메뉴 ······ 돋보기 · [기업·채용 문의][로그인].
 * inc/custom-navigation.php 끝 nav2 절이 켜진 요청에만 싣는다(custom-navigation.css · mobile-chrome.css 뒤). js/nav2.js 와 한 벌.
 *
 * 2026-10-09 운영자 채용 = 시안 나 Codecademy(한 줄 머리글 시안 페이지 — 값은 시안 사진의 실제 계산값):
 *   PC   한 줄 59px + 아래 선 1px = 60px. 예전 머리글과 같은 높이라 붙는 자리(sticky top)도 custom-navigation.css 그대로다(0 · 관리자 바 32px).
 *        로고 26px → 16px 뒤부터 메뉴 7칸(맨 끝 커뮤니티) → 빈칸 → 돋보기 40px(그림 24px) → 11px → [기업·채용 문의](테두리 단추) · [로그인](채운 초록).
 *        돋보기를 누르면 머리글 바로 아래로 화면 폭 검색 창 — 큰 굵은 글자 입력 줄(24px) + 회색 밑줄 + ✕, 아래 「많이 찾는 검색어」 6줄(46px 간격).
 *        두 글자부터 그 자리에 「연관 검색어」 + 「오빠두엑셀 검색 결과」 미리보기 + 전체 결과 보기(운영자 요청 10/9 — js/nav2.js).
 *        어느 페이지에서도, 스크롤해도, 폭이 줄어도 모양이 같다(접을 것이 없다 — 1025px 에서도 한 줄에 들어간다).
 *   ~1024 휴대폰 틀 60px 한 줄 그대로 + 목록형 화면만 그 아래 꽉 찬 검색 줄(머리글 밖이라 흘러간다)
 * 거쳐 온 길(같은 날): 2줄(링커리어형) → 「접힌 머리글」 반려(「내비게이션이 달라져서 어지럽다」) → B(내리면 위 줄만) →
 *   1줄 큰 검색칸(반려 — 「검색창이 우상단에 꽉 차 있어서 답답」) → 시안 나. 머리글은 페이지·스크롤마다 배치가 바뀌면 안 된다.
 *   기업·채용 문의 = 운영자 메모 「따로 구분」 → 메뉴에 넣지 않고 오른쪽에 둔다(커뮤니티가 메뉴 맨 끝에 남게). 모양은 「다른 탭과 동떨어진다」 → 메뉴와 같은 글자 →
 *   「억지로 끼워 넣은 느낌」 → 오른쪽 시안 두 번(Pipedrive·Clay·LinkedIn / 원티드·인프런·지금 사이트) 뒤 운영자 결정 「문의·로그인은 버튼, 돋보기는 돋보기」 → 지금 머리글의 테두리 단추.
 * 같은 날 「여유판」 채용(시안 3 · 「답답하다」 — css/calm.css 머리 주석): 메뉴 = 15px 보통 굵기 회색 600, 지금 칸만 진하게(600).
 * 회색은 정본 사다리(검색 창 밑줄 = 400·500 사이 #8A8A8A, 자리표시 = 600). !important 없음.
 */

/* ── PC(1025~) — 한 줄 ── */
@media (min-width: 1025px) {
	/* 59 + 아래 선 1 = 60px — 사이트의 붙는 요소 100곳쯤(왼쪽 메뉴·목차·도구 막대)이 「60px 머리글이 붙어 있다」를 전제로 top 을 잡았다 */
	body.oppadu-nav2 .oppadu-nav__inner {
		display: grid;
		grid-template-columns: auto auto minmax(24px, 1fr) auto auto;
		grid-template-rows: 59px;
		align-items: center;
		column-gap: 0;
		height: auto;
	}

	body.oppadu-nav2 .oppadu-nav__logo {
		grid-row: 1;
		grid-column: 1;
		margin-right: 0;
	}

	body.oppadu-nav2 .oppadu-nav__logo img {
		height: 26px;
	}

	body.oppadu-nav2 .oppadu-nav__menu {
		grid-row: 1;
		grid-column: 2;
		height: 59px;
		margin-left: 16px;
		gap: 6px;
	}

	/* 메뉴 — 보통 굵기 회색 글자, 지금 칸만 진하게(Recraft 메뉴. 여유판). 지금 칸 아래 2px 막대는 custom-navigation.css 그대로 */
	body.oppadu-nav2 .oppadu-nav__link {
		height: 59px;
		padding: 0 13px;
		font-size: 15px;
		font-weight: 500;
		color: var(--gray-600);
	}

	body.oppadu-nav2 .oppadu-nav__link:hover {
		color: var(--gray-900);
	}

	body.oppadu-nav2 .oppadu-nav__link--active {
		font-weight: 600;
		color: var(--gray-900);
	}

	/* 오른쪽 묶음의 자식(돋보기·버튼 묶음)을 격자 칸에 바로 놓는다. 휴대폰 틀 단추(hidden)는 PC 에서 안 보인다 */
	body.oppadu-nav2 .oppadu-nav__actions {
		display: contents;
	}

	/* 돋보기 — .oppadu-nav button:hover 리셋(color: inherit)보다 한 단 올려 마우스를 올려도 같은 색 */
	body.oppadu-nav2 .oppadu-nav2__sbtn,
	body.oppadu-nav2 .oppadu-nav .oppadu-nav2__sbtn:hover,
	body.oppadu-nav2 .oppadu-nav .oppadu-nav2__sbtn:focus {
		grid-row: 1;
		grid-column: 4;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0 11px 0 0;
		padding: 0;
		border: 0;
		border-radius: var(--radius-md);
		background: none;
		color: var(--gray-900);
		cursor: pointer;
	}

	body.oppadu-nav2 .oppadu-nav2__sbtn svg {
		flex: none;
		width: 24px;
		height: 24px;
	}

	body.oppadu-nav2 .oppadu-nav2__sbtn:focus-visible {
		outline: 2px solid var(--chrome-focus, var(--gray-900));
		outline-offset: 0;
	}

	/* 오른쪽 단추 둘 = [기업·채용 문의](테두리 단추) · [로그인](채운 초록) — 운영자 결정(10/9, 머리글 오른쪽 시안 2 메모)
	   「[돋보기] [기업 채용 문의] [로그인] — 문의·로그인은 버튼으로, 돋보기는 돋보기로」.
	   두 단추 모양은 custom-navigation.css 의 지금 머리글 그대로라 여기서 덮지 않는다(높이 36 · 모서리 5px · 사이 10px).
	   거쳐 온 길: 테두리 단추(「다른 탭과 동떨어진다」) → 메뉴와 같은 글자(「억지로 끼워 넣은 느낌」) → 오른쪽 시안 두 번 → 다시 단추 */
	body.oppadu-nav2 .oppadu-nav2__right {
		grid-row: 1;
		grid-column: 5;
		display: flex;
		align-items: center;
		gap: var(--nav-ctrl-gap);
	}

	/* ── 검색 창 — 머리글(sticky) 안 맨 아래, 머리글 바로 아래로 화면 폭만큼(Codecademy). 여닫기 = js/nav2.js ── */
	body.oppadu-nav2 .oppadu-nav2-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100dvh - 96px); /* 머리글 60 + 관리자 바 32 아래로 넘치면 창 안에서 스크롤 */
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--surface-white);
		border-bottom: 1px solid var(--gray-200);
	}

	body.oppadu-nav2 .oppadu-nav2-panel[hidden] {
		display: none;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__in {
		max-width: var(--nav-max-w);
		margin: 0 auto;
		padding: 18px var(--nav-px) 36px;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__form {
		display: flex;
		align-items: center;
		gap: 10px;
		height: 54px;
		margin: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--gray-400) 50%, var(--gray-500));
	}

	body.oppadu-nav2 .oppadu-nav2-panel__form > svg {
		flex: none;
		width: 24px;
		height: 24px;
		color: var(--gray-900);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__form input[type="search"] {
		flex: 1;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		outline: 0;
		box-shadow: none;
		background: transparent;
		-webkit-appearance: none;
		appearance: none;
		font-size: 24px;
		font-weight: 700;
		color: var(--gray-900);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__form input[type="search"]::placeholder {
		color: var(--gray-600);
		opacity: 1;
	}

	/* 브라우저 기본 지우기 단추(파란 ×)는 숨긴다 — 오른쪽 ✕ 가 닫기, 사이트 검색칸(검색 화면·위키)과 같다 */
	body.oppadu-nav2 .oppadu-nav2-panel__form input[type="search"]::-webkit-search-cancel-button {
		display: none;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__x,
	body.oppadu-nav2 .oppadu-nav .oppadu-nav2-panel__x:hover,
	body.oppadu-nav2 .oppadu-nav .oppadu-nav2-panel__x:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: var(--radius-sm);
		background: none;
		color: var(--gray-900);
		cursor: pointer;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__x svg {
		width: 20px;
		height: 20px;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__x:focus-visible {
		outline: 2px solid var(--chrome-focus, var(--gray-900));
		outline-offset: 0;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__h {
		margin: 38px 0 6px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--gray-900);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list li {
		display: flex;
		align-items: center;
		height: 46px;
		margin: 0;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list a {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		max-width: 100%;
		font-size: 15px;
		line-height: 1.4;
		color: var(--gray-900);
		text-decoration: none;
	}

	/* 글자 칸 — 긴 제목은 한 줄로 자른다. 밑줄은 글자에만(뒤 종류 글자엔 안 긋는다) */
	body.oppadu-nav2 .oppadu-nav2-panel__list a > span:not(.oppadu-nav2-panel__kind) {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list a:hover > span:not(.oppadu-nav2-panel__kind) {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* 입력 중 — 검색어와 맞는 부분만 굵게(메인 홈 검색칸 자동완성과 같은 표시) */
	body.oppadu-nav2 .oppadu-nav2-panel__list b {
		font-weight: 700;
	}

	/* 검색 결과의 종류(강의·위키·=VLOOKUP() …) — 칩 대신 회색 글자 */
	body.oppadu-nav2 .oppadu-nav2-panel__kind {
		flex: none;
		font-size: 13px;
		color: var(--gray-500);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__none {
		margin: 38px 0 0;
		font-size: 15px;
		color: var(--gray-600);
	}

	/* 찾는 동안 — 결과 자리에 도는 원 + 「‘검색어’ 검색 결과를 찾고 있어요」(js/nav2.js loading) */
	body.oppadu-nav2 .oppadu-nav2-panel__loading {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 46px;
		margin: 38px 0 0;
		font-size: 15px;
		color: var(--gray-600);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__spin {
		flex: none;
		width: 20px;
		height: 20px;
		border: 2px solid var(--gray-200);
		border-top-color: var(--gray-900);
		border-radius: 50%;
		animation: oppadu-nav2-spin .7s linear infinite;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 40px;
		margin-top: 24px;
		padding: 0 16px;
		border: 1px solid var(--gray-300);
		border-radius: var(--radius-md);
		font-size: 14px;
		font-weight: 600;
		color: var(--gray-900);
		text-decoration: none;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__all:hover {
		border-color: var(--gray-900);
		color: var(--gray-900);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__all:focus-visible {
		outline: 2px solid var(--chrome-focus, var(--gray-900));
		outline-offset: 2px;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__all svg {
		flex: none;
		width: 16px;
		height: 16px;
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list a:focus-visible {
		outline: 2px solid var(--chrome-focus, var(--gray-900));
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}

	body.oppadu-nav2 .oppadu-nav2-panel__list svg {
		flex: none;
		width: 15px;
		height: 15px;
	}
}

@keyframes oppadu-nav2-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 움직임 줄이기 — 원은 멈추고 「찾고 있어요」 글자로만 알린다 */
@media (prefers-reduced-motion: reduce) {
	body.oppadu-nav2 .oppadu-nav2-panel__spin {
		animation: none;
		border-top-color: var(--gray-500);
	}
}

/* ── 휴대폰 틀(~1024) ── */
.oppadu-nav2-msearch {
	display: none;
}

@media (max-width: 1024px) {
	/* PC 돋보기·검색 창은 접는다 — 휴대폰은 휴대폰 틀 검색 화면을 쓴다. 휴대폰 틀이 켜지면 버튼은 이미 숨는다(mobile-chrome.css) */
	body.oppadu-nav2 .oppadu-nav2__sbtn,
	body.oppadu-nav2 .oppadu-nav2-panel {
		display: none;
	}

	body.oppadu-nav2.omc-on .oppadu-nav2__right {
		display: none;
	}

	body.oppadu-nav2:not(.omc-on) .oppadu-nav2__right {
		display: flex;
		align-items: center;
		gap: var(--nav-ctrl-gap);
	}

	body.oppadu-nav2-ms .oppadu-nav2-msearch {
		display: block;
		padding: 2px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
		background: var(--surface-white);
		border-bottom: 1px solid var(--gray-200);
	}

	body.oppadu-nav2-ms .oppadu-nav2-msearch__box,
	body.oppadu-nav2-ms .oppadu-nav2-msearch__box:hover,
	body.oppadu-nav2-ms .oppadu-nav2-msearch__box:focus {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		height: 44px;
		margin: 0;
		padding: 0 14px;
		border: 1px solid var(--gray-300);
		border-radius: var(--radius-md);
		background: var(--surface-white);
		color: color-mix(in srgb, var(--gray-400) 50%, var(--gray-500));
		font-size: 15px;
		font-weight: 400;
		line-height: 1;
		text-align: left;
		cursor: text;
		-webkit-tap-highlight-color: transparent;
	}

	body.oppadu-nav2-ms .oppadu-nav2-msearch__box svg {
		flex: none;
		width: 20px;
		height: 20px;
		color: var(--gray-900);
	}

	body.oppadu-nav2-ms .oppadu-nav2-msearch__box:focus-visible {
		outline: 2px solid var(--chrome-focus, var(--gray-900));
		outline-offset: 2px;
	}

	/* 검색 줄이 보이는 동안 — 머리글 아래 선은 검색 줄 밑으로, 돋보기 단추는 숨긴다.
	   검색 줄이 머리글 밑으로 지나가면(js/nav2.js 가 html.nav2-ms-gone) 둘 다 돌아온다. */
	body.oppadu-nav2-ms .oppadu-nav {
		border-bottom-color: transparent;
	}

	html.nav2-ms-gone body.oppadu-nav2-ms .oppadu-nav {
		border-bottom-color: var(--gray-200);
	}

	body.oppadu-nav2-ms .omc-search-btn {
		display: none;
	}

	html.nav2-ms-gone body.oppadu-nav2-ms .omc-search-btn {
		display: inline-flex;
	}
}