/*
 * 外部のデータ源（バージョン・Steam・動画・引き換えコード・トップの要約）の表示。common.css の上に載せる。
 * 決まりは common.css の冒頭と同じ: 箱・影・色地・グラデーションを持たない。主色は押せる場所だけ。
 * 固有名詞と数値は明朝（--ntl-display）、サイトの説明はゴシック。
 */

/* ---------- 共通: リストの打ち消し ---------- */

.post_content ul.ntl-updates,
ul.ntl-updates.ntl-updates,
.post_content ul.ntl-videos,
ul.ntl-videos.ntl-videos,
.post_content ul.ntl-codes,
ul.ntl-codes.ntl-codes {
	margin: 0 0 0.8em;
	padding: 0;
	list-style: none;
}

.post_content .ntl-updates__item,
.ntl-updates .ntl-updates__item,
.post_content .ntl-videos__item,
.ntl-videos .ntl-videos__item,
.post_content .ntl-codes__item,
.ntl-codes .ntl-codes__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-updates__item::before,
.ntl-updates .ntl-updates__item::before,
.post_content .ntl-videos__item::before,
.ntl-videos .ntl-videos__item::before,
.post_content .ntl-codes__item::before,
.ntl-codes .ntl-codes__item::before {
	content: none;
}

/* ---------- バージョン ---------- */

.ntl-version {
	margin: 0 0 1.5em;
	padding-top: 0.6rem;
	border-top: 2px solid var(--ntl-text);
}

.ntl-version__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.9rem;
	margin: 0 0 0.6rem;
}

.ntl-version__num {
	font-size: 1.6rem;
	line-height: 1.3;
}

.ntl-version__date {
	font-size: 0.8rem;
	color: var(--ntl-muted);
	font-variant-numeric: tabular-nums;
}

.ntl-version__notes {
	font-size: 0.92em;
	line-height: 1.9;
}

.ntl-version-history {
	margin: 0 0 1.5em;
	border-top: 1px solid var(--ntl-border);
}

.ntl-version-history__item {
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-version-history__item > summary {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.6rem 0.1rem;
	cursor: pointer;
	color: var(--ntl-main);
}

.ntl-version-history__item > .ntl-version__notes {
	padding: 0 0.1rem 0.9rem;
}

/* ---------- 読み取り値（Steam） ---------- */

.ntl-readouts {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	margin: 0 0 1.2em;
	border-top: 1px solid var(--ntl-border);
}

.ntl-readouts__item {
	padding: 0.6rem 0.8rem 0.7rem 0;
	border-bottom: 1px solid var(--ntl-border);
}

.post_content .ntl-readouts__label,
.ntl-readouts .ntl-readouts__label {
	margin: 0 0 0.15rem;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--ntl-muted);
}

.post_content .ntl-readouts__value,
.ntl-readouts .ntl-readouts__value {
	margin: 0;
	line-height: 1.35;
}

.ntl-readouts__value .ntl-num {
	display: block;
	font-size: 1.45rem;
}

.ntl-readouts__value small {
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

/* ---------- グラフ ---------- */

.ntl-chart-wrap {
	margin: 0 0 1em;
}

/* 左に縦軸の数字、下に日付の幅をあけて、その内側に SVG を敷く */
.ntl-chart-plot {
	position: relative;
	height: 200px;
	margin: 0.6rem 0 1.6rem 2.8rem;
	font-size: 11px;
	line-height: 1;
	color: var(--ntl-muted);
	font-variant-numeric: tabular-nums;
}

.ntl-chart {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ntl-chart__grid {
	stroke: var(--ntl-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.ntl-chart__tick {
	stroke: var(--ntl-muted);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.ntl-chart__line {
	fill: none;
	stroke: var(--ntl-text);
	stroke-width: 1.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ntl-chart__y {
	position: absolute;
	right: calc(100% + 6px);
	transform: translateY(-50%);
	white-space: nowrap;
}

.ntl-chart__x {
	position: absolute;
	top: calc(100% + 6px);
	transform: translateX(-50%);
	white-space: nowrap;
}

/* ---------- 動画 ---------- */

.post_content ul.ntl-videos,
ul.ntl-videos.ntl-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1.2rem 1rem;
}

.ntl-videos__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	color: inherit;
	text-decoration: none;
}

.ntl-videos__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 2px;
}

.ntl-videos__title {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.55;
	color: var(--ntl-main);
}

.ntl-videos__link:hover .ntl-videos__title {
	text-decoration: underline;
}

.ntl-videos__date {
	font-size: 0.75rem;
	color: var(--ntl-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- 引き換えコード ---------- */

.post_content ul.ntl-codes,
ul.ntl-codes.ntl-codes {
	border-top: 2px solid var(--ntl-text);
}

.post_content .ntl-codes__item,
.ntl-codes .ntl-codes__item {
	padding: 0.8rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-codes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
}

.post_content code.ntl-codes__code,
code.ntl-codes__code.ntl-codes__code {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ntl-text);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	word-break: break-all;
}

.post_content button.ntl-codes__copy,
button.ntl-codes__copy.ntl-codes__copy {
	all: unset;
	box-sizing: border-box;
	padding: 0.15rem 0.7rem;
	border: 1px solid var(--ntl-main);
	border-radius: 2px;
	color: var(--ntl-main);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
}

.post_content button.ntl-codes__copy:hover,
button.ntl-codes__copy.ntl-codes__copy:hover,
.post_content button.ntl-codes__copy[data-copied],
button.ntl-codes__copy.ntl-codes__copy[data-copied] {
	background: var(--ntl-main);
	color: #fff;
}

.post_content button.ntl-codes__copy:focus-visible,
button.ntl-codes__copy.ntl-codes__copy:focus-visible {
	outline: 2px solid var(--ntl-main);
	outline-offset: 2px;
}

.ntl-codes__new {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ntl-text);
	border-bottom: 2px solid var(--ntl-rarity-s);
}

.post_content .ntl-codes__rewards,
.ntl-codes .ntl-codes__rewards {
	margin: 0.35rem 0 0;
	font-size: 0.88rem;
	line-height: 1.7;
}

.post_content .ntl-codes__period,
.ntl-codes .ntl-codes__period {
	margin: 0.1rem 0 0;
	font-size: 0.75rem;
	color: var(--ntl-muted);
}

.ntl-codes-expired {
	margin: 0.8em 0 1em;
}

.ntl-codes-expired > summary {
	padding: 0.4rem 0;
	color: var(--ntl-main);
	cursor: pointer;
}

.ntl-codes-expired .ntl-table {
	margin-top: 0.5em;
}

/* ---------- トップの要約（登録簿の行） ---------- */

.post_content ul.ntl-updates,
ul.ntl-updates.ntl-updates {
	border-top: 1px solid var(--ntl-border);
	margin-bottom: 1.2em;
}

.post_content .ntl-updates__item,
.ntl-updates .ntl-updates__item {
	border-bottom: 1px solid var(--ntl-border);
}

.ntl-updates__link {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0.1rem 0.8rem;
	padding: 0.6rem 0.1rem;
	color: inherit;
	text-decoration: none;
}

.ntl-updates__label {
	grid-row: span 2;
	font-size: 0.75rem;
	color: var(--ntl-muted);
}

.ntl-updates__value {
	font-size: 1.05rem;
	line-height: 1.45;
}

.ntl-updates__value--text {
	font-size: 0.92rem;
	font-weight: 600;
}

a.ntl-updates__link .ntl-updates__value {
	color: var(--ntl-main);
}

a.ntl-updates__link:hover .ntl-updates__value {
	text-decoration: underline;
}

.ntl-updates__sub {
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.ntl-updates-root {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.ntl-updates__link {
		grid-template-columns: minmax(0, 1fr);
	}

	.ntl-updates__label {
		grid-row: auto;
	}
}

/* ---------- ガチャ予定（国服の告知 → 日本版の見込み） ---------- */

.ntl-gs-wave {
	margin: 0 0 1.6em;
}

.post_content .ntl-gs-wave__head,
.ntl-gs-wave .ntl-gs-wave__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 1rem;
	margin: 0;
	padding: 0 0 0.4rem;
	border-bottom: 2px solid var(--ntl-text);
	font-size: 0.8rem;
	color: var(--ntl-muted);
}

.ntl-gs-wave__ver {
	font-size: 1.2rem;
	color: var(--ntl-text);
}

.ntl-gs-wave__jp {
	color: var(--ntl-text);
	font-weight: 700;
}

.post_content ul.ntl-gs,
ul.ntl-gs.ntl-gs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-gs__item,
.ntl-gs .ntl-gs__item {
	display: flex;
	gap: 0.8rem;
	margin: 0;
	padding: 0.75rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	list-style: none;
}

.post_content .ntl-gs__item::before,
.ntl-gs .ntl-gs__item::before {
	content: none;
}

.ntl-gs__icons {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.ntl-gs__icons img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 2px;
	object-fit: cover;
}

.ntl-gs__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ntl-gs__kind {
	font-size: 0.72rem;
	color: var(--ntl-muted);
}

.ntl-gs__name {
	font-family: var(--ntl-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.45;
}

.ntl-gs__sub {
	font-size: 0.8rem;
	line-height: 1.75;
	color: var(--ntl-muted);
}

.ntl-gs__sub strong {
	color: var(--ntl-text);
}

.ntl-gs__cn {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--ntl-muted);
}

.ntl-gs-jp__name {
	font-weight: 600;
}

/* ---------- 図鑑の追加分（贈り物・モジュール・魚・乗り物） ---------- */

/* レア度の色は下線だけ（属性の印と同じ書き方） */
.ntl-q {
	display: inline-block;
	padding: 0 0.1em;
	border-bottom: 2px solid var(--ntl-q, var(--ntl-border));
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
}

.ntl-q--orange { --ntl-q: var(--ntl-rarity-s); }
.ntl-q--purple { --ntl-q: var(--ntl-rarity-a); }
.ntl-q--blue { --ntl-q: var(--ntl-rarity-b); }
.ntl-q--green { --ntl-q: #58a55c; }

/* 贈り物: キャラ1人＝1行（左に名前、右に贈り物） */
.post_content ul.ntl-gifts,
ul.ntl-gifts.ntl-gifts,
.post_content ul.ntl-gifts__list,
ul.ntl-gifts__list.ntl-gifts__list,
.post_content ul.ntl-sets,
ul.ntl-sets.ntl-sets,
.post_content ul.ntl-rows,
ul.ntl-rows.ntl-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .ntl-gifts__char,
.ntl-gifts .ntl-gifts__char,
.post_content .ntl-gifts__item,
.ntl-gifts .ntl-gifts__item,
.post_content .ntl-sets__item,
.ntl-sets .ntl-sets__item,
.post_content .ntl-rows__item,
.ntl-rows .ntl-rows__item {
	margin: 0;
	list-style: none;
}

.post_content .ntl-gifts__char::before,
.ntl-gifts .ntl-gifts__char::before,
.post_content .ntl-gifts__item::before,
.ntl-gifts .ntl-gifts__item::before,
.post_content .ntl-sets__item::before,
.ntl-sets .ntl-sets__item::before,
.post_content .ntl-rows__item::before,
.ntl-rows .ntl-rows__item::before {
	content: none;
}

.ntl-gifts-root {
	container-type: inline-size;
}

.post_content ul.ntl-gifts,
ul.ntl-gifts.ntl-gifts {
	border-top: 2px solid var(--ntl-text);
}

.post_content .ntl-gifts__char,
.ntl-gifts .ntl-gifts__char {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.9rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
	scroll-margin-top: 80px;
}

.ntl-gifts__who {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
}

.ntl-gifts__who .ntl-icon {
	width: 44px;
	height: 44px;
	border-radius: 2px;
}

.ntl-gifts__name {
	font-family: var(--ntl-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ntl-main);
}

.post_content ul.ntl-gifts__list,
ul.ntl-gifts__list.ntl-gifts__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0.35rem 1rem;
}

.post_content .ntl-gifts__item,
.ntl-gifts .ntl-gifts__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ntl-gifts__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.ntl-gifts__gift {
	flex: 1 1 auto;
	min-width: 0;
}

.ntl-gifts__value {
	flex: 0 0 auto;
	text-align: right;
}

.ntl-gifts__value small {
	display: block;
	font-size: 0.65rem;
	color: var(--ntl-muted);
}

@container (min-width: 640px) {
	.post_content .ntl-gifts__char,
	.ntl-gifts .ntl-gifts__char {
		grid-template-columns: 11rem minmax(0, 1fr);
		align-items: start;
	}
}

/* モジュールのセット効果 */
.post_content ul.ntl-sets,
ul.ntl-sets.ntl-sets {
	border-top: 2px solid var(--ntl-text);
}

.post_content .ntl-sets__item,
.ntl-sets .ntl-sets__item {
	display: flex;
	gap: 0.8rem;
	padding: 0.9rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
}

/* 白い線画なので暗い面に載せる */
.ntl-sets__icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 6px;
	border-radius: 2px;
	background: var(--ntl-text);
	object-fit: contain;
}

.ntl-sets__body {
	min-width: 0;
}

.post_content .ntl-sets__name,
.ntl-sets .ntl-sets__name {
	margin: 0 0 0.3rem;
	font-family: var(--ntl-display);
	font-size: 1.1rem;
	font-weight: 600;
}

.post_content .ntl-sets__effects,
.ntl-sets .ntl-sets__effects {
	margin: 0;
}

.ntl-sets__row {
	display: grid;
	grid-template-columns: 4.2rem minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.15rem 0;
	font-size: 0.88rem;
	line-height: 1.75;
}

.post_content .ntl-sets__row dt,
.post_content .ntl-sets__row dd,
.ntl-sets__row.ntl-sets__row dt,
.ntl-sets__row.ntl-sets__row dd {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-weight: 400;
}

.ntl-sets__row dt {
	color: var(--ntl-muted);
}

/* 魚・乗り物の行（絞り込みは list.js） */
.post_content ul.ntl-rows,
ul.ntl-rows.ntl-rows {
	border-top: 2px solid var(--ntl-text);
}

.post_content .ntl-rows__item,
.ntl-rows .ntl-rows__item {
	display: flex;
	gap: 0.8rem;
	padding: 0.8rem 0.1rem;
	border-bottom: 1px solid var(--ntl-border);
}

.post_content .ntl-rows__item[hidden],
.ntl-rows .ntl-rows__item[hidden] {
	display: none;
}

.ntl-rows__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.ntl-rows__body {
	min-width: 0;
}

.post_content .ntl-rows__name,
.ntl-rows .ntl-rows__name {
	margin: 0;
	font-family: var(--ntl-display);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.45;
}

.post_content .ntl-rows__meta,
.ntl-rows .ntl-rows__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.7rem;
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: var(--ntl-muted);
}

.post_content .ntl-rows__desc,
.ntl-rows .ntl-rows__desc {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	line-height: 1.75;
}

/* ---------- ガチャ履歴の分析 ---------- */

.ntl-gh__drop {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 1rem;
	padding: 1.2rem 1rem;
	border: 1px dashed var(--ntl-main);
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
}

.ntl-gh__drop[data-over] {
	border-style: solid;
	background: var(--ntl-surface-muted);
}

.ntl-gh__drop input[type="file"] {
	margin: 0 auto 0.3rem;
	max-width: 100%;
	font-size: 0.85rem;
}

.ntl-gh__drop-title {
	font-weight: 700;
	color: var(--ntl-main);
}

.ntl-gh__drop-note {
	font-size: 0.75rem;
	color: var(--ntl-muted);
}

.post_content .ntl-gh__error,
.ntl-gh .ntl-gh__error {
	margin: 0 0 1rem;
	padding-left: 0.6rem;
	border-left: 3px solid #b3261e;
	font-size: 0.85rem;
}

.ntl-gh__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ntl-display);
	font-weight: 600;
}

.ntl-gh__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 2px;
}

.ntl-gh__time {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 0.85em;
}