/* AFF Product Engine 表示（テーマ非依存・.aff-wrap配下にスコープ） */
.aff-wrap{
  --aff-ink:#16191f; --aff-sub:#5b6470; --aff-line:#e4e7eb; --aff-soft:#f6f8fa; --aff-card:#fff;
  --rk:#bf0000; --rk-t:#fff; --am:#ff9900; --am-t:#1a1a1a; --yh:#ff0033; --yh-t:#fff;
  --gold-a:#f6c945; --gold-b:#e0a313;
  color:var(--aff-ink); font-feature-settings:"palt"; margin:24px 0;
}
.aff-wrap *{box-sizing:border-box}

/* カード本体（画像左＋情報右） */
.aff-item{position:relative;display:flex;gap:18px;background:var(--aff-card);border:1px solid var(--aff-line);border-radius:12px;padding:18px 18px 16px;align-items:flex-start}
.aff-img{flex:0 0 40%;max-width:230px}
.aff-img img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:8px}
.aff-main{flex:1;min-width:0}
.aff-name{font-weight:700;font-size:1.08rem;line-height:1.5;margin:0 0 8px}
.aff-desc{color:var(--aff-sub);font-size:.9rem;line-height:1.7;margin:0 0 14px}

/* 3ボタン（2列グリッド・添付準拠の配色） */
.aff-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aff-btn{display:block;text-align:center;padding:13px 10px;border-radius:8px;font-weight:800;font-size:.95rem;text-decoration:none;line-height:1.3;transition:filter .15s ease,transform .08s ease}
.aff-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.aff-btn-rk{background:var(--rk);color:var(--rk-t)!important}
.aff-btn-am{background:var(--am);color:var(--am-t)!important}
.aff-btn-yh{background:var(--yh);color:var(--yh-t)!important}

/* ランキング */
.aff-rank{display:flex;flex-direction:column;gap:18px}
.aff-rank .aff-item{padding-top:22px}
.aff-medal{position:absolute;top:-13px;left:-11px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:2}
.aff-medal-g{background:linear-gradient(180deg,var(--gold-a),var(--gold-b));color:#5a3d00}
.aff-medal-s{background:linear-gradient(180deg,#dfe3e8,#b9c0c8);color:#33383f}
.aff-medal-b{background:linear-gradient(180deg,#dba164,#c07b3c)}
.aff-medal-n{background:#eef1f4;color:#5b6470}

/* 比較表 */
.aff-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--aff-line);border-radius:12px}
.aff-cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;background:var(--aff-card)}
.aff-cmp th,.aff-cmp td{padding:12px;text-align:center;border-bottom:1px solid var(--aff-line);font-size:.9rem;vertical-align:middle}
.aff-cmp thead th{background:var(--aff-soft);font-weight:700}
.aff-cmp thead th img{display:block;margin:0 auto 6px;width:72px;height:72px;object-fit:contain}
.aff-cmp thead th span{display:block;font-size:.8rem;line-height:1.4}
.aff-cmp .aff-stk{position:sticky;left:0;z-index:1;background:var(--aff-soft);text-align:left;font-weight:700;min-width:96px}
.aff-cmp tbody .aff-stk{background:#fff}
.aff-cmp .aff-btns{grid-template-columns:1fr;gap:6px}
.aff-cmp .aff-btn{padding:8px;font-size:.8rem}

/* モバイル */
@media(max-width:600px){
  .aff-item{flex-direction:column}
  .aff-img{flex:none;max-width:none;width:100%}
  .aff-img img{aspect-ratio:16/10}
  .aff-btns{grid-template-columns:1fr}
  .aff-btn{padding:15px 10px;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.aff-btn{transition:none}.aff-btn:hover{transform:none}}