Rewrite recipe search page to match original design

- RecipeCard: simple card with name, tags, oil names, price (matching
  original .recipe-card style with hover translateY and warm shadows)
- RecipeDetailOverlay: inline panel (not modal) with editable ingredients
  table, add ingredient row, total cost bar, and card preview section
  matching the original detail-panel + #recipe-card-export layout
- RecipeSearch: simplified layout with search box and grid, detail panel
  appears inline below grid when a card is clicked
- Updated Cypress tests to match new component structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/RecipeCard.vue

@@ -1,36 +1,19 @@
 <template>
   <div class="recipe-card" @click="$emit('click', index)">
-    <div class="card-name">{{ recipe.name }}</div>
-
-    <div v-if="recipe.tags && recipe.tags.length" class="card-tags">
-      <span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
+    <div class="recipe-card-name">{{ recipe.name }}</div>
+    <div v-if="recipe.tags && recipe.tags.length" class="recipe-card-tags">
+      <span v-for="tag in recipe.tags" :key="tag" class="tag">{{ tag }}</span>
     </div>
-
-    <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
-
-    <div class="card-ingredients">
-      <div v-for="(ing, i) in recipe.ingredients" :key="i" class="card-ing-row">
-        <span class="card-oil-name">{{ ing.oil }}</span>
-        <span class="card-oil-drops">{{ ing.drops }}滴</span>
-      </div>
+    <div class="recipe-card-oils">{{ oilNames }}</div>
+    <div class="recipe-card-bottom">
+      <div class="recipe-card-price">💰 {{ priceInfo.cost }}</div>
+      <button
+        class="fav-btn"
+        :class="{ favorited: isFav }"
+        @click.stop="$emit('toggle-fav', recipe._id)"
+        :title="isFav ? '取消收藏' : '收藏'"
+      >{{ isFav ? '★' : '☆' }}</button>
     </div>
-
-    <div class="card-total">
-      <div class="card-total-inner">
-        <span class="card-total-label">成本</span>
-        <span class="card-total-price">{{ priceInfo.cost }}</span>
-      </div>
-      <span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
-    </div>
-
-    <button
-      class="card-star"
-      :class="{ favorited: isFav }"
-      @click.stop="$emit('toggle-fav', recipe._id)"
-      :title="isFav ? '取消收藏' : '收藏'"
-    >
-      {{ isFav ? '★' : '☆' }}
-    </button>
   </div>
 </template>
 
@@ -49,165 +32,88 @@ defineEmits(['click', 'toggle-fav'])
 const oilsStore = useOilsStore()
 const recipesStore = useRecipesStore()
 
+const oilNames = computed(() =>
+  props.recipe.ingredients.map(i => i.oil).join('、')
+)
 const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
 const isFav = computed(() => recipesStore.isFavorite(props.recipe))
 </script>
 
 <style scoped>
 .recipe-card {
-  background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
-  border-radius: 16px;
-  padding: 20px 18px 16px;
+  background: white;
+  border-radius: 14px;
+  padding: 18px;
   cursor: pointer;
+  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
   border: 2px solid transparent;
   transition: all 0.2s;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  position: relative;
-  overflow: hidden;
-}
-
-.recipe-card::before {
-  content: '';
-  position: absolute;
-  top: -30px;
-  right: -30px;
-  width: 120px;
-  height: 120px;
-  background: radial-gradient(circle, rgba(122, 158, 126, 0.12) 0%, transparent 70%);
-  border-radius: 50%;
-  pointer-events: none;
 }
 
 .recipe-card:hover {
   transform: translateY(-3px);
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
-  border-color: #b8d4c0;
+  box-shadow: 0 8px 32px rgba(90, 60, 30, 0.15);
+  border-color: #c8ddc9;
 }
 
-.card-name {
+.recipe-card-name {
   font-family: 'Noto Serif SC', serif;
-  font-size: 17px;
-  font-weight: 700;
-  color: #3e3a44;
-  line-height: 1.3;
-  padding-right: 28px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c2416;
+  margin-bottom: 8px;
 }
 
-.card-tags {
+.recipe-card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
-  margin-bottom: 2px;
+  margin-bottom: 6px;
 }
 
-.card-tag {
+.tag {
   font-size: 11px;
-  padding: 2px 9px;
+  padding: 2px 8px;
   border-radius: 8px;
-  background: rgba(122, 158, 126, 0.15);
+  background: #eef4ee;
   color: #5a7d5e;
-  font-weight: 500;
 }
 
-.card-note {
+.recipe-card-oils {
   font-size: 12px;
-  color: #8a7e6b;
-  background: rgba(201, 168, 76, 0.1);
-  border-radius: 6px;
-  padding: 4px 8px;
-  line-height: 1.4;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: #9a8570;
+  line-height: 1.7;
 }
 
-.card-ingredients {
+.recipe-card-bottom {
   display: flex;
-  flex-direction: column;
-  gap: 0;
-  margin: 4px 0;
-}
-
-.card-ing-row {
-  display: flex;
-  align-items: center;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(180, 150, 100, 0.15);
-  font-size: 13px;
-}
-
-.card-ing-row:last-child {
-  border-bottom: none;
-}
-
-.card-oil-name {
-  flex: 1;
-  color: #3e3a44;
-  font-weight: 500;
-}
-
-.card-oil-drops {
-  color: #5a7d5e;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.card-total {
-  background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
-  border-radius: 10px;
-  padding: 10px 14px;
-  display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-top: 4px;
-}
-
-.card-total-inner {
-  display: flex;
   align-items: center;
-  gap: 8px;
+  margin-top: 8px;
 }
 
-.card-total-label {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
-  letter-spacing: 0.5px;
+.recipe-card-price {
+  font-size: 13px;
+  color: #5a7d5e;
+  font-weight: 600;
 }
 
-.card-total-price {
-  color: #fff;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.card-retail {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.75);
-}
-
-.card-star {
-  position: absolute;
-  top: 14px;
-  right: 12px;
+.fav-btn {
   background: none;
   border: none;
-  font-size: 22px;
+  font-size: 20px;
   cursor: pointer;
   color: #d4cfc7;
-  padding: 2px;
+  padding: 2px 4px;
   line-height: 1;
-  transition: color 0.2s, transform 0.15s;
-  z-index: 1;
+  transition: color 0.2s;
 }
 
-.card-star.favorited {
+.fav-btn.favorited {
   color: #f5a623;
 }
 
-.card-star:hover {
+.fav-btn:hover {
   color: #f5a623;
-  transform: scale(1.15);
 }
 </style>