/*
 * 사이트 다국어 — 머리 언어 단추 · 첫 방문 언어 제안 띠 (2026-10-02)
 *
 * 다국어가 켜진 요청에만 실린다(lib/i18n.inc bj_i18n_head_markup) — 전 언어 꺼짐이면 손님 화면에 링크조차 없다.
 * 외국어 화면만의 배치 손질(i18n-layout.css · 선택자가 모두 외국어로 묶인다)과 달리, 이 단추와 띠는 한국어 손님에게도 보이므로 따로 둔다.
 * 동작은 common/i18n-lang.js.
 */

@media (min-width: 768px) {
  /* 글자 칸은 아이콘을 숨기지만 언어 단추는 지구본을 둔다 — 한국어를 못 읽는 손님도 «언어»인 줄 알게. */
  .headerUtility .headerUtilityItem--text.headerUtilityItem--lang > .headerUtilityButton { gap: 6px; }
  .headerUtility .headerUtilityItem--text.headerUtilityItem--lang > .headerUtilityButton > .headerIcon { display: block; width: 18px; height: 18px; }
}
/* 열림 — 머리 팝오버 묶음(.headerUtilityPopoverHost)에 넣지 않아 그 규칙 대신 같은 모양을 여기서 준다(card/common_style.css.php 2117·2858). */
.headerUtility .headerUtilityItem--lang.is-open > .headerUtilityPopover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--header-utility-popover-offset-x, 0px)), 0);
}
@media (max-width: 768px) {
  .headerUtility .headerUtilityItem--lang.is-open > .headerUtilityPopover { transform: translateY(0); }
}
.headerUtility .bjLangMenu { width: 180px; }
.headerUtility .bjLangMenu .bjLangMenu__item { justify-content: space-between; gap: 8px; }
.headerUtility .bjLangMenu .bjLangMenu__item[aria-current="true"] { font-weight: 700; }
.headerUtility .bjLangMenu .bjLangMenu__note { color: var(--bj-muted, #6f6a66); font-size: 12px; font-weight: 500; }
/* (2026-10-04) 외국어 화면의 나라 돈 고르기 — 언어 목록 아래 제목 한 줄 + 통화 목록(길어지면 창 안에서 내린다) */
.headerUtility .bjLangMenu { max-height: min(70vh, 560px); overflow-y: auto; }
.headerUtility .bjLangMenu .bjLangMenu__group { display: block; padding: 12px 16px 4px; color: var(--bj-muted, #6f6a66); font-size: 12px; font-weight: 600; }
@media (max-width: 768px) {
  /* 폰 작은 머리·분류 머리·이벤트 머리 — 디자인 정본(COMP.HEADER): 하위 작업 화면은 뒤로·제목·장바구니·마이만. 언어는 바닥글·첫 방문 띠로 고른다. */
  #menu_r1.bojagiMobileCompactHeader .headerUtilityItem--lang,
  #menu_r1.bojagiMobileLandingHeader .headerUtilityItem--lang,
  #menu_r1.bojagiMobileCatalogHeader .headerUtilityItem--lang,
  #menu_r1.bojagiMobileEventHeader .headerUtilityItem--lang { display: none !important; }
}
@media (max-width: 359px) {
  /* 320px 폭은 로고와 검색 사이가 8px 뿐 — 지구본을 빼고 바닥글로 고른다. */
  #menu_r1 .headerUtilityItem--lang { display: none !important; }
}

/* 첫 방문 언어 제안 띠(common/i18n-lang.js) — «담아 둔 샘플» 띠(card/head-toppest-banner.php)와 같은 맨 위 40px 띠·색·단추·글 크기.
   글 크기는 글 칸·단추에 직접 준다 — 옛 css.css 의 «* { font-size: 12px }» 가 span 에 바로 걸려 상자의 14px 를 물려받지 못했다(샘플 띠 10-02 «코딱지»와 같은 수리). */
.bjLangHint { position: relative; z-index: 2; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; height: 40px; margin: 0; padding: 0 48px; background: linear-gradient(90deg, #c1a5dc, #9fa6fa); color: var(--bj-ink, #181817); font: 500 15px/1 var(--bj-font-family, 'Pretendard'); letter-spacing: -.01em; word-break: keep-all; }
.bjLangHint[hidden] { display: none; }
.bjLangHint .bjLangHint__text { min-width: 0; overflow: hidden; color: var(--bj-ink, #181817); font-size: 15px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.bjLangHint .bjLangHint__action { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--bj-charcoal, #1a1a18); color: var(--bj-paper, #fbfaf7); font-size: var(--bj-type-caption, 14px); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.bjLangHint .bjLangHint__close { position: absolute; top: 4px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: var(--bj-control-radius, 8px); background: transparent; opacity: .72; cursor: pointer; }
.bjLangHint .bjLangHint__close path { stroke: var(--bj-ink, #181817); }
.bjLangHint .bjLangHint__action:focus-visible, .bjLangHint .bjLangHint__close:focus-visible { outline: 2px solid var(--bj-ink, #181817); outline-offset: 2px; }
@media (max-width: 767px) {
  .bjLangHint { gap: 8px; padding: 0 44px 0 16px; justify-content: flex-start; }
  .bjLangHint .bjLangHint__close { right: 4px; }
}
@media (max-width: 389px) {   /* 375·360 폭 — 샘플 띠와 같은 한 단계 작게 */
  .bjLangHint .bjLangHint__text { font-size: 14px; }
  .bjLangHint .bjLangHint__action { padding: 0 12px; }
}
@media (min-width: 768px) {   /* 폰 사이트(/m/)를 넓은 창으로 열면 띠는 380 기둥 안 — 기둥 폭 = 좁은 폰과 같게(샘플 띠 .is-flow 와 같다) */
  .bjLangHint.is-flow { gap: 8px; padding: 0 44px 0 16px; justify-content: flex-start; }
  .bjLangHint.is-flow .bjLangHint__close { right: 4px; }
  .bjLangHint.is-flow .bjLangHint__text { font-size: 14px; }
  .bjLangHint.is-flow .bjLangHint__action { padding: 0 12px; }
}