/* ===== Article Enhance Kit (scoped to .prose) ===== */

/* ToC */
.toc-box{
  border:1px solid #E5E7E9; background:#FFFFFF; border-radius:12px; padding:14px; margin:12px 0 18px;
}
.toc-box h2{ font-size:1rem; margin:0 0 8px; }
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list li{ margin:.2em 0; }
.toc-list a{ text-decoration:none; color:#2F3A35; }
.toc-list a:hover{ text-decoration:underline; }
.toc-list .toc-h3{ margin-left:1em; font-size:.95em; opacity:.9; }

/* Callouts */
.callout{
  border-radius:12px; padding:12px 14px; margin:16px 0;
  border:1px solid #E5E7E9; background:#F9FAFB;
}
.callout .label{ font-weight:700; margin-right:.3em; }
.callout.tip{ border-color:#C7E6D6; background:#EDF7F1; }
.callout.tip .label{ color:#2F6F58; }
.callout.warn{ border-color:#F8D7DA; background:#FFF5F5; }
.callout.warn .label{ color:#B91C1C; }

/* Key-Value "Table" using <dl> for safety */
.kv-table{
  display:grid; grid-template-columns: 1fr 2fr; gap:6px 12px;
  border:1px solid #E5E7E9; border-radius:12px; padding:12px; margin:16px 0;
  background:#FFFFFF;
}
.kv-table dt{ font-weight:700; color:#374151; }
.kv-table dd{ margin:0; color:#1F2937; }

/* Story / Experience box */
.story{
  border-left:4px solid #4F6F62; background:#F3F6F4; border-radius:12px; padding:12px 14px; margin:16px 0;
}
.story .label{ font-weight:700; margin-right:.3em; color:#2F3A35; }

/* Q&A */
.qa{ border:1px dashed #E5E7E9; background:#FFFFFF; border-radius:12px; padding:12px 14px; margin:16px 0; }
.qa .q{ font-weight:700; }
.qa .a{ margin-top:.4em; }

/* Heading icons (optional) */
.prose h2.icon-warn::before{ content:"⚠️ "; }
.prose h2.icon-tip::before{ content:"💡 "; }
.prose h2.icon-sleep::before{ content:"🌙 "; }
.prose h2.icon-preg::before{ content:"🤰 "; }

/* Smooth anchor scroll */
:root{ scroll-behavior:smooth; }

/* <strong><p> の色付け */
.prose strong {
    color: #4F6F62; /* Theme B (Sage Chic) のアクティブカラー */
    font-weight: 700;
}


/* 表の視認性改善 */
.prose .compare-table {
    width: 100%;
    border-collapse: collapse; /* 罫線の重複を解消 */
    margin: 1.5em 0; /* 上下の余白を確保 */
    font-size: 0.95rem; /* テーブル内は少し文字を小さくして詰まり感を軽減 */
}

/* ヘッダーのスタイル */
.prose .compare-table thead th {
    background-color: #EDF7F1; /* 薄い緑色の背景（.callout.tip に近い色） */
    border: 1px solid #C7E6D6;
    padding: 10px 8px;
    text-align: left;
    font-weight: 700;
    color: #2F3A35;
}

/* 本文のセルのスタイル */
.prose .compare-table tbody td {
    border: 1px solid #E5E7E9;
    padding: 10px 8px;
    vertical-align: top;
    line-height: 1.6; /* テーブル内は行間を少し詰めて視認性向上 */
}

/* テーブル内の用語を強調 */
.prose .compare-table tbody td strong {
    color: #2F3A35; /* テーマカラーではなく標準の黒っぽい色で統一感を出す */
}



/* ===== ToC (目次) の装飾 ===== */
.prose .toc {
    border: 1px solid #E5E7E9; 
    background: #F9FAFB; /* 薄いグレーの背景 */
    border-radius: 12px; 
    padding: 16px 20px; 
    margin: 1.5em 0 2em; /* 上下の余白を広げて本文と明確に分離 */
}
.prose .toc h2 {
    font-size: 1.15rem; 
    margin-top: 0;
    margin-bottom: 12px;
    color: #4F6F62; /* テーマカラーで目立たせる */
    border-bottom: 2px solid #EDF2EF;
    padding-bottom: 6px;
}
.prose .toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.prose .toc li {
    line-height: 1.6;
    margin: 0.2em 0;
}

/* 目次内の「注意書き」のスタイルを微調整 */
.prose .toc .note {
    padding: 8px 10px;
    border-left: 4px solid #C7E6D6; 
    background: #FFFFFF; /* 目次の背景と区別 */
    border-radius: 8px;
    margin: 0 0 12px;
    font-size: 0.9rem;
}
.prose .toc a {
    text-decoration: none;
    color: #2F3A35;
}
.prose .toc a:hover {
    text-decoration: underline;
    color: #4F6F62;
}