/*
 * GNB 언어선택 드롭다운
 * 룩앤필은 템플릿 CSS({templateCd}.css)가 우선한다. 템플릿 CSS는 이 파일보다 뒤에 로드되므로
 * 아래 규칙은 템플릿에 .globalWrap 스타일이 없을 때만 적용되는 폴백이다.
 * 단, 열림/닫힘 제어는 동작에 필수라 속성 셀렉터로 특정성을 확보해 항상 이 파일이 잡는다.
 */
.globalWrap {
  position: relative;
}

.globalWrap .globalMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 100;
  min-width: 88px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.12);
}

.globalWrap .globalMenu a {
  display: block;
  padding: 8px 14px;
  color: #374151;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.globalWrap .globalMenu a:hover,
.globalWrap .globalMenu a:focus-visible {
  background: #f3f4f6;
}

.globalWrap .globalMenu a[aria-current="true"] {
  color: #111827;
  font-weight: 700;
}

[data-language-nav]:not(.is-open) .globalMenu {
  display: none;
}

[data-language-nav].is-open .globalMenu {
  display: block;
}

/*
 * 번역 대기 중인 텍스트 표시
 * CSS Custom Highlight API(::highlight())로 새 엘리먼트 생성 없이 텍스트 노드 범위에만 스타일을 입힌다.
 * 미지원 브라우저(Firefox 등)는 이 규칙이 그냥 무시되고, 로딩 표시 없이 번역 완료 시 조용히 교체된다.
 */
::highlight(lazy-translate-loading) {
  color: #9ca3af;
}