/* 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; }