/* 언어 스위처 — 헤더 셀 바의 마지막 내비 셀(2026-09-09 · 디스클로저 전환 2026-10-13).
   마크업은 손으로 쓰지 않는다: partials/<lang>/header.html 의 <!-- partial:langswitch --> 마커를
   scripts/sync-partials.mjs 의 buildLangSwitch() 가 페이지마다 채운다(href 가 페이지별로 다르다).
   규약·판단 근거는 CLAUDE.md 「다국어 규약」의 「언어 스위처」.

   구조: nav.c-langswitch > details.c-langswitch__disclosure > summary.c-langswitch__toggle
         + ul.c-langswitch__menu > li > (a | span[aria-current]).c-langswitch__option

   설계 제약:
     · 자바스크립트 없이 열리고 목록의 <a> 로 이동할 수 있어야 한다(<details> 네이티브 동작).
       크롤러도 같은 <a> 로 hreflang 클러스터를 발견한다. 닫힌 <details> 의 내용은 렌더되지
       않지만 DOM 에는 그대로 있다.
     · 바에는 토글 하나만 둔다 — 언어가 6개가 되면 가로 나열은 390px 모바일 바에 들어가지 않는다.
     · 패널은 다크 무대(시네마틱 홈)에서도 흰 카드다 — 모바일 GNB 시트와 같은 판단. 그래서
       항목 클래스는 cinematic.css 의 반전 규칙(.site-header .c-langswitch__item)이 닿지 않는
       c-langswitch__option 이고, 토글만 c-langswitch__item 을 겸해 반전을 받는다.
     · 방향은 논리 속성으로만 쓴다 — 아랍어(dir="rtl") 페이지에서 패널이 바깥 가장자리 쪽으로
       자동으로 뒤집혀 펼쳐진다. */

.c-langswitch {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.c-langswitch__disclosure {
  display: flex;
  align-self: stretch;
  align-items: center;
}

/* ---------- 토글 ---------- */

.c-langswitch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* 44px 터치 타깃 */
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none; /* 기본 삼각형 마커 제거(Firefox·Chromium) */
  user-select: none;
  transition: color 0.15s ease-out, background-color 0.15s ease-out;
}

.c-langswitch__toggle::-webkit-details-marker {
  display: none; /* Safari */
}

/* 배경은 글자색에서 섞는다 — 라이트 헤더에서는 옅은 잉크, 다크 헤더(cinematic.css 가 글자를 밝게
   반전)에서는 옅은 흰 틴트가 되어 한 규칙이 양쪽 무대를 맞춘다. 열림 상태는 :where() 로 특이도를
   낮춰 cinematic.css 의 글자색 반전(.site-header .c-langswitch__item)을 이기지 않게 한다. */
.c-langswitch__toggle:hover,
:where(.c-langswitch__disclosure[open]) > .c-langswitch__toggle {
  color: var(--color-text);
  background: color-mix(in srgb, currentColor 9%, transparent);
}

.c-langswitch__globe {
  flex: none;
}

/* 펼침 표시 — 아래 화살촉. 열리면 뒤집힌다. */
.c-langswitch__toggle::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  margin-block-start: -0.1875rem;
  /* 아래를 가리키는 도형이라 방향과 무관하다 — 물리 속성을 쓴다(rtl 에서 뒤집히면 옆을 가리킨다) */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease-out;
}

.c-langswitch__disclosure[open] > .c-langswitch__toggle::after {
  margin-block-start: 0.1875rem;
  transform: rotate(-135deg);
}

/* ---------- 패널 ---------- */

.c-langswitch__menu {
  position: absolute;
  z-index: 10;
  top: 100%;
  inset-inline-end: 0;
  min-width: 13rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.c-langswitch__disclosure[open] > .c-langswitch__menu {
  animation: c-langswitch-in 0.16s ease-out;
}

/* 위치만 움직이고 불투명도는 건드리지 않는다 — 애니메이션 타임라인이 멈추는 환경(백그라운드 탭·
   rAF 기아)에서 opacity 0 으로 굳으면 "보이지 않는데 눌리는" 패널이 된다(2026-10-13 실측). */
@keyframes c-langswitch-in {
  from {
    transform: translateY(-4px);
  }
}

.c-langswitch__option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-4);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.15s ease-out;
}

a.c-langswitch__option:hover {
  background: var(--color-surface);
}

.c-langswitch__name {
  font-weight: 600;
  /* dir="rtl" 인 이름(العربية)도 LTR 목록 안에서 다른 이름과 같은 시작선에 선다 */
  text-align: start;
  justify-self: start;
}

.c-langswitch__code {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* 홈 폴백 보조 문구 — 이 언어에 이 페이지의 번역이 없어 그 언어 홈으로 간다는 표시. */
.c-langswitch__note {
  grid-column: 1 / -1;
  justify-self: start;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* 현재 언어 — 링크가 아니므로 hover 가 없다. 틴트 + 왼쪽 막대로 구분한다. */
.c-langswitch__option.is-current {
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary-deep);
  cursor: default;
}

[dir='rtl'] .c-langswitch__option.is-current {
  box-shadow: inset -3px 0 0 var(--color-primary-deep);
}

.c-langswitch__option.is-current .c-langswitch__name {
  font-weight: 700;
}

/* ---------- 배치 ---------- */

/* 데스크톱 셀 바: 시작 쪽 헤어라인으로 CTA 셀과 나란한 "셀"이 된다. 패널은 셀 바 아래(헤더 밑선)에
   붙고 끝 쪽 가장자리에 맞춘다 — 스위처가 바의 끝 쪽에 있으므로 화면 밖으로 나가지 않는다. */
@media (min-width: 1024px) {
  .c-langswitch {
    align-self: stretch;
    padding-inline: var(--space-2);
    border-inline-start: 1px solid var(--color-border);
  }

  .c-langswitch__menu {
    inset-inline-end: var(--space-2);
  }
}

/* 모바일 바 순서: 로고(0) → 언어(1) → CTA(2, 시작 쪽 auto 마진) → 햄버거(3).
   CTA 의 auto 마진이 언어 스위처 바로 뒤에서 걸리므로 스위처는 로고에 붙는다.
   스위처가 바의 시작 쪽에 있으므로 패널은 시작 쪽 가장자리에 맞춰 펼친다. */
@media (max-width: 1023px) {
  .c-langswitch {
    order: 1;
    margin-inline-start: var(--space-1);
  }

  /* 바가 빡빡하다 — 토글 안쪽 여백·간격을 줄여 CTA 셀에 폭을 넘긴다(72 → 62px).
     ja 「お問い合わせ」 CTA 가 2줄로 접히던 것을 이걸로 1줄에 넣었다(390px 실측, 2026-10-13). */
  .c-langswitch__toggle {
    gap: var(--space-1);
    padding-inline: 0.375rem;
  }

  .c-langswitch__menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
    /* .c-langswitch 는 모바일 바에서도 바 높이로 늘어나므로(실측 71px) 100% 가 곧 헤더 밑선이다.
       예전 식 calc(100% + (header − 44px)/2) 는 그 높이를 토글 높이(44px)로 가정해 패널이 밑선보다
       13px 아래에 떠서 그 틈으로 본문이 보였다(2026-10-14 실측 top 85 vs 밑선 72). 데스크톱과 같은 값. */
    top: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-langswitch__disclosure[open] > .c-langswitch__menu {
    animation: none;
  }

  .c-langswitch__toggle,
  .c-langswitch__toggle::after {
    transition: none;
  }
}

/* 다크 무대(시네마틱 홈)의 토글 반전은 css/pages/cinematic.css 가 맡는다(.site-header .c-langswitch__item) —
   그 파일이 홈에서만 링크되므로 페이지 스코프가 자연히 잡힌다(<body> 에 페이지 클래스가 없다).
   패널은 반전하지 않는다(흰 카드). */