/* 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{
    /* ボックス専用テーマ変数。既定は OS 非追従の明色（運用者の「背景デフォルト明るく」）。
       semantic token(--mg-color-*)は :root の prefers-color-scheme で OS ダークに追従して黒くなるため、
       既定では参照しない。配色は data-theme="auto"(OS追従)/"dark"(常時暗色)のときだけ切替わる。
       各モードのコントラストは下部のパレットで一括設定（WCAG AA 以上）。 */
    --mga-bg:#ffffff;
    --mga-border:#e3e6eb;
    --mga-text:#1e1e1e;
    --mga-text-muted:#6b7280;
    --mga-price:#c0392b;
    --mga-meta:#666666;
    --mga-rank:#b12704;
    --mga-feature:#333333;
    --mga-chip-bg:#f0f0f1;
    --mga-chip-text:#6b6b6b;
    --mga-image-size:130px;
    position:relative;
    display:flex;gap:16px;align-items:flex-start;
    border:1px solid var(--mga-border);
    border-radius:var(--mg-radius-lg,12px);
    padding:16px;margin:1.6em 0;
    background:var(--mga-bg);
    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(--mga-chip-text);
    background:var(--mga-chip-bg);
    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[data-image-size="thumbnail"]{--mga-image-size:70px}
.mga-box[data-image-size="compact"]{--mga-image-size:96px}
.mga-box[data-image-size="large"]{--mga-image-size:180px}
.mga-box[data-image-size="xlarge"]{--mga-image-size:240px}
.mga-box[data-image-size="fluid"]{--mga-image-size:320px}
.mga-box__img{flex:0 1 var(--mga-image-size);width:var(--mga-image-size);max-width:100%;text-align:center;overflow:hidden;border-radius:var(--mg-radius-sm,6px)}
.mga-box__img-link{display:block;max-width:100%}
.mga-box__img img{display:block;width:var(--mga-image-size);height:var(--mga-image-size);max-width:100%;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;overflow-wrap:anywhere}
/* 商品identity未確定の記事CTA。画像・価格の空欄を作らず、MGAの配色/余白/ボタンだけを共有する。 */
.mga-box--article-links{display:block}
.mga-box--article-links .mga-box__body{width:100%}
/* PR チップ(右上・絶対配置)がタイトル先頭行に被らないよう右に余白を確保（画像なし/縦積み/スマホでも安全）。 */
.mga-box__title{font-weight:700;line-height:1.45;margin:0 0 4px;padding-right:2.4em;font-size:1.02em;color:var(--mga-text)}
.mga-box__info{font-size:.82em;color:var(--mga-text-muted);margin-bottom:6px}
.mga-box__price{font-weight:700;color:var(--mga-price);margin-bottom:12px;font-size:1.05em;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.mga-box__price--sale{border-left:3px solid #c0392b;padding-left:8px}
.mga-box__price-label{font-size:.78em;color:#c0392b;flex-basis:100%}
.mga-box__price-current{font-weight:800}
.mga-box__price-original{font-size:.82em;font-weight:600;color:var(--mga-text-muted);text-decoration-thickness:1px}
.mga-box__btns{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
/* 店舗別価格とボタンを1つのレイアウト単位にし、既存のPC/SP列指定を共有する。 */
.mga-box__offer{display:flex;flex-direction:column;min-width:0;gap:4px}
.mga-box__offer > .mga-box__btn{width:100%;flex:0 0 auto}
.mga-box__offer-price{color:var(--mga-text-muted,#64748b);font-size:.75em;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.mga-box__offer-asof{display:block;font-size:.9em}
.mga-box__btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;box-sizing:border-box;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;text-align:center;overflow-wrap:anywhere;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}
/* A9: 控えめな小リンク。ボタン共通スタイルを継承しない独立クラス */
.mga-box__review{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:12px;color:#599ba3;text-decoration:none;background:none;padding:2px 0;font-weight:400;line-height:1.4}
.mga-box__review:hover{text-decoration:underline;color:#3d7d85}
/* セールバッジ（旧商品データ互換・期間内のみ表示） */
.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}
/* 画像未取得プレースホルダ（19.7.0・最小登録直後のレイアウト保護） */
.mga-box__img-placeholder{display:flex;align-items:center;justify-content:center;width:var(--mga-image-size);height:var(--mga-image-size);max-width:100%;background:#f3f4f6;color:#9ca3af;font-size:.75em;border:1px dashed #d1d5db;border-radius:6px}
/* ボックス上部のセール中バナー（19.4.0・期間内のみ描画・色はボタン内バッジと同系統） */
.mga-box__sale-banner{font-size:.82em;font-weight:700;background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;padding:4px 10px;border-radius:4px;margin-bottom:6px;display:block}
.mga-box__sale-banner-label{background:#c0392b;color:#fff;padding:1px 6px;border-radius:3px;margin-right:4px;font-size:.9em}
/* ボタン列数（btnLayoutPC / SP） */
.mga-box__btns--pc-2 > :is(.mga-box__btn,.mga-box__offer){flex:1 1 calc(50% - 4px)}
.mga-box__btns--pc-3 > :is(.mga-box__btn,.mga-box__offer){flex:1 1 calc(33.333% - 6px)}
.mga-box__btns--pc-fit > :is(.mga-box__btn,.mga-box__offer){flex:1 1 auto}
.mga-box__btns--pc-text > :is(.mga-box__btn,.mga-box__offer){flex:0 0 auto}
@media(max-width:600px){.mga-box{flex-direction:column}.mga-box__img{flex-basis:auto}.mga-box__btns > :is(.mga-box__btn,.mga-box__offer){flex:1 1 100%;text-align:center}.mga-box__btns--sp-2 > :is(.mga-box__btn,.mga-box__offer){flex:1 1 calc(50% - 4px)}}
@media(max-width:360px){.mga-box{padding:12px;gap:12px}.mga-box__btns--sp-2 > :is(.mga-box__btn,.mga-box__offer){flex-basis:100%}}
.mga-box img.mg-commerce-image--fallback{object-fit:contain;background:#f3f4f6;transform:none}
.mga-box:hover img.mg-commerce-image--fallback{transform:none}

/* 画像単体モード。通常ボックスと同じ取得画像・計測リンク・PR表示を使い、本文情報だけ省く。 */
.mga-box--image-only{display:inline-flex;width:auto;max-width:100%;padding:10px;vertical-align:top}
.mga-box--image-only .mga-box__img{flex:0 1 var(--mga-image-size)}
.mga-box--image-only[data-image-size="fluid"]{display:flex;width:100%;max-width:340px}
.mga-box--image-only[data-image-size="fluid"] .mga-box__img{width:100%;flex-basis:100%}
.mga-box--image-only[data-image-size="fluid"] .mga-box__img img,
.mga-box--image-only[data-image-size="fluid"] .mga-box__img-placeholder{width:100%;height:auto;aspect-ratio:1/1}

/* 16.11.0: 価格取得時点ノート（景表法対応・小さく控えめに） */
.mga-box__price-asof {
    margin-left: 6px;
    font-size: 11px;
    color: var(--mga-text-muted);
    font-weight: normal;
}

.mga-box__price-source {
  display: inline-block;
  margin-left: .5em;
  color: var(--mga-muted, #666);
  font-size: .72em;
  font-weight: 500;
}
/* moshimo インプレッションタグ（不可視） */
.mga-imptag {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* 配色は管理画面「アフィリエイト → 商品ボックスの配色」で選択（既定=明色・OS非追従）。
   既定（data-theme 属性なし）は OS がダークモードでも明色のまま＝勝手に黒くしない。
   data-theme="auto" のときだけ OS のダークモードに追従、data-theme="dark" で常時暗色。
   暗色は box-local 変数を一括上書き＝背景/枠/見出し/補足/価格/メタ/特徴/PRチップ が同時に各モードの
   コントラストになる。各値は暗背景 #1f2430 上で WCAG AA 以上:
     text #e7e9ee≈13:1 / muted #9aa3b2≈5.6:1 / price #f87171≈5.3:1 / meta #c2c8d2≈9:1 / rank #f0a37a≈6.5:1。 */
@media (prefers-color-scheme: dark) {
    .mga-box[data-theme="auto"]{
        --mga-bg:#1f2430;--mga-border:#39414f;--mga-text:#e7e9ee;--mga-text-muted:#9aa3b2;
        --mga-price:#f87171;--mga-meta:#c2c8d2;--mga-rank:#f0a37a;--mga-feature:#d2d7e0;
        --mga-chip-bg:#2c3340;--mga-chip-text:#9aa3b2;
    }
}
.mga-box[data-theme="dark"]{
    --mga-bg:#1f2430;--mga-border:#39414f;--mga-text:#e7e9ee;--mga-text-muted:#9aa3b2;
    --mga-price:#f87171;--mga-meta:#c2c8d2;--mga-rank:#f0a37a;--mga-feature:#d2d7e0;
    --mga-chip-bg:#2c3340;--mga-chip-text:#9aa3b2;
}
@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}
}

/* ボックス外観カスタマイザ（旧商品データ互換・①-4）。data 属性が無い=既定で現行描画のまま(無退行)。
   旧表示は 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}
/* 新しい共通 image_size が明示される場合は、旧保存形式の box_layout_pc より優先する。 */
.mga-box[data-image-size] .mga-box__img{flex-basis:var(--mga-image-size);width:var(--mga-image-size)}
.mga-box[data-image-size] .mga-box__img img,
.mga-box[data-image-size] .mga-box__img-placeholder{width:var(--mga-image-size);height:var(--mga-image-size)}
.mga-box--image-only[data-image-size="fluid"] .mga-box__img,
.mga-box--image-only[data-image-size="fluid"] .mga-box__img img,
.mga-box--image-only[data-image-size="fluid"] .mga-box__img-placeholder{width:100%}
.mga-box--image-only[data-image-size="fluid"] .mga-box__img img,
.mga-box--image-only[data-image-size="fluid"] .mga-box__img-placeholder{height:auto;aspect-ratio:1/1}
/* ボタン角丸: 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}
.mga-box[data-btn-radius="0"] .mga-box__btn{border-radius:0}
.mga-box[data-btn-radius="4"] .mga-box__btn{border-radius:4px}
.mga-box[data-btn-radius="8"] .mga-box__btn{border-radius:8px}
.mga-box[data-btn-radius="12"] .mga-box__btn{border-radius:12px}
.mga-box[data-btn-radius="50"] .mga-box__btn{border-radius:50px}

/* Amazon 由来のスペック（ブランド / 売れ筋順位 / 商品特徴）。控えめに本文中へ。 */
.mga-box__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0;font-size:12px;color:var(--mga-meta)}
.mga-box__rank{color:var(--mga-rank);font-weight:600}
/* 26.6.0: AliExpress 拡張（好评率/販売数/店舗/動画あり）。既存メタ行の控えめ表示に揃える。 */
.mga-box__shop{font-weight:500}
.mga-box__video{color:var(--mga-rank,#c00);font-weight:600}
.mga-box__features{margin:6px 0 4px;padding-left:1.2em;font-size:13px;line-height:1.6;color:var(--mga-feature)}
.mga-box__features li{margin:0;list-style:disc}
/* 楽天 売れ筋ランキング（[rakuten_ranking]・G4 #35） */
.mga-rakuten-ranking{--mga-rakuten-image-size:70px;position:relative;min-width:0;border:1px solid var(--mg-color-border,#e2e8f0);border-radius:8px;padding:12px 14px;margin:1.5em 0}
.mga-rakuten-ranking[data-image-size="compact"]{--mga-rakuten-image-size:96px}
.mga-rakuten-ranking[data-image-size="standard"]{--mga-rakuten-image-size:130px}
.mga-rakuten-ranking[data-image-size="large"]{--mga-rakuten-image-size:180px}
.mga-rakuten-ranking[data-image-size="xlarge"]{--mga-rakuten-image-size:240px}
.mga-rakuten-ranking[data-image-size="fluid"]{--mga-rakuten-image-size:min(320px,32vw)}
.mga-rakuten-ranking__head{font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mga-rakuten-ranking__list{min-width:0;list-style:none;margin:0;padding:0;counter-reset:none}
.mga-rakuten-ranking__item{display:flex;align-items:center;min-width:0;gap:10px;padding:8px 0;border-top:1px solid var(--mg-color-border,#eef2f7)}
.mga-rakuten-ranking__item:first-child{border-top:none}
.mga-rakuten-ranking__rank{flex:0 0 24px;text-align:center;font-weight:700;color:#bf0000}
.mga-rakuten-ranking__img{flex:0 0 var(--mga-rakuten-image-size);width:var(--mga-rakuten-image-size);height:var(--mga-rakuten-image-size);max-width:100%;object-fit:contain;border-radius:4px}
.mga-rakuten-ranking__link{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-decoration:none;font-size:.95em;line-height:1.35}
.mga-rakuten-ranking__link:hover{text-decoration:underline}
.mga-rakuten-ranking__price{flex:0 0 auto;font-weight:700;color:#bf0000;white-space:nowrap}
@media (max-width:640px){.mga-rakuten-ranking[data-image-size="fluid"]{--mga-rakuten-image-size:clamp(96px,28vw,240px)}.mga-rakuten-ranking__item{align-items:flex-start;flex-wrap:wrap}.mga-rakuten-ranking__img{--mga-rakuten-image-size:min(110px,32vw)}.mga-rakuten-ranking__price{margin-left:34px;font-size:.9em}}

/* 24.6.0: 読者限定クーポン(コピー可能) */
.mga-coupon{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;padding:8px 10px;border:1px dashed var(--mga-border);border-radius:8px;background:var(--mga-chip-bg)}
.mga-coupon__label{font-size:.78em;font-weight:700;color:var(--mga-text-muted);letter-spacing:.02em}
.mga-coupon__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;font-size:1.02em;color:var(--mga-text);letter-spacing:.06em;user-select:all;background:var(--mga-bg);border:1px solid var(--mga-border);border-radius:6px;padding:2px 8px}
.mga-coupon__copy{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--mga-border);background:var(--mga-bg);color:var(--mga-text);border-radius:6px;padding:4px 10px;font-size:.85em;font-weight:600;line-height:1.2;transition:background .12s,border-color .12s}
.mga-coupon__copy:hover{background:var(--mga-chip-bg);border-color:var(--mga-text-muted)}
.mga-coupon__copy:focus-visible{outline:2px solid var(--mg-color-primary,#2271b1);outline-offset:1px}
.mga-coupon__copy--done{border-color:#1a7f37;color:#1a7f37}
.mga-coupon__icon{flex:0 0 auto}
.mga-coupon__meta{display:inline-flex;flex-wrap:wrap;gap:8px;font-size:.8em;color:var(--mga-text-muted)}
.mga-coupon__off{font-weight:700;color:var(--mga-price)}
/* 24.8.0(要望書P2-6): coupon_note= 補足1行("8%OFF・7/31まで")。off と同じ強調・長文でも折返す */
.mga-coupon__note{font-weight:700;color:var(--mga-price)}
.mga-coupon__done{font-size:.82em;font-weight:700;color:#1a7f37}