/*
 * NEO BBS（ショートコード [neo_bbs]）
 *
 * 黒・白・グレー基調. スマホ基準で、PC 用の指定は @media (min-width: 768px) に置く.
 * 発光・グラデーション・強い影は使わない. 角丸は 4px まで.
 * テーマに依存しないよう、色・余白・入力欄はすべて .neo-bbs の中で指定する.
 */

.neo-bbs {
	--neo-bbs-bg: #080808;
	--neo-bbs-card: #111111;
	--neo-bbs-reply: #0d0d0d;
	--neo-bbs-field: #0d0d0d;
	--neo-bbs-border: #2c2c2c;
	--neo-bbs-border-strong: #4a4a4a;
	--neo-bbs-text: #f2f2f2;
	--neo-bbs-muted: #929292;
	--neo-bbs-new: #c0504d;
	--neo-bbs-error: #7a3a3a;
	--neo-bbs-avatar: #262626;
	--neo-bbs-male: #6da9df;
	--neo-bbs-female: #df7eae;
	--neo-bbs-other: #a68bd4;
	--neo-bbs-radius: 4px;

	color: var(--neo-bbs-text);
	font-size: 0.9375rem;
	line-height: 1.75;
	text-align: left;
}

.neo-bbs *,
.neo-bbs *::before,
.neo-bbs *::after {
	box-sizing: border-box;
}

.neo-bbs p {
	margin: 0;
}

/* アンカーで戻ったとき、固定ヘッダーに隠れにくいように少し上に余白を取る. */
.neo-bbs,
.neo-bbs__compose,
.neo-bbs-thread,
.neo-bbs-reply {
	scroll-margin-top: 5rem;
}

.neo-bbs :focus-visible {
	outline: 1px solid var(--neo-bbs-text);
	outline-offset: 2px;
}

.neo-bbs__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- ボタン（黒背景 + 白の細い枠 + 白文字） ---------- */

.neo-bbs summary {
	list-style: none;
}

.neo-bbs summary::-webkit-details-marker {
	display: none;
}

.neo-bbs .neo-bbs__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--neo-bbs-text);
	border-radius: var(--neo-bbs-radius);
	background-color: #000000;
	box-shadow: none;
	color: var(--neo-bbs-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}

.neo-bbs .neo-bbs__button:hover {
	background-color: #1c1c1c;
	color: var(--neo-bbs-text);
}

.neo-bbs .neo-bbs__button--small {
	min-height: 2.25rem;
	padding: 0.375rem 1rem;
	border-color: var(--neo-bbs-border-strong);
	font-size: 0.8125rem;
}

.neo-bbs .neo-bbs__button--secondary {
	border-color: var(--neo-bbs-border-strong);
}

/* 「＋ 新規スレッド」（運営だけ）: 指で押しやすい高さ. */
.neo-bbs .neo-bbs__button--new {
	min-height: 3rem;
	padding-inline: 1.75rem;
}

.neo-bbs details[open] > summary.neo-bbs__button {
	border-color: var(--neo-bbs-muted);
	color: var(--neo-bbs-muted);
}

/* ---------- お知らせ ---------- */

.neo-bbs .neo-bbs__notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--neo-bbs-border-strong);
	border-radius: var(--neo-bbs-radius);
	background-color: var(--neo-bbs-card);
	font-size: 0.875rem;
}

.neo-bbs .neo-bbs__notice.is-error {
	border-color: var(--neo-bbs-error);
}

.neo-bbs-thread .neo-bbs__notice {
	margin: 1rem 0 0;
}

/* ---------- 「投稿する」 ---------- */

.neo-bbs__compose {
	margin: 0 0 1.5rem;
}

.neo-bbs__empty {
	padding: 2rem 1rem;
	border: 1px solid var(--neo-bbs-border);
	border-radius: var(--neo-bbs-radius);
	color: var(--neo-bbs-muted);
	text-align: center;
}

/* ---------- 親投稿 ---------- */

.neo-bbs__threads {
	display: grid;
	gap: 1rem;
}

.neo-bbs-thread {
	padding: 1rem;
	border: 1px solid var(--neo-bbs-border);
	border-radius: var(--neo-bbs-radius);
	background-color: var(--neo-bbs-card);
}

/* アバター | 性別記号 名前 / NEW 日時 (No.) 削除 → タイトル → 本文. */
.neo-bbs-entry {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: 0.75rem;
	row-gap: 0.625rem;
	align-items: center;
}

.neo-bbs-entry__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border: 1px solid var(--neo-bbs-border-strong);
	border-radius: 50%;
	background-color: var(--neo-bbs-avatar);
	color: var(--neo-bbs-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.neo-bbs-entry__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0.25rem;
	object-fit: contain;
}

/* 一般の投稿者がアップロードしたアイコン画像: 余白なしで丸く切り抜く（運営のロゴは下の指定のまま）. */
.neo-bbs-entry__avatar.is-photo img {
	padding: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* 運営: サイトロゴは黒地、ロゴがないときの「N」は白地に黒文字. */
.neo-bbs-entry.is-staff .neo-bbs-entry__avatar {
	border-color: var(--neo-bbs-text);
	background-color: var(--neo-bbs-text);
	color: var(--neo-bbs-bg);
	font-family: inherit;
	letter-spacing: 0;
}

.neo-bbs-entry.is-staff .neo-bbs-entry__avatar.has-image {
	background-color: #000000;
}

/* 削除フォームを、名前・日時の下に重ねて開くための基準位置. */
.neo-bbs-entry__head {
	position: relative;
	min-width: 0;
}

.neo-bbs .neo-bbs-entry__author {
	font-size: 0.9375rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.neo-bbs-entry__name {
	font-weight: 700;
}

.neo-bbs-author__symbol {
	margin-right: 0.25rem;
	font-weight: 700;
}

/*
 * 性別の色（本人がフォームで選んだ値だけ. 運営・性別なしの投稿には付かない）.
 * 性別記号と名前を同じ色にする（本文には色を付けない）. 枠の左端とアバターの枠にも同系色を細く付ける.
 */
.neo-bbs .neo-bbs-author--male,
.neo-bbs .neo-bbs-form__choice--male {
	color: var(--neo-bbs-male);
}

.neo-bbs .neo-bbs-author--female,
.neo-bbs .neo-bbs-form__choice--female {
	color: var(--neo-bbs-female);
}

.neo-bbs .neo-bbs-author--other,
.neo-bbs .neo-bbs-form__choice--other {
	color: var(--neo-bbs-other);
}

.neo-bbs-entry--male .neo-bbs-entry__avatar {
	border-color: var(--neo-bbs-male);
}

.neo-bbs-entry--female .neo-bbs-entry__avatar {
	border-color: var(--neo-bbs-female);
}

.neo-bbs-entry--other .neo-bbs-entry__avatar {
	border-color: var(--neo-bbs-other);
}

.neo-bbs .neo-bbs-thread.neo-bbs-thread--male,
.neo-bbs .neo-bbs-reply.neo-bbs-reply--male {
	border-left: 2px solid var(--neo-bbs-male);
}

.neo-bbs .neo-bbs-thread.neo-bbs-thread--female,
.neo-bbs .neo-bbs-reply.neo-bbs-reply--female {
	border-left: 2px solid var(--neo-bbs-female);
}

.neo-bbs .neo-bbs-thread.neo-bbs-thread--other,
.neo-bbs .neo-bbs-reply.neo-bbs-reply--other {
	border-left: 2px solid var(--neo-bbs-other);
}

.neo-bbs .neo-bbs-entry__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin-top: 0.125rem;
	color: var(--neo-bbs-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.neo-bbs-entry__new {
	color: var(--neo-bbs-new);
	font-weight: 700;
	letter-spacing: 0.06em;
}

/*
 * 運営のスレッドのタイトル. 固定ページ本文の h2 の装飾（テーマの body.page:not(.home) .entry-body h2 ... = 詳細度 0,3,2）を
 * 受けないよう、詳細度 0,4,0 で余白・線・文字サイズを指定する（!important は使わない）.
 */
.neo-bbs .neo-bbs-thread .neo-bbs-entry .neo-bbs-entry__title {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--neo-bbs-text);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.neo-bbs .neo-bbs-thread .neo-bbs-entry .neo-bbs-entry__title::before,
.neo-bbs .neo-bbs-thread .neo-bbs-entry .neo-bbs-entry__title::after {
	content: none;
	display: none;
}

.neo-bbs-entry__body {
	grid-column: 1 / -1;
	overflow-wrap: anywhere;
	word-break: normal;
}

/*
 * 親スレッドの本文（管理画面で入力した HTML）: 段落・リスト・画像の間は控えめに 0.75em.
 * 「メディアを追加」の画像は枠・影・角丸なしで、カードからはみ出さないようにする.
 * 画像・キャプション付きの画像は中央に置く（配置 class に関係なく回り込みにしない）.
 */
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body {
	min-width: 0;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body > * {
	margin-top: 0;
	margin-bottom: 0.75em;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body > :last-child {
	margin-bottom: 0;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body ul,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body ol {
	padding-left: 1.5em;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body figure,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .wp-caption {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* WordPress の配置 class（alignleft など）に関係なく、回り込みにせず中央に置く. */
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .alignnone,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .alignleft,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .alignright,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .aligncenter {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body figcaption,
.neo-bbs .neo-bbs-entry--thread .neo-bbs-entry__body .wp-caption-text {
	margin-top: 0.375em;
	color: var(--neo-bbs-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

/*
 * 親スレッドの画像（アイキャッチ画像. 設定がある場合だけ）: タイトルの直後・本文の上に1枚. 枠・影・リンクなし.
 * タイトルとの間は、行の間隔（row-gap 0.625rem）+ 0.125rem = 0.75rem. 本文との間は row-gap の 0.625rem.
 * PC・スマホとも、画像の枠をカード幅の 80% にして中央に置く（イベント一覧のスマホ表示の画像と同じ幅の比率）.
 * 画像は枠の幅まで表示し、元の画像より小さい枠では縮小する. 元の画像が枠より小さい場合は拡大せず中央に置く. 縦横比はそのまま.
 */
.neo-bbs-entry__media {
	grid-column: 1 / -1;
	width: 80%;
	min-width: 0;
	margin-top: 0.125rem;
	margin-right: auto;
	margin-left: auto;
}

.neo-bbs-entry__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

/* ---------- 返信 ---------- */

.neo-bbs .neo-bbs-replies {
	display: grid;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.neo-bbs .neo-bbs-replies > li {
	margin: 0;
	padding: 0;
}

.neo-bbs .neo-bbs-reply {
	padding: 0.875rem;
	border: 1px solid var(--neo-bbs-border);
	border-radius: var(--neo-bbs-radius);
	background-color: var(--neo-bbs-reply);
}

.neo-bbs-entry--reply {
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: 0.625rem;
	row-gap: 0.5rem;
}

.neo-bbs-entry--reply .neo-bbs-entry__avatar {
	width: 2rem;
	height: 2rem;
	font-size: 0.875rem;
}

.neo-bbs-entry--reply .neo-bbs-entry__body {
	font-size: 0.875rem;
}

.neo-bbs-thread__reply {
	margin-top: 1rem;
}

/* ---------- フォーム（黒背景 + 細いグレーの枠） ---------- */

.neo-bbs .neo-bbs-form {
	display: grid;
	gap: 1rem;
	margin: 0.75rem 0 0;
	padding: 1rem;
	border: 1px solid var(--neo-bbs-border);
	border-radius: var(--neo-bbs-radius);
	background-color: #000000;
}

.neo-bbs .neo-bbs-form__field {
	margin: 0;
}

.neo-bbs .neo-bbs-form__label,
.neo-bbs .neo-bbs-delete__label {
	display: block;
	margin: 0 0 0.375rem;
	color: var(--neo-bbs-text);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
}

.neo-bbs-form__required,
.neo-bbs-form__optional {
	margin-left: 0.375rem;
	padding: 0 0.375rem;
	border: 1px solid var(--neo-bbs-border-strong);
	border-radius: 2px;
	color: var(--neo-bbs-muted);
	font-size: 0.6875rem;
	font-weight: 400;
}

.neo-bbs .neo-bbs-form__help,
.neo-bbs .neo-bbs-delete__help {
	margin-top: 0.375rem;
	color: var(--neo-bbs-muted);
	font-size: 0.75rem;
	line-height: 1.6;
}

.neo-bbs .neo-bbs-form input[type="text"],
.neo-bbs .neo-bbs-form input[type="password"],
.neo-bbs .neo-bbs-form textarea,
.neo-bbs .neo-bbs-delete input[type="password"] {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--neo-bbs-border-strong);
	border-radius: 2px;
	background-color: var(--neo-bbs-field);
	box-shadow: none;
	color: var(--neo-bbs-text);
	font: inherit;
	/* 16px 未満だと iOS で入力時に拡大されるため. */
	font-size: 1rem;
	line-height: 1.6;
}

.neo-bbs .neo-bbs-form textarea {
	min-height: 7rem;
	resize: vertical;
}

/* 性別（ラジオボタン）. */
.neo-bbs .neo-bbs-form__gender {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.neo-bbs .neo-bbs-form__gender legend {
	float: left;
	width: 100%;
	padding: 0;
}

.neo-bbs .neo-bbs-form__choices {
	display: flex;
	clear: both;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.neo-bbs .neo-bbs-form__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	margin: 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--neo-bbs-border-strong);
	border-radius: 2px;
	background-color: var(--neo-bbs-field);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.neo-bbs .neo-bbs-form__choice input[type="radio"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--neo-bbs-text);
}

.neo-bbs .neo-bbs-form__choice:has(input:checked) {
	border-color: currentColor;
}

.neo-bbs .neo-bbs-form input:focus,
.neo-bbs .neo-bbs-form textarea:focus,
.neo-bbs .neo-bbs-delete input:focus {
	border-color: var(--neo-bbs-muted);
	outline: 1px solid var(--neo-bbs-muted);
	outline-offset: 0;
}

.neo-bbs .neo-bbs-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* アイコン画像のファイル選択. */
.neo-bbs .neo-bbs-form input[type="file"] {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: var(--neo-bbs-muted);
	font: inherit;
	font-size: 0.875rem;
}

/* 新規スレッドの本文: スマホで6行ほど見える高さ. */
.neo-bbs .neo-bbs-form--thread textarea {
	min-height: 10rem;
}

/* スパム対策のダミー欄（人には見えない. display: none だと入力しない機械もあるため画面外に置く）. */
.neo-bbs .neo-bbs-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * ---------- 削除 ----------
 * 「削除」はメタ情報の行（NEW・日時の横）に、日時より少し小さい薄いグレーの文字で置く（ボタンにしない・赤にしない）.
 * 開いたフォームは名前・日時の下に重ねて表示し、カードの高さを変えない.
 */

.neo-bbs-delete {
	display: inline;
}

.neo-bbs .neo-bbs-delete__toggle {
	display: inline;
	padding: 0;
	color: #6f6f6f;
	font-size: 0.6875rem;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
}

.neo-bbs .neo-bbs-delete__toggle:hover,
.neo-bbs .neo-bbs-delete__toggle:focus-visible,
.neo-bbs .neo-bbs-delete[open] > .neo-bbs-delete__toggle {
	color: var(--neo-bbs-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.neo-bbs .neo-bbs-delete__form {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	z-index: 10;
	display: grid;
	gap: 0.5rem;
	width: 16rem;
	max-width: 100%;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid var(--neo-bbs-border);
	border-radius: var(--neo-bbs-radius);
	background-color: #000000;
}

.neo-bbs .neo-bbs-delete__form .neo-bbs-delete__label {
	margin: 0;
}

/* ---------- ページ送り ---------- */

.neo-bbs__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.neo-bbs__pagination-status {
	color: var(--neo-bbs-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- PC ---------- */

@media (min-width: 768px) {
	.neo-bbs__threads {
		gap: 1.25rem;
	}

	.neo-bbs-thread {
		padding: 1.5rem;
	}

	.neo-bbs-entry {
		grid-template-columns: 3rem minmax(0, 1fr);
		column-gap: 1rem;
	}

	.neo-bbs-entry__avatar {
		width: 3rem;
		height: 3rem;
		font-size: 1.125rem;
	}

	/* 返信は親投稿の本文の位置にそろえる. */
	.neo-bbs .neo-bbs-replies,
	.neo-bbs-thread__reply {
		margin-left: 4rem;
	}

	.neo-bbs-entry--reply {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		column-gap: 0.75rem;
	}

	.neo-bbs-entry--reply .neo-bbs-entry__avatar {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.9375rem;
	}

	.neo-bbs .neo-bbs-form {
		padding: 1.25rem;
	}
}