/* 게시판 이모티콘 반응(2026-10-03) — reactions.js. 알약 · ＋😊 단추 · 고르기 창 · 누른 사람 말풍선 */
.rx,.rx-add-c{--rx-bd:#e6dccb;--rx-bg:#fff;--rx-tx:#4a4439;--rx-on:#e0661a;--rx-onbg:#fff4ec;--rx-hv:#faf5ec}
.rx{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.rx-post{margin-top:20px}
.rx-post + .cm-post-act{margin-top:12px}
.rx-c{margin:2px 0 6px}
.rx-pill,.rx-add{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:99px;border:1.5px solid var(--rx-bd);background:var(--rx-bg);
  color:var(--rx-tx);font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;transition:background-color .15s,border-color .15s,transform .15s}
.rx-pill .rx-e{font-size:15px;line-height:1}
.rx-pill b{font-weight:800;font-variant-numeric:tabular-nums}
.rx-pill:hover,.rx-add:hover{background:var(--rx-hv)}
.rx-pill.on{border-color:var(--rx-on);background:var(--rx-onbg);color:var(--rx-on)}
.rx-pill:focus-visible,.rx-add:focus-visible,.rx-pick button:focus-visible{outline:2px solid var(--rx-on);outline-offset:2px}
.rx-add{padding:0 9px;color:#8a7f6e;gap:1px}
.rx-add .rx-plus{font-size:12px;font-weight:800}
.rx-add span:last-child{font-size:15px;filter:grayscale(.35)}
.rx-add:hover span:last-child{filter:none}
/* 댓글 버튼 줄 안의 ＋😊 — 다른 글자 단추와 높이를 맞추되 누르기 쉬운 크기 */
.cm-c-act .rx-add-c,.cm-page .cm-c-act button.rx-add-c{height:24px;padding:0 8px;margin:0 6px;border:1px solid var(--rx-bd);background:var(--rx-bg);border-radius:99px;font-size:12px;line-height:1}
.cm-page .cm-c-act .rx-add-c+button{border-left:0}   /* 커뮤니티 댓글 줄 구분선(button+button)과 알약 테두리가 겹치지 않게 */
.rx-pop{animation:rxPop .32s ease-out}
@keyframes rxPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

.rx-pick{position:absolute;z-index:60;padding:8px;border-radius:16px;background:#fff;border:1px solid #e6dccb;box-shadow:0 10px 30px rgba(31,28,24,.18);max-width:calc(100vw - 16px);box-sizing:border-box}
.rx-pick .rx-grid{display:grid;grid-template-columns:repeat(8,54px);gap:4px}
.rx-pick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;border:1.5px solid transparent;border-radius:12px;background:none;
  font:inherit;cursor:pointer;color:#6b6152;touch-action:manipulation}
.rx-pick button .rx-e{font-size:24px;line-height:1;transition:transform .12s}
.rx-pick button small{font-size:10.5px;font-weight:700;white-space:nowrap;letter-spacing:-.03em}
.rx-pick button:hover{background:#faf5ec}.rx-pick button:hover .rx-e{transform:scale(1.15)}
.rx-pick button.on{border-color:#e0661a;background:#fff4ec;color:#e0661a}
.rx-tip{position:absolute;z-index:61;max-width:min(320px,calc(100vw - 16px));padding:8px 11px;border-radius:10px;background:#1f1c18;color:#fff;font-size:12.5px;line-height:1.5;
  box-shadow:0 6px 18px rgba(0,0,0,.2);pointer-events:none;overflow-wrap:anywhere;box-sizing:border-box}
.rx-tip b{margin-right:4px}
@media (max-width:620px){
  .rx-pill,.rx-add{height:34px;padding:0 11px}
  .cm-c-act .rx-add-c,.cm-page .cm-c-act button.rx-add-c{height:28px;padding:0 9px}
  .rx-pick .rx-grid{grid-template-columns:repeat(4,60px);gap:6px}
  .rx-pick button{height:60px}
  .rx-pick button .rx-e{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.rx-pill,.rx-add,.rx-pick button .rx-e{transition:none}.rx-pop{animation:none}}

/* 다크 */
[data-theme="dark"] .rx,[data-theme="dark"] .rx-add-c{--rx-bd:#3a4239;--rx-bg:var(--nbl-surface2,#212721);--rx-tx:var(--nbl-text,#e9ede7);--rx-on:#ff8a3d;--rx-onbg:rgba(255,138,61,.14);--rx-hv:var(--nbl-surface3,#2a312a)}
[data-theme="dark"] .rx-add{color:var(--nbl-sub,#a4aca2)}
[data-theme="dark"] .rx-pick{background:var(--nbl-surface2,#212721);border-color:#3a4239;box-shadow:0 10px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .rx-pick button{color:var(--nbl-sub,#a4aca2)}
[data-theme="dark"] .rx-pick button:hover{background:var(--nbl-surface3,#2a312a)}
[data-theme="dark"] .rx-pick button.on{border-color:#ff8a3d;background:rgba(255,138,61,.14);color:#ff8a3d}
[data-theme="dark"] .rx-tip{background:#e9ede7;color:#0f1311}