/* generated by tools/build-assets.mjs; do not edit */
/* source: styles/app-base.css */
:root{
  --bg:#f4f6f9;
  --bg-elevated:#ffffff;
  --bg-card:#ffffff;
  --line:#e3e7ef;
  --text:#1a1d24;
  --text-dim:#5a6278;
  --text-faint:#9da6ba;
  --accent:#0c9e72;
  --accent-light:#e6f7f2;
  --accent-text:#ffffff;
  --warn:#d95f2b;
  --warn-light:#fff0ea;
  --danger:#e03e3e;
  --danger-light:#ffeaea;
  --admin-color:#7c4dff;
  --mine-bg:#e6f7f2;
  --mine-text:#0a4d35;
  --category-color:#242833;
  /* 【保留中】'Zen Kaku Gothic New'は指定のみで実際には読み込んでおらず、'Hiragino Sans'系に
     フォールバックする。再開する場合はindex.htmlのGoogle Fonts読み込みに書体を追加すること。 */
  --font-display:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;
  --font-body:'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  /* 【変更しないこと】ロゴ(.brand-mark)専用の固定フォント。今後サイト全体のフォント変更を
     依頼されても、ユーザーの明示的な指示がない限りこの変数と.brand-markの参照先は変更しない。
     値は意図的に--font-displayとは独立させてあり、最初期の見た目（Hiragino Sans系フォールバック）
     を再現する固定値。 */
  --font-logo:'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05);
  --shadow-modal:0 8px 40px rgba(0,0,0,.12);
}
.dark-theme{
  --bg:#0f1115;
  --bg-elevated:#161922;
  --bg-card:#1b1f2a;
  --line:#2a2f3d;
  --text:#e8eaf0;
  --text-dim:#8d93a6;
  --text-faint:#5b6175;
  --accent:#5be9c2;
  --accent-light:#1a3d33;
  --accent-text:#0a1310;
  --warn:#ff9b6a;
  --warn-light:#2a1500;
  --danger:#ff6b6b;
  --danger-light:#2a0f0f;
  --admin-color:#c792ea;
  --mine-bg:rgba(91,233,194,0.09);
  --mine-text:#c8f5ea;
  --category-color:#e8eaf0;
  --shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2);
  --shadow-modal:0 8px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;}
body{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
#app{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit;}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}



/* source: styles/app-topbar.css */
/* ── topbar ── */
.topbar{flex-shrink:0;border-bottom:1px solid var(--line);background:var(--bg-elevated);box-shadow:var(--shadow);}

/* ── footer（トップページのコンテンツ末尾。常時表示ではなく、スクロールした時だけ見える。
     管理人ログインボタンを格納） ── */
.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 4px 4px;border-top:1px solid var(--line);margin-top:auto;}
/* トップページのフッターも下層ページと同様に中央へ寄せる。末尾のspacerは旧レイアウト用。 */
#siteFooter{justify-content:center;text-align:center;}
#siteFooter .footer-spacer{display:none;}
/* 各ページ末尾用のフッター。max-width:880pxで.thread-list/.static-page-inner等と横幅・位置を揃える
   （margin-topは指定しない＝上の.site-footerのmargin-top:autoをそのまま使い、コンテンツが画面に
   満たない場合でも画面下端に張り付くsticky footerにする。長い場合は通常どおりコンテンツの直後に
   続く）。この仕組みが効くには、親のスクロールコンテナ側もflexカラム化されている必要がある
   （.thread-list-wrap／.top-scroll＋.top-inner／.static-page＋.static-page-inner を参照）。 */
.page-footer{max-width:880px;width:100%;margin-left:auto;margin-right:auto;justify-content:center;}
.footer-copy{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);}
.footer-spacer{flex:1;}
/* 利用規約・プライバシーポリシー・お問い合わせの3リンク。「© Chちゃんねる」の右隣に並べ、
   幅が足りない場合（.site-footer側のflex-wrap）はこのnav自体が折り返してspacer/管理人ログインの
   下段に落ちる。ハンバーガーメニューの.hamburger-about-linkと同じ「文字だけのボタン」系統。 */
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;}
.footer-link{font-size:11px;color:var(--text-faint);white-space:nowrap;text-decoration:none;}
.footer-link:hover{color:var(--accent);text-decoration:underline;}
.topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 20px;width:100%;}
/* ブランド（ロゴ＋サブタイトル）。
   幅が狭い（760px未満＝.topbar-navがハンバーガーに収納されるのと同じ閾値）場合は、テキストロゴと
   サブタイトルを.brand-logo-icon（アイコン画像）に差し替える（760px以上では従来通り
   テキストロゴ＋サブタイトルの横並び）。 */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;cursor:pointer;justify-self:start;text-decoration:none;}
.brand-mark{font-family:var(--font-logo);font-weight:800;font-size:19px;letter-spacing:.01em;color:var(--text);white-space:nowrap;}
.brand-mark span{color:var(--accent);}
.brand-tag{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);white-space:nowrap;}
.brand-logo-icon{display:none;width:54px;height:auto;flex-shrink:0;}
@media(min-width:760px){
  .brand{flex-direction:row;align-items:baseline;gap:10px;}
}

/* ── トップバーのスレッド検索欄 ──
   .search-box自体はカテゴリー画面のツールバーで使っていたスタイルを流用し、見た目を統一している。
   YouTubeのトップバー（ロゴ左端／検索中央／その他リンク右端）にならい、topbar-innerを
   grid-template-columns:1fr auto 1fr の3カラム構成にしている。
   【なぜgridなのか】flexで中央枠をflex:1にすると「ブランドと右側グループの残り幅」の中央に
   来るだけで、ブランド（Chちゃんねる…）と右側グループ（ハンバーガーのみ）の幅が違う分だけ
   画面の真ん中からズレて見える。gridの1fr/auto/1frなら両端カラムが常に同じ幅を取り合う
   （左右の1frは中身の幅に関わらず均等に伸縮する）ため、中央カラム＝検索欄が画面の
   本当の中央に来る。中央カラムの.top-search-wrapには明示的な幅（clamp）を与え、それを
   gridのauto列のサイズ根拠にしている。 */
.top-search-wrap{justify-self:center;width:clamp(220px,44vw,600px);min-width:0;}
.top-search-inner{position:relative;width:100%;}
.top-search-box{width:100%;}
/* トップバーの検索欄だけ、Redditの検索バーのような「丸みのあるグレーの塗り」に上書きする。
   .search-box（カテゴリー画面のツールバー用）はそのままなので、ここでは.search-box.top-search-boxという
   組み合わせセレクタで詳細度を上げ、トップバーのインスタンスにだけ効かせている。
   背景は--bg-elevated（トップバー自体の地色＝白）ではなく--bg（うっすら灰色）にすることで、
   白いトップバーの上でグレーの塗りが浮かび上がって目立つようにしている。 */
.search-box.top-search-box{background:var(--bg);border:1px solid transparent;border-radius:999px;padding:9px 16px;transition:background .15s,border-color .15s;}
.search-box.top-search-box:hover{background:var(--line);}
.search-box.top-search-box:focus-within{background:var(--bg-elevated);border-color:var(--line);}
.search-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-faint);}
/* 0件時にその場で伝える「該当なし」メッセージは、検索ボックスのすぐ下に浮かせるポップオーバーとして表示する。 */
.search-no-result{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-elevated);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--text-dim);box-shadow:var(--shadow);z-index:20;}

/* ── トップバー右端グループ（接続状態ピル＋ナビゲーションリンク＋ハンバーガーメニュー） ── */
.topbar-right-group{display:flex;align-items:center;gap:12px;flex-shrink:0;justify-self:end;}
.topbar-nav{display:flex;align-items:center;gap:6px;}
.topbar-nav-item{font-size:12.5px;font-weight:600;color:var(--text-dim);padding:7px 14px;border-radius:8px;white-space:nowrap;background:var(--bg);border:1px solid var(--line);transition:border-color .12s,color .12s,background .12s;text-decoration:none;}
.topbar-nav-item:hover{background:var(--bg-elevated);border-color:var(--accent);color:var(--accent);}

/* ブランド（タグライン込み）＋検索欄＋ナビ3リンク＋接続ピル＋ハンバーガーを横一列に並べるには
   実測で820px前後は必要で、それより狭いとブランドのCJKテキストが1文字ずつ縦積みで折り返される
   崩れ方をする（.brand側にwidth指定が無くgridの1frトラックが中身のmin-content＝折り返し可能な
   最小幅まで縮む挙動のため）。760px以下では.topbar-navをハンバーガー側に完全に譲ることで、
   この競合自体を無くしている。 */
@media(max-width:760px){
  .topbar-inner{gap:8px;padding:10px 12px;}
  .top-search-wrap{width:clamp(170px,48vw,600px);}
  .topbar-right-group{gap:8px;}
  .topbar-nav{display:none;} /* 横に並べる余白が無いのでハンバーガーメニュー側（.hamburger-nav）に集約する */
  .top-search-box{padding:6px 8px;}
  .top-search-box input{font-size:12px;}
  .ws-pill{padding:5px 8px;}
  .ws-pill #wsLabel{display:none;} /* 幅が厳しい端末では接続状態の丸だけ残しラベルは省略 */
  .brand-logo-icon{display:block;}
  .brand-mark, .brand-tag{display:none;} /* スマホ幅ではロゴ画像のみ表示し、サブタイトルは省略する */
}

.ws-pill{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-dim);font-family:var(--font-mono);padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);}
.ws-dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);transition:background .3s;}
.ws-pill.live .ws-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(12,158,114,.15);}
.ws-pill.err  .ws-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(224,62,62,.15);}

/* ── ハンバーガーメニューボタン（トップバー右端）──
   今後サブナビゲーションを廃止しリンクをこの中へ統合する想定があるため、
   現状は名前・テーマ・ブロック設定のみでも独立したメニューとして先に用意している。 */
.hamburger-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--bg);flex-shrink:0;}
.hamburger-btn:hover{border-color:var(--text-faint);}
.hamburger-line{display:block;width:16px;height:2px;border-radius:1px;background:var(--text-dim);}



/* source: styles/app-pages.css */
/* ── views ── */
.view{flex:1;min-height:0;display:none;}
.view.active{display:flex;flex-direction:column;}
#view-board{overflow:hidden;}

/* ── top page（カテゴリー一覧。今後ここに複数の入口セクションが並ぶ想定） ── */
#view-top{overflow:hidden;}
/* 上パディング0px：カテゴリー一覧の見出しバー（高さ77px）＋一覧の上パディング12px＝89pxと
   ホーム最初のスレッドカード（人気スレッド1件目）の上辺の高さを揃えるための逆算値。
   トップでは見出し行76px＋見出し下マージン13px＝89pxがカード上に乗るため、
   先頭の上パディングは0pxとする。この3値のどれかを変更する場合は必ず再計算すること
   （.ad-side側の89pxとも連動）。 */
.top-scroll{flex:1;overflow-y:auto;padding:0 20px 40px;display:flex;flex-direction:column;}
.top-inner{max-width:880px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:28px;flex:1;}
.top-section{padding-top:0;}
.top-section-title{position:relative;display:flex;align-items:center;min-height:76px;padding:0 0 0 clamp(42px,calc(50vw - 398px),62px);font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.2;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 13px;}
.top-section-title-label{flex:0 0 auto;}
.top-section-title-lead{position:absolute;left:50%;max-width:calc(100% - 120px);transform:translateX(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:500;line-height:18px;color:var(--text-dim);}
.top-section-title-lead-mobile{display:none;}
/* トップでも人気ランキング／カテゴリー画面の.room-titleと同じ文字組みを使う。
   戻るボタンは表示しないが、タイトルの開始位置だけは「32pxのボタン＋12pxの間隔」分を
   予約する。画面幅880px以下では.top-scrollの左右20pxが加わるため42px、
   920px以上では.room-header-innerと同じmax-width内の62pxとなるよう補間する。 */
@media(min-width:1101px){
  /* 左右の広告列が表示される幅では、通常ページ側のスクロールバー幅(7px)の半分だけ
     .top-innerが左へ寄る。人気ランキング画面の.room-header-innerと同じ文字位置へ戻す。補助文は
     画面全体の中央へ置くため、同じ半分幅を右へ補正する。 */
  .top-section-title{padding-left:65.5px;}
  .top-section-title-lead{left:calc(50% + 3.5px);}
}
@media(max-width:720px){
  /* モバイルでは短い文へ切り替え、見出し行のサイト中央へ置く。 */
  .top-section-title-lead-wide{display:none;}
  .top-section-title-lead-mobile{display:block;left:50%;max-width:calc(100% - 80px);transform:translateX(-50%);text-align:center;}
}
.category-groups{display:flex;flex-direction:column;gap:22px;}
.category-group-title{font-size:11.5px;font-weight:700;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.03em;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.category-card{display:flex;flex-direction:column;gap:3px;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-align:left;width:100%;transition:border-color .12s,box-shadow .12s;text-decoration:none;}
.category-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(12,158,114,.1);}
.category-card-label{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.category-card-count{font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);}
@media(max-width:420px){
  .category-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

/* ── ロビーチャット（トップページ最上部の常設チャット。カテゴリー一覧とは独立） ── */
/* 一時的に非表示中。HTML/JS/DBのコードは変更していないので、この1行を消せば元通り表示される。 */
#section-lobby{display:none;}
.lobby-chat-section{padding-top:0;}
.lobby-chat{background:var(--bg-card);border:1px solid var(--line);border-radius:0;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;height:340px;}
.lobby-chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;}
.lobby-chat-inner{max-width:100%;display:flex;flex-direction:column;gap:1px;}
.lobby-composer{flex-shrink:0;border-top:1px solid var(--line);padding:8px 12px 10px;background:var(--bg-elevated);}
.lobby-composer-inner{display:flex;gap:8px;align-items:flex-end;}
.lobby-composer-inner textarea{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--text);font-size:13.5px;font-family:inherit;resize:none;overflow:hidden;min-height:38px;max-height:110px;line-height:1.5;transition:border-color .15s;}
.lobby-composer-inner textarea:focus{outline:none;border-color:var(--accent);}
.lobby-composer-inner textarea::placeholder{color:var(--text-faint);}
.lobby-composer-inner textarea.over-limit{border-color:rgba(220,38,38,.4);}
.lobby-send-btn{padding:9px 14px;font-size:12.5px;}
.lobby-composer .cooldown-hint{max-width:none;margin:5px 0 0;text-align:left;}
@media(max-width:600px){
  .lobby-chat{height:300px;}
}

/* ── board ── */
.board-heading-category{color:var(--text);} /* .room-titleに重ねて使う色だけの修飾クラス（ellipsis等は.room-title側が担当） */

/* ── スレッド一覧の見出しバー（#boardHeaderBar）──
   デスクトップではカテゴリー名・ソート・操作を1行に並べ、狭い画面では
   現在のソートを示すコンパクトメニューへ切り替える。 */
#boardHeaderBar{overflow:visible;}
#popularHeaderBar{overflow:visible;}
.board-header-inner{gap:10px;min-width:0;}
.popular-header-inner{gap:10px;min-width:0;}
/* 【注意】.room-info{flex:1;min-width:0;}が下でも定義されており、同じ詳細度のクラスセレクタ同士だと
   ファイル内で後に書かれた方が勝つ。#boardHeaderBarでスコープして詳細度を上げ、確実にこちらを
   勝たせることで、カテゴリー名ボックスが伸び切らないようにし、新着順・勢い順タブをカテゴリー名の
   すぐ右に詰めて表示する（検索欄を撤去した後もここに隙間ができないようにするための対応）。 */
#boardHeaderBar .board-title-info{flex:0 1 auto;min-width:44px;max-width:150px;}
.sort-tabs{display:flex;gap:2px;background:var(--bg);border-radius:8px;padding:3px;border:1px solid var(--line);flex-shrink:0;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.sort-tab{padding:6px 12px;font-size:12.5px;border-radius:6px;color:var(--text-dim);white-space:nowrap;flex:0 0 auto;}
.sort-tab:disabled{cursor:wait;opacity:.65;}
.sort-tab.active{background:var(--bg-elevated);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.mobile-sort-control{display:none;position:relative;flex-shrink:0;}
.mobile-sort-control select,.popular-mobile-sort-control select{width:max-content;min-width:0;max-width:100%;flex:0 0 auto;margin-left:auto;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--text);font:inherit;font-size:12px;appearance:auto;cursor:pointer;}
.mobile-sort-control select:focus,.popular-mobile-sort-control select:focus{border-color:var(--accent);}
.mobile-sort-control select:disabled,.popular-mobile-sort-control select:disabled{cursor:wait;opacity:.6;}
.popular-title-info{flex:0 1 auto;min-width:44px;max-width:220px;}
.popular-sort-tabs{display:flex;gap:2px;background:var(--bg);border-radius:8px;padding:3px;border:1px solid var(--line);flex-shrink:0;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
.popular-sort-tab{padding:6px 12px;font-size:12.5px;border-radius:6px;color:var(--text-dim);white-space:nowrap;flex:0 0 auto;}
.popular-sort-tab:disabled{cursor:wait;opacity:.65;}
.popular-sort-tab.active{background:var(--bg-elevated);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.popular-mobile-sort-control{display:none;position:relative;flex-shrink:0;}
.search-box{display:flex;align-items:center;gap:6px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:8px;padding:7px 10px;flex:1;min-width:0;}
.search-box input{background:none;border:none;color:var(--text);font-size:13px;width:100%;min-width:0;}
.search-box input:focus{outline:none;}
.search-box input::placeholder{color:var(--text-faint);}
/* スレ一覧の検索欄はトップバーに統合したため、代わりに余った幅を吸収するスペーサー
   （新規スレボタン・待機人数ピルを右端に押し出す役割を、旧・検索欄から引き継ぐ） */
.board-header-spacer{flex:1;min-width:0;}
.new-thread-btn{display:flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px;white-space:nowrap;flex-shrink:0;box-shadow:0 2px 6px rgba(12,158,114,.25);}
.new-thread-btn:hover{filter:brightness(1.06);}
.new-thread-btn:disabled{opacity:.5;cursor:not-allowed;}
#boardHeaderBar .presence-pill{flex-shrink:0;}
.new-thread-label-short{display:none;}

@media(max-width:720px){
  .board-header-inner{gap:6px;flex-wrap:nowrap;}
  .popular-header-inner{gap:6px;flex-wrap:nowrap;}
  #boardHeaderBar .board-title-info{order:1;flex:1 1 auto;max-width:none;min-width:0;}
  #boardHeaderBar #catBackBtn{order:0;}
  #boardHeaderBar .presence-pill{order:2;padding:6px 8px;gap:4px;font-size:11px;}
  #boardHeaderBar .presence-pill .board-waiting-label{display:none;}
  #boardHeaderBar .sort-tabs{display:none;}
  #boardHeaderBar .mobile-sort-control{order:3;display:flex;}
  #boardHeaderBar .board-header-spacer{display:none;}
  .search-box{padding:6px 8px;}
  .search-box input{font-size:12px;}
  #boardHeaderBar .new-thread-btn{order:4;padding:8px 10px;font-size:12px;gap:4px;}
  #popularHeaderBar .popular-title-info{order:1;flex:1 1 auto;max-width:none;min-width:0;}
  #popularHeaderBar .popular-sort-tabs{display:none;}
  #popularHeaderBar .popular-mobile-sort-control{order:2;display:flex;}
  .new-thread-label-full{display:none;}
  .new-thread-label-short{display:inline;}
}
/* 上パディングは12px。広告カラム（.ad-side、基本値12px）・トップページのスレッドカード上辺と
   高さを揃えるために合わせている値なので、変更する場合は.ad-side／.top-scroll側も要連動調整
   （詳細は下の「── ad-side ──」セクションのコメント参照）。 */
.thread-list-wrap{flex:1;overflow-y:auto;padding:12px 20px 28px;display:flex;flex-direction:column;}
/* 「Chちゃんねるとは？」等、動的データを持たない読み物ページ用の共通スタイル。
   thread-list-wrap系（スレッド一覧）とは中身の性質が違うため別クラスとして新設した。 */
/* 「Chちゃんねるとは？」等の読み物ページ。単なる素のテキストの羅列だと殺風景なため、
   カード状のコンテナに収め、見出しにアクセントカラーの飾り、リストに専用ビュレット、
   最後の「ご利用にあたって」だけ注意喚起ボックスとして視覚的に区別している。
   【構造】.thread-list-wrap(スクロール・幅制限なし)/.thread-list(幅制限・中央寄せ)と同じ考え方で、
   スクロールを受け持つ.static-pageには幅制限を付けず、中身の.static-page-inner側だけ
   max-width:880pxで中央寄せにする。スクロールと幅制限を同じ要素に兼ねさせると、
   スクロールバーが画面中央寄りに出て他ページと見た目が揃わなくなるため分離している。 */
.static-page{flex:1;overflow-y:auto;padding:24px 20px 48px;display:flex;flex-direction:column;}
.static-page-inner{max-width:880px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;}
.static-page-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:32px 34px;}
.static-page-lead p{font-size:15px;font-weight:500;line-height:1.9;}
.static-page p{font-size:14px;line-height:1.85;color:var(--text);margin:0 0 14px;}
.static-page h3{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:15.5px;font-weight:700;color:var(--text);margin:28px 0 12px;}
.static-page h3::before{content:'';width:4px;height:16px;border-radius:2px;background:var(--accent);flex-shrink:0;}
.static-page-card>h3:first-child{margin-top:0;}
.static-page ul{list-style:none;margin:0 0 14px;padding:0;}
.static-page li{position:relative;font-size:14px;line-height:1.8;color:var(--text);margin-bottom:10px;padding-left:18px;}
.static-page li::before{content:'';position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.static-page-notice{margin-top:28px;padding:18px 20px 4px;background:var(--warn-light);border:1px solid var(--warn);border-radius:12px;}
.static-page-notice h3{margin-top:0;color:var(--warn);}
.static-page-notice h3::before{background:var(--warn);}
.static-page-notice p{margin-bottom:16px;}

/* ── NG設定・ブロック設定ページ ──
   設定操作はハンバーガーメニューへ詰め込まず、通常画面と同じスクロール領域に独立したカードで置く。 */
.settings-page{flex:1;overflow-y:auto;padding:24px 20px 48px;display:flex;flex-direction:column;}
.settings-page-inner{max-width:880px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column;}
.settings-page-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px 28px;}
.settings-page-desc{margin:0 0 20px;font-size:13px;line-height:1.75;color:var(--text-dim);}
@media(max-width:760px){.block-settings-desktop-break{display:none;}}
.settings-common-controls{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;}
.settings-common-controls .block-bulk-row,.settings-page-bulk-row{margin-bottom:0;}
.settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;margin:0 0 12px;}
.settings-tab{min-width:0;padding:8px 10px;border-radius:7px;color:var(--text-dim);font-size:12.5px;font-weight:700;white-space:nowrap;}
.settings-tab.active{background:var(--bg-elevated);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.settings-entry-add{margin-bottom:12px;}
.settings-page .ng-backup{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.settings-page .ng-list-heading{margin-top:0;}
.settings-page .block-list{margin-bottom:0;}
.settings-page .empty-note{margin:0;padding:16px;}
@media(max-width:480px){
  .settings-page{padding-left:8px;padding-right:8px;}
  .settings-page-card{padding:18px 14px;}
  .settings-page .block-bulk-row{align-items:flex-start;}
  .settings-page .block-item-mode{width:100%;}
  .settings-page .block-mode-btn{flex:1;}
}

/* ── お問い合わせ・削除依頼フォーム（Netlify Forms） ──
   .static-page-card内、リード文（.static-page-lead）のすぐ下に置く前提のレイアウト。
   ボットフィールド(.contact-honeypot)は人間には見えないが、Netlify側のスパム判定用に
   DOM上には実在させておく必要があるため、display:noneではなく画面外に飛ばす方式にしている。 */
.contact-honeypot{position:absolute;left:-9999px;top:-9999px;}
#view-contact .static-page-lead[data-content-html-key="page.contact.lead_html"] br{display:block;}
.contact-field{margin-bottom:20px;}
.contact-field-label{display:block;font-size:13px;font-weight:600;color:var(--text-dim);margin-bottom:8px;}
.contact-required{margin-left:6px;font-size:10px;font-weight:700;color:var(--danger);background:var(--danger-light);padding:2px 6px;border-radius:4px;vertical-align:1px;}
.contact-radio-group{display:flex;flex-wrap:wrap;gap:8px 18px;}
.contact-radio{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text);cursor:pointer;}
@media(max-width:600px){
  #view-contact .static-page-lead[data-content-html-key="page.contact.lead_html"] br{display:none;}
}
.contact-radio input{accent-color:var(--accent);}
.contact-input,.contact-textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:13.5px;font-family:var(--font-body);}
.contact-input:focus,.contact-textarea:focus{outline:none;border-color:var(--accent);}
.contact-textarea{resize:vertical;line-height:1.7;}
.contact-submit-btn{padding:11px 28px;font-size:13.5px;}
.contact-request-notice{margin:0 0 20px;padding-bottom:2px;}
.contact-captcha{max-width:100%;min-height:78px;margin:0 0 20px;overflow:hidden;}
.contact-consent-field{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.contact-consent-field .contact-radio{align-items:flex-start;line-height:1.6;}
.contact-privacy-link{padding:0;}
.contact-status{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.7;}
.contact-status.is-success{background:var(--accent-light);border:1px solid var(--accent);color:var(--text);}
.contact-status.is-error{background:var(--danger-light);border:1px solid var(--danger);color:var(--text);}

@media(max-width:420px){
  #view-contact .static-page{padding-left:8px;padding-right:8px;}
  #view-contact .static-page-card{padding-left:14px;padding-right:14px;}
}
@media(max-width:340px){
  .contact-captcha{min-height:70px;}
  .contact-captcha > div,
  .contact-captcha > iframe{transform:scale(.9);transform-origin:left top;}
}

/* ── 管理専用ページ（/admin）──
   ログインフォームは.contact-field/.contact-inputを流用（見た目の一貫性・追加コスト削減のため）。
   selectは.contact-input,.contact-textareaのルールに含まれていないため個別に指定する。 */
select.contact-input{appearance:auto;cursor:pointer;}
.admin-dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.admin-dashboard-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.admin-dashboard-block{margin-bottom:28px;}
.admin-dashboard-block:last-child{margin-bottom:0;}
.admin-dashboard-block-title{font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--text-dim);margin:0 0 12px;}
.admin-rate-settings-help{margin:-4px 0 16px;font-size:12px;line-height:1.65;color:var(--text-faint);}
.admin-rate-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
.admin-rate-settings-grid .contact-field{margin-bottom:4px;}
.admin-rate-input-wrap{position:relative;}
.admin-rate-input{padding-right:42px;}
.admin-rate-input-unit{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text-faint);pointer-events:none;}
.admin-rate-input-range{display:block;margin-top:6px;font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);}
.admin-rate-settings-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;}
.admin-rate-settings-actions button:disabled{opacity:.45;cursor:not-allowed;}
.admin-rate-settings-status{min-height:20px;margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--text-faint);text-align:right;}
.admin-rate-settings-status.is-success{color:var(--accent);}
.admin-rate-settings-status.is-error{color:var(--danger);}
.admin-debug-progress{margin-top:14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);}
.admin-debug-progress progress{display:block;width:100%;height:10px;accent-color:var(--accent);}
.admin-debug-progress-text{margin:7px 0 0;font-size:11px;color:var(--text-faint);font-family:var(--font-mono);text-align:right;}
.admin-debug-summary{min-height:20px;margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;word-break:break-word;}
.catalog-notice{max-width:880px;width:100%;margin:0 auto 12px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-card);color:var(--text-dim);font-size:12px;line-height:1.55;}
.catalog-retry-btn{flex-shrink:0;padding:6px 10px;font-size:12px;}
.category-catalog-message{display:flex;flex-direction:column;align-items:center;gap:8px;}
.admin-catalog-actions{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;}
.admin-catalog-actions button:disabled{opacity:.45;cursor:not-allowed;}
.admin-catalog-list{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.admin-catalog-group{border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden;}
.admin-catalog-group-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg-card);border-bottom:1px solid var(--line);}
.admin-catalog-group-name{flex:1;min-width:0;font-size:13px;font-weight:700;word-break:break-word;}
.admin-catalog-group-count{font-size:11px;color:var(--text-faint);white-space:nowrap;}
.admin-catalog-row-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.admin-catalog-row-actions button{padding:5px 8px;font-size:11px;line-height:1.3;}
.admin-catalog-row-actions button:disabled{opacity:.35;cursor:not-allowed;}
.admin-catalog-categories{display:flex;flex-direction:column;}
.admin-catalog-category{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);}
.admin-catalog-category:last-child{border-bottom:0;}
.admin-catalog-category-name{flex:1;min-width:0;font-size:13px;word-break:break-word;}
.admin-catalog-category-meta{font-size:11px;color:var(--text-faint);white-space:normal;overflow-wrap:anywhere;line-height:1.45;}
#adminCatalogEditorUrlPreview{display:block;overflow-wrap:anywhere;}
#adminCatalogEditorUrlPreview.is-error{color:var(--warn);}
.admin-catalog-state{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:var(--accent-light);color:var(--accent);font-size:10px;font-weight:700;white-space:nowrap;}
.admin-catalog-state.is-retired{background:var(--warn-light);color:var(--warn);}
@media(max-width:520px){
  .admin-rate-settings-grid{grid-template-columns:1fr;gap:4px;}
  .admin-rate-settings-actions{align-items:stretch;}
  .admin-rate-settings-actions button{flex:1;padding-left:10px;padding-right:10px;}
  .admin-dashboard-header{align-items:flex-start;gap:12px;flex-wrap:wrap;}
  .admin-dashboard-header-actions{width:100%;justify-content:flex-start;}
  .catalog-notice{align-items:flex-start;flex-direction:column;}
  .admin-catalog-actions button{flex:1;}
  .admin-catalog-group-head,.admin-catalog-category{align-items:flex-start;flex-wrap:wrap;}
  .admin-catalog-row-actions{width:100%;justify-content:flex-start;}
  .admin-catalog-category-meta{order:2;}
}
.admin-msg-list{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;}
.admin-msg-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);}
.admin-msg-row-body{flex:1;min-width:0;}
.admin-msg-row-meta{font-size:11px;color:var(--text-faint);font-family:var(--font-mono);margin-bottom:4px;}
.admin-msg-row-text{font-size:13px;color:var(--text);line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.admin-msg-delete-btn{flex-shrink:0;padding:6px 12px;font-size:12px;}
#adminBulkDeleteBtn{margin-top:16px;}
#adminBulkDeleteBtn:disabled{opacity:.4;cursor:not-allowed;}
.thread-list{max-width:880px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:8px;}

.thread-card-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;}
.thread-card{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;text-align:left;width:100%;min-width:0;transition:border-color .12s,box-shadow .12s;box-shadow:0 1px 3px rgba(0,0,0,.04);text-decoration:none;color:inherit;}
.thread-card-row .thread-card{flex:1;}
.thread-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(12,158,114,.1);}
.thread-card-main{display:flex;align-items:center;gap:14px;align-self:stretch;flex:1;min-width:0;color:inherit;text-decoration:none;}
.thread-card-main:focus-visible,.thread-stats-row:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
.thread-spark{flex-shrink:0;width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:700;background:var(--bg);color:var(--text-faint);border:1px solid var(--line);}
.thread-spark.hot{color:var(--warn);border-color:rgba(217,95,43,.25);background:var(--warn-light);}
.thread-spark.rank-1{color:#fff;background:linear-gradient(135deg,#f6d873,#caa022);border-color:#caa022;}
.thread-spark.rank-2{color:#fff;background:linear-gradient(135deg,#e7ebf0,#9aa4ae);border-color:#9aa4ae;}
.thread-spark.rank-3{color:#fff;background:linear-gradient(135deg,#e0a878,#a5652f);border-color:#a5652f;}
.thread-main{flex:1;min-width:0;}
.thread-title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.thread-title-popover{position:fixed;z-index:160;width:max-content;max-width:calc(100vw - 24px);padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-elevated);color:var(--text);box-shadow:var(--shadow-modal);font-size:13px;font-weight:500;line-height:1.55;white-space:normal;overflow-wrap:anywhere;word-break:break-word;pointer-events:none;}
.admin-auth-error{font-size:12px;color:var(--danger);margin:-8px 0 14px;}
.admin-mfa-setup{margin:0 0 18px;}
.admin-mfa-qr{display:block;width:200px;max-width:100%;height:auto;margin:14px auto;border:8px solid #fff;border-radius:8px;}
.admin-mfa-secret-wrap{display:flex;flex-direction:column;gap:6px;}
.admin-mfa-secret{display:block;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow-wrap:anywhere;user-select:all;}
.thread-meta{margin-top:4px;font-size:11.5px;color:var(--text-faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:var(--font-mono);}
.thread-created-at{white-space:nowrap;}
.history-category-tag{color:var(--category-color);font-weight:700;}
.empty-note{max-width:880px;width:100%;margin-left:auto;margin-right:auto;padding:22px 16px;text-align:center;color:var(--text-faint);font-size:13px;background:var(--bg-card);border:1px dashed var(--line);border-radius:12px;}
.list-more-btn{display:block;width:100%;margin-top:10px;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg-card);color:var(--text-dim);font-size:12.5px;font-weight:600;transition:border-color .12s,color .12s;text-decoration:none;text-align:center;}
.list-more-btn:hover{border-color:var(--accent);color:var(--accent);}
.owned-thread-badge{display:inline-block;margin-left:6px;padding:2px 6px;border:1px solid rgba(12,158,114,.25);border-radius:4px;background:var(--accent-light);color:var(--accent);font-size:10px;font-weight:700;vertical-align:middle;}
/* 専用ページ最下部の「↑ トップ/カテゴリーに戻る」ボタン（.list-more-btnを流用しつつ、
   .thread-list-wrap直下でwidth:100%だと画面いっぱいまで広がってしまっていたため、
   スレッド一覧カードと同じ幅（max-width:880px・中央寄せ）に揃える） */
.page-back-btn{max-width:880px;margin-left:auto;margin-right:auto;}
.thread-stats-row{display:flex;align-items:center;gap:16px;flex-shrink:0;color:inherit;text-decoration:none;}
.thread-stats{flex-shrink:0;text-align:right;}
.thread-res-count{font-family:sans-serif;font-size:16px;font-weight:700;color:var(--text);}
.thread-res-label{font-size:10px;color:var(--text-faint);margin-top:1px;}

/* ── お気に入り星アイコン（スレッドカードの「参加人数」の左に配置）──
   カード本体リンクと件数リンクの間に兄弟buttonとして置き、操作要素をネストしない。 */
.fav-star-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:26px;height:26px;border-radius:7px;color:var(--text-faint);cursor:pointer;transition:color .15s,background .15s,transform .1s;}
.fav-star-btn:hover{color:var(--warn);background:var(--bg);}
.fav-star-btn:active{transform:scale(.88);}
.fav-star-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .15s,filter .15s;}
/* オン状態: 黄色く塗りつぶし、うっすら光らせる（drop-shadowでグロー効果） */
.fav-star-btn.active{color:#f5b400;}
.fav-star-btn.active svg{fill:#f5b400;filter:drop-shadow(0 0 4px rgba(245,180,0,.75));}
.fav-star-btn.active:hover{color:#e0a500;}

@media(max-width:720px){
  .thread-card:not(.ng-thread-fold){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main stats";align-items:center;column-gap:10px;padding:11px 12px 10px;}
  .thread-card:not(.ng-thread-fold).has-favorite-control{grid-template-columns:minmax(0,1fr) 26px auto;grid-template-areas:"main favorite stats";}
  .thread-card:not(.ng-thread-fold) .thread-card-main{grid-area:main;align-items:center;gap:10px;}
  .thread-card:not(.ng-thread-fold) .thread-spark{width:30px;height:30px;border-radius:8px;}
  .thread-card:not(.ng-thread-fold) .thread-title{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;line-height:1.35;}
  .thread-card:not(.ng-thread-fold) .thread-meta{gap:6px;line-height:1.35;}
  .thread-card:not(.ng-thread-fold) .fav-star-btn{grid-area:favorite;justify-self:center;}
  .thread-card:not(.ng-thread-fold) .thread-stats-row{grid-area:stats;justify-self:end;gap:12px;}
}

/* thread action buttons (edit/delete) */
.thread-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px;}
.thr-act-btn{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-faint);border:1px solid transparent;transition:all .12s;}
.thr-act-btn.edit:hover{background:var(--accent-light);color:var(--accent);border-color:rgba(12,158,114,.2);}
.thr-act-btn.del:hover{background:var(--danger-light);color:var(--danger);border-color:rgba(224,62,62,.2);}

/* スレッド見出しカード内「スレッドを残してログを全消し」ボタン。.fav-star-btnと同じ26x26の
   アイコンボタン枠を流用しつつ、削除を伴う操作であることが伝わるようhover色は.thr-act-btn.delと
   揃えたdanger系にしている（表示/非表示の切り替え方式もroomFavStarと同じvisibility方式）。 */
.thread-menu-wrap{position:relative;flex-shrink:0;}
.thread-kebab-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:var(--text-faint);cursor:pointer;transition:color .15s,background .15s,transform .1s;}
.thread-kebab-btn:hover,.thread-kebab-btn.active{background:var(--bg);color:var(--text);}
.thread-kebab-btn:active{transform:scale(.88);}
.thread-kebab-btn svg{width:17px;height:17px;}
/* ドロップダウン本体。デフォルトdisplay:noneで、JS側がthreadMenuBtnクリック時に.activeを
   付け外しして開閉する（block-confirm-popoverと同様のposition:fixedではなく、ケバブの真下に
   出れば十分な軽量メニューのためposition:absoluteで足りる。z-indexは同種のsearch-no-resultに揃えた）。 */
.thread-menu-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:max-content;min-width:172px;background:var(--bg-elevated);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-modal);padding:8px;display:none;z-index:20;}
.thread-menu-dropdown.active{display:block;}
/* メニュー項目のフォントは.hamburger-nav-itemに合わせている（font-family:var(--font-body)、
   font-size:14px、font-weight:500）。アイコン左の余白（.hamburger-panel-bodyのpadding-left:18px＋
   .hamburger-nav-itemのpadding-left:6px＝計24px）にできるだけ近づけるため、このドロップダウン側は
   padding:8px（外周）＋.thread-menu-itemのpadding-left:10pxで計18pxを確保している
   （ドロップダウン自体が小さいため24pxそのままだと窮屈になるための調整）。標準では破壊的操作の
   danger色を使い、「最初の投稿」のような通常操作だけneutral修飾でaccent色に上書きする。 */
.thread-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;white-space:nowrap;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text);padding:10px;border-radius:7px;}
.thread-menu-item:hover{background:var(--danger-light);color:var(--danger);}
.thread-menu-item-neutral:hover{background:var(--accent-light);color:var(--accent);}
.thread-menu-item.mobile-room-favorite-item.active .thread-menu-item-icon{fill:#f5b400;stroke:#f5b400;filter:drop-shadow(0 0 4px rgba(245,180,0,.75));}
.thread-menu-item-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
#roomHeaderBar #mobileRoomFavoriteBtn{display:none!important;}
@media(max-width:720px){
  #roomHeaderBar #roomFavStar{display:none;}
  #roomHeaderBar #mobileRoomFavoriteBtn{display:flex!important;}
  #roomHeaderBar #threadMenuDropdown{left:auto;right:0;}
}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-faint);}
.empty-state .big{font-size:15px;color:var(--text-dim);margin-bottom:6px;}

/* source: styles/app-content-admin.css */
/* サイト文章管理／HTML管理 */
.site-managed-announcement,
.site-managed-extra {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.admin-content-page-card { overflow: hidden; }
.admin-content-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0;
}
.admin-content-toolbar .contact-input { flex: 1 1 220px; min-width: 180px; }
.admin-content-checkbox { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; white-space: nowrap; }
.admin-content-editor-grid { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.admin-content-entry-pane, .admin-content-edit-pane { min-width: 0; }
.admin-content-meta, .admin-content-revision { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.admin-content-editor { width: 100%; min-height: 180px; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.6; }
.admin-content-html-editor { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.admin-content-text-node-editor { display: grid; gap: 10px; max-height: 520px; overflow: auto; padding: 2px; }
.admin-content-text-node-row { display: grid; gap: 5px; }
.admin-content-text-node-caption { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.admin-content-text-node-input { width: 100%; box-sizing: border-box; }
.admin-content-text-node-warning { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger, #c92a2a) 36%, var(--border)); border-radius: 8px; color: var(--danger, #c92a2a); font-size: 12px; line-height: 1.7; }
.admin-content-preview-box { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-soft, var(--panel)); }
.admin-content-preview-box h4 { margin: 0 0 10px; font-size: 13px; }
.admin-content-preview { min-height: 26px; overflow-wrap: anywhere; }
.admin-content-status { min-height: 1.4em; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.admin-content-status.is-success { color: var(--success, #087f5b); }
.admin-content-status.is-error, .admin-content-html-warning { color: var(--danger, #c92a2a); }
.admin-content-html-warning { margin: 12px 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger, #c92a2a) 36%, var(--border)); border-radius: 8px; font-size: 12px; line-height: 1.7; }
.admin-content-history { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.admin-content-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; }
.admin-content-history-preview { min-width: 0; max-height: 96px; overflow: auto; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-content-history-item button { flex: 0 0 auto; }
@media (max-width: 680px) {
  .admin-content-editor-grid { grid-template-columns: 1fr; }
  .admin-content-history-item { grid-template-columns: 1fr; align-items: flex-start; }
  .admin-dashboard-header-actions { flex-wrap: wrap; }
}

/* source: styles/app-room.css */
/* ── room ── */
#view-room{background:var(--bg);}
.room-header{flex-shrink:0;border-bottom:1px solid var(--line);background:var(--bg);box-shadow:none;}
/* 全ての見出しバー（ホーム／スレッド一覧／スレッド内／人気／閲覧履歴／検索結果）はこの
   .room-header-innerを土台に共通化されている。中身の量によって高さがバラバラにならないよう、
   min-height:76pxで統一し、他の全バーをこれに合わせる（align-items:centerで中身は縦中央寄せになる）。
   【注意】スレッド内（#roomHeaderBar、タイトル+カテゴリータグの2行カード）は中身が縦に伸びやすく、
   標準の上下パディング12pxのままだと76px枠に収まらない。下の#roomHeaderBar専用オーバーライドで
   バー側の上下パディングだけを縮めて76pxの枠に収めている。 */
.room-header-inner{display:flex;align-items:center;gap:12px;padding:12px 18px;max-width:880px;margin:0 auto;min-height:76px;}
.back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--text-dim);background:var(--bg);border:1px solid var(--line);flex-shrink:0;font-size:16px;}
.back-btn:hover{color:var(--text);border-color:var(--text-faint);}
.room-info{flex:1;min-width:0;}
.room-header-link{flex-shrink:0;white-space:nowrap;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--accent);font-size:12px;font-weight:600;line-height:1.2;text-decoration:none;transition:border-color .12s,background .12s,color .12s;}
.room-header-link:hover{border-color:var(--accent);background:var(--accent-light);color:var(--accent);}
/* 入室中/待機中ピルは--font-body（Noto Sans JP等のWebフォント）を使わず、Arialを最優先にした
   フォントスタックにする。数字「1」の字形（下部に横線が入らない、フラグのみのシンプルな形）が
   目的の見た目に合うのはArialのため。日本語部分（人が入室中等）はArialにはグリフが無いため
   自動的に後続のシステム標準日本語フォント（Mac=Hiragino、Windows=Yu Gothic UI/Meiryo等）に
   フォールバックする。 */
.presence-pill{display:flex;align-items:center;gap:5px;font-size:12px;font-family:Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;color:var(--text-dim);background:var(--accent-light);border:1px solid rgba(12,158,114,.2);border-radius:999px;padding:5px 11px;flex-shrink:0;white-space:nowrap;}
.presence-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(12,158,114,.15);}
/* 数字にArialを使うと、隣接する日本語フォールバックフォントとベースラインの高さが微妙に
   ずれ、数字だけ浮いて見える。position:relativeで1pxだけ下にずらして視覚的に揃えている
   （環境によって見え方が変わるため、ズレが気になる場合はこのtopの値を微調整すること）。 */
.presence-count{color:var(--accent);position:relative;top:1px;}
.room-title{font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;}
.room-sub{font-size:11px;line-height:1.2;color:var(--text-faint);font-family:var(--font-mono);margin-top:4px;display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap;}
.room-sub-text{min-width:0;white-space:normal;display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
.room-meta-item{display:inline-flex;align-items:flex-end;white-space:nowrap;position:relative;top:-1px;}

/* スレッドタイトル（#roomHeaderBar内）を、チャット欄と地続きの平坦なバーから浮かせて目立たせる。
   【注意】バー全体を白背景にするとトップバーの白と二重に重なって見えるため、バー全体ではなく
   「タイトル部分だけ」をカード状に浮かせる方式にしている（バー自体は他画面と共通の沈んだ背景のまま）。 */
#roomHeaderBar .room-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:10px;
  padding:7px 10px 3px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  min-width:0;
}
.room-title-wrap{flex:1 1 auto;min-width:0;}
.room-title-line{min-width:0;}
.room-title-expand-icon{display:none;}
/* お気に入り星アイコンと入室人数ピルをひとまとめにする右側グループ。#roomHeaderBar .room-info側の
   justify-content:space-betweenは子要素2つ（room-title-wrap／このグループ）を両端に振り分ける
   想定のため、星とピルをバラバラの直接の子にすると3等分されて星とピルの間が離れすぎてしまう。
   このグループでまとめることで「星はピルのすぐ左」という配置を保っている。 */
.room-info-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.room-category-tag{flex-shrink:0;color:var(--category-color);font-weight:700;font-family:var(--font-body);font-size:10.5px;line-height:1;cursor:pointer;padding:3px 8px;background:var(--bg);border:1px solid var(--line);border-radius:6px;transition:border-color .12s;}
.room-category-tag:hover{border-color:var(--category-color);}
#roomHeaderBar .presence-pill{flex-shrink:0;}
#roomTitle{font-size:15px;font-weight:700;}
#roomSub{font-size:11px;}
.room-created-absolute{white-space:nowrap;}
.room-mobile-presence{display:none;align-items:center;gap:5px;flex:0 0 auto;font-size:10.5px;font-family:Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;color:var(--text-dim);background:var(--accent-light);border:1px solid rgba(12,158,114,.2);border-radius:999px;padding:3px 7px;white-space:nowrap;}
.room-mobile-presence.is-visible{display:none;}
.room-mobile-presence-label{white-space:nowrap;}
#roomHeaderBar .room-mobile-favorite-star{display:none;}
/* カテゴリータグ追加後、カード実測高さ(56.5px)が.room-header-innerの標準パディング(上下12pxずつ)では
   76px枠に収まらなくなっていたための調整。カード下辺と下段情報の間隔も詰めるため、カード下パディングを
   7px→3pxへ縮め、バー側の上下パディングも12px→9pxへ調整している（カード内容が76px枠内に収まる）。 */
#roomHeaderBar .room-header-inner{padding-top:9px;padding-bottom:9px;}

/* 「Chちゃんねるとは？」の見出しバーだけ特別扱い。他の見出しバー（スレッド一覧・人気等）は
   「戻るボタンのすぐ右にタイトル」という左詰めレイアウトで統一しているが、このページは
   スレッド名のような可変長・実用的な情報ではなく固定の説明文なので、見出しとして中央に
   置いたほうが見栄えが良い。戻るボタンは.room-header-innerのflexから外して絶対配置にし、
   下の.static-page-card（左端の余白20px）よりもさらに内側（40px）に来るよう意図的に
   余白を広く取っている（カードの縁とぴったり揃えるのではなく、少し内側に来る見た目にするため）。 */
#aboutHeaderBar .room-header-inner{max-width:880px;position:relative;}
#aboutHeaderBar .back-btn{position:absolute;left:40px;top:50%;transform:translateY(-50%);}
#aboutHeaderBar .room-info{flex:1;text-align:center;}

@media(max-width:720px){
  #roomHeaderBar .room-info{align-items:flex-start;-webkit-tap-highlight-color:transparent;}
  #roomHeaderBar .room-title-wrap{cursor:pointer;-webkit-user-select:none;user-select:none;}
  #roomHeaderBar .room-info-actions{align-self:flex-start;align-items:center;flex-direction:column;gap:2px;width:26px;}
  #roomHeaderBar #presencePill{display:none!important;}
  /* カテゴリー・メタ情報・Presenceを「上段」に揃え、絶対日時だけを下段へ送る。
     これまでPresenceをsub全体の中央へ置いていたため、展開時に2段目と3段目の間へ
     浮いて見えていた。 */
  #roomHeaderBar .room-sub{width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;align-items:start;column-gap:8px;row-gap:2px;}
  #roomHeaderBar .room-category-tag{grid-column:1;grid-row:1;display:inline-flex;align-items:flex-end;justify-content:center;height:20px;min-height:20px;box-sizing:border-box;padding:0 8px 2px;}
  #roomHeaderBar .room-sub-text{grid-column:2;grid-row:1;display:flex;align-items:flex-end;align-content:flex-start;flex-wrap:wrap;gap:8px;row-gap:2px;min-width:0;min-height:20px;line-height:20px;overflow-wrap:anywhere;word-break:break-word;}
  #roomHeaderBar .room-meta-item{display:inline-flex;align-items:flex-end;min-height:20px;line-height:1.2;}
  #roomHeaderBar .room-created-absolute{grid-column:2 / -1;grid-row:2;display:none;min-width:0;}
  #roomHeaderBar .room-mobile-favorite-star{display:flex;grid-column:3;grid-row:1;align-self:start;justify-self:end;width:20px;height:20px;border-radius:6px;padding:0;}
  #roomHeaderBar .room-mobile-favorite-star svg{display:block;flex:0 0 17px;width:17px;height:17px;}
  #roomHeaderBar .room-mobile-presence.is-visible{grid-column:4;grid-row:1;display:inline-flex;align-self:start;justify-self:end;height:20px;min-height:20px;box-sizing:border-box;margin-left:0;padding:0 7px;}
  #roomHeaderBar .room-mobile-presence-label{display:none;}
  #roomHeaderBar .room-info-expanded .room-created-absolute{display:inline-flex;}
  #roomHeaderBar .room-info-expanded .room-mobile-presence-label{display:inline;}
  #roomHeaderBar #roomTitle{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;word-break:normal;line-height:1.35;cursor:pointer;padding-right:0;}
  #roomHeaderBar #roomTitle.room-title-expanded{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word;}
  /* 展開 affordance はタイトル行の高さに依存させず、ケバブの真下にある右側操作列へ置く。 */
  #roomHeaderBar .room-title-expand-icon{display:grid;place-items:center;position:static;flex:0 0 auto;width:22px;height:22px;padding:0;color:var(--text-dim);font:inherit;background:transparent;border:0;border-radius:0;appearance:none;pointer-events:auto;cursor:pointer;z-index:1;transition:transform .15s ease,color .15s ease;}
  #roomHeaderBar .room-title-expand-icon svg{display:block;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;}
  #roomHeaderBar .room-title-expand-icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  #roomHeaderBar .room-info-expanded .room-title-expand-icon{transform:rotate(180deg);}
  #roomHeaderBar #roomTitle[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
}

.chat-scroll{flex:1;overflow-y:auto;padding:12px 18px 8px;background:var(--bg);position:relative;}
.chat-scroll-wrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;}
.new-msg-btn{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:6px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;padding:8px 18px;border-radius:999px;box-shadow:0 4px 16px rgba(12,158,114,.35);white-space:nowrap;cursor:pointer;border:none;font-family:inherit;z-index:10;animation:popIn .15s ease;}
.new-msg-btn.show{display:flex;}
@keyframes popIn{from{opacity:0;transform:translateX(-50%) translateY(6px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .new-msg-btn{animation:none;}
}
.chat-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:1px;}
.chat-line{padding:4px 8px;border-radius:7px;font-size:13.5px;line-height:1.55;display:block;word-break:break-word;}
.chat-img-wrap{display:block;margin-top:6px;width:100%;}
.chat-img{max-width:280px;max-height:200px;border-radius:8px;border:1px solid var(--line);object-fit:contain;cursor:pointer;display:block;transition:opacity .15s;}
.chat-img:hover{opacity:.88;}
.img-reveal-btn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;background:var(--bg);border:1px dashed var(--text-faint);border-radius:8px;padding:7px 11px;cursor:pointer;text-align:left;max-width:320px;}
.img-reveal-btn:hover{border-color:var(--accent);background:var(--accent-light);}
.img-reveal-top{display:flex;align-items:center;gap:6px;}
.img-reveal-icon{font-size:14px;line-height:1;}
.img-reveal-text{font-size:13px;font-weight:600;color:var(--accent);}
.img-reveal-warn{font-size:10px;color:var(--text-faint);line-height:1.35;font-family:var(--font-mono);}
.chat-link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;word-break:break-all;cursor:pointer;}
.chat-link:hover{opacity:.8;}
.chat-line:hover{background:rgba(0,0,0,.03);}
.chat-line .ts{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);display:inline-block;margin-right:7px;vertical-align:baseline;}
.chat-line .name{font-weight:700;display:inline-block;margin-right:7px;vertical-align:baseline;}
.chat-line .poster-id{display:inline-block;margin-right:7px;vertical-align:baseline;}
.chat-line .msg{color:var(--text);}
.chat-line.sys{padding:6px 8px;}
.chat-line.sys .msg{color:var(--text-faint);font-family:var(--font-mono);font-size:11.5px;}
.chat-line.mine{background:var(--mine-bg);}
.chat-line.mine .msg{color:var(--mine-text);}

.composer{flex-shrink:0;padding:12px 18px 14px;border-top:1px solid var(--line);background:var(--bg-elevated);}
.composer-inner{max-width:880px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;}
.composer-textarea-wrap{flex:1;position:relative;}
.composer textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:11px 14px;color:var(--text);font-size:14px;font-family:inherit;resize:none;overflow:hidden;min-height:44px;max-height:180px;line-height:1.5;display:block;transition:border-color .15s;}
.composer textarea:focus{outline:none;border-color:var(--accent);}
.composer textarea::placeholder{color:var(--text-faint);}
.composer textarea:disabled{opacity:.5;}

.overflow-preview{display:none;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);border-top:none;border-radius:0 0 9px 9px;padding:5px 14px 7px;font-size:12.5px;color:var(--text);word-break:break-all;max-height:56px;overflow-y:auto;line-height:1.5;}
.overflow-preview.active{display:block;}
.overflow-preview .over-label{font-size:10.5px;color:var(--danger);font-weight:700;font-family:var(--font-mono);margin-right:6px;}
.overflow-preview .over-chars{background:rgba(220,38,38,.25);border-radius:3px;padding:0 2px;}
.dark-theme .overflow-preview{background:rgba(255,80,80,.08);border-color:rgba(255,80,80,.25);}
.dark-theme .overflow-preview .over-chars{background:rgba(255,80,80,.3);}
.composer textarea.over-limit{border-radius:9px 9px 0 0;border-color:rgba(220,38,38,.4);}
.send-btn{background:var(--accent);color:var(--accent-text);font-weight:700;border-radius:9px;padding:11px 18px;font-size:13.5px;flex-shrink:0;box-shadow:0 2px 6px rgba(12,158,114,.25);align-self:flex-end;}
.send-btn:hover{filter:brightness(1.06);}
.send-btn:disabled{opacity:.4;cursor:not-allowed;}
.cooldown-hint{max-width:880px;margin:5px auto 0;font-size:10.5px;color:var(--text-faint);font-family:var(--font-mono);min-height:14px;}



/* source: styles/app-overlays.css */
/* ── modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(20,24,36,.4);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(4px);}
.modal-overlay.active{display:flex;}
#threadDeletedNoticeModal{z-index:220;}
.thread-deleted-notice-desc{margin:0 0 48px;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.4;color:var(--text-faint);}
#threadDeletedNoticeModal .thread-deleted-notice-actions{justify-content:center;}
.modal{background:var(--bg-elevated);border:1px solid var(--line);border-radius:16px;width:100%;max-width:420px;padding:24px;box-shadow:var(--shadow-modal);}
#newThreadModal .modal,#editOpeningMessageModal .modal{max-width:630px;}
.modal h2{font-family:var(--font-display);font-size:17px;margin:0 0 4px;color:var(--text);}
.modal-desc{font-size:12.5px;color:var(--text-faint);margin:0 0 18px;}
.modal label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:6px;font-family:var(--font-mono);}
.modal input,.modal textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font-size:14px;margin-bottom:14px;font-family:var(--font-body);}
.modal textarea{resize:none;min-height:60px;}
.modal input:focus,.modal textarea:focus{outline:none;border-color:var(--accent);}
.modal input.is-invalid,.modal textarea.is-invalid{border-color:var(--danger);box-shadow:0 0 0 2px var(--danger-light);}
#newThreadFirst,#editOpeningMessageText{margin-bottom:6px;}
#editOpeningMessageText{min-height:140px;}
.thread-content-char-count{margin:0 0 6px;}
.thread-content-overflow-preview{display:none;margin:0 0 6px;overflow-y:auto;}
.thread-content-overflow-preview.active{display:block;}
#newThreadFirst.over-limit,#editOpeningMessageText.over-limit{border-radius:8px;border-color:rgba(220,38,38,.4);}
.thread-modal-status{display:grid;flex:1;min-width:0;height:18px;margin-right:8px;align-self:center;}
.thread-modal-status>*{grid-area:1/1;margin:0;}
.modal-field-error{height:18px;min-height:18px;max-height:18px;line-height:18px;overflow:hidden;color:var(--danger);font-size:12px;font-weight:700;visibility:hidden;}
.modal-field-error.is-visible{visibility:visible;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}
.btn-cancel{padding:9px 16px;font-size:13px;color:var(--text-dim);border-radius:8px;border:1px solid var(--line);}
.btn-cancel:hover{color:var(--text);background:var(--bg);}
.btn-confirm{padding:9px 18px;font-size:13px;font-weight:700;background:var(--accent);color:var(--accent-text);border-radius:8px;box-shadow:0 2px 6px rgba(12,158,114,.2);}
.btn-confirm:hover{filter:brightness(1.06);}
.btn-confirm:disabled{opacity:.5;cursor:not-allowed;}
.btn-danger{padding:9px 18px;font-size:13px;font-weight:700;background:var(--danger);color:#fff;border-radius:8px;}
.btn-danger:hover{filter:brightness(1.06);}

/* ── 利用規約同意ゲート（#termsGateModal） ──
   他の.modal（max-width:420px）だと利用規約の全文を読める幅にならないため、
   .modal-wideだけ個別に幅を広げる。本文はview-terms（利用規約ページ）の.static-page-card
   をJS側で複製して.terms-gate-scrollに差し込む前提のため、.static-page系のスタイル
   （見出し・リスト等）がここでもそのまま効くようにあえて.static-page-cardのクラス構造ごと
   複製する設計にしている（詳細はapp.js側のコメント参照）。 */
.modal-wide{max-width:640px;}
.terms-gate-scroll{max-height:min(50vh,420px);overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:14px;background:var(--bg);}
.terms-gate-scroll .static-page-card{background:none;border:none;box-shadow:none;padding:0;}
.terms-gate-agree-note{font-size:12px;color:var(--text-faint);margin:0 0 16px;text-align:center;}

/* IDブロック確認の吹き出し（旧: 画面中央モーダル＋背景ぼかし）。
   position:fixedでJS(positionBlockConfirmPopover)がtop/leftを都度計算して配置する。 */
.block-confirm-popover{position:fixed;display:none;z-index:150;width:250px;max-width:calc(100vw - 24px);
  background:var(--bg-elevated);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-modal);padding:14px;}
.block-confirm-popover.active{display:block;}
.block-confirm-title{font-family:var(--font-display);font-size:14px;font-weight:700;margin:0 0 4px;color:var(--text);}
.block-confirm-desc{font-size:11.5px;line-height:1.5;color:var(--text-faint);margin:0 0 12px;}
.block-confirm-actions{display:flex;gap:6px;justify-content:flex-end;}
.block-confirm-actions .btn-cancel,.block-confirm-actions .btn-confirm{padding:7px 12px;font-size:12px;}
.block-confirm-arrow{position:absolute;width:14px;height:14px;background:var(--bg-elevated);
  border:1px solid var(--line);transform:rotate(45deg);}
/* 吹き出しがIDの上に出る場合: 矢印は下端中央で下向き（下半分の辺だけ影を落として下向きに見せる） */
.block-confirm-popover.arrow-down .block-confirm-arrow{bottom:-8px;border-top:none;border-left:none;}
/* 吹き出しがIDの下に出る場合（画面上端に近くて上に出せない時）: 矢印は上端中央で上向き */
.block-confirm-popover.arrow-up .block-confirm-arrow{top:-8px;border-bottom:none;border-right:none;}
.char-count{font-size:10.5px;color:var(--text-faint);text-align:right;margin:-10px 0 14px;font-family:var(--font-mono);}
.thread-cooldown-hint{height:17px;min-height:17px;max-height:17px;overflow:hidden;font-size:11px;color:var(--text-faint);font-family:var(--font-mono);line-height:17px;text-align:left;visibility:hidden;}
.thread-cooldown-hint.is-visible{visibility:visible;}
.admin-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--admin-color);background:#f3efff;border:1px solid rgba(124,77,255,.2);border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle;}

@media(max-width:600px){
  .thread-spark{display:none;}
  #aboutHeaderBar .back-btn{left:14px;}
}



/* source: styles/app-hamburger.css */
/* ── theme toggle switch ── */
.theme-toggle{display:flex;align-items:center;cursor:pointer;flex-shrink:0;}
.theme-toggle input{display:none;}
.theme-track{display:block;width:52px;height:28px;border-radius:999px;background:var(--line);border:1px solid var(--line);transition:background .2s;padding:2px;position:relative;}
.theme-toggle input:checked + .theme-track{background:#2a2f3d;border-color:#2a2f3d;}
.theme-thumb{width:22px;height:22px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.4,0,.2,1);position:absolute;top:3px;left:3px;}
.theme-toggle input:checked + .theme-track .theme-thumb{transform:translateX(24px);}

/* ── ハンバーガーメニュー（オーバーレイ＋右からスライドインするパネル）──
   名前・テーマ切替と、NG／ブロック設定ページへの入口・一括設定を上から順に並べる。 */
.hamburger-overlay{position:fixed;inset:0;background:rgba(20,24,36,.4);display:none;justify-content:flex-end;z-index:200;}
.hamburger-overlay.active{display:flex;}
.hamburger-panel{width:100%;max-width:340px;height:100%;background:var(--bg-elevated);box-shadow:var(--shadow-modal);display:flex;flex-direction:column;animation:hamburgerSlideIn .18s ease;}
@keyframes hamburgerSlideIn{from{transform:translateX(24px);opacity:.6;}to{transform:translateX(0);opacity:1;}}
.hamburger-panel-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);}
/* 「Chちゃんねるとは？」：タイトルロゴ(.brand-mark)と全く同じフォント・配色にするため、
   固定の--font-logoと、spanで囲んだ部分だけ--accent色にする構造を踏襲している。
   ロゴと同様、今後のフォント変更対象から除外する（変更しないこと）。 */
.hamburger-about-link{font-family:var(--font-logo);font-weight:800;font-size:14px;letter-spacing:.01em;color:var(--text);white-space:nowrap;text-decoration:none;}
.hamburger-about-link span{color:var(--accent);}
.hamburger-about-link:hover{opacity:.75;}
.hamburger-close{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:15px;}
.hamburger-close:hover{background:var(--bg);color:var(--text);}
.hamburger-panel-body{flex:1;overflow-y:auto;padding:8px 18px 24px;}

/* ナビリンク一覧（カテゴリー/人気/新着/お気に入り/閲覧履歴）。新着・お気に入りはトップバーには
   置かない方針のため、PC幅でもこのハンバーガーメニュー内リンクから常時アクセスできるようにしている。
   見た目は他の.hamburger-row群と揃え、同じ「1行=下線区切り」のスタイルにしている。 */
.hamburger-nav{display:flex;flex-direction:column;}
.hamburger-nav-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--text);padding:11px 6px;text-decoration:none;}
.hamburger-nav-item:hover{color:var(--accent);}
.hamburger-nav-icon{width:19px;height:19px;flex-shrink:0;color:inherit;}
/* 設定系の項目（名前／テーマ切替／ブロック設定）は、ナビ5項目のように項目ごとに絵柄を変えず、
   あえて全て同じ「設定っぽい」アイコン1種類に統一している。 */
.hamburger-settings-icon{width:17px;height:17px;flex-shrink:0;color:var(--text-dim);}

/* ── リンク／設定グループの区切り線 ──
   文字ラベルは使わず罫線だけで区切る（.hamburger-group-label-settingsは空divとしてHTML側に
   残し、border-topで区切り線を出すためだけに使っている）。 */
.hamburger-group-label-settings{padding:20px 0 6px;margin-top:12px;border-top:1px solid var(--line);}

.hamburger-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 6px;text-align:left;}
.hamburger-row-static{cursor:default;}
label.hamburger-row-static{cursor:pointer;}
label.hamburger-row-static:hover .hamburger-row-label{color:var(--accent);}
label.hamburger-row-static:hover .hamburger-settings-icon{color:var(--accent);}
.hamburger-row-label{display:inline-flex;align-items:center;gap:14px;text-align:left;font-size:13.5px;font-weight:600;color:var(--text);}
.hamburger-row-value{font-size:13px;color:var(--text-dim);}
.hamburger-row-select select{width:max-content;min-width:0;flex:0 0 auto;margin-left:auto;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--text);font:inherit;font-size:12px;}
.hamburger-row-select select:focus{border-color:var(--accent);}
/* 名前のインライン編集欄（別モーダルを開かず、この行内でそのまま編集・自動保存する） */
.nick-inline-input{background:none;border:none;border-bottom:1px solid transparent;color:var(--text);font-size:13px;text-align:right;padding:2px 0;max-width:140px;min-width:0;transition:border-color .15s;}
.nick-inline-input:hover{border-bottom-color:var(--line);}
.nick-inline-input:focus{outline:none;border-bottom-color:var(--accent);}
.nick-inline-input::placeholder{color:var(--text-faint);}

.hamburger-section{padding:16px 6px 0;}
/* 設定セクション同士の間隔を、名前・テーマ行と同じ呼吸感に揃える。 */
.hamburger-section + .hamburger-section{padding-top:24px;}
.hamburger-section-title{display:flex;align-items:center;gap:14px;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:16px;}
.hamburger-section-link{width:100%;padding:0;text-align:left;cursor:pointer;}
.hamburger-section-link:hover{color:var(--accent);}
.hamburger-section-link:hover .hamburger-settings-icon{color:var(--accent);}
.hamburger-section-desc{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin:0 0 12px;}
.hamburger-section .empty-note{padding:16px;font-size:12px;}

.block-bulk-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line);}
.hamburger-section .block-bulk-row{margin-bottom:0;padding-bottom:0;border-bottom:0;}
.hamburger-section-ng{padding-bottom:10px;border-bottom:1px dashed var(--line);}
.block-bulk-label{font-size:11.5px;color:var(--text-faint);font-weight:600;}
.block-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.block-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.block-item-id{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);flex-shrink:0;}
.block-item-mode{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:2px;}
.block-mode-btn{padding:5px 9px;font-size:11px;border-radius:5px;color:var(--text-dim);white-space:nowrap;}
.block-mode-btn.active{background:var(--bg-elevated);color:var(--accent);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.block-remove-btn{margin-left:auto;padding:5px 10px;font-size:11px;font-weight:600;color:var(--danger);border:1px solid rgba(224,62,62,.25);border-radius:7px;background:var(--danger-light);white-space:nowrap;}
.block-remove-btn:hover{filter:brightness(1.05);}
.ng-add-row,.ng-backup-row{display:flex;gap:8px;margin:0 0 10px;}
.ng-add-row input,.ng-backup-row select{min-width:0;flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:7px 9px;color:var(--text);font:inherit;font-size:12px;}
.ng-add-row button,.ng-backup-row button{padding:7px 9px;border:1px solid var(--line);border-radius:7px;color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap;}
.ng-backup-row button{flex:0 0 94px;padding:8px 9px;text-align:center;}
.ng-backup-row #settingsImportStrategy{flex:0 0 60px;}
.ng-entry-value{min-width:0;flex:1;font-size:12px;overflow-wrap:anywhere;}
.ng-list-heading{font-size:11.5px;font-weight:700;color:var(--text-dim);margin:14px 0 6px;}
.ng-empty-note{padding:6px 0!important;}
.ng-backup{margin-top:14px;padding:14px 0 2px;}
.ng-backup .ng-list-heading{margin:0 0 10px;}
.ng-backup-row:last-of-type{margin-bottom:0;}
.ng-storage-status{margin:8px 0 0;padding:8px 10px;border:1px solid rgba(224,62,62,.28);border-radius:8px;background:var(--danger-light);color:var(--danger);font-size:11.5px;line-height:1.5;}
.ng-thread-fold{justify-content:space-between;color:var(--text-faint);font-size:12.5px;}
.ng-thread-fold-text{min-width:0;}

/* ── ブロックされた投稿の折りたたみ表示（チャット内）── */
.chat-line.blocked-line{color:var(--text-faint);}
.blocked-placeholder-text{display:flex;align-items:center;gap:8px;color:var(--text-faint);font-size:12.5px;font-family:var(--font-mono);}
.blocked-reveal-btn{font-size:11px;font-weight:700;color:var(--accent);padding:2px 8px;border:1px solid rgba(12,158,114,.3);border-radius:999px;background:var(--accent-light);white-space:nowrap;}
.blocked-reveal-btn:hover{filter:brightness(1.05);}

/* ── 投稿者ID（クリックしてブロックできることを示すスタイル）── */
.chat-line .poster-id.clickable{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;}
.chat-line .poster-id.clickable:hover{color:var(--text-dim);}

@media(max-width:480px){
  .hamburger-panel{max-width:88vw;}
}



/* source: styles/app-media.css */
/* ── lightbox ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:300;cursor:default;backdrop-filter:blur(6px);}
.lightbox.active{display:flex;}
.lightbox-inner{position:relative;display:flex;align-items:center;justify-content:center;cursor:default;max-width:92vw;max-height:92vh;}
.lightbox-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;display:block;box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:zoom-in;user-select:none;-webkit-user-drag:none;transform-origin:center center;}
.lightbox-close{position:fixed;top:16px;right:20px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;line-height:1;transition:background .15s;}
.lightbox-close:hover{background:rgba(255,255,255,.25);}
.lightbox-url{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.45);font-family:var(--font-mono);max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ── chat video ── */
.chat-video{max-width:320px;max-height:220px;border-radius:8px;border:1px solid var(--line);display:block;background:#000;margin-top:2px;}
.chat-embed-wrap{display:block;margin-top:6px;width:320px;max-width:100%;}
.chat-embed-video{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;}
.chat-embed-video iframe{display:block;width:100%;height:100%;border:0;}

/* ── poster ID (5ch風ID表示) ── */
.chat-line .poster-id{font-size:10px;color:var(--text-faint);font-family:var(--font-mono);flex-shrink:0;user-select:text;}



/* source: styles/app-layout.css */
/* ── side ad areas ──
   topbar（ヘッダー）は画面全幅で表示し、広告スペースはその「下」の領域における
   左右の余白部分のみに配置する（ヘッダー横には広告を出さない）。

   通常画面では.layout-wrapper自体を唯一のページスクロール領域にする。中央だけをスクロール
   させないことで、左右広告も中央コンテンツと同じ距離・速度で移動する。#appには最低でも
   スクロール領域1画面分の高さを持たせ、短いページのsticky footerも従来どおり下端へ配置する。 */
.layout-wrapper{display:flex;flex:1;min-height:0;width:100%;background:var(--bg);overflow-y:auto;align-items:flex-start;}
.layout-wrapper > #app{flex:1;min-width:0;min-height:100%;overflow:visible;align-self:stretch;}
.layout-wrapper:not(.layout-room-fixed) #view-top,
.layout-wrapper:not(.layout-room-fixed) #view-board{overflow:visible;}
.layout-wrapper:not(.layout-room-fixed) .top-scroll,
.layout-wrapper:not(.layout-room-fixed) .thread-list-wrap,
.layout-wrapper:not(.layout-room-fixed) .static-page{overflow-y:visible;}
/* 広告要素とレイアウト用の構造列を分離する。
   Brave等が.ad-sideを非表示にしても.layout-gutterは残るため、左右の片側だけが消えて
   中央の#appが横へずれることを防ぐ。通常の広告表示時は従来どおり160px列になる。 */
.layout-gutter{flex:0 0 160px;width:160px;height:auto;display:flex;flex-direction:column;overflow:visible;align-self:flex-start;}
.ad-side{flex:1 1 auto;width:100%;height:auto;display:flex;flex-direction:column;gap:16px;padding:12px 8px;overflow:visible;align-self:flex-start;}
/* ホームだけ見出しバー（.room-header）を出さない方針にしたぶん、広告カラム自体の開始位置は
   他画面より浅い位置から始まってしまう。バーを追加で表示せずに広告スペースの見た目の高さ位置
   だけ他画面と揃えるため、ホーム表示中（#view-top.active）だけ広告カラムの上パディングを
   89px（見出しバー実測77px＝min-height76px＋下ボーダー1px、＋通常の上パディング12px）にする
   （:has()でJSを介さずCSSだけで判定）。この89pxは他画面のスレッドカード上辺（.thread-list-wrap
   の上パディング12px側）・ホームの人気スレッド1件目カード上辺（.top-scroll側、こちらは0pxの
   コメント参照）とも揃えてあるので、広告・カード・見出しバーの上辺が全画面で一直線に揃う。 */
.layout-wrapper:has(#view-top.active) .ad-side{padding-top:89px;}
.ad-slot{flex:0 0 600px;height:600px;width:100%;max-width:160px;background:var(--bg-card);border:1px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:11px;font-family:var(--font-mono);text-align:center;padding:8px;}

/* チャット画面だけは3列全体を残り画面高へ固定し、.chat-scrollを唯一のスクロール領域に戻す。
   左右広告・スレッド見出し・投稿欄はログをスクロールしても動かない。将来通常画面へ広告枠を
   追加した場合も、固定高のチャットでは先頭枠だけを表示して列内スクロールを発生させない。 */
.layout-wrapper.layout-room-fixed{overflow:hidden;align-items:stretch;}
.layout-wrapper.layout-room-fixed > #app{min-height:0;overflow:hidden;align-self:stretch;}
.layout-wrapper.layout-room-fixed .layout-gutter{height:100%;overflow:hidden;align-self:stretch;}
.layout-wrapper.layout-room-fixed .ad-side{height:100%;gap:0;overflow:hidden;align-self:stretch;}
.layout-wrapper.layout-room-fixed .ad-slot{flex:1 1 auto;height:auto;min-height:0;max-height:600px;}
.layout-wrapper.layout-room-fixed .ad-slot ~ .ad-slot{display:none;}
@media(max-width:1100px){
  .layout-gutter{display:none;}
}