/* ==========================================================================
   シゴトのホント — BRUTUS準拠（awesome-design-md-jp/design-md/brutus）
   純白 #ffffff × 漆黒 #101010、雑誌グリッド、筑紫ゴシック風の重厚見出し、
   特集カテゴリカラー、暗色帯 #191919、英字+和文の対訳キャプション。
   商用フォント不使用: 和文=Noto Sans JP、欧文(Futura代替)=Jost。
   ========================================================================== */

:root {
  --ink:      #101010;   /* Brutus Ink（純黒ではなく僅かに浮いた漆黒） */
  --charcoal: #191919;   /* 暗色帯 */
  --footer:   #2a2f33;   /* Footer Slate 相当 */
  --muted:    #8a8a8a;
  --line:     #eaeaea;
  --bg:       #ffffff;
  --cream:    #f4f3ef;   /* WHAT'S NEW 帯 */
  --beige:    #e2dfd7;   /* RECOMMEND 帯 */

  /* 職種ハブ カテゴリカラー（今後追加予定の driver / sekokan も先に定義） */
  --cat-keiri:   #275ba1; /* Deep Navy */
  --cat-jimu:    #577590; /* Slate Blue */
  --cat-eigyo:   #e63946; /* Tomato Red */
  --cat-driver:  #5fb7ff; /* Sky Blue */
  --cat-sekokan: #b87333; /* Copper */
  --cat-seizo:   #2f6d3e; /* Factory Green */
  --cat-denki:   #6a4c93; /* Electric Violet */
  --cat-setsubi: #1f7a8c; /* Utility Teal */
  --cat-default: #52606d; /* 職種ハブに属さない横断記事用のニュートラル面色 */

  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Jost", sans-serif;

  --maxw:      1160px;  /* home / hub（雑誌ワイド） */
  --maxw-read: 740px;   /* 記事本文・静的ページ */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-jp);
  font-size: 16px; line-height: 1.5;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }  /* height:auto が無いと width/height属性の画像が潰れる */
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--cat-jimu); }

main { max-width: var(--maxw-read); margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
main.wide { max-width: var(--maxw); }

/* 見出し: 筑紫ゴシック風＝Noto Sans JP 太ウェイトで代替。palt不使用・letter-spacing normal */
h1, h2, h3 { font-family: var(--font-jp); line-height: 1.4; color: var(--ink); }
h1 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight: 900; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem); font-weight: 800; margin-top: 3rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin-top: 2rem; }

/* 雑誌シグネチャー: 英字（Futura代替=Jost）+ 和文（筑紫風=Noto Sans JP）の対訳キャプション */
.mag-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55em;
  margin: 0 0 1rem;
}
.mag-head .en {
  font-family: var(--font-en); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink); font-size: clamp(1rem, .85rem + .8vw, 1.3rem);
}
.mag-head .ja {
  font-family: var(--font-jp); font-weight: 900;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem); color: var(--ink);
}

/* カテゴリカラーの割り当て（このクラスが付く要素配下で var(--cat) を参照する） */
.cat-keiri   { --cat: var(--cat-keiri); }
.cat-jimu    { --cat: var(--cat-jimu); }
.cat-eigyo   { --cat: var(--cat-eigyo); }
.cat-driver  { --cat: var(--cat-driver); }
.cat-sekokan { --cat: var(--cat-sekokan); }
.cat-seizo   { --cat: var(--cat-seizo); }
.cat-denki   { --cat: var(--cat-denki); }
.cat-setsubi { --cat: var(--cat-setsubi); }
.cat-default { --cat: var(--cat-default); }

/* --------------------------------------------------------- ヘッダー */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  height: 64px; padding: 0 clamp(1rem, 4vw, 2rem);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.site-header .brand { flex: none; display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.site-header .brand .en {
  font-family: var(--font-en); font-weight: 600; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.site-header .brand .ja { font-family: var(--font-jp); font-weight: 900; font-size: 1.1rem; color: var(--ink); }
.site-header nav {
  display: flex; align-items: center; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.site-header nav::-webkit-scrollbar { display: none; }
.site-header nav a {
  position: relative; flex: none; margin-left: 1.1rem; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .92rem; padding: .3rem 0;
}
.site-header nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease);
}
.site-header nav a:hover { color: var(--ink); }
.site-header nav a:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------- ヒーロー（home） */
.hero { padding: 2.5rem 0 2rem; }
.hero h1 { margin: 0 0 .9rem; }
.hero .lede { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0; }

/* --------------------------------------------------------- 職種ハブ（色面カード = このサイトのシグネチャー） */
.hub-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px; background: var(--line); margin: 2rem 0 3.5rem; border: 1px solid var(--line);
}
.hub-card {
  position: relative; display: flex; flex-direction: column; gap: .5rem;
  padding: 2rem 1.6rem 2.2rem; text-decoration: none; color: #fff;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat);
  transition: padding .2s var(--ease);
}
.hub-card .en {
  font-family: var(--font-en); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.hub-card strong { font-family: var(--font-jp); font-weight: 900; font-size: 1.5rem; }
.hub-card .desc { font-size: .88rem; line-height: 1.6; opacity: .92; max-width: 26ch; }
.hub-card:hover { padding-left: 2rem; }

/* --------------------------------------------------------- セクション帯 */
.section-cream { background: var(--cream); margin: 0 -1.25rem; padding: 3rem 1.25rem 3.5rem; }
.more-link { text-align: center; margin-top: 2.6rem; }
.more-link a {
  display: inline-block; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .92rem; border-bottom: 2px solid var(--ink); padding-bottom: .2rem;
}
.more-link a:hover { color: var(--muted); border-color: var(--muted); }

/* --------------------------------------------------------- 記事カード */
.article-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 2.2rem 1.4rem; margin-top: 1.6rem;
}
.article-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.article-card .thumb { aspect-ratio: 1200 / 630; background: var(--cream); overflow: hidden; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.article-card .thumb--plate {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat);
}
.article-card .thumb--plate .en {
  font-family: var(--font-en); font-weight: 800; font-size: 1.5rem; letter-spacing: .06em;
  color: #fff; text-transform: uppercase;
}
.article-card .body { padding-top: .85rem; display: flex; flex-direction: column; gap: .45rem; }
.article-card .badge {
  align-self: flex-start; display: inline-flex; align-items: baseline; gap: .4em;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat);
  color: #fff; padding: .18rem .6rem;
}
.article-card .badge .en { font-family: var(--font-en); font-weight: 600; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.article-card .badge .ja { font-family: var(--font-jp); font-weight: 700; font-size: .72rem; }
.article-card .ttl { font-family: var(--font-jp); font-weight: 800; font-size: 1.02rem; line-height: 1.55; }
.article-card time { font-family: var(--font-en); font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.article-card:hover .thumb img { transform: scale(1.04); }
.article-card:hover .ttl { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* --------------------------------------------------------- 職種ハブ ページの帯見出し */
.hub-masthead { padding: 2.5rem 0 1.8rem; border-bottom: 4px solid var(--cat); }
.hub-masthead .mag-head .en { color: var(--cat); }
.hub-masthead h1 { margin: 0; }

/* --------------------------------------------------------- 記事本文 */
.post > header { margin-bottom: 2.2rem; }
.post .badge {
  display: inline-flex; align-items: baseline; gap: .45em; margin-bottom: 1rem;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat);
  color: #fff; padding: .25rem .7rem;
}
.post .badge .en { font-family: var(--font-en); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.post .badge .ja { font-family: var(--font-jp); font-weight: 700; font-size: .78rem; }
.post > header h1 { margin: 0 0 .8rem; }
.post-meta { color: var(--muted); font-size: .85rem; font-family: var(--font-en); letter-spacing: .01em; }
.post-meta .supervisor, .post-meta .readtime, .post-meta .updated { margin-left: .8rem; font-family: var(--font-jp); }
.post-meta .readtime::before, .post-meta .supervisor::before, .post-meta .updated::before { content: "・"; margin-right: .8rem; color: var(--line); }

.post-body { font-size: 18px; line-height: 1.6; }
.post-body > h2:first-child { margin-top: 0; }
.post-body p { margin: 1.2rem 0; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li { margin: .45rem 0; }

.post figure { margin: 2.2rem 0; }
.post figure.post-hero { margin: 1.6rem 0 2.4rem; }
.post figure img { width: 100%; border: 1px solid var(--line); }

.post-body table { border-collapse: collapse; width: 100%; font-size: .85em; line-height: 1.6; margin: 1.8rem 0; }
.post-body th { background: var(--cream); font-weight: 700; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; }
.post-body blockquote { margin: 1.6rem 0; padding: .3rem 1.25rem; border-left: 3px solid var(--ink); color: var(--muted); }
.post-body code { background: var(--cream); padding: .1em .4em; font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.post-body pre { background: var(--charcoal); color: #f2f2f2; padding: 1.1rem 1.2rem; overflow-x: auto; font-size: .86em; line-height: 1.7; margin: 1.8rem 0; }
.post-body pre code { background: none; padding: 0; color: inherit; }

/* --------------------------------------------------------- 記事まわりの部品 */
/* パンくず */
.crumbs { font-size: .78rem; color: var(--muted); margin: 0 0 1.4rem; line-height: 1.9; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin: 0 .35em; }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; margin: 0; }

/* 目次: 記事本文には何も書かずLiquidが本文のH2から組む */
.post-toc {
  background: var(--cream); border-top: 3px solid var(--cat, var(--ink));
  padding: 1.4rem 1.5rem 1.5rem; margin: 2.4rem 0;
}
.post-toc .toc-ttl {
  margin: 0 0 .8rem; font-weight: 900; font-size: .95rem; letter-spacing: .04em;
}
.post-toc ol { counter-reset: toc; list-style: none; margin: 0; padding: 0; }
.post-toc li { counter-increment: toc; margin: .1rem 0; display: flex; gap: .7em; font-size: .95rem; line-height: 1.7; }
.post-toc li::before {
  content: counter(toc, decimal-leading-zero); flex: none;
  font-family: var(--font-en); font-weight: 700; font-size: .82rem;
  color: var(--cat, var(--muted)); padding-top: .18em;
}
.post-toc a { color: var(--ink); text-decoration: none; }
.post-toc a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* あわせて読みたい */
.post-related { margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.post-related .mag-head .en { color: var(--cat, var(--ink)); }
.post-related .article-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.6rem 1.1rem; }
.post-related .article-card .ttl { font-size: .92rem; }
.post-related .more-link { margin-top: 2rem; }

/* --------------------------------------------------------- 本文の装飾 */
/* リード（導入の1段落）だけ少し大きく、雑誌の前書きの調子にする */
.post-body > p:first-of-type { font-size: 1.08em; line-height: 1.85; }

/* H2は色面の耳つき、H3は縦罫。カテゴリカラーで記事の所属が本文でも分かる */
.post-body h2 {
  position: relative; padding: 1.1rem 0 .5rem; margin-top: 3.2rem;
  border-top: 3px solid var(--ink);
}
.post-body h2::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 3.5rem; height: 3px;
  background: var(--cat, var(--ink));
}
.post-body h3 {
  padding-left: .7rem; border-left: 4px solid var(--cat, var(--ink)); line-height: 1.5;
}
.post-body a { text-decoration-color: var(--cat, var(--ink)); text-decoration-thickness: 2px; }

/* 引用/補足。「>」で書いた段落がそのまま補足ブロックになる */
.post-body blockquote {
  background: var(--cream); border-left: 4px solid var(--cat, var(--ink));
  margin: 1.8rem 0; padding: 1.1rem 1.3rem; color: #4a4a4a; font-size: .95em; line-height: 1.8;
}
.post-body blockquote p:first-child { margin-top: 0; }
.post-body blockquote p:last-child { margin-bottom: 0; }

/* 要点ボックス（淡色）: <div class="point" markdown="1"> … </div> で囲むだけ。
   先頭の見出し行は **太字** で書く。CSS側がラベル帯として組む。 */
.post-body .point {
  border: 1px solid var(--line); border-top: 3px solid var(--cat, var(--ink));
  padding: 1.3rem 1.5rem; margin: 2.2rem 0; background: #fff;
}
.post-body .point > :first-child { margin-top: 0; }
.post-body .point > :last-child { margin-bottom: 0; }
.post-body .point > p:first-child {
  font-weight: 900; font-size: 1.04em; line-height: 1.5;
  padding-left: .7rem; border-left: 4px solid var(--cat, var(--ink));
  margin-bottom: 1rem;
}
.post-body .point > p:first-child strong { font-weight: 900; }
.post-body .point ul { list-style: none; padding-left: 0; }
.post-body .point ul li { position: relative; padding-left: 1.3rem; margin: .55rem 0; }
.post-body .point ul li::before {
  content: ""; position: absolute; left: .2rem; top: .62em;
  width: .5rem; height: .5rem; background: var(--cat, var(--ink));
}

/* 要点ボックス（暗色）: <div class="point point--dark" markdown="1"> … </div>
   ネガティブな列挙（「きつい」理由・NG例・注意点）を1つにまとめて目立たせる用。 */
.post-body .point--dark {
  background: var(--charcoal); color: #fff; border: none;
  border-top: 3px solid var(--cat, #fff);
}
.post-body .point--dark > p:first-child { border-left-color: var(--cat, #fff); color: #fff; }
.post-body .point--dark ul li::before { background: var(--cat, #fff); }
.post-body .point--dark a { color: #fff; }
.post-body .point--dark strong { color: #fff; }

/* マーカーと強調
     <mark>ここ</mark>          カテゴリカラーのマーカー（1文に1箇所まで）
     <mark class="key">ここ</mark>  色つきの太字（見出し的に言い切る短い語）  */
.post mark {
  background: linear-gradient(transparent 62%, var(--cat-tint, #f4f3ef) 62%);
  color: inherit; padding: 0 .08em;
}
.post mark.key {
  background: none; color: var(--cat, var(--ink)); font-weight: 800;
}
.cat-keiri   { --cat-tint: rgba(39, 91, 161, .22); }
.cat-jimu    { --cat-tint: rgba(87, 117, 144, .22); }
.cat-eigyo   { --cat-tint: rgba(230, 57, 70, .20); }
.cat-driver  { --cat-tint: rgba(95, 183, 255, .30); }
.cat-sekokan { --cat-tint: rgba(184, 115, 51, .24); }
.cat-seizo   { --cat-tint: rgba(47, 109, 62, .22); }
.cat-denki   { --cat-tint: rgba(106, 76, 147, .22); }
.cat-setsubi { --cat-tint: rgba(31, 122, 140, .24); }
.cat-default { --cat-tint: rgba(82, 96, 109, .20); }

/* 編集部からの一言: <div class="editor-note" markdown="1"> … </div>
   実在しない人物の顔写真は使わない方針なので、ブランドのモノグラムで受ける。 */
.post-body .editor-note {
  display: flex; gap: 1rem; align-items: flex-start; margin: 2.4rem 0;
}
.post-body .editor-note::before {
  content: "SH"; flex: none; width: 46px; height: 46px; margin-top: .2rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat, var(--ink));
  color: #fff; font-family: var(--font-en); font-weight: 700; font-size: .84rem; letter-spacing: .06em;
}
.post-body .editor-note > div, .post-body .editor-note > blockquote { flex: 1; min-width: 0; }
.post-body .editor-note-body {
  position: relative; background: var(--cream); padding: 1.1rem 1.3rem;
  font-size: .95em; line-height: 1.85;
}
.post-body .editor-note-body::before {
  content: ""; position: absolute; left: -7px; top: 16px;
  border: 7px solid transparent; border-right-color: var(--cream); border-left: none;
}
.post-body .editor-note-body > :first-child { margin-top: 0; }
.post-body .editor-note-body > :last-child { margin-bottom: 0; }
.post-body .editor-note-name {
  font-size: .8rem; font-weight: 800; color: var(--cat, var(--ink)); margin: 0 0 .4rem;
}

/* 本文中の関連記事カード: {% include linkcard.html slug="..." %} */
.post-body .linkcard {
  display: flex; gap: 1rem; align-items: center; margin: 2rem 0;
  border: 1px solid var(--line); border-left: 4px solid var(--cat, var(--ink));
  padding: .9rem 1.1rem .9rem .9rem; text-decoration: none; color: var(--ink);
  transition: background .18s var(--ease);
}
.post-body .linkcard:hover { background: var(--cream); }
.post-body .linkcard .thumb { flex: none; width: 150px; aspect-ratio: 1200 / 630; overflow: hidden; }
.post-body .linkcard .thumb img { width: 100%; height: 100%; object-fit: cover; border: none; }
.post-body .linkcard .body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.post-body .linkcard .eyebrow {
  font-family: var(--font-en); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; color: var(--cat, var(--muted));
}
.post-body .linkcard .ttl { font-weight: 800; font-size: .95rem; line-height: 1.55; }
.post-body .linkcard time { font-family: var(--font-en); font-size: .74rem; color: var(--muted); }

/* FAQ: frontmatter の faq: から _includes/faq.html が組む（本文にHTMLは書かない） */
.post-faq { margin: 3.2rem 0 0; }
.post-faq .mag-head .en { color: var(--cat, var(--ink)); }
.post-faq dl { margin: 0; }
.post-faq dt, .post-faq dd { display: flex; gap: .9rem; margin: 0; }
.post-faq dt {
  font-weight: 800; font-size: 1.02rem; line-height: 1.6;
  color: var(--ink); padding-top: 1.4rem;
}
.post-faq dd { padding: .7rem 0 1.4rem; border-bottom: 1px solid var(--line); line-height: 1.85; font-size: .96rem; }
.post-faq dt::before, .post-faq dd::before {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 700; font-size: .88rem; border-radius: 50%;
}
.post-faq dt::before {
  content: "Q"; color: #fff;
  background: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)), var(--cat, var(--ink));
}
.post-faq dd::before {
  content: "A"; color: var(--cat, var(--ink)); border: 1px solid var(--cat, var(--line));
}
.post-faq dd > p { margin: 0; }

/* チェックリスト（- [ ] 記法） */
.post-body .task-list-item { list-style: none; margin-left: -1.3rem; }
.post-body .task-list-item input { margin-right: .5em; accent-color: var(--cat, var(--ink)); }

/* 表: 見出し行を色面に、1列目を見出し扱い、狭い画面では横スクロール */
.post-body table { font-size: .88em; }
.post-body thead th {
  background: var(--cat, var(--charcoal)); color: #fff; border-color: var(--cat, var(--charcoal));
  font-weight: 700; white-space: nowrap;
}
.post-body tbody tr:nth-child(even) { background: #fafaf9; }
.post-body tbody td:first-child { font-weight: 700; }
.post-body table + p { margin-top: 1rem; }

/* 図版: キャプションを英字+和文の対訳調に */
.post-body figure.section-visual { margin: 2.4rem 0; }
.post figure figcaption {
  margin-top: .6rem; font-size: .8rem; color: var(--muted); line-height: 1.7;
  padding-left: .7rem; border-left: 2px solid var(--cat, var(--line));
}
.post figure.post-hero img { border: none; }

/* プロンプトなどのコード塊に小さなラベルを出す */
.post-body pre { position: relative; padding-top: 1.7rem; }
.post-body pre::before {
  content: "PROMPT"; position: absolute; top: .5rem; left: 1.2rem;
  font-family: var(--font-en); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; color: rgba(255,255,255,.45);
}

/* 出典リスト（本文末の「出典」以降） */
.post-body h2#出典 + ul, .post-body h2[id^="sources"] + ul { font-size: .86em; color: #4a4a4a; }

/* --------------------------------------------------------- CTA（暗色帯） */
.cta-agent {
  background: var(--charcoal); color: #fff;
  padding: 2rem 1.75rem; margin: 3.5rem 0; font-size: 16px; line-height: 1.7;
}
.cta-agent .eyebrow { font-family: var(--font-en); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: rgba(255,255,255,.6); margin: 0; }
.cta-agent .headline { font-family: var(--font-jp); font-weight: 900; font-size: 1.35rem; margin: .2rem 0 .8rem; }
.cta-agent p { margin: .4rem 0; color: rgba(255,255,255,.88); }
.cta-agent .cta-button {
  display: inline-block; margin-top: .7rem; background: #fff; color: var(--charcoal);
  padding: .8rem 1.8rem; text-decoration: none; font-weight: 800; font-size: 15px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cta-agent .cta-button:hover { background: var(--cat, var(--cat-jimu)); color: #fff; }

/* --------------------------------------------------------- 著者ボックス */
.author-box { border-top: 1px solid var(--line); margin-top: 3.5rem; padding-top: 1.25rem; font-size: .9rem; color: var(--muted); }
.author-box strong { color: var(--ink); font-family: var(--font-jp); }

/* --------------------------------------------------------- フッター（暗色帯） */
.site-footer {
  background: var(--footer); color: rgba(255,255,255,.7);
  margin-top: 4rem; padding: 2.5rem 1.25rem 3rem; text-align: center; font-size: .84rem; line-height: 2;
}
.site-footer .mag-head { justify-content: center; margin-bottom: 1rem; }
.site-footer .mag-head .en, .site-footer .mag-head .ja { color: #fff; }
.site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* --------------------------------------------------------- 品質フロア */
:where(a, button, .hub-card, .article-card):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 640px) {
  main { padding: 2rem 1.1rem 3.5rem; }
  main.wide { padding: 2rem 1.1rem 3.5rem; }
  .site-header { height: 54px; }
  .site-header nav a { margin-left: .7rem; font-size: .85rem; }
  .section-cream { margin: 0 -1.1rem; padding: 2.4rem 1.1rem 2.8rem; }
  .post-body { font-size: 17px; }
  .post-body h2 { margin-top: 2.6rem; }
  .post-toc { margin: 2rem -1.1rem; padding: 1.2rem 1.1rem 1.3rem; }
  /* 表は横スクロールで逃がす（セル内で折り返さず潰れるのを防ぐ） */
  .post-body table { display: block; width: max-content; min-width: 100%; max-width: 100%; overflow-x: auto; }
  .post-body pre { margin-left: -1.1rem; margin-right: -1.1rem; }
  /* 図版は端まで使う（本文幅に収めると図中の文字が読めない） */
  .post-body figure.section-visual { margin-left: -1.1rem; margin-right: -1.1rem; }
  .post-body figure.section-visual img { border-left: none; border-right: none; }
  .post-body figure.section-visual figcaption { margin-left: 1.1rem; margin-right: 1.1rem; }
  .post-body .linkcard { flex-direction: column; align-items: stretch; gap: .8rem; }
  .post-body .linkcard .thumb { width: 100%; }
  .post-body .editor-note { gap: .7rem; }
  .post-body .editor-note::before { width: 38px; height: 38px; font-size: .74rem; }
}