/**
 * 대상   : ktdi 테마 헤더 인증 영역 (_layout/_header.html 의 .gnb_info)
 * 변경   : 로그아웃 버튼을 링크(<a>)와 동일하게 보이도록 정규화 + 회원명 표시 여백
 * 이유   : 시안(inc/header.php)의 .gnb_info 는 <a> 3개(로그인·사이트맵·ENGLISH)만 전제한
 *          정적 마크업이다. 카이누리는 로그아웃이 CSRF 토큰을 실어야 해 <form><button> 이
 *          되므로, 시안 원본 CSS(common.css)를 수정하지 않고 여기서만 버튼을 링크처럼 보이게 한다.
 * 주의   : 시안 원본 css/*.css 는 절대 수정하지 않는다(디자이너 영역).
 */

/* 로그아웃 form 이 li 안에서 레이아웃을 깨지 않도록 */
.gnb_info .gnb_logout_form {
	display: inline;
	margin: 0;
	padding: 0;
}

/* 버튼을 주변 <a> 와 동일한 타이포로 — 색/폰트는 상속받아 스킨 변화(scrolled)에도 함께 반응 */
.gnb_info .gnb_logout_btn {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit; 
	color: inherit;
	line-height: inherit;
	cursor: pointer;
	color: #ffffffd0;
	line-height: 1;
	margin-top: 2px;
}

.gnb_info .gnb_logout_btn:hover,
.gnb_info .gnb_logout_btn:focus-visible {
	text-decoration: underline;
}

/* 접근성 — 키보드 포커스 가시성 확보(KWCAG 2.1.1 / 2.4.7).
   시안이 outline 을 제거한 경우가 있어 인증 영역만 명시적으로 복원한다. */
.gnb_info a:focus-visible,
.gnb_info .gnb_logout_btn:focus-visible,
.gnb_right .btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.header.scrolled .gnb_info .gnb_logout_btn {
  color: #111111d0;
}
/* ── 헤더 KO | EN 토글 (2026-09-29 발주처 #9 Google 번역) ─────────────────────
   대상 : _header.html .lang_toggle (lang-toggle.js 가 링크를 채운다)
   변경 : ENGLISH 링크 옆(검색 버튼 앞)에 작은 2칸 토글. 투명 헤더에선 흰색, 흰 배경 헤더에선 진한색.
          모바일에서도 보이게 .gnb_info(모바일 숨김) 밖에 두었다. */
.lang_toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ffffff70;
  border-radius: 999px;
  padding: 2px;
  margin-right: 0.4rem;
}
.lang_toggle .lang_btn {
  min-width: 2.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #ffffffd0;
}
.lang_toggle .lang_btn[aria-current="true"] { background: #fff; color: #111; }
.lang_toggle .lang_btn.is_disabled { opacity: 0.45; cursor: not-allowed; }
.header.scrolled .lang_toggle,
.header.gnb_open .lang_toggle,
.header.dark .lang_toggle { border-color: #d5d8de; }
.header.scrolled .lang_toggle .lang_btn,
.header.gnb_open .lang_toggle .lang_btn,
.header.dark .lang_toggle .lang_btn { color: #555; }
.header.scrolled .lang_toggle .lang_btn[aria-current="true"],
.header.gnb_open .lang_toggle .lang_btn[aria-current="true"],
.header.dark .lang_toggle .lang_btn[aria-current="true"] { background: var(--logo-color, #003592); color: #fff; }
.lang_toggle .lang_btn:focus-visible { outline: 2px solid var(--logo-color, #003592); outline-offset: 1px; }
/* Google 번역 위젯이 붙이는 요소 숨김 — 상단 번역 막대(iframe)·말풍선·위젯 상자. 토글은 헤더의 우리 버튼만 쓴다.
   막대가 body 를 top:40px 로 내려 헤더가 어긋나므로 되돌린다. (lang-toggle.js 가 EN 일 때만 위젯을 불러온다) */
#ktdi_gt_element,
.goog-te-banner-frame,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip { display: none !important; }
html.ktdi_lang_en body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ── 영어(Google 번역) 상태 헤더 보정 — 2026-09-30 ──────────────────────────
   대상 : html.ktdi_lang_en (lang-toggle.js 가 EN 일 때 붙인다) 의 헤더 GNB·우측 링크
   이유 : 영어 메뉴명이 한국어보다 2~3배 길어("Research and development", "Organization Introduction")
          대메뉴가 두 줄로 꺾이며 로고와 겹치고 "log in" 도 꺾였다. 한 줄 유지 + 글자·간격 축소.
          1200px 이하는 햄버거 메뉴라 대상 아님. */
html.ktdi_lang_en .header .logo { flex-shrink: 0; }
html.ktdi_lang_en .header .gnb { gap: 2rem; padding: 0 1.5rem; }
html.ktdi_lang_en .header .gnb_menu > a { font-size: 1.05rem; white-space: nowrap; }
html.ktdi_lang_en .gnb_info { gap: 0.9rem; margin-right: 0.4rem; }
html.ktdi_lang_en .gnb_info li a,
html.ktdi_lang_en .gnb_info .gnb_logout_btn { font-size: 0.85rem; white-space: nowrap; }
@media screen and (max-width: 1600px) {
  html.ktdi_lang_en .header { padding-left: 1.5rem; padding-right: 1.5rem; }
  html.ktdi_lang_en .header .gnb { gap: 1.3rem; padding: 0 1rem; }
  html.ktdi_lang_en .header .gnb_menu > a { font-size: 0.95rem; }
}
@media screen and (max-width: 1440px) {
  /* 좁은 PC — 우측 텍스트 링크(로그인·회원가입·사이트맵·ENGLISH)는 전체메뉴(≡)에도 있어 영어 상태에서만 접는다 */
  html.ktdi_lang_en .gnb_info { display: none; }
}


/* ------------------------------------------------------------------
 * 언어 선택 드롭다운 (.gnb_lang) — 2026-09-30
 * 대상 : _layout/_header.html .gnb_info 의 마지막 li (ENGLISH 단일 링크를 대체)
 * 색   : 버튼은 옆 링크(로그인·사이트맵)와 같은 규칙 — 기본 흰색, 스크롤·호버·메인(.dark)에선 검정.
 *        펼친 목록은 항상 흰 바탕 + 검정 글자.
 * 🔴 시안의 `.gnb_info li a`·`.gnb_info li::before` 가 목록 안 li 에도 걸린다(자손 선택자).
 *    그래서 목록 쪽은 `.header .gnb_info .gnb_lang_list li a` 처럼 특이도를 한 단계 올려 덮는다.
 * ------------------------------------------------------------------ */
.gnb_lang_btn {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: #ffffffd0;
	cursor: pointer;
}
.gnb_lang_btn .material-symbols-outlined { font-size: 1.15em; }
.gnb_lang_btn .gnb_lang_arrow { transition: transform 0.2s ease; }
.gnb_lang_btn[aria-expanded="true"] .gnb_lang_arrow { transform: rotate(180deg); }
.gnb_lang_btn:hover .gnb_lang_cur,
.gnb_lang_btn:focus-visible .gnb_lang_cur { text-decoration: underline; }
.gnb_lang_btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.header.scrolled .gnb_lang_btn,
.header.gnb_open .gnb_lang_btn,
.header.dark .gnb_lang_btn { color: #111111d0; }

/* 펼친 목록 */
.header .gnb_info .gnb_lang_list {
	position: absolute;
	top: calc(100% + 0.8rem);
	right: 0;
	min-width: 8.5rem;
	padding: 0.4rem 0;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	z-index: 10;
}
.header .gnb_info .gnb_lang_list[hidden] { display: none; }
.header .gnb_info .gnb_lang_list li::before { display: none; }
.header .gnb_info .gnb_lang_list li a {
	display: block;
	padding: 0.55rem 1rem;
	color: #222;
	white-space: nowrap;
}
.header .gnb_info .gnb_lang_list li a:hover,
.header .gnb_info .gnb_lang_list li a:focus-visible {
	background: #f0f1f4;
	color: var(--main-color);
	outline: none;
}
.header .gnb_info .gnb_lang_list li a[aria-current="true"] {
	color: var(--main-color);
	font-weight: 600;
}

/* ── 모바일 전체메뉴 언어 선택 (.sitemap_lang) — 2026-09-30 ───────
   ≤1100px 은 헤더 .gnb_info 가 숨으므로 전체메뉴 상단(제목 ↔ 닫기 사이)에 KOR | ENG 로 낸다.
   PC 에선 헤더 드롭다운이 있으니 숨긴다. */
.sitemap_lang { display: none; }
@media screen and (max-width: 1100px) {
	.sitemap_lang {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		margin-left: auto;
		margin-right: 1.2rem;
		color: #555;
	}
	.sitemap_lang .material-symbols-outlined {font-size: 1.3rem;margin-top: 3px;}
	.sitemap_lang ul { display: flex; align-items: center; gap: 0.9rem; }
	.sitemap_lang li { position: relative; }
	.sitemap_lang li + li::before {
		content: "";
		position: absolute;
		left: -0.45rem;
		top: 50%;
		width: 1px;
		height: 12px;
		background: #00000038;
		transform: translateY(-50%);
	}
	.sitemap_lang a { font-size: 1rem; font-weight: 500; color: #555; }
	.sitemap_lang a[aria-current="true"] { color: var(--main-color); font-weight: 700; }
	.sitemap_lang a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}