/* ============================================================
   kataban.css — /blog/ と /404.html が共有する土台
   作成: 2026-08-08（ブログセクション雛形）

   ★index.html はこのファイルを読み込まない。
     本体は 8MB の単一ファイルで CSS を内蔵しており、そこへ手を入れると
     DATA 行を巻き込む事故（＝デプロイ時の drift 判定が効かなくなる）を招く。
     このファイルは「本体に触らずに増やせるページ」のためだけに在る。

   ★:root のトークンは index.html の値を**そのまま写した**もの。
     値を変えるときは index.html 側と両方直す。片方だけ直すと
     トップページとブログで色が食い違う（コメントも本体の意図を残してある）。

   ★パスは全部ルート相対（/…）で書く。404.html は
     /a/b/c/存在しないパス でも配信されるので、相対パスだと壊れる。
   ============================================================ */

:root{
  color-scheme:dark;
  --paper:#07040f;          /* 地 */
  --surface:#0b0714;        /* 面（パネル・ボタン） */
  --field:#140d24;          /* 入力欄 */
  --edge:#2a2247;           /* 枠 */
  --edge-input:#6f6790;     /* 入力欄・プルダウンの枠 */
  --line:#221a3d;           /* 薄い枠 */
  --ink:#c9c3e0;            /* 本文 */
  --muted:#8b84ab;          /* ラベル（地 5.8 / 面 5.7:1 ＝ AA を確保した値） */
  --faint:#6f6790;          /* 淡い */
  --accent:#b337ff;         /* 紫 = 主アクセント */
  --accent-ink:#07040f;     /* 紫の上に載る文字。白だと 4.28:1 で基準未達なので地色を使う */
  --tag:#11eeff;            /* シアン = 副アクセント（リンク・hover） */
  --rare:#dcdc00;
  --danger:#dc0000;
  --danger-ink:#ffffff;
  --logo-pink:#e840a8;      /* ロゴ背面の発光 */
  --logo-gold:#f8b820;      /* ロゴ前面のゴールド */
  /* Press Start 2P / VT323 は日本語グリフを持たない。当てる先は
     「必ず英数字だけ」と分かっている短いラベルに限る。フォールバックには
     必ず現行の書体を1つ残す（読み込み失敗や日本語混在でそこだけ落ちるように）。 */
  --f-pixel:'Press Start 2P','Space Mono',ui-monospace,monospace;
  --f-vt:'VT323','Space Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--paper); color:var(--ink);
  min-height:100vh;
  font-family:"Space Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.4;
}
/* 地のグラデーションは viewport の大きさで敷く。body に background-image で持たせると
   高さが本文に追従し、長い記事では紫の光が画面全部を覆う。
   background-attachment:fixed は iOS Safari で効かないので、固定した層を1枚敷く。 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, #1e0d38 0%, #0a0619 45%, #07040f 100%);
}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}

/* 目が見えない人向けの読み飛ばしリンク。フォーカスされたときだけ現れる。 */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:0;z-index:80;background:var(--accent);color:var(--accent-ink);
  padding:10px 14px;font-family:var(--f-pixel);font-size:11px}

/* ============================================================
   サイトヘッダー（ブログ／404 共通）
   本体トップの巨大ロックアップではなく、1行に収まる小さい版。
   ロゴのビットマップと配色は index.html と同じ仕組みを使う。
   ============================================================ */
.sitehead{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:22px 0 16px; border-bottom:2px solid var(--edge);
}
.sitehead-brand{ display:flex; align-items:center; gap:12px;
  text-decoration:none; line-height:0; }
/* 小さい版のドット寸法。本体は clamp(7px,1.9vw,13px)。 */
.kb-word{ position:relative; display:inline-block; margin:0; line-height:0;
  --kb-px:clamp(3px,0.95vw,5px); }
.kb-word .kb-ghost{ position:absolute; inset:0; z-index:0;
  transform:translate(2px,2px); opacity:.85; }
.kb-word .kb-top{ position:relative; z-index:1; }
.kb-grid{ display:grid; grid-template-columns:repeat(41,var(--kb-px));
  grid-auto-rows:var(--kb-px); line-height:0; }
.kb-grid i{ display:block; }
.kb-on-pink{ background:var(--logo-gold); box-shadow:0 0 8px var(--logo-gold); }
.kb-on-cyan{ background:var(--logo-pink); box-shadow:0 0 6px var(--logo-pink); }
/* ロゴの隣の「型番」バッジ。日本語なので IBM Plex Sans JP。
   ★line-height を必ず指定する。親の .sitehead-brand はロゴのドット格子のために
     line-height:0 を持っており、そのまま継承すると日本語が行の高さ0に潰れて
     白い帯の中で読めなくなる（2026-08-08 の実測で確認）。 */
.sitehead-badge{ font-family:"IBM Plex Sans JP",sans-serif; font-weight:700;
  font-size:12px; line-height:1.3; letter-spacing:1px; color:var(--accent-ink);
  background:#ffffff; padding:3px 7px 4px; white-space:nowrap;
  box-shadow:0 0 10px rgba(255,255,255,.35); }

/* ツール本体へ戻る導線。ヘッダー右端。 */
.backlink{
  font-family:var(--f-pixel); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:2px solid var(--edge); background:var(--surface);
  padding:11px 14px; display:inline-flex; align-items:center; gap:9px;
  transition:background .12s,color .12s,border-color .12s;
}
.backlink:hover,.backlink:focus{
  background:var(--tag); border-color:var(--tag); color:var(--accent-ink); outline:none;
}
.backlink .arrow{ font-family:"Space Mono",monospace; font-size:13px; }

/* ブログの言語切替ドロップダウン（Amazon式のUIを踏襲）。一覧4本と記事28本で共通。
   ★2026-08-24 に <main> の先頭から .sitehead の中（ロゴの右隣）へ移した。
     .sitehead は justify-content:space-between の flex 行なので、以前ここに居た
     .backlink と同じ位置に収まる ―― margin は 0 にする（20px の下マージンが
     残っていると、ヘッダーの罫線との間だけ空いて行が下にずれる）。
   ★記事ページでは .backlink と並んで flex の子が3つになるが、wrap する行なので
     そのまま収まる（同日、記事28本へ展開したときに実測）。
   .langswitch は position:relative の起点。.langswitch-menu がその中で絶対配置。
   ★JS 側（kataban.js）の「初回訪問時にブラウザ言語の一覧ページへ飛ばす」処理は、
     .langswitch の**有無ではなく** data-autoredirect="true" の有無で判定する。
     属性を出すのは build_feeds.py が生成する一覧4本だけ。記事ページへこの
     マークアップを流用するときは属性を落とすこと（記事から別言語の一覧ページへ
     飛ばしてしまう）。既定＝属性なし＝飛ばさない、が安全側。 */
.langswitch{ position:relative; display:inline-block; margin:0; }
.langswitch-toggle{
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-pixel); font-size:10px; letter-spacing:.5px; text-transform:uppercase;
  background:var(--surface); border:2px solid var(--edge); color:var(--ink);
  padding:9px 13px; cursor:pointer; transition:border-color .12s,color .12s;
}
.langswitch-toggle:hover,.langswitch-toggle:focus{
  border-color:var(--tag); color:var(--tag); outline:none;
}
.langswitch-caret{ font-size:9px; transition:transform .12s; }
.langswitch[data-open="true"] .langswitch-caret{ transform:rotate(180deg); }
/* ★メニューは右端揃え（left:0 ではなく right:0）。ヘッダーへ移したことで
   トグルは行の**右端**に来る。メニューの min-width(150px) はトグルより広くなる
   ことがある（ko は「한국어」だけなのでトグルが狭い）ので、左端揃えだと
   はみ出す側が画面の外を向く。右端で揃えれば余る分は必ず内側へ伸びる。
   ★ただし「トグルが行の右端に来る」は**一覧ページでしか成り立たない**。記事ページは
     .backlink が入って .sitehead の flex の子が3つになり、狭い画面では langswitch だけが
     次の行の左端へ落ちる。そこでは right:0 が左向きのはみ出しに反転する
     （2026-08-25 実測 / ko 記事 390px: メニューが画面左へ 61.3px 出て4割が読めない）。
     折り返すかどうかは描画してみるまで決まらないので CSS では判定できない。
     kataban.js の fitMenu() が**開いた直後に実測して、はみ出すときだけ**
     style.left / style.right を上書きする。ここの right:0 はその既定値であって、
     収まっている限り上書きは起きない。片方だけ直さないこと。 */
.langswitch-menu{
  position:absolute; top:calc(100% + 4px); right:0; left:auto; z-index:20;
  list-style:none; margin:0; padding:4px; min-width:150px;
  background:var(--surface); border:2px solid var(--edge);
}
.langswitch-menu[hidden]{ display:none; }
.langswitch-menu a{
  display:block; padding:9px 11px; text-decoration:none; color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif; font-size:13px;
  border:2px solid transparent;
}
.langswitch-menu a:hover,.langswitch-menu a:focus{
  background:var(--tag); color:var(--accent-ink); outline:none;
}
.langswitch-menu a[aria-current="page"]{
  color:var(--tag); font-weight:600;
}
/* 中文・한국어だけラテン用の書体（ここは Space Grotesk）にグリフが無く、放っておくと
   フォールバック先の字面がローマ字と揃わない（2026-08-24 実測）。明示的に切り替える。 */
.langswitch-menu a:lang(zh),.langswitch-menu a:lang(ko){
  font-family:"IBM Plex Sans JP",sans-serif;
}

/* ============================================================
   ページ見出し
   ============================================================ */
.pagehead{ padding:34px 0 6px; }
.kicker{ font-family:var(--f-pixel); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.pagehead h1{ font-size:clamp(28px,5.5vw,40px); line-height:1.1; font-weight:700;
  letter-spacing:-.02em; margin:0; color:#ffffff; }
.pagehead .lede{ margin:16px 0 0; max-width:52ch; color:var(--muted); font-size:15px; }

/* ============================================================
   記事一覧
   ============================================================ */
.postlist{ list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0; }
.postlist > li{ border-top:1px solid var(--line); }
.postlist > li:last-child{ border-bottom:1px solid var(--line); }
/* 「サムネ | 本文」の2カラム。テキスト3つ（date/title/summary）は .post-body で
   1つの flex item にまとめてある ―― 裸のまま置くと横一列に並んでしまうため。
   ★center ではなく flex-start。本文が縦に伸びる幅（特に480px以下）だと center では
     サムネだけが中央に浮いて日付の行から離れる。 */
.post{ display:flex; align-items:flex-start; gap:20px; padding:24px 0; text-decoration:none; }
.post-body{ min-width:0; }
/* flex-shrink:0 が要る。付けないと長いタイトルに押されてサムネが縦長に潰れる。 */
.post-thumb{ flex:0 0 200px; width:200px; height:130px; object-fit:cover;
  border-radius:6px; background:var(--line); display:block; }
.post:hover .post-title,
.post:focus .post-title{ color:var(--tag); }
.post:focus{ outline:3px solid var(--accent); outline-offset:2px; }
.post-date{ font-family:var(--f-vt); font-size:18px; letter-spacing:.5px;
  color:var(--accent); margin:0 0 6px; display:block; }
.post-title{ font-size:1.25rem; font-weight:700; line-height:1.3; margin:0;
  color:#ffffff; transition:color .12s; }
.post-summary{ margin:9px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }

/* ★記事0本のときの表示（.emptystate / .es-lead）はここに在ったが、2026-08-24 に削除した。
   blog/index.html は build_feeds.py の生成物になり、**0本時の分岐を持たない**（記事が
   0本でも空の <ul class="postlist"> を書き出す）ので、この CSS だけ残しても発火しない。
   復活させるなら build_feeds.py 側にマークアップを足すのが先。旧ルールは git 履歴に在る。 */

/* ============================================================
   一覧ページのページ送り（2ページ目以降がある言語だけに出る）
       «  ‹  1 2 3 4 5  ›  »
   ★マークアップは build_feeds.py の build_listing() が作る生成物。
     入るのは <ul class="postlist"> の直後・.cta の直前。
   ★以前は3カラム grid（前へ / 位置表示 / 次へ）だった。要素の有無で位置が
     さまようのを grid-column の明示で押さえていたが、いまは**ボタン群を
     ひとかたまりで中央寄せ**するので、その問題自体が起きない。
     行けない矢印も span で必ず出す（build_listing() 側）ので、
     ボタンの個数と幅がページ間で変わらない。だから flex に戻せる。
   ★480px 専用の指定は持たない。数字が増えて入り切らなければ flex-wrap で
     2段に折り返すだけで、横スクロールは出ない。
   ★align-items は center ではなく **stretch**。数字は VT323 20px、矢印は本文書体 18px で
     中身の高さが違い、center だと箱が 42px と 40px に割れる（2026-09-07 実測）。
     stretch なら行の中でいちばん高い箱に揃う。
   ============================================================ */
.pagenav{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:8px;
  margin:28px 0 0; padding:20px 0 0; border-top:1px solid var(--line);
}
/* ★リンク(a)も、押せない矢印・現在ページ(span)も同じ箱。見た目の差は下の
   .is-current / .is-off だけが付ける。 */
.pagenav-item{
  display:flex; align-items:center; justify-content:center;
  min-width:42px; padding:9px 12px;
  border:2px solid var(--edge); background:var(--surface);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:14px; font-weight:600; line-height:1;
  color:var(--tag); text-decoration:none;
  transition:color .12s,border-color .12s,background .12s;
}
/* 数字だけなので VT323 を当てられる（.post-date / .postmeta と同じ条件）。
   矢印（« ‹ › »）は本文書体のまま ―― VT323 にグリフが無い。 */
.pagenav-num{ font-family:var(--f-vt); font-size:20px; letter-spacing:.5px; }
.pagenav-edge{ font-size:18px; }
/* リンクは footer / .prose と同じ「シアン → hover で紫」。
   ★span には当てない（押せないものが反応すると嘘になる）。 */
a.pagenav-item:hover,a.pagenav-item:focus{
  color:var(--accent); border-color:var(--accent); outline:none;
}
a.pagenav-item:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
/* 現在ページ。★白は --accent の上で 4.28:1 と基準未達なので地色(--accent-ink)を使う。 */
.pagenav-item.is-current{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
/* 行けない矢印。枠は残して幅を保ち、色だけ落とす。 */
.pagenav-item.is-off{
  color:var(--faint); border-color:var(--line); background:transparent;
}

/* ============================================================
   記事本文（.prose）
   本体の .howto と同じ考え方: 見出しは本文書体のまま大きさだけで階層を出す。
   ピクセル書体は日本語グリフを持たないので本文には当てない。
   ============================================================ */
.prose{ margin:26px 0 0; line-height:1.75; font-size:16px; }
.prose > *:first-child{ margin-top:0; }
.prose h2{ font-size:1.3rem; line-height:1.35; margin:38px 0 12px; color:#ffffff;
  padding-top:20px; border-top:1px solid var(--line); }
.prose h3{ font-size:1.06rem; margin:26px 0 8px; color:var(--ink); }
.prose p{ margin:0 0 16px; }
.prose ul,.prose ol{ margin:0 0 18px 1.3em; padding:0; }
.prose li{ margin:7px 0; }
.prose a{ color:var(--tag); text-decoration:underline; }
.prose a:hover,.prose a:focus{ color:var(--accent); }
.prose strong{ color:#ffffff; }
.prose em{ font-style:italic; }
.prose blockquote{ margin:20px 0; padding:2px 0 2px 18px;
  border-left:3px solid var(--accent); color:var(--muted); }
/* 型番・コマンドなど。本体のカードと同じ IBM Plex Mono。 */
.prose code{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.9em;
  background:var(--field); border:1px solid var(--edge); padding:1px 5px; }
.prose pre{ background:var(--field); border:1px solid var(--edge); padding:14px;
  overflow-x:auto; margin:0 0 18px; }
.prose pre code{ background:none; border:none; padding:0; }

/* 公式ソース（トレーラー・公式発表）へのリンクを1本にまとめる箱。
   地と枠は index.html の .slab-copy / .btn-copy と同じ #241c40 / #4a4278 を踏襲する。
   ★あちらは押せるボタンなので hover を持つ。こちらは箱の中の <a> が押せる要素で
     箱自体はクリック対象ではないため、箱には hover を付けない。
   ★リンクの hover 色だけ差し替えている。.prose a:hover は --accent(#b337ff) だが、
     この地 #241c40 の上では 3.73:1 しか出ず AA の 4.5 を下回る（実測）。
     index.html が .slab-copy.done / .btn-copy.done で同じ問題に当てているのと
     同じ色 #bf57ff（同色相・明度だけ上げたもの / 4.58:1）をここでも使う。
     ★--accent を今後変更してもこの1行は追随しない。トークンを触るときは見直すこと。 */
.prose .official-sources{ margin:0 0 18px; padding:14px 16px;
  background:#241c40; border:1px solid #4a4278; border-radius:8px; }
.prose .official-sources p{ margin:0; }
.prose .official-sources a:hover,.prose .official-sources a:focus{ color:#bf57ff; }

/* Kataban 自身の検索結果へ誘導する箱。すぐ上の .official-sources と見分けが付くように、
   地は同じ #241c40 のまま**枠と文字だけ**ロゴの2色（--logo-pink / --logo-gold）で強める。
   ★地を一段明るく(#2f2652)する案は採らなかった。その地ではリンクの hover が
     .official-sources で使った #bf57ff でも 3.96:1 に落ちて AA(4.5)を割る（実測）。
     地を据え置いて文字色を金に振れば 9.02:1 で、hover の白は 15.97:1 になる。
   ★下線は .prose a から継承させたまま残す。色だけで「押せる」を伝えない。 */
.prose .kataban-search-cta{ margin:0 0 18px; padding:14px 16px;
  background:#241c40; border:2px solid var(--logo-pink); border-radius:8px; }
.prose .kataban-search-cta p{ margin:0; }
.prose .kataban-search-cta a{ color:var(--logo-gold); font-weight:600; }
.prose .kataban-search-cta a:hover,.prose .kataban-search-cta a:focus{ color:#ffffff; }
.prose img{ max-width:100%; height:auto; display:block; margin:20px 0; }
.prose figure{ margin:20px 0; }
.prose figcaption{ margin-top:8px; font-size:13px; color:var(--faint); }
/* 表は狭い画面で溢れるので、囲いの側で横スクロールさせる（本文は横に流さない）。 */
.prose .tablewrap{ overflow-x:auto; margin:0 0 18px; }
.prose table{ border-collapse:collapse; width:100%; font-size:14px; }
.prose th,.prose td{ border:1px solid var(--edge); padding:9px 11px; text-align:left; }
.prose th{ background:var(--surface); color:#ffffff; font-weight:700; }

/* ============================================================
   .card-table — 600px以下で「1行 = 1カード」に積み替える表（2026-08-21）。
   使い方:
     <div class="tablewrap">
       <table class="card-table">
         <thead><tr><th>Title</th>…</tr></thead>
         <tbody><tr><td data-label="Title">…</td>… <td class="cta" data-label="…"><a …></td></tr>
   ★オプトイン。class を付けた表だけが積み替わる。素の <table> は今までどおり
     .tablewrap の overflow-x:auto で横スクロールする（列を横に並べて比較させたい
     表 ―― 例: 地域別の発売日 ―― はカードにすると比較が壊れるので、付けない）。
   ★列名は td の data-label から出す。nth-child で CSS 側に列名を書くと表ごとに
     別ルールが要るうえ、列を1つ足したときに黙ってラベルがずれる。
   ★thead は display:none で消す。列名は各 td が data-label として持っているので
     情報は落ちない（読み上げも td の ::before ではなく属性由来の文字が出る）。
   ★.tablewrap の overflow-x:auto は外さない。カード化すると横に溢れないので
     効かなくなるだけで、外すと600px超で効かなくなる。
   ★600px超では1行も効かない。通常の表のまま。
   ============================================================ */
@media (max-width:600px){
  /* 表の骨格を解体してブロックに戻す。border-collapse は separate へ戻さないと
     tr に border-radius が効かない（collapse だと角が丸まらない）。 */
  .prose table.card-table{ display:block; border-collapse:separate; border-spacing:0; }
  .prose table.card-table thead{ display:none; }
  .prose table.card-table tbody{ display:block; }

  .prose table.card-table tr{
    display:block;
    margin:0 0 12px;
    padding:12px 14px;
    background:var(--surface);
    border:1px solid var(--edge);
    border-radius:8px;
  }
  .prose table.card-table tr:last-child{ margin-bottom:0; }

  /* セルは .prose td の枠と余白を打ち消してから積む。仕切りは行間の細い罫だけ。 */
  .prose table.card-table td{
    display:block;
    width:auto;
    border:0;
    padding:7px 0;
    text-align:left;
  }
  .prose table.card-table td + td{ border-top:1px solid var(--line); }

  /* 列名。--muted は面(--surface)の上で 5.7:1 を確保した値なのでラベルに使える。 */
  .prose table.card-table td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* リンクのセルはボタンにする。
     ★クラス名は .cta ではなく .cell-cta。.cta は記事末尾の導線ブロック用として
       既にサイト共通で使われている（下の「CTA」節。margin:44px / padding:28px 24px /
       text-align:center / 枠 / 背景）。td に .cta を付けるとそれを全部拾い、
       600px以下ではセルの手前に44pxの空きが出て、600px超では表のセルが崩れる。
     リンクのセルはカード内で唯一押せるものなので幅いっぱいに広げ、
     min-height:44px で指のサイズに合わせる（サイト全体の押せる面と同じ基準）。
     ★ラベル(::before)は出さない。ボタンの文言自体が用を成すので、
       「KATABAN」と重ねると同じことを2回言うことになる。
     ★色は --accent(紫)の塗り。文字は --accent-ink＝地色を使う。白だと 4.28:1 で
       コントラスト基準に届かない（:root のコメント参照）。 */
  .prose table.card-table td.cell-cta{ padding:12px 0 2px; border-top:0; }
  .prose table.card-table td.cell-cta::before{ content:none; }
  .prose table.card-table td.cell-cta a{
    display:flex; align-items:center; justify-content:center;
    min-height:44px; padding:10px 14px;
    background:var(--accent); color:var(--accent-ink);
    border-radius:6px;
    font-weight:700; text-decoration:none;
  }
  .prose table.card-table td.cell-cta a:hover,
  .prose table.card-table td.cell-cta a:focus{
    background:var(--tag); color:var(--accent-ink);
  }
}
/* 日本語のタイトル・読みを本文に混ぜるとき用。本体のカードと同じ書体に揃える。 */
.prose .jp{ font-family:"IBM Plex Sans JP",sans-serif; }

/* 記事メタ（日付） */
.postmeta{ margin:14px 0 0; font-family:var(--f-vt); font-size:19px;
  letter-spacing:.5px; color:var(--faint); }

/* ============================================================
   CTA — ツール本体への導線。記事の本文下と 404 で使う。
   ============================================================ */
.cta{ margin:44px 0 0; padding:28px 24px; text-align:center;
  border:1px solid var(--edge); background:rgba(11,7,20,.5); }
.cta h2{ margin:0 0 10px; font-size:1.15rem; line-height:1.35; color:#ffffff; }
.cta p{ margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.65; }
.ctabtn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-pixel); font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none;
  padding:15px 22px; border:2px solid var(--accent);
  background:var(--accent); color:var(--accent-ink);
  box-shadow:0 0 18px -2px rgba(179,55,255,.55);
  transition:background .12s,color .12s,border-color .12s;
}
/* 押した先が同じ紫のままだと反応が見えないので、意図的に離れた色相へ振る
   （本体の SCAN BARCODE ボタンと同じ考え方）。 */
.ctabtn:hover,.ctabtn:focus{
  background:var(--tag); border-color:var(--tag); color:var(--accent-ink); outline:none;
}

/* ============================================================
   フッター（本体と同じ見た目）
   ============================================================ */
footer{ margin-top:52px; border-top:2px solid var(--edge); padding:18px 0 40px;
  font-family:"Space Mono",monospace; font-size:11px; color:var(--muted); line-height:1.6; }
footer a{ color:var(--tag); text-decoration:underline; }
footer a:hover,footer a:focus{ color:var(--accent); }

/* ---- フッターのブランド署名（★★★／タグライン／ロゴ）2026-08-22 ----
   フッターの**最下部**に置く署名。出典・アフィリエイト表記・ナビリンクを読み切った
   あとに来る締めなので、上に 30px 空けて中央に積む。
   ★区切り罫線は入れない。フッター上端に既に 2px の罫線があり、2本目を足すと
     足元がうるさくなる（BIN_DIVER_DESIGN.md「罫線と余白で静かに整える」）。

   ロゴは --kb-px を vw で伸ばさず 3px 固定にする。足元の署名が画面幅で育つと
   主張が強くなりすぎるのと、固定値なら index.html 側と全幅で同寸になるため
   （ヘッダーの clamp が2系統ある問題を持ち込まない）。41×3=123px / 7×3=21px。

   ★セレクタは .foot-brand で入れ子にしてある。.foot-brand--x のような同詳細度の
     modifier にすると、kataban.css と index.html で .kb-word との前後関係が違うため
     （index.html はフッターCSSがロゴCSSより前にある）片方だけ効かなくなる。
   ★このブロックは index.html のインライン <style> と**バイト一致**で持つ。
     ズレたら diff で分かるようにしてある。片方だけ直さない。 */
/* ★text-align:center は保険ではなく必須。320px 幅ではタグラインが2行に折り返すので
   （実測: タグライン 287.5px vs 内容領域 284px）、align-items だけだと2行目が左に寄る。 */
.foot-brand{ display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:11px; margin:30px 0 0; }
/* animation/filter は index.html 側の .kb-word（呼吸アニメ・reduced-motion の
   drop-shadow）を殺すためだけに要る。kataban.css には kb-breathe が無いので
   ここでは無害だが、2つのコピーを同一に保つためあえて書いてある。 */
.foot-brand .kb-word{ --kb-px:3px; animation:none; filter:none; }
/* ゴーストのずらし幅。ヘッダーの 4px/2px は 3px ドットだと1ドット以上の段差になり
   別の字に見えるので 1px まで詰める。 */
.foot-brand .kb-ghost{ transform:translate(1px,1px); }
/* グローもヘッダー基準(8〜12px)だと 3px ドットでは滲んで潰れる。 */
.foot-brand .kb-on-pink{ box-shadow:0 0 4px var(--logo-gold); }
.foot-brand .kb-on-cyan{ box-shadow:0 0 3px var(--logo-pink); }
/* ★★★ は装飾。font-family をあえて指定していない ―― ★(U+2605) は Press Start 2P にも
   Space Mono にも無く、どの指定でも必ずシステムのフォールバックが描くため、
   指定しても結果が変わらない（20px 指定での実測: 各書体の 'A' は 10〜12.6px なのに
   ★ は一律 1em）。字形がプラットフォームで変わる点は承知のうえで許容する。
   ★margin-right の負値は letter-spacing の相殺。letter-spacing は**最後の1文字の
     後ろにも空きを作る**ので、これが無いと中央寄せが左へ半文字ぶんずれる。
     どちらも em なので font-size を変えれば追従する（実寸を書かない理由）。
   ★色は #ffffff（2026-08-22 に var(--muted) から変更）。タグラインと同じ白なので、
     階層は**色ではなく字面の大きさと余白**で作る ―― ★16px / タグライン10px、
     間は .foot-brand の gap:11px。色で差を付けようとして --accent(紫) や
     --tag(シアン) に手を出さないこと。紫は「型番の一致」「Buyee=届く経路」に予約、
     シアンはフッターのリンク色なのでリンクに見える。 */
.foot-stars{ margin:0; margin-right:-.7em; font-size:16px; line-height:1;
  letter-spacing:.7em; color:#ffffff; }
/* 白はヘッダーの .kb-tagline に揃えた。ただし text-shadow のグローは付けない
   ＝足元はヘッダーより静かに保つ。 */
.foot-tagline{ margin:0; font-family:var(--f-pixel); font-size:10px;
  letter-spacing:1.5px; line-height:1.5; color:#ffffff; }

@media (max-width:480px){
  .sitehead{ padding:16px 0 14px; }
  .backlink{ padding:10px 12px; font-size:9px; }
  .post-title{ font-size:1.05rem; }
  .post{ flex-direction:column; gap:12px; }
  .post-thumb{ width:100%; height:auto; aspect-ratio:200/130; flex:0 0 auto; }
}