フラットなコメントリスト(アバター+日時)

<ul class="d06-12-01-list">
          <li class="d06-12-01-row">
            <span class="d06-12-01-avatar">田</span>
            <div class="d06-12-01-body">
              <div class="d06-12-01-top"><span class="d06-12-01-name">田中 健</span><span class="d06-12-01-date">2026/07/01</span></div>
              <p class="d06-12-01-text">とても分かりやすい記事でした、ありがとうございます。</p>
            </div>
          </li>
          <li class="d06-12-01-row">
            <span class="d06-12-01-avatar">佐</span>
            <div class="d06-12-01-body">
              <div class="d06-12-01-top"><span class="d06-12-01-name">佐藤 美咲</span><span class="d06-12-01-date">2026/07/02</span></div>
              <p class="d06-12-01-text">続編も楽しみにしています。</p>
            </div>
          </li>
          <li class="d06-12-01-row">
            <span class="d06-12-01-avatar">鈴</span>
            <div class="d06-12-01-body">
              <div class="d06-12-01-top"><span class="d06-12-01-name">鈴木 彩</span><span class="d06-12-01-date">2026/07/03</span></div>
              <p class="d06-12-01-text">参考になりました。実践してみます。</p>
            </div>
          </li>
        </ul>

.d06-12-01-list{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:12px; }
        .d06-12-01-row{ display:flex; gap:10px; align-items:flex-start; }
        .d06-12-01-avatar{ width:32px; height:32px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#6a93ff,#8f6aff); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d06-12-01-body{ flex:1; }
        .d06-12-01-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
        .d06-12-01-name{ font-size:12px; font-weight:700; color:#221f33; }
        .d06-12-01-date{ font-size:10px; color:#8b87a3; }
        .d06-12-01-text{ margin:4px 0 0; font-size:12px; line-height:1.6; color:#5c5977; }