@charset "UTF-8";
/* ============================================================
   MBBS 新スキン：ツリー表示のスタイル（pc_tree.php と 管理プレビューで共有）
   ------------------------------------------------------------
   サイズ・角丸・影・アクセントバー・ガイド線などは
   管理者テーマ設定(mb-theme)の CSS 変数で可変：
     --tm-gap / --tm-radius / --tm-bar / --mb-shadow
     --tm-head-pad / --tm-title / --tm-meta
     --tm-res-pad / --tm-res-title / --tm-res-meta
     --tm-guide / --tm-count-disp / --mb-font-scale
   色トークン(--c-accent 等)は mb-ds / mb-theme を継承。
   ============================================================ */
body.tm-body{background:var(--c-page);}
.tm-wrap{max-width:680px;margin:0 auto;padding:14px 12px 44px;color:#1f2937;
  font-family:var(--font);font-size:14px;line-height:1.5;}

/* 操作バー */
.tm-bar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;}
.tm-bar a{font-size:13px;text-decoration:none;color:#fff;background:var(--c-accent);
  padding:7px 14px;border-radius:999px;font-weight:600;white-space:nowrap;}
.tm-bar a.ghost{background:#fff;border:1px solid var(--c-line,#e3e6ec);color:#4b5563;font-weight:500;}
.tm-bar a.ghost:hover{border-color:var(--c-accent);color:var(--c-accent);}

/* スレッドカード（サイズ・角丸・影・アクセントバーは mb-theme の --tm-* で可変） */
.tm-list{display:flex;flex-direction:column;gap:var(--tm-gap,12px);}
.tm-thread{background:#fff;border:1px solid var(--c-line,#e6e9ee);border-radius:var(--tm-radius,14px);overflow:hidden;
  box-shadow:inset var(--tm-bar,3px) 0 0 var(--c-accent), var(--mb-shadow,0 1px 2px rgba(16,24,40,.05));}

/* ヘッダー（親スレッド）：県別カラー＋濃いタイトル＋区切り線で「話題」を明確に。
   下境界線は見出し背景より少し濃い専用色(--c-accent-head-border)。 */
.tm-head{display:block;text-decoration:none;color:inherit;padding:var(--tm-head-pad,12px) 15px;
  background:var(--c-accent-head) !important;border-bottom:1px solid var(--c-accent-head-border,var(--c-accent));}
.tm-head:hover{background:var(--c-accent-head-soft) !important;color:var(--c-accent);}
.tm-head-top{display:flex;align-items:flex-start;gap:8px;}
.tm-dai{flex:1;font-size:calc(var(--tm-title,16px) * var(--mb-font-scale,1));font-weight:700;line-height:1.45;color:#15233b;word-break:break-word;}
.tm-head-meta{display:flex;align-items:center;margin-top:6px;font-size:calc(var(--tm-meta,14px) * var(--mb-font-scale,1));color:#7b828e;font-weight:400;}
.tm-head-meta .tm-no{color:var(--c-accent);font-weight:700;}
.tm-head-meta .tm-name{color:#586070;}
.tm-head-meta .sep{margin:0 6px;color:#b9c2d0;}
.tm-count{margin-left:auto;display:var(--tm-count-disp,inline-block);background:var(--c-accent);color:#fff;
  font-weight:700;font-size:12px;padding:2px 10px;border-radius:999px;min-width:30px;text-align:center;}
.tm-count.zero{background:#e4e7ec;color:#98a0ab;}
.tm-badge-new{background:var(--c-new);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:999px;flex:0 0 auto;margin-top:3px;}
/* 画像ありアイコン（CGIと同じ bi bi-image。メタ行に表示） */
.tm-imgicon{color:var(--c-accent);font-size:.92em;opacity:.85;margin:0 1px;vertical-align:baseline;}

/* もっと見るトグル */
.tm-more{display:block;width:100%;text-align:center;background:#f7fafd;border:none;
  border-top:1px solid var(--c-hair,#e7edf4);color:var(--c-accent);font-size:12px;font-weight:600;
  padding:8px;cursor:pointer;}
.tm-more:hover{background:#e9f2fb;}

/* レス（縦ガイド線＋番号ノード） */
.tm-replies{position:relative;background:#fff;}
.tm-replies::before{content:"";position:absolute;left:var(--tm-guide-left,25px);top:0;bottom:0;width:var(--tm-guide,2px);background:#d7dfe9;}
.tm-res{display:block;position:relative;text-decoration:none;color:inherit;
  padding:var(--tm-res-pad,10px) 15px var(--tm-res-pad,10px) calc(var(--tm-guide-left,25px) + 19px);border-top:1px solid var(--c-hair,#eef1f4);}
.tm-res:first-of-type{border-top:none;}
.tm-res:hover{background:#f2f7fd;}
.tm-res.tm-hidden{display:none;}
.tm-replies.tm-show .tm-res.tm-hidden{display:block;}
.tm-res-no{position:absolute;left:calc(var(--tm-guide-left,25px) - 9px);top:11px;width:21px;height:21px;
  display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #9fc2ec;
  border-radius:50%;color:var(--c-accent);font-size:10px;font-weight:700;z-index:1;}
.tm-res.tm-hot .tm-res-no{border-color:var(--c-new);color:var(--c-new);}
.tm-res-dai{display:block;font-size:calc(var(--tm-res-title,16px) * var(--mb-font-scale,1));color:#222b38;line-height:1.5;word-break:break-word;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.tm-res-meta{display:block;font-size:calc(var(--tm-res-meta,14px) * var(--mb-font-scale,1));color:#5e636b;margin-top:1px;}

.tm-empty{text-align:center;color:#9096a1;padding:44px 10px;background:#fff;
  border:1px solid var(--c-line,#e6e9ee);border-radius:var(--tm-radius,14px);}

/* ページャー */
.tm-pager{display:flex;justify-content:center;gap:6px;margin-top:22px;flex-wrap:wrap;}
.tm-pager a,.tm-pager span{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;text-decoration:none;font-size:14px;border:1px solid var(--c-line,#e3e6ec);
  color:var(--c-accent);background:#fff;padding:0 8px;font-weight:500;}
.tm-pager .cur{background:var(--c-accent);color:#fff;border-color:var(--c-accent);font-weight:700;}
.tm-pager .off{color:#c3c8d0;pointer-events:none;background:#f6f7f9;}

/* 広告カード（差し替え領域の外に固定配置 → 自動更新で飛ばない） */
.tm-adband{margin-top:12px;}
.mbbs-ad{position:relative;background:#f7f9fc!important;border:1px dashed #cfd8e5!important;border-radius:14px!important;box-shadow:none!important;margin:0!important;min-height:62px;overflow:hidden;}
.mbbs-ad .mbbs-ad-label{position:absolute;top:8px;left:10px;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#6b7688;background:#fff;border:1px solid #e4e8f1;border-radius:6px;padding:0 6px;line-height:1.5;z-index:1;}
.mbbs-ad .card-body{display:flex;justify-content:center;align-items:center;overflow-x:auto;min-height:44px;padding:12px 10px!important;}
.mbbs-ad .ad-dlsite{max-width:100%;}

@media (max-width:600px){
  .tm-wrap{padding:12px 8px 38px;}
}

/* ============================================================
   ツリーのスキン（デザイン切替）
   .tm-wrap に .tm-skin-{card|flat|panel|bubble} が付く。
   ベース＝card。他スキンは装飾（枠・背景・ヘッダー・レス表現）を上書きし、
   サイズ/余白の CSS 変数（--tm-*）とは併用できる。
   ============================================================ */

/* --- flat：一体型の白リスト。色ヘッダー無し・影無し・ヘアライン区切り --- */
.tm-skin-flat .tm-list{gap:0;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--tm-radius,14px);overflow:hidden;box-shadow:var(--mb-shadow,0 1px 2px rgba(16,24,40,.05));}
.tm-skin-flat .tm-thread{border:0;border-top:1px solid var(--c-line);border-radius:0;box-shadow:none;background:transparent;}
.tm-skin-flat .tm-thread:first-child{border-top:0;}
.tm-skin-flat .tm-head{background:#fff!important;border-bottom:0;}
.tm-skin-flat .tm-head:hover{background:#f6f8fb!important;color:inherit;}
.tm-skin-flat .tm-dai{color:var(--c-ink);}
.tm-skin-flat .tm-replies{background:#fafbfd;border-top:1px solid var(--c-hair);}
.tm-skin-flat .tm-count{background:var(--c-accent-soft);color:var(--c-accent);}

/* --- panel：アクセント帯ヘッダー＋白文字。掲示板クラシック --- */
.tm-skin-panel .tm-thread{box-shadow:var(--mb-shadow,0 1px 2px rgba(16,24,40,.05));border:1px solid var(--c-line);}
.tm-skin-panel .tm-head{background:var(--c-accent)!important;border-bottom:0;}
.tm-skin-panel .tm-head:hover{background:var(--c-accent-2)!important;}
.tm-skin-panel .tm-dai{color:#fff;}
.tm-skin-panel .tm-head-meta{color:rgba(255,255,255,.82);}
.tm-skin-panel .tm-head-meta .tm-no{color:#fff;}
.tm-skin-panel .tm-head-meta .tm-name{color:rgba(255,255,255,.92);}
.tm-skin-panel .tm-head-meta .sep{color:rgba(255,255,255,.45);}
.tm-skin-panel .tm-count{background:rgba(255,255,255,.24);color:#fff;}
.tm-skin-panel .tm-imgicon{color:#fff;}

/* --- bubble：レスをチャット吹き出しに。ガイド線・番号丸なし --- */
.tm-skin-bubble .tm-head{background:var(--c-accent-soft)!important;border-bottom:0;}
.tm-skin-bubble .tm-head:hover{background:var(--c-accent-head-soft)!important;}
.tm-skin-bubble .tm-dai{color:var(--c-accent-2);}
.tm-skin-bubble .tm-replies{background:#fff;padding:8px 12px 12px;}
.tm-skin-bubble .tm-replies::before{display:none;}
.tm-skin-bubble .tm-res{border-top:0!important;padding:4px 0!important;}
.tm-skin-bubble .tm-res-no{display:none;}
.tm-skin-bubble .tm-res-body{display:inline-block;max-width:100%;background:#f1f5f9;
  border-radius:4px 14px 14px 14px;padding:7px 12px;}
.tm-skin-bubble .tm-res:hover .tm-res-body{background:#e9eef5;}
.tm-skin-bubble .tm-res.tm-hot .tm-res-body{background:var(--c-accent-soft);}
.tm-skin-bubble .tm-res-dai{white-space:normal;overflow:visible;}