/*
 * nte-lab の共通トークンと部品。一覧・詳細・トップのすべてがこれを読む。
 *
 * 方針（2026-09-23 の作り直し）: このサイトは「異能者の登録簿」として組む。
 * ゲームの題材（異象があふれる街・ヴェルテハイモー値という測定・光/霊/呪/闇/魂/相 という呪術寄りの語彙）に
 * 合わせて、紙と墨と罫の言葉づかいにする。ネオンのHUD風にはしない。
 *
 * - **派手にするのはキャラの絵だけ。** ほかは箱・影・色地・グラデーションを持たない。
 * - **色は情報。飾りには使わない。** 属性6色は2pxの罫としてだけ出し、主色（紫）は押せる場所にだけ使う。
 * - **書体は2つ。役割で分ける。** 明朝＝ゲーム世界の固有名詞と数値（キャラ名・弧盤名・ステータス）、
 *   ゴシック＝サイト自身の声（説明文・ラベル・UI）。日本語の攻略サイトはほぼ全部ゴシックなので、
 *   キャラ名が明朝というだけで見分けがつく。Webフォントは読まない（モバイルが8割なので CJK の追加読み込みはしない）。
 * - 変数は :root ではなくルートクラスに置く（`.ntl-shortcode` / `.ntl-detail-root`）。
 * - 見出しには何も当てない。SWELL の h2/h3 デザインをそのまま効かせる（ルート AGENTS.md「UI・デザイン共通方針」）。
 * - `.post_content` の打ち消しは2クラス以上のセレクタで書く。`all: unset` を当てたボタンは状態も同じ詳細度で書く。
 */

.ntl-shortcode,
.ntl-detail-root {
	--ntl-main: var(--color_main, #6a3fd1);
	--ntl-surface: #fff;
	--ntl-surface-muted: #f7f5fc;
	--ntl-surface-soft: #efecf8;
	--ntl-border: #e3dff0;
	--ntl-text: #1b1430; /* 墨。主色から引いた紫みの黒 */
	--ntl-muted: #6b6480;

	/* 明朝はシステムのものを使う。游明朝(Win/Mac)・ヒラギノ明朝(Mac/iOS)・Noto Serif JP(Android) で全端末に届く */
	--ntl-display: "Yu Mincho", YuMincho, "游明朝", "游明朝体", "Hiragino Mincho ProN", "Noto Serif JP", serif;

	--ntl-rarity-s: #e8a93a;
	--ntl-rarity-a: #9b6ae0;
	--ntl-rarity-b: #4a8fd6;

	--ntl-el-cosmos: #d8a800;
	--ntl-el-nature: #3d9b76;
	--ntl-el-incantation: #c0457a;
	--ntl-el-chaos: #3d3553;
	--ntl-el-psyche: #4a76d6;
	--ntl-el-lakshana: #c06a1e;

	color: var(--ntl-text);
}

/* ---------- 文字・数字 ---------- */

/* 数値は「読み取り値」として明朝で組む。等幅数字＋わずかなトラッキング */
.ntl-num {
	font-family: var(--ntl-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.ntl-section-desc {
	margin: 0 0 1.2em;
	font-size: 0.9em;
	line-height: 1.9;
	color: var(--ntl-muted);
}

.ntl-note {
	font-size: 0.8em;
	line-height: 1.8;
	color: var(--ntl-muted);
}

.ntl-footer-credit {
	margin-top: 0.5em;
	font-size: 0.7rem;
	opacity: 0.75;
	text-align: center;
}

/* ---------- 属性・レアリティ・チップ ---------- */

/* 属性は漢字1文字＋色の下線。塗りのチップにしない。
   色だけに頼らないので、色の見分けがつかなくても文字で読める。 */
.ntl-el {
	display: inline-block;
	padding-bottom: 1px;
	border-bottom: 2px solid var(--el, currentColor);
	font-family: var(--ntl-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
}

.ntl-el--cosmos { --el: var(--ntl-el-cosmos); }
.ntl-el--nature { --el: var(--ntl-el-nature); }
.ntl-el--incantation { --el: var(--ntl-el-incantation); }
.ntl-el--chaos { --el: var(--ntl-el-chaos); }
.ntl-el--psyche { --el: var(--ntl-el-psyche); }
.ntl-el--lakshana { --el: var(--ntl-el-lakshana); }

/* レアリティは小さな欧文の印。塗らない */
.ntl-rarity {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ntl-muted);
}

.ntl-rarity--s { color: #b07d16; }
.ntl-rarity--a { color: #7a4fc0; }
.ntl-rarity--b { color: #3a72b0; }

.ntl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* 素材名などの並列。角丸は 2px にとどめる（ピルにすると UI 部品に見える） */
.ntl-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--ntl-border);
	border-radius: 2px;
	font-size: 0.78rem;
	line-height: 1.6;
}

/* 「隠し」など、短い注記 */
.ntl-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ntl-muted);
}

/* ---------- 基本情報（登録簿の1行。ラベル左・値右・罫線で区切る） ---------- */

.post_content ul.ntl-facts,
ul.ntl-facts.ntl-facts {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ntl-border);
}

.post_content .ntl-facts__item,
.ntl-facts .ntl-facts__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.45rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	list-style: none;
}

.post_content .ntl-facts__item::before,
.ntl-facts .ntl-facts__item::before {
	content: none;
}

.ntl-facts__label {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--ntl-muted);
}

.ntl-facts__value {
	font-family: var(--ntl-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: right;
}

/* 値の後ろの「ほか3件」。サイトの声なのでゴシックに戻し、途中で折り返さない */
.ntl-facts__more {
	margin-left: 0.3em;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	white-space: nowrap;
}

/* ---------- 表（罫線だけ。ヘッダーは塗らない） ---------- */

.post_content table.ntl-table,
table.ntl-table.ntl-table {
	width: 100%;
	margin: 0 0 1.5em;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.6;
}

.post_content .ntl-table thead th,
.ntl-table.ntl-table thead th {
	padding: 0.2em 0.6em 0.45em;
	border: 0;
	border-bottom: 2px solid var(--ntl-text);
	background: transparent;
	color: var(--ntl-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: left;
}

.post_content .ntl-table tbody th,
.post_content .ntl-table tbody td,
.ntl-table.ntl-table tbody th,
.ntl-table.ntl-table tbody td {
	padding: 0.6em;
	border: 0;
	border-bottom: 1px solid var(--ntl-border);
	background: transparent;
	vertical-align: top;
	word-break: normal;
}

.post_content .ntl-table tbody th[scope="row"],
.ntl-table.ntl-table tbody th[scope="row"] {
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

/* 数値列。見出しも値と同じ右寄せにする */
.ntl-table--num td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.post_content .ntl-table--num thead th + th,
.ntl-table--num.ntl-table--num thead th + th {
	text-align: right;
}

.post_content .ntl-table--num th[scope="row"],
.ntl-table--num.ntl-table--num th[scope="row"] {
	width: 45%;
	font-weight: 400;
	white-space: normal;
}

.ntl-table__scroll {
	margin: 0 0 1.5em;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.ntl-table__scroll > .ntl-table {
	margin-bottom: 0;
}

/* ---------- 横バー ---------- */

.ntl-bar {
	display: block;
	width: 100%;
	height: 0.35rem;
	border-radius: 999px;
	background: var(--ntl-surface-soft);
	overflow: hidden;
}

.ntl-bar__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ntl-main);
}

/* ---------- 図鑑の盤面（カードの箱は持たない） ---------- */

/* 図鑑は肖像を並べた盤面であって、カードの一覧ではない。
   箱・影・色地・大きな角丸を持たせず、絵そのものを並べる。 */
.ntl-icon {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 2px;
	background: var(--ntl-surface-muted);
}

.ntl-icon--empty {
	background: var(--ntl-surface-soft);
}

.post_content ul.ntl-grid,
ul.ntl-grid.ntl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
	gap: 1.4rem 1rem;
	margin: 0 0 1.5em;
	padding: 0;
	list-style: none;
}

.ntl-grid--mini {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.6rem), 1fr));
	gap: 1.1rem 0.8rem;
}

.post_content .ntl-grid__item,
.ntl-grid .ntl-grid__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-grid__item::before,
.ntl-grid .ntl-grid__item::before {
	content: none;
}

.ntl-grid__item[hidden] {
	display: none;
}

.ntl-card,
.post_content a.ntl-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ntl-card__name {
	display: block;
	margin-top: 0.45rem;
	font-family: var(--ntl-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.ntl-card__meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.15rem;
}

/* 唯一の動き。触れたら名前が主色になり、属性の罫がわずかに伸びる */
.ntl-card .ntl-el {
	transition: padding 0.15s;
}

@media (hover: hover) and (pointer: fine) {
	.ntl-card:hover .ntl-card__name {
		color: var(--ntl-main);
	}

	.ntl-card:hover .ntl-el {
		padding-right: 0.5rem;
	}
}

.ntl-card:focus-visible {
	outline: 2px solid var(--ntl-main);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ntl-card .ntl-el {
		transition: none;
	}
}