/**
 * column.css - コラム記事の読みやすさとレイアウト
 * 日本語タイポグラフィのベストプラクティスに基づく
 * 参考: 行間1.6-1.8、1行45-75文字、段落間0.5-1em
 */

/* ==========================================
   コラム本文コンテナ
   日本語の読みやすさを最適化
   ========================================== */
.column-body {
  /* 行間: 日本語向け1.7（目視疲労軽減） */
  line-height: 1.7;
  /* 字間: 日本語の可読性向上 */
  letter-spacing: 0.02em;
}

/* スマホ: 余白・読みやすさを確保 */
@media (max-width: 767px) {
  .column-body {
    line-height: 1.75;
    letter-spacing: 0.03em;
  }
}

/* 段落: 視覚的な区切りを明確に */
.column-body p {
  margin-bottom: 1em;
}

.column-body p:last-child {
  margin-bottom: 0;
}

/* 見出し直後の段落は少し余白を広げる */
.column-body h2 + p,
.column-body h3 + p {
  margin-top: 0.25em;
}

/* ==========================================
   h3 サブ見出しのデザイン
   左ボーダー + 軽い背景でセクションを区切る
   ========================================== */
.column-body h3 {
  position: relative;
  margin: 2.25rem 0 1rem 0;
  padding: 0.625rem 1rem 0.625rem 1.25rem;
  border-left: 4px solid #4a5d23;
  background: linear-gradient(to right, rgba(74, 93, 35, 0.08) 0%, rgba(74, 93, 35, 0.02) 50%, transparent 100%);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  /* Tailwindのmb-3を上書き */
  margin-bottom: 1rem;
}

/* 最初のh3（h2直後）は上余白を抑える */
.column-body h2 + h3 {
  margin-top: 1.5rem;
}

/* スマホ: タップしやすい高さ・余白 */
@media (max-width: 767px) {
  .column-body h3 {
    margin-top: 1.75rem;
    padding: 0.75rem 1rem 0.75rem 1rem;
    font-size: 1rem;
  }
  
  .column-body h2 + h3 {
    margin-top: 1.25rem;
  }
}

/* ==========================================
   h2 との階層バランス
   ========================================== */
.column-body h2 {
  margin-bottom: 1.25rem;
}

/* リスト・ブロック引用の余白 */
.column-body ul,
.column-body ol {
  margin: 1.25rem 0;
}

.column-body li {
  margin-bottom: 0.5em;
}

.column-body blockquote {
  margin: 1.5rem 0;
}

/* テーブル前後の余白 */
.column-body .overflow-x-auto {
  margin: 1.5rem 0;
}

/* ==========================================
   参照資料・参考文献エリア
   引用風で控えめなデザイン（目立たない）
   ========================================== */
.column-references {
  margin-top: 2rem;
  padding: 1.25rem 1rem 1.25rem 1.25rem;
  background: #faf9f7;
  border: 1px solid #eae6de;
  border-radius: 4px;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: #666;
}

.column-references h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 0.75rem 0;
  padding: 0;
  border: none;
  background: none;
}

.column-references ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
}

.column-references ul li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dotted #e0ddd8;
}

.column-references ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.column-references ul li::before {
  content: "・";
  position: absolute;
  left: -0.25rem;
  color: #999;
}

.column-references a {
  color: #6b7c4a;
  text-decoration: none;
  word-break: break-all;
}

.column-references a:hover {
  text-decoration: underline;
  color: #5a6b3a;
}

.column-references p {
  margin: 0.5rem 0 0 0;
  font-size: 0.8125rem;
}

/* 目次 */
.column-toc {
  margin-bottom: 2rem;
  padding: 1.25rem 1.25rem 1rem;
  background: #faf9f7;
  border: 1px solid #eae6de;
  border-radius: 4px;
}

.column-toc__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5d23;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5ebd9;
}

.column-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.column-toc__list li {
  margin: 0;
  padding: 0.35rem 0;
  border-bottom: 1px dotted #e0ddd8;
}

.column-toc__list li:last-child {
  border-bottom: none;
}

.column-toc__list a {
  color: #555;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.column-toc__list a:hover {
  color: #4a5d23;
  text-decoration: underline;
}