/* Nettoge Core — クエストカード（nettoge/quest-cards）。2026-11-01。
 * 11-01 に作り直し（依頼主「縦長過ぎる　横長にして縦にならべてほしい　デザインこだわりすぎだろｗ　もう少しサイトデザインに寄せて」「ライト・ダーク対応」）。
 * 形: 横長の札を縦に 1 列で並べる。札＝左に依頼する者の絵（札の高さいっぱい）、右に二つ名・名前・クエスト名 → 欄（話しかける相手・始める場所・報酬）
 *     → 解説 → ボタン。札の幅が 560px 未満なら絵を上（16:9）に積む（コンテナクエリ）。
 * 色・角丸はテーマのトークン（tokens-nettoge.css の --ntg2-*。ダークはテーマが html[data-nettoge-theme="dark"] で差し替える）。無いとき（エディタなど）は右の値。
 * !important は使わない。テーマの本文の土台（#body_wrap .post_content の段落の余白・画像の高さ auto）とは同じ強さで書く。
 * 左だけの太い線の枠は使わない（依頼主が嫌う）。ホバーはマウスのある端末だけ。 */
.ntg-qc {
	--qc-accent: var(--ntg2-accent, #b72305);
	--qc-fg: var(--ntg2-text, #1a1714);
	--qc-sub: var(--ntg2-sub, #5f5a55);
	--qc-muted: var(--ntg2-muted, #8a847d);
	--qc-surface: var(--ntg2-surface, #fff);
	--qc-paper: var(--ntg2-paper, #f6f5f3);
	--qc-paper2: var(--ntg2-paper-2, #edeae6);
	--qc-line: var(--ntg2-line, #e3e0dc);
	--qc-line2: var(--ntg2-line-2, #d3cec7);
	--qc-radius: var(--ntg2-radius, 6px);
	--qc-radius-sm: var(--ntg2-radius-sm, 4px);
	container-type: inline-size;
	container-name: ntg-qc;
	margin: 1.6em 0 2em;
}
.ntg-qc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.ntg-qc__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	overflow: hidden;
	color: var(--qc-fg);
	background: var(--qc-surface);
	border: 1px solid var(--qc-line);
	border-radius: var(--qc-radius);
}
@container ntg-qc (min-width: 560px) {
	.ntg-qc__card { grid-template-columns: minmax(200px, 34%) minmax(0, 1fr); }
}

/* 絵。横に並ぶときは札の高さいっぱい、積むときは 16:9 */
.ntg-qc__frame {
	position: relative;
	min-height: 0;
	aspect-ratio: 16 / 9;
	background: var(--qc-paper2);
}
@container ntg-qc (min-width: 560px) {
	.ntg-qc__frame { aspect-ratio: auto; min-height: 220px; border-right: 1px solid var(--qc-line); }
}
.ntg-qc .ntg-qc__img,
#body_wrap .post_content .ntg-qc .ntg-qc__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.ntg-qc__img--none { background: var(--qc-paper2); }

/* 右の欄 */
.ntg-qc__plate {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 14px 18px 16px;
}
#body_wrap .post_content .ntg-qc p,
#body_wrap .post_content .ntg-qc dl,
#body_wrap .post_content .ntg-qc dd {
	margin: 0;
}
.ntg-qc__title { display: flex; flex-direction: column; gap: 2px; }
.ntg-qc__epithet { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--qc-accent); }
.ntg-qc__name { font-size: 21px; font-weight: 800; line-height: 1.35; color: var(--qc-fg); }
.ntg-qc__quest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.ntg-qc__label {
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--qc-sub);
	background: var(--qc-paper);
	border: 1px solid var(--qc-line);
	border-radius: var(--qc-radius-sm);
}
.ntg-qc__qname { font-size: 14px; font-weight: 700; color: var(--qc-fg); }

.ntg-qc__facts {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--qc-line);
}
.ntg-qc__fact {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
	padding: 7px 0;
	border-bottom: 1px solid var(--qc-line);
}
.ntg-qc__fact dt { font-size: 12px; font-weight: 700; color: var(--qc-sub); }
.ntg-qc__fact dd { font-size: 14px; line-height: 1.6; color: var(--qc-fg); overflow-wrap: anywhere; }
.ntg-qc__fact dd b { font-weight: 700; }
.ntg-qc .ntg-qc__ico,
#body_wrap .post_content .ntg-qc .ntg-qc__ico {
	display: inline-block;
	width: 22px;
	aspect-ratio: 1;
	margin: 0 5px 0 0;
	vertical-align: -5px;
}
.ntg-qc__text { font-size: 14px; line-height: 1.8; color: var(--qc-sub); }

/* ボタン。テーマのリンクの色・下線は付かない（class のある a） */
#body_wrap .post_content .ntg-qc a.ntg-qc__go,
.ntg-qc a.ntg-qc__go {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	gap: 4px;
	margin-top: auto;
	padding: 7px 12px 7px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--qc-accent);
	text-decoration: none;
	background: var(--qc-paper);
	border: 1px solid var(--qc-line2);
	border-radius: var(--qc-radius-sm);
	transition: background-color .2s, border-color .2s;
}
@media (hover: hover) {
	#body_wrap .post_content .ntg-qc a.ntg-qc__go:hover,
	.ntg-qc a.ntg-qc__go:hover { background: var(--qc-paper2); border-color: var(--qc-accent); }
}
@media (prefers-reduced-motion: reduce) {
	.ntg-qc a.ntg-qc__go { transition: none; }
}
/* 狭いとき（スマホ）は欄の項目名を上・中身を下に積む */
@container ntg-qc (max-width: 420px) {
	.ntg-qc__fact { grid-template-columns: minmax(0, 1fr); gap: 1px; }
	.ntg-qc__plate { padding: 12px 14px 14px; }
}

/* media=emblem: 名前の左に正方形の紋章（小さな正方形の絵を引き伸ばさない）。札は絵の列を持たない */
@container ntg-qc (min-width: 560px) {
	.ntg-qc--emblem .ntg-qc__card { grid-template-columns: minmax(0, 1fr); }
}
.ntg-qc__head { display: flex; align-items: center; gap: 16px; }
.ntg-qc .ntg-qc__emb,
#body_wrap .post_content .ntg-qc .ntg-qc__emb {
	flex: none;
	display: block;
	width: 112px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0;
	border-radius: var(--qc-radius-sm);
	box-shadow: 0 0 0 1px var(--qc-line);
}
.ntg-qc--emblem .ntg-qc__plate { padding: 16px 20px 18px; gap: 12px; }
@container ntg-qc (max-width: 420px) {
	.ntg-qc .ntg-qc__emb, #body_wrap .post_content .ntg-qc .ntg-qc__emb { width: 84px; }
	.ntg-qc__head { gap: 12px; }
	.ntg-qc--emblem .ntg-qc__plate { padding: 12px 14px 14px; }
}