@charset "UTF-8";
/* ===================================================================
 * bbs2026.css — 一行掲示板（/bbs/）専用スタイル
 *
 *  - 使う画面は /bbs/index.cgi と /bbs/admin.cgi のみ
 *  - クラスはすべて bbs- 接頭辞。他ページへ影響させない
 *  - style2026.css / ui2026.css は読み込むだけで、ここからは上書きしない
 *  - !important は使わない
 *
 *  デザインの方針: 既存サイトの緑を基調にしつつ、掲示板だけ
 *  角丸を大きめ・影を薄く・地色をごく淡いクリームにして柔らかく見せる。
 * =================================================================== */

/* ---------- 掲示板専用トークン ---------- */
/* .bbs は掲示板本体（/bbs/）、.bbs-summary はトップページに出すサマリー。
   どちらも同じ色・角丸を使うので、トークンは両方に定義する。 */
.bbs,
.bbs-summary {
	--bbs-green:       #2e7d32;
	--bbs-green-dark:  #1b5e20;
	--bbs-green-pale:  #e8f5e9;
	--bbs-cream:       #fffdf6;
	--bbs-surface:     #ffffff;
	--bbs-line:        #ece7dc;
	--bbs-ink:         #23241f;
	--bbs-ink-2:       #7b7a72;
	--bbs-pink:        #e0629a;
	--bbs-pink-pale:   #fdeef4;
	--bbs-radius:      16px;
	--bbs-radius-pill: 999px;
	--bbs-shadow:      0 1px 2px rgba(60, 55, 40, .06);

	margin: 8px 0 40px;
	padding: 0 16px;
	color: var(--bbs-ink);
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	line-height: 1.7;
	box-sizing: border-box;
}

.bbs *,
.bbs *::before,
.bbs *::after,
.bbs-summary *,
.bbs-summary *::before,
.bbs-summary *::after {
	box-sizing: inherit;
}

/* ---------- ページ全体 ---------- */
/* 表示を切り替えると一覧の長さが変わり、縦スクロールバーが出たり消えたりする。
   中央寄せの本文はその幅の半分だけ横にずれてしまうので、掲示板のページでは
   常にスクロールバーの幅を確保しておく。 */
html:has(body.bbs-page) {
	scrollbar-gutter: stable;
}

/* scrollbar-gutter や :has() が使えない環境向けの保険。
   常に画面より少しだけ高くして、スクロールバーを出しっぱなしにする。 */
@supports not selector(:has(*)) {
	body.bbs-page {
		min-height: calc(100vh + 1px);
	}
}

/* ---------- 見出し ---------- */
.bbs-head {
	margin: 0 0 16px;
}

.bbs-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--bbs-green-dark);
}

.bbs-lead {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--bbs-ink-2);
}

/* ---------- 投稿フォーム ---------- */
.bbs-form {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: var(--bbs-cream);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius);
	box-shadow: var(--bbs-shadow);
}

.bbs-form-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.bbs-form-name {
	flex: 0 0 auto;
	max-width: 8em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
	color: var(--bbs-green);
}

.bbs-input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 14px;
	font-size: 15px;
	font-family: inherit;
	color: var(--bbs-ink);
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius-pill);
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.bbs-input:focus {
	border-color: #a5d6a7;
	box-shadow: 0 0 0 3px rgba(46, 125, 50, .10);
}

.bbs-input::placeholder {
	color: #b8b5ab;
}

.bbs-submit {
	flex: 0 0 auto;
	padding: 10px 22px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--bbs-green);
	border: none;
	border-radius: var(--bbs-radius-pill);
	cursor: pointer;
	transition: background .2s ease;
}

.bbs-submit:hover {
	background: var(--bbs-green-dark);
}

.bbs-submit:disabled {
	background: #bdbdbd;
	cursor: default;
}

.bbs-form-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	min-height: 18px;
	font-size: 12px;
	color: var(--bbs-ink-2);
}

/* 管理者向け「運営として投稿」。名義を変える操作なので、
   ただのチェックではなく枠で囲って、押した状態が分かるようにする。 */
.bbs-as-system {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-right: 4px;
	padding: 2px 10px 2px 6px;
	font-size: 11px;
	color: var(--bbs-ink-2);
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius-pill);
	cursor: pointer;
	user-select: none;
}

.bbs-as-system:hover {
	border-color: #a5d6a7;
}

/* チェック中は投稿欄の名前と同じ緑にして、いまの名義を一目で分かるようにする */
.bbs-as-system:has(input:checked) {
	color: #fff;
	background: var(--bbs-green);
	border-color: var(--bbs-green);
}

.bbs-form-name.is-system {
	color: var(--bbs-green-dark);
}

.bbs-count.is-over {
	color: #c62828;
	font-weight: 700;
}

.bbs-error {
	color: #c62828;
}

/* ---------- 参加者限定の案内（未ログインで「すべて」に来たとき） ---------- */
.bbs-locked {
	margin: 0 0 20px;
	padding: 18px;
	background: var(--bbs-green-pale);
	border: 1px solid #d7e9d8;
	border-radius: var(--bbs-radius);
	font-size: 13px;
}

.bbs-locked-msg {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--bbs-green-dark);
}

.bbs-locked-sub {
	margin: 0 0 14px;
	color: var(--bbs-ink-2);
}

.bbs-locked-act {
	margin: 0;
	color: var(--bbs-ink-2);
}

.bbs-locked a {
	color: var(--bbs-green);
}

/* ---------- 未ログイン時の案内 ---------- */
.bbs-login {
	margin: 0 0 20px;
	padding: 16px;
	background: var(--bbs-green-pale);
	border: 1px solid #d7e9d8;
	border-radius: var(--bbs-radius);
	font-size: 13px;
}

.bbs-login-msg {
	margin: 0 0 6px;
	font-weight: 700;
	color: var(--bbs-green-dark);
}

.bbs-login-act {
	margin: 0;
	color: var(--bbs-ink-2);
}

.bbs-login a {
	color: var(--bbs-green);
}

.bbs-login-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.bbs-login-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bbs-login-label {
	font-size: 11px;
	color: var(--bbs-ink-2);
}

.bbs-login-input {
	padding: 8px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--bbs-ink);
	background: var(--bbs-surface);
	border: 1px solid #d7e9d8;
	border-radius: var(--bbs-radius-pill);
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.bbs-login-input:focus {
	border-color: #a5d6a7;
	box-shadow: 0 0 0 3px rgba(46, 125, 50, .10);
}

.bbs-login-submit {
	padding: 9px 20px;
	font-size: 13px;
	font-family: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--bbs-green);
	border: none;
	border-radius: var(--bbs-radius-pill);
	cursor: pointer;
	transition: background .2s ease;
}

.bbs-login-submit:hover {
	background: var(--bbs-green-dark);
}

/* ---------- 絞り込み ---------- */
/* トップページの「大会をえらぶ」（ui2026.css の .tb-modebox）と同じ、
   枠線に見出しが乗る形にそろえる。サイト内で見慣れた形なので、
   初見でも「選ぶものだ」と伝わる。寸法はあちらに合わせ、色は掲示板のものを使う。

   inline-flex にして中身の幅だけを占める。横いっぱいに広げると、
   選べるものが2つしか無いのに面積ばかり大きくなって、画面の主役に見えてしまう。 */
.bbs-filterbox {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 10px 12px 8px;
	background: var(--bbs-surface);
	border: 1px solid #e0d6c2;
	border-radius: var(--bbs-radius);
}

/* 枠線に重ねる見出し（fieldset の legend 相当） */
.bbs-filterbox-label {
	position: absolute;
	top: -9px;
	left: 12px;
	padding: 0 6px;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	color: var(--bbs-ink);
	background: var(--bbs-surface);
}

.bbs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bbs-tab {
	padding: 5px 16px;
	font-size: 12px;
	color: var(--bbs-ink-2);
	text-decoration: none;
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius-pill);
	transition: background .2s ease, color .2s ease;
}

.bbs-tab:hover {
	color: var(--bbs-green-dark);
	background: var(--bbs-green-pale);
}

.bbs-tab.is-active {
	color: #fff;
	background: var(--bbs-green);
	border-color: var(--bbs-green);
	cursor: default;
}

.bbs-filter-note {
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: 12px;
	color: var(--bbs-ink-2);
	background: var(--bbs-cream);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius);
}

.bbs-filter-note a {
	color: var(--bbs-green);
}

/* ---------- 一覧 ---------- */
.bbs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbs-item {
	display: flex;
	gap: 12px;
	margin: 0 0 10px;
	padding: 12px 14px;
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius);
	box-shadow: var(--bbs-shadow);
}

/* 運営からの自動投稿。ユーザの投稿の中に埋もれないよう、地色と縁で少し立てる。
   .bbs-item / .bbs-name の定義より前に置いても勝てるよう、2クラスで指定する
   （!important を使わずに詳細度で上回る）。 */
.bbs-item.bbs-item--system {
	background: #f6faf6;
	border-color: #d7e9d8;
}

/* 丸アイコンは掲示板の基調色（緑）のまま。名前のバッジだけ crimson にして、
   運営の投稿だと分かるようにする。丸まで赤くすると一覧の中で強すぎる。 */
.bbs-item--system .bbs-avatar {
	color: #fff;
	background: var(--bbs-green);
}

/* 名前のバッジは管理者まわりと同じ crimson */
.bbs-name.bbs-name--system {
	padding: 1px 8px;
	font-size: 11px;
	color: #fff;
	background: var(--tb-crimson, #d32f2f);
	border-radius: var(--bbs-radius-pill);
}

.bbs-ref {
	margin: 0 0 6px;
	font-size: 12px;
}

.bbs-ref-link {
	color: var(--bbs-green);
	text-decoration: none;
}

.bbs-ref-link:hover {
	text-decoration: underline;
}

.bbs-item.is-removing {
	opacity: .35;
	transition: opacity .3s ease;
}

.bbs-avatar {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--bbs-green-dark);
	background: var(--bbs-green-pale);
	border-radius: 50%;
	user-select: none;
}

.bbs-main {
	flex: 1 1 auto;
	min-width: 0;
}

.bbs-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.bbs-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--bbs-green-dark);
}

.bbs-when {
	font-size: 11px;
	color: var(--bbs-ink-2);
	cursor: default;
}

.bbs-body {
	margin: 2px 0 6px;
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ---------- 操作 ---------- */
.bbs-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bbs-iine {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	font-size: 12px;
	font-family: inherit;
	color: var(--bbs-ink-2);
	background: #fafaf7;
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius-pill);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.bbs-iine:hover {
	color: var(--bbs-pink);
	background: var(--bbs-pink-pale);
	border-color: #f3d3e0;
}

.bbs-iine.is-on {
	color: var(--bbs-pink);
	background: var(--bbs-pink-pale);
	border-color: #f3d3e0;
}

.bbs-iine--static {
	cursor: default;
}

.bbs-iine--static:hover {
	color: var(--bbs-ink-2);
	background: #fafaf7;
	border-color: var(--bbs-line);
}

.bbs-iine-mark {
	font-size: 13px;
	line-height: 1;
}

.bbs-iine-count {
	min-width: 1em;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

.bbs-del,
.bbs-confirm-yes,
.bbs-confirm-no {
	padding: 3px 10px;
	font-size: 11px;
	font-family: inherit;
	color: var(--bbs-ink-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--bbs-radius-pill);
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.bbs-del:hover {
	color: #c62828;
	background: #fdeded;
}

.bbs-confirm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #c62828;
}

.bbs-confirm-yes {
	color: #fff;
	background: #c62828;
}

.bbs-confirm-yes:hover {
	background: #a41d1d;
}

.bbs-confirm-no {
	border-color: var(--bbs-line);
}

.bbs-confirm-no:hover {
	background: #f2f2ee;
}

.bbs-confirm.is-hidden,
.bbs-del.is-hidden {
	display: none;
}

/* ---------- 空・ページング ---------- */
.bbs-empty {
	margin: 24px 0;
	padding: 24px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--bbs-ink-2);
	background: var(--bbs-cream);
	border: 1px dashed var(--bbs-line);
	border-radius: var(--bbs-radius);
}

.bbs-pager {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 16px 0 0;
}

.bbs-pager-link {
	padding: 8px 18px;
	font-size: 13px;
	color: var(--bbs-green);
	text-decoration: none;
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius-pill);
	transition: background .2s ease;
}

.bbs-pager-link:hover {
	background: var(--bbs-green-pale);
}

/* 「もっと見る」だけのときは右へ寄せる。
   「新しい投稿」だけのときは左に置いたままにする（戻る動線は左が自然） */
.bbs-pager-link--next:only-child {
	margin-left: auto;
}

.bbs-adminlink {
	margin: 20px 0 0;
	font-size: 12px;
	text-align: right;
}

.bbs-adminlink a {
	color: var(--bbs-ink-2);
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 480px) {

	.bbs {
		padding: 0 12px;
	}

	.bbs-form-row {
		gap: 6px;
	}

	.bbs-form-name {
		flex: 1 1 100%;
		max-width: none;
	}

	/* 名前が1行目に回るので、入力欄とボタンは2行目に並べる */
	.bbs-input {
		flex: 1 1 0;
	}

	.bbs-submit {
		padding: 10px 16px;
	}

	/* 未ログイン時のログインフォームは、入力欄を横いっぱいに使う */
	.bbs-login-field {
		flex: 1 1 100%;
	}

	.bbs-login-input {
		width: 100%;
	}

	.bbs-item {
		gap: 10px;
		padding: 10px 12px;
	}

	.bbs-avatar {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.bbs-body {
		font-size: 14px;
	}
}


/* ===================================================================
 * トップページ用サマリー（.bbs-summary）
 *
 *  掲示板の最新数件をのぞかせる小さなブロック。index.cgi の画面下部で使う。
 *  見出し（h2 > .special）はトップページ既存の見出しをそのまま借りるので、
 *  ここでは中身だけを定義する。
 * =================================================================== */

.bbs-summary {
	margin: 24px 0 8px;
	padding: 0;
	line-height: 1.7;
}

/* 最終更新。緑の帯・緑のメニューの上に乗るので、黄色で浮かせる。
   サイトのトークンがあればそれを使い、無ければ同じ色を直接使う。 */
.bbs-summary-when {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: var(--tb-yellow-500, #ffd54f);
}

/* 見出しの下に添える、この場所が何かの一言説明 */
.bbs-summary-lead {
	margin: 6px 0 10px;
	font-size: 12px;
	color: var(--bbs-ink-2);
}

/* 一覧の上に置く小見出し。「裏パドック」の中の何なのかを言う。
   すぐ上に h2 の帯があるので、ここは控えめにして見出しを二重に張り合わせない。
   #main h3（緑の縦棒＋下線・16px）に勝つため、ID＋クラスで指定する
   （!important は使わない）。 */
#bbs-summary .bbs-summary-subtitle {
	margin: 0 0 6px;
	padding-left: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--bbs-green-dark);
	border-left: none;
	border-bottom: none;
}

/* 一覧と絵を並べる行。狭い画面ではただのブロックで、絵は出さない。 */
.bbs-summary-pic {
	display: none;
}

.bbs-summary-list {
	margin: 8px 0 0;
	padding: 10px 14px;
	list-style: none;
	background: var(--bbs-cream);
	border: 1px solid var(--bbs-line);
	border-radius: var(--bbs-radius);
}

.bbs-summary-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	font-size: 13px;
	border-bottom: 1px solid var(--bbs-line);
}

.bbs-summary-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.bbs-summary-name {
	flex: 0 0 auto;
	max-width: 7em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	color: var(--bbs-green-dark);
}

.bbs-summary-body {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bbs-ink);
	overflow-wrap: break-word;
	word-break: break-word;
}

.bbs-summary-time {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--bbs-ink-2);
	cursor: default;
}

.bbs-summary-more {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: right;
}

.bbs-summary-more a {
	color: var(--bbs-green);
	text-decoration: none;
}

.bbs-summary-more a:hover {
	text-decoration: underline;
}

/* グローバルメニューに添える最終更新 */
/* メニューに添える最終更新。#menu の中なので .bbs のトークンは届かない。
   サマリー側と同じ黄色にそろえる。 */
.bbs-menu-when {
	margin-left: 5px;
	font-size: 11px;
	color: var(--tb-yellow-500, #ffd54f);
}

/* ---------- PCのみ: 右半分に絵を添える ---------- */
/* 769px は掲示板本体のタブや、トップの「大会をえらぶ」の横並びと同じ区切り。 */
@media screen and (min-width: 769px) {

	.bbs-summary-row {
		display: flex;
		align-items: stretch;
		gap: 14px;
	}

	/* 左右を半分ずつにする。基準幅を 0 にして残りを等分する */
	.bbs-summary-row > .bbs-summary-main,
	.bbs-summary-row > .bbs-summary-pic {
		flex: 1 1 0;
		min-width: 0;
	}

	/* 高さは一覧に合わせる。絵に自分の縦横比で高さを決めさせると、
	   ブロック全体が必要以上に高くなってしまう。 */
	.bbs-summary-pic {
		display: block;
		position: relative;
		overflow: hidden;
		border: 1px solid var(--bbs-line);
		border-radius: var(--bbs-radius);
	}

	/* 絵は高さを持たない置き方にして、余った枠を埋めるだけにする。
	   縦横比は変えず、はみ出した分を切る。パドックの輪が主役なので、
	   上下を落としても絵は成立する。 */
	.bbs-summary-pic img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 62%;
	}

	/* 幅が半分になるぶん、長い一言は1行で切って末尾に … を出す。
	   全文は title に入れてあるので、マウスを乗せれば読める。 */
	.bbs-summary-row .bbs-summary-body {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media screen and (max-width: 480px) {

	/* 幅が足りないので2行に分ける。
	   1行目は「名前 ……… 時刻」、2行目に本文。
	   本文はDOM上では時刻より前にあるので、order で後ろへ回す。 */
	.bbs-summary-item {
		flex-wrap: wrap;
		gap: 2px 8px;
	}

	.bbs-summary-name {
		order: 0;
	}

	.bbs-summary-time {
		order: 0;
		margin-left: auto;
	}

	.bbs-summary-body {
		order: 1;
		flex: 1 1 100%;
	}
}