/* ============================================================
   post.css - 投稿（single.php）と記事一覧（archive.php）の固有部品

   読み込み順は design.css -> page.css -> post.css。
   タイトル帯（.pg-hero）・本文の書体（.pg-body）・カード（.news-item）は
   すでにある定義をそのまま使い、ここでは記事にしか出ない部品だけを書く。
     .pg-meta    タイトル帯の日付・カテゴリー
     .toc        目次
     .post-back  記事一覧へ戻るボタン
     .post-nav   前後の記事
     .rel        あわせて読みたい記事
     .arc-*      一覧ページ（説明文・ページ送り）
     .th--ph     アイキャッチがサイトアイコンだった場合のプレースホルダ
   ============================================================ */

/* ===== タイトル帯の記事メタ ===== */
/* タイトル帯は左寄せ（page.css の .pg-hero に text-align 指定は無い）ので揃える */
.pg-meta{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:8px 14px;margin:18px 0 0;
}
/* 記事タイトルは固定ページ名より長い。50pxのままだと3〜4行になるので詰める */
.exe-single .pg-hero h1{font-size:clamp(23px,2.9vw,36px);line-height:1.5}
.pg-meta time{
  font-family:var(--en);font-size:15px;letter-spacing:.1em;
  color:rgba(255,255,255,.82);
}
.pg-meta .cat{
  font-size:10.5px;letter-spacing:.12em;color:#fff;
  background:var(--accent);padding:4px 11px;
}
.pg-meta .upd{
  font-size:11.5px;letter-spacing:.08em;color:rgba(255,255,255,.58);
}

/* ===== 目次 ===== */
.toc{
  margin:0 0 clamp(44px,5vw,64px);padding:clamp(24px,3vw,34px) clamp(22px,3vw,38px);
  background:var(--bg-soft);border-top:2px solid var(--accent);
}
.toc-h{
  margin:0 0 16px;font-family:var(--serif);font-size:17px;font-weight:500;
  letter-spacing:.06em;color:var(--ink);
}
.toc-h::after{
  content:"";display:block;width:26px;height:1px;background:var(--accent);margin-top:10px;
}
.toc ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  display:grid;gap:9px;
}
/* 見出しが多い長い記事だと目次だけで画面が埋まるので、広い画面では2段組にする */
@media (min-width:900px){
  .toc ol{grid-template-columns:1fr 1fr;gap:9px clamp(24px,3vw,44px)}
}
.toc li{counter-increment:toc;position:relative;padding-left:2.5em;line-height:1.75}
.toc li::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--en);font-size:13px;letter-spacing:.06em;color:var(--accent);
}
.toc a{
  color:var(--body);font-size:14.5px;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.toc a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* 目次から飛んだ先が固定ヘッダーに隠れないようにする（JS不要） */
.pg-body h2[id],.pg-body h3[id]{scroll-margin-top:96px}

/* ===== SNSシェアボタン =====
   VK ExUnit が the_content の末尾に <ul><li class="sb_icon"> を足す。
   vkExUnit_common_style を dequeue しているので、素の箇条書き（左に横棒）として
   出てしまっていた。プラグインのCSS 20KB を戻すと他の見た目にも影響するので、
   ここで最小限だけ整える。親の <ul> にはクラスが無いため :has() を使わず
   li 側を inline-flex にして横並びを成立させている */
/* page.css の `.pg-body ul` は display:grid なので、li を inline-flex にしても
   1行ずつ並ぶ。親の <ul> にクラスが無いため :has() で横並びにする。
   :has() が効かない環境では縦並びのまま＝崩れではないので害はない */
.pg-body ul:has(> li.sb_icon){
  display:flex;flex-wrap:wrap;gap:10px;margin:2.2em 0 0;
}
.pg-body li.sb_icon{
  display:inline-flex;margin:0;padding:0;
}
.pg-body li.sb_icon::before{content:none;display:none}
.pg-body li.sb_icon > a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line);border-bottom-width:1px;
  font-size:12.5px;letter-spacing:.06em;color:var(--body);
  transition:border-color .3s,color .3s;
}
.pg-body li.sb_icon > a:hover{border-color:var(--accent);color:var(--accent-ink)}
.pg-body li.sb_icon .sb_svg_icon{width:1.1em;height:1.1em}

/* ===== 記事一覧へ戻る ===== */
.post-back{margin:clamp(40px,4.5vw,60px) 0 0;text-align:center}

/* ===== 前後の記事 ===== */
/* 本文カラムの下余白と二重にならないよう、投稿では .pg-body 側を詰める */
.exe-single .pg-body{padding-bottom:clamp(44px,5vw,64px)}
.post-nav{padding:0 0 clamp(60px,7vw,90px);background:var(--bg)}
.post-nav .wrap-narrow{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);
}
.post-nav-i{
  display:block;padding:22px 24px;border:1px solid var(--line);background:#fff;
  transition:border-color .3s,box-shadow .3s;
}
.post-nav-i:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.post-nav-i span{
  display:block;font-family:var(--en2);font-size:10px;letter-spacing:.2em;
  color:var(--accent);text-transform:uppercase;margin-bottom:9px;
}
.post-nav-i b{
  display:block;font-family:var(--serif);font-size:15px;font-weight:500;
  line-height:1.75;color:var(--ink);
}
.post-nav-i.next{text-align:right}
/* 片方しか無いときに幅の半分で寄ってしまわないようにする */
.post-nav .wrap-narrow > :only-child{grid-column:1 / -1}

/* ===== あわせて読みたい記事 ===== */
.rel{padding:clamp(70px,8vw,110px) 0;background:var(--bg-soft)}
.rel .sec-head{margin-bottom:clamp(30px,4vw,44px)}
/* トップの Column は 110px までの巨大な英字。記事の下に置くと主役を食うので詰める */
.rel .sec-head .en{font-size:clamp(34px,5vw,58px)}

/* ===== アイキャッチのプレースホルダ =====
   投稿のアイキャッチがサイトアイコン（ロゴ）のままのものが多く、そのまま出すと
   同じ画像が並ぶ。16/10 の枠は保って英字だけを薄く置き、グリッドの高さを揃える */
/* `.news-item .th--ph` の見た目は **モック（= design.css）側に置いてある**。
   トップページの Column セクションでも同じプレースホルダを使うため。
   ここで重複定義しない。
   なお design.css の `.news-item .th` が background を (0,2,0) で持っているので、
   `.th--ph` だけの (0,1,0) では負けて背景が当たらない（2026-09-16 に踏んだ）。 */

/* ===== 一覧・関連記事のカードを本文スタイルから守る =====
   一覧と関連記事は <main class="pg-body"> の中にあるため、page.css の
   .pg-body h3（明朝・左に青のライン）と .pg-body p（本文サイズ）が
   .news-item h3 / .news-ex と同じ詳細度(0,1,1)で当たり、後から読む page.css が勝つ。
   カードはトップの Column と同じ見た目にしたいので、詳細度を1つ上げて戻す */
.pg-body .news-item h3{
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.85;
  letter-spacing:.02em;color:var(--ink);
  margin:0;padding:0;border:0;background:none;
}
.pg-body .news-item h3::before,.pg-body .news-item h3::after{content:none;display:none}
.pg-body .news-item:hover h3{color:var(--accent-ink)}
.pg-body .news-ex{
  margin:10px 0 0;font-size:13.5px;line-height:1.95;color:var(--body);
}

/* ===== 一覧ページ ===== */
.arc-desc{
  max-width:820px;margin:0 auto clamp(40px,5vw,60px);text-align:center;
  font-size:15px;line-height:2.1;color:var(--body);
}
.arc-list{margin-top:0}
.news-ex{
  margin:10px 0 0;font-size:13.5px;line-height:1.95;color:var(--body);
}
.arc-none{text-align:center;color:var(--body);padding:40px 0}

.arc-pager{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(50px,6vw,76px);
}
.arc-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--line);background:#fff;
  font-family:var(--en);font-size:15px;letter-spacing:.06em;color:var(--body);
  transition:border-color .3s,color .3s,background .3s;
}
.arc-pager a.page-numbers:hover{border-color:var(--accent);color:var(--accent-ink)}
.arc-pager .page-numbers.current{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.arc-pager .page-numbers.dots{border-color:transparent;background:none}
.arc-pager .prev,.arc-pager .next{font-family:var(--sans);font-size:13px}

/* ===== 一覧は本文カラムではなく広いカラムを使う ===== */
.exe-archive .pg-body{padding-bottom:clamp(70px,8vw,120px)}

/* ===== SP ===== */
@media (max-width:860px){
  .rel .news-list,.arc-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .rel .news-list,.arc-list{grid-template-columns:1fr}
  .post-nav .wrap-narrow{grid-template-columns:1fr}
  .post-nav-i.next{text-align:left}
  .pg-meta{justify-content:flex-start}
  .toc li{padding-left:2.2em}
  .toc a{font-size:14px}
}