/*
 * modern.css — ソクマトch モダン化レイヤー
 *
 * style.css のカラートークンを上書きしてダーク基調にする。
 * style.css の後に読み込まれる前提(functions.php で依存指定)。
 *
 * 元は別途「追加CSS」貼り付け用に作られたものだが、DBではなく
 * テーマファイルとして持たせてgit管理下に置いている。
 * 戻すときは functions.php の enqueue を外すか、このファイルを消す。
 *
 * 原版から「素のHTML形式レスをカード化する」セクションは削除済み。
 * 全記事を resbox ブロックに作り直したため対象が存在せず、
 * セレクタ p:has(> strong:first-child) が無関係の段落まで拾うため。
 */

/* ============================================================
   1. カラートークンの上書き（ここがデザイン変更の本体）
   ============================================================ */
:root{
  /* ---- 面（暗い順：ページ地 → スレ外枠 → 記事カード → 各レス） ---- */
  --bg:            #080A12;   /* ページ地：最も暗い */
  --bg-thread:     #0B0F19;   /* スレ外枠：カードから一段沈める（元の意図を維持） */
  --bg-card:       #10141F;   /* 記事カード */
  --bg-subtle:     #151A28;   /* 出典表記などの控えめな面 */
  --bg-res:        #161B2A;   /* 各レス：スレ外枠から浮かせる */
  --bg-res-alt:    #1A2032;   /* 各レス（偶数行） */
  --bg-comment:    #191322;   /* 読者コメント：紫寄りに振ってスレ本文と区別 */

  /* ---- 罫線 ---- */
  --line:          rgba(129,140,248,.16);
  --line-strong:   rgba(129,140,248,.30);

  /* ---- 文字（暗背景でのコントラストを確保） ---- */
  --text:          #E7ECF7;   /* 本文：--bg-card 上で約 14:1 */
  --text-dim:      #8E9AB8;   /* 日付・IDなど：約 6:1 */

  /* ---- アクセント：オレンジ → ブランドのシアン／インディゴ／ピンク ---- */
  --accent:        #22D3EE;   /* 装飾面・レール */
  --accent-text:   #67E8F9;   /* リンク・見出し（暗背景で読める明度に） */
  --accent-badge:  #22D3EE;   /* バッジ地（文字色は下で濃紺に変更） */
  --accent-tint:   rgba(34,211,238,.09);

  --res-name:      #4ADE80;   /* レスの名前（緑）を暗背景用に明るく */
  --comment-rail:  #2DD4BF;   /* コメント欄のレール（青緑） */

  /* ---- 追加トークン ---- */
  --sk-grad:   linear-gradient(135deg,#22D3EE,#818CF8 55%,#F472B6);
  --sk-ease:   cubic-bezier(.22,1,.36,1);
  --sk-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -18px rgba(34,211,238,.20);
}

/* ============================================================
   2. 背景にブランドカラーのグロー（画像もJSも使わない）
   ============================================================ */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 460px at 12% -6%,  rgba(34,211,238,.14), transparent 60%),
    radial-gradient(620px 480px at 100% 8%,  rgba(129,140,248,.12), transparent 55%),
    radial-gradient(720px 520px at 50% 115%, rgba(244,114,182,.09), transparent 60%);
}

/* ============================================================
   3. 本文幅（720px → 820px。今の画面は左右が余りすぎている）
   ============================================================ */
.site-wrap{ max-width: 820px; }

/* ============================================================
   4. ヘッダー
   ============================================================ */
.site-header{
  background: rgba(16,20,31,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
/* 3pxのベタ塗りボーダーを、にじむグラデーションの線に置き換える */
.site-header::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sk-grad);
  opacity: .75;
}

.site-title{ font-size: 24px; letter-spacing: .03em; }
/* 「ソクマト」だけでなく全体をグラデーション文字に */
.site-title a{
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.site-title .accent{ color: inherit; }
.site-title a:hover{ text-decoration: none; opacity: .85; }

.site-description{ color: #7C89A8; letter-spacing: .06em; }

/* ============================================================
   5. 記事一覧カード
   ============================================================ */
.entry-list{ padding: 20px 0 48px; }

.entry-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--sk-shadow);
  transition: transform .22s var(--sk-ease), box-shadow .22s var(--sk-ease), border-color .22s var(--sk-ease);
}
.entry-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.38);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 26px 52px -20px rgba(34,211,238,.34);
}

.entry-card .entry-title{ font-size: 19px; margin: 0 0 10px; letter-spacing: .01em; }
.entry-card .entry-title a{ color: var(--text); transition: color .18s var(--sk-ease); }
.entry-card .entry-title a:hover{ color: var(--accent-text); text-decoration: none; }

.entry-excerpt{ font-size: 14px; line-height: 1.8; }

/* ============================================================
   6. バッジ類（レス番号・コメント番号）
      ベタ塗り＋白文字 → グラデーション＋濃紺文字
      （明るいシアンに白文字だとコントラストが取れないため）
   ============================================================ */
.res-meta .res-no,
.comment-list .comment-no{
  background: var(--sk-grad);
  color: #06263B;
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 10px;
  letter-spacing: .03em;
}
/* カテゴリバッジだけはジャンルごとのイメージカラーを使う(functions.php がインラインで
   --genre-color を指定する)。白文字前提の色を選んでいるのでcolorは常に白でよい。 */
.entry-meta .cat{
  background: var(--genre-color, var(--sk-grad));
  color: #fff;
  font-weight: 700;
  border-radius: 100px;
  padding: 2px 10px;
  letter-spacing: .03em;
}

/* ============================================================
   7. 記事本文
   ============================================================ */
.entry-content{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px 32px;
  box-shadow: var(--sk-shadow);
}
.entry-content .entry-title{ letter-spacing: .01em; }
.entry-content h2{
  border-left: 4px solid transparent;
  border-image: var(--sk-grad) 1;
  padding-left: 12px;
}
.entry-content .source-note{ border-radius: 8px; }

/* ============================================================
   8. スレ本文（resbox）と読者コメント
      面の色は変数で切り替わるので、角丸と余白だけ現代的にする
   ============================================================ */
.resbox{
  border-radius: 12px;
  border-left: 4px solid transparent;
  border-image: var(--sk-grad) 1;
  padding: 14px;
}
.resbox .res{ border-radius: 8px; }
.resbox::before{ letter-spacing: .1em; }

.comments-area{ border-radius: 12px; }
.comment-list .comment-body{ border-radius: 8px; }

/* 送信ボタン */
.comment-form .submit{
  background: var(--sk-grad);
  color: #06263B;
  border-radius: 100px;
  padding: 11px 26px;
  transition: filter .18s var(--sk-ease), transform .12s var(--sk-ease);
}
.comment-form .submit:hover{ background: var(--sk-grad); filter: brightness(1.08); }
.comment-form .submit:active{ transform: translateY(1px); }

/* 入力欄 */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  border-radius: 8px;
  background: var(--bg-res);
}
.comment-form input:focus,
.comment-form textarea:focus{
  outline: none;
  border-color: rgba(34,211,238,.55);
}

/* ============================================================
   8-c. 引用（スレの発端になった投稿）
   いまは字下げだけで目立たないので、面として見せる
   ============================================================ */
.entry-content blockquote{
  background: var(--bg-thread);
  border: 1px solid var(--line);
  border-left: 4px solid rgba(129,140,248,.55);
  border-radius: 10px;
  margin: 0 0 20px;
  padding: 14px 18px;
  color: var(--text);
}
.entry-content blockquote p{ margin: 0; }

/* ============================================================
   8-d. トップの「もっと見る」ボタン
   ============================================================ */
.load-more-btn{
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  transition: filter .18s var(--sk-ease), transform .12s var(--sk-ease), border-color .18s var(--sk-ease);
}
.load-more-btn:hover:not(:disabled){
  border-color: rgba(34,211,238,.5);
  filter: brightness(1.1);
}
.load-more-btn:active:not(:disabled){ transform: translateY(1px); }

/* ============================================================
   9. PR表記・フッター
   ============================================================ */
.pr-notice{ border-radius: 100px; padding: 6px 14px; }

.site-footer{
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 28px 0 44px;
}
.site-footer a{ transition: color .18s var(--sk-ease); }
.site-footer a:hover{ color: var(--accent-text); text-decoration: none; }

/* ============================================================
   10. スマホ
   ============================================================ */
@media (max-width: 480px){
  .entry-card{ padding: 18px 16px; border-radius: 12px; }
  .entry-card .entry-title{ font-size: 17px; }
  .entry-content{ padding: 20px 16px 24px; border-radius: 12px; }
  .site-title{ font-size: 21px; }
}