/*
 * BL4 SHiFT コード一覧（[nettoge_bl4_shift]）。
 * 見た目はサイト全体の新デザインのモック（「モックの作成」の会話の site-mock.html、2026-09-23）に合わせる
 * （依頼主「デザインは、いまモックの作成って会話でつくったモックにあわせといて」）:
 * - 基本は白い地・細い線・紙色（--paper）の面の 3 つ。枠線はクリックできる物（ボタン）だけに付ける
 * - 赤は見出しの縦線だけ（本文の h3 がそれ）。青緑はラベルとマウスを乗せたときだけ
 * - 角は 6px（小さな札は 3px）、ボタンは丸い錠剤形
 * - ダークは <html data-nettoge-theme="dark"> で色だけ入れ替える
 * 値はモックと同じ名前の変数を .ntg-bl4-* の中だけで定義する。テーマ側に同名の変数（--paper など）が入れば、そちらが使われる。
 */
.ntg-bl4-note,
.ntg-bl4-wrap {
	--bl4-surface: var(--surface, #fff);
	--bl4-paper: var(--paper, #f6f5f3);
	--bl4-text: var(--text, #1a1714);
	--bl4-sub: var(--sub, #5f5a55);
	--bl4-muted: var(--muted, #8a847d);
	--bl4-teal: var(--teal, #2f7a72);
	--bl4-teal-bg: var(--teal-bg, #e8f2f0);
	--bl4-line: var(--line, #e3e0dc);
	--bl4-line-2: var(--line-2, #d3cec7);
	--bl4-warn: var(--main, #b72305);
	--bl4-r: var(--r, 6px);
	color: var(--bl4-text);
}
html[data-nettoge-theme="dark"] .ntg-bl4-note,
html[data-nettoge-theme="dark"] .ntg-bl4-wrap {
	--bl4-surface: var(--surface, #1f2226);
	--bl4-paper: var(--paper, #22252a);
	--bl4-text: var(--text, #e8e4df);
	--bl4-sub: var(--sub, #b5afa8);
	--bl4-muted: var(--muted, #8d877f);
	--bl4-teal: var(--teal, #6cc2b6);
	--bl4-teal-bg: var(--teal-bg, rgba(108, 194, 182, .14));
	--bl4-line: var(--line, #33363b);
	--bl4-line-2: var(--line-2, #44474d);
	--bl4-warn: var(--main, #d9482b);
}

/* ---------- 冒頭の一文（モックの「確認済み」の箱: 紙色の面・枠線なし・青緑の印） ---------- */
.ntg-bl4-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 2em;
	padding: 12px 16px;
	border-radius: var(--bl4-r);
	background: var(--bl4-paper);
	color: var(--bl4-sub);
	font-size: 14px;
	line-height: 1.75;
}
.ntg-bl4-note__icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	color: var(--bl4-teal);
}
#body_wrap .post_content .ntg-bl4-note .ntg-bl4-note__body p {
	margin: 0 0 .4em;
}
#body_wrap .post_content .ntg-bl4-note .ntg-bl4-note__body p:last-child {
	margin-bottom: 0;
}
.ntg-bl4-note b {
	color: var(--bl4-text);
}
.ntg-bl4-note .ntg-bl4-note__checked {
	font-size: 12px;
	color: var(--bl4-muted);
}

/* ---------- 一覧の頭（件数の札・注記・解除） ---------- */
.ntg-bl4-wrap {
	margin: 0 0 2em;
}
.ntg-bl4__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
}
.ntg-bl4__why {
	display: inline-block;
	padding: 5px 8px;
	border-radius: 3px;
	background: var(--bl4-teal-bg);
	color: var(--bl4-teal);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.ntg-bl4__why.-muted {
	background: transparent;
	border: 1px solid var(--bl4-line);
	color: var(--bl4-muted);
}
.ntg-bl4__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--bl4-muted);
}
.ntg-bl4__icons {
	display: inline-flex;
	gap: 3px;
}
.ntg-bl4__icons img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* ---------- ボタン（モックの .btn / .sb と同じ錠剤形） ---------- */
.ntg-bl4__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--bl4-line);
	border-radius: 18px;
	background: var(--bl4-surface);
	color: var(--bl4-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, color .15s, background-color .15s;
}
.ntg-bl4__btn:hover {
	border-color: var(--bl4-teal);
	color: var(--bl4-teal);
	text-decoration: none; /* a:hover の下線より強く */
}
.ntg-bl4__btn:focus-visible,
.ntg-bl4__expired > summary:focus-visible {
	outline: 2px solid var(--bl4-teal);
	outline-offset: 2px;
}
.ntg-bl4__btn.-ghost {
	margin-left: auto;
	height: 30px;
	padding: 0 12px;
	border-color: var(--bl4-line-2);
	background: transparent;
	color: var(--bl4-sub);
	font-size: 12px;
	font-weight: 400;
}
.ntg-bl4__btn.-primary {
	height: 40px;
	padding: 0 20px;
	border-color: var(--bl4-text);
	background: var(--bl4-text);
	color: var(--bl4-surface);
}
.ntg-bl4__btn.-primary::after {
	content: "↗";
	font-weight: 400;
}
.ntg-bl4__btn.-primary:hover {
	border-color: var(--bl4-teal);
	background: var(--bl4-teal);
	color: #fff;
}
.ntg-bl4__btn.-copy {
	flex: none;
	min-width: 6.5em;
}
.ntg-bl4__btn.-copy.is-done {
	border-color: var(--bl4-teal);
	background: var(--bl4-teal-bg);
	color: var(--bl4-teal);
}

/* 入力ページへのボタンは、長い一覧を読んでいる間も手の届く所に */
#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__enter-wrap {
	position: sticky;
	top: 84px;
	z-index: 5;
	margin: 0 0 12px;
}

/* 本文の p の余白（#body_wrap .post_content p）に勝つ規則は、起点に #body_wrap .post_content を付ける（!important は使わない。2026-10-10） */
/* ---------- コードの札（クリックする物ではないので枠線なし・紙色の面） ---------- */
.ntg-bl4-wrap .ntg-bl4__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* 広告枠（AdSense が幅を決める）に列幅を引っ張られないように */
	gap: 8px;
	margin: 0; /* 本文の箇条書き（ul）の余白と印を消す */
	padding: 0;
	list-style: none;
}
.ntg-bl4-wrap .ntg-bl4__list > li {
	margin: 0;
	list-style: none;
}
.ntg-bl4-wrap .ntg-bl4__list > li::before,
.ntg-bl4-wrap .ntg-bl4__list > li::marker {
	content: none;
	display: none;
}
.ntg-bl4-wrap .ntg-bl4__list > .ntg-bl4__ad {
	min-width: 0;
	max-width: 100%;
	/* コードの札（コピーボタン）と広告の間を空ける。押し間違いの誤クリックを避ける */
	margin: 24px 0;
	padding: 0;
	overflow: hidden;
}
.ntg-bl4__ad-label {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	line-height: 1;
	color: var(--bl4-muted);
	text-align: center;
}
.ntg-bl4-wrap .ntg-bl4__list > .ntg-bl4__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	border-radius: var(--bl4-r);
	background: var(--bl4-paper);
}
.ntg-bl4__main {
	min-width: 0;
}
#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__main p {
	margin: 0;
}
.ntg-bl4__reward {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
.ntg-bl4__reward img {
	flex: none;
	width: 16px;
	height: 16px;
	object-fit: contain;
}
.ntg-bl4__card.is-gift .ntg-bl4__reward::before {
	content: "🎁";
	font-size: 14px;
}
#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__main .ntg-bl4__code {
	margin: 4px 0;
}
#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__code code {
	/* 本文の code（枠・背景・90%。#body_wrap .post_content :not(pre) > code）に勝つよう、起点に #body_wrap .post_content */
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bl4-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	word-break: break-all;
	user-select: all;
}
.ntg-bl4__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--bl4-muted);
}
.ntg-bl4__meta a {
	color: var(--bl4-muted);
	text-decoration: underline;
}
.ntg-bl4__meta a:hover {
	color: var(--bl4-teal);
}
.ntg-bl4__exp.is-urgent {
	color: var(--bl4-warn);
	font-weight: 700;
}
/* コピーした札: 左に青緑の線 */
.ntg-bl4__card.is-copied {
	box-shadow: inset 3px 0 0 var(--bl4-teal);
}
.ntg-bl4__card.is-expired .ntg-bl4__reward,
.ntg-bl4__card.is-expired .ntg-bl4__code code {
	color: var(--bl4-muted);
}
.ntg-bl4__card.is-expired .ntg-bl4__code code {
	text-decoration: line-through;
}

/* ---------- 期限切れの畳み込み（押して開くので、ここだけ枠線あり） ---------- */
.ntg-bl4__expired {
	margin-top: 24px;
}
.ntg-bl4__expired > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--bl4-line);
	border-radius: var(--bl4-r);
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.ntg-bl4__expired > summary::-webkit-details-marker {
	display: none;
}
.ntg-bl4__expired > summary:hover {
	border-color: var(--bl4-teal);
}
.ntg-bl4__toggle {
	margin-left: auto;
	font-size: 12px;
	font-weight: 400;
	color: var(--bl4-muted);
	white-space: nowrap;
}
.ntg-bl4__toggle::after {
	content: "開く ▾";
}
.ntg-bl4__expired[open] .ntg-bl4__toggle::after {
	content: "閉じる ▴";
}
#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__hint {
	margin: 10px 0;
	font-size: 12px;
	color: var(--bl4-muted);
}

.ntg-bl4__error {
	color: #b72305;
}

@media (max-width: 599px) {
	.ntg-bl4-wrap .ntg-bl4__list > .ntg-bl4__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 12px 14px;
	}
	.ntg-bl4-wrap .ntg-bl4__btn.-copy {
		width: 100%;
	}
	.ntg-bl4__btn.-ghost {
		margin-left: 0;
	}
	#body_wrap .post_content .ntg-bl4-wrap .ntg-bl4__enter-wrap {
		top: 64px;
	}
}

/* 見出し「有効なコード」の上を空ける（直前の吹き出しに詰まっていた。依頼主「有効なコードの上つまりすぎ」） */
.post_content .ntg-bl4__heading {
	margin-top: 2.4em;
}