/* food.css — 食品・サプリ（/food/）。一覧・カード・ヒーローは用具の gear.css（device-*）と db.css をそのまま使い、
   ここは栄養成分表・風味の比較表・ランキングの表・ランキング/用途への導線・根拠の囲みだけ。色は gs-shell.css の変数だけ。 */

/* 栄養成分表（1 食 / 100 g の 2 列）。数値は右寄せ・等幅数字 */
.food-nutri th, .food-matrix th, .food-sizes th { font-size: .86rem; }
.food-nutri tbody th small, .food-sizes td small, .food-matrix td small { display: block; font-size: .72rem; font-weight: 400; color: var(--mute); }
.food-nutri-group th { background: var(--tint); color: var(--g-dark); font-size: .78rem; letter-spacing: .04em; padding: .35rem .75rem; }
.food-sizes td small { display: inline; margin-left: .3em; }

/* 風味ごとの詳細 */
.food-flavor { margin-bottom: 1rem; scroll-margin-top: 4.5rem; }
.food-flavor-h { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.food-id { margin-left: .6em; font-size: .72rem; font-weight: 500; color: var(--mute); }
.food-official { margin: 0 0 .6rem; font-size: .84rem; color: var(--mute); }
.food-prep { margin: .6rem 0; font-size: .86rem; color: var(--ink); line-height: 1.7; }
.food-prep b { font-weight: 600; color: var(--mute); }
.food-ingredients { font-weight: 400 !important; line-height: 1.75; }
.food-claim { display: block; margin-top: .25rem; font-weight: 400; color: var(--mute); line-height: 1.6; }
.food-details { margin: .4rem 0 .8rem; }
.food-details > summary { cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--g-dark); padding: .4rem 0; }
.food-details[open] > summary { margin-bottom: .5rem; }

/* 根拠・準備中の囲み */
.food-notice { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px;
  background: var(--card); font-size: .86rem; color: var(--ink); line-height: 1.75; }
.food-notice--basis { border-left-color: var(--g); }

/* ランキング・用途への導線 */
.food-links-2col { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 768px) { .food-links-2col { grid-template-columns: 1fr 1fr; } }
.food-links-box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-top: 1.25rem; }
.food-links-h { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--g); display: inline-block; }
.food-rank-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.food-rank-group { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; }
.food-rank-group-h { font-size: .92rem; font-weight: 700; color: var(--g-dark); margin: 0 0 .5rem; }
.food-rank-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.food-rank-links li { margin: 0; }
.food-rank-links a { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; padding: .25rem .7rem; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); font-size: .84rem; line-height: 1.3; text-decoration: none; }
.food-rank-links a:hover { border-color: var(--g); color: var(--g-dark); }
.food-rank-links .n { font-size: .76em; color: var(--mute); }
.food-rank-links .gs-soon { font-size: .68rem; }
.food-use-links { margin-top: .6rem; }

/* ランキングの表 */
.food-rank-table { margin-top: 1rem; }
.food-rank-table tbody th { font-weight: 700; white-space: normal; background: var(--card); min-width: 12em; }
.food-rank-table tbody th a { color: var(--ink); font-weight: 700; text-decoration: none; }
.food-rank-table tbody th a:hover { color: var(--g-dark); text-decoration: underline; }
.food-rank-brand { display: block; font-size: .72rem; font-weight: 500; color: var(--mute); }
.food-rank-flavors { display: block; font-size: .74rem; font-weight: 400; color: var(--mute); }
.food-rank-no { font-weight: 800; font-size: 1.05rem; color: var(--g-dark); width: 3em; }
.food-rank-range { display: block; font-size: .72rem; font-weight: 400; color: var(--mute); }