/* member_log.css — 会員ログの活用法（/member-log/）
   2026.10.28 new
   ・記事は1カラム（containerの幅いっぱい。2026.10.28 mod: 860px固定は狭かったため外した）。本文の基準サイズ・見出しは problems.css（＝knowledges と同じ）に合わせた
   ・html の font-size が 10px（Bootstrap 3）なので rem は使わず px で書く
   ・グラフの大きさ・配色はここと member_log_block.jsp のJSで固定。記事ごとに変えない */

.ml-page { margin: 16px 0 60px; font-size: 14px; line-height: 1.5; color: #222; }
.ml-page p { margin-top: 0.5em; margin-bottom: 1em; line-height: 1.8em; }
.ml-page ul, .ml-page ol { padding-left: 2em; margin-bottom: 1.2em; }
.ml-page li { line-height: 1.8; }
.ml-page a { color: #005BBB; font-weight: 600; text-decoration: none; }
.ml-page a:hover { text-decoration: underline; }

/* 見出し */
.ml-hero { margin-bottom: 24px; }
.ml-hero-sub { font-size: 14px; margin: 0 0 8px !important; }
.ml-hero-sub a { color: inherit; font-weight: normal; }
.ml-hero-no { display: inline-block; margin-left: 10px; padding: 1px 8px; border: 1px solid #e67e22; border-radius: 999px; color: #e67e22; font-size: 12px; }
.ml-hero h1 { font-size: 30px; line-height: 1.4em; margin: 0 0 12px; }
.ml-viewpoint { font-size: 18px; line-height: 1.7em !important; padding-left: 14px; border-left: 4px solid #e67e22; margin: 0 !important; }
@media (max-width: 979.98px) { .ml-hero h1 { font-size: clamp(22px, 4.2vw, 28px); } .ml-viewpoint { font-size: 16px; } }

/* グラフ（全記事で同じ大きさ） */
.ml-chart { margin: 0 0 32px; padding: 16px 16px 12px; border: 1px solid #e5e5e5; background: #fff; }
.ml-chart-body { max-width: 860px; margin: 0 auto; }
.ml-svg { width: 100%; height: auto; display: block; }
.ml-svg .ml-grid { stroke: #eee; }
.ml-svg .ml-base { stroke: #999; }
.ml-svg .ml-tick { font-size: 12px; fill: #666; }
.ml-svg .ml-val { font-size: 12px; fill: #333; }
.ml-svg .ml-legend { font-size: 13px; fill: #333; }
.ml-chart figcaption { font-size: 14px; line-height: 1.7; margin-top: 10px; font-weight: 600; }
.ml-chart-src-note { font-size: 12px; color: #888; margin: 4px 0 0 !important; }
.ml-heat { width: 100%; border-collapse: collapse; font-size: 13px; }
.ml-heat th, .ml-heat td { border: 1px solid #fff; padding: 6px 8px; text-align: center; }
.ml-heat th { background: #f5f5f5; font-weight: 600; }

/* 節 */
.ml-sec h2 { font-size: 22px; font-weight: 500; margin: 32px 0 12px; border-bottom: 1px solid #ccc; padding: 10px 10px 10px 0; }

/* 試してみる */
.ml-try-lead { color: #444; }
.ml-code { border: 1px solid #ddd; margin: 0 0 12px; background: #fafafa; }
.ml-code summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style-position: inside; }
.ml-code summary span { font-weight: normal; color: #777; font-size: 13px; margin-left: 12px; }
.ml-code-body { position: relative; border-top: 1px solid #ddd; }
.ml-code pre { margin: 0; padding: 14px; background: #fff; border: 0; border-radius: 0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.ml-copy { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 2px 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.ml-code-internal { border-color: #e6b0a0; background: #fff6f3; }
.ml-code-internal summary span { color: #b0412e; }
.ml-tables { font-size: 13px; color: #555; }

/* 固定の一行・関連・戻る */
.ml-ww { margin-top: 40px !important; padding: 14px 16px; background: #fffaf2; border: 1px solid #f0d2b0; font-size: 14px; }
.ml-rel ul { padding-left: 1.2em; }
.ml-back { margin-top: 2em; }

/* よくある状況（2026.10.28 add）：グラフとの間を少し空ける */
.ml-situation { margin-bottom: 28px; }
.ml-situation h2 { margin-top: 8px; }

/* グラフの見出し（2026.10.28 add）：節見出しと同じ大きさ・線 */
.ml-page .ml-chart-title { font-size: 22px; font-weight: 500; margin: 8px 0 12px; border-bottom: 1px solid #ccc; padding: 10px 10px 10px 0; }

/* 定型のディスクレーマー（2026.10.28 add） */
.ml-page .ml-disclaimer { font-size: 12px; color: #888; line-height: 1.7em; margin: 4px 0 12px; }

/* ===== トップ（2026.10.28 add）：problems.css のトップと同じ組み ===== */
.ml-top { margin-bottom: 60px; }
.ml-prep { display: block; margin: 8px 0 24px; padding: 16px 18px; border: 1px solid #f0d2b0; background: #fffaf2; color: #333; }
.ml-prep:hover { border-color: #e67e22; text-decoration: none; color: #333; }
.ml-prep-label { display: inline-block; margin-right: 10px; padding: 1px 8px; border: 1px solid #e67e22; border-radius: 999px; color: #e67e22; font-size: 12px; }
.ml-prep-title { font-size: 15px; font-weight: 700; }
.ml-prep-text { display: block; margin-top: 6px; font-size: 13px; line-height: 1.7; color: #666; }
.ml-toc ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ml-toc a { display: inline-block; border: 1px solid #ccc; padding: 4px 12px; font-size: 14px; color: #333; }
.ml-shelf h2 { font-size: 20px; font-weight: 700; margin: 40px 0 12px; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.ml-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ml-card a { display: block; border: 1px solid #e5e5e5; padding: 16px 18px; height: 100%; color: #333; }
.ml-card a:hover { border-color: #e67e22; text-decoration: none; }
.ml-card-no { display: block; font-size: 12px; color: #e67e22; margin-bottom: 4px; }
.ml-card h3 { font-size: 14px; font-weight: 700; line-height: 1.5; margin: 0 0 6px; color: #222; }
.ml-card p { font-size: 13px; line-height: 1.7; color: #666; margin: 0; }
.ml-exits { margin-top: 48px; font-size: 14px; }
.ml-exits ul { padding-left: 1.2em; }

/* ベン図（2026.10.28 add） */
.ml-svg .ml-venn-num { font-size: 22px; font-weight: 700; fill: #333; }
.ml-svg .ml-venn-both { fill: #fff; }
.ml-svg .ml-venn-sub { font-size: 12px; fill: #fff; }

/* グラフの数え方（2026.10.29 add）：対象・定義・分母・言えないこと */
.ml-chart-cond { margin-top: 12px; padding: 10px 14px; background: #f7f7f7; border-left: 3px solid #b8bec6; font-size: 13px; }
.ml-page .ml-chart-cond-label { font-weight: 700; margin: 0 0 4px !important; font-size: 13px; }
.ml-page .ml-chart-cond ul { margin: 0; padding-left: 1.4em; }
.ml-page .ml-chart-cond li { line-height: 1.7; margin-bottom: 0; }
.ml-page .ml-chart-cond li:last-child { margin-bottom: 0; }

/* 一覧カードの縮小グラフ（2026.10.29 add）：第N回＋グラフの種類 → タイトル → 縮小グラフ → できること */
.ml-card-type { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid #d9d9d9; border-radius: 3px; color: #888; font-size: 11px; line-height: 1.6; vertical-align: 1px; }
.ml-chart-mini { display: block; margin: 8px 0 10px; padding: 6px; background: #fafafa; border: 1px solid #f0f0f0; }
.ml-chart-mini .ml-chart-body { display: block; }
.ml-svg-mini { width: 100%; height: auto; display: block; }
.ml-svg-mini .ml-base { stroke: #ccc; }
.ml-card a, .ml-card a:hover { text-decoration: none; }

/* 準備編の本文（2026.10.29 add）：表・コード・表ごとの見出し */
.ml-prep-body h2 { font-size: 22px; font-weight: 500; margin: 32px 0 12px; border-bottom: 1px solid #ccc; padding: 10px 10px 10px 0; }
.ml-prep-body h2:first-child { margin-top: 8px; }
.ml-prep-body h2[id] { scroll-margin-top: 90px; }
.ml-prep-body h3 { font-size: 16px; font-weight: 700; margin: 24px 0 6px; color: #222; scroll-margin-top: 90px; }
.ml-prep-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 13px; }
.ml-prep-body th, .ml-prep-body td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; vertical-align: top; }
.ml-prep-body th { background: #f5f5f5; }
.ml-prep-body td:first-child { font-family: Menlo, Consolas, monospace; white-space: nowrap; width: 12em; }
.ml-prep-body pre { background: #fafafa; border: 1px solid #ddd; padding: 10px 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }