/* wr-list hot card - compact v3
 * 문구와 배지는 그대로 유지하고 카드 전체 높이만 축소
 */
.wr-hot-list {
	--wr-accent: #2f7cff;
	--wr-accent-soft: rgba(47, 124, 255, .07);
	--wr-danger: #ff4d4f;
	--wr-danger-soft: rgba(255, 77, 79, .07);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wr-hot-list .wr-hot-item {
	position: relative;
	margin: 0 7px 5px;
	padding: 7px 10px;
	border: 1px solid #e8edf3;
	border-radius: 9px;
	background: #fff;
	transition: border-color .15s ease, background-color .15s ease;
}

.wr-hot-list .wr-hot-item:hover {
	border-color: #cfd8e6;
	background: #fbfcfe;
}

.wr-hot-list .wr-hot-item.is-first {
	padding: 7px 10px 7px 8px;
	border-left: 3px solid var(--wr-accent);
	background: linear-gradient(90deg, var(--wr-accent-soft), #fff 55%);
}

.wr-hot-list .wr-hot-item.is-damage.is-first {
	border-left-color: var(--wr-danger);
	background: linear-gradient(90deg, var(--wr-danger-soft), #fff 55%);
}

.wr-hot-list .wr-hot-head {
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.wr-hot-list .wr-rank {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 6px;
	background: #eef3fa;
	color: #637083;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.wr-hot-list .is-first .wr-rank {
	background: var(--wr-accent);
	color: #fff;
}

.wr-hot-list .is-damage.is-first .wr-rank {
	background: var(--wr-danger);
}

.wr-hot-list .wr-hot-main {
	min-width: 0;
	flex: 1 1 auto;
}

/* 지금 급상승 / 최근 주의 사례 / NEW / 댓글 폭발 문구 유지 */
.wr-hot-list .wr-signal-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	min-height: 16px;
	margin-bottom: 3px;
}

.wr-hot-list .wr-signal,
.wr-hot-list .wr-new,
.wr-hot-list .wr-hot-comment {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-height: 16px;
	padding: 2px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.15;
}

.wr-hot-list .wr-signal {
	background: var(--wr-accent);
	color: #fff;
}

.wr-hot-list .is-damage .wr-signal {
	background: var(--wr-danger);
}

.wr-hot-list .wr-new {
	background: #effaf4;
	color: #159957;
}

.wr-hot-list .wr-hot-comment {
	background: #fff3e8;
	color: #e56a00;
}

.wr-hot-list .wr-subject-row {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	height: 20px;
}

.wr-hot-list .wr-subject {
	min-width: 0;
	flex: 1 1 auto;
	color: #18212f;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wr-hot-list .is-first .wr-subject {
	font-size: 15px;
	font-weight: 800;
}

.wr-hot-list .wr-subject:hover {
	color: var(--wr-accent);
}

.wr-hot-list .is-damage .wr-subject:hover {
	color: var(--wr-danger);
}

.wr-hot-list .wr-comment {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #f1f5fb;
	color: #3478f6;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

.wr-hot-list .is-damage .wr-comment {
	background: #fff0f0;
	color: #ef4444;
}

.wr-hot-list .wr-meta {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	height: 15px;
	margin-top: 3px;
	color: #7c8798;
	font-size: 10px;
	line-height: 15px;
	white-space: nowrap;
	overflow: hidden;
}

.wr-hot-list .wr-board {
	flex: 0 1 auto;
	min-width: 0;
	display: inline-block;
	padding: 0 4px;
	border: 1px solid #dfe6ef;
	border-radius: 4px;
	background: #fff;
	color: #5f6b7c;
	line-height: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wr-hot-list .is-damage .wr-board {
	border-color: #ffd0d0;
	color: #d84343;
}

.wr-hot-list .wr-time {
	flex: 0 0 auto;
	margin-left: auto;
}

.wr-hot-list .wr-arrow {
	flex: 0 0 auto;
	font-size: 10px;
	color: #9aa5b5;
}

.wr-hot-list .wr-empty {
	padding: 24px 12px;
	text-align: center;
	color: #8b95a5;
}

@media (max-width: 575.98px) {
	.wr-hot-list .wr-hot-item,
	.wr-hot-list .wr-hot-item.is-first {
		margin: 0 4px 3px;
		padding: 5px 7px;
		border-radius: 7px;
	}

	.wr-hot-list .wr-hot-item.is-first {
		padding-left: 6px;
		border-left-width: 2px;
	}

	.wr-hot-list .wr-hot-head {
		gap: 5px;
	}

	.wr-hot-list .wr-rank {
		flex-basis: 18px;
		width: 18px;
		height: 18px;
		margin-top: 0;
		border-radius: 5px;
		font-size: 9px;
	}

	.wr-hot-list .wr-signal-row {
		gap: 3px;
		min-height: 14px;
		margin-bottom: 2px;
	}

	.wr-hot-list .wr-signal,
	.wr-hot-list .wr-new,
	.wr-hot-list .wr-hot-comment {
		min-height: 14px;
		padding: 1px 5px;
		font-size: 9px;
	}

	.wr-hot-list .wr-subject-row {
		gap: 4px;
		height: 18px;
	}

	.wr-hot-list .wr-subject,
	.wr-hot-list .is-first .wr-subject {
		font-size: 13px;
		line-height: 18px;
	}

	.wr-hot-list .wr-comment {
		height: 16px;
		padding: 0 4px;
		font-size: 9px;
	}

	.wr-hot-list .wr-meta {
		gap: 4px;
		height: 13px;
		margin-top: 2px;
		font-size: 9px;
		line-height: 13px;
	}

	.wr-hot-list .wr-board {
		line-height: 11px;
	}

	.wr-hot-list .wr-arrow {
		display: none;
	}
}