:root {
    --bg:#fffaf3; --ink:#1a1a1a; --muted:#777; --card:#fff;
    --accent:#ff8ba7; --badge:#e6f0ff;
  }

  /* 基本 */
  *{ box-sizing:border-box }
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    color:var(--ink); background:var(--bg);
  }

  /* ===== ヘッダ & タブ ===== */
  .site-header{
    position:sticky; top:0; z-index:10;
    background:var(--card); border-bottom:1px solid #eee;
    padding:8px 12px; display:flex; align-items:center; gap:16px;
  }
  .site-header h1{ margin:0; font-size:20px; }
  .tabs{ display:flex; gap:6px; }
  .tabs button{
    border:none; background:#f4f6f8; padding:8px 12px; border-radius:8px; cursor:pointer;
  }
  .tabs .active{ background:var(--accent); color:#fff; }

  /* ===== フィルタ ===== */
  .controls{ display:flex; gap:16px; padding:12px; flex-wrap:wrap; }

  /* ===== 2カラムレイアウト（PC） ===== */
  .layout{
    display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:16px; max-width:1100px; margin:0 auto; padding:12px;
  }
  .sidebar{ display:block; }
  .sticky{ position:sticky; top:12px; }

  /* モバイル/タブレットは1カラム */
  @media (max-width:900px){
    .layout{ grid-template-columns:1fr; }
    .sidebar{ order:2; }
  }

  /* ===== スレ作成ボックス（目立つ・大きめ） ===== */
  .composer{
    max-width:980px; margin:12px auto 16px;
    background:var(--card); border:1px solid #eee; border-radius:12px; padding:14px;
    border:2px solid #0b69ff22; background:#f7fbff;
    box-shadow:0 2px 10px rgba(11,105,255,0.06);
  }
  .composer h2{ margin:0 0 8px; color:#0b69ff; }
  .composer__title,.composer__body,.composer select,.composer input[type="file"]{
    width:100%; font-size:1.05rem; line-height:1.6;
    padding:10px; border-radius:8px; border:1px solid #cfe0ff; background:#fff; margin-bottom:8px;
  }
  .composer .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  #postBtn{
    padding:10px 16px; font-weight:800; border-radius:8px; border:none;
    background:#0b69ff; color:#fff; cursor:pointer;
  }
  #postBtn:hover{ opacity:.92; }

  /* ===== スレ一覧 ===== */
  .feed{
    max-width:980px; margin:0 auto; padding:12px;
    display:grid; grid-template-columns:1fr; gap:12px;
  }
  @media (min-width:1024px){ .feed{ grid-template-columns:1fr 1fr; } }

  /* ===== スレカード ===== */
  .card{
    background:var(--card); border:1px solid #eee; border-radius:12px; overflow:hidden;
    display:flex; flex-direction:column; gap:8px; padding:10px;
    transition:box-shadow .2s ease;
  }
  .card-link{ cursor:pointer; }
  .card:hover{ box-shadow:0 2px 10px rgba(0,0,0,0.08); }

  .thumb{
    width:100%; height:auto; max-height:200px; object-fit:cover; border-radius:8px;
    background: none !important; /* グレー削除 */
  }



  /* 画像がある時だけ枠を出す */
  .thread-thumb-wrap { display: none; }
  .thread-thumb-wrap.show { display: block; }

  /* 一覧用の .thumb { display:none } を打ち消す（thread 専用） */
  .thread-thumb { 
    display: block !important;
    width: 100%;
    max-height: 360px;       /* 固定高さ */
    object-fit: contain;     /* 切りたくない */
    background: transparent; /* グレー背景なし */
  }


  /* ラッパー：固定サイズの箱（画像がある時だけ表示） */
  .thumb-wrap{
    display: none;              /* 画像がない時は完全に0スペース */
    width: 100%;
    height: 240px;              /* ← 好きな固定高さに */
    margin-top: 8px;
    border-radius: 8px;
    background: none;           /* 念のためグレー消し */
    overflow: hidden;
  }

  /* 画像がある時だけ表示 */
  .thumb-wrap.show{
    display: block;
  }

  /* 中の <img> は箱にフィット（切り取り無し） */
  .thumb{
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 画像は切らない */
    background: none !important;
    display: block;             /* 画像がある時のみ使う */
  }


  .text{ margin:0; font-size:1.1rem; font-weight:bold; }
  /* === タイトルを確実に折り返す（共通） === */
  .title,
  .thread-title,              /* ← スレッドページ用の見出し(後述のHTMLで使う) */
  .site-header h1 {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* threadページのメイン画像：常に同じ枠で表示 */
  #thumb{
    display:block !important;
    width:100%;
    /* 好きな比率に変更可（例: 16/9, 4/3, 1/1） */
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background:#eee;            /* 読み込み中のプレースホルダ */
  }

  /* 一覧カードのサムネが既にある場合の保険（同じ見た目に） */
  .card .thumb{
    display:block;
    width:100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    background:#eee;
    max-height: none;           /* もし以前の max-height が効いていたら無効化 */
  }

  /* コメント内の画像：枠は統一、内容は切らずに収める */
  /* コメント画像：切らずに収める（contain）＋サイズ統一 */
  .comment .img{
    display:block;
    max-width:100%;
    height:auto;          /* 縦横比は自然に維持 */
    max-height:260px;     /* 高さ上限で統一感（好みで調整） */
    object-fit: contain;  /* 画像は切らない（余白は出てもOK） */
    background:#f3f3f3;   /* レターボックス時の背景 */
    border-radius:8px;
    margin-top:.3rem;
  }

  /* 返信ボタンが縦に伸びない（再掲：安全のため） */
  .comment{
    display:flex;
    align-items:flex-start;  /* 本文が長くてもボタンは縦伸びしない */
    gap:.5rem;
  }
  .comment button{
    margin-left:auto;
    align-self:center;       /* ボタンは縦中央に */
    white-space:nowrap;      /* 折り返さない */
    padding:4px 8px;
    font-size:.9rem;
    font-weight:600;
    border:1px solid #ccc;
    border-radius:6px;
    background:#f5f5f5;
    cursor:pointer;
  }
  .comment button:hover{ background:#e8e8e8; }

  /* 番号の左余白は半角2文字分（2ch相当） */
  .comment .idx{
    min-width:2ch;
    text-align:right;
    padding-right:.4rem;
    opacity:.6;
  }



  /* === flex 子要素の折り返し阻害を防ぐ（超重要）=== */
  /* 親が display:flex の場合、子に min-width:0 が無いと折り返されない事があります */
  .card .text,
  .site-header h1,
  .thread-header .title {
    min-width: 0;
  }

  /* === 一覧は2行で省略、スレッドページは全文表示 === */
  /* 既存の .title ルールは「一覧向け」(2行省略)でOK。 */
  /* スレッドページでは .thread-title でクランプ解除して全文表示にします。 */
  .thread-title {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    white-space: normal;
    line-height: 1.4;
    font-weight: 800;
    font-size: 1.25rem; /* お好みで */
  }


  .meta-row{ display:flex; gap:6px; align-items:center; }
  .badge{ background:var(--badge); padding:2px 6px; border-radius:999px; font-size:12px; color:#334; }

  .preview{
    margin:4px 0 0;
    display:-webkit-box;
    -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; white-space:pre-wrap; color:#444; line-height:1.4;
  }

  /* thread.html の本文全表示用（念のため） */
  .body-full{ white-space:pre-wrap; line-height:1.6; margin:8px 0 12px; font-size:1rem; }

  /* ===== ページャ（thread.htmlを想定） ===== */
  .pager{ display:flex; align-items:center; gap:6px; margin:.5rem 0; }
  .pager .pageinfo{ color:var(--muted); font-size:12px; }
  .pager .pagejump{ width:60px; }

  /* ===== コメント（thread.html） ===== */
  .comments{ padding:8px 12px; display:flex; flex-direction:column; gap:4px; }
  /* ===== コメント部分（余白・ボタン修正） ===== */
  .comment {
    display: flex;
    align-items: flex-start;     /* ← これで返信ボタンが縦長にならない */
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    background: transparent;
  }

  .comment .idx {
    opacity: 0.6;
    display: inline-block;
    min-width: 2ch;              /* ← 半角2文字分に縮小 */
    text-align: right;
    padding-right: 0.4rem;
  }

  .comment button {
    margin-left: auto;
    align-self: center;          /* ← 縦方向の中央揃え */
    padding: 4px 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    white-space: nowrap;         /* ← ボタン文字を折り返さない */
  }

  .comment button:hover {
    background: #e8e8e8;
  }

  .comment.author{ color:#0b69ff; }          /* スレ主は青 */

  .comment .img{
    display:block; max-width:100%; height:auto; border-radius:8px; margin-top:.3rem;
  }
  a.reply{ text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

  /* ===== コメント投稿枠（thread.html） ===== */
  .comment-box{
    margin-top:1rem; padding:12px;
    border:2px solid #0b69ff22; border-radius:12px; background:#f7fbff;
    box-shadow:0 2px 10px rgba(11,105,255,0.06);
  }
  .comment-box__title{ font-weight:700; margin-bottom:8px; color:#0b69ff; }
  .comment-box textarea{
    width:100%; font-size:1.05rem; line-height:1.6; padding:10px;
    border-radius:8px; border:1px solid #cfe0ff; background:#fff; resize:vertical;
  }
  .comment-box__row{ margin-top:8px; display:flex; gap:8px; align-items:center; }
  .comment-box button{
    padding:8px 14px; font-weight:700; border-radius:8px; border:none; background:#0b69ff; color:#fff; cursor:pointer;
  }
  .comment-box button:hover{ opacity:.9; }

  /* ===== スレ風インライン広告（一覧の間に挿入） ===== */
  .ad-card{
    border:1px dashed #d7d7d7; background:#fcfcfd; border-radius:12px; padding:10px;
  }
  .ad-label{
    font-size:11px; color:#666; border:1px solid #ddd; padding:2px 6px; border-radius:10px; display:inline-block;
  }
  .ad-title{ font-weight:800; margin-top:6px; }
  .ad-desc{ color:#555; }
  .adbox{ background:#f1f3f5; border:1px solid #dfe3e6; border-radius:8px; padding:10px; text-align:center; }
  .adbox-rect{ min-height:250px; }
  .adbox-wide{ min-height:90px; }

  /* ===== サイド広告（PC） ===== */
  .side-ad .adbox + .adbox{ margin-top:12px; }
  .field { position: relative; }
  .counter {
    position: absolute; right: 8px; bottom: -2px; transform: translateY(100%);
    font-size: 12px; color: var(--muted);
  }
  .counter.error { color: #d00; font-weight: 700; }
  .error-msg { margin-top:6px; font-size:12px; color:#d00; font-weight:700; }
  .counter.error { color:#d00; font-weight:700; }

  /* --- ナビゲーションバー --- */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  /* 左側のロゴ部分 */
  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .logo-img {
    width: 36px;
    height: 36px;
    margin-right: 8px;
  }

  .logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  /* 右側のメニュー */
  .nav-right {
    display: flex;
    gap: 16px;
  }

  .nav-item {
    color: #444;
    text-decoration: none;
    font-size: 15px;
  }

  .nav-item:hover {
    color: #0078ff;
  }


  /* 画像が無い時は余白ゼロ */
  #thumbBox[hidden] { display: none !important; }

  /* 画像がある時は固定表示サイズ（高さは好みで） */
  .thumb-box { margin: 12px 0; }
  .thumb-box > img {
    display: block;
    width: 100%;
    height: 360px;        /* 固定表示サイズ */
    object-fit: contain;  /* 画像は切らずに収める */
    background: #f7f7f7;  /* 読み込み中の薄グレー（任意） */
  }

  /* スレッドのメイン画像 */
  .thread-hero[hidden] { display: none !important; } /* ← hiddenは完全非表示 */
  .thread-hero .thumb {
    display: block;
    width: 100%;
    max-height: 360px;    /* 固定“上限”だけ与える（表示時のみ効く） */
    object-fit: contain;  /* 画像は切らない */
  }

  .comment.deleted {
  color: #777;
  font-style: italic;
  }
  .comment .del-btn,
  .thread-del-btn {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
  }
  .comment .del-btn:hover,
  .thread-del-btn:hover {
    background: #f5f5f5;
  }
  .thread-deleted-note {
    padding: 12px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    color: #666;
    background: #fafafa;
    margin: 8px 0 12px;
  }





  /* ===== モバイル微調整 ===== */
  @media (max-width:600px){
    .composer, .card{ padding:12px; }
    .title{ font-size:1.05rem; }
    .preview{ -webkit-line-clamp:4; } /* モバイルは4行に */
  }