/* ============================================================================
 * components/count_display.css
 *
 * 汎用「件数表示バッジ」コンポーネント（visible / total 件数 + アイコン）。
 * 元は projects-count-* （プロジェクト一覧起源）。2026-05-10 に共通化に伴い
 * projects_index.css から抽出。
 *
 * 利用元:
 *   - shared/components/_search_filter_bar.html.erb（filter 行内の件数表示）
 *   - app/views/app/projects（プロジェクト一覧）
 *   - app/views/app/presentations（ナレッジシェア公開ライブラリ）
 *   - app/views/app/template_marketplace
 *   - app/views/app/template_publications
 *
 * 【ジュニアエンジニア向け解説】
 *   - 主要セレクタは .projects-count-display を親に、その中で
 *     .projects-count-icon / -visible / -separator / -total / -label を並べる。
 *   - 「表示中件数 / 総件数」をひと目で表す共通 UI（例: 12 / 320 件）。
 *   - クラス名先頭が projects- なのは歴史的経緯。現在は projects 以外の画面でも
 *     横断利用されているため、命名統一は別タスクで検討する。
 *   - 色・余白・角丸は CSS 変数経由のため 3 テーマ（dark/light/wood）に自動追従。
 *
 * 【リファクタリング基準】（コメント行は行数カウントから除外）
 *   1. 500行未満:  完璧
 *   2. 800行未満:  問題なし
 *   3. 1200行未満: 注意喚起。リファクタリング要検討
 *   4. 1200行以上: リファクタリング必須
 *   現在の実コード行数: 約 45 行（コメント除く、2026-05-11 計測） → 判定: 完璧
 *
 * 変更履歴:
 *   2026-05-10: ハードコード値を CSS 変数化（ダークピクセル完全一致を維持しながら
 *               ライト/ウッドテーマに自動追従）。
 *               - rgba(255,255,255,0.05) → var(--bg-surface)
 *               - rgba(255,215,0,0.X)    → rgba(var(--gold-primary-rgb), 0.X)
 *               - #FFD700                → rgb(var(--gold-primary-rgb))
 *               - rgba(255,255,255,0.4)  → var(--text-muted)
 *               - rgba(255,255,255,0.7)  → var(--text-secondary)
 *               - rgba(255,255,255,0.5)  → var(--text-tertiary)
 *   2026-05-11: リファクタリング基準・ジュニア向け解説セクションを追加。
 * ============================================================================ */

/* 表示件数 */
.projects-count-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid rgba(var(--gold-primary-rgb), 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  height: 48px;
}

.projects-count-icon {
  width: 16px;
  height: 16px;
  color: rgba(var(--gold-primary-rgb), 0.8);
}

.projects-count-visible {
  color: rgb(var(--gold-primary-rgb));
  font-weight: 700;
  font-size: 15px;
}

.projects-count-separator {
  color: var(--text-muted);
}

.projects-count-total {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 15px;
}

.projects-count-label {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* 2026-05-10: 小型スマホ対応（iPhone SE 等 320-480px）。
   フィルタ行内に置かれた場合 .ks-filter-row 側で 44px に上書きされるが、
   単独利用時の視認性確保のため 480px 以下で 40px に縮小する。 */
@media (max-width: 480px) {
  .projects-count-display {
    height: 40px;
    padding: 6px 12px;
  }
  .projects-count-visible,
  .projects-count-total {
    font-size: 14px;
  }
  .projects-count-label {
    font-size: 12px;
  }
}