/* =============================================================
   lang-switcher.css — 言語スイッチャー
   -------------------------------------------------------------
   ★ ちらつき防止の約束（既存の設計思想に合わせる）
     ・要素は必ずHTMLに直接書く。JSで後から差し込まない。
       （後から増やすとヘッダーの横幅が変わり、ガタッと動く）
     ・開閉は display を JS から触らず、クラスで切り替える。
     ・ボタン幅は min-width で固定する。
       「日本語」と「Español」で文字数が違うため、固定しないと
       言語を選ぶたびにヘッダーが横に動いてしまう。
   ============================================================= */

/* ===== ロゴとメニューの間に、最低限の余白を確保 ===== */
/* nav は space-between なので、項目が増えるとロゴに詰め寄ってくる。
   ロゴがメニューにくっついて見えないよう、必ず隙間を空ける。 */
nav > .logo { margin-right: 1.3rem; }

/* ===== PCヘッダーの言語ボタン（地球儀 ＋ 言語コード） ===== */
/* 既存の 👁（見やすさ設定）や 🔔（お知らせ）と同じ高さ・同じ線の太さに揃え、
   横だけ伸ばした丸型にする。丸が3つ並んだときに「どれが言語か」が
   一目で分かり、いま何語で見ているかも同時に伝わる。

   ★ 言語コードは ::after で出している。
     <button> の中に文字として書くと、nav-drawer.js が
     textContent を項目名に使うため、スマホのメニューに
     「JA」とだけ表示されてしまう。CSSで出せば textContent は空のままで、
     ドロワーは title（言語 / Language）を拾ってくれる。 */
.nav-lang-btn {
    background: none;
    border: 1.5px solid var(--color-border, #e7e2da);
    height: 32px;
    padding: 0 0.5rem 0 0.52rem;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.26rem;
    color: var(--color-text-muted, #8a847a);
    transition: all 0.25s;
    flex-shrink: 0;
}
.nav-lang-btn:hover,
.nav-lang.is-open .nav-lang-btn {
    border-color: var(--color-primary, #5f9e9f);
    color: var(--color-primary, #5f9e9f);
    background: var(--color-primary-bg, #eef5f4);
}
.nav-lang-globe { width: 15px; height: 15px; flex-shrink: 0; }

/* 言語コード（JA / EN / 繁 / 简 / ES）
   ★ 幅を固定するのが要。固定しないと、言語を切り替えるたびに
     ボタンの幅が変わり、右のアイコンごとヘッダーが横に動く。 */
.nav-lang-btn::after {
    content: attr(data-lang-code);
    font-family: var(--font-en, 'Inter', sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    width: 1.75em;
    text-align: center;
    flex-shrink: 0;
}

/* ===== ドロップダウン ===== */
/* 開く仕組みは既存の .nav-dropdown に相乗り。
   クリックでも開けるよう .is-open を足す（キーボード操作にも効く）。 */
.nav-lang.is-open > .nav-dropdown-menu { display: block; }

/* ★ 右端に置いたので、メニューは右寄せにする。
   既存の .nav-dropdown-menu は中央寄せ(left:50% + translateX(-50%))だが、
   そのままだと画面の外にはみ出す。 */
.nav-lang > .nav-dropdown-menu {
    min-width: 172px;
    padding: 0.35rem 0;
    left: auto;
    right: -6px;
    transform: none;
    animation: navLangIn 0.18s ease-out;
}
@keyframes navLangIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-lang > .nav-dropdown-menu a {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.52rem 0.95rem !important;
    font-size: 0.84rem !important;
}

/* 選択中の言語に控えめなチェック。位置ずれを防ぐため、
   チェックの枠は常に確保しておく（付いたり消えたりで幅が動かない）。 */
.nav-lang .lang-check {
    width: 0.95em;
    flex-shrink: 0;
    text-align: center;
    color: var(--color-primary, #5f9e9f);
    font-weight: 700;
    opacity: 0;
}
.nav-lang [data-lang].is-active .lang-check { opacity: 1; }
.nav-lang [data-lang].is-active {
    color: var(--color-primary-dark, #4a7e7f) !important;
    font-weight: 600;
}

/* まだ用意できていない言語は、あることだけ伝えて控えめに */
.nav-lang [data-lang].is-soon { opacity: 0.45; cursor: default; }
.nav-lang [data-lang].is-soon:hover { background: none !important; }
.nav-lang .lang-soon-tag {
    margin-left: auto;
    font-size: 0.62rem;
    color: var(--color-text-muted, #8a847a);
    letter-spacing: 0.04em;
}

/* ===== フッターの言語一覧 ===== */
/* フッターは横幅に余裕があるので、全言語を並べて一目で分かるようにする */
.footer-lang {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem 0.1rem;
    margin-bottom: 0.7rem;
    line-height: 1.9;
}
.footer-lang a {
    font-size: 0.76rem;
    padding: 0.1rem 0.62rem;
    color: var(--color-text-muted, #8a847a);
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.footer-lang a:hover { color: var(--color-primary-dark, #4a7e7f); background: rgba(255,255,255,0.07); }
.footer-lang a.is-active { color: var(--color-primary-light, #a8cfd0); font-weight: 600; }
.footer-lang a.is-soon { opacity: 0.4; cursor: default; }
.footer-lang a.is-soon:hover { background: none; color: var(--color-text-muted, #8a847a); }
.footer-lang .footer-lang-sep { color: rgba(255,255,255,0.16); font-size: 0.7rem; }

/* ===== フッターの法務リンク（第51新設） =====
   ★ 言語一覧の「下の段」として置く。
     細い区切り線で一段落とすことで、
       上＝言語の切り替え（機能）
       下＝法務・権利表示（読み物）
     という役割の違いが、読まなくても分かるようにする。
   ★ リンクは ©️ より明るく、©️ は小さく落とす。
     同じ濃さだと、押せるものと押せないものが見分けられない。
     （最初に灰色でそろえたところ、フッターの中で見落とされた） */
.footer-legal {
    max-width: 420px;
    margin: 0 auto 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 1.35rem;
    line-height: 1.9;
}
.footer-legal a {
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #c5beb2;
    text-decoration: none;
    padding: 0.15rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.footer-legal a:hover {
    color: var(--color-primary-light, #a8cfd0);
    border-bottom-color: rgba(168, 207, 208, 0.5);
}
/* 区切りの中黒は使わない（余白で分ける）。
   HTMLに残っていても見えないようにしておく。 */
.footer-legal .footer-lang-sep { display: none; }

/* ©️ は一段小さく、控えめに。 */
.footer-bottom > p:last-child,
.fb > p:last-child {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    opacity: 0.9;
}

/* 狭い画面では2行に折り返す。詰めすぎないよう縦の隙間を確保する。 */
@media (max-width: 480px) {
    .footer-legal { gap: 0.5rem 1rem; max-width: 320px; }
    .footer-legal a { font-size: 0.74rem; }
}

/* ===== スマホ：下から出るシート ===== */
/* ドロワー（ハンバーガーメニュー）から開いたときに使う。
   ドロワーと同じ世界観（右から/下からふわっと）に揃える。 */
.lang-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(38, 34, 30, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 100020;
}
.lang-sheet-backdrop.is-open { opacity: 1; visibility: visible; }

.lang-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--color-bg-white, #fbf9f6);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(38, 34, 30, 0.18);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.22,.61,.36,1);
    z-index: 100021;
    padding: 0.7rem 0 max(1.1rem, env(safe-area-inset-bottom));
    font-family: var(--font-body, 'Zen Maru Gothic', sans-serif);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.lang-sheet.is-open { transform: translateY(0); }

/* つまんで下げられそうに見せる、細いつまみ */
.lang-sheet-grip {
    width: 38px; height: 4px;
    background: var(--color-border, #e7e2da);
    border-radius: 2px;
    margin: 0.15rem auto 0.9rem;
}
.lang-sheet-title {
    font-family: var(--font-display, 'Kaisei Opti', serif);
    font-size: 0.92rem;
    color: var(--color-primary-dark, #4a7e7f);
    padding: 0 1.4rem 0.7rem;
    margin: 0;
    border-bottom: 1px solid var(--color-border-light, #e7e2da);
}
.lang-sheet-list { padding: 0.5rem 0.9rem 0; }
.lang-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem 0.9rem;
    border: none;
    background: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text, #3d3832);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.18s ease;
}
.lang-sheet-item:active { transform: scale(0.985); }
.lang-sheet-item.is-active {
    background: var(--color-primary-bg, #eef5f4);
    color: var(--color-primary-dark, #4a7e7f);
    font-weight: 700;
}
.lang-sheet-item.is-soon { opacity: 0.42; cursor: default; }
.lang-sheet-item .lang-sheet-native { flex: 1; min-width: 0; }
.lang-sheet-item .lang-sheet-sub {
    font-size: 0.68rem;
    color: var(--color-text-muted, #8a847a);
    font-weight: 400;
    margin-left: 0.1rem;
}
.lang-sheet-item .lang-sheet-tick { color: var(--color-primary, #5f9e9f); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .lang-sheet, .lang-sheet-backdrop, .nav-lang > .nav-dropdown-menu { transition: none !important; animation: none !important; }
}