/* Mermaid図を中央寄せ・余白調整 */
.mermaid { text-align: center; margin: 1.2em 0; }

/* Signal Flow等の表を見やすく */
.md-typeset table:not([class]) { font-size: 0.78rem; }

/* 学習メタ情報ボックス */
.learn-meta { border-left: 4px solid var(--md-accent-fg-color);
  padding: 0.4em 1em; background: var(--md-code-bg-color); margin: 1em 0; }

/* --- レイアウト幅の調整: 本文（説明エリア）を広げる --- */
/* コンテンツ全体の最大幅を広げる（既定 61rem → 拡張） */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 75rem; }

  /* サイドバー幅は CSS 変数で制御（sidebar-resize.js がドラッグで更新） */
  :root { --sb-primary-w: 10rem; }

  /* 左ナビ（サイドバー）: 既定 12.1rem → 変数参照 */
  .md-sidebar--primary { width: var(--sb-primary-w); }

  /* 右の目次(TOC)を狭める（既定 12.1rem） */
  .md-sidebar--secondary { width: 10rem; }
}

/* --- サイドバーのドラッグ・リサイズ用ハンドル（左ナビのみ） --- */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary { position: relative; }

  .sb-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 5;
    /* 掴みやすいよう薄い当たり判定。既定は透明 */
    background: transparent;
    transition: background 0.15s ease;
  }
  /* 左ナビは右端に配置 */
  .sb-resize-primary { right: -4px; }

  .sb-resize-handle:hover,
  body.sb-resizing .sb-resize-handle {
    background: var(--md-accent-fg-color);
    opacity: 0.5;
  }

  /* ドラッグ中はテキスト選択を抑止し、カーソルを統一 */
  body.sb-resizing { cursor: col-resize; user-select: none; }
}