<template>
  <div class="shop-basic-list">
    <div class="grid">
      <article v-for="p in products" :key="p.id" class="product">
        <div class="thumb"></div>
        <h4>{{ p.name }}</h4>
        <p class="price">{{ p.price }}원</p>
      </article>
    </div>
  </div>
</template>
<script setup>defineProps({ products: { type:Array, default: ()=>[] } });</script>
<style scoped>
.shop-basic-list .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; padding:18px; }
.product { background:#fff; border:1px solid #eee; border-radius:10px; padding:12px; }
.thumb { aspect-ratio:1; background:linear-gradient(135deg,#fff5f5,#ff6b6b); border-radius:8px; }
h4 { margin:10px 0 4px; font-size:15px; }
.price { color:#0f5fa8; font-weight:800; font-size:16px; }
</style>
