@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/* =====================================================================
 * NanTetu Server — シンプルテーマ
 * ・背景の模様や彩虹色のバー、グロー、ハードシャドウなどの装飾は使いません
 * ・レイアウト・画像・配色はそのまま維持します
 * ===================================================================== */
:root {
  color-scheme: dark;
  --ink: #0f1116;
  --ink-2: #161922;
  --paper: #f2e8d5;
  --teal: #2dd4bf;
  --teal-deep: #0f766e;
  --coral: #fb7185;
  --mustard: #f5c451;
  --line: rgba(242, 232, 213, .24);
  --line-strong: rgba(242, 232, 213, .45);
  --text-dim: #b9b3a6;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  min-height: 100vh;
  font-family: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, sans-serif;
}

::selection { background: rgba(245, 196, 81, .35); color: #fff; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--mustard);
  outline-offset: 3px;
}

/* スクロールバー */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0d12; }
::-webkit-scrollbar-thumb {
  background: #2a2f3a;
  border: 2px solid #0b0d12;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #3a4150; }

/* ---------------- ヘッダー ---------------- */
#site-header {
  background-color: rgba(15, 17, 22, .9);
}
#site-header img {
  border: 1.5px solid var(--line-strong);
}

/* ---------------- ナビゲーション ---------------- */
.nav-link {
  color: var(--text-dim);
  transition: color .2s ease;
  font-weight: 500;
}
.nav-link:hover { color: var(--mustard); }
.nav-link.active { color: var(--paper); }

/* ---------------- アクセントカラーの統一 ---------------- */
#site-header .text-emerald-300,
main .text-emerald-300,
main .text-emerald-200 { color: #5eead4; }
main .text-emerald-400 { color: var(--teal); }
main a.text-emerald-300:hover,
main a.text-emerald-200:hover { color: #ccfbf1; }

/* 緑・アンバー系のユーティリティをテーマ色へ寄せる */
main .bg-emerald-400\/10,
main .bg-emerald-400\/15,
main .bg-emerald-400\/20,
main .bg-emerald-400\/5 { background-color: rgba(45, 212, 191, .12); }
main .bg-emerald-500\/10 { background-color: rgba(45, 212, 191, .08); }
main .border-emerald-400\/20,
main .border-emerald-500\/30 { border-color: rgba(45, 212, 191, .3); }
main .border-amber-400\/20 { border-color: rgba(245, 196, 81, .3); }
main .bg-amber-400\/5 { background-color: rgba(245, 196, 81, .07); }
main .text-amber-200 { color: var(--mustard); }

/* ---------------- ページ見出しブロック ---------------- */
main > div.mb-10,
main > div.mb-8 {
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(242, 232, 213, .18);
}
main > div.mb-10 p.text-emerald-300:first-of-type,
main > div.mb-8 p.text-emerald-300:first-of-type {
  color: #fda4af;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---------------- 見出し ---------------- */
main h1, .hero-title, main h2 {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-weight: 900;
  letter-spacing: .03em;
}

/* 利用規約など「01」の番号バッジ */
main section h2 > span:first-child {
  display: inline-grid;
  place-items: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .35rem;
  margin-right: .85rem;
  vertical-align: middle;
  border: 1.5px solid rgba(242, 232, 213, .28);
  border-radius: .35rem;
  background: rgba(245, 196, 81, .12);
  color: var(--mustard);
  font-family: inherit;
  font-weight: 900;
  font-size: .9rem;
  line-height: 1;
}

/* ---------------- ヒーロー ---------------- */
.hero-panel {
  border-width: 1.5px;
  border-color: var(--line-strong) !important;
}
/* 画像の上でも文字が読めるようにするための暗幕 */
.hero-shade {
  background-color: rgba(11, 13, 18, .78);
}
.hero-title { letter-spacing: -.055em; }

/* ---------------- カード・パネル ---------------- */
.glass, .liquid-glass {
  background-color: rgba(20, 23, 31, .82);
  border: 1.5px solid var(--line-strong) !important;
  backdrop-filter: blur(10px);
}

/* 既存の薄い境界線も少し見えるようにする（カード・入力欄などは除く） */
main .border-zinc-800:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
main .border-zinc-800\/80:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
main .border-zinc-800\/50:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel) {
  border-color: rgba(242, 232, 213, .22) !important;
}
/* 全周の枠線を使っている要素だけ 1.5px に揃える
   （border-t / border-b などの区切り線は 1px のままにする） */
main .border.border-zinc-800:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
main .border.border-zinc-800\/80:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
main .border.border-zinc-800\/50:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel) {
  border-width: 1.5px !important;
}

/* 画像の縁取り */
#news-list img,
main > section.grid > article img,
#lightbox-image {
  border: 1.5px solid var(--line-strong);
}

/* ---- お知らせカード（news.html の動的カード） ---- */
#news-list > a {
  position: relative;
  background-color: rgba(20, 23, 31, .84) !important;
  border: 1.5px solid var(--line-strong) !important;
  transition: border-color .2s ease, background-color .2s ease;
}
#news-list > a:hover {
  border-color: rgba(45, 212, 191, .4) !important;
  background-color: rgba(26, 30, 41, .92) !important;
}
#news-list > a h2 { transition: color .2s ease; }
#news-list > a:hover h2 { color: var(--mustard); }
#news-list > a .mt-auto.text-emerald-300 { color: var(--mustard); }

/* ---- トップの3枚カード ---- */
main > section.grid > article {
  border: 1.5px solid var(--line-strong) !important;
}

/* ---------------- ボタン ---------------- */
.btn-primary {
  background: var(--mustard);
  color: #15171d;
  border: 1.5px solid rgba(15, 17, 22, .55);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary, .liquid-btn-secondary {
  border: 1.5px solid rgba(242, 232, 213, .42);
  background: rgba(18, 21, 28, .9);
}
.btn-secondary:hover, .liquid-btn-secondary:hover {
  border-color: var(--teal);
  background: rgba(45, 212, 191, .1);
}
#chat-submit {
  background: var(--teal);
  border: 1.5px solid rgba(242, 232, 213, .5);
  transition: background .2s;
}
#chat-submit:hover { background: #5eead4; }
#chat-submit:disabled { opacity: .6; }

/* ---------------- フォーム ---------------- */
input, textarea, select { color-scheme: dark; }
.form-control {
  display: block;
  width: 100%;
  border: 1.5px solid rgba(242, 232, 213, .34) !important;
  background: rgba(10, 12, 17, .72);
  border-radius: .45rem;
  padding: .8rem 1rem;
  outline: none;
  transition: border-color .2s;
}
.form-control::placeholder { color: #7d786c; }
.form-control:focus { border-color: var(--teal) !important; }

/* ---------------- フッター ---------------- */
#site-footer {
  background-color: rgba(9, 11, 15, .72);
}
#site-footer p.text-xs.font-semibold.uppercase {
  color: var(--mustard);
  letter-spacing: .2em;
}
#site-footer a { transition: color .2s ease; }
#site-footer a:hover { color: var(--paper); }

/* フッター下部の大きなロゴタイプ（横幅いっぱいに自動調整） */
.footer-wordmark-wrap {
  overflow: hidden;
  text-align: center;
  line-height: .8;
}
.footer-wordmark {
  display: inline-block;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .8;
  white-space: nowrap;
  color: rgba(242, 232, 213, .2);
  user-select: none;
}

/* =====================================================================
 * 管理者モード
 * html.is-admin のときだけ、管理者専用のUIを表示します。
 * ===================================================================== */
.admin-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(45, 212, 191, .45);
  border-radius: 9999px;
  padding: .1rem .4rem;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  color: #5eead4;
  background-color: rgba(45, 212, 191, .12);
  white-space: nowrap;
}

.admin-only { display: none !important; }
html.is-admin .admin-only { display: inline-flex !important; }

.admin-action {
  align-items: center;
  gap: .25rem;
  border: 1px solid rgba(251, 113, 133, .35);
  border-radius: .5rem;
  padding: .15rem .45rem;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  color: #fda4af;
  background-color: rgba(251, 113, 133, .08);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.admin-action:hover {
  border-color: rgba(251, 113, 133, .6);
  color: #fecdd3;
  background-color: rgba(251, 113, 133, .16);
}

:root[data-theme="light"] .admin-badge {
  border-color: rgba(13, 148, 136, .45);
  color: #0f766e;
  background-color: rgba(13, 148, 136, .1);
}
:root[data-theme="light"] .admin-action {
  border-color: rgba(190, 18, 60, .3);
  color: #be123c;
  background-color: rgba(190, 18, 60, .06);
}
:root[data-theme="light"] .admin-action:hover {
  border-color: rgba(190, 18, 60, .5);
  color: #9f1239;
  background-color: rgba(190, 18, 60, .12);
}

/* ---------------- チャットページ ---------------- */
#chat-messages > div > div:first-child {
  border-radius: .4rem;
  border: 1.5px solid rgba(242, 232, 213, .4);
  background: rgba(45, 212, 191, .12);
  color: #99f6e4;
}
#chat-messages .font-mono {
  border: 1.5px solid rgba(245, 196, 81, .4);
  background: rgba(245, 196, 81, .08);
  color: #fcd34d;
  letter-spacing: .06em;
}
#chat-messages p.whitespace-pre-wrap { color: #ded7c8; }
#chat-messages div[class*="max-w-[520px]"] {
  background: rgba(23, 26, 35, .92);
  border-width: 1.5px;
  border-color: var(--line-strong);
  border-radius: .45rem;
}

/* ---------------- 404 ページ ---------------- */
.notfound > div:first-child {
  color: #fda4af;
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .3em;
}
.notfound h1::after,
main section.text-center h1::after { margin-inline: auto; }

/* ---------------- モバイル調整 ---------------- */
@media (max-width: 640px) {
  #site-header .page-shell { gap: .5rem; }
  #auth-container button { padding: .45rem .6rem; font-size: .75rem; }
  #site-header a[href="index.html"] > span > span:first-child { font-size: .9rem; }
}
@media (max-width: 1023px) {
  #mobile-menu { box-shadow: none; }
  #mobile-menu .nav-link {
    padding: .6rem .2rem;
    border-bottom: 1px solid rgba(242, 232, 213, .08);
  }
  #mobile-menu .nav-link.active { color: var(--mustard); }
}
@media (max-width: 420px) {
  #site-header a[href="index.html"] > span { display: none; }
}

/* ---------------- 小物 ---------------- */
.page-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.status-dot {
  width: .55rem;
  height: .55rem;
  display: inline-block;
  border-radius: 999px;
}
.status-dot.online { background: var(--teal); }
.status-dot.offline { background: var(--coral); }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .2s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
 * ライトモード（ヘッダーのボタンで手動切り替え／未選択時はOS設定に追従）
 * html[data-theme="light"] のときだけ適用されます。
 * ===================================================================== */

  :root[data-theme="light"]{
    color-scheme: light;
    --ink: #f4f1ea;
    --ink-2: #ece7dc;
    --paper: #15171d;
    --text-dim: #5a6070;
    --line: rgba(20, 22, 27, .14);
    --line-strong: rgba(20, 22, 27, .32);
  }

  :root[data-theme="light"] body { background-color: var(--ink) !important; }
  :root[data-theme="light"] body.text-zinc-100 { color: #1c2029; }
  :root[data-theme="light"] ::selection { background: rgba(245, 196, 81, .5); color: #111827; }
  :root[data-theme="light"] a:focus-visible, :root[data-theme="light"] button:focus-visible, :root[data-theme="light"] summary:focus-visible { outline-color: #92400e; }

  :root[data-theme="light"] ::-webkit-scrollbar-track { background: #e7e1d5; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #b9b2a4; border-color: #e7e1d5; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #a29a8b; }

  /* ---------------- テキスト ---------------- */
  :root[data-theme="light"] main .text-zinc-100,
  :root[data-theme="light"] main .text-zinc-200 { color: #1c2029; }
  :root[data-theme="light"] main .text-zinc-300 { color: #333a47; }
  :root[data-theme="light"] main .text-zinc-400 { color: #4f5768; }
  :root[data-theme="light"] main .text-zinc-500 { color: #6b7280; }
  :root[data-theme="light"] main .text-zinc-600 { color: #7b8494; }
  :root[data-theme="light"] main .text-white { color: #111827; }

  :root[data-theme="light"] main .text-emerald-200 { color: #115e59; }
  :root[data-theme="light"] main .text-emerald-300 { color: #0f766e; }
  :root[data-theme="light"] main .text-emerald-400 { color: #0d9488; }
  :root[data-theme="light"] main .text-rose-300 { color: #be123c; }
  :root[data-theme="light"] main .text-amber-100,
  :root[data-theme="light"] main .text-amber-200,
  :root[data-theme="light"] main .text-amber-400 { color: #92400e; }
  :root[data-theme="light"] main .text-indigo-200,
  :root[data-theme="light"] main .text-indigo-300 { color: #4338ca; }
  :root[data-theme="light"] main .text-teal-300,
  :root[data-theme="light"] main .text-teal-400 { color: #0f766e; }
  :root[data-theme="light"] main .text-red-400 { color: #b91c1c; }

  /* ---------------- ヘッダー ---------------- */
  :root[data-theme="light"] #site-header { background-color: rgba(244, 241, 234, .92); }
  :root[data-theme="light"] #site-header .text-white { color: #14161b; }
  :root[data-theme="light"] #site-header .text-zinc-200,
  :root[data-theme="light"] #site-header .text-zinc-300 { color: #2b303b; }
  :root[data-theme="light"] #site-header .text-zinc-500 { color: #6b7280; }
  :root[data-theme="light"] #site-header img { border-color: var(--line-strong); }
  :root[data-theme="light"] #mobile-menu {
    background-color: rgba(244, 241, 234, .98);
    border-color: var(--line) !important;
  }
  :root[data-theme="light"] #mobile-menu .nav-link { border-bottom-color: var(--line) !important; }

  /* ---------------- フッター ---------------- */
  :root[data-theme="light"] #site-footer { background-color: rgba(236, 231, 220, .75); }
  :root[data-theme="light"] #site-footer p.text-xs.font-semibold.uppercase { color: #92400e; }
  :root[data-theme="light"] #site-footer .text-zinc-400,
  :root[data-theme="light"] #site-footer .text-zinc-500,
  :root[data-theme="light"] #site-footer .text-zinc-600 { color: #4f5768; }
  :root[data-theme="light"] .footer-wordmark { color: rgba(20, 22, 27, .18); }

  /* ---------------- カード・パネル ---------------- */
  :root[data-theme="light"] .glass, :root[data-theme="light"] .liquid-glass { background-color: rgba(255, 255, 255, .74); }
  :root[data-theme="light"] #news-list > a { background-color: rgba(255, 255, 255, .82) !important; }
  :root[data-theme="light"] #news-list > a:hover { background-color: #fff !important; }
  :root[data-theme="light"] #news-list > a:hover h2,
  :root[data-theme="light"] #news-list > a .mt-auto.text-emerald-300 { color: #92400e; }
  :root[data-theme="light"] main > section.grid > article { border-color: var(--line-strong) !important; }

  /* 暗い背景色のユーティリティを明るい面へ */
  :root[data-theme="light"] main [class*="bg-zinc-8"],
  :root[data-theme="light"] main [class*="bg-zinc-9"] { background-color: rgba(255, 255, 255, .72) !important; }
  :root[data-theme="light"] main > section.grid > article [class*="bg-zinc-9"] { background-color: rgba(255, 255, 255, .9) !important; }

  /* 境界線をライト用に */
  :root[data-theme="light"] main .border-zinc-800:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
  :root[data-theme="light"] main .border-zinc-800\/80:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
  :root[data-theme="light"] main .border-zinc-800\/50:not(.glass):not(.liquid-glass):not(.form-control):not(.hero-panel),
  :root[data-theme="light"] main [class*="border-zinc-7"] { border-color: var(--line-strong) !important; }
  :root[data-theme="light"] #site-header [class*="border-zinc-"],
  :root[data-theme="light"] #site-footer [class*="border-zinc-"] { border-color: var(--line-strong) !important; }

  :root[data-theme="light"] main > div.mb-10,
  :root[data-theme="light"] main > div.mb-8 { border-bottom-color: var(--line); }
  :root[data-theme="light"] main > div.mb-10 p.text-emerald-300:first-of-type,
  :root[data-theme="light"] main > div.mb-8 p.text-emerald-300:first-of-type { color: #be123c; }

  /* アクセントの淡い背景 */
  :root[data-theme="light"] main .bg-emerald-400\/5,
  :root[data-theme="light"] main .bg-emerald-400\/10,
  :root[data-theme="light"] main .bg-emerald-400\/15,
  :root[data-theme="light"] main .bg-emerald-400\/20,
  :root[data-theme="light"] main .bg-emerald-500\/10 { background-color: rgba(13, 148, 136, .12) !important; }
  :root[data-theme="light"] main .bg-amber-400\/5 { background-color: rgba(245, 196, 81, .2) !important; }
  :root[data-theme="light"] main .bg-indigo-400\/5 { background-color: rgba(99, 102, 241, .1) !important; }
  :root[data-theme="light"] main .border-emerald-400\/20,
  :root[data-theme="light"] main .border-emerald-500\/30 { border-color: rgba(13, 148, 136, .4) !important; }
  :root[data-theme="light"] main .border-amber-400\/20 { border-color: rgba(146, 64, 14, .3) !important; }
  :root[data-theme="light"] main .border-indigo-400\/20 { border-color: rgba(67, 56, 202, .3) !important; }

  /* ---------------- ボタン・フォーム ---------------- */
  :root[data-theme="light"] .btn-primary { border-color: rgba(20, 22, 27, .45); }
  :root[data-theme="light"] .btn-secondary, :root[data-theme="light"] .liquid-btn-secondary {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(20, 22, 27, .3);
  }
  :root[data-theme="light"] .btn-secondary:hover, :root[data-theme="light"] .liquid-btn-secondary:hover {
    background: rgba(13, 148, 136, .12);
    border-color: #0f766e;
  }
  :root[data-theme="light"] #chat-submit { border-color: rgba(20, 22, 27, .35); }
  :root[data-theme="light"] .form-control {
    background: #fff;
    border-color: rgba(20, 22, 27, .3) !important;
  }
  :root[data-theme="light"] main .form-control { background: #fff !important; }
  :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { color-scheme: light; }
  :root[data-theme="light"] .form-control::placeholder { color: #8a90a0; }
  :root[data-theme="light"] .form-control:focus { border-color: #0f766e !important; }

  /* ---------------- ヒーロー（ライトでは画像を明るく） ---------------- */
  :root[data-theme="light"] .hero-panel > div:first-child {
    filter: brightness(1.3) saturate(1.06);
  }
  :root[data-theme="light"] .hero-shade { background-color: rgba(11, 13, 18, .42); }
  :root[data-theme="light"] .hero-panel > div.relative {
    text-shadow: none;
  }
  :root[data-theme="light"] .hero-panel .text-white { color: #fff; }
  :root[data-theme="light"] .hero-panel .text-zinc-300 { color: #e7e5e4; }
  :root[data-theme="light"] .hero-panel .text-zinc-400 { color: #e4e4e7; }
  :root[data-theme="light"] .hero-panel .text-zinc-500 { color: #d6d3d1; }
  :root[data-theme="light"] .hero-panel .text-emerald-300 { color: #5eead4; }

  /* ---------------- チャット ---------------- */
  :root[data-theme="light"] #chat-messages > div > div:first-child {
    background: rgba(13, 148, 136, .12);
    border-color: rgba(13, 148, 136, .4);
    color: #0f766e;
  }
  :root[data-theme="light"] #chat-messages .font-mono {
    background: rgba(245, 196, 81, .16);
    border-color: rgba(146, 64, 14, .3);
    color: #92400e;
  }
  :root[data-theme="light"] #chat-messages p.whitespace-pre-wrap { color: #333a47; }
  :root[data-theme="light"] #chat-messages div[class*="max-w-[520px]"] {
    background: #fff;
    border-color: var(--line-strong);
  }

  /* ---------------- ライトボックス（画像表示は暗いまま） ---------------- */
  :root[data-theme="light"] main #lightbox .text-zinc-300 { color: #d4d4d8; }
  :root[data-theme="light"] #lightbox-image { border-color: rgba(255, 255, 255, .5); }

  /* ---------------- 404 ---------------- */
  :root[data-theme="light"] .notfound > div:first-child { color: #be123c; }

/* =====================================================================
 * インタラクション（操作したときの手応え）
 * 装飾を増やさず、ホバー / クリック / スクロールへの反応だけを追加します。
 * ===================================================================== */

/* ---- テーマ切り替え時の色の移り変わり ---- */
@media (prefers-reduced-motion: no-preference) {
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition:
      background-color .28s ease,
      border-color .28s ease,
      color .24s ease,
      fill .24s ease,
      box-shadow .28s ease !important;
  }
}

/* ---- 画面最上部のスクロール進捗バー ---- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-color: var(--mustard);
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

/* ---- ヘッダー：スクロールすると少し締まる ---- */
#site-header { transition: background-color .25s ease; }
#site-header.is-scrolled {
  background-color: rgba(15, 17, 22, .97);
  box-shadow: none;
}
:root[data-theme="light"] #site-header.is-scrolled {
  background-color: rgba(244, 241, 234, .98);
  box-shadow: none;
}

/* ---- ナビ：下線がすっと伸びる ---- */
#site-header nav .nav-link { position: relative; }
#site-header nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.42rem;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
#site-header nav .nav-link:hover::after,
#site-header nav .nav-link.active::after { transform: scaleX(1); }

/* ---- テーマ切り替えボタン ---- */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: .75rem;
  cursor: pointer;
}
.theme-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform .3s ease;
}
.theme-toggle:hover svg { transform: rotate(18deg); }
.theme-icon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

/* ---- ボタンの押し込み / 浮き上がり ---- */
.btn-primary,
.btn-secondary,
.liquid-btn-secondary,
#chat-submit,
#mobile-menu-btn,
.theme-toggle {
  transition:
    transform .16s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    filter .2s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.liquid-btn-secondary:hover,
#chat-submit:hover:not(:disabled),
#mobile-menu-btn:hover,
.theme-toggle:hover { transform: translateY(-1px); }
.btn-primary:active,
.btn-secondary:active,
.liquid-btn-secondary:active,
#chat-submit:active:not(:disabled),
#mobile-menu-btn:active,
.theme-toggle:active { transform: translateY(1px) scale(.98); }

/* ---- カード：少し浮く / 画像が寄る ---- */
main > section.grid > article,
#news-list > a,
#gallery-grid > article {
  transition:
    transform .25s ease,
    border-color .25s ease,
    background-color .2s ease;
}
main > section.grid > article:hover,
#news-list > a:hover,
#gallery-grid > article:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
:root[data-theme="light"] main > section.grid > article:hover,
:root[data-theme="light"] #news-list > a:hover,
:root[data-theme="light"] #gallery-grid > article:hover {
  box-shadow: none;
}
#gallery-grid > article:hover { border-color: rgba(45, 212, 191, .45) !important; }
:root[data-theme="light"] #gallery-grid > article:hover { border-color: rgba(13, 148, 136, .55) !important; }
main > section.grid > article img { transition: transform .4s ease; }
main > section.grid > article:hover img { transform: scale(1.04); }

/* ---- いいねのポップ ---- */
@keyframes like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
[data-role="like-icon"].is-popping { animation: like-pop .35s ease; }

/* ---- ギャラリーのライトボックス / パネル ---- */
#lightbox.flex { animation: fade-in .18s ease; }
#lightbox.flex #lightbox-image { animation: lightbox-zoom .24s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-zoom {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
[data-role="comments"]:not(.hidden),
#upload-panel:not(.hidden) { animation: pop-down .22s ease; }
@keyframes pop-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---- FAQ の開閉 ---- */
details[open] > p,
details[open] > div { animation: pop-down .22s ease; }

/* ---- モバイルメニュー ---- */
#mobile-menu:not(.hidden) { animation: pop-down .18s ease; }

/* ---- スクロールでふわっと表示 ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
}
.reveal.reveal-in { opacity: 1; transform: none; }

/* ---- ページ上部へ戻る ---- */
#back-to-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .9rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background-color .2s ease, border-color .2s ease;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: none; }
#back-to-top:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  #lightbox.flex,
  #lightbox.flex #lightbox-image,
  [data-role="comments"]:not(.hidden),
  #upload-panel:not(.hidden),
  #mobile-menu:not(.hidden),
  details[open] > p,
  details[open] > div,
  [data-role="like-icon"].is-popping { animation: none; }
  main > section.grid > article:hover,
  #news-list > a:hover,
  #gallery-grid > article:hover { transform: none; }
}