/*
  assets/css/tokens.css

  デザイントークン。色・フォント・余白の変更はこのファイルだけ触れば全体に反映される。
  値は旧 _variables.scss / custom_01.css から移植。
  vscode/preview.css にも同じ値を(別ファイルとして)持たせているので、
  パレットを変えるときは両方を更新すること。

  ⚠️ 2026-06-24: フォントを @import で読み込む行が無く、Noto Sans JP 等が
  ブラウザのフォールバックフォントで描画されていた(太さ・大きさの印象が変わる原因)。
  旧 custom_01.css の読み込み行を復元。
  @importはCSSの仕様上ファイル先頭に置く必要がある。このファイルは
  resources.Concat で先頭に結合される前提なので問題ないが、
  main.cssなど後段のファイルに移さないこと。
*/

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Epilogue&family=Hahmlet&family=JetBrains+Mono:wght@300&family=Source+Code+Pro&display=swap');

/* ⚠️ 以下は見出しスタイルの比較用に追加した日本語フォント。
   /styleguide-headings/ で見比べて採用が決まったら、使わないものは削ること
   （日本語フォントは容量が大きく、読み込んだままにすると表示が遅くなる）。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&family=Shippori+Mincho:wght@400;600&display=swap');

/* STRIDE_X 側から提案された書体（07-typography.md）。欧文のみ・確定済み。
     IBM Plex Sans  事業名（2026-09-07 確定。比較候補の Inter / Archivo は落とした）
     Montserrat     製品ロゴ（iOSアプリと同一。変更しない）
     Oswald         数値を大きく見せる箇所（.stat-figure）。現在は使用箇所なし

   和文は追加していない。本文は既存の Noto Sans JP のままにする方針のため
   （事業名を器・プロダクトを顔として分ける以上、本文も器の側という整理）。 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Montserrat:wght@600;700&family=Oswald:wght@500;600&display=swap');

:root {
  /* --- color --- */
  --color-heading: #0c344b;
  --color-heading-border: #0c344b28;
  --color-body: #242834;
  --color-muted: #5d7c8c;
  --color-bg-h2: #f4fbff;
  --color-bg-inline-code: #e9edf0;

  /* --- font --- */
  --font-body: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic,
               "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",
               'メイリオ', Meiryo, sans-serif;
  --font-heading: 'Noto Sans JP', sans-serif;
  --font-code: "Source Code Pro", "Noto Sans JP", "Roboto Mono", monospace;
  --font-date: "Epilogue", sans-serif;
  --font-tag: "JetBrains Mono", "Noto Sans JP", sans-serif;

  /* 製品ロゴ STRIDE_X。iOSアプリの表示書体と同一（変更しないこと）。
     600 なのはアンダースコアの見え方による。700 にすると線が18%太くなり、
     記号ではなく下線に見えてくる（07-typography.md 3-2） */
  --font-logo: "Montserrat", sans-serif;
  --weight-logo: 600;

  /* 事業名 Tactical Optimist Labs。プロダクトが増えても中立でいられるよう
     意図的に無色の書体を当てる。地味に見えるのは設計（同 1-a） */
  --font-brand: "IBM Plex Sans", sans-serif;
  --weight-brand: 500;

  /* 数値を大きく見せる箇所（100km / 20時間 など）。
     アプリは DIN Condensed だが商用書体でWeb配信できないため、その代役 */
  --font-num: "Oswald", sans-serif;

  /* --- shape --- */
  --radius-sm: 4px;
  --radius-md: 0.45rem;
}
/* --- ここから下は事業サイト用の追加トークン ---
   blog-hugo-rebuild 由来の値は上をそのまま流用している。
   LPに必要な「アクセント色」「面の色」「余白スケール」が元テーマには
   無かったため、既存パレット(--color-heading #0c344b)から派生させて定義した。 */
:root {
  --color-accent: #0c7fb5;          /* CTA・リンクの強調。headingと同系の青を明るくした */
  --color-surface: #f4fbff;         /* セクション背景。--color-bg-h2 と同値で統一感を出す */
  --color-border: #d9e4ea;
  --color-inverse: #ffffff;

  --space-section: 4rem;            /* セクション間の縦余白 */
  --radius-lg: 0.75rem;
}

/* --- コードブロック ---
   Chromaのスタイルは tokyonight-moon を使うが、標準の背景 #222436 は
   白基調の本文に対してコントラストが 10.26:1 と強すぎたため、
   彩度を落として明度を上げた「グレーがかった藍」に置き換えている。

   前景 #c8d3f5 に対するコントラスト比（計測値）:
     #222436  10.26:1  tokyonight-moon 標準（強すぎる）
     #2e3440   8.38:1  Nord polar night
     #303648   8.07:1  moonの色相を保って灰寄せ
     #343a4a   7.62:1  ← 採用。WCAG AAA(7:1)は満たす
     #3b4252   6.75:1  灰藍の上限
   変更する場合はこの1行だけ差し替えればよい。 */
:root {
  --color-code-bg: #343a4a;
  /* 行ハイライト。背景を明るくした分だけ持ち上げて差を保つ */
  --color-code-hl-bg: #454d70;
  /* コードのフォント。旧ブログは Source Code Pro 16px だった */
  --font-code-size: 1rem;
}

/* --- コードの文字色 ---
   tokyonight-moon はコメントを沈める設計だが、背景を #343a4a に明るくした結果
   コントラストが 1.34:1 まで落ちて実質読めなくなった。
   「背景に紛れる文字色は使わない」方針のため、以下を全て WCAG AA 以上に持ち上げている。

   背景 #343a4a に対するコントラスト比:
     --color-code-fg       #eef1f8  10.04:1  （標準 #c8d3f5 は 7.62:1）
     --color-code-comment  #a5add6   5.16:1  （標準 #444a73 は 1.34:1 で不可）
     --color-code-error    #ff8f96   5.20:1  （標準 #c53b53 は 2.23:1 で不可）
     --color-code-lineno   #a2aad2   4.98:1  （標準 #828bb8 は 3.42:1）

   キーワードや文字列などのハイライト色は元のまま（いずれも 4.9:1 以上ある）。 */
:root {
  --color-code-fg: #eef1f8;
  --color-code-comment: #a5add6;
  --color-code-error: #ff8f96;
  --color-code-lineno: #a2aad2;
}
/*
  assets/css/main.css

  Tactical Optimist Labs コーポレートサイトの共通スタイル。
  tokens.css の変数だけを参照する（色・フォントの直書きはしない）。

  blog-hugo-rebuild から引き継いだのは以下のクラスとその方針:
    body / img / .container / .site-header / .site-title / .site-footer
    および .content 配下の見出し組版（左罫線＋下罫線のスタイル）
  ブログ固有のパーツ（.post-meta / details.toc / .figure / lightbox /
  chroma / code-copy）は事業サイトでは使わないため移植していない。

  以降の .hero / .card / .btn / .info-table は元テーマに存在しないため新規。
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-body);
  background: var(--color-inverse);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- サイトヘッダー（blog-hugo-rebuild 由来＋ナビを追加） ---------- */
.site-header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-heading-border);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.site-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.95rem;
}

.site-nav a {
  color: var(--color-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-accent);
}

/* ---------- フッター（blog-hugo-rebuild 由来。事業者表記を追加） ---------- */
.site-footer {
  padding: 2rem 0;
  margin-top: var(--space-section);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

/* ---------- ヒーロー（新規） ---------- */
.hero {
  padding: calc(var(--space-section) * 1.2) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-heading);
  margin: 0 0 1rem;
}

.hero .lead {
  font-size: 1.15rem;
  color: var(--color-body);
  max-width: 40rem;
  margin: 0 0 2rem;
}

/* ---------- セクション（新規） ---------- */
.section {
  padding: var(--space-section) 0;
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
  border-left: solid 6px var(--color-heading);
  padding-left: 0.6rem;
  margin: 0 0 1.5rem;
}

/* ページ見出し（h1）だけは本文の h2 より大きくする。
   .section-title は home.html の h2（「製品」「事業について」）でも使うため、
   h1 に限定して上書きしている。
   ⚠️ 1.5rem のままだと .content h2（1.6rem）に負けて階層が逆転する。 */
h1.section-title {
  font-size: 2.1rem;
  font-weight: 400;
  border-left-width: 8px;
  padding-left: 0.7rem;
  /*
    上に 3rem 空ける。

    .site-main には余白の指定が無く、.site-header の padding は境界線の
    内側にあるため、これが無いと線と h1 の間隔が 0px になる。
    トップページだけ平気に見えるのは .hero が自前で余白を持っているからで、
    下層ページ（page.html / section.html）だけが詰まっていた。

    フッターが margin-top: 4rem を持っているので、上を 0 のままにすると
    上下が極端に非対称になる。
  */
  margin: 3rem 0 2rem;
}

/* ---------- 製品カード（新規） ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}

.card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-inverse);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 0.5rem;
}

.card p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
}

.card .card-status {
  display: inline-block;
  font-family: var(--font-tag);
  font-size: 0.75rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.5rem;
  margin-bottom: 0.75rem;
}

/* ---------- ボタン（新規） ---------- */
.btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-inverse);
}

/* ---------- 事業者情報テーブル（新規・Apple審査で見られる想定） ---------- */
.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.info-table th,
.info-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.info-table th {
  width: 12rem;
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .info-table th,
  .info-table td {
    display: block;
    width: auto;
    border-bottom: none;
    padding: 0.25rem 0;
  }
  .info-table td {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ---------- 本文組版 ----------
   見出し（h2〜h4）のスタイルと自動採番は headings.css に分離した。
   複数案を切り替えて比較するため、ここには定義を置いていない。 */

.content blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1em;
  border-left: 4px solid var(--color-border);
  color: var(--color-muted);
}

/* インラインコード。
   ⚠️ セレクタを ":not(pre) > code" に限定していること。単に ".content code" と
   書くとコードブロック内の <code> にも背景が当たり、<code> はインライン要素
   なので背景が行ごとの矩形に分割されて描画される（行番号が白い角丸で
   囲まれて見える不具合になった）。 */
.content :not(pre) > code {
  font-family: var(--font-code);
  font-size: 0.9em;
  background: var(--color-bg-inline-code);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

/* ---------- デモ用のプレースホルダ表示（本番公開前に必ず消す） ---------- */
.placeholder {
  border: 1px dashed #c96;
  border-radius: var(--radius-md);
  background: #fffaf3;
  color: #8a5a20;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.placeholder::before {
  content: "TODO ";
  font-family: var(--font-tag);
  font-weight: 700;
}

/* ---------- スタイル比較用の切り替えUI（デモページのみ・本番では読み込まれない） ---------- */
.style-switcher {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--color-heading);
  color: var(--color-inverse);
  font-family: var(--font-tag);
  font-size: 0.8rem;
}

.style-switcher__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.style-switcher__label {
  opacity: 0.8;
}

.style-switcher__select {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-inverse);
}

.style-switcher__select option {
  color: var(--color-body);
  background: var(--color-inverse);
}

.style-switcher__summary {
  flex-basis: 100%;
  font-size: 0.7rem;
  opacity: 0.75;
  background: none;
  padding: 0;
}

/* ---------- 文字数・読了時間 ---------- */
.reading-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.75rem 0 2rem;
  font-family: var(--font-tag);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.reading-info__sep {
  opacity: 0.5;
}

/* ローカル確認時だけ付くバッジ。本番には出力されない */
.reading-info__dev {
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--color-inverse);
  background: var(--color-muted);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

/* ---------- お問い合わせフォーム（Netlify Forms） ----------
   メールアドレスをページに出さないための窓口。送信先は Netlify 側の
   通知設定が持つので、HTMLソースにアドレスは一切現れない。
   JavaScript は使っていない（素のPOSTでNetlifyが受ける）。 */
.contact-form {
  margin: 2rem 0;
}

.contact-form__field {
  margin-bottom: 1.4rem;
}

.contact-form__field label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: var(--color-heading);
}

.contact-form__required {
  margin-left: 0.4rem;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--color-inverse);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
}

.contact-form__note {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
  color: var(--color-muted);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-body);
  background: var(--color-inverse);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.contact-form textarea {
  min-height: 12rem;
  resize: vertical;
}

/* フォーカスの輪郭は消さない。キーボード操作でどこにいるか分からなくなるため */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

.contact-form button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* ボット除けの囮。人間には見せず、ボットが埋めたら送信を弾く。
   display:none ではなく画面外へ送っている（display:none を避けるボットがいるため）。 */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
}

/* ---------- hugo server のときだけ出る表示 ----------
   本番ビルドには出力されない（layouts/_shortcodes/devnote.html ほか）。
   万一漏れても tools/deploy.sh の公開前チェックが dev-badge を検出して止める。 */
.dev-badge {
  color: var(--color-inverse);
  background: var(--color-muted);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
  margin-right: 0.5rem;
  font-family: var(--font-tag);
  font-size: 0.8em;
}

.dev-note {
  margin: 1.5rem 0;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------- お問い合わせの確認画面 ----------
   JSが有効なときだけ表示される（assets/js/contact-confirm.js）。
   初期状態は hidden 属性で隠しており、JSが無ければ最後まで出ない。 */
.contact-confirm {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* tabindex="-1" でフォーカスを移すため、輪郭が出る。位置を分かりやすくする側に倒す */
.contact-confirm:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.contact-confirm__title {
  margin-top: 0;
}

/* 本文の改行をそのまま見せる。確認画面の意味が無くなるため折り返しも残す */
.contact-confirm__message {
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0;
}

/* ---------- トップの署名行 ----------
   「from conception to completion, and still walking」。
   事業としての一文なので、事業名と同じ書体（IBM Plex Sans）を当てる。

   ⚠️ 斜体にしていない。原案は斜体1行を想定していたが、IBM Plex Sans の
      italic を読み込んでいないため、ブラウザが合成斜体を作って線が歪む。
      本文の Noto Sans JP も italic を持たないので同じ。
      斜体にするなら tokens.css の @import へ ital 軸を足す必要がある。
      いまは字間と色で「署名」として見せている。 */
.site-signature {
  margin-top: 2.5rem;
  font-family: var(--font-brand);
  font-size: 0.95rem;
  font-weight: var(--weight-brand);
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
/* ============================================================================
 * 書体の適用（STRIDE_X 側の提案 07-typography.md をサイトの体系へ落としたもの）
 *
 * 【この設定の考え方】
 * 書体を「意匠」ではなく「役割」として使う。
 *
 *   --font-brand  事業名 Tactical Optimist Labs = 器。無色でいること
 *   --font-logo   製品ロゴ STRIDE_X            = 顔。iOSアプリと同一書体
 *   --font-body   本文                          = 器。既存のまま（Noto Sans JP）
 *
 * 事業名に個性を持たせないのは、プロダクトが2本目・3本目と増えたときに
 * 「STRIDE_X の色をした親サイト」にならないため。個性は製品側が持つ。
 *
 * ⚠️ 本文には手を付けていない（07-typography.md 4-3 の案A）。
 *    本文も器の側なので、事業サイトに既存の本文書体があるならそちらが正しい。
 *    アプリと顔が繋がるのはロゴなので、それだけで足りる。BIZ UDPGothic を
 *    本文へ広げると、事業名から意図的に個性を抜いた理由と矛盾する。
 *    そのため BIZ UDPGothic は読み込んでいない。
 *
 * 変数の定義は tokens.css にある（サイトの体系に合わせた）。
 * 読み込みも tokens.css の @import に集約している。
 * ============================================================================ */

/* 事業名・サイト名。main.css の .site-title より後に読ませて上書きする */
.site-title.site-brand,
.site-brand {
  font-family: var(--font-brand);
  font-weight: var(--weight-brand);
  letter-spacing: 0.01em;
  /* 表記は "Tactical Optimist Labs"（タイトルケース）で確定。
     text-transform: uppercase を掛けないこと
     （開業届・D-U-N-S の登録表記と外れる。05章冒頭） */
}

/* 製品ロゴ。ナビ・製品カードの見出し・製品ページの h1 に付く */
h1.section-title.product-logo,
.card h3.product-logo,
.site-nav a.product-logo,
.product-logo {
  font-family: var(--font-logo);
  font-weight: var(--weight-logo);
  letter-spacing: 0.005em;
  /* 表記は "STRIDE_X"。アンダースコアをスペースやハイフンに置換しない、
     文中で小文字にしない（01章 1-5） */
}

/* 数値を大きく見せる箇所。まだ使用箇所は無いが、
   「100km」「18時間19分」を大きく置くときのために用意しておく */
.stat-figure {
  font-family: var(--font-num);
  font-weight: 600;
  font-feature-settings: "tnum" 1;  /* 桁を揃える */
  letter-spacing: 0.01em;
}

/* 本文中に出る数字の桁を揃えたい場合 */
.tabular {
  font-feature-settings: "tnum" 1;
}
/*
  assets/css/headings.css

  見出しのスタイルと、見出し・リスト・段落の自動採番。

  ## 設計：番号の「中身」と「見た目」を分離している

  - 番号として何を出すか  → data-numbering （counter と content を決める）
  - 番号をどう見せるか    → data-heading   （位置・大きさ・色を決める）

  この2つを直交させているので、「階層番号 × 明朝見出し」のような組み合わせが
  そのまま成立する。片方を変えてももう片方は壊れない。

  ## 属性の一覧（baseof.html が body に出力する）

    data-heading    current | ladder | bracket | tab | rail
                    | rule | number | minimal | serif | mincho
    data-numbering  none | hier | chapter
    data-list       default | hier
    data-para       none | numbered

  既定値は hugo.toml の [params.style] で指定する。
  ページ単位で上書きしたい場合は front matter に同名のキーを書く。

  比較は /styleguide-headings/ で行う（画面上で切り替えられる）。
*/

/* ============================================================
   共通のベース。どのバリアントでも変わらない部分
   ============================================================ */
.content h2,
.content h3,
.content h4,
.content h5 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.4;
}

/*
  見出しの「前」の余白を階層ごとに変える。

  ここが揃っていると、装飾をいくら作り込んでも文章の塊が見えない。
  上位の見出しほど手前を大きく空けることで、
  「どこで話題が切り替わったか」が読まずに分かるようにしている。

  単位は rem。em にすると見出し自身の文字サイズに比例してしまい、
  意図した差にならない（h2 の 2em と h4 の 2em は実寸が違う）。
*/
.content h2 { font-size: 1.6rem; margin: 3.5rem 0 1rem; }
.content h3 { font-size: 1.3rem; margin: 2.6rem 0 0.8rem; }
.content h4 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
.content h5 { font-size: 1rem;   margin: 1.6rem 0 0.4rem; }

/* 見出し直後の段落は余白を詰める。見出しと本文を1つの塊に見せるため */
.content h2 + p,
.content h3 + p,
.content h4 + p,
.content h5 + p { margin-top: 0; }

/* ============================================================
   採番：番号の「中身」を決める
   ============================================================ */

/* --- hier: 階層番号（1. / 1.1 / 1.1.1）--- */
[data-numbering="hier"] .content { counter-reset: h2num; }
[data-numbering="hier"] .content h2 { counter-reset: h3num; }
[data-numbering="hier"] .content h3 { counter-reset: h4num; }

[data-numbering="hier"] .content h2::before {
  counter-increment: h2num;
  content: counter(h2num) ". ";
}
[data-numbering="hier"] .content h3::before {
  counter-increment: h3num;
  content: counter(h2num) "." counter(h3num) " ";
}
[data-numbering="hier"] .content h4::before {
  counter-increment: h4num;
  content: counter(h2num) "." counter(h3num) "." counter(h4num) " ";
}

/* --- chapter: h2 だけに章番号（01 / 02 …）--- */
[data-numbering="chapter"] .content { counter-reset: h2num; }
[data-numbering="chapter"] .content h2::before {
  counter-increment: h2num;
  /* decimal-leading-zero で 01, 02 … と2桁に揃える */
  content: counter(h2num, decimal-leading-zero) " ";
}

/* ============================================================
   見出しスタイル：番号の「見た目」と装飾を決める
   ============================================================ */

/* --- current: 現状（blog-hugo-rebuild 由来。左罫線＋下罫線＋背景）--- */
[data-heading="current"] .content h2,
[data-heading="current"] .content h3,
[data-heading="current"] .content h4 {
  font-weight: 300;
  border-bottom: solid 1px var(--color-heading);
  border-left: solid 6px var(--color-heading);
  padding-left: 8px;
  background: var(--color-bg-h2);
}
[data-heading="current"] .content h2::before,
[data-heading="current"] .content h3::before,
[data-heading="current"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
}

/* --- rule: 罫線を細くして字間で見せる --- */
[data-heading="rule"] .content h2 {
  font-weight: 400;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-heading-border);
  padding-bottom: 0.4em;
}
[data-heading="rule"] .content h3 {
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-heading="rule"] .content h4 {
  font-weight: 700;
  color: var(--color-body);
}
[data-heading="rule"] .content h2::before,
[data-heading="rule"] .content h3::before,
[data-heading="rule"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
  font-weight: 400;
}

/* --- number: 番号を大きく左にぶら下げる（採番前提のレイアウト）--- */
[data-heading="number"] .content h2,
[data-heading="number"] .content h3,
[data-heading="number"] .content h4 {
  position: relative;
  padding-left: 3.4rem;
  font-weight: 700;
}
[data-heading="number"] .content h2::before,
[data-heading="number"] .content h3::before,
[data-heading="number"] .content h4::before {
  position: absolute;
  left: 0;
  top: -0.15em;
  font-family: var(--font-date);
  font-weight: 400;
  color: var(--color-accent);
  opacity: 0.75;
}
[data-heading="number"] .content h2::before { font-size: 2.1rem; }
[data-heading="number"] .content h3::before { font-size: 1.4rem; top: 0.1em; }
[data-heading="number"] .content h4::before { font-size: 1.05rem; top: 0.15em; }

/* 採番なしのときはぶら下げ用の余白が無駄になるので戻す */
[data-heading="number"][data-numbering="none"] .content h2,
[data-heading="number"][data-numbering="none"] .content h3,
[data-heading="number"][data-numbering="none"] .content h4 {
  padding-left: 0;
}

/* --- minimal: 罫線を一切使わず、ウェイトと余白だけで階層を作る --- */
[data-heading="minimal"] .content h2 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 3.2em;
  letter-spacing: 0.02em;
}
[data-heading="minimal"] .content h3 {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-body);
  margin-top: 2.4em;
}
[data-heading="minimal"] .content h4 {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-muted);
  letter-spacing: 0.06em;
}
[data-heading="minimal"] .content h2::before,
[data-heading="minimal"] .content h3::before,
[data-heading="minimal"] .content h4::before {
  color: var(--color-muted);
  font-weight: 400;
}

/* --- serif: 見出しだけ明朝。本文はゴシックのまま --- */
[data-heading="serif"] .content h2,
[data-heading="serif"] .content h3,
[data-heading="serif"] .content h4,
[data-heading="serif"] .content h5 {
  font-family: "Zen Old Mincho", "Shippori Mincho", serif;
  font-weight: 700;
}
[data-heading="serif"] .content h2 {
  border-bottom: 1px solid var(--color-heading-border);
  padding-bottom: 0.3em;
  letter-spacing: 0.04em;
}
[data-heading="serif"] .content h2::before,
[data-heading="serif"] .content h3::before,
[data-heading="serif"] .content h4::before {
  font-family: var(--font-date);
  font-weight: 400;
  color: var(--color-muted);
}

/* --- mincho: 見出しも本文も明朝。もっとも「AIっぽさ」から遠い --- */
[data-heading="mincho"] .content,
[data-heading="mincho"] .content p,
[data-heading="mincho"] .content li {
  font-family: "Shippori Mincho", "Zen Old Mincho", serif;
  font-weight: 400;
}
[data-heading="mincho"] .content h2,
[data-heading="mincho"] .content h3,
[data-heading="mincho"] .content h4,
[data-heading="mincho"] .content h5 {
  font-family: "Zen Old Mincho", "Shippori Mincho", serif;
  font-weight: 700;
}
[data-heading="mincho"] .content h2 {
  border-bottom: 1px solid var(--color-heading-border);
  padding-bottom: 0.3em;
  letter-spacing: 0.04em;
}
[data-heading="mincho"] .content h2::before,
[data-heading="mincho"] .content h3::before,
[data-heading="mincho"] .content h4::before {
  font-family: var(--font-date);
  font-weight: 400;
  color: var(--color-muted);
}
/* コードは明朝にしない */
[data-heading="mincho"] .content pre,
[data-heading="mincho"] .content code {
  font-family: var(--font-code);
}

/* ============================================================
   リストの採番
   ============================================================ */

/* --- hier: ネストした ol を 1. / 1.1. / 1.1.1. で通し番号にする ---
   counters()（複数形）が祖先のカウンタを連結してくれる。 */
[data-list="hier"] .content ol {
  counter-reset: listitem;
  list-style: none;
  padding-left: 2.4em;
}
[data-list="hier"] .content ol > li {
  counter-increment: listitem;
  position: relative;
}
[data-list="hier"] .content ol > li::before {
  content: counters(listitem, ".") ".";
  position: absolute;
  left: -2.4em;
  width: 2.1em;
  text-align: right;
  font-family: var(--font-date);
  color: var(--color-muted);
}

/* ============================================================
   段落の採番（実験的）
   ============================================================ */

/* --- numbered: 本文の段落に通し番号を振る ---
   法令・学術文書のような見え方になる。参照しやすくなる反面、
   読み物としては硬くなるため、採用は要判断。 */
[data-para="numbered"] .content {
  counter-reset: para;
  padding-left: 2.6em;
}
[data-para="numbered"] .content > p {
  counter-increment: para;
  position: relative;
}
[data-para="numbered"] .content > p::before {
  content: counter(para);
  position: absolute;
  left: -2.6em;
  top: 0.35em;
  width: 2em;
  text-align: right;
  font-family: var(--font-tag);
  font-size: 0.7rem;
  color: var(--color-muted);
  opacity: 0.7;
}

/* ============================================================
   罫線のデコレーション案（2026-09-07 追加）

   current の弱点は、h2・h3・h4 の装飾がまったく同じことにある。
   階層が深いページ（/privacy/ は h2 が12個）だと、どこが親でどこが子か
   罫線からは読み取れない。以下はいずれも「線で階層を出す」案。
   ============================================================ */

/* --- ladder: current の素直な改良。線の太さで階層を出す --- */
[data-heading="ladder"] .content h2 {
  font-weight: 300;
  border-bottom: solid 1px var(--color-heading);
  border-left: solid 6px var(--color-heading);
  padding-left: 10px;
  background: var(--color-bg-h2);
}
[data-heading="ladder"] .content h3 {
  font-weight: 400;
  border-left: solid 3px var(--color-heading);
  padding-left: 10px;
}
[data-heading="ladder"] .content h4 {
  font-weight: 700;
  border-left: solid 2px var(--color-heading-border);
  padding-left: 10px;
  color: var(--color-body);
}
[data-heading="ladder"] .content h2::before,
[data-heading="ladder"] .content h3::before,
[data-heading="ladder"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
}

/* --- bracket: 左上のかぎ括弧。階層ごとに「装飾の強さ」を落としていく ---

   面 → 線 → 点 → 素 の順で弱めることで、番号を読まなくても
   どの深さの見出しかが分かるようにしている。

     h2  面   かぎ括弧（角の印）＋ 薄い背景。話題の切り替わり
     h3  線   縦棒のみ。h2 の中の区切り
     h4  点   文字幅ぶんの短い下線。小見出し
     h5  素   罫線なし。ウェイトと色だけ

   ⚠️ 初版は上罫線を全幅 4px で引いていたが、それは「かぎ括弧」ではなく
      箱の天面で、旧 current の下罫線(1px)に対してインクが4倍になっていた。
      罫線色 #0c344b は白に対して 13.06:1 で最も強い色なので、これが全幅に
      走ると見出しごとに重い横線が入る（/privacy/ は h2 が12個ある）。
      横方向は ::after で角の長さぶんだけに切り詰めた。
      なお見出し背景 #f4fbff は白に対して 1.05:1 でほぼ見えず、重さの原因ではない。

   ⚠️ ウェイトは「サイズが下がるほど太く」する。h2 は 1.6rem あるので 300 で
      足り、h5 は本文と同じ 1rem なので太さでしか差を作れない。
      本文が 300 なので、h2 を 400 にすると本文との差が開きすぎる。
*/

/* h2 — 面。角の印と薄い背景で、ここだけが「面」として見える */
[data-heading="bracket"] .content h2 {
  position: relative;
  font-weight: 300;
  border-left: solid 3px var(--color-heading);
  background: var(--color-bg-h2);
  padding: 0.35em 0.6em 0.3em 0.7em;
}
/* かぎ括弧の横棒。全幅に伸ばさず、角として読める長さで止める。
   left を罫線ぶん外へ出して縦棒と繋げている（絶対配置の原点はパディングボックス） */
[data-heading="bracket"] .content h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1.6em;
  border-top: solid 3px var(--color-heading);
}

/* h3 — 線。かぎ括弧の縦棒だけを残す。h2 の一部であることが形で分かる */
[data-heading="bracket"] .content h3 {
  font-weight: 400;
  border-left: solid 3px var(--color-heading);
  padding-left: 0.7em;
}

/* h4 — 点。文字の幅ぶんだけ下線を引く。
   width: fit-content が無いと行末まで線が伸び、面の区切りと紛れる */
[data-heading="bracket"] .content h4 {
  font-weight: 700;
  color: var(--color-body);
  width: fit-content;
  border-bottom: solid 2px var(--color-heading-border);
  padding-bottom: 0.15em;
}

/* h5 — 素。罫線を持たせない。ここまで来たら装飾より余白で効かせる */
[data-heading="bracket"] .content h5 {
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* 番号も階層で濃さを変える。h2 だけ見出し色で、以下は淡く */
[data-heading="bracket"] .content h2::before {
  color: var(--color-heading);
  font-family: var(--font-date);
  font-weight: 400;
  opacity: 0.65;
}
[data-heading="bracket"] .content h3::before,
[data-heading="bracket"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
  font-weight: 400;
}

/* --- bracket-soft: bracket と同じ形で、罫線を淡い色にし背景も外したもの ---
   「濃さ」が原因なのか「形」が原因なのかを切り分けるための比較用。
   罫線に --color-muted (#5d7c8c) を使う。白に対して 4.44:1 で、
   --color-heading の 13.06:1 に対しておよそ1/3の強さになる。
   罫線は文字ではないので WCAG の 4.5:1 を割っていても読字には影響しない。 */
[data-heading="bracket-soft"] .content h2 {
  position: relative;
  font-weight: 300;
  border-left: solid 3px var(--color-muted);
  padding: 0.1em 0 0.3em 0.7em;
}
[data-heading="bracket-soft"] .content h2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 1.6em;
  border-top: solid 3px var(--color-muted);
}
[data-heading="bracket-soft"] .content h3 {
  font-weight: 400;
  border-left: solid 2px var(--color-muted);
  padding-left: 0.7em;
}
[data-heading="bracket-soft"] .content h4 {
  font-weight: 700;
  color: var(--color-body);
  width: fit-content;
  border-bottom: solid 2px var(--color-heading-border);
  padding-bottom: 0.15em;
}
[data-heading="bracket-soft"] .content h5 {
  font-weight: 700;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}
[data-heading="bracket-soft"] .content h2::before,
[data-heading="bracket-soft"] .content h3::before,
[data-heading="bracket-soft"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
  font-weight: 400;
}

/* --- tab: 番号を反転ブロックにして主役にする。採番ありが前提 --- */
[data-heading="tab"] .content h2 {
  font-weight: 400;
  border-bottom: solid 1px var(--color-heading-border);
  padding-bottom: 0.3em;
}
[data-heading="tab"] .content h3,
[data-heading="tab"] .content h4 { font-weight: 700; }
[data-heading="tab"] .content h4 { color: var(--color-body); }

[data-heading="tab"] .content h2::before {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.5em;
  background: var(--color-heading);
  color: var(--color-inverse);
  border-radius: var(--radius-sm);
  font-family: var(--font-date);
  font-size: 0.75em;
  vertical-align: 0.12em;
}
/* h3 は塗らずに枠線だけ。h2 との差を「塗り／抜き」で作る */
[data-heading="tab"] .content h3::before {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.5em;
  border: 1px solid var(--color-heading-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-family: var(--font-date);
  font-size: 0.75em;
  vertical-align: 0.12em;
}
[data-heading="tab"] .content h4::before {
  margin-right: 0.5em;
  color: var(--color-muted);
  font-family: var(--font-date);
  font-weight: 400;
}
/* 採番なしだと番号ブロックが空箱になるので、装飾ごと畳む */
[data-heading="tab"][data-numbering="none"] .content h2::before,
[data-heading="tab"][data-numbering="none"] .content h3::before {
  display: none;
}

/* --- rail: 左の線の「本数と種類」で階層を出す --- */
[data-heading="rail"] .content h2 {
  font-weight: 300;
  /* double は1本の指定で2本線になる。幅6pxで 2px+2px+2px に割れる */
  border-left: 6px double var(--color-heading);
  padding-left: 10px;
}
[data-heading="rail"] .content h3 {
  font-weight: 400;
  border-left: 2px solid var(--color-heading);
  padding-left: 10px;
}
[data-heading="rail"] .content h4 {
  font-weight: 700;
  border-left: 2px dotted var(--color-muted);
  padding-left: 10px;
  color: var(--color-body);
}
[data-heading="rail"] .content h2::before,
[data-heading="rail"] .content h3::before,
[data-heading="rail"] .content h4::before {
  color: var(--color-muted);
  font-family: var(--font-date);
}
/*
  assets/css/chroma.css

  ⚠️ このファイルは生成物。手で編集しないこと。
  再生成: hugo gen chromastyles --style=tokyonight-moon > assets/css/chroma.css

  背景色は code-block.css で上書きしている（読み込み順で後勝ち）ため、
  ここの background-color を直接書き換える必要はない。
*/
/* Generated using: hugo gen chromastyles --style=tokyonight-moon */

/* Background */ .bg { color:#c8d3f5;background-color:#222436; }
/* PreWrapper */ .chroma { color:#c8d3f5;background-color:#222436;-webkit-text-size-adjust:none; }
/* Other */ .chroma .x { color:#c8d3f5 }
/* Error */ .chroma .err { color:#c53b53 }
/* CodeLine */ .chroma .cl { color:#c8d3f5 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#444a73 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#828bb8 }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#828bb8 }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#c099ff }
/* KeywordConstant */ .chroma .kc { color:#ffc777 }
/* KeywordDeclaration */ .chroma .kd { color:#c099ff }
/* KeywordNamespace */ .chroma .kn { color:#86e1fc }
/* KeywordPseudo */ .chroma .kp { color:#c099ff }
/* KeywordReserved */ .chroma .kr { color:#c099ff }
/* KeywordType */ .chroma .kt { color:#4fd6be }
/* NameAttribute */ .chroma .na { color:#82aaff }
/* NameClass */ .chroma .nc { color:#ff966c }
/* NameConstant */ .chroma .no { color:#ff966c }
/* NameDecorator */ .chroma .nd { color:#82aaff;font-weight:bold }
/* NameEntity */ .chroma .ni { color:#86e1fc }
/* NameException */ .chroma .ne { color:#ffc777 }
/* NameLabel */ .chroma .nl { color:#c3e88d }
/* NameNamespace */ .chroma .nn { color:#ffc777 }
/* NameOther */ .chroma .nx { color:#c8d3f5 }
/* NameProperty */ .chroma .py { color:#ffc777 }
/* NameTag */ .chroma .nt { color:#c099ff }
/* NameBuiltin */ .chroma .nb { color:#c3e88d }
/* NameBuiltinPseudo */ .chroma .bp { color:#c3e88d }
/* NameVariableClass */ .chroma .vc { color:#c8d3f5 }
/* NameVariableGlobal */ .chroma .vg { color:#c8d3f5 }
/* NameVariableInstance */ .chroma .vi { color:#c8d3f5 }
/* NameVariableMagic */ .chroma .vm { color:#c8d3f5 }
/* NameFunction */ .chroma .nf { color:#82aaff }
/* NameFunctionMagic */ .chroma .fm { color:#82aaff }
/* LiteralDate */ .chroma .ld { color:#c8d3f5 }
/* LiteralString */ .chroma .s { color:#c3e88d }
/* LiteralStringAffix */ .chroma .sa { color:#c099ff }
/* LiteralStringBacktick */ .chroma .sb { color:#c3e88d }
/* LiteralStringChar */ .chroma .sc { color:#c3e88d }
/* LiteralStringDelimiter */ .chroma .dl { color:#82aaff }
/* LiteralStringDoc */ .chroma .sd { color:#444a73 }
/* LiteralStringDouble */ .chroma .s2 { color:#c3e88d }
/* LiteralStringEscape */ .chroma .se { color:#82aaff }
/* LiteralStringHeredoc */ .chroma .sh { color:#444a73 }
/* LiteralStringInterpol */ .chroma .si { color:#c3e88d }
/* LiteralStringOther */ .chroma .sx { color:#c3e88d }
/* LiteralStringRegex */ .chroma .sr { color:#86e1fc }
/* LiteralStringSingle */ .chroma .s1 { color:#c3e88d }
/* LiteralStringSymbol */ .chroma .ss { color:#c3e88d }
/* LiteralNumber */ .chroma .m { color:#ffc777 }
/* LiteralNumberBin */ .chroma .mb { color:#ffc777 }
/* LiteralNumberFloat */ .chroma .mf { color:#ffc777 }
/* LiteralNumberHex */ .chroma .mh { color:#ffc777 }
/* LiteralNumberInteger */ .chroma .mi { color:#ffc777 }
/* LiteralNumberIntegerLong */ .chroma .il { color:#ffc777 }
/* LiteralNumberOct */ .chroma .mo { color:#ffc777 }
/* Operator */ .chroma .o { color:#c3e88d;font-weight:bold }
/* OperatorWord */ .chroma .ow { color:#c3e88d;font-weight:bold }
/* OperatorReserved */ .chroma .or { color:#c3e88d;font-weight:bold }
/* Comment */ .chroma .c { color:#444a73;font-style:italic }
/* CommentHashbang */ .chroma .ch { color:#444a73;font-style:italic }
/* CommentMultiline */ .chroma .cm { color:#444a73;font-style:italic }
/* CommentSingle */ .chroma .c1 { color:#444a73;font-style:italic }
/* CommentSpecial */ .chroma .cs { color:#444a73;font-style:italic }
/* CommentPreproc */ .chroma .cp { color:#444a73;font-style:italic }
/* CommentPreprocFile */ .chroma .cpf { color:#444a73;font-weight:bold;font-style:italic }
/* GenericDeleted */ .chroma .gd { color:#c53b53;background-color:#1b1d2b }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericError */ .chroma .gr { color:#c53b53 }
/* GenericHeading */ .chroma .gh { color:#ffc777;font-weight:bold }
/* GenericInserted */ .chroma .gi { color:#c3e88d;background-color:#1b1d2b }
/* GenericOutput */ .chroma .go { color:#c8d3f5 }
/* GenericPrompt */ .chroma .gp { color:#c8d3f5 }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#ffc777;font-weight:bold }
/* GenericTraceback */ .chroma .gt { color:#c53b53 }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/*
  assets/css/code-block.css

  コードブロックの見た目。blog-hugo-rebuild の code-copy.css を移植し、
  背景色を tokens.css の変数で制御できるようにしたもの。

  対応するHTML構造（layouts/_markup/render-codeblock.html が出力）:

    <div class="highlight-wrapper">
      <div class="code-name">main.go</div>      (filename属性を指定した場合のみ)
      <button class="copy-code-button">Copy</button>
      <div class="highlight">                    (transform.HighlightCodeBlock の出力)
        <pre class="chroma">...</pre>
      </div>
    </div>

  ⚠️ 読み込み順は chroma.css → code-block.css。詳細度は同じなので後勝ちで
     背景色を上書きしている。順序を入れ替えると色の指定が効かなくなる。
*/

/* ---------- 背景色の上書き（tokyonight-moon 標準から灰藍へ） ---------- */
.chroma {
  background-color: var(--color-code-bg);
}

.chroma .hl {
  background-color: var(--color-code-hl-bg);
}

/* ---------- ラッパー ---------- */
.highlight-wrapper {
  position: relative;
  margin: 1.5rem 0;
}

.highlight {
  position: relative;
  z-index: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-sm);
}

.highlight > .chroma {
  position: static;
  z-index: 1;
  border-radius: var(--radius-sm);
  /* ファイル名ラベルとコピーボタンの分だけ上を空ける */
  padding: 1.75rem 0.75rem 0.75rem;
  overflow: auto;
  font-family: var(--font-code);
  font-size: var(--font-code-size);
  line-height: 1.6;
}

/* ---------- 行番号テーブル（lineNumbersInTable = true） ---------- */
.chroma .lntable {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
  border-spacing: 0;
  border: 0;
  overflow: auto;
}

.chroma .lntd:first-child {
  /* 行番号列。幅を内容に合わせ、コード列との間に余白を置く */
  width: 1%;
  padding: 0 0.75rem 0 0;
  margin: 0;
  border-right: 1px solid rgba(200, 211, 245, 0.15);
}

.chroma .lntd:last-child {
  padding: 0 0 0 0.75rem;
  margin: 0;
}

/* ---------- ファイル名ラベル ---------- */
.code-name {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  font-family: var(--font-tag);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  color: #c8d3f5;
  background-color: rgba(200, 211, 245, 0.12);
  border-bottom-right-radius: var(--radius-sm);
  border-top-left-radius: var(--radius-sm);
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  margin: 0;
}

/* ---------- コピーボタン ---------- */
.copy-code-button {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  font-family: var(--font-tag);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1;
  color: #c8d3f5;
  background-color: rgba(200, 211, 245, 0.12);
  border: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.copy-code-button:hover,
.copy-code-button:focus-visible {
  opacity: 1;
  background-color: rgba(200, 211, 245, 0.22);
}

/* コピー完了時に .copy-code-button の文言が変わる（code-copy.js が制御） */

/* ---------- 文字色の上書き ----------
   chroma.css の該当セレクタを、読み込み順の後勝ちで置き換える。
   セレクタは `hugo gen chromastyles --style=tokyonight-moon` の出力に対応。
   スタイルを変更した場合はここも合わせて見直すこと。 */

/* 標準文字色。ハイライト対象外のトークン全般 */
.chroma,
.chroma .cl,
.chroma .x,
.chroma .nx,
.chroma .go,
.chroma .gp,
.chroma .ld,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm {
  color: var(--color-code-fg);
}

/* コメント全種。docstring / heredoc も同じ色が振られている */
.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm,
.chroma .cp,
.chroma .cpf,
.chroma .cs,
.chroma .sd,
.chroma .sh {
  color: var(--color-code-comment);
}

/* エラー・diffの削除行・トレースバック */
.chroma .err,
.chroma .gd,
.chroma .gr,
.chroma .gt {
  color: var(--color-code-error);
}

/* 行番号 */
.chroma .ln,
.chroma .lnt {
  color: var(--color-code-lineno);
}