/*
 * dict.css — BT-Throb 食材ノート 共通スタイル（2026-08-12）
 * 基準＝ちゃっトク最終モック（docs/design/dict_ui_2026-08-12/ 17・18）＋アプリのパレット。
 * フラット：強い影・グラデ・3Dなし。区切りは1px実線か線なし。カード化しすぎない。
 */

:root {
  /* 地の色（BUBU 2026-08-26 に2段階で変更）。
     ①クリーム #faf6ec → BUBU「クリーム色ってださくていや」
     ②白 #ffffff → これも却下。BUBU「ページ全体の色とコンテンツの中の色がおんなじのが
       気にいらない」＝カードも白なので地と見分けがつかなくなった
     ⚠️ 地は**カードの白と必ず違う色**にする。白にもクリームにも戻さない。
     つくった理由ページ（public/why/）と同じ #eef0ea で揃えてある＝片方だけ変えない */
  --bg: #eef0ea; --card: #ffffff;
  /* 読みものへの箱の下地と枠。旧・地の色（#faf6ec）より薄いベージュのまま、
     枠線だけ暖色にして箱として立たせる（2026-08-26 BUBU 実機・アプリの中で
     「このクリーム色つけたのわかりにくい」＝すぐ下の白い枠の箱と見分けがつかなかった）。
     ⚠️ 塗りをこれ以上濃くしない＝BUBUの指定は「ページ全体のベージュよりもっと薄い色」。
     見分けは**枠線**で付ける */
  --beige-soft: #fcf8ea; --beige-line: #e7dcc2;
  --green: #75994c; --green-strong: #5d8038; --green-dark: #45602a; --green-bg: #eef3e0;
  --line: #dde3c8; --apricot: #e0913f; --apricot-bg: #faf0dc;
  /* 栄養成分のカードとタブだけ、枠線を1段濃くする（BUBU 2026-08-15
     「栄養成分の枠線の薄めの緑をもう少し濃くして」）。
     数字が並ぶ面は枠がはっきりしている方が読みやすい。他の枠は --line のまま */
  --line-strong: #c3d09f;
  --text: #3f4237; --text-sub: #61644f;
  --danger: #b0564c; --danger-bg: #f7ebe8;
}

* { box-sizing: border-box; }
/* ページの外側（下端オーバースクロール）は白＝地の緑を染み出させない（2026-09-05 BUBU・DONと同じ） */
html { -webkit-text-size-adjust: 100%; background: #fff; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  /* パンくずの白帯を画面幅いっぱい（100vw）にすると、縦スクロールバーの幅の分だけ
     横スクロールが出る。clip は hidden と違いスクロール枠を作らないので、
     戻るバーの position:sticky を壊さずにはみ出しだけ切れる（2026-08-15） */
  overflow-x: clip;
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  font-size: 16px; line-height: 1.75; font-weight: 500;
}
/* 本文は白い紙の上に置く（BUBU 2026-08-26「白い紙ひいてほしい」）。
   地（--bg）と紙（--card）を別の色にするのが決まり＝同じ色にしない */
.dict-page {
  /* 680px（BUBU 2026-08-26「ページ全体の幅を680とかに広げていいから、上下左右の余白をもっと」）。
     PCでは左右40pxの余白を取るので、文字が並ぶ幅は600px＝約37.5字で今までと同じ。
     幅を広げたぶんは全部余白に回っていて、1行の字数は増えていない */
  max-width: 680px; margin: 0 auto; padding: 20px 16px 40px;
  background: var(--card);
}
/* ── パンくずと紙のあいだに地の色をのぞかせる（PC・スマホ共通）──
   BUBU 2026-08-26「PCのパンくずと、コンテンツの間にマージンあけて、間にちょいと背景色が
   入るように」→ そのあと「普通にsafariで見た場合、パンくずつくじゃん？だからこっちの作りは
   PCの方のレスポンスデザインに合わせたい」＝**パンくずが出る時は画面幅を問わず同じ作り**。

   ⚠️ パンくずは HTML 上 .dict-page の**中**にある（342ページの生成物なので構造は触らない）。
   中にあるままでは白い紙の上から出られないので、絶対配置で紙の外へ出し、
   その分の高さ（帯42px＋すき間14px＝56px）を紙の上marginで確保している。
   → 帯の高さかすき間を変えるなら 56px も一緒に直す。片方だけ変えるとすき間がズレる
   （すき間は 2026-08-26 に BUBU の指示で 28px→14px＝半分にした）

   ⚠️ この作りが効くのは**パンくずが出ている時だけ**。アプリの中から開いた2パターン
   （?embed=1／戻るバーあり）ではこのファイルの下の方で元に戻している。
   BUBU「アプリからの食材リンクで飛ぶところは、上部の余白だけでよさげ」 */
.dict-page { position: relative; margin-top: 56px; }
.dict-page > .crumbs {
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 42px;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
/* PCだけ：紙が画面より狭くなるので、ふちを見せる */
@media (min-width: 640px) {
  .dict-page {
    /* 角丸（BUBU 2026-08-26「PCの白台紙は角丸にしてみよ」→「結構角丸してるｗ？」で 16→12）。
       大きい面の角丸は 8〜16px が主流で、12pxがその真ん中。中のカードは10pxに統一してある
       ＝**外側を内側より大きく**。逆にすると中のカードが台紙の角に張り付いて見える。
       スマホは紙が画面幅いっぱいで角が画面の外＝丸めても見えないので、ここだけ */
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(63, 66, 55, 0.06), 0 10px 30px rgba(63, 66, 55, 0.07);
    /* 上下左右の余白を増やす（BUBU 2026-08-26）。左右40px＝下の .crumbs の
       padding計算（50vw - 300px）と対で効いている。片方だけ変えると帯の文字と本文の左端がズレる */
    padding: 24px 40px 56px; /* 上だけ詰めた（BUBU 2026-09-04「LOGO自体がもっとうえに」・36→24） */
    margin-bottom: 56px;
  }
  .dict-page > .crumbs {
    padding-left: max(40px, calc(50vw - 300px));
    padding-right: max(40px, calc(50vw - 300px));
  }
}
a { color: var(--green-dark); }

/* パンくず：テキストのみ（アイコン・飾りなし） */
/* パンくずは薄い緑の帯にのせる（BUBU 実機 2026-08-14「パンクズも別色で背景つけて」）。
   本文と同じ地の色だと、上の「戻る」バーと地続きに見えて境目が分からなかった */
/* 2026-08-15 BUBU：アプリ内から開いた時の上部（白地＋下に線）と同じ見え方にそろえる。
   薄緑の丸い帯は、それ自体がひとつの部品に見えて上部の部品数を増やしていた。
   画面幅は問わない＝スマホでもデスクトップでも同じ形 */
.crumbs {
  font-size: 12.5px; color: var(--text-sub);
  background: var(--card); border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 10px 16px;
  /* ページの左右余白（16px）を打ち消し、さらに画面幅いっぱいまで白帯を伸ばす。
     600pxで止めると帯だけが途中で切れて、上の戻るバーと形が揃わない */
  /* タイトルとの間は 16px→24px（BUBU 2026-08-26「タイトルの上をもっと今の1.5倍あけて」）*/
  margin: -20px calc(50% - 50vw) 24px;
  width: 100vw; max-width: 100vw;
  /* 帯は全幅、文字は本文と同じ左端にそろえる（本文の幅600px＋左右16px） */
  /* 紙が680px・左右16px（スマホ）＝ 680/2 - 16 = 324 */
  padding-left: max(16px, calc(50vw - 324px));
  padding-right: max(16px, calc(50vw - 324px));
  box-sizing: border-box;
}
.crumbs a { color: var(--green-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
/* 「>」の左右に余白（BUBU 2026-09-04）。文字の空白は詰まって見えたのでスパンで確保 */
.crumbs .crumb-sep { margin: 0 7px; }

/* ── ページ上部（タイトル→食材名→結論カード→kcal を「ひとまとまり」に見せる）──
   ちゃっトク完成見本 2026-08-14。5つの強いブロックが縦に積まれて上部を占領していたのを、
   大きさの序列（結論＞タイトル＞食材名＞条件＞見出し＞kcal＞本文）と余白の詰めで整理する。
   HTML・文言・並び順は触らずCSSだけ。高さの決め打ちはしない＝長い食材名でも折り返すだけ */
/* タイトルと食材名はくっつけない（BUBU 2026-08-14「しかるべき余白があるべき」）。
   ひとまとまりに見せる＝隙間ゼロではなく、大きさの差で序列を付けるほう */
/* タイトルの下は倍あける（BUBU 2026-08-15）。詰まっていると
   タイトルと食材名がひと固まりに見えて、どちらが問いか分からなくなる */
.question { font-size: 23px; font-weight: 700; margin: 0 0 20px; line-height: 1.32; }
/* 食材名は本文の行間（1.75）のままだと、長い名前が2行になった時に
   ふりがなだけが遠くに落ちる（BUBU 実機 2026-08-14「（たいせいようさけ）までめちゃ行間あるし」）。
   行間をタイトルと同じくらいに詰め、大きさもタイトルとの差を付ける */
.food-name { font-size: 18.5px; line-height: 1.45; margin: 0 0 14px; }
.food-name .yomi { font-size: 13px; color: var(--text-sub); font-weight: 500; margin-left: 5px; white-space: nowrap; }
@media (min-width: 600px) {
  .question { font-size: 26px; }
}

/* ── 結論カード ──
   上段は「結論」と「調理上の注意＋バッジ」を横に並べる（狭い時は折り返す）。
   並び替えは order だけ＝HTMLの順番（結論・一言・区切り線・条件・注意文）は変えていない */
.verdict-card {
  border-radius: 10px; padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--bg);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; row-gap: 6px;
}
/* カードの地色は結論の色（BUBU 2026-08-14「食べられるは薄い緑だったから、ここも薄いオレンジに」）。
   淡い面＋細い枠までにして、警告の箱には見せない */
.verdict-caution { border-color: var(--apricot); background: var(--apricot-bg); }
.verdict-ok { border-color: var(--green); background: var(--green-bg); }
/* 「与えないで」だけ地色を白にする（BUBU 2026-08-24）。
   ここは元々 --card（白）だったが、2026-08-14 に上部をコンパクトにした時
   カード全体の既定が --bg（ページと同じクリーム）に変わり、その時
   「気をつければ」「食べられる」の地色だけが戻って **NGは戻し忘れていた**。
   結果、与えないでのカードだけ背景に溶けて枠線しか見えていなかった。
   枠線は結論の色（赤）＝カードとして立たせるのはここ。中は白のままにして、
   赤バッジ＋赤地で「警告の箱」にしない（8/14 の但し書きを守る） */
.verdict-ng { border-color: var(--danger); background: var(--card); }
.verdict-label { order: 1; margin: 0; font-size: 22px; font-weight: 700; }
/* 「気をつければ食べられる」は11文字＝22pxのままだとバッジが下の行に落ちる。
   1段だけ小さくして、結論とバッジを同じ行（カードの右上）に収める */
.verdict-caution .verdict-label { color: #b06a1e; font-size: 20px; }
.verdict-ok .verdict-label { color: var(--green-dark); }
.verdict-ng .verdict-label { display: inline-block; background: var(--danger); color: #fff; border-radius: 8px; padding: 4px 12px; font-size: 19px; }
.v-icon { margin-right: 2px; }
/* 結論アイコン（SVG・文字と絵文字をやめた 2026-08-14）。大きさは文字に連動、色は文字色に従う */
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.rel-badge .ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 1px; }
.verdict-note { order: 3; flex: 1 1 100%; margin: 0; font-size: 14.5px; font-weight: 500; }
/* 区切り線は出さない（横並びになった上段と下の文を線で切ると、また箱が増えて見える） */
.verdict-hr { display: none; }
.heat-line { order: 2; margin-left: auto; margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; }
.heat-caption { font-size: 11.5px; color: var(--text-sub); white-space: nowrap; }
/* 短いラベル1個の札（2026-08-14）。結論の右＝カードの右上に置く。
   オレンジ塗り＋白文字／背景なしの色文字／炎アイコン付き も試したが、
   塗りは主張しすぎ、背景なしは弱すぎ、アイコンは13pxで形が潰れて読めなかった。
   文字色を結論と同じオレンジにするのも没（BUBU「気を付ければ の文字色と同じなのがまずダメ」）
   ＝色は結論だけが持ち、条件は中立色。どちらが結論かが一目で決まる */
.heat-badge {
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 3px 9px;
}
.heat-note { order: 4; flex: 1 1 100%; margin: 0; font-size: 14.5px; font-weight: 500; }

.kcal-line { font-size: 15.5px; font-weight: 400; margin: 0 0 18px; color: var(--text-sub); }
.kcal-line b { font-size: 16px; font-weight: 700; color: var(--text); }

/* ── 見出し：左に短い緑の縦線＋前余白（ちゃっトク確定） ──
   縦線は行の高さいっぱいではなく上下を少し空ける（見出しを本文の入口の強さに戻す） */
/* 上部のひとまとまり（タイトル〜kcal）と本文の間はしっかり空ける。
   詰めすぎると「読み物の入口」に見えない（BUBU 2026-08-14「どういう食材？の上ももっと空いてる」） */
/* 見出しごとの間隔も広げる（BUBU 2026-08-15「見出しを使ってるところ＋
   その文章の下のマージンもっとあけて」）＝節と節の切れ目をはっきりさせる */
.dict-section { margin-top: 48px; }
.dict-section h2 {
  position: relative;
  font-size: 20px; font-weight: 700; color: var(--text);
  border-left: none; padding-left: 11px;
  margin: 0 0 14px; line-height: 1.4;
}
.dict-section h2::before {
  content: ''; position: absolute; left: 0; top: .3em; bottom: .3em;
  width: 3px; border-radius: 2px; background: var(--green);
}
.dict-section p { margin: 0 0 22px; font-size: 15.5px; font-weight: 500; line-height: 1.75; }
/* 節の最後の段落の下は、次の見出しまでの間隔（48px）に任せて二重に空けない */
.dict-section p:last-child { margin-bottom: 0; }

/* ── 食べてしまった場合（NGページ・2ステップだけ） ── */
.emergency-title { color: var(--danger) !important; }
.emergency-title::before { background: var(--danger) !important; }
.emergency-box { border: 1.5px solid var(--danger); background: var(--danger-bg); border-radius: 10px; padding: 14px 16px; }
.em-step { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.em-step + .em-step { border-top: 1px dotted rgba(176,86,76,.4); }
.em-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--danger); color: #fff; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.em-step div { font-size: 14.5px; }

/* ── 一般論アコーディオン（JSなし・details） ── */
.notes-acc { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.notes-acc summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  font-size: 15.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.notes-acc summary::-webkit-details-marker { display: none; }
.acc-mark::before { content: '＋'; color: var(--text-sub); font-weight: 500; }
.notes-acc[open] .acc-mark::before { content: '−'; }
.acc-body { padding: 0 16px 14px; font-size: 14.5px; }

/* ── 読みものへの導線（生魚の共通ページ・2026-08-13） ── */
/* 読みものへの箱だけ、うんと薄いベージュを敷く（BUBU 2026-08-26
   「そこの角丸四角の中は薄いベージュの背景色をつけたらいい。
   さっきのページ全体のベージュよりもっと薄い色」）。
   白い紙の上で「ここは本文じゃなく別のページへの入口」と分かるようにするため。
   ⚠️ 旧・地の色（#faf6ec）より薄い。ここを濃くすると、やめたクリーム地が戻ってくる */
.topic-link {
  display: block; background: var(--beige-soft); border: 1px solid var(--beige-line); border-radius: 10px;
  padding: 14px 36px 14px 16px; text-decoration: none; color: inherit;
  position: relative;
}
.topic-link-label { display: block; font-size: 15px; font-weight: 700; color: var(--green-dark); }
.topic-link-sub { display: block; font-size: 13px; color: var(--text-sub); margin-top: 4px; }
/* 文末の「→」をやめて、一覧（.rel-arrow）と同じ›アイコンを右端の縦中央に（2026-09-05 BUBU）。
   右paddingの36pxは›の居場所ぶん＝ラベルが矢印の下に潜らないように */
.topic-link-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--green-dark); font-weight: 700;
}

/* ── 栄養表 ── */
.nutri-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 16px; }
.nutri-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.nutri-title { font-size: 17px; font-weight: 700; margin: 0; border: none !important; padding: 0 !important; }
.nutri-title::before { display: none; } /* 栄養表の見出しには緑の縦線を出さない（カードの中なので） */
.nutri-sub { font-size: 13px; font-weight: 500; color: var(--text-sub); }
.nutri-source { text-align: right; flex: 0 0 auto; }
.source-tag { font-size: 11.5px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text-sub); background: var(--bg); }
.source-long { font-size: 10.5px; color: var(--text-sub); }
.nutri-table { width: 100%; border-collapse: collapse; }
.nutri-table th { text-align: left; font-weight: 500; font-size: 14.5px; padding: 8px 0; }
.nutri-table td { text-align: right; font-size: 14.5px; padding: 8px 0; }
.nutri-table tr { border-bottom: 1px solid #f0ead9; }
.nutri-more summary {
  list-style: none; cursor: pointer; text-align: center; color: var(--green-dark);
  font-weight: 700; font-size: 14.5px; padding: 10px 0 2px;
}
.nutri-more summary::-webkit-details-marker { display: none; }
.nutri-more summary::after { content: ' ▾'; }
.nutri-more[open] summary::after { content: ' ▴'; }
.nutri-note { font-size: 12px; color: var(--text-sub); margin: 10px 0 0 !important; }
/* 数値の代わりに置く箱も、栄養カードと同じ面に見せる＝角丸・枠線をそろえる
   （2026-08-15 総点検：ここだけ角丸12px・枠線が薄いままズレていた） */
.no-source-box { background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 14px 16px; font-size: 14.5px; }

.care-item { font-size: 14.5px; }
.small-note { font-size: 12px; color: var(--text-sub); }

/* ── CTA（ボンを添える・2026-08-29 BUBU） ──
   画像は本体アプリと同じ /char/bon.png を参照＝食材ノート用に複製しない。
   地は薄緑に戻した（BUBU「食材ノートの方のCTAきにいらん」→A案）＝
   食材ノートは白い紙に軽い箱が並ぶ読み物なので、濃い緑のベタ塗りは異物になる。
   DONは道具を使い終わった後の締めなので濃いままでよい。**揃えるのは色ではなく形**。
   並びは「ボンと文が1行・ボタンは下に全幅」（BUBU「ボンとテキストは1行ずつがいい」
   「ボンとの配置バランスも悪い」）＝ボンの高さに文が2〜3行ぶら下がるのをやめた */
.cta-card {
  background: var(--green-bg); border: 1px solid var(--green);
  border-radius: 10px; padding: 16px; text-align: left;
}
.cta-lead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cta-dog { width: 64px; height: auto; flex: none; }
/* 見出しと下の行は中央揃え・見出しは太く・2行の間は詰める（2026-08-29 BUBU） */
.cta-body { min-width: 0; flex: 1; text-align: center; }
/* ⚠️ `.dict-section p`（クラス2つ）が font-weight:500・margin-bottom:22px を当ててくるので、
   こちらも `.cta-card` を頭に付けて同じ強さにしないと勝てない（2026-08-29 実測で発覚。
   .cta-title だけだと太字も余白詰めも効かず、中央揃えだけ効いて混乱した） */
.cta-card .cta-title { font-size: 16px; font-weight: 800; color: var(--green-dark); margin: 0 0 2px; }
.cta-card .cta-sub { font-size: 13.5px; margin: 0; line-height: 1.5; }
.cta-btn {
  display: block; background: var(--green-strong); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15.5px; border-radius: 10px; padding: 12px 10px;
  text-align: center; transition: background .15s, transform .1s;
}
/* 押せる物には触った時の反応を付ける（2026-08-29 BUBU「hoverの動きまたは色変えでリンクの感じだして」） */
.cta-btn:hover { background: var(--green-dark); }
.cta-btn:active { transform: translateY(1px); }
/* 食材ノート → 食材DON! への導線（2026-09-01 新設・SEO）。
   Search Console 実測：登録済み40／未登録268（うち266が「検出 - インデックス未登録」＝
   Googleが存在は知っているがクロールに来ていない）。/don/ への内部リンクは**0本**で、
   DONは sitemap に載っているだけの孤島だった。334ページから1本ずつ張って導線を作る。
   ⚠️ アンカーの文言は**食材名を入れて1ページずつ変える**（334ページ全部が同じ文だと
      量産リンクに見える）。危険食材（isNg）のページには出さない＝その食材で献立を
      組ませる誘導になってしまうため。 */
.cta-don {
  display: block; margin-top: 10px; text-align: center;
  color: var(--green-dark); text-decoration: none;
  font-size: 13.5px; font-weight: 700; line-height: 1.5;
  transition: color .15s;
}
.cta-don:hover { color: var(--green-strong); text-decoration: underline; }
@media (min-width: 700px) {
  .cta-card { padding: 18px 20px; }
  .cta-dog { width: 76px; }
}

/* ── 一覧の検索窓（BUBU 2026-08-13「食材ノート自身に検索窓つけて」） ──
   303件を上から探すのは無理。スクロールしても消えないよう上に貼りつける。
   入力欄は16px＝これ未満だと iPhone が focus 時に勝手に拡大する */
.dict-search {
  /* 塗りは台紙と同じ白（BUBU 2026-09-04「検索ボックスの周りにちょっと背景色ついてる」＝
     地の色のままだとPCの白い台紙の上で帯が浮いて見えた。貼りつき中に下のリストが
     透けない役目は白でも果たせる） */
  position: sticky; top: 0; z-index: 5; background: var(--card);
  display: flex; gap: 8px; align-items: center; padding: 10px 0 8px;
}
.dict-search input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text);
}
.dict-search input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.dict-search button {
  flex: 0 0 auto; width: 42px; height: 44px; font: inherit; font-size: 18px; line-height: 1;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--text-sub); cursor: pointer;
}
.dict-hit { font-size: 12.5px; color: var(--text-sub); margin: 0 0 10px; }
.dict-miss {
  font-size: 14px; color: var(--text-sub); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 16px;
}

/* ── 関連食材：名前｜固定幅バッジ｜矢印 のX位置を全行固定（ちゃっトク確定） ── */
.rel-list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* 行のhoverは薄めの茶色で塗る（BUBU 2026-09-04）。overflow:hidden は角の行の塗りを角丸に収めるため。
   ⚠️ --apricot-bg だと「食べられる」チップの薄緑と近すぎて潰れた（BUBU実機）＝少し深めの茶にして、
   hover中のチップは白いフチで塗りから浮かせる */
.rel-list a:hover { background: #faf4e6; }
.rel-list li + li { border-top: 1px solid #f0ead9; }
.rel-list a, .rel-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; text-decoration: none; color: var(--text); }
.rel-name { flex: 0 0 7em; font-weight: 700; font-size: 14.5px; }
.rel-badge {
  flex: 0 0 8.5em; text-align: center; font-size: 12px; font-weight: 700;
  border-radius: 6px; padding: 2px 0;
}
.rel-ok { background: var(--green-bg); color: var(--green-dark); border: 1px solid var(--green); }
.rel-caution { background: var(--apricot-bg); color: #b06a1e; border: 1px solid var(--apricot); }
.rel-ng { background: var(--danger); color: #fff; border: 1px solid #8f4038; }
.rel-note { flex: 1 1 auto; font-size: 12.5px; color: var(--text-sub); min-width: 0; }
.rel-arrow { margin-left: auto; color: var(--green-dark); font-weight: 700; }
/* 画面が広い時は名前の枠を広げる（BUBU 2026-08-13 総点検）。
   7em固定だと一覧301件のうち72件が2行に折れる。右は空いているのに折れていた。
   スマホ（<600px）は今までどおり7em＝バッジのX位置揃えを守る */
@media (min-width: 600px) {
  /* 18em＝現在の最長名18字（ラムスペアリブ（あばら軟骨・骨なし））が折れない幅
     （BUBU 2026-09-04「幅いっぱいあるのに折り返されるのなんかいや」＝12emでは13字以上が2行に折れていた） */
  .rel-name { flex: 0 0 18em; }
}
/* 一言メモつきの行（各ページの「関連する食材」）だけ、スマホでは2段にする。
   名前｜バッジ｜メモ の3列をスマホ幅に詰めると、名前もメモも数文字ごとに折れて読めない
   （BUBU 実機 2026-08-14「スマホの場合3列はキツいと思う」）。
   一覧ページ（名前｜バッジの2列）は今までどおり＝バッジのX位置揃えを崩さない */
/* スマホでは名前とバッジの固定幅をやめる（BUBU 実機 2026-08-14「なんで右側こんなに空白あるの？」）。
   名前7em＋バッジ8.5emの決め打ちだと、375pxでは「合鴨肉（皮な／し）」と折れるのに
   バッジの右は大きく余る。名前に余った幅を渡し、バッジは右そろえ＝X位置は右端で揃う */
@media (max-width: 599px) {
  .rel-name { flex: 1 1 auto; min-width: 0; }
  .rel-badge { flex: 0 0 auto; margin-left: auto; padding: 2px 10px; }
}
@media (max-width: 599px) {
  .rel-list a.rel-wrap, .rel-row.rel-wrap {
    flex-wrap: wrap; align-items: center; row-gap: 3px; position: relative; padding-right: 30px;
  }
  .rel-wrap .rel-name { flex: 0 1 auto; }
  .rel-wrap .rel-badge { flex: 0 0 auto; padding: 2px 10px; }
  .rel-wrap .rel-note { flex: 1 1 100%; }
  .rel-wrap .rel-arrow { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); margin-left: 0; }
}

/* アプリの中に重ねて開かれている時（?embed=1）＝アプリの外へ出す物を消す。
   パンくずのホーム・アプリへの勧誘は、すでにアプリを使っている人には要らないどころか、
   押すと重ねた画面から出てしまう（アプリの入り口に飛ぶ）＝いちばん困る動き */
.dict-embed .crumbs,
.dict-embed .cta-section,
.dict-embed .app-back { display: none; }
/* パンくずが消えるので、パンくず用に空けた上の70pxも要らない（空の帯が残るのを防ぐ） */
.dict-embed .dict-page { padding-top: 14px; margin-top: 0; }

/* アプリの窓の中でノートを開いた時の戻り道（dict.js が出す・既定は非表示） */
/* 白にする（BUBU 実機 2026-08-14「上部の戻るエリアは背景色分けして。白くするとかして」）。
   地の色（クリーム）のままだと本文と同じ面に見えて、操作する場所だと分からなかった */
.app-back { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 2px solid var(--green-dark); }
/* 戻るバーが出ている時、パンくずの上マイナス余白が効くとバーと同じ位置に重なり、
   sticky（z-index:5）のバーの下に隠れて消えていた。
   余白を0に戻したうえで、パンくず自身にも重なり順を持たせる（2026-08-15） */
.app-back:not([hidden]) + .dict-page { padding-top: 0; margin-top: 0; }
/* ⚠️ 上の方で入れた「パンくずを紙の外へ出す」を、ここで**全部**元に戻す。
   アプリの中では戻るバーがすでに上にいるので、パンくずを浮かせるとバーと重なる
   （BUBU「アプリからの食材リンクで飛ぶところは、上部の余白だけでよさげ」）。
   position だけ戻して top を戻し忘れると、相対配置のまま70px上にズレる */
.app-back:not([hidden]) + .dict-page .crumbs {
  position: relative; z-index: 1;
  top: auto; left: auto; transform: none;
  height: auto; display: block; white-space: normal;
  /* 紙の中に戻したうえで、帯だけ画面幅いっぱいに伸ばす（外へ出さずに全幅にする）。
     ⚠️ padding-left/right は**戻さない**。あれは「帯の文字を本文の左端にそろえる」計算で、
     絶対配置かどうかとは無関係。ここで 0 に戻すと文字が本文とズレる。
     逆に width:100vw を戻し忘れると、紙の中で padding だけ効いて文字が右へ300px飛ぶ
     （2026-08-26 に実際にそうなった） */
  margin: 0 calc(50% - 50vw) 24px;
  width: 100vw; max-width: 100vw;
}
.app-back-btn {
  display: block; width: 100%; min-height: 44px; padding: 0 16px;
  background: none; border: 0; text-align: left;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--green-dark); cursor: pointer;
}

.dict-footer { margin-top: 32px; text-align: center; font-size: 12px; color: var(--text-sub); }
.dict-footer p { margin: 0 0 6px; }
.dict-footer .dict-sns { margin-top: 10px; }

/* PR表記（ステマ規制・2026-08-15）。リンクのあるページにだけ出る。
   BUBU確定（2026-08-15）：
   - 表記は見出し右はしの [PR] 札だけ。ページ冒頭の宣言も紹介料の説明も書かない
   - 見出しは本文の節（緑バー・20px）より一段下げる＝広告が本文と同格に見えないように
   - **外枠なし・白地**（クリームの地色のままだと本文の面と同じに見える） */
/* 角丸のカードにしない＝広告が「もう1枚の読み物」に見える。
   本文の列いっぱいに広げた白い帯にして、フラットに置く（BUBU 2026-08-15
   「横幅100%でフラットにしておいたほうがいいかな」）。
   .dict-page の左右padding（16px）を打ち消して端まで伸ばす */
.pr-section {
  background: var(--card); border-radius: 0;
  margin: 24px -16px; padding: 14px 16px 6px;
}
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pr-head h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-sub); padding-left: 0; }
.pr-head h2::before { display: none; }
.pr-badge {
  flex: none; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--text-sub); font-size: 11px; font-weight: 700; letter-spacing: .06em;
}

/* 横スライド（商品は複数出す・スワイプで見る） */
.pr-slider {
  display: flex; gap: 10px; margin: 0; padding: 2px 0 10px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
/* 件数が少ない時は伸びて幅を使い切り、多い時は160pxで止まって横スクロール（2026-08-15）。
   max-width は間延び防止の蓋（2〜3件ならこれでほぼ埋まる）
   ⚠️ 縮小は許可しない（flex-shrink: 0・2026-08-29）。1 のままだと4件がスマホ幅に
   押し込まれて1枚78pxまで潰れ、商品名が2〜3文字ずつ折り返して縦に伸びた（実機で発覚）。
   横スクロールで見せる作りなので、はみ出して良い＝縮める必要がない */
.pr-card { flex: 1 0 160px; max-width: 280px; scroll-snap-align: start; }
/* 1件だけになった時（後継が見つからず非表示が続いた等）は縦カードだと右が大きく空く。
   その時だけ画像左・文字右の横長にして幅を使い切る */
.pr-card:only-child { max-width: none; }
.pr-card:only-child a { display: flex; gap: 14px; align-items: center; }
.pr-card:only-child .pr-card-thumb { flex: 0 0 116px; margin-bottom: 0; }
.pr-card:only-child .pr-card-thumb img { height: 96px; }
.pr-card:only-child .pr-card-text { flex: 1 1 auto; }
.pr-card a {
  display: block; height: 100%; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  text-decoration: none; color: inherit;
}
/* 商品名は店の登録名そのままで長い（「【創健社公式】国内産 炒りごま 黒 45g｜いりごま 直火焙煎」等）。
   カードでは頭2行だけ見せて、続きはリンク先に任せる（2026-08-29） */
.pr-card-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--green-dark); text-decoration: underline;
}
.pr-card:only-child .pr-card-name { -webkit-line-clamp: 3; line-clamp: 3; }
.pr-card-note { display: block; font-size: 12px; color: var(--text-sub); margin-top: 4px; line-height: 1.6; }
.pr-card-thumb { display: block; margin-bottom: 8px; }
.pr-card-thumb img { width: 100%; height: 116px; object-fit: contain; background: #fff; border-radius: 8px; }

/* ── 統合ページの状態タブ（1食材1ページ・2026-08-15 migration 223とセット） ──
   ラジオ＋CSSだけで切り替える（JS不要＝静的ページのまま）。
   ラジオ本体は隠し、ラベルが錠剤型のタブになる。:checked の隣接関係で表示パネルを選ぶ */
.state-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
/* 錠剤型（丸い独立したボタン）だと、下のカードと切り離されて見えた
   （BUBU 2026-08-15「本当のタブみたいに、本体にくっついて、四角いタブの形の方がいい」）。
   ＝ 上だけ角を丸めた四角にして、下辺をカードと地続きにする。
   タブバーとカードの隙間を0にし、選択中のタブは下線を消してカードとつながって見せる */
/* タブ同士も隙間なしで並べる（BUBU 2026-08-15「骨なしと骨付きの間もいらない」）。
   枠が二重にならないよう、2つ目以降は左辺を重ねる */
/* タブが多い時（鮭4種など）に折り返すと、上段のタブがカードから離れて宙に浮く。
   折り返さず横スクロールにする＝下辺が必ずカードと接する（2026-08-15） */
.state-tab-bar {
  display: flex; gap: 0; flex-wrap: nowrap; position: relative; z-index: 1;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* overflow-x を付けると、選択タブの下にはみ出させた白帯が切り落とされて
     カードの枠線が透けて見える（BUBU 2026-08-15「白タブの下に緑の線はいらない」）。
     はみ出す分をバーの内側（padding）に確保し、その分だけ下へ詰め直す */
  padding-bottom: 4px; margin: 0 0 -4px;
}
.state-tab-bar::-webkit-scrollbar { display: none; }
.state-tab { flex: 0 0 auto; white-space: nowrap; }
.state-tab + input + .state-tab, .state-tab ~ .state-tab { margin-left: -1px; }
/* 選んでいない側に薄い緑を敷く（BUBU 2026-08-15「骨付きの所のタブ、色を付けたら」）。
   ページの地色と同じだと沈んで「押せる」と気づけない。
   色は**非選択側**に付ける：選択中は本体と同じ白のままで地続きに見せる必要があるため、
   選択中に色を足すとどちらが開いているか分からなくなる */
.state-tab {
  padding: 8px 20px; font-size: 14px; font-weight: 700; color: var(--green-dark);
  background: var(--green-bg); border: 1px solid var(--line-strong);
  /* 未選択のタブは下辺に線を持つ＝カードの天面と1本につながって「閉じている」ことを示す
     （BUBU 2026-08-15「未選択のやつには線が欲しいのよ」）。
     選択中だけこの線を消してカードと地続きにする */
  border-bottom: 1px solid var(--line-strong);
  border-radius: 9px 9px 0 0; margin-bottom: -1px;
  cursor: pointer; user-select: none;
}
/* 選んでいないタブが並ぶと、隣り合う枠線が1本に見えて境目が分かりにくい
   （BUBU 2026-08-15「まだ選ばれてないやつはもう一つ内側に白の線入れれん？」）。
   枠のすぐ内側に白い線を1本入れて、タブ同士を切り分ける */
.state-tab { box-shadow: inset 0 0 0 1px var(--card); }
/* 未選択タブのhover（BUBU 2026-09-05「タブで切り替えるところもhoverの色つけて」）＝緑をひと段深く */
.state-tabs input[type="radio"]:not(:checked) + .state-tab:hover { background: #faf4e6; } /* 一覧の行hoverと同じ色（BUBU指定） */
.state-tabs input[type="radio"]:checked + .state-tab {
  background: var(--card); color: var(--green-dark);
  border-bottom-color: transparent;
  box-shadow: none;
  position: relative;
}
/* 選択中のタブの下に線を残さない（BUBU 2026-08-15「白タブの下に緑の線はいらないからね？」）。
   1pxの影で隠す方式は端数でズレて線が透けることがあるため、白帯を確実に敷く */
.state-tabs input[type="radio"]:checked + .state-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--card);
}
/* 非選択タブの下線は「いま開いているタブの結論色」に合わせる（BUBU 2026-08-23）。
   生（気をつければ＝オレンジ）を開いている時に、隣のゆでこぼし（緑）の下線だけ
   緑のままだと、ページのテーマ色から浮く。下線はカードの天面と1本につながる線
   ＝開いている側の色で統一する。:not(:checked)で選択中タブ（透明化済み）は触らない */
.state-tab-bar:has(input:checked + .state-tab.pick-ok) input:not(:checked) + .state-tab { border-bottom-color: var(--green); }
.state-tab-bar:has(input:checked + .state-tab.pick-caution) input:not(:checked) + .state-tab { border-bottom-color: var(--apricot); }
.state-tab-bar:has(input:checked + .state-tab.pick-ng) input:not(:checked) + .state-tab { border-bottom-color: var(--danger); }
/* タブがくっつく側（カードの左上）は角を丸めない＝紙の縁が揃う */
/* タブがくっつく側（カードの左上）だけ角を丸めない＝紙の縁が揃う。
   タブが無いページはカードが独立しているので、角丸をそのまま残す
   （BUBU 2026-08-15「単独の場合は囲ってる枠の角丸感は残しておいてよ」） */
.state-tabs:has(.state-tab) .nutri-card,
.state-tabs:has(.state-tab) .no-source-box { border-top-left-radius: 0; }
.state-tabs input[type="radio"]:focus-visible + .state-tab { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.state-panel { display: none; }
/* パネルは data-for でラジオと対応（タブバーの中のn番目のラジオ → n番目のパネル） */
/* ⚠️ 2026-08-21：受け側を .state-tabs から .dict-page に広げた。
   タブは栄養成分の表だけを切り替える部品だったが、実際は「どういう食材？」も kcal も
   ケアも状態で変わる＝ページ全体の状態切り替えだった。皮なしタブにしても本文が
   「皮をつけたまま…190kcal」のままだった（BUBU 実機発見）。
   ラジオ本体はタブバーの中に置いたまま（8/15 に詰めたタブとカードの地続き表示を壊さない） */
.dict-page:has(#ns-0:checked) .state-panel[data-for="ns-0"],
.dict-page:has(#ns-1:checked) .state-panel[data-for="ns-1"],
.dict-page:has(#ns-2:checked) .state-panel[data-for="ns-2"],
.dict-page:has(#ns-3:checked) .state-panel[data-for="ns-3"] { display: block; }
.state-panel .dict-section { margin-top: 0; }
/* 状態の一言は「この表についての説明」。外に小さい灰色で置くと表と切れて読まれない
   （BUBU 2026-08-15「もう少し見えやすくするか、どうにかならん？」）。
   ＝ カードの下辺にくっつけ、同じ枠の中で色を変えた帯にする */
.state-note {
  margin: -1px 0 0; padding: 12px 16px;
  background: var(--green-bg); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 14px 14px;
  font-size: 13.5px; color: var(--text); line-height: 1.75;
}
/* 一言が続く時はカードの下の角を落とす＝1枚の紙に見せる */
.state-panel:has(.state-note) .nutri-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* スマホで「（100gあたり・骨なし）」が「骨/なし」で割れていた（BUBU 実機 2026-08-15）。
   原因＝見出しと出典が横一列を取り合って、見出し側の幅が足りなくなること。
   狭い画面では上下に分け、状態ラベルの途中では折らない */
.nutri-sub { white-space: nowrap; }
@media (max-width: 480px) {
  .nutri-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .nutri-source { text-align: left; }
  .source-long { display: inline; }
}
/* タブは栄養成分の見出しの下（カードの外）に置く＝何を切り替えるタブか分かる位置。
   下は padding で確保した4pxを margin で詰め戻す＝タブとカードが地続きになる。
   ここで margin:0 と書くと詰め戻しが消え、隙間からカードの枠線が見える（2026-08-15 実機） */
.state-tabs .state-tab-bar { margin: 0 0 -4px; }
/* 狭い画面では出典を1行にまとめて小さく（縦に積むと表の入口が遠くなる） */
@media (max-width: 480px) {
  .nutri-source { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
  .source-long { font-size: 10px; }
}

/* タブとカードの間に隙間ができていた（BUBU 実機 2026-08-15「タブと本体間空いてる」）。
   原因＝カードを包む section の余白がタブ直下に残っていたこと */
.state-panel > .dict-section { margin: 0; }
.state-panel .no-source-box { margin-top: 0; }
/* 表の上に品目名を出す（BUBU「いわし（100gあたり〜）と品目名は書いた方がしまる」） */
.nutri-food { font-weight: 700; }
/* 「アトランティックサーモン（100gあたり）」のような長い品目名が2行に折れる
   （BUBU 2026-08-15「ここなんとか1行にならん？」）。
   1行に収まらない時だけ文字を詰める＝短い名前の見た目は変えない */
.nutri-title { text-wrap: nowrap; }
@media (max-width: 480px) {
  /* .dict-section h2 より詳細度を上げないと効かない（h2 側が 20px を持っているため） */
  .dict-section .nutri-title { font-size: clamp(13px, 4.4vw, 17px); }
  .dict-section .nutri-sub { font-size: clamp(10px, 3.1vw, 13px); }
}

/* タブが無いページは、見出しとカードの間にタブぶんの隙間（padding-bottom 4px の
   詰め戻し）が残って空きすぎて見える（BUBU 2026-08-15）。タブが無い時だけ詰める */
.state-tabs:not(:has(.state-tab)) > .dict-section,
.state-tabs:not(:has(.state-tab)) > section { margin-top: 0; }
.state-tabs:not(:has(.state-tab)) .nutri-card,
.state-tabs:not(:has(.state-tab)) .no-source-box { margin-top: 0; }

/* ── 状態を選ぶタブ（結論カードの上・BUBU 2026-08-21 夕方）──────────────
   それまでタブは「栄養成分」の見出しの下にあり、そのずっと上の本文まで書き換えていた。
   BUBU「普通タブを切り替えた時に上の文章まで変わるなんて気づかない」
   ＝**変わるものは切り替えより下**、の一方向に直した。
   形はBUBUの案（「栄養成分のところでタブ切り替えにしてあったでしょ？ それと同じ形で、
   その下の食べられるの所にくっついたらだめ？」）＝8/15に詰めた「タブが本体と地続き」を再利用する。
   色はそのメンバーの結論に合わせる＝開く前と開いた先の顔が一致する */
.pick-wrap { margin: 14px 0 0; position: relative; z-index: 1; }
.pick-wrap input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pick-wrap .state-tab-bar { display: inline-flex; gap: 0; padding: 0; margin: 0 0 -1px; }
.pick-wrap .state-tab {
  padding: 8px 20px; border-radius: 9px 9px 0 0; margin: 0;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--text-sub);
  box-shadow: inset 0 0 0 1px var(--card);
}
.pick-wrap .state-tab ~ .state-tab { margin-left: -1px; }
.pick-wrap .state-tab.pick-ok { border-color: var(--green); color: var(--green-dark); }
.pick-wrap .state-tab.pick-caution { border-color: var(--apricot); color: #b06a1e; }
.pick-wrap .state-tab.pick-ng { border-color: var(--danger); color: var(--danger); }
/* 未選択タブのhover（BUBU 2026-09-05「骨付きのタブのhover色つかん」＝白地のこの家族に付け忘れていた）。
   選択中の地色（green-bg等）とは別の薄い暖色＝どっちが開いてるかは崩さない */
.pick-wrap input[type="radio"]:not(:checked) + .state-tab:hover { background: #faf4e6; } /* 一覧の行hoverと同じ色（BUBU指定） */
/* 選んだタブは、その結論カードと同じ地色にして下辺を消す＝1枚の紙に見せる */
.pick-wrap input[type="radio"]:checked + .state-tab {
  border-bottom-color: transparent; box-shadow: none; position: relative;
}
.pick-wrap input:checked + .state-tab.pick-ok { background: var(--green-bg); }
.pick-wrap input:checked + .state-tab.pick-caution { background: var(--apricot-bg); }
.pick-wrap input:checked + .state-tab.pick-ng { background: var(--card); }
.pick-wrap input[type="radio"]:checked + .state-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
}
.pick-wrap input:checked + .state-tab.pick-ok::after { background: var(--green-bg); }
.pick-wrap input:checked + .state-tab.pick-caution::after { background: var(--apricot-bg); }
.pick-wrap input:checked + .state-tab.pick-ng::after { background: var(--card); }
/* タブが乗る側（カードの左上）は角を丸めない */
.pick-wrap + .verdict-card, .pick-wrap ~ .verdict-card { border-top-left-radius: 0; }
.pick-wrap ~ .verdict-card { margin-top: 0; }
/* 結論カードは flex（中の札を右上に置くため order を使っている）。
   状態パネルの既定は display:none なので、開いた時は block ではなく flex に戻す */
.dict-page:has(#ns-0:checked) .verdict-card.state-panel[data-for="ns-0"],
.dict-page:has(#ns-1:checked) .verdict-card.state-panel[data-for="ns-1"],
.dict-page:has(#ns-2:checked) .verdict-card.state-panel[data-for="ns-2"],
.dict-page:has(#ns-3:checked) .verdict-card.state-panel[data-for="ns-3"] { display: flex; }

/* 骨の警告のマーカー（BUBU 2026-08-21・手羽先事件）。バッジ「加熱しない」を外した代わりに、
   警告文そのものを蛍光ペン風に。色はパレットの杏系＝結論オレンジと同族で「注意」の顔 */
.warn-mark {
  background: linear-gradient(transparent 40%, #ffee55 40%);
  color: var(--danger); font-weight: 700; padding: 0 1px;
}

/* ── TOPへ戻る（BUBU 2026-09-04・PCだけ）──
   スマホには出さない＝親指スクロールが速いのと、下部の白帯類と重なるため */
.dict-top {
  display: none;
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--green-dark); color: #fff; border: none; cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(63, 66, 55, 0.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
@media (min-width: 600px) {
  .dict-top { display: flex; }
  .dict-top.show { opacity: 1; transform: none; pointer-events: auto; }
  .dict-top:hover { background: var(--green-strong); }
}

/* 一覧トップのロゴ（BUBU 2026-09-04「ファビコンで使ってる画像をLOGOとして」）＝
   ファビコン/ホームアイコンと同じ顔で「アプリと同じ家族」を一目で伝える */
/* 食材ページ左上の小さめロゴ（BUBU 2026-09-04）＝押すと一覧トップへ */
.dict-logo-sm { display: inline-block; margin: 2px 0 20px; } /* 下は倍あけた（BUBU 2026-09-04・10→20） */
.dict-logo-sm img { height: 26px; width: auto; display: block; }
/* アプリの窓の中では消す（crumbs・CTAと同じ方針＝アプリ内に余計な導線を増やさない） */
.dict-embed .dict-logo-sm { display: none; }

/* 言語リンクはロゴ/タイトル行の右端に同居（BUBU 2026-09-04「English入れたから上部が間延び」＝独立行をやめた） */
.dict-lang { margin-left: auto; font-size: 13px; align-self: center; }
.dict-logo-row { display: flex; align-items: center; }
.dict-embed .dict-logo-row { display: none; }

/* embed中の「‹ もどる」（ノート内を渡り歩いた時だけ・dict.jsが挿す） */
.dict-embed-back { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--green-dark); padding: 2px 0 12px; cursor: pointer; display: block; }

/* 関連食材（一言メモつきの3列リスト）だけ、PC幅では名前列を「そのリストで一番長い名前」の幅に
   自動で合わせる（BUBU 2026-09-05「関連する食材でメモが2行に折れる」＝18em固定だと
   短い名前のリストでメモの幅が食われていた）。subgrid＝行をまたいで列幅を揃える道具。
   バッジのX位置揃え（ちゃっトク確定）はリスト内で保たれる。一覧トップ（メモ無し2列）は従来のまま */
@media (min-width: 600px) {
  .rel-list:has(.rel-note) { display: grid; grid-template-columns: minmax(7em, max-content) max-content 1fr max-content; }
  /* minmax(7em,…)＝アジ・鮭みたいな短い名前のリストで詰まりすぎない下限（BUBU 2026-09-05「短い文字のところは不細工になる」） */
  .rel-list:has(.rel-note) li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .rel-list:has(.rel-note) a, .rel-list:has(.rel-note) .rel-row {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
    align-items: center; column-gap: 10px;
  }
  .rel-list:has(.rel-note) .rel-name { grid-column: 1; }
  .rel-list:has(.rel-note) .rel-badge { grid-column: 2; width: 8.5em; }
  .rel-list:has(.rel-note) .rel-note { grid-column: 3; }
  .rel-list:has(.rel-note) .rel-arrow { grid-column: 4; margin-left: 0; justify-self: end; }
}