/*
 * 게시글 투표 버튼(공감·비공감·BLIND·정치글로) 리뉴얼 — 평면 만화풍 아이콘(images/vote/*.svg) + 둥근 카드
 * _read.html 에서만 불러옴. 버튼 HTML·동작·툴팁은 그대로, 아이콘 글꼴 자리에 SVG 를 넣고 모양만 바꾼다.
 * 범위: .read_vote 의 투표 버튼 4종(a.document_vote_up/down, a.document_report, a.document_move_category) 만
 */
.read_vote:has(> a.document_vote_up, > a.document_vote_down) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	padding: 4px 0 !important;
}
.read_vote > a.document_vote_up,
.read_vote > a.document_vote_down,
.read_vote > a.document_report,
.read_vote > a.document_move_category {
	position: relative;
	display: inline-flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-sizing: border-box;
	min-width: 96px;
	margin: 0 !important;
	padding: 12px 14px 10px !important;
	border: 1px solid #e3e9ef !important;
	border-radius: 16px;
	background: #fff;
	color: #1e2b45 !important;
	text-decoration: none !important;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.read_vote > a.document_vote_up:hover,
.read_vote > a.document_vote_down:hover,
.read_vote > a.document_report:hover,
.read_vote > a.document_move_category:hover {
	transform: translateY(-2px);
	border-color: #b9dfe6 !important;
	background: #f7fcfd;
	box-shadow: 0 6px 14px rgba(30, 43, 69, .08);
}
.read_vote > a > br { display: none; }

/* 아이콘 + 숫자 한 줄 */
.read_vote > a > i.fa {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit !important;
	font-style: normal;
	line-height: 1;
}
.read_vote > a > i.fa::before {
	content: "" !important;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: center / contain no-repeat;
	transition: transform .2s ease;
}
.read_vote > a:hover > i.fa::before { transform: rotate(-8deg) scale(1.08); }
.read_vote > a > i.fa-thumbs-o-up::before { background-image: url('../images/vote/vote_up.svg'); }
.read_vote > a > i.fa-thumbs-o-down::before { background-image: url('../images/vote/vote_down.svg'); }
.read_vote > a > i.fa-frown-o::before { background-image: url('../images/vote/vote_blind.svg'); }
.read_vote > a > i.fa-handshake-o::before { background-image: url('../images/vote/vote_move.svg'); }
.read_vote > a > i.fa .num {
	margin: 0 !important;
	color: #1e2b45;
	font-size: 16px !important;
	font-weight: 800;
	font-family: 'Nanum Gothic', sans-serif;
}
.read_vote > a .num2 {
	margin: 0 !important;
	color: #6b7a90;
	font-size: 12.5px !important;
	font-weight: 700;
	font-family: 'Nanum Gothic', sans-serif;
}

@media (max-width: 768px) {
	.read_vote:has(> a.document_vote_up, > a.document_vote_down) { gap: 6px; padding: 4px 12px !important; }
	.read_vote > a.document_vote_up,
	.read_vote > a.document_vote_down,
	.read_vote > a.document_report,
	.read_vote > a.document_move_category { flex: 1 1 0; min-width: 0; padding: 10px 4px 8px !important; border-radius: 14px; }
	.read_vote > a > i.fa::before { width: 26px; height: 26px; }
	.read_vote > a > i.fa .num { font-size: 15px !important; }
	.read_vote > a .num2 { font-size: 12px !important; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.read_vote > a, .read_vote > a > i.fa::before { transition: none; }
}