/* ==========================================================================
   Suggesco 紙面UI — 記事ページのスキン
   2026-08-29 導入（モック: work/suggesco/mock/motion-lab/article-real.html）

   ■ 方針
   これは「上に載せるだけ」のスキン。既存の機能（目次 / 読了ダイヤル /
   記事末AI / 読み上げ / 紙芝居 / ペイウォール / 関連記事 / 購読）には
   一切手を入れていない。見た目だけを紙面（雑誌の中面）に寄せている。
   すべて body.sg-single 配下に閉じてあるので、他のページには影響しない。

   ■ 元にした考え方
   ・読売新聞 採用サイト  … 罫・段組み・網点で「紙面」に見せる
   ・近大グラフィティ      … 号として並べる見立て
   分解メモ: guidelines/web-motion/sites/
   ========================================================================== */

body.sg-single{
  /* 紙面用の追加トークン。既存の --paper / --ink / --line はそのまま使う */
  --pp-rule:var(--ink);
  --pp-ease:cubic-bezier(.22,1,.36,1);
  --pp-dot:var(--ink);          /* 網点の色 */
  --pp-dot-op:.30;              /* 網点の濃さ */
}
@media (prefers-color-scheme:dark){
  body.sg-single{ --pp-dot-op:.22 }
}

/* --------------------------------------------------------------------------
   1. 柱（はしら）— 雑誌の各ページ上部にある、誌名・号数・ページ番号
   既存の header.site をそのまま薄く組み替えている（ナビは残す）
   -------------------------------------------------------------------------- */
body.sg-single header.site{
  border-bottom:1px solid var(--pp-rule);
  background:var(--paper);
  backdrop-filter:none;
}
body.sg-single header.site .bar{ height:44px; gap:14px }
body.sg-single header.site .brand .word{ font-family:var(--font-display); font-size:16px;
  letter-spacing:.06em }
body.sg-single header.site .brand .kicker{ display:none }   /* 柱では誌名だけでよい */

body.sg-single .sg-issue,
body.sg-single .sg-pgno{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  color:var(--ink-3); text-transform:uppercase; white-space:nowrap;
}
body.sg-single .sg-pgno b{ color:var(--ink); font-weight:400;
  font-variant-numeric:tabular-nums }
@media(max-width:900px){ body.sg-single .sg-issue{ display:none } }

/* --------------------------------------------------------------------------
   2. 扉（とびら）
   -------------------------------------------------------------------------- */
body.sg-single .crumb{ font-size:10px; letter-spacing:.14em; padding-top:clamp(16px,2.6vw,26px) }

body.sg-single .article-head{ padding-bottom:clamp(22px,3vw,34px) }
body.sg-single .article-head .eyebrow{
  border:1px solid var(--pp-rule); padding:5px 11px; margin-bottom:18px;
  font-size:10.5px; letter-spacing:.2em;
}
body.sg-single .article-title{
  font-size:clamp(26px,3.6vw,46px); line-height:1.36; margin-bottom:20px;
  max-width:22em;
  /* 日本語を文節で折る。Chrome系のみ効く。効かないブラウザは従来の折り返し */
  text-wrap:pretty; word-break:auto-phrase; line-break:strict;
}
body.sg-single .article-standfirst{
  font-family:var(--font-display); line-height:2.05; max-width:36em; text-align:justify;
}
body.sg-single .byline{
  border-top:1px solid var(--line); padding-top:14px; margin-top:20px; max-width:36em;
  font-size:10.5px; letter-spacing:.08em;
}
/* 扉と本文のあいだに双柱罫を引く＝ここから記事、の合図 */
body.sg-single .article-head::after{
  content:""; display:block; height:4px; margin-top:clamp(20px,3vw,30px);
  border-top:1px solid var(--pp-rule); border-bottom:1px solid var(--pp-rule);
}

/* --------------------------------------------------------------------------
   3. 写真は網点（ハーフトーン）。ふだんは白黒、ホバーで色が戻る
   既存の .ph は ::before をハッチに使っているので、網点は ::after に置く
   -------------------------------------------------------------------------- */
body.sg-single .ph{ border-color:var(--pp-rule); isolation:isolate }
body.sg-single .ph::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(circle at center,var(--pp-dot) .9px,transparent 1.15px);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:var(--pp-dot-op);
  transition:opacity .9s var(--pp-ease);
}
@media (prefers-color-scheme:dark){
  /* 暗い紙では multiply だと網点が消えるので、乗せ方を反転する */
  body.sg-single .ph::after{ mix-blend-mode:screen }
}
body.sg-single .ph>img{
  filter:grayscale(1) contrast(.94) brightness(1.28);
  transition:filter 1s var(--pp-ease),transform 1.3s var(--pp-ease);
}
body.sg-single a:hover .ph>img,
body.sg-single .ph:hover>img{ filter:grayscale(0) contrast(1); transform:scale(1.03) }
body.sg-single a:hover .ph::after,
body.sg-single .ph:hover::after{ opacity:0 }

body.sg-single .article-cover{ margin-top:clamp(20px,3vw,30px) }
body.sg-single .article-cover .ph.cover{ aspect-ratio:16/8 }

/* --------------------------------------------------------------------------
   4. もくじ（既存の .sg-toc の中身はそのまま。体裁だけ紙面に）
   番号は CSS カウンタで打つので、HTMLは触っていない
   -------------------------------------------------------------------------- */
body.sg-single .sg-toc{
  border:1px solid var(--pp-rule); border-radius:0; padding:0;
  background:var(--paper); margin-block:clamp(26px,3.6vw,40px);
}
body.sg-single .sg-toc__ttl{
  display:block; font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.14em; padding:12px 16px; border-bottom:1px solid var(--pp-rule);
  margin:0;
}
body.sg-single .sg-toc ol{
  counter-reset:pp-toc; list-style:none; margin:0; padding:6px 0;
  columns:2; column-gap:0; column-rule:1px solid var(--line);
}
@media(max-width:760px){ body.sg-single .sg-toc ol{ columns:1 } }
body.sg-single .sg-toc li{ break-inside:avoid; margin:0; padding:0 }
body.sg-single .sg-toc li>a,
body.sg-single .sg-toc li>span:first-child{
  display:block; padding:8px 16px 8px 46px; font-size:13.5px; line-height:1.65;
  position:relative; transition:background .3s var(--pp-ease);
}
body.sg-single .sg-toc li>a::before,
body.sg-single .sg-toc li>span:first-child::before{
  counter-increment:pp-toc; content:counter(pp-toc,decimal-leading-zero);
  position:absolute; left:16px; top:11px;
  font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
}
body.sg-single .sg-toc li>a:hover{ background:var(--paper-2) }
body.sg-single .sg-toc li.is-locked{ color:var(--ink-3) }

/* --------------------------------------------------------------------------
   5. 本文
   -------------------------------------------------------------------------- */
body.sg-single .prose{ font-size:16px; line-height:2.1 }
body.sg-single .prose p{ text-align:justify }

/* 見出しの上罫が引かれる＝章が変わる合図。本文で動くのはこの1本だけ */
body.sg-single .prose h2{
  border-top:0; padding-top:0; margin-top:2.6em; position:relative;
  font-size:clamp(20px,2.4vw,27px);
}
body.sg-single .prose h2::before{
  content:""; position:absolute; top:-.7em; left:0; right:0; height:1px;
  background:var(--pp-rule); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--pp-ease);
}
body.sg-single .prose h2.pp-in::before{ transform:scaleX(1) }
/* 章番号（JSで付ける） */
body.sg-single .prose h2 .pp-n{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em;
  color:var(--ink-3); margin-bottom:8px; font-weight:400;
}

/* mark は蛍光ペンではなく、紙面らしい薄い網に */
body.sg-single .prose mark{
  background:linear-gradient(transparent 62%,var(--paper-3,#E9E5DC) 62%);
  color:inherit; padding-bottom:1px;
}

/* 囲み記事（callout） */
body.sg-single .prose .callout{
  border:1px solid var(--pp-rule); background:var(--paper-2); border-radius:0;
  padding:18px 20px 6px;
}
body.sg-single .prose .callout .k{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; background:var(--ink); color:var(--paper);
  padding:5px 10px; margin-bottom:12px; border-radius:0;
}
body.sg-single .prose .callout p{ font-size:14.5px; line-height:2.05 }

/* ノド（ページの継ぎ目）。JSで数章おきに挿す */
body.sg-single .pp-nodo{
  display:flex; align-items:center; gap:16px; margin:3em 0 0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--ink-3);
}
body.sg-single .pp-nodo::before,
body.sg-single .pp-nodo::after{ content:""; height:1px; background:var(--line); flex:1 }

/* --------------------------------------------------------------------------
   6. 読了ダイヤル（既存 .sg-dial の見た目だけ紙面調に。動きは既存のまま）
   -------------------------------------------------------------------------- */
body.sg-single .sg-dial__btn{
  background:var(--paper); border:1px solid var(--pp-rule); border-radius:50%;
  box-shadow:0 6px 20px -12px rgba(0,0,0,.45);
}
body.sg-single .sg-dial__now{
  font-family:var(--font-display); background:var(--paper);
  border:1px solid var(--pp-rule); border-radius:0;
}
body.sg-single .sg-dial__num{ font-family:var(--font-mono); font-weight:700 }
body.sg-single .sg-dial__panel{
  background:var(--paper); border:1px solid var(--pp-rule); border-radius:0;
  box-shadow:0 14px 40px -18px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   7. 記事末AI・著者・シェア
   -------------------------------------------------------------------------- */
body.sg-single .sgl{ border-top:1px solid var(--pp-rule); border-radius:0 }
body.sg-single .author{
  border-top:1px solid var(--pp-rule); padding-top:24px; margin-top:44px;
}
body.sg-single .author .pf{ border-radius:0; border:1px solid var(--pp-rule)!important;
  filter:grayscale(1) contrast(.95) brightness(1.2) }
body.sg-single .author .nm{ font-family:var(--font-display); font-weight:700 }

body.sg-single .share a{
  border:1px solid var(--pp-rule); border-radius:0; padding:11px 18px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; position:relative; overflow:hidden; z-index:0;
}
body.sg-single .share a::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .45s var(--pp-ease);
}
body.sg-single .share a:hover{ color:var(--paper) }
body.sg-single .share a:hover::before{ transform:translateY(0) }

/* --------------------------------------------------------------------------
   8. 関連記事・セクション見出し
   -------------------------------------------------------------------------- */
body.sg-single .sec-head{ border-top:1px solid var(--pp-rule); position:relative }
body.sg-single .sec-head::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--pp-rule); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--pp-ease);
}
body.sg-single .sec-head.pp-in::before{ transform:scaleX(1) }
body.sg-single .trio .ph.wide{ aspect-ratio:16/10 }

/* --------------------------------------------------------------------------
   9. 動きを減らす設定の人には全部止める
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.sg-single .prose h2::before,
  body.sg-single .sec-head::before{ transform:scaleX(1)!important; transition:none!important }
  body.sg-single .ph>img,
  body.sg-single .ph::after{ transition:none!important }
}