/* public/assets/css/style.css */

/* --- カラーとフォントの定義 --- */
:root {
    --primary-color: #111827;
    --secondary-color: #3b82f6;
    --accent-color: #10b981;
    --accent-color-danger: #ef4444;
    --positive-change: #16a34a;
    --negative-change: #dc2626;
    --bg-color: #f3f4f6;
    --card-bg-color: #ffffff;
    --border-color: #e5e7eb;
    --text-color: #374151;
    --text-muted-color: #6b7280;
}

/* --- 基本スタイル --- */
body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-weight: 700;
}

/* --- コンポーネントスタイル --- */
.card {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
    background-color: var(--card-bg-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ボタン */
.btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    font-weight: 500;
}
.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* ★★★【商品カードレイアウト修正 - 最終版】★★★ */

/* 不要になった .product-card 関連のカスタムスタイルをすべて削除しました */

/* スペック情報の文字色を濃くして見やすくする */
.product-specs {
    color: var(--text-color); 
}

/* 難易度ページ専用スタイル */
.change-positive { color: var(--positive-change) !important; font-weight: 500; }
.change-negative { color: var(--negative-change) !important; font-weight: 500; }

/* 検索キーワードのハイライトスタイル */
mark, .search-highlight {
    background-color: #FFD700; /* ゴールド */
    color: #000000;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    font-weight: 500;
}