/* SHK Signals — 리액션 버튼(카드·리더), 피드 디자인 토큰 상속 (기획서 §22.4)
 * 카드: 원문(↗) 버튼과 같은 호버 액션 패턴 — 커버 우측에 세로 스택(메타·댓글수와 비겹침). */
.shk-rx {
	display: flex;
	gap: 6px;
	align-items: center;
}
.shk-rx--card {
	position: absolute;
	top: 46px;
	right: 10px;
	z-index: 2;
	flex-direction: column;
	gap: 5px;
	/* visibility 페어 — opacity:0만으로는 비가시 상태에서도 클릭을 받아
	   터치 지원 데스크톱에서 오탭으로 리액션이 기록됨(리뷰 확정). */
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility 0s .15s;
}
.shk-card:hover .shk-rx--card,
.shk-card:focus-within .shk-rx--card {
	opacity: 1;
	visibility: visible;
	transition: opacity .15s ease, visibility 0s;
}
/* 터치 기기 — 하이브리드(터치스크린 노트북, any-pointer) 포함 상시 표시 */
@media (hover: none), (any-pointer: coarse) {
	.shk-rx--card {
		opacity: 1;
		visibility: visible;
	}
}
.shk-rx--reader {
	margin: 14px 0 4px;
}
.shk-rx__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-width: 30px;
	border: 1px solid var(--shk-border, #E5E7EB);
	background: var(--shk-surface, #fff);
	color: var(--shk-text-2, #52525B);
	font: 600 0.72rem/1 var(--shk-font, system-ui, sans-serif);
	padding: 5px 7px;
	border-radius: var(--shk-r-full, 9999px);
	box-shadow: var(--shk-sh-1, 0 1px 2px rgba(0, 0, 0, .06));
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, transform .1s ease;
}
.shk-rx__btn:hover {
	color: var(--shk-text, #18181B);
	border-color: var(--shk-text-3, #9CA3AF);
}
.shk-rx__btn:active {
	transform: scale(.92);
}
.shk-rx__btn.is-on[data-rx="like"] {
	color: #16a34a;
	border-color: #16a34a;
	background: color-mix(in srgb, #16a34a 12%, var(--shk-surface, #fff));
}
.shk-rx__btn.is-on[data-rx="dislike"] {
	color: #dc2626;
	border-color: #dc2626;
	background: color-mix(in srgb, #dc2626 12%, var(--shk-surface, #fff));
}
.shk-rx.is-busy .shk-rx__btn {
	opacity: .55;
	pointer-events: none;
}
.shk-rx__n:empty {
	display: none;
}

/* 리액션 아이콘 — 하트/깨진 하트 (§22.4) */
.shk-rx__ic {
	display: block;
	flex: 0 0 auto;
}
.shk-rx__heart {
	fill: transparent;
	transition: fill .18s ease;
}
.shk-rx__btn.is-on .shk-rx__heart {
	fill: currentColor;
}
/* 깨진 금 — 활성(채움) 시 표면색 녹아웃으로 반전 */
.shk-rx__crack {
	transition: stroke .18s ease;
}
.shk-rx__btn.is-on .shk-rx__crack {
	stroke: var(--shk-surface, #fff);
}
html.shk-dark .shk-rx__btn.is-on .shk-rx__crack {
	stroke: #18181B;
}
.shk-rx__btn.is-on[data-rx="like"] .shk-rx__ic {
	animation: shk-rx-beat .45s ease;
}
.shk-rx__btn.is-on[data-rx="dislike"] .shk-rx__ic {
	animation: shk-rx-break .45s ease;
}
@keyframes shk-rx-beat {
	0% { transform: scale(1); }
	30% { transform: scale(1.3); }
	60% { transform: scale(.92); }
	100% { transform: scale(1); }
}
@keyframes shk-rx-break {
	0%, 100% { transform: translateX(0) rotate(0); }
	25% { transform: translateX(-1.2px) rotate(-4deg); }
	55% { transform: translateX(1.2px) rotate(3deg); }
	80% { transform: translateX(-.6px) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.shk-rx__btn.is-on .shk-rx__ic {
		animation: none;
	}
}

/* 리더(단일뷰): reader.css 토큰 영역 밖일 수 있어 기본값 보정 */
.shk-rx--reader .shk-rx__btn {
	font-size: .85rem;
	padding: 8px 14px;
}
.shk-rx--reader .shk-rx__ic {
	width: 17px;
	height: 17px;
}

/* 다크 모드 보정(html.shk-dark — 토큰 미상속 컨텍스트 대비) */
html.shk-dark .shk-rx__btn {
	background: #18181B;
	border-color: #2A2A2E;
	color: #A1A1AA;
}
html.shk-dark .shk-rx__btn:hover {
	color: #F4F4F5;
}

/* 활성 색이 호버 색을 항상 이기도록(:hover 특이도 보정 — 라이브 검증에서 발견) */
.shk-rx__btn.is-on[data-rx="like"]:hover,
html.shk-dark .shk-rx__btn.is-on[data-rx="like"]:hover,
html.shk-dark .shk-rx__btn.is-on[data-rx="like"] {
	color: #16a34a;
	border-color: #16a34a;
}
.shk-rx__btn.is-on[data-rx="dislike"]:hover,
html.shk-dark .shk-rx__btn.is-on[data-rx="dislike"]:hover,
html.shk-dark .shk-rx__btn.is-on[data-rx="dislike"] {
	color: #dc2626;
	border-color: #dc2626;
}
html.shk-dark .shk-rx__btn.is-on[data-rx="like"] {
	background: color-mix(in srgb, #16a34a 16%, #18181B);
}
html.shk-dark .shk-rx__btn.is-on[data-rx="dislike"] {
	background: color-mix(in srgb, #dc2626 16%, #18181B);
}