/* ============================================================
   Auguri! ─ 紙の粒（背景の質感）2026-09-18
   ------------------------------------------------------------
   高野様「背景ですが、質感のある優しい粒度のある背景にすることは可能ですか？」
   （ご参考：landsolution.co.jp。あちらは 100×100px の紙テクスチャ画像を body に敷き詰めています）

   こちらは **画像を置かず、SVG の乱れ（feTurbulence）** で粒を作っています。
     ・画像ファイルが増えない（この CSS の中に収まる）
     ・拡大しても粗くならない／継ぎ目が出ない（stitchTiles）
     ・強さを 1 行で変えられる

   かけ方 ── **暗い粒と明るい粒の 2 枚重ね**
     紙の目は「へこみ（暗）」と「盛り上がり（明）」の両方でできています。
     片方だけだと地が沈む（または浮く）ので、2 枚重ねます。
       1 枚目 … 白（1.0）から **下へだけ**振れる暗い粒を `multiply` で
       2 枚目 … 黒（0.0）から **上へだけ**振れる明るい粒を `screen` で
     こうすると **明るい帯でも濃い帯でも、同じ 1 つの指定**で効きます。
     片側だけに振らせているので、地の明るさのずれも半分で済みます
     （実測：明るい地 −2.2 / 256 段、濃い地 +0.9 / 256 段。目では分かりません）。

   かける相手
     **紙の面だけ**（帯 `.band` と、大きな塗りの面 `.pnl`）。
     写真・罫・ロゴ・文字には当てません（参考サイトも写真の上には粒が乗っていません）。

     **2026-09-18 高野様ご確定：「写真にはのせません」。**
     写真は写真のまま見せる、という方針です。あとから気が変わっても、
     ここに `.ph > img` を足すようなことはしないこと（＝写真に粒を乗せない、が確定事項）。
     紙の粒は「紙の面に乗っているもの」であって、写真の中身ではありません。

   強さ（実測のばらつき。256 段階のうち何段ぶんか）
     1 … 明るい地 1.6 段（言われないと気づかないくらい）
     2 … 明るい地 3.0 段（**本番。2026-09-18 高野様「2 ふつうで反映してください」で確定**）
     3 … 明るい地 4.6 段（はっきり紙らしい）
     `<body data-paper="0|1|2|3">` で切り替え。0 で粒なし。
     本番は 2 で確定。切り替えの仕組みは、あとから強さを見直せるように残してある
     （デモ 26 番。変えるときは build/gen.py の <body> の data-paper 1 か所）。
     ai 突き合わせ（.compare）と印刷では出しません。

   粒の細かさは baseFrequency 0.9（およそ 1px の粒）。
   タイルは 200×200px で、画面の幅が変わっても粒の大きさは変わりません
   （紙の目は版面と一緒に伸び縮みしないため）。
   ============================================================ */

:root {
  --paper-1-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%270.9453%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%270.9453%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%270.9453%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-1-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%2719%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%27-0.0547%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%27-0.0547%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.1094%27%20intercept%3D%27-0.0547%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-2-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%270.894%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%270.894%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%270.894%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-2-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%2719%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%27-0.106%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%27-0.106%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.212%27%20intercept%3D%27-0.106%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-3-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%277%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%270.8291%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%270.8291%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%270.8291%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-3-l: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27p%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%20seed%3D%2719%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%27-0.1709%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%27-0.1709%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.3419%27%20intercept%3D%27-0.1709%27%2F%3E%3CfeFuncA%20type%3D%27discrete%27%20tableValues%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23p%29%27%2F%3E%3C%2Fsvg%3E");
  --paper-d: var(--paper-2-d);
  --paper-l: var(--paper-2-l);
}
body[data-paper="1"] { --paper-d: var(--paper-1-d); --paper-l: var(--paper-1-l); }
body[data-paper="2"] { --paper-d: var(--paper-2-d); --paper-l: var(--paper-2-l); }
body[data-paper="3"] { --paper-d: var(--paper-3-d); --paper-l: var(--paper-3-l); }

.band, .pnl {
  background-image: var(--paper-d), var(--paper-l);
  background-blend-mode: multiply, screen;
  background-repeat: repeat, repeat;
}
body[data-paper="0"] .band, body[data-paper="0"] .pnl { background-image: none; }
.compare .band, .compare .pnl { background-image: none !important; }
@media print { .band, .pnl { background-image: none; } }

/* ── 気をつけること ──────────────────────────────────────────
   帯や面の地色は **必ず `background-color:` で書く**（`background:` の一括指定は不可）。
   一括指定は background-image も同時に初期値へ戻すので、**粒だけが黙って外れます**。
   ページ固有 CSS（page-*.css）は共通 CSS より **あとに読まれる**ので、
   そこに 1 か所でも `background:` が残っていると、その帯だけ粒が出ません。
   2026-09-18 に実際に 5 か所で起きました（記事詳細の 4 帯・フッター反転・お問い合わせの
   フォーム・店舗案内の地図枠）。見た目では気づけないので、
   `verify` の「.band / .pnl に粒が乗っているか数える」点検を必ず通すこと。 */