/* 図鑑の一覧カード (idx-grid / idx-card) — 案A: 商品ページとまったく同じ格子方式
   2026-07-26 BOSS 承認「商品と同じぐらいの大きさに」

   これまで: display:flex + .idx-card{width:150px} の**固定幅**だったため、
     画面が広くなるほど右に空きができ、カードだけ小さいままだった
     (実測: スマホ 390px で右に 60px、430px で 100px、768px で 110px の空き)。
   これから: 商品ページと同じ repeat(auto-fill,minmax(158px,1fr)) の格子。
     余った幅をカードで山分けするので、どの画面幅でも右の空きが 0 になる。

   ここ 1 枚を直せば、リンクしている全ページに反映されます。 */

.idx-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(158px,100%),1fr));  /* 親が 158px より狭い古いページでも溢れないように */
  gap:10px;
  margin:10px 2px 22px;
  /* 古いページには枠が 2px に潰れるものがある (有茎草 五十音 は行・睡蓮の一覧)。
     親の幅いっぱいを明示して、どのページでも同じ幅で並ぶようにする。 */
  width:100%;
  box-sizing:border-box;
}
.idx-group{
  font-size:1.02em;color:#1b5e20;border-left:5px solid #2e7d32;
  padding:3px 0 3px 9px;margin:20px 2px 8px;
}
/* 格子の中にはカード以外 (見出しの文字や <p>) が紛れ込んでいるページがある。
   そのままだと「これ以上縮められない幅」が枠を押し広げ、横にはみ出す
   (実測: 有茎草 五十音 は行で 146px、睡蓮の一覧で 29px)。
   中身を必ず縮められるようにして、枠からはみ出させない。 */
.idx-grid > *{min-width:0;max-width:100%;overflow-wrap:anywhere}
/* カードとカードの間に「完売」などの文字や写真が挟まっているページがある。
   格子ではそれも 1 マスを占めるため、カードが 1 行 1 枚に落ちてしまう
   (実測: ディスカスの一覧など 42 ページ)。
   カード以外は 1 行まるごと使わせて、カードは詰めて並ぶようにする。 */
.idx-grid > *:not(.idx-card):not(.idx-cell){grid-column:1 / -1}
/* 1 マス = 1 商品 の入れ物 (カード + 「完売」等の状態表示) */
.idx-cell{display:block;min-width:0}
.idx-card{display:block;text-decoration:none;color:#233;min-width:0}
.idx-card img{
  width:100%;aspect-ratio:1;height:auto;object-fit:cover;
  border-radius:6px;background:#eef3ee;display:block;
}
.idx-card .noimg{
  width:100%;aspect-ratio:1;border-radius:6px;background:#eef3ee;
  display:flex;align-items:center;justify-content:center;color:#9ab09a;font-size:.8em;
}
/* 文字の行数をそろえてカードの高さを均一にする (2026-07-26 BOSS 承認 案1)。
   これまでは名前の長い品種だけカードが背伸びし、格子は行内で一番高いカードに
   合わせるため、隣に大きな空白ができていた
   (実測: クリプトのページで 77%、水草あ行で 24% のカードが凸凹。高さ 215〜741px)。
   学名 1 行 + 和名 2 行に固定し、あふれた分は「…」に。全文はリンク先にある。 */
/* 学名の欄。★欄ぜんたいを斜体にしない (2026-07-29 BOSS 指示)。
   斜体にしてよいのは属名・種小名だけで、sp. / cf. / var. / 産地の from 〜 /
   命名者 / 品種名は普通の字にするのが国際的な決まり (FishBase・POWO の実物で確認)。
   → 斜体は下の .idx-sci i にだけ効かせ、学名部分を <i> で囲んである。 */
.idx-card .idx-sci{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
  font-family:Georgia,'Times New Roman',serif;font-style:normal;
  color:#2a5c2a;font-size:.86em;margin-top:5px;line-height:1.3;overflow-wrap:anywhere;
  min-height:1.3em;
}
.idx-card .idx-sci i{font-style:italic}
.idx-card .idx-wa{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  color:#222;font-size:.9em;line-height:1.3;overflow-wrap:anywhere;
  min-height:2.6em;
}
.idx-card:hover .idx-wa{color:#1b5e20}
.idx-card:hover img{outline:2px solid #2e7d32}
.idx-nolink{opacity:.72}