/**
 * column-articles.css - 右側の「体験記事」の欄（画像付きリスト）V2.12L01 新設 ★唯一の正本
 *
 * 【中身】pages/index.css（質問箱の一覧）にあった次の指定を、**1文字も変えずに**移したもの。
 *   ・.sidebar-list-with-images a（画像付きリストは flex を維持）
 *   ・画像付き記事（.article-item-with-image / .article-thumbnail / .article-category 系 / .article-title / .article-meta 系）
 *   ・NEW バッジ（@keyframes newPulse / .new-badge）
 *
 * 【使っているページ】欄の中身は includes/column_articles_widget.php（同じく唯一の正本）。
 *   ・質問箱の一覧（help/index.php）… css_bundle.php の 'list'（pages/index.css の**後**）
 *   ・質問投稿ページ（help/submit_question.php）… 'submit'（pages/submit.css の**後**）
 *   質問投稿ページの「人気の体験記事」は V2.11L20 まで仮の文（記事名と閲覧数を直接書いたもの）だった。
 *   前澤様のご判断（2026-10-16）で質問箱の一覧と同じ本物の記事にした。
 *
 * 【順序の約束】ページのCSSより**後**に読む。.sidebar-list-with-images a（display:flex）は、
 *   ページCSSの .sidebar-list a（display:block）と詳細度が同じで、後ろにあるから勝つ（移す前も後ろにあった）。
 *   質問箱の一覧は移動前後の計算後スタイルを全要素・PC/スマホで突き合わせて差分0を確認（V2.12L01）。
 *
 * ※共通の右側（includes/public_sidebar.php＝質問詳細など）は、同じ名前の指定を自分の <style> に別に持っている（未統一）。
 */

        /* 画像付きリストの場合は例外（flexを維持） */
        .sidebar-list-with-images a {
            display: flex;
        }

        /* 画像付き記事用スタイル */
        .sidebar-list-with-images {
            list-style: none;
        }

        .article-item-with-image {
            padding: 1rem 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .article-item-with-image:last-child {
            border-bottom: none;
        }

        .sidebar-list-with-images .article-link {
            display: flex !important;
            gap: 1rem;
            text-decoration: none;
            color: inherit;
            transition: opacity 0.2s;
        }

        .sidebar-list-with-images .article-link:hover {
            opacity: 0.8;
        }

        .article-thumbnail {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 4px;
        }

        .article-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .article-content {
            flex: 1;
            min-width: 0;
        }

        .article-category {
            display: inline-block;
            padding: 0.2rem 0.6rem;
            font-size: 1rem;
            border-radius: 3px;
            margin-bottom: 0.3rem;
            font-weight: 600;
        }

        /* カテゴリ別の色分け */
        .sidebar-list-with-images .article-category-experience {
            background: #ffebee !important;
            color: #d32f2f !important;
        }

        .sidebar-list-with-images .article-category-analysis {
            background: #e8f5e9 !important;
            color: #388e3c !important;
        }

        .sidebar-list-with-images .article-category-misc {
            background: #f3e5f5 !important;
            color: #7b1fa2 !important;
        }

        .sidebar-list-with-images .article-category-how-to {
            background: #fff8e1 !important;
            color: #f57c00 !important;
        }

        .article-title {
            font-size: 1.3rem;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 0.3rem;
            color: #000000;
        }

        .article-meta {
            font-size: 1rem;
            color: #999;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .article-date, .article-author, .article-views {
            font-size: 1rem;
            line-height: 1.4;
        }

        /* NEWバッジのアニメーション */
        @keyframes newPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 2px 6px rgba(255, 68, 68, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 2px 12px rgba(255, 68, 68, 0.6);
            }
        }

        .new-badge {
            animation: newPulse 2s ease-in-out infinite !important;
        }