影付き浮遊型アラートカード(静止)

<div class="card09-07-10">
          <span class="icon09-07-10">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><path d="M4 12h16M14 6l6 6-6 6"></path></svg>
          </span>
          <div class="body09-07-10">
            <p class="t09-07-10">予約が確定しました</p>
            <p class="s09-07-10">確認番号：#48213</p>
          </div>
        </div>

.d09-07-10 .card09-07-10{
          display:flex;
          align-items:center;
          gap:12px;
          width:100%;
          max-width:270px;
          padding:16px 18px;
          background:#fff;
          border-radius:12px;
          box-shadow:0 12px 28px rgba(15,23,42,.16);
        }
        .d09-07-10 .icon09-07-10{
          flex-shrink:0;
          width:34px;
          height:34px;
          border-radius:50%;
          background:#2563eb;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d09-07-10 .icon09-07-10 svg{
          width:18px;
          height:18px;
        }
        .d09-07-10 .body09-07-10{
          font-family:sans-serif;
        }
        .d09-07-10 .t09-07-10{
          margin:0 0 2px;
          font-size:13.5px;
          font-weight:600;
          color:#0f172a;
        }
        .d09-07-10 .s09-07-10{
          margin:0;
          font-size:11.5px;
          color:#64748b;
        }