/**
 * MG News — フロントエンド CSS
 * プロダクトカード（画像 + 製品名 + ショップ別カラーボタン）
 *
 * LegacyProduct を超えるデザイン:
 * - アイキャッチ画像の自動表示
 * - ショップ別ブランドカラー + SVGアイコン
 * - 公式サイトボタン差別化
 * - コンパクト版 (記事冒頭用)
 * - ダークモード完全対応
 *
 * @package MgNews
 */

/* ══════════════════════════════════════════
   プロダクトカード (.mg-pcard)
   ══════════════════════════════════════════ */

.mg-pcard {
    /* カード専用テーマ変数。既定は OS 非追従の明色（運用者の「背景デフォルト明るく」）。
       配色は data-theme="auto"(OS追従)/"dark"(常時暗色)のときだけ切替わる。設定元は
       mg-affiliate「商品ボックスの配色」と共有し、mga-box と見た目を一致させる。
       暗色は #1f2430 上で WCAG AA 以上（title #e7e9ee≈13:1 / price #f87171≈5.3:1）。 */
    --pcard-bg: #ffffff;
    --pcard-border: #e5e7eb;
    --pcard-title: #1f2937;
    /* 価格は mga-box(--mga-price #c0392b)と統一＝白背景で 5.4:1(AA)。旧 #ef4444 は 3.76:1 で AA 未達だった。 */
    --pcard-price: #c0392b;
    /* 取消線の旧価格も白背景で 4.8:1(AA)に（旧 #9ca3af は 2.54:1）。 */
    --pcard-strike: #6b7280;
    --pcard-img-bg: #f9fafb;
    --pcard-divider: #f0f0f0;
    --pcard-compact-bg: #f9fafb;
    background: var(--pcard-bg);
    border: 1px solid var(--pcard-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin: 32px 0;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* 各モードのパレット（box-local 変数を一括上書き）。mga-box と同じ配色設定で切替わる。 */
@media (prefers-color-scheme: dark) {
    .mg-pcard[data-theme="auto"] {
        --pcard-bg: #1f2430; --pcard-border: #39414f; --pcard-title: #e7e9ee;
        --pcard-price: #f87171; --pcard-strike: #8b93a3; --pcard-img-bg: #272d3a;
        --pcard-divider: #39414f; --pcard-compact-bg: #272d3a;
    }
}
.mg-pcard[data-theme="dark"] {
    --pcard-bg: #1f2430; --pcard-border: #39414f; --pcard-title: #e7e9ee;
    --pcard-price: #f87171; --pcard-strike: #8b93a3; --pcard-img-bg: #272d3a;
    --pcard-divider: #39414f; --pcard-compact-bg: #272d3a;
}

.mg-pcard:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* ── 内部レイアウト（横並び: 画像左 / コンテンツ右）── */
.mg-pcard__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ── 画像エリア ── */
.mg-pcard__image {
    flex: 0 0 180px;
    max-width: 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcard-img-bg);
    border-right: 1px solid var(--pcard-divider);
}

.mg-pcard__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mg-pcard:hover .mg-pcard__image img {
    transform: scale(1.03);
}

/* ── コンテンツエリア ── */
.mg-pcard__body {
    flex: 1 1 0%;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* ── 製品名 ── */
.mg-pcard__title {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--pcard-title);
    line-height: 1.5;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 価格・ディール表示（Creators API連携） ── */
.mg-pcard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    line-height: 1;
}

.mg-pcard__price {
    font-size: 1.15em;
    font-weight: 800;
    color: var(--pcard-price);
    letter-spacing: -0.02em;
}

.mg-pcard__original-price {
    font-size: 0.85em;
    color: var(--pcard-strike);
    text-decoration: line-through;
}

.mg-pcard__savings {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    color: #fff;
    background: var(--mg-tw-red-500);
    line-height: 1.4;
}

.mg-pcard__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    /* 白文字が両端で AA を満たす濃オレンジに(旧 yellow-400 端は白上2.15:1 で判読不能)。 */
    background: linear-gradient(135deg, #c2410c 0%, #b45309 100%);
    line-height: 1.3;
    letter-spacing: 0.02em;
    animation: mg-pcard-pulse 2s ease-in-out infinite;
}

@keyframes mg-pcard-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ══════════════════════════════════════════
   ボタン群
   ══════════════════════════════════════════ */

.mg-pcard__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mg-pcard__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.3;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

.mg-pcard__btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    color: #fff !important;
    text-decoration: none !important;
}

.mg-pcard__btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* a11y: 購入ボタンのキーボード可視フォーカス(WCAG 2.4.7) */
.mg-pcard__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5);
}

/* ── SVGアイコン ── */
.mg-pcard__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   ショップ別ブランドカラー
   ══════════════════════════════════════════ */

/* Amazon — オレンジ */
.mg-pcard__btn--amazon {
    background: linear-gradient(135deg, #FF9900 0%, #e68a00 100%);
}

.mg-pcard__btn--amazon:hover {
    background: linear-gradient(135deg, #e68a00 0%, #cc7a00 100%);
}

/* 楽天 — クリムゾンレッド */
.mg-pcard__btn--rakuten {
    background: linear-gradient(135deg, #BF0000 0%, #a30000 100%);
}

.mg-pcard__btn--rakuten:hover {
    background: linear-gradient(135deg, #a30000 0%, #8b0000 100%);
}

/* Yahoo! — ディープレッド */
.mg-pcard__btn--yahoo {
    background: linear-gradient(135deg, #FF0033 0%, #cc002a 100%);
}

.mg-pcard__btn--yahoo:hover {
    background: linear-gradient(135deg, #e6002e 0%, #b30024 100%);
}


/* 公式サイト — ダークスレート（差別化） */
.mg-pcard__btn--official {
    background: linear-gradient(135deg, var(--mg-gray-700) 0%, var(--mg-gray-800) 100%);
}

.mg-pcard__btn--official:hover {
    background: linear-gradient(135deg, var(--mg-gray-800) 0%, var(--mg-gray-900) 100%);
}

/* ══════════════════════════════════════════
   コンパクト版（記事冒頭用）
   ══════════════════════════════════════════ */

.mg-pcard--compact {
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    background: var(--pcard-compact-bg);
}

.mg-pcard--compact:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    transform: none;
}

.mg-pcard--compact .mg-pcard__inner {
    display: block;
}

.mg-pcard--compact .mg-pcard__body {
    padding: 12px 16px;
}

.mg-pcard--compact .mg-pcard__buttons {
    gap: 6px;
}

.mg-pcard--compact .mg-pcard__btn {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 6px;
}

.mg-pcard--compact .mg-pcard__icon {
    width: 14px;
    height: 14px;
}

/* ══════════════════════════════════════════
   レスポンシブ: スマホ (< 600px)
   ══════════════════════════════════════════ */

@media (max-width: 599px) {
    .mg-pcard {
        margin: 20px 0;
        border-radius: 8px;
    }

    /* 縦積みレイアウト */
    .mg-pcard__inner {
        flex-direction: column;
    }

    .mg-pcard__image {
        flex: none;
        max-width: 100%;
        height: 180px;
        border-right: none;
        border-bottom: 1px solid var(--pcard-divider);
    }

    .mg-pcard__body {
        padding: 16px;
    }

    .mg-pcard__title {
        font-size: 0.88em;
    }

    .mg-pcard__buttons {
        flex-direction: column;
    }

    .mg-pcard__btn {
        width: 100%;
        padding: 10px 16px;
        /* 狭幅端末で長いラベルが横溢れせず折り返すように(desktop の nowrap を打ち消す)。 */
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* コンパクト版: スマホでも横並び可 */
    .mg-pcard--compact .mg-pcard__buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mg-pcard--compact .mg-pcard__btn {
        width: auto;
        flex: 1 1 auto;
    }
}

/* ══════════════════════════════════════════
   タブレット (600px ~ 768px)
   ══════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 768px) {
    .mg-pcard__image {
        flex: 0 0 140px;
        max-width: 140px;
    }

    .mg-pcard__body {
        padding: 16px 20px;
    }
}

/* ══════════════════════════════════════════
   ダークモード時の 公式/その他ショップボタン のコントラスト
   ══════════════════════════════════════════
   カード本体の配色は上部の --pcard-* 変数（[data-theme="auto"/"dark"]）で切替わる。
   ただしショップボタン色は変数化していないため、暗カードで「公式」ボタンのダークスレートが
   背景に溶けないよう、暗モード時だけ一段明るいスレート＋明色ボーダーにする。
   **必ず data-theme でゲートする**＝既定 light や、OS ダークでも非追従(data-theme無し)のカードには
   影響させない（mga-box と同じ方針＝勝手に OS/LegacyTheme ダークへ追従しない）。
   旧実装は `[data-legacy_theme-theme="dark"] .mg-pcard` と素の `@media(prefers-color-scheme:dark) .mg-pcard`
   でカード自体を ungated に暗色化しており、「背景デフォルト明るく」を OS ダーク環境で無効化していた。 */
@media (prefers-color-scheme: dark) {
    .mg-pcard[data-theme="auto"] .mg-pcard__btn--official {
        background: linear-gradient(135deg, var(--mg-gray-500) 0%, var(--mg-gray-600) 100%);
        border: 1px solid var(--mg-gray-400);
    }
    .mg-pcard[data-theme="auto"] .mg-pcard__btn--official:hover {
        background: linear-gradient(135deg, var(--mg-gray-400) 0%, var(--mg-gray-500) 100%);
    }
}
.mg-pcard[data-theme="dark"] .mg-pcard__btn--official {
    background: linear-gradient(135deg, var(--mg-gray-500) 0%, var(--mg-gray-600) 100%);
    border: 1px solid var(--mg-gray-400);
}
.mg-pcard[data-theme="dark"] .mg-pcard__btn--official:hover {
    background: linear-gradient(135deg, var(--mg-gray-400) 0%, var(--mg-gray-500) 100%);
}