/* ./css/kpi-birthgrant.css */

/* ラップ */
.birthgrant-wrap {
  display: grid;
  gap: 10px;
}

/* 既存 .kpi-card-list を使う前提（CPIのCSSがある） */
/* 6カードで色が被らないように完全に分離 */
.kpi-card.birth-card {
  --kpi-bg-1: #fff7fb;
  --kpi-bg-2: #fdf0f8;
  --kpi-accent: #f26db5;
  --kpi-accent-soft: rgba(242, 109, 181, 0.14);
}

/* 1. 平均出産費用：ピンク */
.kpi-card.birth-card:not(.is-selfpay):not(.is-gap-within):not(.is-gap-over):not(.is-birthcount):not(.is-birthrate) {
  --kpi-bg-1: #fff7fb;
  --kpi-bg-2: #fdf0f8;
  --kpi-accent: #f26db5;
  --kpi-accent-soft: rgba(242, 109, 181, 0.14);
}

/* 2. 妊婦合計負担：オレンジ */
.kpi-card.birth-card.is-selfpay {
  --kpi-bg-1: #fff8f1;
  --kpi-bg-2: #ffefdf;
  --kpi-accent: #f59e57;
  --kpi-accent-soft: rgba(245, 158, 87, 0.14);
}

/* 3. 出産費用の実態：グリーン */
.kpi-card.birth-card.is-gap-within {
  --kpi-bg-1: #f4fbf7;
  --kpi-bg-2: #eaf8f0;
  --kpi-accent: #39b48c;
  --kpi-accent-soft: rgba(57, 180, 140, 0.14);
}

/* 4. 妊婦合計負担額の実態：ローズ */
.kpi-card.birth-card.is-gap-over {
  --kpi-bg-1: #fff3f5;
  --kpi-bg-2: #ffe9ee;
  --kpi-accent: #e96b86;
  --kpi-accent-soft: rgba(233, 107, 134, 0.14);
}

/* 5. 出生数：ブルー */
.kpi-card.birth-card.is-birthcount {
  --kpi-bg-1: #f3f8ff;
  --kpi-bg-2: #e8f1ff;
  --kpi-accent: #4f8ff7;
  --kpi-accent-soft: rgba(79, 143, 247, 0.14);
}

/* 6. 出生率：パープル */
.kpi-card.birth-card.is-birthrate {
  --kpi-bg-1: #f7f4ff;
  --kpi-bg-2: #efe9ff;
  --kpi-accent: #8b6ff2;
  --kpi-accent-soft: rgba(139, 111, 242, 0.14);
}

/* タイトル行右のチップを少し広く */
.birth-chip {
  max-width: 120px;
  justify-content: center;
}

/* メイン値ラベルを2行でも崩れにくく */
.birth-main-label {
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
  line-height: 1.2;
}

.birth-main-sub {
  font-size: 10px;
  color: #8a93a4;
  font-weight: 700;
  line-height: 1.2;
}

/* 3ヵ年ミニ行 */
.birth-years {
  display: grid;
  gap: 6px;
}

/* 棒グラフなし版（前年 / 前々年） */
.birth-year-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(20,24,34,.04);
  padding: 6px 8px;
}

.birth-year-bar {
  display: none !important;
}

.birth-year-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 800;
}

.birth-year-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--kpi-accent);
  opacity: .85;
}

.birth-year-value {
  font-size: 11px;
  font-weight: 900;
  color: #111827;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 一時金差額の構成比カード内 */
.birth-split {
  display: grid;
  gap: 6px;
}

.birth-split-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
}

.birth-split-label {
  font-size: 10px;
  color: #6b7280;
  font-weight: 700;
  line-height: 1.2;
}

.birth-split-value {
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.birth-split-bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  overflow: hidden;
}

.birth-split-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--kpi-accent);
}

.birth-count-sub {
  margin-top: 2px;
  font-size: 10px;
  color: #8a93a4;
  line-height: 1.2;
}

/* 備考テキスト */
.birthgrant-note {
  margin-top: 6px;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.35;
}

/* meta pills */
.birthgrant-meta {
  display: none;
}

.birthgrant-meta .pill {
  display: none;
}

/* empty */
.birthgrant-empty {
  grid-column: 1 / -1;
  border: 1px dashed #d8dde7;
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.5);
  color: #6b7280;
  font-size: 13px;
}

/* skeleton */
.birth-skeleton {
  min-height: 152px;
}
.birth-skeleton .sk {
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f7 25%, #f7f9fc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: birthShimmer 1.2s ease infinite;
}
.birth-skeleton .sk1 { height: 14px; width: 60%; margin-bottom: 8px; }
.birth-skeleton .sk2 { height: 46px; width: 100%; margin-bottom: 7px; }
.birth-skeleton .sk3 { height: 32px; width: 100%; margin-bottom: 6px; }
.birth-skeleton .sk4 { height: 10px; width: 72%; }

@keyframes birthShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}