/**
 * HEADs AI — Notes stylesheet (v4)
 *
 * v4 設計の柱:
 *   1. CSS 変数で設計トークン化（measure/type/spacing/color）
 *   2. 記事冒頭の 4 段構成（eyebrow / title / lead / meta line）
 *   3. H2 のリズム強化（上 72 / 下 20、::before で 24px hairline）
 *   4. 装飾 hr を 80px section-break 1 種類に統一
 *   5. pullquote と blockquote の意匠分離
 *   6. <figcaption> 定義の追加
 *
 * 役割の三層構造:
 *   - .hero__top-nav / .hero__notes-link
 *     front-page の暗いヒーロー上、root stacking で z-index:999
 *   - .lab-notes
 *     front-page の EXTENSION 直後の白基調セクション
 *   - .notes-page / .notes-header / .notes-archive / .note-single
 *     /blog/ 配下の Notes 専用ページ群
 */

:root {
  /* ───── Color ───── */
  --notes-text-primary:   #1d1d1f;             /* AAA 17.3:1 vs #fff */
  --notes-text-secondary: #515154;             /* AAA  8.6:1 — リード用 */
  --notes-text-tertiary:  rgba(0, 0, 0, 0.56);
  --notes-bg-primary:     #ffffff;
  --notes-bg-subtle:      #f5f5f7;
  --notes-line-hairline:  rgba(0, 0, 0, 0.08);
  --notes-accent-blue:    #0066cc;
  --notes-accent-soft:    rgba(0, 102, 204, 0.08);
  --notes-accent-border:  rgba(0, 102, 204, 0.18);

  /* ───── Type family ───── */
  --notes-ff-sans: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --notes-ff-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ───── Measure ───── */
  --notes-measure-body:   720px;
  --notes-measure-narrow: 640px;
  --notes-measure-wide:   1080px;

  /* ───── Type scale ───── */
  --notes-fs-eyebrow:   11px;
  --notes-fs-meta:      12px;
  --notes-fs-caption:   13px;
  --notes-fs-body:      17px;
  --notes-fs-lead:      19px;
  --notes-fs-h3:        22px;
  --notes-fs-h2:        30px;
  --notes-fs-h1:        44px;
  --notes-fs-pullquote: 22px;

  /* ───── Line-height ───── */
  --notes-lh-mono: 1.5;
  --notes-lh-h1:   1.22;
  --notes-lh-h2:   1.35;
  --notes-lh-h3:   1.5;
  --notes-lh-body: 1.85;
  --notes-lh-lead: 1.8;

  /* ───── Letter-spacing ───── */
  --notes-ls-h1:   -0.5px;
  --notes-ls-h2:   -0.3px;
  --notes-ls-h3:   -0.18px;
  --notes-ls-mono: -0.44px;

  /* ───── Spacing rhythm (4px base) ───── */
  --notes-sp-2:  8px;
  --notes-sp-3:  12px;
  --notes-sp-4:  16px;
  --notes-sp-5:  20px;
  --notes-sp-6:  24px;
  --notes-sp-8:  32px;
  --notes-sp-10: 40px;
  --notes-sp-12: 48px;
  --notes-sp-14: 56px;
  --notes-sp-16: 64px;
  --notes-sp-18: 72px;
  --notes-sp-20: 80px;
  --notes-sp-24: 96px;
  --notes-sp-30: 120px;
}

/* ============================================================
   1. 共通: front-page 暗背景上の Notes 入り口
   ============================================================ */

.hero__top-nav {
  position: fixed;
  top: 28px;
  right: 36px;
  /* v1 の 95 → v3 で 999。Hero の <main> stacking に確実に勝つ。
     これが Blog ボタンがクリックできなかった根本原因。 */
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none; /* 親は透過、リンクのみ受ける */
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

/* SampleDrawer が開いている間 (body.has-drawer-open) は、この固定 Notes
   入口を退避させる。z-index:999 のままだと z-index:100 のドロワーより
   手前に描画され、ドロワー右上の閉じるボタン (.sample-drawer__close) と
   同じ座標で重なってしまうため。ドロワーは全画面モーダルなので、その間
   ヒーローの Notes 入口は隠れているのが自然。閉じると元に戻る。 */
body.has-drawer-open .hero__top-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero__notes-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: 980px;
  background: rgba(20, 24, 32, 0.55);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  text-decoration: none;
  transition: background 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.hero__notes-link:hover,
.hero__notes-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(180, 210, 255, 0.42);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(180, 210, 255, 0.16);
  outline: none;
}

.hero__notes-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  opacity: 0.92;
}

@media (max-width: 640px) {
  .hero__top-nav {
    top: 16px;
    right: 16px;
  }
  .hero__notes-link {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
  }
}

/* ============================================================
   2. Lab Notes セクション（front-page 内、EXTENSION の直後）
   --------------------------------------------------------------
   暗→白の遷移を分断にしないため:
     - 上部 hairline + 微光ライン（青み）で「ガラスの開口部」のような遷移
     - パディング 144px / 120px で十分な呼吸
     - セクション内も余白潤沢、行間広め
   ============================================================ */

.lab-notes {
  position: relative;
  z-index: 10;
  background: #ffffff;
  color: #1d1d1f;
  padding: 144px 24px 128px;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  border-top: 1px solid rgba(180, 210, 255, 0.08);
}

/* 上部の微光ライン: 暗→白の境界を「光のシーム」として処理 */
.lab-notes::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60%);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(180, 210, 255, 0) 0%,
    rgba(180, 210, 255, 0.32) 50%,
    rgba(180, 210, 255, 0) 100%
  );
}

.lab-notes__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.lab-notes__header {
  text-align: center;
  margin-bottom: 80px;
}

.lab-notes__eyebrow {
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.44px;
  color: rgba(0, 0, 0, 0.56);
  margin: 0 0 20px;
  text-transform: uppercase;
}

.lab-notes__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  margin: 0 0 20px;
  color: #1d1d1f;
}

.lab-notes__lead {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.56);
  margin: 0 auto;
  max-width: 560px;
}

/* カードグリッド */
.lab-notes__list {
  list-style: none;
  margin: 0 0 64px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lab-notes__item {
  margin: 0;
}

.lab-notes__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  background: #f5f5f7;
  border: 1px solid transparent;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.lab-notes__card:hover,
.lab-notes__card:focus-visible {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  outline: none;
}

.lab-notes__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.44px;
  color: rgba(0, 0, 0, 0.56);
  text-transform: uppercase;
}

.lab-notes__category {
  padding: 2px 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.lab-notes__card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.18px;
  margin: 0 0 12px;
  color: #1d1d1f;
}

.lab-notes__excerpt {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 24px;
  flex: 1;
}

.lab-notes__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #0066cc;
  transition: gap 0.2s ease;
}

.lab-notes__card:hover .lab-notes__more,
.lab-notes__card:focus-visible .lab-notes__more {
  gap: 8px;
}

.lab-notes__empty {
  text-align: center;
  padding: 48px 0 8px;
  color: rgba(0, 0, 0, 0.48);
  font-size: 14px;
  font-style: normal;
}

.lab-notes__footer {
  text-align: center;
}

.lab-notes__more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 32px;
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: opacity 0.2s ease, gap 0.2s ease;
}

.lab-notes__more-link:hover,
.lab-notes__more-link:focus-visible {
  opacity: 0.86;
  gap: 10px;
  color: #f5f5f7;
  outline: none;
}

@media (max-width: 960px) {
  .lab-notes__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lab-notes { padding: 96px 20px 80px; }
  .lab-notes__title { font-size: 28px; }
  .lab-notes__list { grid-template-columns: 1fr; gap: 16px; }
  .lab-notes__card { padding: 24px 20px; }
}

/* ============================================================
   3. Notes 専用ページ群（/blog/ 配下）
   --------------------------------------------------------------
   白基調・読みやすさ最大化・ロゴ画像で正しく配置。
   ============================================================ */

.notes-page {
  margin: 0;
  background: #ffffff;
  color: #1d1d1f;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.notes-page a { color: #0066cc; text-decoration: none; }
.notes-page a:hover { opacity: 0.72; }

/* --- ヘッダー（sticky すりガラス、ロゴ画像、丁寧な spacing） --- */

.notes-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 暗いガラスのヘッダーに切り替え。理由:
     1. 白半透明だと「白い四角」がそのまま浮いて見える(透過が活きない)
     2. front-page のヒーロー世界と地続きの暗いトーンに揃える
     3. 本文セクションは白基調のままなので、読みやすさは犠牲にならない
     ロゴは front-page と同じ heads-ai-light (白ワードマーク、透過 RGBA)
     に切り替えるので、暗いガラスの上できれいに浮く。 */
  background: rgba(15, 18, 24, 0.72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.notes-header__inner {
  max-width: var(--notes-measure-wide);
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 76px;
}

.notes-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.notes-header__logo:hover { opacity: 0.78; }

.notes-header__logo-img {
  display: block;
  height: 32px;     /* 28 → 32 で呼吸とブランド存在感 */
  width: auto;
}

.notes-header__nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ナビをピル型ボタンに昇格。テキストだけ並ぶより、Glass 質感の
   ピルが3つ並ぶ方が「ヘッダーとして組まれている」感が出る。
   - 通常: 半透明白枠 + 薄背景
   - ホバー: 浮き上がり
   - 現在ページ: 白で塗りつぶし + 暗文字（一番強い） */
.notes-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 980px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.notes-header__nav a:hover,
.notes-header__nav a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  opacity: 1;
  outline: none;
}
.notes-header__nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: #0c0e12;
}
.notes-header__nav a[aria-current="page"]:hover,
.notes-header__nav a[aria-current="page"]:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #0c0e12;
}

@media (max-width: 640px) {
  .notes-header__inner { padding: 16px 20px; gap: 16px; min-height: 60px; }
  .notes-header__logo-img { height: 24px; }
  .notes-header__nav { gap: 6px; }
  .notes-header__nav a { font-size: 12px; padding: 6px 12px; }
}

/* --- 共通レイアウト --- */

.notes-main {
  padding: 80px 24px 144px;
}
.notes-main__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* --- 一覧ページ（home.php） --- */

/* イントロブロック — hairline 区切りに頼らず、ブランドバッジ風の
   eyebrow とゆとりのある title で「ここから読み物が始まる」を表現。 */
.notes-archive__intro {
  text-align: left;
  margin-bottom: 64px;
  padding-bottom: 0;
  border-bottom: none;
}

.notes-archive__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.18);
  border-radius: 4px;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #0066cc;
  margin: 0 0 28px;
  text-transform: uppercase;
}

.notes-archive__title {
  font-size: 52px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.52px;
  margin: 0 0 24px;
  color: #1d1d1f;
}

.notes-archive__lead {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.64);
  margin: 0;
  max-width: 600px;
}

/* 記事カード — hairline 区切りでただ並ぶのをやめて、ちゃんと「カード」に。
   白背景 + 細いボーダー、ホバーで浮き上がり、Read ボタンが反転して
   「次の動作」が一目で見える。 */
.notes-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.notes-archive__item {
  margin: 0;
  border: none;
}
.notes-archive__item:first-child {
  border-top: none;
}

.notes-archive__card {
  display: block;
  padding: 36px 32px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.notes-archive__card:hover,
.notes-archive__card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  opacity: 1;
  outline: none;
}

.notes-archive__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.44px;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

.notes-archive__category {
  padding: 3px 10px;
  background: #f5f5f7;
  border-radius: 4px;
  color: #1d1d1f;
}

.notes-archive__card-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 16px;
  letter-spacing: -0.26px;
  color: #1d1d1f;
}

.notes-archive__excerpt {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 24px;
}

/* Read ボタン — ただの青文字をやめて、薄いピル → ホバーで暗ピルに反転。
   矢印が右にずれるマイクロインタラクションで「次へ」を強める。 */
.notes-archive__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #f5f5f7;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #1d1d1f;
  transition: background 0.24s ease, color 0.24s ease, gap 0.24s ease;
}
.notes-archive__card:hover .notes-archive__more,
.notes-archive__card:focus-visible .notes-archive__more {
  background: #1d1d1f;
  color: #ffffff;
  gap: 10px;
}

@media (max-width: 640px) {
  .notes-archive__title { font-size: 36px; letter-spacing: -0.36px; }
  .notes-archive__card { padding: 28px 22px; }
  .notes-archive__card-title { font-size: 22px; }
}

.notes-archive__empty {
  text-align: center;
  padding: 80px 0;
  color: rgba(0, 0, 0, 0.48);
  font-size: 15px;
}

/* ページネーション */
.notes-pagination {
  margin-top: 72px;
  display: flex;
  justify-content: center;
}
.notes-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  margin: 0 4px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.56);
  text-decoration: none;
  transition: background 0.2s ease;
}
.notes-pagination .page-numbers:hover {
  background: #f5f5f7;
  opacity: 1;
}
.notes-pagination .page-numbers.current {
  background: #1d1d1f;
  color: #f5f5f7;
}

@media (max-width: 640px) {
  .notes-main { padding: 48px 20px 96px; }
  .notes-archive__title { font-size: 32px; }
  .notes-archive__card { padding: 32px 0; }
  .notes-archive__card-title { font-size: 22px; }
}

/* ============================================================
   個別記事ページ — 冒頭の 4 段構成
   --------------------------------------------------------------
     1. eyebrow  (LAB NOTES ・ カテゴリ)
     2. title    (H1 44px)
     3. lead     (本文初段落を CSS で大きく扱う)
     4. meta     (日付などを hairline 上下でラップ)
   ============================================================ */

.note-single__header {
  margin-bottom: var(--notes-sp-10);
  padding-bottom: 0;
  border-bottom: none;
}

/* eyebrow — カテゴリ・分類を IBM Plex Mono で立てる。
   タイトル直前で「これは何の話か」を一目で伝える。 */
.note-single__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--notes-sp-5);
  font-family: var(--notes-ff-mono);
  font-size: var(--notes-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--notes-accent-blue);
  text-transform: uppercase;
}
.note-single__eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--notes-accent-blue);
  opacity: 0.5;
}

.note-single__title {
  font-size: var(--notes-fs-h1);
  font-weight: 700;
  line-height: var(--notes-lh-h1);
  letter-spacing: var(--notes-ls-h1);
  margin: 0 0 var(--notes-sp-6);
  color: var(--notes-text-primary);
  /* 日本語タイトルで「す。」だけ単独行に取り残されないように。
     text-wrap: balance は各行のテキスト長を均等化（モダンブラウザ対応）。
     word-break: keep-all は単語の途中で切らない原則。
     overflow-wrap: anywhere はそれでも溢れたら最後の保険。 */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* meta — hairline 上下で挟む正式メタ行。
   著者名や読了時間は出さず、日付だけのミニマル仕様。 */
.note-single__meta {
  display: flex;
  gap: var(--notes-sp-3);
  align-items: center;
  padding: var(--notes-sp-4) 0;
  margin: 0;
  border-top: 1px solid var(--notes-line-hairline);
  border-bottom: 1px solid var(--notes-line-hairline);
  font-family: var(--notes-ff-mono);
  font-size: var(--notes-fs-meta);
  font-weight: 500;
  letter-spacing: var(--notes-ls-mono);
  color: var(--notes-text-tertiary);
  text-transform: uppercase;
}

.note-single__thumbnail {
  margin-bottom: 56px;
}
.note-single__thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.note-single__content {
  margin-top: var(--notes-sp-12);
  font-size: var(--notes-fs-body);          /* 17px */
  line-height: 2.0;                         /* 1.85 → 2.0 で呼吸を広く */
  color: var(--notes-text-primary);
  font-feature-settings: "palt";
}

/* リード段落の強調は削除。全段落を同じトーンにして、装飾より
   呼吸で品格を作る方針（篠原Lab 観察 → HEADS AI 独自方向に翻案）。 */

/* H2 — シンプルなサブタイトル。
   章番号と hairline ::before は削除した。装飾より「呼吸」で
   章の切り替わりを表現する方針へ。番号を本文中で使いたい時は
   「ステップ1：」「失敗1：」のように地の文で書く（篠原Lab 流）。
   日本語の改行コントロールだけは残す。 */
.note-single__content h2 {
  font-size: var(--notes-fs-h2);            /* 30px */
  font-weight: 700;
  line-height: var(--notes-lh-h2);          /* 1.35 */
  letter-spacing: var(--notes-ls-h2);
  margin: var(--notes-sp-18) 0 var(--notes-sp-5);
  color: var(--notes-text-primary);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.note-single__content h3 {
  font-size: var(--notes-fs-h3);            /* 22px */
  font-weight: 600;
  line-height: var(--notes-lh-h3);
  letter-spacing: var(--notes-ls-h3);
  margin: var(--notes-sp-12) 0 var(--notes-sp-4);
}

.note-single__content p { margin: 0 0 var(--notes-sp-5); }

/* blockquote — 短い引用の標準スタイル */
.note-single__content blockquote {
  margin: var(--notes-sp-10) 0;
  padding: var(--notes-sp-5) var(--notes-sp-6);
  border-left: 3px solid var(--notes-accent-blue);
  background: var(--notes-bg-subtle);
  border-radius: 0 8px 8px 0;
  font-size: var(--notes-fs-body);
  color: var(--notes-text-primary);
}
.note-single__content blockquote p:last-child { margin-bottom: 0; }

.note-single__content ul,
.note-single__content ol {
  margin: 0 0 var(--notes-sp-5);
  padding-left: var(--notes-sp-6);
}
.note-single__content li {
  margin-bottom: var(--notes-sp-3);
  line-height: var(--notes-lh-body);
}

.note-single__content code {
  font-family: var(--notes-ff-mono);
  font-size: 14px;
  padding: 2px 6px;
  background: var(--notes-bg-subtle);
  border-radius: 4px;
}

.note-single__content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: var(--notes-sp-10) 0;
}

/* figure + figcaption — 図解とキャプション */
.note-single__content figure { margin: var(--notes-sp-12) 0; }
.note-single__content figure img { margin: 0; }
.note-single__content figcaption {
  margin-top: var(--notes-sp-3);
  font-family: var(--notes-ff-mono);
  font-size: var(--notes-fs-caption);
  line-height: 1.6;
  color: var(--notes-text-tertiary);
  letter-spacing: var(--notes-ls-mono);
  text-align: left;
}

/* section-break — 装飾 hr を 80px の細い線 1 種類に統一。
   章の切り替えに 0-3 個まで。装飾的「···」から品格のあるラインへ。 */
.note-single__content hr {
  border: none;
  margin: var(--notes-sp-24) auto;
  width: 80px;
  height: 1px;
  background: rgba(0, 0, 0, 0.16);
}

/* 「3原則」ブロック — 命題を箇条書きではなく「カード」として視覚化。
   本文中で重要な原則を立てるときに <ul class="note-principles"> として使う。 */
.note-single__content .note-principles {
  list-style: none;
  margin: 48px 0;
  padding: 36px 32px;
  background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.note-single__content .note-principles > li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 17px;
  line-height: 1.7;
  color: #1d1d1f;
  /* 3カラム時に「会社として知識が蓄積される。」のような長文が
     1列目だけで改行が起き、見た目が崩れる問題への対処。
     - text-wrap: balance で各行のテキスト長を均等化
     - word-break: keep-all で「される。」だけ取り残さない */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.note-single__content .note-principles > li::before {
  content: counter(note-principle, decimal-leading-zero);
  counter-increment: note-principle;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.48px;
  color: #0066cc;
  flex-shrink: 0;
  min-width: 24px;
}
.note-single__content .note-principles {
  counter-reset: note-principle;
}
@media (min-width: 720px) {
  .note-single__content .note-principles {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .note-single__content .note-principles > li {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
  }
}

/* キーフレーズの引用ブロック — 単純な blockquote より少し意匠的。
   本文中で「主張の核」を視覚的に立てるとき <blockquote class="note-pull">。 */
.note-single__content .note-pull {
  margin: 48px 0;
  padding: 32px 0;
  border: none;
  background: transparent;
  border-radius: 0;
  text-align: center;
  position: relative;
}
.note-single__content .note-pull::before,
.note-single__content .note-pull::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: rgba(0, 102, 204, 0.4);
  margin: 0 auto 24px;
}
.note-single__content .note-pull::after {
  margin: 24px auto 0;
}
.note-single__content .note-pull p {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.22px;
  color: #1d1d1f;
  margin: 0;
}
.note-single__content strong { font-weight: 600; }

/* 記事フッター */
.note-single__footer {
  margin-top: 96px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.note-single__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
.note-single__nav-prev,
.note-single__nav-next {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.56);
  line-height: 1.5;
  transition: color 0.2s ease;
}
.note-single__nav-prev:hover,
.note-single__nav-next:hover {
  color: #0066cc;
}
.note-single__nav-next {
  text-align: right;
}

/* IMPORTANT: selector を .notes-page a.note-single__back にしている理由 —
   page-wide `.notes-page a { color: #0066cc }` が同じ specificity の
   `.note-single__back` を勝って青文字になり、暗背景上で読めなくなる。
   要素を絞った tag.class 形にすれば 1点上回って白文字が確実に勝つ。 */
.notes-page a.note-single__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 32px;
  background: #1d1d1f;
  color: #ffffff;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: background 0.2s ease, gap 0.2s ease;
}
.notes-page a.note-single__back:hover,
.notes-page a.note-single__back:focus-visible {
  background: #000000;
  color: #ffffff;
  gap: 10px;
  opacity: 1;
  outline: none;
}

@media (max-width: 640px) {
  .note-single__title { font-size: 28px; }
  .note-single__content { font-size: 16px; }
  .note-single__content h2 { font-size: 22px; margin: 48px 0 16px; }
  .note-single__nav { grid-template-columns: 1fr; gap: 20px; }
  .note-single__nav-next { text-align: left; }
}