Neumorphic 전자 상거래 제품 카드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-2xl p-6 bg-gray-200 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 ease-in-out">
    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 group">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-full object-cover rounded-xl transition-transform duration-300 group-hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent rounded-xl"></div>
      <span class="absolute top-3 left-3 px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-semibold rounded-full shadow-inner-light dark:shadow-inner-dark">
        New
      </span>
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2 truncate">Stylish Black Headphone</h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable ear cups.
    </p>

    <!-- Price and Rating -->
    <div class="flex items-center justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-100">$199.99</span>
      <div class="flex items-center space-x-1">
        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 fill-current" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.736 4.635 1.123 6.545z"/>
        </svg>
        <span class="text-sm text-gray-600 dark:text-gray-400">4.8 (120)</span>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 px-6 rounded-xl bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold transition-all duration-300 ease-in-out shadow-custom-button-light dark:shadow-custom-button-dark hover:shadow-custom-button-hover-light dark:hover:shadow-custom-button-hover-dark active:shadow-inner-light active:dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900">
      Add to Cart
    </button>
  </div>
</div>

<style>
  /* Base Neumorphic Shadows for Light Mode */
  .shadow-custom-light {
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }
  .shadow-inner-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }
  .shadow-custom-button-light {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }
  .shadow-custom-button-hover-light {
    box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-custom-dark {
    box-shadow: 8px 8px 16px #717171, -8px -8px 16px #414141;
  }
  .dark .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #414141;
  }
  .dark .shadow-custom-button-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #414141;
  }
  .dark .shadow-custom-button-hover-dark {
    box-shadow: 7px 7px 14px #717171, -7px -7px 14px #414141;
  }

  /* Custom Ring Offset for Dark Mode Focus */
  .dark\:focus\:ring-offset-gray-900:focus {
      box-shadow: 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-offset-color), var(--tw-ring-shadow);
      --tw-ring-offset-color: #1a202c;
  }
</style>