/* ============================================
   Easy Table of Contents 出力の見た目調整
   ============================================
   目次の生成・開閉・スムーススクロールはすべてプラグイン側の機能に任せる
   （本テーマ側でHTML/PHP/JSによる目次生成は行わない）。
   ここではプラグインが出力するHTML（#ez-toc-container 配下）に対して、
   static/article.html の .toc デザインに近づけるための見た目調整のみを行う。

   スコープについて:
   - すべてのセレクタを #ez-toc-container 配下に限定しており、
     本文中の通常の ul / ol / li やサイドバーには一切影響しない。
   - 色・フォント・角丸はすべて style.css で定義済みの既存CSS変数を再利用し、
     新しい色を追加していない。

   !important について:
   - width / max-width / float / margin は、Easy Table of Contentsの管理画面設定
     （表示幅など）がインラインstyle属性として出力される場合があり、通常の詳細度では
     上書きできないため、本文幅に確実に揃えることを目的に付与している。
   - リストマーカー（黄色い点）の非表示も、プラグイン側スキンのCSSが
     ::marker / ::before で独自に描画している場合に確実に打ち消すため付与している。
   - それ以外の見た目調整（色・余白・文字サイズ等）には付与していない。

   プラグインのバージョン・スキン設定により実際の出力クラス名が異なる場合があるため、
   実装後に表示を確認し、必要であれば本ファイルのセレクタを調整すること
   （Easy Table of Contents プラグイン本体のファイルは直接編集しないこと）。
   ============================================ */

#ez-toc-container {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box;
  background: var(--color-bg-yellow-pale);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand-yellow);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 32px 0 !important;
  box-shadow: none;
}

#ez-toc-container .ez-toc-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  margin: 0 0 16px;
  padding: 0;
}

#ez-toc-container .ez-toc-icon-toggle-span,
#ez-toc-container .ez-toc-toggle {
  color: var(--color-brand-navy);
}

#ez-toc-container nav {
  font-family: var(--font-family-base);
}

/* 目次リスト本体：横幅いっぱい・1列・不要なマーカーを確実に除去 */
#ez-toc-container .ez-toc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none !important;
  list-style-image: none !important;
}

#ez-toc-container .ez-toc-list li {
  list-style: none !important;
  list-style-image: none !important;
  margin: 0;
  padding: 2px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* プラグインのスキンCSSが疑似要素で描画する黄色い点等のマーカーを打ち消す */
#ez-toc-container .ez-toc-list li::marker,
#ez-toc-container .ez-toc-list li::before {
  content: none !important;
  display: none !important;
}

/* 子項目（見出しレベルが深い階層）：インデント・文字サイズ・太さで階層を表現 */
#ez-toc-container .ez-toc-list .ez-toc-list {
  gap: 6px;
  margin-top: 6px;
  padding-left: 24px;
}

#ez-toc-container .ez-toc-list .ez-toc-list li {
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

#ez-toc-container .ez-toc-link {
  display: inline-block;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: none;
}

#ez-toc-container .ez-toc-link:hover {
  color: var(--color-brand-yellow-dark);
}

#ez-toc-container .counter-hierarchy {
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  #ez-toc-container {
    padding: 16px 18px;
    margin: 24px 0 !important;
  }

  #ez-toc-container .ez-toc-list .ez-toc-list {
    padding-left: 18px;
  }
}