/* 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) {
  :root { --sb-grid-max: 75rem; }
  .md-grid { max-width: var(--sb-grid-max); }

  /* サイドバー幅は 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; }
}

/* --- サイドバーのドラッグ・リサイズ用ハンドル（左ナビのみ） --- */
/* 既定は非表示。デスクトップ幅でのみ表示する */
.sb-resize-handle { display: none; }

@media screen and (min-width: 76.25em) {
  .sb-resize-handle { display: block; }

  /*
   * ハンドルは body 直下に position: fixed で置く。
   * 横位置(left)はサイドバー右端Xを JS 実測、高さは top/bottom を
   * JS 実測してビューポート内のサイドバー可視範囲に一致させる。
   * → グリッド余白・scrollwrap・スクロール・フッターに一切依存せず、
   *   常にサイドバー右端に全高で貼り付き、全域で掴める。
   */
  .sb-resize-handle {
    position: fixed;
    top: var(--sb-handle-top, 2.4rem);
    height: var(--sb-handle-height, 80vh);
    left: var(--sb-handle-left, 160px);
    width: 16px;
    cursor: col-resize;
    z-index: 100;
    background: transparent;
    transition: background 0.15s ease;
  }

  /* つまみを可視化する縦バー（中央に細い線） */
  .sb-resize-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--md-default-fg-color--lightest);
    transition: background 0.15s ease, width 0.15s ease;
  }

  /* ホバー中央に「⋮」的なグリップ表示 */
  .sb-resize-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 32px;
    border-radius: 3px;
    background: var(--md-default-fg-color--lighter);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .sb-resize-handle:hover::before,
  body.sb-resizing .sb-resize-handle::before {
    background: var(--md-accent-fg-color);
    width: 3px;
  }
  .sb-resize-handle:hover::after,
  body.sb-resizing .sb-resize-handle::after {
    opacity: 0.9;
    background: var(--md-accent-fg-color);
  }

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