/* c-button-002: 吹き出し付きボタン
 *
 * 構造:
 *   wp:group (.c-button-002)
 *     └── wp:paragraph (.c-button-002__bubble)  ← 吹き出し
 *     └── wp:buttons
 *           └── wp:button (.c-button-001)       ← ボタン本体（001のバリエーション併用可）
 */

.c-button-002 {
  --_bubble-bg: var(--wp--preset--color--primary, #76c576);
  --_bubble-text: var(--wp--preset--color--white, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
}

:is(.c-button-002 *) {
  margin: 0;
}

/* ── 吹き出し ── */

.c-button-002__bubble {
  position: relative;
  background-color: var(--_bubble-bg);
  color: var(--_bubble-text);
  padding: 0.25em 1.2em;
  border-radius: var(--wp--custom--border--radius--sm, 0.25rem);
  font-size: var(--wp--preset--font-size--xs, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 12px;
}

/* 三角形（下向き） */
.c-button-002__bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--_bubble-bg);
}

/* ══════════════════════════════════════════════════
   吹き出しカラー
   ボタン本体の色は c-button-001 のバリエーションで独立制御
   ══════════════════════════════════════════════════ */

/** @element root  @group 吹き出しカラー  @label プライマリ  @order 1 */
.c-button-002--primary {
  --_bubble-bg: var(--wp--preset--color--primary, #76c576);
}

/** @element root  @group 吹き出しカラー  @label セカンダリ  @order 2 */
.c-button-002--secondary {
  --_bubble-bg: var(--wp--preset--color--secondary, #db57a5);
}

/** @element root  @group 吹き出しカラー  @label テキストカラー  @order 3 */
.c-button-002--text-color {
  --_bubble-bg: var(--wp--preset--color--basic-text, #413838);
}

/** @element root  @group 吹き出しカラー  @label グレー  @order 4 */
.c-button-002--gray {
  --_bubble-bg: var(--wp--preset--color--gray-dark, #616161);
}

/** @element root  @group 吹き出しカラー  @label グレー薄  @order 5 */
.c-button-002--gray-light {
  --_bubble-bg: var(--wp--preset--color--gray-lighter, #F5F5F5);
  --_bubble-text: var(--wp--preset--color--basic-text, #413838);
}

/* ── 吹き出し形状 ── */

/** @element root  @group 吹き出し形状  @label 丸型  @order 1 */
.c-button-002--round .c-button-002__bubble {
  border-radius: var(--wp--custom--border--radius--full, 9999px);
}