a.logo {
  text-decoration: none;
}

@media (hover: none) {
  .r-btn:hover { 
    border-color: var(--border);
    color: var(--sub);
    background: var(--bg3);
  }
}

.posts-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--pa);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.posts-loading {
  display: flex;
  justify-content: center;
  padding: 60px 0;
  width: 100%;
  align-self: stretch;
}

/* ============================================================
   投稿専用カラー変数
   ============================================================ */
:root {
  --pa:        #2a9d8f;   /* メインティール */
  --pa-dark:   #1a7a6e;   /* ダークティール（hover等） */
  --pa-light:  #eaf6f5;   /* 薄ティール（背景） */
  --pa-border: #9fe1d8;   /* ティール系ボーダー */
}

/* ============================================================
   ヘッダー拡張
   ロゴの「投稿」部分だけティール色にする
   ============================================================ */
.logo .logo-pa { color: var(--pa); }

/* ヘッダー内のナビチップ hover をティールに上書き */
.nav-link-chip:hover {
  border-color: var(--pa);
  color: var(--pa);
}

/* ============================================================
   レイアウト（本体準拠・サイドバー幅のみ変数化）
   ============================================================ */
.posts-layout {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* サイドバー */
.posts-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  margin-top: 24px;
  display: none;
}

/* メインコンテンツ */
.posts-main {
  flex: 1;
  min-width: 0;
  padding: 24px 0;
}

/* ============================================================
   サイドバーカード・ナビ
   ============================================================ */
.sidebar-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.sidebar-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
  margin-bottom: 4px;
}
.sidebar-nav-item:hover            { background: var(--bg3); color: var(--pa); }
.sidebar-nav-item.active           { background: rgba(42,157,143,0.10); color: var(--pa); }
.sidebar-nav-item.female-item:hover  { color: var(--female); }
.sidebar-nav-item.female-item.active { background: rgba(240,96,122,0.10); color: var(--female); }
.sidebar-nav-item.male-item:hover    { color: var(--male); }
.sidebar-nav-item.male-item.active   { background: rgba(74,127,224,0.10); color: var(--male); }

/* ジャンル・性別ドット */
.genre-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pa);
  flex-shrink: 0;
}
.genre-dot.female { background: var(--female); }
.genre-dot.male   { background: var(--male); }
.genre-dot.all    { background: var(--sub); }

/* ============================================================
   投稿CTAボタン（サイドバー・モバイルツールバー共通）
   ============================================================ */
.btn-post-cta {
  display: block;
  width: 100%;
  background: var(--pa);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-post-cta:hover { opacity: 0.85; }

/* ============================================================
   モバイルツールバー・フィルタ
   ============================================================ */
.mobile-toolbar {
  display: none;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.mobile-toolbar::-webkit-scrollbar { display: none; }

.mobile-post-btn {
  text-decoration: none;
  background: var(--pa);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* モバイル検索バー */
.search-bar-mobile {
  display: none;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
  gap: 10px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.search-bar-mobile input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.search-bar-mobile input::placeholder { color: var(--sub); }

/* モバイルフィルタチップ行 */
.mobile-filter-wrap { display: none; margin-bottom: 14px; }

.mobile-filter-row-wrap {
  position: relative;
}
.mobile-filter-row-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}

.mobile-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
  margin-bottom: 6px;
}
.mobile-filter-row::-webkit-scrollbar { display: none; }

.mobile-filter-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding-left: 2px;
}

/* フィルタチップ共通 */
.filter-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.18s;
  flex-shrink: 0;
}
.filter-chip:hover           { border-color: var(--pa); color: var(--pa); }
.filter-chip.active          { background: var(--pa); border-color: var(--pa); color: #fff; }
.filter-chip.female:hover    { border-color: var(--female); color: var(--female); }
.filter-chip.female.active   { background: var(--female); border-color: var(--female); color: #fff; }
.filter-chip.male:hover      { border-color: var(--male); color: var(--male); }
.filter-chip.male.active     { background: var(--male); border-color: var(--male); color: #fff; }

/* ============================================================
   ヘッダー検索バー（PC）
   ============================================================ */
.header-search {
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  gap: 8px;
  width: 300px;
  transition: border-color 0.2s;
}
.header-search:focus-within { border-color: var(--pa); }
.header-search input {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  width: 100%;
}
.header-search input::placeholder { color: var(--sub); }

.hd-header-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
}

/* HOMEアイコンボタン */
.hd-home-btn {
  width: 34px;
  height: 34px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--sub);
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.hd-home-btn:hover {
  border-color: var(--pa);
  color: var(--pa);
}

/* ============================================================
   一覧ヘッダー
   ============================================================ */
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.list-title {
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* タイトル左の装飾ドット */
.list-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pa);
  display: inline-block;
  flex-shrink: 0;
}

.list-count {
  font-size: 13px;
  color: var(--sub);
  font-weight: 400;
}

/* タグ検索中バナー */
.search-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pa-light);
  border: 1px solid var(--pa-border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--pa-dark);
  margin-bottom: 14px;
}
.search-status-clear {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--pa-dark);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================================
   投稿カード（一覧）
   左4pxティールボーダーが質問カードとの差別化ポイント
   ============================================================ */
.post-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  border-color: var(--pa);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42,157,143,0.12);
}

.post-card-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--text);
}

.post-card-time {
  font-size: 12px;
  color: var(--sub);
  margin-left: auto;
}

/* 本文プレビュー（3行で省略） */
.post-card-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--sub);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* タグ行（ジャンル・ユーザータグを同列配置） */
.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

/* ジャンルバッジ（ティール系） */
.tag-genre {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pa-light);
  color: var(--pa-dark);
  border: 1px solid var(--pa-border);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.tag-genre:hover { background: var(--pa); color: #fff; border-color: var(--pa); }

/* ユーザータグ（グレー系） */
.tag-user {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg3);
  color: var(--sub);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.tag-user:hover { background: var(--pa-light); color: var(--pa-dark); border-color: var(--pa-border); }

/* カードフッター（リアクション・コメント数） */
.post-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.post-card-gender {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}
.post-card-gender.female { background: rgba(240,96,122,0.12); color: var(--female); }
.post-card-gender.male   { background: rgba(74,127,224,0.12);  color: var(--male); }
.post-card-gender.none   { display: none; }

/* リアクション表示 */
.post-reaction {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--sub);
}
.post-reaction-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.post-reaction-icon.like { background: rgba(240,96,122,0.15); }
.post-reaction-icon.feel { background: rgba(42,157,143,0.15); }
.post-reaction-icon.lol  { background: rgba(46,204,113,0.15); }
.post-reaction-icon.wow  { background: rgba(230,126,34,0.15); }

.post-comment-count {
  font-size: 12px;
  color: var(--sub);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.post-comment-count svg {
  width: 13px;
  height: 13px;
  opacity: 0.45;
  flex-shrink: 0;
}

/* 投稿一覧コンテナ */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* もっと見るボタン */
.btn-load-more {
  display: block;
  margin: 24px auto;
  padding: 12px 40px;
  background: none;
  border: 2px solid var(--pa);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pa);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.btn-load-more:hover { background: var(--pa); color: #fff; }
.btn-load-more:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   投稿詳細カード
   ============================================================ */
.post-detail-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 20px 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.post-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* 性別バッジ（詳細） */
.post-gender-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
}
.post-gender-badge.female { background: rgba(240,96,122,0.12); color: var(--female); }
.post-gender-badge.male   { background: rgba(74,127,224,0.12);  color: var(--male); }

.post-detail-time {
  font-size: 12px;
  color: var(--sub);
}

.post-detail-title {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* 本文折りたたみ */
.post-body-wrap { position: relative; }

.post-body {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 16行で折りたたみ */
.post-body.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 16;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 折りたたみ時のグラデーションフェード */
.post-body-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg2));
  pointer-events: none;
}

/* 「全文を読む」ボタン */
.btn-expand-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  background: var(--pa-light);
  border: 1px solid var(--pa-border);
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-dark);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-expand-body:hover { background: var(--pa); color: #fff; border-color: var(--pa); }

/* 詳細タグ行 */
.post-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 添付画像 */
.post-detail-image {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  background: var(--bg3);
}

/* ============================================================
   リアクションセクション
   ============================================================ */
.reaction-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.reaction-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* リアクションボタン共通 */
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
  cursor: pointer;
  transition: all 0.18s;
  user-select: none;
}
.r-btn svg { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.8; }

.r-btn.like:hover { border-color: var(--female); color: var(--female); background: rgba(240,96,122,0.10); }
.r-btn.feel:hover { border-color: #7c5cbf;        color: #7c5cbf;        background: rgba(124,92,191,0.10); }
.r-btn.lol:hover  { border-color: #27ae60;         color: #27ae60;        background: rgba(39,174,96,0.10); }
.r-btn.wow:hover  { border-color: #e67e22;         color: #e67e22;        background: rgba(230,126,34,0.10); }

/* アクティブ状態（各リアクション色） */
.r-btn.on.like { border-color: var(--female); background: rgba(240,96,122,0.10); color: var(--female); }
.r-btn.on.feel { border-color: #7c5cbf; background: rgba(124,92,191,0.10); color: #7c5cbf; }
.r-btn.on.lol  { border-color: #27ae60;        background: rgba(39,174,96,0.10);   color: #27ae60; }
.r-btn.on.wow  { border-color: #e67e22;        background: rgba(230,126,34,0.10);  color: #e67e22; }

.r-btn .r-cnt { font-size: 14px; }

/* 投稿者削除リンク */
.post-owner-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.btn-delete-post {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--sub);
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.5;
}
.btn-delete-post:hover { opacity: 1; color: var(--accent); }

/* ============================================================
   コメントセクション（本体 app7.css 準拠・色のみティール）
   ============================================================ */
.section-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--sub);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label-count {
  font-size: 13px;
  color: var(--sub);
  font-weight: 400;
  letter-spacing: 0;
}

/* 過去コメント読み込みボタン */
.btn-load-comments {
  display: block;
  width: 100%;
  background: none;
  border: 2px solid var(--pa);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pa);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  margin-bottom: 16px;
  transition: background 0.15s, color 0.15s;
}
.btn-load-comments:hover { background: var(--pa); color: #fff; }

/* コメントリスト */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.comment-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.comment-item:last-child { border-bottom: none; }

/* コメントヘッダー行 */
.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

/* 性別バッジ（コメント用。本体 gender-badge 準拠） */
.gender-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}
.gender-badge.female {
  color: var(--female);
  background: color-mix(in srgb, var(--female) 15%, transparent);
}
.gender-badge.male {
  color: var(--male);
  background: color-mix(in srgb, var(--male) 15%, transparent);
}

.comment-seq  { color: var(--sub); }

/* 時間は margin-left:auto で右端へ */
.comment-time { color: var(--sub); margin-left: auto; }

/* 自分のコメント削除ボタン（時間の右隣） */
.btn-comment-delete {
  background: none;
  border: none;
  color: var(--sub);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  opacity: 0.5;
  padding: 0;
}
.btn-comment-delete:hover { opacity: 1; color: var(--accent); }

.comment-body {
  font-size: 1.0rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 返信ボタン */
.btn-reply {
  font-size: 11px;
  color: var(--sub);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.6;
  font-family: inherit;
  margin-top: 4px;
}
.btn-reply:hover       { opacity: 1; color: var(--pa); }
.btn-reply.replying    { opacity: 1; color: var(--pa); }

/* 「古い返信を読み込む」ボタン */
.btn-load-old-replies {
  background: none;
  border: none;
  color: var(--pa);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-weight: 700;
  margin-top: 6px;
  display: block;
}

/* 返信リスト */
.reply-list {
  margin-top: 8px;
  margin-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reply-item {
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* 返信フォーム */
.reply-form {
  margin-top: 8px;
  background: var(--bg2);
  border-radius: 8px;
  padding: 10px;
}
.reply-to-label {
  font-size: 0.8rem;
  color: var(--sub);
  margin-bottom: 6px;
}
.comment-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.btn-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--sub);
  font-family: inherit;
}

/* コメント投稿フォーム */
.comment-post-form {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.comment-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.comment-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.2s;
}
.comment-textarea:focus        { border-color: var(--pa); }
.comment-textarea::placeholder { color: var(--sub); }

.comment-submit {
  align-self: flex-end;
  background: var(--pa);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  cursor: pointer;
  transition: opacity 0.2s;
}
/*.comment-submit:hover    { opacity: 0.85; }*/
.comment-submit:hover { background: var(--pa-dark); opacity: 1; transform: none; }
.comment-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Cookie未登録バナー（コメント・リアクション用）
   ============================================================ */
.cookie-required-banner {
  background: rgba(232,54,74,0.07);
  border: 1px solid rgba(232,54,74,0.2);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-register {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   投稿フォームページ
   ============================================================ */
.post-form-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* 戻るリンク */
/*.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--sub);
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  text-decoration: none;
  transition: color 0.15s;
}*/
.back-link { background: none; border: none; color: var(--sub); font-family: inherit; font-size: 14px; cursor: pointer; padding: 8px 0; display: block; transition: color 0.15s;text-decoration: none; }
.back-link:hover { color: var(--pa); }
.back-link svg   { width: 15px; height: 15px; }

/* フォームカード */
.form-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}

.form-card-title {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-card-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pa);
  flex-shrink: 0;
}

/* フォームパーツ（本体準拠） */
.form-group  { margin-bottom: 22px; }
.form-label  {
  font-size: 13px;
  font-weight: 700;
  color: var(--sub);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.label-required {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}
.label-optional {
  font-size: 10px;
  font-weight: 700;
  color: var(--sub);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.form-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus        { border-color: var(--pa); }
.form-input::placeholder { color: var(--sub); }

.form-textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
  min-height: 180px;
}
.form-textarea:focus        { border-color: var(--pa); }
.form-textarea::placeholder { color: var(--sub); }

/* 文字数カウンター */
.char-count      { font-size: 12px; color: var(--sub); text-align: right; margin-top: 4px; }
.char-count.warn { color: var(--accent); }

/* ジャンル選択ボタン */
.genre-group { display: flex; gap: 8px; flex-wrap: wrap; }

.genre-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
  cursor: pointer;
  transition: all 0.18s;
}
.genre-btn:hover          { border-color: var(--pa); color: var(--pa); }
.genre-btn.selected       { border-color: var(--pa); background: var(--pa-light); color: var(--pa-dark); }

/* ジャンルボタン内のチェックアイコン */
.genre-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  color: transparent;
  transition: all 0.15s;
}
.genre-btn.selected .genre-check {
  background: var(--pa);
  border-color: var(--pa);
  color: #fff;
}

/* タグ入力 */
.tag-input-wrap {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  cursor: text;
  transition: border-color 0.2s;
}
.tag-input-wrap:focus-within { border-color: var(--pa); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pa-light);
  color: var(--pa-dark);
  border: 1px solid var(--pa-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
}
.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pa-dark);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.6;
  display: flex;
  align-items: center;
}
.tag-chip-remove:hover { opacity: 1; }

.tag-input {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  min-width: 80px;
  flex: 1;
}
.tag-input::placeholder { color: var(--sub); }

.tag-hint { font-size: 12px; color: var(--sub); margin-top: 6px; }

/* 画像アップロードエリア */
.image-upload-area {
  position: relative;
  width: 100%;
  min-height: 110px;
  background: var(--bg3);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  overflow: hidden;
}
.image-upload-area:hover { border-color: var(--pa); background: var(--bg2); }
.image-upload-icon { font-size: 28px; line-height: 1; }
.image-upload-text { font-size: 14px; font-weight: 700; color: var(--sub); }
.image-upload-sub  { font-size: 12px; color: var(--sub); opacity: 0.7; }

/* 画像プレビュー */
.image-preview-wrap {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg3);
}
.image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  background: var(--bg3);
}
.image-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.image-remove-btn:hover { background: rgba(0,0,0,0.8); }

/* パスワード補足テキスト */
.pw-note { font-size: 12px; color: var(--sub); margin-top: 6px; line-height: 1.6; }

/* フォーム区切り線 */
.form-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* 送信ボタンエリア */
.submit-wrap { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

.submit-btn-main {
  display: block;
  width: 100%;
  background: var(--pa);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  padding: 17px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
}
.submit-btn-main:hover    { opacity: 0.85; }
.submit-btn-main:disabled { opacity: 0.45; cursor: not-allowed; }

.submit-note { font-size: 12px; color: var(--sub); text-align: center; line-height: 1.7; }

/* エラーメッセージ */
.error-msg {
  font-size: 14px;
  color: var(--accent);
  background: rgba(232,54,74,0.08);
  border: 1px solid rgba(232,54,74,0.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.error-msg svg { width: 16px; height: 16px; flex-shrink: 0; }

/* 画像あり投稿カード（左サムネ＋右テキスト横並び） */
.post-card--has-image .post-card-inner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* サムネイル */
.post-card-thumb {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--border);
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* サムネありのときのテキスト側 */
.post-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* サムネありのときは本文を2行に抑える */
.post-card--has-image .post-card-body {
  -webkit-line-clamp: 2;
}

/* コメント本文：改行を正しく表示（pre-wrap）、nl2br不要 */
.comment-body {
  white-space: pre-wrap;
  word-break: break-word;
}
/* ============================================================
   本体の dark クラスに乗っかる形で投稿専用要素を調整
   ============================================================ */
body.dark .post-card,
body.dark .post-detail-card,
body.dark .section-card,
body.dark .form-card,
body.dark .sidebar-card {
  /* 本体変数が dark 時に切り替わるので基本は追加不要。
     投稿固有の要素でずれが出た場合のみここに追記する。 */
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (min-width: 900px) {
  .posts-sidebar      { display: block; }
  .mobile-toolbar     { display: none; }
  .search-bar-mobile  { display: none; }
  .mobile-filter-wrap { display: none; }
  .header-search      { display: flex; }
}

@media (max-width: 899px) {
  .posts-layout       { display: block; padding: 0 16px; }
  .posts-sidebar      { display: none; }
  .posts-main         { padding: 16px 0; }
  .mobile-toolbar     { display: flex; }
  .search-bar-mobile  { display: flex; }
  .mobile-filter-wrap { display: block; }
  .header-search      { display: none !important; }
  .post-form-wrap     { padding: 20px 16px 48px; }
  .form-card          { padding: 20px 16px; }
}


/* 一覧空状態 */
.list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px 32px;
  gap: 10px;
}
.list-empty-svg {
  width: 120px;
  height: 120px;
  --comment-empty-stroke: var(--border);
  --comment-empty-line: var(--border);
}
.list-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.list-empty-sub {
  font-size: 13px;
  color: var(--sub);
  margin: 0;
}
.list-empty-reset {
  margin-top: 4px;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--sub);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.list-empty-reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}