/* iOS の案内の見た目は**会員画面と共有**するので別ファイルに置く（182）。
   ここから読むのは、公開ページの出力HTMLに <link> を1行も増やさないため
   （/app の出力を変えないことを tests/test_anon_app_output_frozen.py が固定している）。
   @import は規則より前に置く必要がある＝この位置は動かせない。 */
@import url("/static/public/ios_guide.css");

/* 公開ページの見た目（080）。会員画面（暗い配色）とは別に、読みやすさ優先の明るい配色。
   印刷（PDF化）も同じCSSで行う＝ページとPDFの内容がずれない。 */
:root {
  color-scheme: light;
  /* 本文とフッタで**同じ基準**を使う（別々の数値を書くとズレる。実際にズレた: 130）。
     幅を変えるときはここだけを変える。 */
  --container: 760px;
  --gutter: 20px;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #1f2330; background: #fff; line-height: 1.85;
}
header.site, footer.site {
  padding: 14px 20px; border-bottom: 1px solid #e6e8ef;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
footer.site { border-bottom: 0; border-top: 1px solid #e6e8ef; display: block; margin-top: 48px; }
/* フッタの中身を**本文と同じコンテナ**に収める（横罫線は画面幅いっぱいのまま）。
   `header.site, footer.site` の左右 padding を打ち消し、各段落側で持たせる。 */
footer.site { padding-left: 0; padding-right: 0; }
footer.site > p { max-width: var(--container); margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter); }
.brand { font-weight: 700; color: #3730a3; text-decoration: none; font-size: 1.05rem; }
header.site nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
a { color: #4338ca; }
.cta {
  background: #4f46e5; color: #fff !important; text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font-weight: 700;
}
main { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 0; }
h1 { font-size: 1.5rem; margin: 8px 0 18px; line-height: 1.5; }
h2 { font-size: 1.12rem; margin: 30px 0 8px; padding-top: 8px; border-top: 1px solid #eef0f6; }
h3 { font-size: 1rem; margin: 18px 0 6px; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .95rem; }
th, td { border: 1px solid #e0e3ec; padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: #f6f7fb; width: 32%; }
.draft {
  background: #fff8e1; border: 1px solid #f0c36d; border-radius: 8px;
  padding: 12px 16px; margin: 18px 0; font-size: .93rem;
}
.lead { font-size: 1.05rem; color: #333a4d; }
.footer .links, footer .links { font-size: .88rem; }
footer .note { font-size: .82rem; color: #6b7280; }
.cur { color: #6b7280; }
ul, ol { padding-left: 1.3em; }
li { margin: 5px 0; }
code { background: #f4f5f9; padding: 1px 5px; border-radius: 4px; font-size: .92em; }

@media print {
  /* PDF版はページと同じCSSで作る（版ズレを構造的に防ぐ） */
  header.site nav, .cta { display: none; }
  body { font-size: 10.5pt; }
  main { max-width: none; padding: 0; }
  h2 { break-after: avoid; }
  table, ul, ol { break-inside: avoid; }
  a { color: #1f2330; text-decoration: none; }
  footer.site .links { font-size: 8pt; color: #6b7280; }
  /* 印刷では本文が全幅になるので、フッタも合わせて全幅に戻す */
  footer.site > p { max-width: none; padding-left: 0; padding-right: 0; }
}