/* ===========================================================================
   講師との掲示板（.bbs-*）── 2026-09-06 に summit/css/local.css から移した

   ▲ **summit と speaking-summit の両方のダッシュボードで使う。**
      中身は `summit/chat/ref.php` と `speaking-summit/chat/ref.php`（同じ markup）で、
      どちらもダッシュボードに読み込まれる。

   ▲ **だからここは `css/member/` に置く。**
      これまで `summit/css/local.css` にしか無く、
      **speaking-summit のダッシュボードでは掲示板が素の見た目になっていた**
      （ss の index.php は summit の local.css を読まない。読むのは下位ページの
      `speaking-summit/common/page.php` だけ）。読み込みは
      `css/includes/member-css.php` の1か所で全画面に届く。
      → みんなの掲示板（`css/member/forum.css`）と同じ扱い。
   =========================================================================== */

/* 本文中の URL（pb_linkify）。別タブで開く */
.pb-inline-link { color: var(--ui-action); text-decoration: underline; word-break: break-all; }
.pb-inline-link:hover { color: var(--ui-ink-head); }

/* ===== 新規投稿フォームパネル ===== */
.bbs-new-thread-panel {
  background: var(--ui-surface-head);
  border-bottom: 1px solid var(--ui-line);
  padding: 14px 4px;
}
.bbs-form-label {
  font-size: var(--ui-fs-body);
  font-weight: 700;
  color: var(--ui-ink-head);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bbs-form-label i { color: var(--ui-action); font-size: var(--ui-fs-body); }
/* 入力欄は .mui-input / .mui-textarea / .mui-select（css/member/ui.css）。2026-10-08 に Bootstrap の form-control から寄せた */
.bbs-form-divider {
  height: 1px;
  background: var(--ui-line);
  margin: 14px 0;
}
.bbs-notify-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bbs-notify-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ui-surface);
  border: 1.5px solid var(--ui-line);
  border-radius: var(--ui-r-ctl);
  padding: 4px 12px;
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.bbs-notify-chip input[type="checkbox"] { accent-color: var(--ui-action); width: 13px; height: 13px; }
.bbs-notify-chip:has(input:checked) {
  border-color: var(--ui-action);
  background: var(--ui-action-bg);
  color: var(--ui-action);
  font-weight: 600;
}
.bbs-form-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ui-ink-head);
  color: var(--ui-surface);
  border: none;
  border-radius: var(--ui-r-ctl);
  padding: 9px 24px;
  font-size: var(--ui-fs-body);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
}
.bbs-form-submit-btn:hover { opacity: 0.85; }
.bbs-form-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== BBS Cards =====
   ▲ **投稿を1件ずつ囲わない**（2026-09-06・Step 4・ユーザー指摘）。
   器（掲示板タイル）の中でカードがもう一度 面＋罫＋角丸 を持っており、二重枠だった。
   いまは `.mui-rows` / `.mui-row` と同じで、**罫で区切るだけ**。未読の行だけ面を敷く。
   ▲ 下の余白は器（`section.chat` の padding）が持つ。ここに `margin-bottom: 2rem` を
   足すと、タイルの底に何も無い帯ができる。 */
.bbs-threads-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.bbs-card {
  background: none;
  border: none;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  padding: 14px 2px 12px;
}
.bbs-card:last-child { border-bottom: none; padding-bottom: 4px; }

/* バッジ */
.bbs-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* タイトル・メタ */
.bbs-title {
  font-size: var(--ui-fs-card);
  font-weight: 700;
  color: var(--ui-ink-head);
  line-height: 1.4;
}
.bbs-meta {
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink-muted);
  margin-top: 3px;
}

/* 本文プレビュー */
.bbs-body { margin: 10px 0 0; }
.bbs-content-outer {
  /* ▲ **outer にも font-size を置く**（2026-09-06）。em は継承した 16px で
     計算されるので、中の 14px の行の整数倍にならず4行目が半分見えていた。 */
  font-size: var(--ui-fs-body);
  position: relative;
  overflow: hidden;
  max-height: 4.95em;
  line-height: 1.65;
}
.bbs-content-outer.expanded { max-height: none; }
.bbs-content-text {
  font-size: var(--ui-fs-body);
  color: var(--ui-ink);
  line-height: 1.65;
}
.bbs-content-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.65em;
  background: linear-gradient(transparent, var(--ui-surface));
  pointer-events: none;
}
.bbs-content-outer.expanded .bbs-content-fade { display: none; }

.bbs-expand-btn {
  background: none;
  border: none;
  color: var(--ui-ink-head);
  font-size: var(--ui-fs-body);
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.bbs-expand-btn:hover { opacity: 0.75; }
.bbs-expand-btn i { transition: transform 0.3s; }
.bbs-expand-btn.expanded i { transform: rotate(180deg); }

/* アクションバー */
.bbs-action-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-line);
}
.bbs-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 8px 16px;
  border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-body);
  color: var(--ui-ink-muted);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
  font-weight: 500;
  line-height: 1;
}
.bbs-action-btn i { font-size: 20px; }
.bbs-action-btn:hover { color: var(--ui-action); background: var(--ui-surface-sunken); }
/* 自分がいいねしている状態（/admin/bugfix/ #61）。
   🔴 **押せているかどうかはハートの塗りで示す。** マークアップは liked のとき
   `fa-solid fa-heart` に切り替わっており、**Font Awesome Free の塗りのハート**が出る
   （自作アイコンセットは `fa-heart` を持たない。持たせると solid と regular の
   区別ごと消えて、色しか変わらなくなる）。**器は塗らない・枠も付けない。** */
.bbs-action-btn.liked { color: var(--ui-action); }
.bbs-action-count { font-size: var(--ui-fs-body); }

/* コメントセクション */
.bbs-comment-divider { height: 1px; background: var(--ui-line); margin: 12px 0; }
.bbs-comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bbs-comment-item {
  padding: 12px 14px;
  background: var(--ui-surface-sunken);
  border-radius: var(--ui-r-card);
}
.bbs-comment-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.bbs-commenter-name { font-size: var(--ui-fs-body); font-weight: 700; color: var(--ui-ink-head); }
.bbs-comment-dt { font-size: var(--ui-fs-meta); color: var(--ui-line-strong); }
.bbs-comment-body { font-size: var(--ui-fs-body); color: var(--ui-ink); line-height: 1.65; }
.bbs-comment-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.bbs-comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 10px;
  border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-body);
  color: var(--ui-line-strong);
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.bbs-comment-like-btn i { font-size: var(--ui-fs-card); }
.bbs-comment-like-btn:hover { color: var(--ui-action); background: var(--ui-surface-sunken); }
.bbs-comment-like-btn.liked { color: var(--ui-action); }

.bbs-no-comment { text-align: center; color: var(--ui-line-strong); font-size: var(--ui-fs-body); padding: 10px; }

/* コメントフォーム */
.bbs-comment-form { margin-top: 10px; }
.bbs-notify-summary {
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bbs-notify-summary::-webkit-details-marker { display: none; }
.bbs-comment-input-wrap { margin-top: 8px; }
.bbs-comment-foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.bbs-word-count-label { font-size: var(--ui-fs-meta); color: var(--ui-ink-muted); }
.bbs-submit-btn {
  background: var(--ui-action);
  color: var(--ui-surface);
  border: none;
  padding: 8px 24px;
  border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}
.bbs-submit-btn:hover { background: var(--ui-primary-hover); }
.bbs-submit-btn:active { transform: scale(0.97); }
.bbs-submit-btn:disabled { background: var(--ui-line-strong); cursor: not-allowed; transform: none; }

/* 未読インジケーター。囲わず、行に薄い面だけ敷く（`.mui-row.is-on` と同じ） */
.bbs-card.has-unread {
  background: var(--ui-surface-sunken);
  padding-left: 10px;
  padding-right: 10px;
}
.bbs-unread-pip {
  display: inline-block;
  background: var(--ui-action);
  color: var(--ui-surface);
  font-size: var(--ui-fs-micro);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--ui-r-pill);
  line-height: 1.4;
  animation: bbs-pip-pulse 2s ease-in-out infinite;
}
@keyframes bbs-pip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* スレッドタイプ比較表 */
.bbs-type-compare {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  overflow: hidden;
}
.bbs-type-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-fs-meta);
}
.bbs-type-compare th,
.bbs-type-compare td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--ui-line);
  text-align: center;
  white-space: nowrap;
}
.bbs-type-compare tr:last-child td { border-bottom: none; }
.bbs-type-compare th:first-child,
.bbs-type-compare td:first-child { text-align: left; color: var(--ui-ink-muted); min-width: 72px; }
.bbs-type-compare thead th { background: var(--ui-action-bg); font-size: var(--ui-fs-meta); font-weight: 700; color: var(--ui-ink-head); }
.tc-yes { color: var(--ui-ok-ink); font-weight: 700; }
.tc-no  { color: var(--ui-danger-ink); }
.tc-active-col { background: var(--ui-action-bg); }

/* Tooltip */
.like-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.78);
  color: var(--ui-surface);
  font-size: var(--ui-fs-meta);
  padding: 5px 11px;
  border-radius: var(--ui-r-ctl);
  pointer-events: none;
  z-index: 9999;
  max-width: 260px;
  white-space: normal;
  line-height: 1.5;
}