モバイル決済確認画面モック(固定金額表示)

<div class="d11-06-12-frame">
          <div class="d11-06-12-title">お支払い確認</div>
          <div class="d11-06-12-amount">¥4,980</div>
          <div class="d11-06-12-card">
            <span class="d11-06-12-cardic">💳</span>
            <span class="d11-06-12-cardnum">**** 1234</span>
          </div>
          <div class="d11-06-12-row"><span>商品代金</span><span>¥4,500</span></div>
          <div class="d11-06-12-row"><span>手数料</span><span>¥480</span></div>
          <span class="d11-06-12-btn">支払いを確定</span>
        </div>

.d11-06-12-frame{ width:180px; height:240px; border:2px solid #26292f; border-radius:20px; overflow:hidden; background:#fff; padding:14px; display:flex; flex-direction:column; gap:7px; }
        .d11-06-12-title{ font-size:12px; font-weight:700; color:#1f2328; text-align:center; margin-bottom:4px; }
        .d11-06-12-amount{ text-align:center; font-size:24px; font-weight:800; color:#0f172a; margin-bottom:6px; }
        .d11-06-12-card{ display:flex; align-items:center; gap:6px; background:#f1f4f8; border-radius:8px; padding:7px 10px; font-size:10.5px; color:#334155; }
        .d11-06-12-row{ display:flex; justify-content:space-between; font-size:9.5px; color:#8792a2; padding-top:6px; border-top:1px solid #f0f2f5; }
        .d11-06-12-btn{ margin-top:auto; text-align:center; background:#2f6fed; color:#fff; font-size:11px; font-weight:700; border-radius:8px; padding:8px; }