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/cypress/e2e/price-display.cy.js

@@ -4,8 +4,8 @@ describe('Price Display Regression', () => {
     cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
     cy.wait(2000) // wait for oils store to load and re-render
 
-    // Check via .card-price elements which hold the formatted cost
-    cy.get('.card-price').first().invoke('text').then(text => {
+    // Check via .recipe-card-price elements which hold the formatted cost
+    cy.get('.recipe-card-price').first().invoke('text').then(text => {
       const match = text.match(/¥\s*(\d+\.?\d*)/)
       expect(match, 'Card price should contain ¥').to.not.be.null
       expect(parseFloat(match[1]), 'Price should be > 0').to.be.gt(0)