/*
 * Nettoge Thread Res — スレ風のレス（2026-10-06）
 * <div class="ntg-thread">
 *   <div class="ntg-res [is-big|is-blue]">
 *     <div class="ntg-res-h"><span class="ntg-res-no">1</span><span class="ntg-res-name"><img class="ntg-res-icon" …>名無しの黒魔道士</span>
 *       <span class="ntg-res-date">2026/04/25(土) 08:13</span><span class="ntg-res-like">4</span></div>
 *     <div class="ntg-res-body">訳</div>
 *     <div class="ntg-res-src">原文</div>
 *   </div>
 * </div>
 * 賛否の帯: <div class="ntg-vote"><span class="is-p" style="--w:45%">歓迎 45%</span><span class="is-m" style="--w:19%">…</span><span class="is-n" style="--w:35%">…</span></div>
 * 色は本文の字の色から作る（ライト・ダーク・雰囲気版のどれでも溶け込む）。
 */

body :is(.post_content, .entry-content) .ntg-thread {
	margin: 1.5em 0 2em;
	padding: .25em 0;
	border-block: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

body :is(.post_content, .entry-content) .ntg-res {
	padding: .9em 0 .85em;
	line-height: 1.75;
}

body :is(.post_content, .entry-content) .ntg-res + .ntg-res {
	border-top: 1px dashed color-mix(in srgb, currentColor 16%, transparent);
}

/* 名前の行: 番号・名前・ジョブ・日時（掲示板の形） */
body :is(.post_content, .entry-content) .ntg-res-h {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .55em;
	font-size: .78em;
	color: color-mix(in srgb, currentColor 62%, transparent);
}

body :is(.post_content, .entry-content) .ntg-res-no {
	font-weight: 700;
	color: color-mix(in srgb, currentColor 85%, transparent);
	font-variant-numeric: tabular-nums;
}

body :is(.post_content, .entry-content) .ntg-res-name {
	font-weight: 700;
	color: #2f8f46;
}

body :is(.post_content, .entry-content) .ntg-res-job {
	padding: 0 .5em;
	border-radius: 1em;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: color-mix(in srgb, currentColor 90%, transparent);
}

body :is(.post_content, .entry-content) .ntg-res-like::before {
	content: "♥ ";
	color: #e0457b;
}

/* 本文（訳）。まとめサイトのように、強い書き込みは大きく色を付ける */
body :is(.post_content, .entry-content) .ntg-res-body {
	margin: .25em 0 0 .9em;
	font-size: 1em;
}

body :is(.post_content, .entry-content) .ntg-res.is-big .ntg-res-body {
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.5;
	color: #d6303a;
}

body :is(.post_content, .entry-content) .ntg-res.is-blue .ntg-res-body {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.55;
	color: #2b6fd6;
}

/* 原文 */
body :is(.post_content, .entry-content) .ntg-res-src {
	margin: .35em 0 0 .9em;
	padding-left: .7em;
	border-left: 2px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: .76em;
	line-height: 1.6;
	color: color-mix(in srgb, currentColor 58%, transparent);
	overflow-wrap: anywhere;
}

/* 賛否の帯 */
body :is(.post_content, .entry-content) .ntg-vote {
	display: flex;
	width: 100%;
	margin: .6em 0 1.2em;
	border-radius: .5em;
	overflow: hidden;
	font-size: .82em;
	font-weight: 700;
	line-height: 2.3;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

body :is(.post_content, .entry-content) .ntg-vote > span {
	flex: 0 0 var(--w);
	overflow: hidden;
	text-overflow: clip;
}

body :is(.post_content, .entry-content) .ntg-vote > .is-p { background: #2f8f46; }
body :is(.post_content, .entry-content) .ntg-vote > .is-m { background: #a08a2a; }
body :is(.post_content, .entry-content) .ntg-vote > .is-n { background: #c8434b; }

body :is(.post_content, .entry-content) .ntg-vote-label {
	margin: 1em 0 0;
	font-size: .85em;
	font-weight: 700;
}

/* 表のセルに入れる小さい帯（<span class="ntg-vote is-mini">）。2026-10-06 依頼主「ジョブ別も割合を表にいれて」 */
body :is(.post_content, .entry-content) .ntg-vote.is-mini {
	margin: 0;
	min-width: 9em;
	border-radius: .35em;
	font-size: .72em;
	line-height: 2;
}

/* 帯の凡例（<span class="ntg-vote-key is-p">歓迎</span>） */
body :is(.post_content, .entry-content) .ntg-vote-key::before {
	content: "■";
	margin-right: .15em;
}
body :is(.post_content, .entry-content) .ntg-vote-key.is-p::before { color: #2f8f46; }
body :is(.post_content, .entry-content) .ntg-vote-key.is-m::before { color: #a08a2a; }
body :is(.post_content, .entry-content) .ntg-vote-key.is-n::before { color: #c8434b; }

/* 名前の欄のジョブアイコン（<img class="ntg-res-icon">）と、レスの下の「※」の説明（2026-10-06） */
body :is(.post_content, .entry-content) .ntg-res-name {
	display: inline-flex;
	align-items: center;
	gap: .3em;
}
body :is(.post_content, .entry-content) .ntg-res-icon {
	width: 1.9em;
	height: 1.9em;
	margin: 0;
	border-radius: 4px;
	vertical-align: middle;
}
body :is(.post_content, .entry-content) .ntg-res-note {
	margin: .4em 0 0 .9em;
	font-size: .78em;
	line-height: 1.6;
	color: color-mix(in srgb, currentColor 70%, transparent);
}

/* 実況型（2026-10-06・4 版目）: Reddit のレス・配信の進行の帯・スレタイ・YouTube */
body :is(.post_content, .entry-content) .ntg-res.is-reddit .ntg-res-name { color: #e8541e; }
body :is(.post_content, .entry-content) .ntg-res.is-yt .ntg-res-name,
body :is(.post_content, .entry-content) .ntg-res-yt { color: #c4302b; font-weight: 700; text-decoration: none; }
body :is(.post_content, .entry-content) .ntg-res-sub {
	margin-left: .45em;
	padding: 0 .45em;
	border-radius: 1em;
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: color-mix(in srgb, currentColor 75%, transparent);
	font-weight: 400;
	font-size: .92em;
}
body :is(.post_content, .entry-content) .ntg-res-up::before {
	content: "▲ ";
	color: #e8541e;
}
body :is(.post_content, .entry-content) .ntg-res-event {
	margin: .9em 0 .2em;
	padding: .55em .8em;
	border-radius: .4em;
	background: color-mix(in srgb, currentColor 7%, transparent);
	font-size: .88em;
	font-weight: 700;
	line-height: 1.6;
}
body :is(.post_content, .entry-content) .ntg-res-event-t {
	display: inline-block;
	margin-right: .6em;
	padding: 0 .5em;
	border-radius: .3em;
	background: #3a3a3a;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
body :is(.post_content, .entry-content) .ntg-thread-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2em .7em;
	margin: 1.6em 0 .3em;
	padding: .7em .9em;
	border-left: 4px solid #e8541e;
	background: color-mix(in srgb, #e8541e 7%, transparent);
}
body :is(.post_content, .entry-content) .ntg-thread-title .ntg-res-sub { margin-left: 0; font-size: .78em; }
body :is(.post_content, .entry-content) .ntg-thread-title-t {
	flex: 1 0 100%;
	order: -1;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
body :is(.post_content, .entry-content) .ntg-thread-title .ntg-res-up,
body :is(.post_content, .entry-content) .ntg-thread-title-n { font-size: .82em; }