/* V-Quiz Lite Forum v1.7.0 — CloudCamp discussion forum UI
   3CPT (vquiz_q + vquiz_ms_q + vquiz_aws_q) 集約フォーラムのカードレイアウト。

   配色は CloudCamp 既存トークンのみを使用（新規の色は導入しない）:
     #82cddb アクセント(ボタン/フォーカス)  #64c3d2 サブアクセント
     #1a3a5c 濃紺(見出し/バッジ)            #ee7800 オレンジ(コメント数/CTA)
     #ffffff カード地  #e3e9ee 罫線  #f7fafc 明るい背景  #5b6b78/#8a98a4 補助テキスト */

.vq-forum{max-width:1080px;margin:0 auto}

/* header + filter bar */
.vq-forum-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}
.vq-forum-title{margin:0;font-size:1.5rem;color:#1a3a5c}
.vq-forum-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vq-forum-search{min-width:230px;padding:.5rem .8rem;border:1px solid #cdd8e0;border-radius:8px;font-size:.95rem;background:#fff}
.vq-forum-search:focus{outline:2px solid #82cddb;border-color:#82cddb}
.vq-forum-exam{padding:.5rem .8rem;border:1px solid #cdd8e0;border-radius:8px;font-size:.95rem;background:#fff;cursor:pointer}
.vq-forum-btn{padding:.5rem 1.1rem;border:0;border-radius:8px;background:#82cddb;color:#fff;font-weight:700;cursor:pointer}
.vq-forum-btn:hover{background:#5fb8c9}

/* card grid */
.vq-forum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.vq-forum-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid #e3e9ee;border-radius:12px;background:#fff;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.15s}
.vq-forum-card:hover{box-shadow:0 4px 14px rgba(26,58,92,.12);transform:translateY(-2px);border-color:#cfe3ea}

.vq-forum-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vq-forum-badge{display:inline-block;background:#1a3a5c;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.2rem .55rem;border-radius:999px}
.vq-forum-count{font-size:.85rem;color:#ee7800;font-weight:700;white-space:nowrap}

.vq-forum-card-title{font-weight:700;color:#16324f;line-height:1.45;font-size:1rem;word-break:break-word}
.vq-forum-card-preview{font-size:.88rem;color:#5b6b78;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vq-forum-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px;font-size:.78rem;color:#8a98a4}
.vq-forum-author{font-weight:600;color:#6b7c88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.vq-forum-author::before{content:"👤 ";opacity:.7}

.vq-forum-empty{padding:28px 12px;text-align:center;color:#8a98a4;background:#f7fafc;border-radius:12px}

/* pagination */
.vq-forum-nav{margin:22px 0 4px;display:flex;justify-content:center}
.vq-forum-nav .page-numbers{display:inline-block;min-width:38px;text-align:center;padding:.4rem .6rem;margin:0 3px;border:1px solid #d8e3eb;border-radius:8px;color:#1a3a5c;text-decoration:none;font-size:.9rem}
.vq-forum-nav .page-numbers.current{background:#82cddb;color:#fff;border-color:#82cddb;font-weight:700}
.vq-forum-nav a.page-numbers:hover{background:#eef7fa}

/* ============================================
   v1.7.0 追加分
   ============================================ */

/* 並び替えセレクト（.vq-forum-exam と同一の見た目に揃える） */
.vq-forum-sort{padding:.5rem .8rem;border:1px solid #cdd8e0;border-radius:8px;font-size:.95rem;background:#fff;cursor:pointer}

/* ベンダー別タブ */
.vq-forum-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.vq-forum-tab{display:inline-block;padding:.4rem .9rem;border:1px solid #e3e9ee;border-radius:999px;background:#fff;color:#5b6b78;font-size:.9rem;font-weight:600;text-decoration:none;transition:.15s}
.vq-forum-tab:hover{background:#f7fafc;border-color:#cfe3ea}
.vq-forum-tab.is-active{background:#82cddb;border-color:#82cddb;color:#fff}

/* 試験バッジ（ベンダー別・既存トークンのみ） */
.vq-forum-badge--ms{background:#1a3a5c}
.vq-forum-badge--aws{background:#ee7800}
.vq-forum-badge--gcp{background:#64c3d2}
.vq-forum-badge--other{background:#8a98a4}

/* 状態フラグ（新着 / 返信待ち） */
.vq-forum-flags{display:flex;flex-wrap:wrap;gap:6px}
.vq-forum-flag{display:inline-block;padding:.12rem .5rem;border-radius:4px;font-size:.72rem;font-weight:700;line-height:1.6}
.vq-forum-flag--new{background:#fff3e6;color:#ee7800;border:1px solid #ffd9b0}
.vq-forum-flag--wait{background:#f7fafc;color:#5b6b78;border:1px solid #e3e9ee}

/* 閲覧数 */
.vq-forum-views{white-space:nowrap;color:#8a98a4}

/* 問題コード検索時の案内 */
.vq-forum-notice{margin:0 0 14px;padding:10px 14px;background:#f7fafc;border-left:4px solid #82cddb;border-radius:4px;font-size:.88rem;color:#5b6b78}

/* スレッド → 一覧への戻り導線（コメント欄の直前） */
.vq-forum-back{margin:1.4em 0 .8em}
.vq-forum-back a{display:inline-block;padding:.5rem 1rem;border:1px solid #cfe3ea;border-radius:999px;background:#fff;color:#1a3a5c;font-weight:700;font-size:.9rem;text-decoration:none;transition:.15s}
.vq-forum-back a:hover{background:#eef7fa;border-color:#82cddb}

/* responsive */
@media (max-width:640px){
  .vq-forum-head{flex-direction:column;align-items:stretch}
  .vq-forum-filter{flex-direction:column;align-items:stretch}
  .vq-forum-search,.vq-forum-exam,.vq-forum-sort,.vq-forum-btn{width:100%}
  .vq-forum-grid{grid-template-columns:1fr}
  .vq-forum-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .vq-forum-tab{white-space:nowrap}
}