/* mg-affiliate 商品ボックス
   design token(mg-tokens.css)を fallback 付きで利用。トークン未読込の素テーマでも
   破綻せず描画され(fallback は概ね旧値。意図的に角丸 10→12px・hover opacity .88→.9 等を
   リッチ化調整)、トークン読込時は dark mode / 統一トークンに自動追従する。
   ボタン背景色は LinkboxRenderer が inline 指定(運営者可変)のため CSS では触れず、
   hover lift / focus リング / transition のみ補完する。 */
.mga-box{
    position:relative;
    display:flex;gap:16px;align-items:flex-start;
    border:1px solid var(--mg-color-border,#e3e6eb);
    border-radius:var(--mg-radius-lg,12px);
    padding:16px;margin:1.6em 0;
    background:var(--mg-color-surface,#fff);
    box-shadow:var(--mg-shadow-sm,0 1px 3px rgba(0,0,0,.05));
    transition:box-shadow .2s ease,transform .2s ease;
}
/* 景表法/ステマ規制対応の可視 PR ラベル(右上・控えめ) */
.mga-box__pr{
    position:absolute;top:8px;right:10px;
    font-size:10px;font-weight:700;line-height:1;letter-spacing:.04em;
    color:var(--mg-color-text-muted,#767676);
    background:var(--mg-color-bg-alt,#f0f0f1);
    padding:3px 6px;border-radius:4px;
}
.mga-box:hover{
    box-shadow:var(--mg-shadow-md,0 4px 16px rgba(15,23,42,.1));
    transform:translateY(-2px);
}
.mga-box__img{flex:0 0 130px;text-align:center;overflow:hidden;border-radius:var(--mg-radius-sm,6px)}
.mga-box__img img{width:130px;height:130px;object-fit:contain;border-radius:var(--mg-radius-sm,4px);transition:transform .25s ease}
.mga-box:hover .mga-box__img img{transform:scale(1.04)}
.mga-box__body{flex:1;min-width:0}
.mga-box__title{font-weight:700;line-height:1.45;margin:0 0 4px;font-size:1.02em;color:var(--mg-color-text,#1e1e1e)}
.mga-box__info{font-size:.82em;color:var(--mg-color-text-muted,#6b7280);margin-bottom:6px}
.mga-box__price{font-weight:700;color:var(--mg-color-price,#c0392b);margin-bottom:12px;font-size:1.05em}
.mga-box__btns{display:flex;flex-wrap:wrap;gap:8px}
.mga-box__btn{display:inline-block;padding:9px 18px;border-radius:var(--mg-radius-sm,5px);color:#fff!important;font-weight:700;text-decoration:none;font-size:.9em;line-height:1.2;transition:opacity .2s,transform .1s,box-shadow .15s}
.mga-box__btn:hover{opacity:.9;transform:translateY(-1px)}
.mga-box__btn:active{transform:translateY(1px)}
.mga-box__btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
/* セールボタンは黄リング(box-shadow)を持つため、focus 時に消えないよう黄+青を連結 */
.mga-box__btn--onsale:focus-visible{box-shadow:0 0 0 2px #ffd54f,0 0 0 5px rgba(37,99,235,.45)}
.mga-box__btn--review{background-color:#555}
/* セールバッジ（Pochipp 互換・期間内のみ表示） */
.mga-box__btn--onsale{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;box-shadow:0 0 0 2px #ffd54f}
.mga-box__sale{font-size:.72em;font-weight:700;background:#fff;color:#c0392b;padding:1px 7px;border-radius:3px;margin-bottom:3px}
/* ボタン列数（btnLayoutPC / SP） */
.mga-box__btns--pc-2 .mga-box__btn{flex:1 1 calc(50% - 4px)}
.mga-box__btns--pc-3 .mga-box__btn{flex:1 1 calc(33.333% - 6px)}
.mga-box__btns--pc-fit .mga-box__btn{flex:1 1 auto}
.mga-box__btns--pc-text .mga-box__btn{flex:0 0 auto}
@media(max-width:600px){.mga-box{flex-direction:column}.mga-box__img{flex-basis:auto}.mga-box__img img{width:160px;height:160px}.mga-box__btn{flex:1 1 100%;text-align:center}.mga-box__btns--sp-2 .mga-box__btn{flex:1 1 calc(50% - 4px)}}

/* 16.11.0: 価格取得時点ノート（景表法対応・小さく控えめに） */
.mga-box__price-asof {
    margin-left: 6px;
    font-size: 11px;
    color: var(--mg-color-text-muted,#767676);
    font-weight: normal;
}
/* moshimo インプレッションタグ（不可視） */
.mga-imptag {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ダークモード: semantic token 未提供環境(素テーマ)向けの明示フォールバック。
   mg-tokens.css 読込時は :root の semantic token override が優先される。 */
@media (prefers-color-scheme: dark) {
    .mga-box {
        background: var(--mg-color-surface,#1f2430);
        border-color: var(--mg-color-border,#39414f);
    }
    .mga-box__title { color: var(--mg-color-text,#e7e9ee); }
    .mga-box__info,
    .mga-box__price-asof { color: var(--mg-color-text-muted,#9aa3b2); }
    /* 暗背景で価格(#c0392b)は ~2.1:1 と AA 未達。最重要のCV要素なので明るい赤へ。 */
    .mga-box__price { color: var(--mg-color-price,#f87171); }
}
@media (prefers-reduced-motion: reduce) {
    .mga-box,.mga-box__img img,.mga-box__btn{transition:none}
    .mga-box:hover{transform:none}
    .mga-box:hover .mga-box__img img{transform:none}
}

/* ボックス外観カスタマイザ(Pochipp 互換・①-4)。data 属性が無い=既定で現行描画のまま(無退行)。
   Pochipp は grid だが mga-box は flex のため、同等の見た目を flex で対応付ける。 */
/* 画像位置: t=上(縦積み・画像中央) / r=右。既定 l(左)は属性無し。 */
.mga-box[data-img="t"]{flex-direction:column}
.mga-box[data-img="t"] .mga-box__img{flex-basis:auto;align-self:center}
.mga-box[data-img="r"]{flex-direction:row-reverse}
/* PC レイアウト: big=画像120px / imgbig=画像140px。既定(属性無し)は 130px。 */
.mga-box[data-lyt-pc="big"] .mga-box__img{flex-basis:120px}
.mga-box[data-lyt-pc="big"] .mga-box__img img{width:120px;height:120px}
.mga-box[data-lyt-pc="imgbig"] .mga-box__img{flex-basis:140px}
.mga-box[data-lyt-pc="imgbig"] .mga-box__img img{width:140px;height:140px}
/* ボタン角丸: off=ほぼ角 / on=やや丸 / round=丸。既定(属性無し)は .mga-box__btn 既存値。 */
.mga-box[data-btn-radius="off"] .mga-box__btn{border-radius:1px}
.mga-box[data-btn-radius="on"] .mga-box__btn{border-radius:6px}
.mga-box[data-btn-radius="round"] .mga-box__btn{border-radius:999px}