/* 豆と湯 — 図解・カード・アイキャッチの部品
   使い分けの正本: images/IMAGE_POLICY.md。色と文字の値の正本: site/swell_child_mametoyu/style.css §1（--mt-*）
   この CSS は値を持たない（style.css の変数を名前だけ借りる）。読み込みは必ず style.css の後。
   WordPress では子テーマの style.css の末尾に、この中身を続けて貼る。クラス名は mty- で始める。 */

:root {
  --mty-base: var(--mt-bg);
  --mty-surface: var(--mt-surface);
  --mty-ink: var(--mt-ink);
  --mty-sub: var(--mt-ink-sub);
  --mty-line: var(--mt-line);
  --mty-brown: var(--mt-brown);
  --mty-green: var(--mt-green);
  --mty-wood: var(--mt-wood);
  --mty-radius: var(--mt-radius);
  --mty-font: var(--mt-font);
  /* 焙煎度の色見本（図の中だけで使う。サイトの差し色にはしない。style.css に無い値はここだけ） */
  --mty-roast-light: #B98A5E;
  --mty-roast-medium: #7A4E2E;
  --mty-roast-dark: #3B2418;
}

/* カテゴリの帯の色は style.css の .mt-cat--* と同じ割り当て */
.mty-cat--start { --mty-cat: var(--mt-green); }
.mty-cat--beans { --mty-cat: var(--mt-brown); }
.mty-cat--brew  { --mty-cat: var(--mt-ink); }
.mty-cat--gear  { --mty-cat: var(--mt-wood); }
.mty-cat--site  { --mty-cat: var(--mt-green); }  /* サイト全体の OGP */

/* ---------- 図の枠（記事の中） ---------- */
.mty-figure {
  margin: 24px 0;
  padding: 16px;
  background: var(--mty-surface);
  border: 1px solid var(--mty-line);
  border-radius: var(--mty-radius);
  color: var(--mty-ink);
  font-family: var(--mty-font);
}
@media (max-width: 480px) { .mty-figure { padding: 12px; } }
.mty-figure__title { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.5; }
.mty-figure__note { margin: 12px 0 0; font-size: 13px; color: var(--mty-sub); line-height: 1.6; }
.mty-figure svg { display: block; width: 100%; height: auto; }
.mty-figure img { display: block; width: 100%; height: auto; border-radius: 4px; } /* 2026-11-04 図の枠の中の画像（写真の部品 .mt-photo の 4:3 に縛られず、横長のイラストも崩れない） */

/* 見本の値（本人の記録で差し替える前）。公開前検査でこのクラスが残っていたら止める */
.mty-sample {
  margin: 0 0 12px; padding: 6px 10px; border-radius: 6px;
  background: #FFF4E5; border: 1px dashed #C9772B; color: #8A4B12;
  font-size: 13px; font-weight: 700;
}

/* ---------- 焙煎度の比較（浅・中・深） ---------- */
.mty-roast { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .mty-roast { grid-template-columns: repeat(3, 1fr); } }
.mty-roast__item { border: 1px solid var(--mty-line); border-radius: var(--mty-radius); padding: 14px; background: var(--mty-base); }
.mty-roast__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.mty-roast__swatch { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.mty-roast__item--light .mty-roast__swatch { background: var(--mty-roast-light); }
.mty-roast__item--medium .mty-roast__swatch { background: var(--mty-roast-medium); }
.mty-roast__item--dark .mty-roast__swatch { background: var(--mty-roast-dark); }
.mty-roast__desc { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.mty-roast__scale { display: grid; grid-template-columns: 3.5em 1fr; gap: 6px 8px; align-items: center; margin: 0; font-size: 14px; }
.mty-roast__scale dt { color: var(--mty-sub); }
.mty-roast__scale dd { margin: 0; }
/* 量の多い・少ないは 5 段の目盛り（数値ではなく傾向）。data-level="1..5" */
.mty-meter { display: flex; gap: 3px; }
.mty-meter i { display: block; flex: 1; height: 8px; border-radius: 2px; background: var(--mty-line); }
.mty-meter[data-level="1"] i:nth-child(-n+1),
.mty-meter[data-level="2"] i:nth-child(-n+2),
.mty-meter[data-level="3"] i:nth-child(-n+3),
.mty-meter[data-level="4"] i:nth-child(-n+4),
.mty-meter[data-level="5"] i:nth-child(-n+5) { background: var(--mty-brown); }
.mty-roast__fit { margin: 10px 0 0; font-size: 14px; color: var(--mty-green); font-weight: 700; }

/* ---------- 淹れる手順のタイムライン ---------- */
.mty-recipe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.mty-recipe li { padding: 6px 10px; border: 1px solid var(--mty-line); border-radius: 6px; background: var(--mty-base); font-size: 14px; }
.mty-recipe b { font-weight: 700; margin-left: 4px; }
.mty-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.mty-steps li {
  position: relative; display: grid; grid-template-columns: 4.6em 1fr; gap: 0 12px;
  padding: 0 0 14px; counter-increment: step;
}
.mty-steps li::before { /* 縦の線 */
  content: ""; position: absolute; left: calc(4.6em + 5px); top: 22px; bottom: 0; width: 2px; background: var(--mty-line);
}
.mty-steps li:last-child::before { display: none; }
.mty-steps__time { font-size: 14px; color: var(--mty-sub); text-align: right; padding-top: 1px; font-variant-numeric: tabular-nums; }
.mty-steps__body { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.mty-steps__body::before { /* 点 */
  content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--mty-surface); border: 2px solid var(--mty-brown); box-sizing: border-box;
}
.mty-steps__body strong { display: block; font-size: 16px; }
.mty-steps__amount { display: block; color: var(--mty-brown); font-size: 14px; }

/* ---------- 記事カード（一覧の試作。SWELL のカードに近い形） ---------- */
.mty-card { display: block; color: var(--mty-ink); text-decoration: none; font-family: var(--mty-font); }
.mty-card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--mty-radius); background: var(--mty-line); }
.mty-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mty-card__cat {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 6px; border-radius: 4px; background: var(--mty-cat); color: #fff; font-size: 12px; line-height: 1.4;
}
.mty-card__cat svg { width: 14px; height: 14px; }
@media (max-width: 600px) { /* 2 列のカードでは画像を覆いすぎないよう小さくする */
  .mty-card__cat { left: 6px; top: 6px; padding: 2px 6px 2px 4px; font-size: 10px; }
  .mty-card__cat svg { width: 11px; height: 11px; }
}
.mty-card__label { /* 「実物の写真」「イメージ（AI 生成）」など。画像に焼き込まず CSS で載せる */
  position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.88); color: var(--mty-ink); font-size: 11px; line-height: 1.4;
}
.mty-card__title { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.6; }

/* コードで描くアイキャッチ（C 案）: 帯の色の薄い面 + 大きな線のアイコンや色見本 */
.mty-graphic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--mty-base); }
.mty-graphic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--mty-cat); }
.mty-graphic svg.mty-graphic__icon { width: 34%; height: auto; color: var(--mty-cat); }
.mty-graphic__swatches { display: flex; gap: 6%; width: 64%; justify-content: center; }
.mty-graphic__swatches span { flex: 1; aspect-ratio: 1; border-radius: 50%; }

/* ---------- 比較（compare）: 3 列まで。スマホでは行ごとのカードに組み替える ----------
   使い方: <table class="mty-compare"> の各 <td> に data-label="列の名前" を付ける。4 列以上にしない。
   ◎○△ の記号は <td> ではなく中の <span class="mty-good|mty-ok|mty-later"> に付ける（td::before は列の名前に使う） */
.mty-compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.mty-compare caption { text-align: left; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.mty-compare th, .mty-compare td { padding: 10px 12px; border-bottom: 1px solid var(--mty-line); text-align: left; vertical-align: top; }
.mty-compare thead th { background: var(--mty-base); font-size: 14px; color: var(--mty-sub); font-weight: 700; }
.mty-compare tbody th { font-weight: 700; white-space: nowrap; }
.mty-compare .mty-good::before { content: "◎ "; color: var(--mty-green); font-weight: 700; }
.mty-compare .mty-ok::before { content: "○ "; color: var(--mty-brown); font-weight: 700; }
.mty-compare .mty-later::before { content: "△ "; color: var(--mty-sub); font-weight: 700; }
@media (max-width: 600px) {
  .mty-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mty-compare tr { display: block; border: 1px solid var(--mty-line); border-radius: var(--mty-radius); margin: 0 0 10px; background: var(--mty-surface); }
  .mty-compare tbody th { display: block; padding: 10px 12px 4px; border: 0; white-space: normal; font-size: 16px; }
  /* 2026-11-03 モバイルファースト: 列の名前（「気をつけること」7 字）が 1 字だけ折れていたので幅を 7.5em に。320〜359px は名前を上に積む */
  .mty-compare td { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; border: 0; padding: 4px 12px 8px; }
  .mty-compare td::before { content: attr(data-label); color: var(--mty-sub); font-size: 13px; }
}
@media (max-width: 479px) { .mty-compare td { grid-template-columns: 1fr; gap: 0; } } /* 2026-11-03 375px で値の列が 190px になり折返しが増えたので、480px 未満は列の名前を上・値を全幅に積む */
/* 表のカードの中のリンクは、見た目を変えずに押せる高さ（約 44px）にする */
@media (max-width: 600px) { .mty-compare td > a { display: block; padding: 11px 0; margin: -7px 0; } .mty-yesno a { padding: 10px 0; margin: -10px 0; } }

/* ---------- YES/NO（yesno）: 問いを順に並べ、「はい」なら答え、「いいえ」なら次の問いへ ----------
   SVG を記事ごとに描かずに済むよう HTML で組む。矢印の代わりに「いいえ → 次へ」を言葉で書く（色だけに頼らない） */
.mty-yesno { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.mty-yesno > li { position: relative; margin: 0 0 12px; padding: 12px 14px 12px 44px; border: 1.5px solid var(--mty-ink); border-radius: var(--mty-radius); background: var(--mty-surface); counter-increment: q; }
.mty-yesno > li::before { content: "Q" counter(q); position: absolute; left: 12px; top: 12px; font-weight: 700; color: var(--mty-sub); font-size: 14px; }
.mty-yesno__q { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.mty-yesno__a { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 15px; line-height: 1.6; }
.mty-yesno__yes, .mty-yesno__no { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; max-width: 100%; }
/* 2026-11-03: 答えが長いとスマホで「はい」が 2 行に割れたので、ラベルは縮めない */
.mty-yesno__yes b, .mty-yesno__no b { flex-shrink: 0; white-space: nowrap; }
.mty-yesno__yes b { color: var(--mty-green); }
.mty-yesno__no b { color: var(--mty-sub); }
.mty-yesno__end { padding: 2px 8px; border-radius: 4px; background: var(--mty-base); border: 1px solid var(--mty-line); font-weight: 700; }
.mty-yesno > li.mty-yesno__last { border-style: dashed; padding-left: 14px; }
.mty-yesno > li.mty-yesno__last::before { content: none; }

/* ---------- 失敗原因（trouble）: 症状 → よくある原因 → 1 つだけ変える直し方 ---------- */
.mty-trouble { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .mty-trouble { grid-template-columns: 1fr 1fr; } }
.mty-trouble > li { border: 1px solid var(--mty-line); border-left: 4px solid var(--mty-brown); border-radius: var(--mty-radius); padding: 12px 14px; background: var(--mty-surface); }
.mty-trouble__symptom { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.mty-trouble dl { display: grid; grid-template-columns: 4.5em 1fr; gap: 4px 8px; margin: 0; font-size: 15px; line-height: 1.6; }
.mty-trouble dt { color: var(--mty-sub); font-size: 14px; }
.mty-trouble dd { margin: 0; }
.mty-trouble__fix { color: var(--mty-green); font-weight: 700; }

/* ---------- 書き手の一行（記事の上・トップ）と、画像の出どころの表示 ---------- */
.mty-byline { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; color: var(--mty-sub); line-height: 1.6; }
.mty-byline__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--mty-base); border: 1px solid var(--mty-line); flex: none; display: flex; align-items: center; justify-content: center; color: var(--mty-brown); }
.mty-byline__icon svg { width: 20px; height: 20px; }
.mty-source { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; font-size: 12px; background: var(--mty-base); border: 1px solid var(--mty-line); color: var(--mty-sub); }

/* ---------- 記事の型の小さな部品（site/make_patterns.py のパターンで使う） ---------- */
/* 合う人・合わない人 */
.mty-fit { margin: 0 0 1.6em; padding: 12px 16px; border: 1px solid var(--mty-line); border-radius: var(--mty-radius); background: var(--mty-surface); }
.mty-fit p { margin: 0.3em 0; font-size: 15px; line-height: 1.7; }
.mty-fit__yes strong { color: var(--mty-green); }
.mty-fit__no strong { color: var(--mty-sub); }
/* 試した条件（2 列の表なのでスマホでも横にはみ出さない） */
.mty-conditions table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mty-conditions th, .mty-conditions td { padding: 8px 12px; border-bottom: 1px solid var(--mty-line); text-align: left; }
.mty-conditions thead th { background: var(--mty-base); color: var(--mty-sub); font-size: 14px; }
.mty-conditions tbody td:first-child { width: 8em; color: var(--mty-sub); }
/* 次にやること・出典 */
.mty-nextaction { padding: 12px 16px; border-left: 4px solid var(--mty-green); background: var(--mty-surface); border-radius: 0 var(--mty-radius) var(--mty-radius) 0; }
.mty-sources { font-size: 13px; color: var(--mty-sub); line-height: 1.7; }