/* onweb_reaction v1.0.0 - 댓글 이모지 리액션 */
.owr { --owr-accent: #ef4b4b; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; min-height: 28px; }
.owr_chip, .owr_add { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid #e9ecef; border-radius: 14px; background: #fff; font: inherit; font-size: 13px; color: #495057; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.owr_chip .e { font-size: 15px; line-height: 1; }
.owr_chip .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.owr_chip:hover { background: #f8f9fa; border-color: #dee2e6; }
.owr_chip.is_mine { border-color: color-mix(in srgb, var(--owr-accent) 45%, #fff); background: color-mix(in srgb, var(--owr-accent) 8%, #fff); color: var(--owr-accent); }
.owr_chip.pop { animation: owrPop .28s ease; }
@keyframes owrPop { 40% { transform: scale(1.15); } }
.owr_add { width: 34px; padding: 0; justify-content: center; color: #adb5bd; border-color: #f1f3f5; background: #fafbfc; }
.owr_add:hover { color: #495057; border-color: #dee2e6; background: #fff; }
.owr_add svg { width: 18px; height: 18px; }

/* PC(마우스 기기)에서는 댓글에 마우스를 올렸을 때만 [+] 보이기 (자리는 그대로 두어 줄이 출렁이지 않게) */
@media (hover: hover) and (pointer: fine) {
	.owr_hover .owr_add { opacity: 0; transition: opacity .15s; }
	article:hover .owr_hover .owr_add, .owr_hover:hover .owr_add, .owr_hover .owr_add:focus-visible, .owr_hover.is_open .owr_add { opacity: 1; }
}

/* 작성자 하트 배지 */
.owr_author { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 3px; border-radius: 12px; background: #fff1f1; color: var(--owr-accent); font-size: 12px; font-weight: 700; }
.owr_author .av { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #20c997; color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.owr_author .av::after { content: "\2665"; position: absolute; right: -5px; bottom: -4px; font-size: 10px; color: var(--owr-accent); text-shadow: 0 0 2px #fff, 0 0 2px #fff; }

/* 고르기 말풍선 */
.owr_pick { position: absolute; left: 0; bottom: 36px; z-index: 20; display: flex; gap: 2px; padding: 6px; border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.16); transform-origin: left bottom; animation: owrIn .16s ease; }
@keyframes owrIn { from { opacity: 0; transform: scale(.85) translateY(4px); } }
.owr_pick button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.owr_pick button:hover { transform: scale(1.22); background: #f8f9fa; }
.owr_pick button.is_mine { background: color-mix(in srgb, var(--owr-accent) 12%, #fff); }

/* 누가 눌렀는지 */
.owr_who { position: absolute; z-index: 21; bottom: 34px; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: #212529; color: #fff; font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.owr_who::after { content: ""; position: absolute; left: 14px; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #212529; }

.owr_toast { position: fixed; left: 50%; bottom: 24px; z-index: 99999; transform: translateX(-50%); padding: 10px 16px; border-radius: 8px; background: #212529; color: #fff; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.owr_toast.on { opacity: 1; }