/*
  future_population.css — 将来人口×需要寿命 バッジ（商圏 増分 #3・v0.1）
  作成: スパイダー S / 2026-06-21 / 企画§5（ピラミッド隣の将来見通しミニ）
  ★ステージ（live shoken.html 未読込）。ブランド色＝青系（商圏=CF情報プロダクト・緑は使わない・shoken_segment.css と統一階調）。
*/
.shk-fp { margin: 14px 0 4px; }
.shk-fp-hd { font-size: 13px; font-weight: 600; color: #1f5fa8; margin-bottom: 8px; }
.shk-fp-row { display: flex; flex-wrap: wrap; gap: 10px; }
.shk-fp-badge {
  flex: 1 1 180px; display: flex; align-items: center; gap: 9px;
  background: #f3f7fc; border: 1px solid #dbe6f2; border-radius: 10px; padding: 10px 12px;
}
.shk-fp-ico { font-size: 22px; line-height: 1; }
.shk-fp-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shk-fp-t { font-size: 11px; color: #5f6b7a; }
.shk-fp-v { font-size: 18px; font-weight: 700; color: #14233a; }
.shk-fp-sub { font-size: 10.5px; color: #8a93a0; margin-top: 1px; }
.shk-fp-lbl {
  font-size: 11px; font-weight: 600; color: #1f5fa8;
  background: #e3edf8; border-radius: 4px; padding: 0 6px; width: fit-content; margin-top: 2px;
}
.shk-fp-note { font-size: 10.5px; color: #8a93a0; margin: 8px 0 0; line-height: 1.5; }

@media (max-width: 560px) { .shk-fp-badge { flex-basis: 100%; } }