@charset "utf-8";

/* wr-comment-list 전용 스타일 (외부 CSS 의존 제거) */
.wcmt-widget {
	--wcmt-border: rgba(15, 23, 42, .08);
	--wcmt-muted: #64748b;
	--wcmt-text: #0f172a;
	--wcmt-bg-hover: rgba(79, 70, 229, .06);

	font-size: 13px;
	line-height: 1.45;
	color: var(--wcmt-text);
}

.wcmt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcmt-item {
	border-bottom: 1px solid var(--wcmt-border);
}
.wcmt-item:last-child {
	border-bottom: 0;
}

.wcmt-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 2px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}
.wcmt-link:hover {
	background: var(--wcmt-bg-hover);
}

.wcmt-main {
	min-width: 0;
	flex: 1 1 auto;
}

.wcmt-subject {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.wcmt-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.wcmt-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wcmt-meta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wcmt-muted);
	white-space: nowrap;
}

.wcmt-name {
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wcmt-date {
	font-variant-numeric: tabular-nums;
}

.wcmt-empty {
	padding: 18px 10px;
	text-align: center;
	color: var(--wcmt-muted);
}

/* 작은 화면에서 메타를 아래로 */
@media (max-width: 420px) {
	.wcmt-link {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
		padding: 10px 6px;
	}
	.wcmt-meta {
		gap: 10px;
	}
}