/* 公式サイトの共通スタイル
   2026-08-30 新設。代表者の指示「ページによって、アイコンのサイズが違ったり、
   文が左によっていたり、最後尾のコピーライトが微妙に中央表示になっていなかったり、
   そもそも運営とコピーライトが1行にまとまっていたり、見た目の統一感がありません」。

   ■ なぜ新設したか
   それまで共通のCSSが1つも無く、13ページが各自インラインの<style>を持っていた。
   共通のはずのトークンも body も footer も全部が複製で、直すたびにずれていく形だった。
   実測でフッタは3種類の書き方に割れ、11ページで左寄りになっていた
   (footerにtext-alignが無く、本文の寄せを継いでいた。中央だったのは
   index.html と sharedo/guide だけ)。

   ■ 読み込む順番
   各ページで、ページ固有の<style>より「前」に読む。
   ページ側の指定が勝つ。ここは土台だけを持つ。 */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1c1c1c;
  --accent: #2f8f6b;
  --muted: #666666;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181a;
    --fg: #f2f2f2;
    --accent: #4fc9a0;
    --muted: #a6a6a6;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ── フッタ ───────────────────────────────
   全ページ共通。**text-align を必ず自分で持つ。**
   これが無いと本文の寄せを継いで、資料ページだけ左に寄る。 */
footer {
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.8;
}
footer p { margin: 0; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

/* ── ロゴ ─────────────────────────────────
   ページごとに 72px / 84px と割れていたので 84px に揃える。 */
/* **margin-inline: auto を必ず持つ。**——ページ側の .logo 指定を外したとき、
   これが無くて / 以外の全ページでロゴが左へ寄った(2026-08-30、代表者が実物で指摘)。
   / だけ中央に見えていたのは body が display:flex; align-items:center だったから。
   幅の決まったブロック要素は、親が中央寄せでも自分では中央に来ない。 */
.logo { width: 72px; height: 72px; margin: 0 auto 20px; }
.logo img { width: 100%; height: 100%; object-fit: contain; }

/* ── ストアのバッジ ───────────────────────
   2026-08-30、代表者の指示で公式ロゴに差し替え。
   Google Play は配布中。App Store は未提供なので「Coming Soon」を添えて、
   リンクにしない(押せる形にすると、行き先の無いボタンになる)。
   バッジの縦を揃える。Googleは余白込みの画像、Appleは余白なしのSVGなので、
   同じ height で並べると Apple 側が大きく見える。高さを別々に決めてある。 */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 8px;
}
.store-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.store-badge img { display: block; }
.store-badge--play img { height: 56px; width: auto; }
.store-badge--appstore img { height: 40px; width: auto; margin: 8px 0; }
.store-badge--soon img { filter: grayscale(1); opacity: 0.55; }
.store-badge__soon {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* アプリ一覧のカードは本文が左寄せなので、バッジも左に揃える
   (中央のままだと、カードの中でバッジだけ浮く。2026-08-30に描画で確認) */
.app-card .store-badges { justify-content: flex-start; }


/* ── 共通ヘッダと、共通の器 ───────────────────
   2026-08-30、代表者の指示。
   「特にヘッダはページ遷移で動くと違和感しかないので、共通になるようにしてください」
   「そもそも、ページ全体で幅の統一感が無いように思われます」

   ■ 直す前に測った実寸（headless + iframe で getBoundingClientRect）
     器の幅   : 480px(.wrap 30em) 5ページ ／ 672px(main 42em) 6ページ ／ 985px(guide)
     ロゴ上端 : 28px / 32px / 40px の3種類
     ロゴ     : 6ページには**そもそも無かった**（資料ページ）
   ■ guideのロゴが小さく見えたのは、ロゴが小さいからではない。
     ロゴは全ページ72pxで同じで、**guideだけ器が985pxと広かった**ため相対的に小さく見えていた。 */

.site-header {
  padding: 40px 20px 0;
  text-align: center;
}
.site-header .logo-img { display: block; width: 72px; height: 72px; margin: 0 auto 20px; object-fit: contain; }

/* **器は1つの幅に揃える。**——42em(672px)。
   ページ側で max-width を上書きしない。上書きすると、また3種類に割れる。 */
.wrap, main, .container {
  width: 100%;
  max-width: 42em;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* 器を狭めるので、はみ出しうるものに逃げ道を与える */
main table, .wrap table, .container table { width: 100%; }
.table-wrap, .toc { overflow-x: auto; }