/* NRS Reactions — 기사 하단 감정표현 바
 *
 * 시각 마감: 젬마4(로컬 :8001) 작성 → Claude 감사·수정 후 적용(2026-07-22).
 *  ★수정한 것: 다크모드 방식을 테마 규약([data-theme="dark"]·.dark-mode + OS 설정)에 맞춤.
 *    젬마 원안은 prefers-color-scheme 만 써서 테마의 수동 다크 토글에서 어긋났다.
 *  ★계약 유지: 클래스·DOM 불변. 선택 상태는 .is-on(JS 토글), .nrs-rx__seg 의 width 는
 *    JS 가 인라인으로 갱신하므로 CSS 에서 고정하지 않는다.
 */

/* ── 컨테이너 ── */
.nrs-rx {
	margin: 1.5rem 0;
	padding: 20px;
	background: var(--nrs-color-bg, #fff);
	border: 1px solid var(--nrs-color-border, #e2e4e7);
	border-radius: var(--nrs-box-radius, 3px);
}

.nrs-rx__prompt {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--nrs-color-text, #1e1e1e);
}

.nrs-rx__hint {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--nrs-rx-muted, var(--nrs-color-text, #1e1e1e));
}

/* ── 반응 버튼 ── */
.nrs-rx__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.nrs-rx__btn {
	flex: 1;
	min-width: 64px;
	min-height: 44px; /* 터치 타깃 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 4px;
	background: var(--nrs-color-bg, #fff);
	border: 1px solid var(--nrs-color-border, #e2e4e7);
	border-radius: var(--nrs-box-radius, 3px);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.nrs-rx__btn:hover { background-color: var(--nrs-rx-hover, #f8f9fa); }

.nrs-rx__btn:focus-visible {
	outline: 2px solid var(--nrs-color-primary, #000080);
	outline-offset: 2px;
}

/* 선택 상태 — JS 가 .is-on 토글(aria-pressed 와 동기) */
.nrs-rx__btn.is-on {
	border-color: var(--nrs-color-primary, #000080);
	background-color: var(--nrs-rx-on-bg, #f0f4ff);
	box-shadow: inset 0 1px 3px rgba(0, 0, 80, .1);
}

.nrs-rx__icon  { font-size: 18px; line-height: 1; }
.nrs-rx__label { font-size: 12px; color: var(--nrs-color-text, #1e1e1e); }
.nrs-rx__count { font-size: 11px; color: var(--nrs-rx-muted, var(--nrs-color-text, #1e1e1e)); }

/* ── 비율 막대 (width 는 JS 인라인) ── */
.nrs-rx__bar {
	display: flex;
	height: 6px;
	width: 100%;
	margin-bottom: 12px;
	background-color: var(--nrs-color-border, #e2e4e7);
	border-radius: 3px;
	overflow: hidden;
}

.nrs-rx__seg { height: 100%; transition: width .5s ease; }
.nrs-rx__seg:nth-child(1) { background-color: #2196f3; } /* 좋아요 */
.nrs-rx__seg:nth-child(2) { background-color: #4caf50; } /* 기뻐요 */
.nrs-rx__seg:nth-child(3) { background-color: #9e9e9e; } /* 슬퍼요 */
.nrs-rx__seg:nth-child(4) { background-color: #ff5722; } /* 화나요 */
.nrs-rx__seg:nth-child(5) { background-color: #9c27b0; } /* 응원해요 */

.nrs-rx__total {
	margin: 0;
	font-size: 13px;
	text-align: center;
	color: var(--nrs-color-text, #1e1e1e);
}
.nrs-rx__total-num { font-weight: 700; }

/* ── 모바일 ── */
@media (max-width: 480px) {
	.nrs-rx { padding: 16px; }
	.nrs-rx__row { gap: 4px; }
	.nrs-rx__btn { min-width: calc(20% - 4px); flex: 1 1 auto; }
	.nrs-rx__label { font-size: 11px; }
}

/* ── 다크모드 ──
 * 테마 규약: 수동 토글([data-theme="dark"]·.dark-mode) + OS 설정(단 [data-theme="light"] 제외).
 * 토큰(--nrs-color-*)은 테마가 이미 뒤집으므로, 여기서는 하드코딩 색만 보정한다. */
/* 2026-09-27 ⑥: 흐린 글은 본문 글색(안 A — 옛 #9aa0a6) · 올림 바탕은 공통 팔레트 면(옛 #2a2a2a) · 화면에서만(인쇄는 라이트) */
@media screen {
	[data-theme="dark"] .nrs-rx,
	.dark-mode .nrs-rx {
		--nrs-rx-muted: var(--nrs-color-text);
		--nrs-rx-hover: #1e293b;
		--nrs-rx-on-bg: #1a237e;
	}
}
@media screen and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .nrs-rx {
		--nrs-rx-muted: var(--nrs-color-text);
		--nrs-rx-hover: #1e293b;
		--nrs-rx-on-bg: #1a237e;
	}
}