/* 比較表のCSS。
   ★このファイルは scripts/publish_wp.py --write-css が生成する。
      手で書き換えない。元は scripts/build_comparison.py の CSS。
      記事ごとに <style> を出さず、サイト全体で1回読むため
      （docs/wordpress-integration.md §1）。 */
/* 色は公式サイトの定義（--c-*）を使う。
   比較表は記事ページの外（単体のHTML）でも使うので、
   変数が無いときのために値を第2引数に置く。
   自社行の色を黄色から緑（--c-accent-light）へ変えた（2026-09-22）。
     注意ボックスの背景 #fff7e6 と、旧・自社行 #fff8e6 の差はRGBで合計1。
     実質的に同じ色で、「注意」と「自社」が見分けられなかった。 */
.mend-compare{--line:var(--c-line,#d9dfe6);--head:var(--c-bg-alt,#f5f7fa);
 --self:var(--c-accent-light,#e3f4f1);--selfline:var(--c-accent,#1a9c8c);
 font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
 margin:1.5em 0;color:var(--c-text,#1f2933)}
.mend-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mend-compare table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.mend-compare caption{text-align:left;font-size:15px;font-weight:700;padding:0 0 .6em}
.mend-compare th,.mend-compare td{border:1px solid var(--line);padding:.6em .7em;
 text-align:left;vertical-align:middle}
.mend-compare thead th{background:var(--head);font-weight:700;white-space:nowrap}
.mend-compare td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mend-compare .clinic{font-weight:700}
.mend-compare .dose{display:block;font-weight:400;font-size:12px;color:var(--c-text-muted,#5b6672);margin-top:.2em}
.mend-compare .channel{display:block;font-weight:400;font-size:12px;color:var(--c-text-muted,#5b6672);margin-top:.2em}
.mend-compare tbody.band+tbody.band tr.band-head th{border-top:2px solid #c9ced4}
.mend-compare tr.band-head th{background:#eef1f4;font-weight:700;font-size:13px;
 padding:.55em .7em;border-top:2px solid #c9ced4}
.mend-compare .band-note{display:block;font-weight:400;font-size:12px;
 color:#5b6570;margin-top:.25em}
.mend-compare tr.is-self td{background:var(--self)}
.mend-compare tr.is-self td:first-child{box-shadow:inset 3px 0 0 var(--selfline)}
.mend-compare .badge{display:inline-block;font-size:11px;font-weight:700;
 background:var(--c-primary,#0d3b66);color:#fff;border-radius:3px;padding:.1em .45em;margin-left:.4em;
 vertical-align:middle}
.mend-compare__notes{margin:.8em 0 0;padding:0;list-style:none;font-size:12px;
 line-height:1.7;color:var(--c-text-muted,#5b6672)}
.mend-compare__notes li{margin:.15em 0}
.mend-compare__asof{font-weight:700;color:var(--c-text,#1f2933)}
@media (max-width:600px){.mend-compare table{font-size:13px}}

/* --- ブロックテーマ（Twenty Twenty-Five 等）向け。2026-09-22 追加 ---
   ブロックテーマは本文の幅を theme.json の contentSize で絞る（TT5 はおよそ620px）。
     表は min-width:760px なので、そのままだとPCでも横スクロールになる。
     本文の流れから外に出して、読める幅を確保する。
     .entry-content / .wp-block-post-content のどちらにも当てる
     （クラシックテーマとブロックテーマで包む要素が違う）。 */
/* 記事ページでは本文全体が .mend-article に包まれる。
   包む前は .wp-block-post-content の直下だったが、いまは違う。
   セレクタを直さないと、この幅出しが1件も当たらない
   （プレビューで表が本文の幅に潰れているのを見て気づいた）。 */
.mend-article>.mend-compare,
.entry-content>.mend-compare,
.wp-block-post-content>.mend-compare{
 width:min(1100px,100vw - 2rem);
 margin-inline:calc(50% - min(550px,50vw - 1rem))}
@media (max-width:820px){
 .mend-article>.mend-compare,
 .entry-content>.mend-compare,
 .wp-block-post-content>.mend-compare{width:auto;margin-inline:0}}

/* テーマ側の table 要素スタイルに負けないようにする。
     theme.json が出すのは :root :where(table) 等（詳細度0）なので
     クラス1つで足りるが、テーマが後から直接 table{} を書く場合に備えて
     表の中だけ明示的に上書きしておく。 */
.mend-compare table,.mend-compare thead,.mend-compare tbody,
.mend-compare tr,.mend-compare th,.mend-compare td{
 background-image:none;box-sizing:border-box}
.mend-compare__scroll{max-width:100%}

.mend-local .handling{color:#1c1f23}
.mend-local .ref{font-size:12px}