/* サイトフッター（イベント一覧・ぬい活ギャラリー・応援企画の3画面で共通表示、_macros.htmlのsite_footer()マクロに対応）。
   以前は各画面のCSSに個別実装があり、応援企画画面だけ古い実装のまま取り残される実害バグが発生したため、
   night-mode.css/tabbar.cssと同じ「複数画面から読み込む共通CSS」パターンに揃えて一本化した。
   文字色・ホバー背景は var(--filter-deep, var(--ink)) / var(--filter-mid, var(--accent)) というフォールバック指定にしている。
   これはgallery.cssだけが持つ「選択中アイドルの色に連動してテーマ全体が変化する」機構（--filter-deep/--filter-mid、
   未選択時はvar(--ink)/var(--accent)と同値がデフォルト）を壊さずそのまま活かすため。events.css/support_campaigns.css側は
   --filter-*を定義していないので、単純にvar(--ink)/var(--accent)にフォールバックする（従来と同じ見た目）。
   PC/タブレット幅では全リンクが1行にflex-wrapする素の見た目
   （.footer-group/.footer-rowはdisplay:contentsで自身のボックスを持たず、中の要素がsite-footerの直接の子として並ぶ）。
   スマホ幅だけ、下のメディアクエリで「おでかけ部とは」単独1行目+「利用規約・お知らせ・お問い合わせ」2行目+SNSの3段構成に組み替える。 */
.site-footer { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 30px; padding: 20px 0; border-top: 1px solid var(--line); }
.footer-group, .footer-row { display: contents; }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; background: var(--badge-bg); color: var(--filter-deep, var(--ink)); text-decoration: none; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: background 0.2s, color var(--theme-transition, 0.2s); }
.site-footer a:hover { background: var(--filter-mid, var(--accent)); color: var(--bg-soft); }
.x-icon { flex-shrink: 0; }

/* --- 「お問い合わせ・マイページ」メニュー：見た目は他のフッターリンクと同じピル型ボタン。
   押すと上方向（画面下端で見切れないように）に3つの選択肢（お問い合わせ／応援企画の登録／マイページ）が開く --- */
.footer-menu { position: relative; display: inline-flex; }
.footer-menu-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--badge-bg); color: var(--filter-deep, var(--ink));
	border: none; cursor: pointer; font-family: inherit;
	padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
	transition: background 0.2s, color var(--theme-transition, 0.2s);
}
.footer-menu-btn:hover, .footer-menu-btn[aria-expanded="true"] { background: var(--filter-mid, var(--accent)); color: var(--bg-soft); }
.footer-menu-panel {
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
	padding: 6px; display: flex; flex-direction: column; gap: 2px;
	min-width: 190px; z-index: 20;
}
/* [hidden]属性は本来ブラウザ既定でdisplay:noneになるが、直前の.footer-menu-panelのdisplay:flex指定が
   （UAスタイルより優先される著者スタイルのため）それを上書きしてしまう。属性セレクタを足して明示的に勝たせる */
.footer-menu-panel[hidden] { display: none; }
.footer-menu-panel a {
	display: block; padding: 9px 14px; border-radius: 9px;
	background: none; color: var(--filter-deep, var(--ink)); text-decoration: none;
	font-size: 13px; font-weight: 700; white-space: nowrap;
}
.footer-menu-panel a:hover { background: var(--badge-bg); }

@media (max-width: 600px) {
	.site-footer { flex-direction: column; gap: 14px; }
	.footer-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
	.footer-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
	.footer-group-sns { flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 14px; border-top: 1px dashed var(--line); }
	.footer-menu-panel { min-width: 170px; }
}