/**
 * Aero Forum フロントエンド専用スタイルシートです
 * テーマ「Aero」のデザインシステム（CSS変数）に統合されています
 */

/* フォーラム全体の共通コンテナです */
.aero-forum-container.aero-forum-theme {
	margin-top: var(--space-s);
	margin-bottom: var(--space-xl);
}

/* フォーラムヘッダー（タイトルや説明）の余白です */
.aero-forum-header {
	margin-bottom: var(--space-m);
}

.aero-forum-header .forum-title {
	margin-top: 0;
	font-size: 2rem;
	font-weight: 700;
}

.aero-forum-header .forum-description {
	color: var(--color-muted);
	font-size: 0.95rem;
}

/* 検索ボックスのレイアウトです */
.aero-forum-search-box {
	margin-bottom: var(--space-m);
}

.aero-forum-search-box .forum-search-form {
	display: flex;
	gap: var(--space-xs);
}

.aero-forum-search-box .aero-search-input {
	flex: 1;
	padding: var(--space-xs) var(--space-s);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
}

/* カテゴリーカードグリッドの配置です */
.aero-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-m);
	margin-bottom: var(--space-l);
}

/* 個別のカテゴリーカードデザインです */
.aero-category-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: var(--space-m);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	/* カードの高さが均等な場合にメタ情報を下部に配置するためフレックスボックスを設定します */
	display: flex;
	flex-direction: column;
}

/* カードをホバーした際のインタラクティブ効果です */
.aero-category-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

/* ダークモード時のホバー影の調整です */
.aero-dark-mode .aero-category-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.aero-category-card .category-name {
	/* タイトルの下に適切な余白を空けます */
	margin: 0 0 var(--space-xs) 0;
	font-size: 1.15rem;
	font-weight: 600;
}

.aero-category-card .category-counts {
	display: flex;
	/* チップ同士の間隔を設定します */
	gap: 8px;
	/* タイトルや説明文が短くても、統計情報を常にカードの最下部に揃えます */
	margin-top: auto;
	/* 上の説明文との間に少しだけ内余白を確保します */
	padding-top: var(--space-s);
}

/* 統計件数を表示する小さなバッジ風のチップ共通スタイルです */
.aero-category-card .count-chip {
	display: inline-flex;
	align-items: center;
	/* アイコンや数値の間の横余白を設定します */
	gap: 5px;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 0.775rem;
	font-weight: 500;
	border: 1px solid var(--color-border);
	background-color: var(--color-bg);
	color: var(--color-muted);
	transition: all 0.2s ease;
}

/* トピック用のバッジを青基調に装飾します */
.aero-category-card .topic-count-chip {
	background-color: rgba(37, 99, 235, 0.03);
	border-color: rgba(37, 99, 235, 0.08);
}

/* 返信用のバッジを落ち着いたグレー基調に装飾します */
.aero-category-card .reply-count-chip {
	background-color: var(--color-surface);
	border-color: var(--color-border);
}

/* バッジ内のアイコン色とホバー時の変化を設定します */
.aero-category-card .count-chip .count-icon {
	color: var(--color-muted);
	flex-shrink: 0;
}

/* バッジ内のラベル文字スタイルです */
.aero-category-card .count-chip .count-label {
	color: var(--color-muted);
	font-size: 0.725rem;
}

/* バッジ内の件数数値スタイルです。太字にして視認性を高めます */
.aero-category-card .count-chip .count-number {
	color: var(--color-text);
	font-size: 0.825rem;
	font-weight: 700;
}

.aero-category-card .category-description {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* トピック一覧リストのスタイルです */
/* トピック一覧カード全体を包むコンテナです */
.aero-topic-list-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: var(--space-m);
	margin-bottom: var(--space-l);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.aero-dark-mode .aero-topic-list-card {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 一覧上部のヘッダーデザインです */
.aero-list-header {
	margin-bottom: var(--space-s);
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 10px;
}

/* 投稿されたトピックの見出しスタイルです */
.aero-section-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-text);
}

/* 件数を示すバッジのスタイルです */
.title-badge {
	font-size: 0.8rem;
	font-weight: 500;
	background-color: var(--color-bg);
	color: var(--color-text-secondary);
	padding: 2px 8px;
	border-radius: 12px;
	border: 1px solid var(--color-border);
}

/* トピック一覧リストのスタイルです */
.aero-topic-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 個別のトピック項目です。アイコンと文字を綺麗に配置します */
.aero-topic-item {
	display: flex;
	align-items: center;
	padding: var(--space-s) var(--space-xs);
	border-bottom: 1px solid var(--color-border);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	gap: 12px;
}

.aero-topic-item:last-child {
	border-bottom: none;
}

/* トピック行ホバー時のインタラクティブエフェクトです */
.aero-topic-item:hover {
	background-color: var(--color-bg);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.aero-dark-mode .aero-topic-item:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 左端のトピックシンボルアイコンラッパーです */
.topic-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	font-size: 1rem;
	flex-shrink: 0;
}

/* 上部ピン留めされたトピックの背景色と枠線です */
.aero-topic-item.sticky {
	background-color: rgba(37, 99, 235, 0.03);
	border-left: 3px solid var(--color-accent);
}

.aero-topic-item.closed {
	opacity: 0.8;
}

/* トピックのタイトルリンクです */
.aero-topic-item .topic-link {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.15s ease;
}

.aero-topic-item .topic-link:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

/* トピック情報の中身です */
.aero-topic-item .topic-info {
	flex: 1;
	min-width: 0;
}

/* 投稿日時などのメタデータスタイルです */
.aero-topic-item .topic-meta {
	font-size: 0.8rem;
	color: var(--color-muted);
	margin-top: 4px;
	display: flex;
	gap: var(--space-xs);
}

/* 統計情報（返信数など）の配置です */
.aero-topic-item .topic-stats {
	display: flex;
	align-items: center;
	gap: var(--space-s);
	flex-shrink: 0;
}

.aero-topic-item .stats-replies {
	font-size: 0.875rem;
	color: var(--color-muted);
}

/* 状態表示バッジのスタイルです */
.badge {
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 99px;
}

/* 解決済バッジです。文字が読みやすいよう暗めの緑色にしています */
.badge.solved {
	background-color: rgba(16, 185, 129, 0.1);
	color: #065f46;
}

/* ダークモードでの解決済バッジです。背景が黒いので文字を明るい緑色にしています */
.aero-dark-mode .badge.solved {
	background-color: rgba(16, 185, 129, 0.2);
	color: #34d399;
}

.badge.open {
	background-color: var(--color-bg);
	color: var(--color-muted);
	border: 1px solid var(--color-border);
}

/* 閉鎖・クローズ済バッジです。文字が読みやすいよう暗めの赤色にしています */
.badge.closed {
	background-color: rgba(239, 68, 68, 0.1);
	color: #991b1b;
}

/* ダークモードでの閉鎖バッジです。背景が黒いので文字を明るい赤色にしています */
.aero-dark-mode .badge.closed {
	background-color: rgba(239, 68, 68, 0.2);
	color: #f87171;
}

/* トピック詳細ページのスタイルです */
.aero-forum-topic-wrapper {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: var(--space-m);
	margin-bottom: var(--space-l);
}

.aero-topic-header {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-s);
	margin-bottom: var(--space-m);
}

.aero-topic-header .topic-title {
	margin-top: 0;
	font-size: 1.75rem;
}

.aero-topic-header .topic-meta {
	font-size: 0.85rem;
	color: var(--color-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	align-items: center;
}

.aero-topic-header .topic-status-badges {
	margin-left: auto;
	display: flex;
	gap: 4px;
}

/* トピック下部のアクションエリアです */
.aero-topic-footer {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-s);
	margin-top: var(--space-m);
}

.topic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.action-form {
	display: inline-block;
	margin: 0;
}

/* 返信一覧のスレッドリストです */
.aero-reply-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-l);
}

.aero-forum-theme .aero-reply-item {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: var(--space-s) var(--space-m);
	margin-bottom: var(--space-s);
}

.aero-forum-theme .aero-reply-item .reply-header {
	display: flex;
	align-items: center;
	border-bottom: 1px dashed var(--color-border);
	padding-bottom: 6px;
	margin-bottom: var(--space-s);
}

.aero-forum-theme .aero-reply-item .reply-number {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-accent);
	margin-right: var(--space-s);
}

.aero-forum-theme .aero-reply-item .reply-meta {
	font-size: 0.8rem;
	color: var(--color-muted);
	display: flex;
	gap: var(--space-xs);
}

.aero-forum-theme .aero-reply-item .reply-actions {
	margin-left: auto;
}

/* ボタンの基本スタイル定義です */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs) var(--space-s);
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.btn-primary {
	background-color: var(--color-accent);
	color: #fff;
}

/* ホバーした際にも文字が背景と同化して消えないよう白文字を維持します */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--color-link-hover);
	color: #fff;
}

.btn-secondary {
	background-color: var(--color-surface);
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn-secondary:hover {
	background-color: var(--color-border);
}

.btn-danger {
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.2);
}

.btn-danger:hover {
	background-color: #ef4444;
	color: #fff;
}

.btn-small {
	padding: 4px 8px;
	font-size: 0.8rem;
}

.btn-link {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 0.85rem;
}

/* 投稿フォームを包むカードスタイルのコンテナです。影をつけて存在感を高めます */
.aero-forum-form-container {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: var(--space-m);
	margin-top: var(--space-l);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.aero-dark-mode .aero-forum-form-container {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* フォームのタイトルスタイルです */
.aero-forum-form-container .form-title {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text);
}

/* フォーム上部に表示する初心者ユーザー向けの案内メッセージです */
.form-guide-text {
	font-size: 0.85rem;
	color: var(--color-muted);
	margin-top: 0;
	margin-bottom: var(--space-m);
	line-height: 1.5;
}

/* 各入力フォームの縦間隔です */
.form-group {
	margin-bottom: var(--space-m);
}

/* 入力コントロールのラベルです */
.form-group .form-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
	color: var(--color-text);
}

/* 必須マークの代わりに表示する赤い「必須」バッジです */
.required-badge {
	display: inline-block;
	background-color: #ef4444;
	color: #ffffff;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: middle;
	line-height: 1.4;
}

/* テキストやタイトルの標準入力ボックスです。フォーカス時に枠線に色をつけます */
.form-group .form-control {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 0.95rem;
	/* 他のテーマやプラグインの固定高さの指定を解除して、テキストの縦位置が上下中央になるようにします */
	height: auto;
	/* テキストの行高を安定させます */
	line-height: 1.5;
	/* パディングが高さに含まれるようにボックスモデルを適用します */
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group .form-control:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 添付ファイルを視覚的にわかりやすくするドラッグエリア風の枠線スタイルです */
.aero-file-upload-zone {
	position: relative;
	border: 2px dashed var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-m) var(--space-s);
	text-align: center;
	background-color: var(--color-bg);
	transition: border-color 0.2s ease, background-color 0.2s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.aero-file-upload-zone:hover {
	border-color: var(--color-accent);
	background-color: rgba(37, 99, 235, 0.02);
}

.aero-file-upload-zone .upload-icon {
	font-size: 1.8rem;
	line-height: 1;
}

.aero-file-upload-zone .upload-text {
	font-size: 0.85rem;
	color: var(--color-muted);
	font-weight: 600;
}

/* 重なるようにして透明にする実際のファイル入力欄です */
.aero-file-upload-zone .form-control-file {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* エラーおよび成功のメッセージスタイルです */
.aero-forum-errors {
	background-color: rgba(239, 68, 68, 0.05);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: var(--radius);
	padding: var(--space-s);
	color: #ef4444;
	margin-bottom: var(--space-s);
}

.aero-forum-errors .aero-errors-list {
	margin: 0;
	padding-left: var(--space-s);
}

.aero-forum-success {
	background-color: rgba(16, 185, 129, 0.05);
	border: 1px solid rgba(16, 185, 129, 0.2);
	border-radius: var(--radius);
	padding: var(--space-s);
	color: #10b981;
	margin-bottom: var(--space-s);
}

.aero-forum-success .aero-success-text {
	margin: 0;
}

/* ページネーションのレイアウトです */
.aero-forum-pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-l);
}

.aero-forum-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	color: var(--color-text);
	border-radius: var(--radius);
	text-decoration: none;
}

.aero-forum-pagination .page-numbers.current {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}

.aero-forum-pagination .page-numbers:hover:not(.current) {
	background: var(--color-surface);
}

/* パンくずリストのインライン配置です */
.aero-forum-breadcrumbs .aero-breadcrumbs-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-s);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
}

.aero-forum-breadcrumbs .aero-breadcrumb-item + .aero-breadcrumb-item::before {
	content: "/";
	margin: 0 8px;
	color: var(--color-muted);
}

/* モバイル環境向けのレスポンシブなサイズ調整です */
@media (max-width: 600px) {
	.aero-topic-item {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}
	
	.aero-topic-item .topic-stats {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
}

/* ソートバーのスタイルです */
.aero-forum-sort-bar {
	margin-bottom: var(--space-s);
	font-size: 0.85rem;
	color: var(--color-muted);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.aero-forum-sort-bar .aero-sort-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--space-xs);
}

.aero-forum-sort-bar .aero-sort-link {
	color: var(--color-muted);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aero-forum-sort-bar .aero-sort-link:hover,
.aero-forum-sort-bar .aero-sort-link.active {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}

/* 全体注目トピックの背景色と境界線です */
.aero-topic-item.global-sticky {
	background-color: rgba(245, 158, 11, 0.05);
	border-left: 3px solid #f59e0b;
}

.aero-dark-mode .aero-topic-item.global-sticky {
	background-color: rgba(245, 158, 11, 0.1);
}

/* --- 雑談コミュニティ形式用のリアクション機能のスタイル --- */

/* リアクションボタンとパレットを囲む全体の入れ物です */
.aero-reaction-container {
	position: relative;
	display: inline-block;
}

/* リアクションを送信するボタンの基本デザインです */
.aero-reaction-trigger-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	font-size: 0.85rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	color: var(--color-text-secondary);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aero-reaction-trigger-btn:hover {
	background: var(--color-border);
	border-color: var(--color-text-muted);
}

/* ボタンの上に浮かび上がる絵文字の選択メニュー（パレット）です */
.aero-reaction-palette {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 30px;
	padding: 6px 12px;
	display: none;
	gap: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
	z-index: 100;
	margin-bottom: 8px;
}

/* パレットの上にふわっと浮き出るようにするアニメーション設定です */
@keyframes aeroReactionPop {
	0% { transform: translate(-50%, 10px) scale(0.85); opacity: 0; }
	100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

/* リアクションの入れ物にマウスが載ったとき、またはアクティブクラスが付与されたときに、絵文字パレットを表示します */
.aero-reaction-container:hover .aero-reaction-palette,
.aero-reaction-container.is-active .aero-reaction-palette {
	display: flex;
	animation: aeroReactionPop 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* パレット内の各絵文字ボタンのスタイルと、ホバー時の拡大効果です */
.aero-reaction-emoji-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1;
	transition: transform 0.12s ease-out;
}

.aero-reaction-emoji-btn:hover {
	transform: scale(1.3);
}

/* 投稿や返信に付けられたリアクションを並べるリストのスタイルです */
.aero-reaction-list {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: var(--space-s);
}

/* 付与されたリアクションと、それを押した人数を表すバッジです */
.aero-reaction-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 2px 8px;
	border-radius: 99px;
	font-size: 0.8rem;
	cursor: pointer;
	transition: all 0.15s ease;
}

.aero-reaction-badge:hover {
	background: var(--color-border);
}

/* 自分がすでにクリックしてリアクションしている場合に、ボタンを少し強調します */
.aero-reaction-badge.my-active {
	border-color: var(--color-accent);
	background: rgba(37, 99, 235, 0.04);
}

/* テキストエリアのサイズ変更ボタンのコンテナとボタンスタイル */
.aero-textarea-controls {
	display: flex;
	gap: 4px;
}

.aero-textarea-controls .btn-small {
	padding: 2px 6px;
	font-size: 0.75rem;
	line-height: 1.2;
}

/* 投稿プレビュー表示エリアのスタイル */
.aero-forum-preview-container {
	border: 1px dashed var(--color-border);
	border-radius: 8px;
	background: var(--color-surface);
	padding: var(--space-s);
	margin-top: var(--space-s);
}

.aero-forum-preview-container .preview-content {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--color-text);
}

/* コードブロック内のコピーボタン用のコンテナスタイル */
.entry-content pre {
	position: relative;
}

.aero-code-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px 8px;
	font-size: 0.75rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	color: var(--color-text);
}

.aero-code-copy-btn:hover,
.aero-code-copy-btn:focus {
	opacity: 1;
	background: var(--color-border);
}

/* アクションエリアや検索フィルターなどの個別セレクトボックスにテーマカラーを適用して没入型ダークモードにします */
.action-form .form-control,
.form-control,
.forum-filter-select {
	padding: 6px 32px 6px 12px; /* 矢印と文字が重ならないように右余白を設定します */
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: 0.85rem;
	height: auto;
	cursor: pointer;
	display: inline-block;
	width: auto;
	vertical-align: middle;
	
	/* ブラウザ標準のドロップダウン下矢印を非表示にします */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	
	/* 代わりに美しい細線の矢印（SVG）を背景として表示します */
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	
	/* 通常テーマ（ライト）用のグレー色の下矢印を設定します */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
	
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ホバーおよびフォーカスされた際の視覚効果です */
.action-form .form-control:hover,
.form-control:hover,
.forum-filter-select:hover {
	border-color: var(--color-text-muted);
}

.action-form .form-control:focus,
.form-control:focus,
.forum-filter-select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 没入型ダークモード時にカスタム矢印（SVG）の色を白に変更する指定です */
.aero-dark-mode .action-form .form-control,
.aero-dark-mode .form-control,
.aero-dark-mode .forum-filter-select {
	/* ダークモード用の白色の下矢印を設定します */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
}

/* 検索ボタンの没入型アクセントカラースタイルです */
.btn-search {
	background-color: var(--color-accent);
	color: #ffffff;
	border: 1px solid var(--color-accent);
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn-search:hover,
.btn-search:focus {
	opacity: 0.9;
	color: #ffffff;
	background-color: var(--color-link-hover);
	border-color: var(--color-link-hover);
}

/* 添付ファイルドラッグ中の状態を表すスタイルです */
.aero-file-upload-zone.dragover {
	border-color: var(--color-accent);
	background-color: rgba(37, 99, 235, 0.05);
}

/* 子要素がドラッグ＆ドロップやクリックイベントを阻害しないように設定します */
.aero-file-upload-zone .upload-icon,
.aero-file-upload-zone .upload-text {
	pointer-events: none;
}

/* 選択されたファイル名の一覧を表示するリストエリアのスタイルです */
.aero-file-list {
	margin-top: 10px;
	padding: 10px 14px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* リスト内の個々のファイル表示行のスタイルです */
.aero-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.85rem;
}

.aero-file-item:last-child {
	border-bottom: none;
}

/* 選択されたファイル名部分のテキストスタイルです */
.aero-file-name {
	font-weight: 500;
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 80%;
}

/* 選択されたファイルのサイズ表示部分のテキストスタイルです */
.aero-file-size {
	color: var(--color-muted);
	font-size: 0.8rem;
	margin-left: 10px;
}

/* 検索フォーム全体のレイアウトと見た目の定義です */
.forum-search-form {
	/* 中身の要素を縦方向に並べます */
	display: flex;
	/* 縦並びを指定します */
	flex-direction: column;
	/* 要素と要素のすき間を8pxにします */
	gap: 8px;
	/* 背景に表面（カード等）用の色を設定します */
	background: var(--color-surface);
	/* 内側に15pxの余白を設けます */
	padding: 15px;
	/* 角をテーマ設定の丸みに丸めます */
	border-radius: var(--radius);
	/* 枠線を薄く引きます */
	border: 1px solid var(--color-border);
}

/* 検索フィルター（詳細絞り込み）のコンテナのレイアウト定義です */
.forum-search-filters {
	/* 中身の要素を横並びに配置します */
	display: flex;
	/* 要素同士のすき間を12px空けます（少し広げてスッキリさせます） */
	gap: 12px;
	/* モバイルなどの狭い画面では自動的に折り返すようにします */
	flex-wrap: wrap;
	/* 文字のサイズを少し小さめ（0.85rem）にします */
	font-size: 0.85rem;
	/* 縦方向の中央で揃えます */
	align-items: center;
}

/* 絞り込みラベルのスタイルです */
.forum-search-filters .aero-filter-label {
	/* ラベルの文字色を少し控えめな灰色にしてシンプルにします */
	color: var(--color-text-muted);
	/* ラベルを少し太字にして識別しやすくします */
	font-weight: 600;
}

/* 検索フィルター用のセレクトボックスをPC画面で1行に収めるためのコンパクト定義です */
.forum-filter-select {
	/* セレクトボックスの内側余白を調整し、矢印と文字の重なりを防ぎます */
	padding: 5px 28px 5px 10px;
	/* 文字の大きさを小さくしてスッキリさせます */
	font-size: 0.8rem;
	/* ドロップダウン矢印の位置を少し右側にずらして整えます */
	background-position: right 8px center;
}

/* パソコン画面（横幅600px以上）では、詳細絞り込みが1行にスッキリ収まるようにギャップなどを調整します */
@media (min-width: 600px) {
	/* PC画面でのみ適用するフィルターコンテナのスタイルです */
	.forum-search-filters {
		/* PC画面では絶対に改行させず、1行にピタッと収めます */
		flex-wrap: nowrap;
	}
	/* PC画面でのみ適用するフィルター用セレクトボックスのスタイルです */
	.forum-filter-select {
		/* 各セレクトボックスが均等に横幅を分け合えるようにします */
		flex: 1;
		/* 画面が狭まっても文字が途切れないように最小幅を135pxに広げます */
		min-width: 135px;
		/* 画面が広くても大きくなりすぎないように最大幅を190pxに調整します */
		max-width: 190px;
	}
}

/* ライトボックス表示全体のモーダルコンテナのスタイルです */
.aero-lightbox-modal {
	/* 画面全体を固定表示で覆います */
	position: fixed;
	/* 左上を起点にします */
	top: 0;
	left: 0;
	/* 画面の縦横いっぱいに広げます */
	width: 100%;
	height: 100%;
	/* 最前面に表示されるように重なり順を設定します */
	z-index: 99999;
	/* 背景を暗い半透明（黒の90%透過）にします */
	background-color: rgba(0, 0, 0, 0.9);
	/* スライドアウトした画像が画面外へはみ出してもスクロールバーが出ないようにします */
	overflow: hidden;
	/* 中身を上下左右中央揃えにします */
	display: flex;
	/* 縦並びで中央揃えにします */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 最初は非表示に設定しておきます */
	opacity: 0;
	pointer-events: none;
	/* 滑らかにふわっと出現するようにトランジションを設定します */
	transition: opacity 0.3s ease;
}

/* モーダルが有効（表示状態）になった際の追加スタイルです */
.aero-lightbox-modal.is-active {
	/* 透明度を完全表示にします */
	opacity: 1;
	/* クリックや操作を受け付けるようにします */
	pointer-events: auto;
}

/* ポップアップ内に配置するメイン画像のコンテナです */
.aero-lightbox-content {
	/* ポジショニングの基準点にします */
	position: relative;
	/* 画像の最大幅を画面幅の90%に制限します */
	max-width: 90vw;
	/* 画像の最大高さを画面高さ of 80%に制限します */
	max-height: 80vh;
	/* 中身を中央寄せにします */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ポップアップ内に表示される画像（本物と一時コピーの両方）の基本スタイルです */
.aero-lightbox-img,
.aero-lightbox-img-temp {
	/* 最大幅をコンテナの100%にします */
	max-width: 100%;
	/* 最大高さをコンテナの100%にします */
	max-height: 80vh;
	/* 画像のアスペクト比を自動維持します */
	object-fit: contain;
	/* 角をわずかに丸めます */
	border-radius: 4px;
	/* 白い境界線と影をあしらって写真を立体的に見せます */
	border: 3px solid #ffffff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	/* 最初は少し透明に設定します */
	opacity: 0;
	/* 位置の初期移動はなしに設定します */
	transform: translateX(0);
	/* 透明度と位置の変更を0.25秒かけて滑らかに変化させます */
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* 一時的に生成される古いコピー画像は、元の画像とぴったり重ねるために絶対配置にします */
.aero-lightbox-img-temp {
	position: absolute;
}

/* 画像の読み込みが完了して中央に表示される際の状態です */
.aero-lightbox-img.loaded {
	/* 完全に不透明にして表示します */
	opacity: 1;
	/* 位置を中央（ズレなし）に戻します */
	transform: translateX(0);
	/* 中央へ流れてくる動きを滑らかなイージングで表現します */
	transition: transform 0.3s ease;
}

/* 次の画像へ進む（右ボタン）際に、現在の古い画像が画面外（左）までスライドアウトする効果です */
.aero-lightbox-img.slide-out-left,
.aero-lightbox-img-temp.slide-out-left {
	/* 画像を左の画面外まで完全に退避させます */
	transform: translateX(-100vw);
	/* スライド中も画像は表示したまま流れるように移動させます */
	opacity: 1;
	/* 画面外へ流れる動きを滑らかに表現します */
	transition: transform 0.3s ease;
}

/* 前の画像へ戻る（左ボタン）際に、現在の古い画像が画面外（右）までスライドアウトする効果です */
.aero-lightbox-img.slide-out-right,
.aero-lightbox-img-temp.slide-out-right {
	/* 画像を右の画面外まで完全に退避させます */
	transform: translateX(100vw);
	/* スライド中も画像は表示したまま流れるように移動させます */
	opacity: 1;
	/* 画面外へ流れる動きを滑らかに表現します */
	transition: transform 0.3s ease;
}

/* 次の画像へ進んだ際に、新しい画像が右の画面外から入ってくる準備状態です */
.aero-lightbox-img.slide-in-right {
	/* 初期配置を右の画面外にしておきます */
	transform: translateX(100vw);
	/* スライドイン中も画像は表示したままにします */
	opacity: 1;
	/* 開始位置へ瞬時に配置するため、ここではトランジションを無効化します（loaded付与時のみ中央へ発火させます） */
	transition: none;
}

/* 前の画像へ戻った際に、新しい画像が左の画面外から入ってくる準備状態です */
.aero-lightbox-img.slide-in-left {
	/* 初期配置を左の画面外にしておきます */
	transform: translateX(-100vw);
	/* スライドイン中も画像は表示したままにします */
	opacity: 1;
	/* 開始位置へ瞬時に配置するため、ここではトランジションを無効化します（loaded付与時のみ中央へ発火させます） */
	transition: none;
}



/* 画像の下部に表示されるファイル名・キャプションのスタイルです */
.aero-lightbox-caption {
	/* 文字を白にします */
	color: #ffffff;
	/* 文字サイズを少し小さめ（0.9rem）にします */
	font-size: 0.9rem;
	/* 上部に余白を設けます */
	margin-top: 15px;
	/* テキストを中央揃えにします */
	text-align: center;
	/* 長いファイル名でも折り返されるようにします */
	word-break: break-all;
	/* 左右のパディングを設定します */
	padding: 0 20px;
}

/* ポップアップを閉じるための「×」ボタンのスタイルです */
.aero-lightbox-close {
	/* モーダルの右上基準で配置します */
	position: absolute;
	top: 20px;
	right: 20px;
	/* 背景を半透明の丸枠にします（ガラスモーフィズム風） */
	background: rgba(255, 255, 255, 0.15);
	/* 文字（×印）を白にします */
	color: #ffffff;
	/* 枠線を無しにします */
	border: none;
	/* フォントサイズを大きくします */
	font-size: 28px;
	/* 正方形にして丸めます */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	/* マウスカーソルを指マークにします */
	cursor: pointer;
	/* 中身を中央寄せにします */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 角を滑らかにホバー変化させるためのトランジションです */
	transition: background-color 0.15s ease, transform 0.15s ease;
	/* バックドロップフィルターで背景をぼかします */
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* 閉じるボタンホバー時のスタイルです */
.aero-lightbox-close:hover {
	/* 背景の白の不透明度を上げます */
	background: rgba(255, 255, 255, 0.3);
	/* ボタンを少しだけ大きくします */
	transform: scale(1.05);
}

/* 左右スライド切り替え用の矢印ナビゲーションボタンの共通スタイルです */
.aero-lightbox-nav {
	/* モーダルの左右にそれぞれ配置するため絶対配置にします */
	position: absolute;
	/* 縦方向の真ん中に配置します */
	top: 50%;
	transform: translateY(-50%);
	/* クローズボタンと同じくガラスモーフィズム風の半透明円にします */
	background: rgba(255, 255, 255, 0.15);
	/* 矢印の色を白にします */
	color: #ffffff;
	border: none;
	font-size: 24px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	/* 最前面にします */
	z-index: 100000;
}

/* 矢印ボタンホバー時のスタイルです */
.aero-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-50%) scale(1.05);
}

/* 前の画像へ戻る（左矢印）ボタンの個別配置です */
.aero-lightbox-prev {
	/* 左端から20pxの位置に配置します */
	left: 20px;
}

/* 次の画像へ進む（右矢印）ボタンの個別配置です */
.aero-lightbox-next {
	/* 右端から20pxの位置に配置します */
	right: 20px;
}

/* モバイルなどの幅狭画面（768px以下）でのライトボックスボタン配置調整です */
@media (max-width: 768px) {
	/* ナビゲーションの矢印ボタンを少し小さくし、端に寄せます */
	.aero-lightbox-nav {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}
	.aero-lightbox-prev {
		left: 10px;
	}
	.aero-lightbox-next {
		right: 10px;
	}
	.aero-lightbox-close {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		font-size: 22px;
	}
	}
}

/* フロントエンドで出力されるエディター（wp_editor）全体の枠線の丸みと影の調整です */
.wp-editor-wrap {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--color-border);
}

/* エディターの上部ツールバー（切り替えタブなど）の境界線のスタイルです */
.wp-editor-tools {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
}

/* ビジュアル／テキストの切り替えタブ部分の余白と背景の調整です */
.wp-editor-tabs {
	padding: 4px 8px 0 0;
}

/* エディターのテキストエリア（テキストモード時）の配色をテーマに合わせます */
.wp-editor-area {
	background-color: var(--color-bg);
	color: var(--color-text);
	border: none;
	font-family: sans-serif;
	font-size: 15px;
	line-height: 1.6;
}

/* テキストモード時のクイックタグボタンエリアの背景色です */
.quicktags-toolbar {
	background: rgba(0, 0, 0, 0.02);
	border-bottom: 1px solid var(--color-border);
	padding: 6px;
}

/* クイックタグの個々のボタンのデザインをテーマのボタン風にします */
.quicktags-toolbar .button {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: 12px;
	padding: 3px 8px;
	margin: 2px;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
}

/* クイックタグボタンをホバーした際の変化効果です */
.quicktags-toolbar .button:hover {
	background: var(--color-border);
	border-color: var(--color-text-muted);
}

/* 没入型ダークモード（.aero-dark-mode）適用時のエディター全体の配色調整です */
.aero-dark-mode .wp-editor-wrap {
	border-color: var(--color-border);
}

/* ダークモード時のエディタータブのテキスト色などの調整です */
.aero-dark-mode .wp-switch-editor {
	background: var(--color-bg);
	color: var(--color-text-muted);
	border-color: var(--color-border);
}

/* アクティブ（現在選択されている）なエディタータブの配色です */
.aero-dark-mode .active .wp-switch-editor {
	background: var(--color-surface);
	color: var(--color-text);
	border-bottom-color: var(--color-surface);
}

/* ダークモード時のエディターの切り替えタブ部分の背景です */
.aero-dark-mode .wp-editor-tools {
	background: var(--color-bg);
	border-bottom-color: var(--color-border);
}

/* ダークモード時のクイックタグボタンツールバーの背景色です */
.aero-dark-mode .quicktags-toolbar {
	background: rgba(255, 255, 255, 0.03);
	border-bottom-color: var(--color-border);
}

/* ============================================================
   Aero TinyMCE (ビジュアルエディター) ダークモード上書き定義
   ============================================================ */

/* ダークモード時のTinyMCE全体の外枠とコンテナ背景 */
.aero-dark-mode .mce-tinymce,
.aero-dark-mode .mce-container,
.aero-dark-mode .mce-container-body {
	background-color: var(--color-surface);
	border-color: var(--color-border);
	box-shadow: none;
}

/* ダークモード時のエディターツールバーの背景 */
.aero-dark-mode .mce-top-part {
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-surface);
}

.aero-dark-mode .mce-toolbar-grp {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: 4px;
}

/* ツールバーの各グループや仕切り線 */
.aero-dark-mode .mce-flow-layout-item {
	margin: 2px;
}

/* ダークモード時の各アクションボタン（B、Iなど）のスタイル */
.aero-dark-mode .mce-btn {
	background-color: transparent;
	border: 1px solid transparent;
	box-shadow: none;
	border-radius: 4px;
}

/* ボタン内のアイコンの色を白系統にします */
.aero-dark-mode .mce-btn [role="button"],
.aero-dark-mode .mce-ico {
	color: var(--color-text);
	text-shadow: none;
}

/* ボタンホバー時およびアクティブ（選択）時の背景色 */
.aero-dark-mode .mce-btn:hover,
.aero-dark-mode .mce-btn:focus,
.aero-dark-mode .mce-btn.mce-active,
.aero-dark-mode .mce-btn.mce-active:hover {
	background-color: var(--color-border);
	border-color: var(--color-border);
}

/* ボタンがアクティブなときのアイコン色を強調 */
.aero-dark-mode .mce-btn.mce-active .mce-ico {
	color: var(--color-link);
}

/* ツールバー内の仕切り線 */
.aero-dark-mode .mce-separator {
	border-left: 1px solid var(--color-border);
	border-right: none;
	margin: 4px 6px;
}

/* iframeを内包する編集エリア外枠 */
.aero-dark-mode .mce-edit-area {
	background-color: var(--color-bg);
	border-color: var(--color-border);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

/* 下部ステータスバーの配色 */
.aero-dark-mode .mce-statusbar {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

/* 下部ステータスバーの文字色 */
.aero-dark-mode .mce-path-item,
.aero-dark-mode .mce-statusbar .mce-flow-layout-item {
	color: var(--color-text-muted);
}

/* ビジュアル・テキストエディター全体の枠線（外枠・コンテナ・TinyMCE本体）をダークモード用に統一 */
.aero-dark-mode .wp-editor-wrap,
.aero-dark-mode .wp-editor-container,
.aero-dark-mode .mce-tinymce {
	border-color: var(--color-border);
}

/* ============================================================
   Aero Forum Draft Autosave Banner (下書き自動保存復元バナー)
   ============================================================ */

/* フォーム上部に出現する下書き復元を促す通知バナーの基本スタイルです */
.aero-draft-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background: rgba(240, 249, 255, 0.95); /* やさしい水色系の背景色 */
	border: 1px solid rgba(186, 230, 253, 0.8);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin-bottom: var(--space-m);
	color: #0369a1; /* 深めの水色のテキスト */
	font-size: 0.9rem;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(3, 105, 161, 0.05);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* ふわっと上から現れるスインアニメーションを適用します */
	animation: aeroDraftBannerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 通知バナーの出現用アニメーションの定義です */
@keyframes aeroDraftBannerIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* バナーのテキストエリアです */
.aero-draft-banner-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* 添付ファイル等の注意書き用スモールテキストです */
.aero-draft-banner-sub {
	font-size: 0.75rem;
	opacity: 0.85;
	color: #0c4a6e;
}

/* 復元と破棄ボタンを囲むコンテナです */
.aero-draft-banner-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* 復元（適用）用のアクションボタンです */
.aero-draft-banner-btn-restore {
	background-color: #0284c7;
	color: #ffffff;
	border: none;
	padding: 6px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.aero-draft-banner-btn-restore:hover {
	background-color: #0369a1;
}

/* 破棄用の控えめなボタンです */
.aero-draft-banner-btn-discard {
	background-color: transparent;
	color: #0369a1;
	border: 1px solid #bae6fd;
	padding: 5px 11px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.aero-draft-banner-btn-discard:hover {
	background-color: rgba(3, 105, 161, 0.05);
	border-color: #0369a1;
}

/* 没入型ダークモード（.aero-dark-mode）適用時の通知バナーの配色調整です */
.aero-dark-mode .aero-draft-banner {
	background: rgba(30, 41, 59, 0.9); /* 濃いブルーグレー */
	border-color: rgba(71, 85, 105, 0.8);
	color: #e2e8f0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.aero-dark-mode .aero-draft-banner-sub {
	color: #94a3b8;
}

.aero-dark-mode .aero-draft-banner-btn-restore {
	background-color: var(--color-accent);
	color: #ffffff;
}

.aero-dark-mode .aero-draft-banner-btn-restore:hover {
	background-color: var(--color-link);
}

.aero-dark-mode .aero-draft-banner-btn-discard {
	color: #94a3b8;
	border-color: #475569;
}

.aero-dark-mode .aero-draft-banner-btn-discard:hover {
	background-color: rgba(255, 255, 255, 0.03);
	color: #e2e8f0;
	border-color: #94a3b8;
}







/* ============================================================
   Aero Forum Widgets (アクティブトピック / トップ貢献者)
   ============================================================ */

/* アクティブトピック一覧を囲むリスト全体の余白調整 */
.aero-forum-active-topics-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 各トピック項目の境界線と余白調整 */
.aero-forum-topic-item {
	margin-bottom: 12px;
	padding: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.aero-forum-topic-item:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

/* トピック詳細ページへ飛ぶリンク全体のフレックス構造とホバー効果 */
.aero-forum-topic-link {
	display: flex;
	gap: 10px;
	padding: 8px;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	align-items: flex-start;
}

.aero-forum-topic-link:hover {
	background-color: var(--color-bg, #f8fafc);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* 最終発言者のアバター画像を丸型にして影をつけます */
.aero-forum-topic-avatar img {
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	display: block;
}

/* タイトルやメタ情報のコンテナ幅を自動調整します */
.aero-forum-topic-body {
	flex: 1;
	min-width: 0;
}

/* トピックが解決された際に付与される緑色のバッジ */
.aero-forum-solved-badge {
	display: inline-block;
	background-color: #dcfce7;
	color: #16a34a;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 4px;
	margin-right: 6px;
	vertical-align: middle;
}

/* トピックタイトルのテキストの太さと大きさ */
.aero-forum-topic-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text, #1e293b);
	line-height: 1.4;
	vertical-align: middle;
	word-wrap: break-word;
}

/* コメント数を伝える吹き出し風の青色バッジ */
.aero-forum-reply-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background-color: #e0f2fe;
	color: #0284c7;
	font-size: 9px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 9999px;
	margin-left: 6px;
	vertical-align: middle;
}

.aero-forum-reply-badge .dashicons {
	font-size: 11px;
	width: 11px;
	height: 11px;
	line-height: 11px;
}

/* トピック下部にある更新日時などのメタ情報エリア */
.aero-forum-topic-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 10px;
	color: var(--color-text-muted, #64748b);
	margin-top: 4px;
	align-items: center;
}

/* トピックが属するフォーラム（カテゴリ）名のグレー背景バッジ */
.aero-forum-topic-meta .forum-name {
	background-color: var(--color-border, #e2e8f0);
	color: var(--color-text-muted, #475569);
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 500;
}

.aero-forum-topic-meta .author-and-time {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 貢献者ランキング一覧を囲むリスト全体の余白調整 */
.aero-forum-contributors-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.aero-forum-contributor-item {
	margin-bottom: 8px;
	padding: 0;
}

.aero-forum-contributor-item:last-child {
	margin-bottom: 0;
}

/* ユーザーのアーカイブページへ飛ぶリンク全体のフレックス構造 */
.aero-forum-contributor-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.aero-forum-contributor-link:hover {
	background-color: var(--color-bg, #f8fafc);
}

/* 順位を示す丸型バッジの基本スタイル */
.aero-forum-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	color: var(--color-text-muted, #64748b);
	background-color: var(--color-border, #f1f5f9);
}

/* 1位（ゴールドメダル）のグラデーションカラー */
.rank-1 .aero-forum-rank-badge {
	background: linear-gradient(135deg, #fef08a, #facc15);
	color: #854d0e;
	box-shadow: 0 1px 4px rgba(250, 204, 21, 0.3);
}

/* 2位（シルバーメダル）のグラデーションカラー */
.rank-2 .aero-forum-rank-badge {
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
	color: #475569;
}

/* 3位（ブロンズメダル）のグラデーションカラー */
.rank-3 .aero-forum-rank-badge {
	background: linear-gradient(135deg, #ffedd5, #fed7aa);
	color: #c2410c;
}

/* 貢献者のアバター画像を丸型にして影をつけます */
.aero-forum-contributor-avatar img {
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	display: block;
}

.aero-forum-contributor-body {
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 0;
}

.aero-forum-contributor-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 総アクション（トピック＋返信）数を表す青色丸バッジ */
.aero-forum-contribution-count {
	font-size: 9px;
	color: #0284c7;
	background-color: #e0f2fe;
	padding: 2px 8px;
	border-radius: 9999px;
	font-weight: 700;
	white-space: nowrap;
}

/* 没入型ダークモード（.aero-dark-mode）適用時のトピックホバー時のカラー調整です */
.aero-dark-mode .aero-forum-topic-link:hover,
.aero-dark-mode .aero-forum-contributor-link:hover {
	background-color: rgba(255, 255, 255, 0.03);
}

/* ダークモード時の解決バッジの配色調整です */
.aero-dark-mode .aero-forum-solved-badge {
	background-color: rgba(22, 163, 74, 0.15);
	color: #4ade80;
}

/* ダークモード時の返信数バッジと貢献アクション数バッジの配色調整です */
.aero-dark-mode .aero-forum-reply-badge,
.aero-dark-mode .aero-forum-contribution-count {
	background-color: rgba(2, 132, 199, 0.15);
	color: #38bdf8;
}

/* ダークモード時の区切り線のカラー調整です */
.aero-dark-mode .aero-forum-topic-item {
	border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* 返信操作ボタン（.reply-actions）の高さと配置のズレを完全に修正します */
.reply-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* 親コンテナ直下のform要素の余白や位置ズレをリセットして綺麗に並べます */
.reply-actions > form {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

/* 主要アクションボタン（返信、共有、いいね、編集、削除、削除申請、通報、ベストアンサー）のサイズと丸みを統一します */
.reply-actions > .btn,
.reply-actions > form > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1;
	border-radius: var(--radius, 4px);
	margin: 0;
	box-sizing: border-box;
	vertical-align: middle;
	cursor: pointer;
	transition: all 0.15s ease;
}

/* ボタン内のアイコン（Dashicons）と文字の縦位置をぴったり中央に揃えます */
.reply-actions > .btn .dashicons,
.reply-actions > .btn .dashicons,
.reply-actions > form > .btn .dashicons,
.reply-actions > form > .btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	margin-right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* 通常の操作ボタン（返信、共有、編集、削除申請、通報）の背景色と文字色を定義します */
.reply-actions > .btn.reply-action-btn,
.reply-actions > .btn.copy-comment-url-btn,
.reply-actions > .btn.reply-edit-btn,
.reply-actions > .btn.reply-del-req-btn,
.reply-actions > .btn.reply-report-btn {
	background-color: var(--color-bg, #ffffff);
	color: var(--color-muted, #555555);
	border: 1px solid var(--color-border, #e5e7eb);
}

/* 通常ボタンにマウスを載せたときの色の変化を指定します */
.reply-actions > .btn.reply-action-btn:hover,
.reply-actions > .btn.copy-comment-url-btn:hover,
.reply-actions > .btn.reply-edit-btn:hover,
.reply-actions > .btn.reply-del-req-btn:hover,
.reply-actions > .btn.reply-report-btn:hover {
	background-color: var(--color-surface, #f5f5f5);
	color: var(--color-text, #1a1a1a);
	border-color: var(--color-text-muted, #888888);
}

/* いいね！ボタンの通常時（まだいいね！していない状態）の見た目です */
.reply-actions > form > .btn.reply-like-btn {
	background-color: var(--color-bg, #ffffff);
	color: var(--color-muted, #555555);
	border: 1px solid var(--color-border, #e5e7eb);
}

/* いいね！ボタンにマウスを載せたときの色の変化です */
.reply-actions > form > .btn.reply-like-btn:hover {
	background-color: var(--color-surface, #f5f5f5);
	color: var(--color-text, #1a1a1a);
	border-color: var(--color-text-muted, #888888);
}

/* 自分がすでに「いいね！」を押したあとの赤い強調表示スタイルです */
.reply-actions > form > .btn.reply-like-btn.liked {
	background-color: rgba(239, 68, 68, 0.05);
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.2);
}

/* いいね！済みボタンにマウスを載せたときは赤く塗りつぶします */
.reply-actions > form > .btn.reply-like-btn.liked:hover {
	background-color: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}

/* 削除ボタンの薄い赤枠と文字色のスタイルです */
.reply-actions > form > .btn.btn-danger {
	background-color: rgba(239, 68, 68, 0.05);
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.2);
}

/* 削除ボタンにマウスを載せたときは危険を示す赤で塗りつぶします */
.reply-actions > form > .btn.btn-danger:hover {
	background-color: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}

/* ベストアンサーに選ぶためのボタンを綺麗な緑色の枠線付きにします */
.reply-actions > form > .btn.btn-success {
	background-color: rgba(16, 185, 129, 0.05);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ベストアンサー選択ボタンにマウスを載せたときは緑で塗りつぶします */
.reply-actions > form > .btn.btn-success:hover {
	background-color: #10b981;
	color: #ffffff;
	border-color: #10b981;
}

/* ベストアンサー解除ボタンは削除と同様に危険を示す赤色にします */
.reply-actions > form > .btn.btn-danger {
	background-color: rgba(239, 68, 68, 0.05);
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.2);
}

/* ベストアンサー解除ボタンにマウスを載せたときは赤で塗りつぶします */
.reply-actions > form > .btn.btn-danger:hover {
	background-color: #ef4444;
	color: #ffffff;
	border-color: #ef4444;
}

/* Q&Aの投票用矢印ボタン群（▲/▼）を包む枠の高さを他のボタンに合わせます */
.reply-actions > .reply-vote-actions {
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin: 0;
	padding: 0;
}

/* 投票用form要素が余計な隙間を作らないように高さいっぱいに広げます */
.reply-actions > .reply-vote-actions form {
	display: flex;
	align-items: center;
	margin: 0;
	height: 100%;
}

/* 投票ボタン（▲と▼）を横並びにし、コンパクトな正方形のボタンにします */
.reply-actions > .reply-vote-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	width: 24px;
	padding: 0;
	font-size: 0.75rem;
	line-height: 1;
	border-radius: var(--radius, 4px);
	margin: 0 2px;
	border: 1px solid var(--color-border, #e5e7eb);
	background-color: var(--color-surface, #f5f5f5);
	color: var(--color-muted, #555555);
	cursor: pointer;
}

/* 投票ボタンにマウスを載せたときは少し濃いグレーにします */
.reply-actions > .reply-vote-actions .btn:hover {
	background-color: var(--color-border, #e5e7eb);
	color: var(--color-text, #1a1a1a);
}

/* すでに自分が投票した（アクティブな）投票ボタンをアクセントカラーで強調します */
.reply-actions > .reply-vote-actions .btn.btn-primary {
	background-color: var(--color-accent, #2563eb);
	color: #ffffff;
	border-color: var(--color-accent, #2563eb);
}

/* ============================================================
   Aero Forum ユーザープロフィールページ専用のスタイル定義
   ============================================================ */

/* プロフィール全体の最上部ヘッダーカードのコンテナ */
.aero-forum-theme .aero-profile-header-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* ダークモード時のヘッダーカードの影の微調整 */
.aero-dark-mode .aero-forum-theme .aero-profile-header-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* アバターとユーザー情報を横並びにするフレックスコンテナ */
.aero-forum-theme .aero-profile-header-flex {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* アバター画像を円形にして、白い境界線と浮き出る影をつける */
.aero-forum-theme .aero-profile-avatar-img {
  border-radius: 50%;
  border: 3px solid var(--color-bg, #ffffff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  width: 96px;
  height: 96px;
  object-fit: cover;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* アバター画像ホバー時にわずかに浮き上がらせる上品なエフェクト */
.aero-forum-theme .aero-profile-avatar-img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* ユーザー名とバッジ、登録日を縦に並べるコンテナ */
.aero-forum-theme .aero-profile-title-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ユーザー名と権限バッジを横並びにする行 */
.aero-forum-theme .aero-profile-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ユーザー名のテキストスタイル */
.aero-forum-theme .aero-profile-name-text {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  color: var(--color-text, #1a1a1a);
}

/* 権限バッジの基本スタイル */
.aero-forum-theme .aero-profile-role-chip {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1;
  display: inline-block;
}

/* 管理者ロール用のバッジ色設定 */
.aero-forum-theme .aero-profile-role-chip.role-admin {
  background-color: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #e11d48;
}

/* ダークモード時の管理者バッジ色設定 */
.aero-dark-mode .aero-forum-theme .aero-profile-role-chip.role-admin {
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fda4af;
}

/* モデレーターロール用のバッジ色設定 */
.aero-forum-theme .aero-profile-role-chip.role-moderator {
  background-color: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #16a34a;
}

/* ダークモード時のモデレーターバッジ色設定 */
.aero-dark-mode .aero-forum-theme .aero-profile-role-chip.role-moderator {
  background-color: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

/* 一般ユーザーロール用のバッジ色設定 */
.aero-forum-theme .aero-profile-role-chip.role-member {
  background-color: rgba(107, 114, 128, 0.08);
  border: 1px solid rgba(107, 114, 128, 0.2);
  color: #4b5563;
}

/* ダークモード時の一般ユーザーバッジ色設定 */
.aero-dark-mode .aero-forum-theme .aero-profile-role-chip.role-member {
  background-color: rgba(156, 163, 175, 0.15);
  border-color: rgba(156, 163, 175, 0.3);
  color: #cbd5e1;
}

/* フォーラム登録日を表示するテキスト */
.aero-forum-theme .aero-profile-joined-text {
  font-size: 0.875rem;
  color: var(--color-muted, #555555);
  margin: 0;
}

/* フォーラム内のプロフィール画面のカードやパーツを縦一列に並べるためのレイアウト設定です */
.aero-forum-theme .aero-profile-dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 左側のサイドバーコンテナ（自己紹介と統計実績） */
.aero-forum-theme .aero-profile-sidebar {
  flex: 0 0 280px; /* サイドバーの幅を少し狭めてメインコンテンツの領域を広げます */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 右側のメインコンテンツ領域（活動履歴とタブ切り替え） */
.aero-forum-theme .aero-profile-main-content {
  flex: 1;
  min-width: 0;
}

/* ダッシュボード内の共通カードスタイル */
.aero-forum-theme .aero-dashboard-card {
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* ダークモード時のカードの影の微調整 */
.aero-dark-mode .aero-forum-theme .aero-dashboard-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* カード内のタイトル（自己紹介やフォーラム実績） */
.aero-forum-theme .aero-dashboard-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text, #1a1a1a);
  border-bottom: none;
  padding-bottom: 0;
}

/* タイトル内の絵文字アイコンの余白調整 */
.aero-forum-container .card-title-icon {
  font-size: 1.2rem;
  display: inline-block;
}

/* 自己紹介テキストを表示するボックス */
.aero-forum-theme .aero-profile-bio-box {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1a1a1a);
}

/* 自己紹介が未登録のとき表示する薄いイタリック体のテキスト */
.aero-forum-theme .aero-profile-empty-italic {
  font-style: italic;
  color: var(--color-muted, #555555);
  margin: 0;
}

/* 実績統計行リストのコンテナ */
.aero-forum-theme .aero-profile-stats-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 個々の統計実績行（アイコン・ラベル・数値を一列に並べる） */
.aero-forum-theme .aero-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--color-surface, #f5f5f5);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* 統計実績行にホバーした際に背景色を白にして境界線を表示する */
.aero-forum-theme .aero-stat-row:hover {
  background-color: var(--color-bg, #ffffff);
  border-color: var(--color-border, #e5e7eb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

/* 統計実績行内の絵文字アイコンのスタイル */
.aero-forum-theme .aero-stat-row-icon {
  font-size: 1.1rem;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 統計実績行内のラベルテキスト（作成トピックなど） */
.aero-forum-theme .aero-stat-row-label {
  font-size: 0.875rem;
  color: var(--color-muted, #555555);
  flex-grow: 1;
  text-align: left;
}

/* 統計実績行内の数値（太字） */
.aero-forum-theme .aero-stat-row-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
}

/* 獲得いいね数やベストアンサー数に応じた特別なカラーアクセント */
.aero-forum-theme .aero-stat-row:nth-child(3) .aero-stat-row-value {
  color: #e11d48; /* いいねは温かみのある赤色 */
}
.aero-forum-theme .aero-stat-row:nth-child(4) .aero-stat-row-value {
  color: #d97706; /* ベストアンサーは格調高いゴールド色 */
}

/* 活動履歴のタブナビゲーションリスト */
.aero-forum-theme .aero-activity-tabs-nav {
  display: flex;
  justify-content: stretch; /* 横幅いっぱいに引き伸ばして均等に配置します */
  gap: 8px; /* タブ間の余白を調整します */
  border-bottom: 2px solid var(--color-border, #e5e7eb);
  margin-bottom: 20px;
  padding-bottom: 0;
  background: transparent;
}

/* 各タブボタンの初期化とホバーアニメーション設定 */
.aero-forum-theme .aero-activity-tab-item {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 8px; /* 横方向のパディングを増やしてゆとりを持たせます */
  margin: 0 0 -2px 0;
  font-size: 0.9rem; /* フォントサイズを少しスッキリさせます */
  font-weight: 600;
  color: var(--color-muted, #555555);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  line-height: 1.4;
  flex: 1; /* タブを均等な等幅にします */
  text-align: center; /* 文字を中央寄せにします */
  white-space: nowrap; /* 文字が途中で勝手に改行されるのを防ぎます */
}

/* マウスホバー時に文字を濃くする */
.aero-forum-theme .aero-activity-tab-item:hover {
  color: var(--color-text, #1a1a1a);
  background: transparent;
}

/* 選択されているアクティブタブのアクセントカラー表示 */
.aero-forum-theme .aero-activity-tab-item.active {
  color: var(--color-accent, #2563eb);
  border-bottom-color: var(--color-accent, #2563eb);
  background: transparent;
}

/* 活動履歴リストの箇条書きポレットと余白を完全にリセット */
.aero-forum-theme .aero-profile-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 個々の活動履歴アイテムの配置と境界線の設定 */
.aero-forum-theme .aero-profile-activity-item {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  transition: background-color 0.15s;
  background: transparent;
}

/* リストの最後のアイテムは下側の境界線を消去する */
.aero-forum-theme .aero-profile-activity-item:last-child {
  border-bottom: none;
}

/* 活動履歴の左側情報ブロック */
.aero-forum-theme .aero-activity-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

/* トピックタイトル等のリンクのスタイルとホバーフェード */
.aero-forum-theme .aero-activity-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  line-height: 1.4;
  transition: color 0.15s;
  text-decoration: none;
  display: inline-block;
}

/* トピックタイトルホバー時にアクセントカラーに変更 */
.aero-forum-theme .aero-activity-title:hover {
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
}

/* 返信やベストアンサー時の文脈テキスト */
.aero-forum-theme .aero-activity-context {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

/* 返信テキストの引用部分の枠線と余白調整 */
.aero-forum-theme .aero-activity-excerpt {
  margin: 8px 0;
  font-size: 0.875rem;
  color: var(--color-muted, #555555);
  border-left: 3px solid var(--color-border, #e5e7eb);
  padding: 2px 0 2px 12px;
  background: transparent;
  border-radius: 0;
}

/* 活動履歴のメタ情報（カテゴリや日付）の表示形式 */
.aero-forum-theme .aero-activity-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 極端に狭い場合は綺麗に複数行へ折り返すようにします */
  row-gap: 6px; /* 折り返した際の縦のスキマを設定します */
  column-gap: 12px;
  font-size: 0.75rem;
  color: var(--color-muted, #555555);
}

/* 活動履歴内の所属カテゴリ名チップ */
.aero-forum-theme .aero-activity-category {
  background: var(--color-surface, #f5f5f5);
  color: var(--color-muted, #555555);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap; /* カテゴリチップの中身が勝手に改行されないようにします */
}

/* 活動履歴の右側アクション/ステータスブロック */
.aero-forum-theme .aero-activity-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 解決/未解決のステータスバッジの共通デザイン */
.aero-forum-theme .aero-badge-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  line-height: 1;
}

/* 解決済ステータスのバッジ配色 */
.aero-forum-theme .aero-badge-status.solved {
  background-color: #dcfce7;
  color: #15803d;
}

/* ダークモード時の解決済バッジ配色 */
.aero-dark-mode .aero-forum-theme .aero-badge-status.solved {
  background-color: rgba(21, 128, 61, 0.15);
  color: #86efac;
}

/* 未解決ステータスのバッジ配色 */
.aero-forum-theme .aero-badge-status.open {
  background-color: #f3f4f6;
  color: #4b5563;
}

/* ダークモード時の未解決バッジ配色 */
.aero-dark-mode .aero-forum-theme .aero-badge-status.open {
  background-color: rgba(156, 163, 175, 0.15);
  color: #cbd5e1;
}

/* 活動履歴の詳細を表示するボタンの基本デザインと枠線フェード */
.aero-forum-theme .aero-activity-view-btn {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  color: var(--color-text, #1a1a1a);
  transition: all 0.15s;
  background: var(--color-bg, #ffffff);
  text-decoration: none;
}

/* 詳細表示ボタンホバー時に色を反転させて境界線を目立たせる */
.aero-forum-theme .aero-activity-view-btn:hover {
  border-color: var(--color-accent, #2563eb);
  color: var(--color-accent, #2563eb);
  background: var(--color-surface, #f5f5f5);
}

/* レスポンシブ対応（画面幅900px以下で2カラムを縦一列にする） */
@media (max-width: 900px) {
  .aero-forum-theme .aero-profile-header-flex {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .aero-forum-theme .aero-profile-name-row {
    justify-content: center;
  }

  .aero-forum-theme .aero-profile-dashboard-layout {
    flex-direction: column;
  }

  .aero-forum-theme .aero-profile-sidebar {
    flex: none;
    width: 100%;
  }

  .aero-forum-theme .aero-profile-activity-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .aero-forum-theme .aero-activity-right {
    align-self: flex-start;
  }
}

/* ============================================================
   Twitter風プロフィールページ専用の追加・上書きスタイル定義
   ============================================================ */

/* Twitter風デザインを適用したヘッダーカード */
.aero-forum-theme .aero-profile-header-card.twitter-style {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* ヘッダーバナー領域（美しいグラデーション） */
.aero-forum-theme .aero-profile-banner {
  height: 180px;
  width: 100%;
  background: linear-gradient(135deg, #1da1f2, #0f2a4a);
}

/* アバター画像とアクションボタンを配置するフレックスコンテナ */
.aero-forum-theme .aero-profile-avatar-action-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 24px;
  margin-top: -60px; /* バナーにアバターを半分重ねます */
  margin-bottom: 16px;
}

/* アバター画像を包むコンテナ */
.aero-forum-theme .aero-profile-avatar-container {
  position: relative;
  border-radius: 50%;
  background: var(--color-bg, #ffffff);
}

/* 自分のプロフィールの時のみアバターをホバー編集可能にします */
.aero-forum-theme .aero-profile-avatar-container.editable {
  cursor: pointer;
}

/* アバター画像のサイズと白い境界線の設定 */
.aero-forum-theme .aero-profile-avatar-container .aero-profile-avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--color-bg, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: block;
  background: var(--color-bg, #ffffff);
}

/* アバターホバー時に表示される薄暗いマスク（カメラマーク付き） */
.aero-forum-theme .aero-profile-avatar-container.editable:hover .aero-avatar-edit-overlay {
  opacity: 1;
}

/* アバターの上に重なる編集オーバーレイ */
.aero-forum-theme .aero-avatar-edit-overlay {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* カメラマークのフォントサイズ設定 */
.aero-forum-theme .aero-avatar-edit-overlay .edit-icon {
  color: #ffffff;
  font-size: 1.8rem;
}

/* アバターアップロード中のローディング用オーバーレイ */
.aero-forum-theme .aero-avatar-loading-overlay {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* ローディング時の回転する砂時計などの絵文字アニメーション */
.aero-forum-theme .aero-avatar-loading-overlay .loader-spinner {
  font-size: 2rem;
  animation: aeroSpinnerSpin 1s linear infinite;
}

@keyframes aeroSpinnerSpin {
  100% { transform: rotate(360deg); }
}

/* アクションボタン（プロフィールを編集）の配置 */
.aero-forum-theme .aero-profile-actions {
  margin-bottom: 8px;
}

/* Twitter風の丸みのある「プロフィールを編集」ボタンデザイン */
.aero-forum-theme .aero-btn-profile-edit {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  line-height: 1.4;
}

/* プロフィール編集ボタンのホバー時の微妙な背景フェード */
.aero-forum-theme .aero-btn-profile-edit:hover {
  background-color: var(--color-surface, #f5f5f5);
  border-color: var(--color-text-muted, #94a3b8);
}

/* ユーザー情報を配置する情報ブロック全体の余白 */
.aero-forum-theme .aero-profile-info-block {
  padding: 0 24px 24px 24px;
}

/* ユーザーログイン名（@username）のスタイル */
.aero-forum-theme .aero-profile-username-tag {
  font-size: 0.9rem;
  color: var(--color-muted, #555555);
  margin: 2px 0 12px 0;
}

/* 各種メタ情報（登録日など）を横に並べる行 */
.aero-forum-theme .aero-profile-meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-muted, #555555);
  margin-top: 12px;
}

.aero-forum-theme .meta-item-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* レスポンシブ対応（画面幅900px以下での微調整） */
@media (max-width: 900px) {
  .aero-forum-theme .aero-profile-banner {
    height: 120px;
  }

  .aero-forum-theme .aero-profile-avatar-action-row {
    margin-top: -45px;
    padding: 0 16px;
    margin-bottom: 8px;
  }

  .aero-forum-theme .aero-profile-avatar-container .aero-profile-avatar-img {
    width: 90px;
    height: 90px;
    border-width: 3px;
  }

  .aero-forum-theme .aero-profile-info-block {
    padding: 0 16px 16px 16px;
  }

  .aero-forum-theme .aero-btn-profile-edit {
    padding: 6px 14px;
    font-size: 0.8rem;
  }
}

/* カバー画像（バナー）の編集オーバーレイ定義 */
.aero-forum-theme .aero-profile-banner.editable {
  position: relative;
  cursor: pointer;
}

.aero-forum-theme .aero-profile-banner .aero-banner-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.aero-forum-theme .aero-profile-banner.editable:hover .aero-banner-edit-overlay {
  opacity: 1;
}

/* ============================================================
   リデザイン：フラット1カラムレイアウト（Twitter風）
   ============================================================ */

/* 1カラムにするためのコンテナの並び方向を縦に指定します */
.aero-forum-theme .aero-profile-dashboard-layout.flat-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 自己紹介テキストをアバターの下に表示するための余白と境界線です */
.aero-forum-theme .aero-profile-bio-text {
  margin-top: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1a1a1a);
  border-top: 1px solid var(--color-border, #f3f4f6);
  padding-top: 16px;
}

/* 自己紹介内の段落の隙間を綺麗に調整します */
.aero-forum-theme .aero-profile-bio-text .aero-bio-paragraph {
  margin: 0 0 8px 0;
}
.aero-forum-theme .aero-profile-bio-text .aero-bio-paragraph:last-child {
  margin-bottom: 0;
}

/* 実績の数値を横一列に並べるためのグリッドレイアウト指定です */
.aero-forum-theme .aero-profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 4px;
}

/* 実績アイテムの枠線や背景、影などをスタイリッシュに装飾します */
.aero-forum-theme .aero-stat-grid-item {
  background: var(--color-surface, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 0;
}

/* ホバー時にカードが少し上に浮き上がるマイクロアニメーションです */
.aero-forum-theme .aero-stat-grid-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 実績の絵文字アイコンを中央揃えで綺麗に配置します */
.aero-forum-theme .aero-stat-grid-icon {
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* アイコンの右側のテキスト情報を縦に整列させる設定です */
.aero-forum-theme .aero-stat-grid-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* トピック作成などのラベル文字を小さめにして見栄えを良くします */
.aero-forum-theme .aero-stat-grid-label {
  font-size: 0.72rem;
  color: var(--color-muted, #555555);
  font-weight: 600;
  white-space: normal;
  word-break: break-all;
  line-height: 1.25;
}

/* 実績の数値を太字で大きく表示させて強調します */
.aero-forum-theme .aero-stat-grid-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  line-height: 1.2;
}

/* 横並びスタッツカード全体のパディング調整です */
.aero-forum-theme .aero-stats-grid-card {
  padding: 20px;
}

/* タブレットなどの画面幅では実績カードを2列に折り返します */
@media (max-width: 992px) {
  .aero-forum-theme .aero-profile-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* スマートフォンの縦持ち画面では実績カードを縦1列に並べます */
@media (max-width: 480px) {
  .aero-forum-theme .aero-profile-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .aero-forum-theme .aero-stat-grid-item {
    padding: 12px 16px;
  }
}
/* 古いHTML構造がキャッシュで表示された場合でも、サイドバーを全幅にして縦並びにするための設定です */
.aero-forum-theme .aero-profile-sidebar {
  flex: none;
  width: 100%;
}

/* 古いHTML構造がキャッシュで表示された場合でも、活動履歴エリアを全幅にして縦並びにするための設定です */
.aero-forum-theme .aero-profile-main-content {
  flex: none;
  width: 100%;
}

/* 管理者用のアクションアイコンボタンのスタイルです */
.aero-forum-theme .aero-admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* ホバーしたときに丸いグレーの背景を浮かび上がらせます */
.aero-forum-theme .aero-admin-icon-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

/* クリックしたときに少し小さくなるアクティブエフェクトです */
.aero-forum-theme .aero-admin-icon-btn:active {
  transform: scale(0.95);
}

/* --- Twitter（X）風の返信カードレイアウト --- */
.aero-forum-theme .aero-reply-item {
  display: flex;
  gap: 12px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px; /* 少し角丸を大きくしてTwitter風に */
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-s);
}

/* 左側のアバターカラム */
.reply-avatar-col {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.reply-avatar-col .avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.reply-avatar-col .avatar-char {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary, #3b82f6);
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1rem;
}

/* 右側のコンテンツカラム */
.reply-content-col {
  flex-grow: 1;
  min-width: 0; /* 文字の折り返し用 */
}

/* ヘッダーの調整 */
.aero-forum-theme .aero-reply-item .reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none; /* 下の点線を非表示に */
  padding-bottom: 0;
  margin-bottom: 4px;
}

.aero-forum-theme .aero-reply-item .reply-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #64748b);
}

.aero-forum-theme .aero-reply-item .reply-author {
  font-weight: bold;
  color: var(--color-text, #1e293b);
  /* 名前がアバターや日付に対して上下にずれないようにフレックスボックスで中央揃えにします */
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.aero-forum-theme .aero-reply-item .reply-author .aero-author-link {
  color: inherit;
  text-decoration: none;
  /* 会員リンクの場合も名前がズレないように中央揃えにします */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* 記事下のプロフィールブロック用のマージンを打ち消して上下のズレを防ぎます */
  margin-top: 0;
}

.aero-forum-theme .aero-reply-item .reply-author .aero-author-link:hover {
  text-decoration: underline;
}

.aero-forum-theme .aero-reply-item .reply-meta-sep {
  /* 中点は表示せず、余白だけにするために非表示に設定します */
  display: none;
}

.aero-forum-theme .aero-reply-item .reply-date-link {
  color: var(--color-text-secondary, #64748b);
  text-decoration: none;
}

.aero-forum-theme .aero-reply-item .reply-date-link:hover {
  text-decoration: underline;
}

.aero-forum-theme .aero-reply-item .reply-number {
  font-weight: normal;
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  margin-right: 0;
}

/* 操作ボタン群 */
.aero-forum-theme .aero-reply-item .reply-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 本文の調整 */
.aero-forum-theme .aero-reply-item .reply-content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text, #1e293b);
  margin-top: 4px;
  margin-bottom: 8px;
}

/* --- 9. レスアンカーリンクとホバープレビューのスタイル定義 --- */

/* レスアンカーリンクの基本の配色とホバー時のスタイルです */
.aero-reply-link {
	color: var(--color-accent, #2563eb);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
}

/* レスアンカーリンクにホバーした際に下線を引き、色を変化させます */
.aero-reply-link:hover {
	text-decoration: underline;
	color: var(--color-link-hover, #1d4ed8);
}

/* ポップアッププレビューカードの装飾です */
.aero-reply-preview-card {
	/* ポップアップを他の要素の最前面に表示するために絶対配置と高いZインデックスを設定します */
	position: absolute;
	z-index: 10000;
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	padding: 16px;
	max-width: 480px;
	width: 90vw;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text, #1e293b);
	/* プレビューカード自体にマウスが乗ってもホバー判定が途切れてカードが消えないよう、マウスイベントを無効化します */
	pointer-events: none;
	opacity: 0;
	/* 滑らかに表示するためのアニメーション時間を設定します */
	transition: opacity 0.2s ease, transform 0.2s ease;
	transform: translateY(5px);
}

/* プレビューカードが表示状態のときの透過度と表示位置です */
.aero-reply-preview-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* プレビューカード内のヘッダー行およびトピックヘッダー行のレイアウトです */
.aero-reply-preview-card .reply-header,
.aero-reply-preview-card .aero-topic-header {
	border-bottom: 1px dashed var(--color-border, #e2e8f0);
	padding-bottom: 6px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	font-size: 0.8rem;
	color: var(--color-text-secondary, #64748b);
}

/* プレビューカード内に表示するトピックタイトルのスタイルです */
.aero-reply-preview-card .topic-title {
	font-size: 1.1rem;
	margin: 0 0 6px 0;
	font-weight: bold;
}

/* 暗い画面設定（ダークモード）の際のプレビューカードの影の調整です */
.aero-dark-mode .aero-reply-preview-card {
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* トピック一覧やトップページなどの投稿者名表示の縦方向のズレを防ぐ設定です */
.topic-author {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.topic-author .aero-author-link {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	/* プロフィールブロック用のマージンをクリアして、縦の並びを綺麗に揃えます */
	margin-top: 0;
}