/* ─────────────────────────────────────────────────────────────────
   lang.css — KOR / ENG Language Toggle Pill
   Design: dark pill container, active tab = floral/ivory background
   ───────────────────────────────────────────────────────────────── */

/* ── Mount point ─────────────────────────────────────────────────
   #nav의 직속 자식으로 배치 — flex row 끝에 자동 배치되므로
   margin-left:auto 불필요 (justify-content:space-between이 처리)
   ─────────────────────────────────────────────────────────────── */
#langToggleMount {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* 햄버거 버튼 왼쪽으로 약간 간격 */
  margin-right: 4px;
}

/* Pill wrapper */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(17, 18, 13, 0.72);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  height: 36px;  /* nav-cta 동일 높이 */
  /* Subtle border so it reads on light backgrounds too */
  border: 1px solid rgba(17, 18, 13, 0.18);
  user-select: none;
}

/* Individual KOR / ENG buttons */
.lang-pill-btn {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  /* nav-cta height=36px 맞춤: outer pill 4px padding + btn 7px×2 = 18px → total ~36px */
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;

  /* Default (inactive) state */
  background: transparent;
  color: rgba(255, 251, 244, 0.45);
}

.lang-pill-btn:hover:not(.active) {
  color: rgba(255, 251, 244, 0.8);
}

/* Active state — ivory/floral pill highlight */
.lang-pill-btn.active {
  background: var(--floral, #FFFBF4);
  color: var(--smoky, #11120D);
  box-shadow: 0 1px 4px rgba(17, 18, 13, 0.18);
}

/* ── Dark nav variant (membership.html etc.) ──────────────────── */
/* When nav has data-theme="dark", the pill sits on a dark bg already.
   The container should be slightly lighter so it's visible */
[data-theme="dark"] .lang-toggle {
  background: rgba(255, 251, 244, 0.1);
  border-color: rgba(255, 251, 244, 0.12);
}

[data-theme="dark"] .lang-pill-btn.active {
  background: var(--floral, #FFFBF4);
  color: var(--smoky, #11120D);
}

/* ── Light nav variant — adjust container on scroll ────────────── */
#nav:not([data-theme="dark"]) .lang-toggle {
  background: rgba(17, 18, 13, 0.68);
  border-color: rgba(17, 18, 13, 0.12);
}

/* ── Responsive: hide text label on very small screens ─────────── */
@media (max-width: 360px) {
  .lang-pill-btn {
    padding: 5px 10px;
    font-size: 9px;
  }
}

/* 모바일에서 데스크톱 토글 숨김 (모바일 메뉴 내 토글 사용) */
@media (max-width: 640px) {
  #langToggleMount {
    display: none;
  }
}

/* ── Mobile menu variant — larger pill ─────────────────────────── */
.nav-mobile-lang {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}

.nav-mobile-lang .lang-toggle {
  background: rgba(17, 18, 13, 0.12);
  border-color: rgba(17, 18, 13, 0.1);
}

.nav-mobile-lang .lang-pill-btn {
  color: var(--olive, #565449);
  font-size: 11px;
  padding: 7px 18px;
}

.nav-mobile-lang .lang-pill-btn.active {
  background: var(--smoky, #11120D);
  color: var(--floral, #FFFBF4);
  box-shadow: none;
}

/* Dark nav mobile */
[data-theme="dark"] ~ #mobileMenu .nav-mobile-lang .lang-toggle,
.nav-mobile-menu[data-theme="dark"] .nav-mobile-lang .lang-toggle {
  background: rgba(255, 251, 244, 0.08);
  border-color: rgba(255, 251, 244, 0.1);
}

[data-theme="dark"] ~ #mobileMenu .nav-mobile-lang .lang-pill-btn,
.nav-mobile-menu[data-theme="dark"] .nav-mobile-lang .lang-pill-btn {
  color: rgba(255, 251, 244, 0.45);
}

[data-theme="dark"] ~ #mobileMenu .nav-mobile-lang .lang-pill-btn.active,
.nav-mobile-menu[data-theme="dark"] .nav-mobile-lang .lang-pill-btn.active {
  background: var(--floral, #FFFBF4);
  color: var(--smoky, #11120D);
}