/* サブページ共通のスタイル。
   トップ（index.html）と手順ページは自前の <style> を持っているので、こちらは
   後から足した小さいページ専用 — download の中間ページ2枚、notify、report、privacy。
   トークンの値はトップと同じものを写している。片方だけ変えないこと。

   注意: このコメントにパスのワイルドカードを書かないこと。"*" と "/" が並ぶと
   コメントがそこで終わり、直後の :root ブロックごと捨てられる（一度やった）。 */

:root {
  --ground:#EEF1F4; --ground-2:#E4E9EE; --surface:#FFFFFF; --surface-2:#F7F9FA;
  --ink:#10171C; --ink-soft:#3B4A54; --ink-mute:#5A6A74;
  --rule:#D2DAE1; --rule-soft:#E3E9ED;
  --accent:#0A6B72; --accent-hi:#13949E; --accent-soft:#DCEEF0; --on-accent:#FFFFFF;
  --warn:#8A5100; --warn-soft:#FBEEDA;
  --lift:0 1px 1px rgba(16,23,28,.05), 0 8px 20px rgba(16,23,28,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0D1215; --ground-2:#121A1E; --surface:#1A2328; --surface-2:#212C32;
    --ink:#E9F0F3; --ink-soft:#B3C3CB; --ink-mute:#7F929C;
    --rule:#31424A; --rule-soft:#263339;
    --accent:#4FCBD6; --accent-hi:#6FDCE6; --accent-soft:#103238; --on-accent:#04191C;
    --warn:#E5AE5E; --warn-soft:#2C2416;
    --lift:0 1px 1px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --ground:#0D1215; --ground-2:#121A1E; --surface:#1A2328; --surface-2:#212C32;
  --ink:#E9F0F3; --ink-soft:#B3C3CB; --ink-mute:#7F929C;
  --rule:#31424A; --rule-soft:#263339;
  --accent:#4FCBD6; --accent-hi:#6FDCE6; --accent-soft:#103238; --on-accent:#04191C;
  --warn:#E5AE5E; --warn-soft:#2C2416;
  --lift:0 1px 1px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
/* 日本語は語の途中で折れると読みにくい。対応ブラウザでは文節で折る */
body, p, h1, h2, h3, li, dd, dt, summary { word-break: auto-phrase; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-underline-offset:.2em; }
a:focus-visible, .btn:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; }
code { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.92em; }

.wrap { max-width:38rem; margin:0 auto; padding:3.5rem 1.5rem 5rem; }

.eyebrow {
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.09em; color:var(--accent); margin:0 0 .6rem;
}
h1 {
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900;
  font-size:clamp(1.6rem,4.5vw,2.15rem); line-height:1.4; margin:0 0 .5rem;
}
h2 {
  font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700;
  font-size:1.08rem; line-height:1.5; margin:2.2rem 0 .6rem;
}
p { margin:0 0 1.1rem; }
.lead { color:var(--ink-soft); margin:0 0 2rem; }
.small { font-size:.9rem; color:var(--ink-mute); }

.file {
  display:inline-block; margin:.2rem 0 1.6rem; padding:.35rem .7rem;
  background:var(--surface-2); border:1px solid var(--rule-soft); border-radius:6px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.88rem;
  color:var(--ink-soft); word-break:break-all;
}

.card {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:1.5rem 1.6rem; margin:0 0 1.6rem;
}
.card h2 { margin-top:0; }
.card > :last-child { margin-bottom:0; }

.warn {
  background:var(--warn-soft); border:1px solid var(--warn);
  border-radius:12px; padding:1.4rem 1.5rem; margin:0 0 2rem;
}
.warn h2 { margin:0 0 .6rem; font-weight:900; font-size:1.05rem; color:var(--warn); }
.warn p { margin:0 0 .9rem; font-size:.95rem; }
.warn > :last-child { margin-bottom:0; }

.quote {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; padding:.7rem .9rem; margin:0 0 .9rem;
  font-size:.9rem; color:var(--ink-soft);
}
pre {
  background:var(--surface-2); border:1px solid var(--rule-soft);
  border-radius:8px; padding:.8rem 1rem; margin:0 0 1.1rem;
  overflow-x:auto; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.85rem; line-height:1.7;
}

ol, ul { margin:0 0 1.1rem; padding-left:1.3rem; }
li { margin-bottom:.35rem; font-size:.95rem; }
li:last-child { margin-bottom:0; }

.specs {
  display:flex; flex-wrap:wrap; gap:.5rem .9rem;
  margin:0 0 1.4rem; font-size:.86rem; color:var(--ink-mute);
}
.specs span {
  background:var(--surface-2); border:1px solid var(--rule-soft);
  border-radius:999px; padding:.25rem .8rem;
}
.specs b { color:var(--ink); }

.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:8px;
  font-family:"Zen Kaku Gothic New",sans-serif; font-size:.98rem; font-weight:700;
  text-decoration:none; border:1px solid transparent;
  transition:transform .14s ease;
}
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--lift); }
.btn-ghost   { background:var(--surface); color:var(--ink); border-color:var(--rule); }
.btn:hover { transform:translateY(-2px); }
.btn-ghost:hover { border-color:var(--accent-hi); }
@media (prefers-reduced-motion: reduce) { .btn { transition:none; } .btn:hover { transform:none; } }
.cta-row { display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 1.2rem; }

.sep { border:0; border-top:1px solid var(--rule); margin:2.5rem 0 1.8rem; }
.home { display:block; margin-top:2.5rem; font-size:.9rem; }