/* ==========================================================================
   Suggesco 紙面UI — サイト共通の「柱」と「奥付」と「紙」
   2026-08-29 導入

   ■ なぜ作ったか
   2026-08-29 にトップ（front-page）と記事ページ（single）だけを紙面UIに
   着せ替えた結果、カテゴリー / すべての記事 / items / membership / about /
   規約 / 検索 / 404 の8種類だけが旧デザインのまま取り残された。
   具体的には ── ヘッダーが 66px の太いバーで、誌名がゴシック22px ＋
   「MAGAZINE」のキッカー付き（＝旧ロゴ）。背景も無地。
   トップから飛ぶとロゴが別物に変わるので、同じサイトに見えなかった。

   ■ このファイルの役割
   ページ種別に依存しない「サイトの外枠」だけをここに集める。

     1. 柱（ヘッダー）… 全ページ共通。細い罫のバー＋明朝の誌名
     2. 紙（背景）    … 流れる紙面。記事本文（body.sg-single）には敷かない
     3. 奥付（フッター）… 全ページ共通。題字と同じ活字で組む

   ページ固有の中身は従来どおり paper-home.css（一面・棚・区画）と
   paper.css（扉・もくじ・ノド・ダイヤル）が持つ。役割を混ぜない。

   ■ 読み込み順
   suggesco-pages.css → paper-chrome.css → paper.css / paper-home.css。
   ページ固有のスキンが最後に来るので、個別の上書きは従来どおり効く。
   ========================================================================== */

:root{
  --pp-rule:var(--ink);
  --pp-ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   1. 柱（ヘッダー）── 全ページ共通
   もとは paper-home.css と paper.css に同じものが二重に書かれていた。
   全ページで同じ見た目にするので、正はこの1か所だけに置く。

   ⚠️ 誌名は明朝（--font-display）。ここをゴシックに戻すと、トップの題字と
      別の活字になって「ロゴが変わった」ように見える。
   ⚠️ キッカー「MAGAZINE」は出さない。誌名の正体はトップの題字のほうで、
      柱では誌名だけでよい（新聞の柱の作法）。
   ========================================================================== */
header.site{
  border-bottom:1px solid var(--pp-rule);
  background:var(--paper);
  backdrop-filter:none;          /* 紙にぼかしは要らない */
}
header.site .bar{ height:44px }
header.site .brand{ gap:10px }
header.site .brand .word{
  font-family:var(--font-display); font-weight:800;
  font-size:16px; letter-spacing:.06em;
}
header.site .brand .kicker{ display:none }

/* ==========================================================================
   2. 紙（背景）── 流れる紙面
   もとは paper-home.css がトップ専用に持っていたものを、ここへ移して
   全ページに敷いた。**記事本文だけは敷かない。**
   9,000字級の本文の後ろで背景が動き続けると、読者が文章ではなく動きを追う。

   ⚠️ テキストの複製をDOMに置くと「読者に見せない大量のテキスト」になるので、
      縦組みは 1枚の画像に焼いてある（assets/paper-bed.webp / 55KB）。
   ⚠️ background-position を毎フレーム動かすと全画面を塗り直すことになるので、
      画面より1タイルぶん広いレイヤーを transform で送る（GPUに乗る）。
   ⚠️ ::after は「中央を紙の色で薄める膜」。マスクにしていないのは、::before が
      画面より広く、マスクの中心が画面の中心と合わないため。
   ========================================================================== */
body:not(.sg-single)::before{
  content:""; position:fixed; top:0; left:0; z-index:-2; pointer-events:none;
  width:calc(100vw + 1200px); height:100vh;
  background-image:url("assets/paper-bed.webp");
  background-size:1200px 100%;
  background-repeat:repeat-x;
  opacity:.5;
  animation:sgBedFlow 120s linear infinite;
  will-change:transform;
}
@keyframes sgBedFlow{ to{ transform:translate3d(-1200px,0,0) } }

body:not(.sg-single)::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--paper) 22%,
    var(--paper) 78%,transparent 100%);
  opacity:.86;
}

/* 暗い紙では黒い文字が沈むので、明暗を反転して同じ密度に見せる。
   ⚠️ suggesco-pages.css は :root[data-theme] での明暗の上書きも持っているので、
      OSの設定だけで判定すると「OSは暗い／サイトは明るい」のときに反転が残る。
      media は data-theme="light" のときに効かないようにし、
      data-theme="dark" のぶんは別に書いておく。 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:not(.sg-single)::before{ filter:invert(1); opacity:.3 }
}
:root[data-theme="dark"] body:not(.sg-single)::before{ filter:invert(1); opacity:.3 }

@media(max-width:760px){
  /* スマホは横幅が狭く、中央を薄くする膜が画面のほとんどを覆ってしまう。
     膜を外して全面を均一に薄く敷く（そうしないと何も見えない） */
  body:not(.sg-single)::before{ background-size:820px 100%; opacity:.2;
    width:calc(100vw + 820px); animation-duration:90s }
  body:not(.sg-single)::after{ display:none }
  @keyframes sgBedFlow{ to{ transform:translate3d(-820px,0,0) } }
}
@media (prefers-color-scheme:dark) and (max-width:760px){
  :root:not([data-theme="light"]) body:not(.sg-single)::before{ opacity:.24 }
}
@media(max-width:760px){
  :root[data-theme="dark"] body:not(.sg-single)::before{ opacity:.24 }
}
@media (prefers-reduced-motion:reduce){
  body:not(.sg-single)::before{ animation:none!important }
}

/* ==========================================================================
   3. 奥付（フッター）── 全ページ共通
   新聞の奥付の作法に寄せる。上端に双柱罫を引き、誌名は題字と同じ活字で組む。

   ⚠️ 誌名がゴシック20px のままだと、トップの題字と別のロゴに見える。
      柱（ヘッダー）と同じく --font-display で揃える。
   ========================================================================== */
footer.site{
  position:relative;
  border-top:1px solid var(--pp-rule);
  background:transparent;        /* 紙面を透かす（トップと同じ見え方にする） */
}
/* 双柱罫。題字の .sg-mh__rules と同じ間隔（罫1px・空き4px・罫1px） */
footer.site::before{
  content:""; position:absolute; left:0; right:0; top:5px; height:1px;
  background:var(--pp-rule); pointer-events:none;
}

footer.site .foot-brand .word{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(22px,2.4vw,28px); letter-spacing:.06em; line-height:1;
}
/* 題字の下と同じ英字のタグライン */
footer.site .foot-tag{
  display:block; margin-top:9px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}
footer.site .foot-brand p{ margin-top:12px }

/* 発行情報の柱。題字下の .sg-mh__issue と同じく、上下を罫で挟んで組む。
   （購読ブロックの黒帯の直後にフッターが来るページでは、フッター上端の双柱罫が
     黒に沈んで読めない。奥付だとひと目で分かるのはこの柱のほう） */
footer.site .foot-btm{
  border-top:1px solid var(--pp-rule);
  border-bottom:1px solid var(--pp-rule);
  padding-block:9px;
  margin-top:clamp(32px,4vw,46px);
  letter-spacing:.12em;
}
@media(max-width:700px){
  footer.site .foot-btm{ justify-content:flex-start; gap:8px 16px; font-size:10px }
}