/* components.css — ボタン/カード/CTA/パンくず */

/* CTA（大きく・診断導線） */
.popura-cta{
  display:inline-block;
  background:var(--moss); color:#fff;
  padding:16px 32px;                 /* CLAUDE.md: 16px 32px以上 */
  border-radius:var(--radius);
  font-weight:700; font-size:1.05rem;
  box-shadow:var(--shadow);
  transition:background var(--transition), transform var(--transition);
}
.popura-cta:hover{ background:var(--forest); color:#fff; transform:translateY(-1px); }

/* カード */
.popura-card{
  background:var(--bg-card);
  border:1px solid var(--bg-ruled);
  border-radius:var(--radius-lg);
  padding:var(--space-3);
  box-shadow:var(--shadow);
}
.popura-card__title{ color:var(--forest); font-size:1.1rem; margin-bottom:var(--space-1); }

/* カードグリッド */
.popura-grid{ display:grid; gap:var(--space-3); grid-template-columns:1fr; }
@media (min-width:768px){
  .popura-grid--2{ grid-template-columns:repeat(2,1fr); }
  .popura-grid--3{ grid-template-columns:repeat(3,1fr); }
}

/* パンくず */
.popura-breadcrumb{ font-size:.85rem; color:var(--stone); padding:var(--space-2) 0; }
.popura-breadcrumb a{ color:var(--ink-mid); }

/* バッジ（資産クラス等） */
.popura-badge{
  display:inline-block; font-size:.75rem;
  background:var(--sage-pale); color:var(--forest);
  padding:2px 10px; border-radius:999px;
}