/* ═══════════════════════════════════════════════
   i18n.css — Language switcher styles (v2)
   日本語(ja) / English(en) の切り替えUI
═══════════════════════════════════════════════ */

/* ── Switcher button in header ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  border: 0.5px solid rgba(248,246,242,0.3);
  transition: border-color 0.3s;
  flex-shrink: 0;
}
#site-header.scrolled .lang-switcher {
  border-color: var(--kinucha);
}

.lang-btn {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.7rem;
  color: rgba(248,246,242,0.5);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
  font-family: var(--ff-sans-jp);
}
#site-header.scrolled .lang-btn { color: var(--nenokuchi); }
.lang-btn.active { color: var(--washi); background: rgba(248,246,242,0.15); }
#site-header.scrolled .lang-btn.active { color: var(--lila-deep); background: var(--lila-pale); }

.lang-sep {
  width: 0.5px;
  height: 1rem;
  background: rgba(248,246,242,0.2);
  flex-shrink: 0;
}
#site-header.scrolled .lang-sep { background: var(--kinucha); }

/* ══════════════════════════════════════════
   Translation visibility — CORE RULES
   
   優先度の問題を避けるため、
   「ja表示」と「en表示」をそれぞれ
   !important なしで詳細度を統一して管理する。
   
   原則:
     data-ja="block"  → 日本語ブロック要素
     data-ja="inline" → 日本語インライン要素
     data-en="block"  → 英語ブロック要素
     data-en="inline" → 英語インライン要素
══════════════════════════════════════════ */

/* ── デフォルト: 日本語表示 / 英語非表示 ── */
[data-en="block"]  { display: none; }
[data-en="inline"] { display: none; }
[data-en="flex"]   { display: none; }

[data-ja="block"]  { display: block; }
[data-ja="inline"] { display: inline; }
[data-ja="flex"]   { display: flex; }

/* ── html[lang="en"] 時: 英語表示 / 日本語非表示 ── */
html[lang="en"] [data-ja="block"]  { display: none; }
html[lang="en"] [data-ja="inline"] { display: none; }
html[lang="en"] [data-ja="flex"]   { display: none; }

html[lang="en"] [data-en="block"]  { display: block; }
html[lang="en"] [data-en="inline"] { display: inline; }
html[lang="en"] [data-en="flex"]   { display: flex; }

/* ── 言語切替フェード ── */
.lang-fade { transition: opacity 0.25s ease; }
html.lang-switching .lang-fade { opacity: 0; }

/* ── Mobile menu lang switcher ── */
.mobile-lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0.5px solid rgba(248,246,242,0.2);
  margin-top: 2.5rem;
}
.mobile-lang-btn {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  padding: 0.5rem 1.2rem;
  color: rgba(248,246,242,0.45);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: var(--ff-sans-jp);
  transition: color 0.2s, background 0.2s;
}
.mobile-lang-btn.active {
  color: var(--lila-pale);
  background: rgba(155,132,176,0.15);
}