/**
 * question-list.css - 質問一覧の部品（V2.11L19 新設）★唯一の正本
 *
 * 【中身】pages/index.css（質問箱の一覧）にあった次の指定を、**1文字も変えずに**移したもの。
 *   ・サービスの特徴（.service-features） ・カテゴリーフィルター（.category-filter 系）
 *   ・質問カード（.questions-list / .question-card 系） ・回答プレビュー（.answer-preview 系）
 *   ・いいね数・回答数（.question-meta） ・ページネーション（.pagination 系）
 *   ・上の部品のスマホ指定（768px 以下）
 *
 * 【使っているページ】
 *   ・質問箱の一覧（help/index.php）… css_bundle.php の 'list'（pages/index.css の**前**に読む）
 *   ・特設サイト（tokusetsu/index.php）… $page_css_files で読む
 *   特設サイトを「通常の質問箱と同じ部品」で作るため（前澤様のご判断 2026-10-16）。
 *
 * 【順序の約束】pages/index.css より前に読む。移す前もこの指定は pages/index.css の中で
 *   レイアウト指定（.container 等）より後ろにあったが、同じ要素に効く指定は pages/index.css に
 *   残っていない（* のリセットは詳細度0）ため、前に置いても見た目は変わらない
 *   （V2.11L19 で移動前後の計算後スタイルを全要素・PC/スマホで突き合わせて差分0を確認）。
 *
 * ★部品の見た目を変えるときはここだけを直す（質問箱と特設サイトの両方に効く）。
 */

        /* サービスの特徴 */
        .service-features {
            background: linear-gradient(135deg, #fff9e6 0%, #fffaf0 100%);
            border-left: 4px solid #d4af37;
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .service-features p {
            font-size: 1.4rem;
            line-height: 1.8;
            color: #333;
            margin: 0;
        }

        /* カテゴリーフィルター */
        .category-filter {
            background: white;
            padding: 1rem 1.2rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }

        .category-filter-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .category-filter-title {
            font-size: 1.9rem;
            font-weight: 600;
            color: #8b6f47;
            letter-spacing: 0.1em;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .category-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .category-tab {
            padding: 0.4rem 1rem;
            background: #f9f8f6;
            border: 1px solid #ebe7e0;
            border-radius: 20px;
            color: #000;
            text-decoration: none;
            font-size: 1.4rem;
            font-weight: 500;
            transition: all 0.3s;
        }

        .category-tab:hover,
        .category-tab.active {
            background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
            color: white;
            border-color: transparent;
        }

        /* 質問リスト */
        .questions-list {
            display: grid;
            gap: 1rem;
        }

        .question-card {
            display: block;
            background: white;
            /* V2.08L16: 一覧カードの本文・回答プレビューの最大行数。
               ここを変えれば質問・回答の両方の行数が変わる（単一の正）。 */
            --qa-card-lines: 4;
            padding: 1.2rem 1.5rem;
            border-radius: 10px;
            text-decoration: none;
            color: inherit;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-left: 3px solid #d4af37;
            transition: all 0.3s ease;
        }

        .question-card:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            color: #8b6f47;
        }

        .question-card:hover .question-title {
            color: #8b6f47;
        }

        /* カテゴリ＋日付の上部ヘッダー行 */
        .question-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            gap: 0.5rem;
        }

        .question-category {
            display: inline-block;
            background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
            color: white;
            padding: 0.15rem 0.6rem;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        .question-card-header .question-date {
            font-size: 1.2rem;
            color: #999;
            white-space: nowrap;
        }

        .question-title {
            font-size: 1.6rem;
            font-weight: bold;
            color: #000000;
            margin-bottom: 0.5rem;
            line-height: 1.6;
            /* V2.08L16: 表示量を「文字数」ではなく「行数」で決める。
               従来は PHP 側の100文字だけで切っていたため、1文字の幅が違う言語では
               同じ100文字でも日本語=2行／英語=1行と行数がばらついていた。
               PHP は4行を必ず埋められる長さ（QUESTION_LIST_CARD_MAX_CHARS）まで送り、
               実際の打ち切りはこのクランプが行う＝どの言語でも最大4行で揃う。
               4行に満たない短い質問は従来どおりその行数のまま（余白を作らない）。 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: var(--qa-card-lines, 4);
            overflow: hidden;
            /* V2.08L17: 標準プロパティ `line-clamp` は併記しない。
               `line-clamp` と `-webkit-line-clamp` は同じ長信プロパティ群の
               ショートハンドだが**挙動が同一ではなく、カスケードで後に書いた方が勝つ**
               （Igalia の line-clamp 説明書）。L16 では -webkit- の後ろに標準版を
               書いたため、対応ブラウザでは実績のない標準版が採用される状態だった。
               標準 `line-clamp` は Baseline 未達（MDN: Limited availability）で、
               当環境では実描画を検証できないため併記しない。 */
        }

        /* 回答プレビュー（テキスト表示） */
        .answer-preview {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

        .answer-preview-label {
            font-size: 1.4rem;
            color: #8b6f47;
            font-weight: 600;
        }

        .answer-preview-text {
            font-size: 1.5rem;
            /* ----------------------------------------------------------------
               V2.08L23: #777（白背景でコントラスト比 4.47:1）は WCAG AA の
               基準 4.5:1 をわずかに下回っており、実機でも薄く読みにくかった
               （Maezawaさんご指摘。DevTools のコントラスト警告と一致）。

               単に黒へ寄せず、**トップページの回答プレビューと同じ紺**に
               そろえた（`index.php` の `.qa-answer` = #31506e、V2.07L03 で
               「回答であることを示す紺。リンクと誤読されないよう彩度を落とす」
               として決めた色）。これで
                 ・質問＝黒・太字（#000 / bold）
                 ・回答＝紺・標準（#31506e）
               と色で役割が分かれ、濃さも確保できる（コントラスト比 約8.4:1）。

               ★ 色相を変えずに濃くするだけにしたい場合は #444（約9.7:1）へ。
                 変更はこの1行のみ。トップページと揃えたい場合は #31506e のまま。
               ---------------------------------------------------------------- */
            color: #31506e;
            display: -webkit-box;
            /* V2.08L16: 質問と同じく行数で揃える（旧: 2行固定＋PHP70文字）。
               行数は .question-card の --qa-card-lines（既定4）が唯一の設定箇所。
               V2.08L17: 標準 `line-clamp` の併記は撤去（.question-title のコメント参照）。 */
            -webkit-line-clamp: var(--qa-card-lines, 4);
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .question-meta {
            display: flex;
            gap: 1rem;
            font-size: 1.3rem;
            color: #999;
            line-height: 1.5;
        }

        .question-meta span {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            white-space: nowrap;
        }

        /* ページネーション */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .pagination .page-link {
            padding: 0.5rem 1rem;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.4rem;
            background: white;
            color: #8b6f47;
            border: 1px solid #e0e0e0;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .pagination .page-link:hover:not(.disabled):not(.active) {
            background: #f9f8f6;
            border-color: #8b6f47;
        }

        .pagination .page-link.active {
            background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
            color: white;
            border-color: transparent;
            font-weight: bold;
        }

        .pagination .page-link.disabled {
            background: #f5f5f5;
            color: #ccc;
            border-color: #e0e0e0;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .pagination .page-ellipsis {
            padding: 0.5rem 1rem;
            font-size: 1.4rem;
            color: #999;
        }

        /* 旧クラス対応（後方互換性） */
        .pagination a,
        .pagination span {
            padding: 0.5rem 1rem;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1.4rem;
        }

        .pagination a {
            background: white;
            color: #8b6f47;
            border: 1px solid #e0e0e0;
        }

        .pagination a:hover {
            background: #f9f8f6;
        }

        .pagination .current {
            background: linear-gradient(135deg, #8b6f47 0%, #d4af37 100%);
            color: white;
        }

        @media (max-width: 768px) {
            /* v1.87L03: スマホ用文字サイズ */
            .question-title {
                font-size: 1.5rem; /* 15px */
                line-height: 1.6;
            }

            /* v1.89L76: カテゴリーフィルター縦並び */
            .category-filter-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.8rem;
            }

            .service-features p {
                font-size: 1.3rem;
                line-height: 1.6;
            }
        }