@charset "utf-8";
/* MIROCANA ECノート — ブログ固有のスタイル。
   色・字・余白は site.css の :root トークンをそのまま使う（独自の色を足さない）。
   守ること: 本文・補助文とも16px(1rem)未満を作らない／動きを足さない／横スクロールを出さない。 */

.blog-main{ padding-block:24px 96px; background:var(--color-bg); }
.blog .container{ max-width:1200px; margin-inline:auto; padding-inline:var(--gutter); }

/* ---- パンくず ---- */
.crumbs{ margin-bottom:20px; }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:4px 0; margin:0; padding:0; list-style:none; font-size:1rem; color:var(--color-ink-muted); }
.crumbs li + li::before{ content:"›"; margin-inline:10px; color:var(--color-ink-muted); }
.crumbs a{ color:var(--color-ink-muted); }
.crumbs li[aria-current]{ overflow-wrap:anywhere; }
/* スマホ幅だけ：現在のページ（記事タイトル）は1行に収めて、あふれた分は「…」にする（全文は直下の見出し h1 に出る）。
   基準幅 8em を割る狭さのときだけ次の行へ回る＝375px幅のパンくずは2行・63px（旧：長いタイトルは3行・126px）。
   結論をスマホの1画面目に入れる基準（blog-article-standard §3）のための変更。PC・タブレット幅は従来どおり折り返す。 */
@media (max-width:719.98px){
  .crumbs li[aria-current]{ flex:1 1 8em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---- 記事レイアウト（PC：本文＋右に目次） ---- */
.post-layout{ display:block; }
.post{ max-width:720px; margin-inline:auto; min-width:0; }
.toc-aside, .toc-col{ display:none; }
@media (min-width:1080px){
  .post-layout{ display:grid; grid-template-columns:minmax(0,720px) 280px; gap:56px; justify-content:center; align-items:start; }
  .post{ margin-inline:0; }
  .toc-col{ display:block; position:sticky; top:calc(var(--header-h) + 24px); }
  .toc-aside{ display:block; }
  .toc-inline{ display:none; }
}

/* ---- 記事の頭 ---- */
.post-head{ margin-bottom:28px; }
.post-cat{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px; font-size:1rem; }
.post-cat a{ color:var(--color-brand); font-weight:700; text-decoration:none; }
.post-head h1{ font-size:var(--fs-h1-sub); line-height:1.5; }
.post-meta{ display:flex; flex-wrap:wrap; gap:4px 20px; margin:16px 0 0; font-size:1rem; color:var(--color-ink-muted); }
.badge{ display:inline-block; padding:0 10px; border-radius:999px; font-size:1rem; line-height:1.7; font-weight:700; background:var(--color-tint); color:var(--color-brand-hover); }
.badge-intermediate{ background:#EFEAC4; color:#4D4A12; }
.badge-advanced{ background:#E6E2DA; color:var(--color-ink); }

/* ---- 冒頭の結論・確認方法 ---- */
.answer{ margin:0 0 24px; padding:20px 22px; background:var(--color-tint); border-left:6px solid var(--color-brand); border-radius:0 var(--radius-s) var(--radius-s) 0; }
.answer h2{ font-size:1.125rem; margin:0 0 8px; color:var(--color-brand-hover); }
.answer p{ margin:0; font-weight:500; }
.verify{ margin:0 0 24px; padding:16px 20px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-s); }
.verify h2{ font-size:1rem; margin:0 0 6px; }
.verify ul{ margin:0 0 6px; padding-left:1.2em; list-style:disc; }
.verify p{ margin:0; color:var(--color-ink-muted); }
.verify-stale{ margin-top:10px !important; color:var(--color-error) !important; font-weight:700; }

/* ---- 目次 ---- */
.toc{ margin:0 0 32px; padding:16px 20px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-s); }
.toc-aside{ margin:0; max-height:calc(100vh - var(--header-h) - 64px); overflow:auto; }
.toc-title{ margin:0 0 8px; font-weight:700; }
.toc ol{ margin:0; padding:0; list-style:none; }
.toc li{ margin:0; }
.toc a{ display:block; padding:6px 0; color:var(--color-ink); text-decoration:none; }
.toc a:hover{ color:var(--color-brand); text-decoration:underline; }
.toc-l3 a{ padding-left:1.2em; color:var(--color-ink-muted); }

/* ---- 本文 ---- */
.post-body > * + *{ margin-top:1.2em; }
.post-body h2{ margin-top:2.4em; padding-top:.9em; border-top:3px solid var(--color-brand); font-size:var(--fs-h2); }
.post-body h3{ margin-top:2em; font-size:var(--fs-h3); padding-left:.7em; border-left:5px solid var(--color-mark); }
.post-body h4{ margin-top:1.6em; font-size:1.125rem; }
.post-body ul, .post-body ol{ padding-left:1.5em; }
.post-body ul{ list-style:disc; }
.post-body ol{ list-style:decimal; }
.post-body li + li{ margin-top:.5em; }
.post-body li > ul, .post-body li > ol{ margin-top:.5em; }
.post-body a{ overflow-wrap:anywhere; }
.post-body code{ padding:.1em .4em; border-radius:4px; background:#E9E6DC; font-size:1rem; overflow-wrap:anywhere; }
.post-body pre{ margin:0; padding:16px; overflow-x:auto; background:#232A27; color:#F3F1EA; border-radius:var(--radius-s); line-height:1.7; }
.post-body pre code{ padding:0; background:none; color:inherit; overflow-wrap:normal; }
.post-body blockquote{ margin-inline:0; padding:.2em 1.2em; border-left:4px solid var(--color-line); color:var(--color-ink-muted); }
.post-body hr{ border:0; border-top:1px solid var(--color-line); }
.cite a{ text-decoration:none; padding:0 .15em; font-weight:700; }

.table-wrap{ overflow-x:auto; border:1px solid var(--color-line); border-radius:var(--radius-s); background:var(--color-surface); }
.table-wrap:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; }
.table-wrap table{ border-collapse:collapse; min-width:520px; width:100%; }
.table-wrap th, .table-wrap td{ padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--color-line); }
.table-wrap thead th{ background:var(--color-tint); font-weight:700; white-space:nowrap; }
.table-wrap tbody th{ font-weight:700; white-space:nowrap; }
.table-wrap tr:last-child th, .table-wrap tr:last-child td{ border-bottom:0; }

/* ---- 囲み ---- */
.callout{ padding:16px 20px; border-radius:var(--radius-s); border-left:6px solid var(--color-brand); background:var(--color-tint); }
.callout > * + *{ margin-top:.7em; }
.callout-title{ margin:0; font-weight:700; }
.callout-tip{ background:#F5F3D2; border-left-color:#8A8412; }
.callout-warn{ background:#FBEEE2; border-left-color:#B5541C; }
.callout-stop{ background:#FBE9E7; border-left-color:var(--color-error); }

/* ---- 画面写真 ---- */
.shot{ margin:1.6em 0; }
.shot img{ width:100%; height:auto; border:1px solid var(--color-line); border-radius:var(--radius-s); background:#fff; }
.shot figcaption{ margin-top:8px; font-size:1rem; color:var(--color-ink-muted); }
.shot-box{ padding:28px 20px; border:2px dashed var(--color-field-line); border-radius:var(--radius-s); background:var(--color-surface); color:var(--color-ink-muted); text-align:center; }

/* ---- FAQ・出典・免責・関連・相談 ---- */
.faq dl{ margin:0; }
.faq dt{ margin-top:1.2em; font-weight:700; }
.faq dd{ margin:.4em 0 0; }
.sources ol{ padding-left:1.5em; list-style:decimal; }
.sources li{ margin-top:.5em; overflow-wrap:anywhere; }
.src-meta{ color:var(--color-ink-muted); }
.post > section, .post > aside{ margin-top:48px; }
.post > section > h2, .blog-cta h2{ font-size:var(--fs-h3); margin:0 0 .6em; }
.disclaimer{ padding:16px 20px; border:1px solid var(--color-line); border-radius:var(--radius-s); color:var(--color-ink-muted); }
.disclaimer p + p{ margin-top:.6em; }
.blog-cta{ padding:28px 24px; background:var(--color-brand); color:var(--color-on-brand); border-radius:var(--radius-m); }
.blog-cta h2{ color:var(--color-on-brand); }
.blog-cta p{ margin:0 0 20px; }
.blog-cta-btn{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:12px 28px; border-radius:999px; background:var(--color-surface); color:var(--color-brand-hover); font-weight:700; text-decoration:none; }
.blog-cta-btn:hover{ color:var(--color-brand-hover); background:#fff; }
.blog-cta-btn:focus-visible{ outline-color:var(--color-on-brand); }

/* ---- 一覧 ---- */
.list-head{ margin:8px 0 32px; }
.list-head h1{ font-size:var(--fs-h1-sub); }
.list-head .lead{ margin:12px 0 0; font-size:var(--fs-lead); color:var(--color-ink-muted); max-width:44em; }
.list-links{ display:flex; flex-wrap:wrap; gap:8px 24px; margin:20px 0 0; }
.list-links a{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.blog-main section + section{ margin-top:56px; }
.blog-main section > h2{ font-size:var(--fs-h2); margin:0 0 20px; }
.cards{ display:grid; gap:var(--grid-gap); grid-template-columns:1fr; margin:0; padding:0; list-style:none; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card a, .cards-cat a{ display:flex; flex-direction:column; gap:8px; height:100%; padding:20px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-m); color:var(--color-ink); text-decoration:none; }
.card a:hover, .cards-cat a:hover{ border-color:var(--color-brand); }
.card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:1rem; color:var(--color-ink-muted); }
.card-title{ font-family:var(--font-head); font-weight:700; font-size:1.1875rem; line-height:1.5; }
.card-desc{ color:var(--color-ink-muted); }
.card-count{ margin-top:auto; font-weight:700; color:var(--color-brand); }
.col-read-wrap{ max-width:880px; }
.map-list{ margin:0; padding:0; list-style:none; }
.map-list li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 0; border-bottom:1px solid var(--color-line); }

/* ---- プレビュー専用（公開ページには出ない） ---- */
.preview-banner{ margin:0 0 16px; padding:12px 16px; background:#FBEEE2; border:2px solid #B5541C; border-radius:var(--radius-s); font-weight:700; }
.preview-issues{ margin:0 0 20px; padding:12px 16px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-s); }
.preview-issues ul{ margin:10px 0 0; padding-left:1.2em; list-style:disc; }
.preview-issues .lv-error b{ color:var(--color-error); }