/* nsys.dev 技術ブログ — 第1段カスタマイズ（トークン＋本文タイポ）。
   crofty の公式編集面。crofty.css の後に読み込まれるため、ここの指定が勝つ。
   移植元(src/blog/blog.css)の見た目＝サンセリフ・白背景・青リンク・GitHub配色・
   やや広い本文幅 に寄せる。構造(虹ライン・斜体ロゴ)は第2段(eject --full)で。 */

/* ── 公式トークン（移植元の配色・フォント・本文幅へ）────────────── */
:root {
  color-scheme: light;            /* 移植元はライト固定（ダーク無し） */
  --bg:    #ffffff;               /* 背景：白 */
  --ink:   #333333;               /* 本文・見出し */
  --muted: #666666;               /* 日付・キャプション・補助テキスト */
  --line:  #e5e5e5;               /* 罫線・境界・下線 */
  --accent:#2563eb;               /* CTA青：リンク色／ホバー */
  --code-bg:#f6f8fa;              /* インラインコード／コードブロック地 */

  --measure: 45rem;               /* 本文幅 ≈720px（移植元 container-narrow） */

  --font-body:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-chrome:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── 第2段: 移植元ブランド（ヘッダーの虹ライン＋sticky）──────────── */

/* ヘッダー下の虹グラデーション・ライン。crofty のヘッダーは読みカラム幅だが、
   ラインだけは 100vw で全幅ブリードさせ、移植元の見た目に合わせる。
   スクロール連動(JS)は使わず、CSSのみの緩やかなシマーに（動き低減設定を尊重）。 */
/* 移植元のスティッキー挙動を再現：上部固定・全幅バー・高さ圧縮。
   crofty のヘッダーは読みカラム幅だが、背景バーは全幅にして中身だけ列幅に整列する。 */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  max-width: none; margin-inline: 0;
  padding-top: 1rem; padding-bottom: 0.7rem;
  padding-inline: max(1.5rem, calc((100% - var(--measure)) / 2));
}
.site-header::after {
  content: "";
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; height: 2px;
  background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header::after { animation: nsys-rainbow 12s linear infinite; }
}
@keyframes nsys-rainbow { to { background-position: 200% 0; } }

/* ── 本文の基本タイポ（移植元 16px / 行間1.8）──────────────────── */
body { font-size: 16px; line-height: 1.8; }

/* リンクは常に青＋下線（移植元の本文リンク） */
.content a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--line); }
.content a:hover { text-decoration-color: currentColor; }

/* 見出しは左寄せ・太字。h2 は下線（移植元の記事見出し） */
.post-header { text-align: left; }
.page-header h1 { text-align: left; }
.content h2 { font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.content h3 { font-weight: 700; }

/* ── コードブロック（GitHub Light：色は chroma.css、枠は移植元寄せ）── */
.content pre { border: 1px solid var(--line); }
.content .chroma { background: var(--code-bg); }  /* chroma.css の地色を統一 */

/* ── 記事本文の画像・図（テーマ既定に img/table/figure ルールが無い分）── */
.content img { max-width: 100%; height: auto; border-radius: 4px; }

/* Mermaid 図（ビルド済みSVG）。各SVGは実寸(width/height)を持つので、引き伸ばさず
   自然サイズで中央寄せ。列幅を超える場合だけ縮小する（レスポンシブ）。 */
.mermaid { margin: 1.75rem 0; text-align: center; }
.mermaid img { max-width: 100%; height: auto; border-radius: 0; }

/* 図とキャプション */
.content figure { margin: 1.75rem 0; }
.content figcaption {
  margin-top: 0.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* テーブル（移植元：全幅・罫線・見出し地） */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}
.content th,
.content td {
  border: 1px solid var(--line);
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.content th { background: var(--code-bg); font-weight: 600; }

/* ── 記事末尾〜フッターのリズム（custom.css のみで対応）─────────────
   テーマ既定では「タグ／共有／一覧へ戻る／フッタ」が
   〈同じ1px罫線＋同じグレー小文字〉で4段積みになり、横線がはしご状に並んで
   主役のない平板な見た目になる。ここでは
     ① 本文との区切りを「太め1本」の終止線に集約し、内側の重複罫線を撤去
     ② タグ・共有・一覧を罫線なしの“メタ群”として近接配置（右寄せで群化）
     ③ 支援(Stripe)リンクを青塗りCTAへ昇格＝視線の主役に
     ④ 末尾の RSS・© は静かな1行のまま
   で「めりはり」を出す。 */

/* 注: .content は <main> 全体のラッパなので、上の `.content a`(青＋下線)が
   タグ/一覧/RSS などクロム系リンクにも波及してしまう。crofty 本来の
   「静かなグレー・下線なし」を、触れる末尾領域に限って復元する。 */
.post-tags a,
.post-nav a,
.site-footer-meta a {
  color: var(--muted);
  text-decoration: none;
}
.post-tags a:hover,
.post-nav a:hover,
.site-footer-meta a:hover { color: var(--accent); }

/* ① 本文末の区切りは太め1本に集約（タグ帯の上だけに置く） */
.post-tags {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ink);   /* 1px line → 2px ink で“ここで本文は終わり” */
}
.post-tags span { color: var(--ink); }  /* TAGS ラベルを少し前に出して群の起点に */

/* ② 共有・一覧は罫線を撤去してタグ直下へ近接（はしごを解消し1つの群に）。
      共有ボタンは右寄せにして、タグ(左)と視覚的に対に見せる。 */
.crofty-share {
  margin-top: 0.7rem;
  padding-top: 0;
  border-top: none;
  justify-content: flex-end;
}
.post-nav { margin-top: 0.7rem; }

/* ③ 支援(Stripe)を青塗りCTAへ昇格。末尾で唯一の“塗り”＝視線の主役。
      囲み罫線は外し、CTAそのものに存在感を持たせる。 */
.crofty-support {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2rem;
}
.crofty-support-message { font-size: 0.95rem; }
.crofty-support-link {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  padding: 0.5rem 1.5rem;          /* 既定のピルより大きく＝主役の重み */
  font-weight: 600;
  text-decoration: none;
}
.crofty-support-link:hover {
  background: #1d4ed8;             /* accent をひと段濃く */
  border-color: #1d4ed8;
  color: #fff;
}