/* === master additions === （マスター版で足した部品。この節より上の (A) の規則は触っていない）
   色は var(--brand-*, (A) の変数) の形。config.BRAND が空なら (A) と同じ色になる */
.site-header{ background:var(--brand-hd-bg, var(--hd-bg)) }
/* PR 表記（ヘッダー直下に固定で出す） */
.pr-bar{ background:var(--hover); border-bottom:1px solid var(--border) }
.pr-bar p{ max-width:860px; margin:0 auto; padding:6px 20px; font-size:.7rem; line-height:1.6; color:var(--fg) }
/* 見本データの注意書き */
.mr-sample{ border:1px dashed var(--border); padding:10px 14px; margin:0 0 20px; font-size:.78rem; line-height:1.7 }
/* ランキング・商品カード */
.mr-rank{ list-style:none; margin:20px 0 28px; padding:0 }
.art-body .mr-rank,.art-body .mr-pc ul{ padding-left:0 }
.mr-card{ border:1px solid var(--border); border-top:3px solid var(--brand-accent, var(--accent)); background:var(--surface); border-radius:4px; padding:18px 16px; margin:0 0 16px }
.art-body .mr-card li,.mr-card li{ margin-bottom:.3em }
.mr-head{ display:flex; gap:14px; align-items:flex-start }
.mr-no{ display:inline-block; flex-shrink:0; min-width:2.2em; padding:2px 8px; border-radius:2px; text-align:center; font-size:.75rem; font-weight:800; background:var(--brand-accent, var(--accent)); color:var(--brand-accent-fg, var(--bg)) }
.mr-img,.art-body .mr-img{ width:96px; height:96px; max-width:none; object-fit:cover; flex-shrink:0; margin:0; border-radius:4px; display:block }
.mr-body{ flex:1; min-width:0 }
.mr-name{ font-size:1rem; font-weight:800; line-height:1.5; margin:0 0 2px }
.art-body .mr-name a,.mr-name a{ color:var(--fg); text-decoration:none }
.mr-name a:hover{ text-decoration:underline }
.mr-maker{ font-size:.72rem; margin:0 0 4px }
.mr-price{ font-size:.85rem; font-weight:700; margin:0 0 6px }
.mr-summary{ font-size:.84rem; line-height:1.8; margin:10px 0 }
.mr-pc{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 }
@media(max-width:600px){ .mr-pc{ grid-template-columns:1fr } .mr-head{ flex-direction:column } }
.mr-pros,.mr-cons{ border:1px solid var(--border); border-radius:4px; padding:10px 12px; font-size:.8rem; line-height:1.7 }
.mr-pc-h{ font-weight:800; font-size:.78rem; margin:0 0 6px }
.mr-pros ul,.mr-cons ul{ list-style:none; margin:0; padding:0 }
.mr-pros li::before{ content:"○ " }
.mr-cons li::before{ content:"△ " }
.mr-btns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:12px }
.art-body .mr-btns a.cta-btn-sub{ color:#111; text-decoration:none }
.mr-detail{ font-size:.78rem }
/* 比較表（table.js の絞り込み欄。compare.css の .ctrl と並べて使う） */
.mr-filters{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.75rem; margin:0 0 10px }
.mr-filters input{ width:6em; padding:2px 4px; font:inherit; border:1px solid var(--border); background:var(--bg); color:var(--fg) }
.mr-filters select{ padding:2px 4px; font:inherit; border:1px solid var(--border); background:var(--bg); color:var(--fg) }
.tbl-outer th[data-kind]{ cursor:pointer }
.tbl-outer th[aria-sort="ascending"]::after{ content:" ▲" }
.tbl-outer th[aria-sort="descending"]::after{ content:" ▼" }
.tbl-outer td.num{ text-align:right; white-space:nowrap }
.mr-unit{ font-weight:400 }
/* よくある質問（見出しと本文は FAQPage の JSON-LD と同じデータから出す） */
.mr-faq{ margin:2em 0 }
/* 静的ページの空欄（★） */
.mr-todo{ background:var(--hover); padding:0 4px }
/* 1件ページの先頭の商品画像（images.py の -640.webp）。元より大きく引き伸ばさない */
.art-body .mr-figure img{ width:auto; max-width:min(100%,640px) }
/* 比較表の名前の列を1文字ずつ折らない（広がる分は compare.css の .tbl-outer{overflow-x:auto} の横スクロール） */
.tbl-outer td:first-child,.tbl-outer th:first-child{ white-space:nowrap }
/* === /master additions === */