/* ============================================================
   BlockReaction 公開側スタイル（自己完結・外部CDN不使用）
   見出し＋絵文字リアクションボタン群。pill(横並び・コンパクト) / big(縦積み・大きめ) の2スタイル
   ============================================================ */
.bk-reaction{ max-width:100%; box-sizing:border-box; }
.bk-reaction .bkrx-title{ font-weight:900; font-size:15px; color:#242822; margin:0 0 10px; overflow-wrap:break-word; }
.bk-reaction .bkrx-list{ display:flex; flex-wrap:wrap; gap:10px; }

.bk-reaction .bkrx-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:2px solid #e5e7e4; background:#fff; border-radius:999px;
  padding:10px 16px; min-height:44px; box-sizing:border-box;
  font-size:14px; font-weight:800; color:#3f4a3c; line-height:1.3;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.bk-reaction .bkrx-btn:hover{ border-color:#7fb069; background:#f6faf4; }
.bk-reaction .bkrx-btn:focus-visible{ outline:2px solid #4f8f3b; outline-offset:2px; }
.bk-reaction .bkrx-btn:active{ transform:scale(.95); }
.bk-reaction .bkrx-btn .bkrx-emoji{ font-size:20px; line-height:1; }
.bk-reaction .bkrx-btn .bkrx-label{ white-space:nowrap; }
.bk-reaction .bkrx-btn .bkrx-count{
  font-size:12.5px; font-weight:900; color:#4f8f3b; background:#eef7ea;
  border-radius:999px; padding:2px 9px; min-width:22px; text-align:center; line-height:1.6;
}

/* 反応済み（1人1回制限時） */
.bk-reaction .bkrx-btn.bkrx-reacted{ border-color:#4f8f3b; background:#eef7ea; }
.bk-reaction .bkrx-btn.bkrx-reacted .bkrx-count{ background:#4f8f3b; color:#fff; }
.bk-reaction .bkrx-btn[disabled]{ cursor:default; opacity:.78; }
.bk-reaction .bkrx-btn[disabled]:hover{ border-color:#e5e7e4; background:#fff; }
.bk-reaction .bkrx-btn[disabled].bkrx-reacted:hover{ border-color:#4f8f3b; background:#eef7ea; }

/* 押した瞬間のカウント数字ポップ演出（囁く程度のモーション） */
.bk-reaction .bkrx-btn.bkrx-bump .bkrx-count{ animation:bkrx-pop .32s ease; }
@keyframes bkrx-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.28); } 100%{ transform:scale(1); } }

/* --- big スタイル：縦積み・大きめカード --- */
.bk-reaction.bkrx-style-big .bkrx-list{ gap:12px; }
.bk-reaction.bkrx-style-big .bkrx-btn{
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border-radius:16px; padding:16px 14px; min-width:86px;
}
.bk-reaction.bkrx-style-big .bkrx-btn .bkrx-emoji{ font-size:30px; }
.bk-reaction.bkrx-style-big .bkrx-btn .bkrx-label{ font-size:12px; white-space:normal; text-align:center; }
.bk-reaction.bkrx-style-big .bkrx-btn .bkrx-count{ font-size:13px; }

.bk-reaction .bkrx-hint{ border:2px dashed #c7ced4; border-radius:12px; background:#f7f8fa; padding:18px 16px; text-align:center; color:#5f6b76; font-size:13px; font-weight:700; line-height:1.8; }

@media (max-width:480px){
  .bk-reaction .bkrx-btn{ padding:9px 13px; font-size:13px; gap:7px; }
  .bk-reaction .bkrx-btn .bkrx-emoji{ font-size:18px; }
  .bk-reaction.bkrx-style-big .bkrx-btn{ min-width:74px; padding:13px 10px; }
  .bk-reaction.bkrx-style-big .bkrx-btn .bkrx-emoji{ font-size:26px; }
}

@media (prefers-reduced-motion: reduce){
  .bk-reaction .bkrx-btn.bkrx-bump .bkrx-count{ animation:none; }
  .bk-reaction .bkrx-btn{ transition:none; }
}