뉴모픽 가격 표시 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-gray-200 dark:bg-gray-800 font-sans min-h-screen flex items-center justify-center transition-colors duration-300">
  <div class="max-w-6xl w-full mx-auto p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl dark:shadow-2xl bg-gray-200 dark:bg-gray-800 neumorphic-card transition-all duration-300 relative overflow-hidden">
    
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/10 via-orange-400/10 to-red-400/10 opacity-5 dark:opacity-10 pointer-events-none rounded-3xl z-0"></div>

    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 tracking-tight leading-tight">
          Choose Your Perfect Plan
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Unlock the full potential of our content with a plan that fits your needs. Simple, transparent pricing.
        </p>
      </header>

      <div class="flex justify-center items-center mb-10 transition-all duration-300">
        <span class="text-gray-700 dark:text-gray-300 mr-3 text-lg font-medium">Monthly</span>
        <label for="toggle-pricing" class="relative inline-flex items-center cursor-pointer neumorphic-switch-container shadow-inner dark:shadow-inner-dark hover:shadow-outer hover:dark:shadow-outer-dark rounded-full p-1 transition-all duration-300">
          <input type="checkbox" id="toggle-pricing" class="sr-only peer">
          <div class="w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-red-500 peer-focus:outline-none transition-all duration-300"></div>
          <span class="absolute left-1 top-1 w-6 h-6 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-transform duration-300 peer-checked:translate-x-full peer-checked:bg-yellow-300 dark:peer-checked:bg-orange-300"></span>
        </label>
        <span class="block relative text-gray-700 dark:text-gray-300 ml-3 text-lg font-medium">
          Annually
          <span class="px-2 py-1 ml-2 text-xs font-semibold rounded-full bg-orange-400 dark:bg-red-500 text-white neumorphic-discount-tag shadow-inner dark:shadow-inner-dark transform -rotate-6 absolute -top-4 -right-10 whitespace-nowrap">Save 20%!</span>
        </span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

        <!-- Basic Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Basic</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Access to essential articles and limited features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">$9</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Unlimited Basic Content Access</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Ad-supported reading</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Email Newsletter</span>
            </li>
            <li class="flex items-center text-gray-500 dark:text-gray-400">
              <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
              <span>No offline reading</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Choose Basic
          </button>
        </div>

        <!-- Pro Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col relative overflow-hidden border-2 border-transparent hover:border-orange-400 dark:hover:border-red-500 ring-2 ring-transparent hover:ring-orange-300 dark:hover:ring-red-400">
          <div class="absolute top-0 right-0 py-2 px-6 bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-500 dark:to-red-600 text-white font-bold text-sm rounded-bl-xl shadow-md transform rotate-3 origin-top-right translate-x-2 -translate-y-2 neumorphic-discount-tag dark:neumorphic-discount-tag-dark">
            Most Popular
          </div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Pro</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Full access to premium content and rich features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-red-500 dark:text-red-400 neumorphic-text-shadow transition-colors duration-300">$19</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>All Basic Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Ad-free experience</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Offline reading & downloads</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Priority Email Support</span>
            </li>
            <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Early access to new content</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-white bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-500 dark:to-red-600 hover:from-yellow-300 hover:to-orange-400 dark:hover:from-red-600 dark:hover:to-red-700 transition-all duration-300">
            Choose Pro
          </button>
        </div>

        <!-- Enterprise Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Custom solution for teams and large organizations.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">Custom</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/quote</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>All Pro Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Dedicated Account Manager</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Custom Integrations</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>Advanced Analytics</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              <span>24/7 Premium Support</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Contact Sales
          </button>
        </div>

      </div>

      <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
        *Prices exclude VAT. Cancel anytime. No hidden fees.
      </p>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Card */
  .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.4), -10px -10px 20px #FFFFFF;
  }
  .dark .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(50, 50, 50, 0.4);
  }

  /* Inner Neumorphic Card / Pricing Tier */
  .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.2), inset -5px -5px 10px #FFFFFF;
  }
  .dark .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(50, 50, 50, 0.3);
  }

  /* Inner Neumorphic Card Hover State */
  .neumorphic-card-hover:hover {
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.2), -8px -8px 16px #FFFFFF, inset 2px 2px 5px rgba(174, 174, 192, 0.1), inset -2px -2px 5px #FFFFFF;
  }
  .dark .neumorphic-card-hover-dark:hover {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(50, 50, 50, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(50, 50, 50, 0.2);
  }

  /* Buttons - Neumorphic Style */
  .neumorphic-button {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF;
  }
  .neumorphic-button:active {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.2), inset -3px -3px 6px #FFFFFF;
  }
  .dark .neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4);
  }
  .dark .neumorphic-button-dark:active {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(50, 50, 50, 0.3);
  }

  /* Toggle Switch Container */
  .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.2), inset -4px -4px 8px #FFFFFF;
  }
  .dark .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(50, 50, 50, 0.3);
  }
  .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF, inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF; /* Subtle outer shadow on hover */
  }
  .dark .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4), inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Discount Tag */
  .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(174, 174, 192, 0.4), -3px -3px 6px #FFFFFF;
    border: 1px solid rgba(255,165,0,0.2); /* Subtle border for definition */
  }
  .dark .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(50, 50, 50, 0.4);
    border: 1px solid rgba(255,99,71,0.2); /* Subtle border for definition */
  }

  /* Neumorphic Icon */
  .neumorphic-icon {
      border-radius: 9999px; /* Make it circular */
      box-shadow: inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-icon {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Text Shadow for prices */
  .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(174, 174, 192, 0.3), -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(50, 50, 50, 0.3);
  }


  /* Tailwind's dark class is applied to the <html> tag or higher */
  /* Custom properties or base classes should respect this */
</style>

<script>
  // Basic functionality for the toggle switch (for a true SPA this would be a framework component)
  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-pricing');
    if (toggle) {
      toggle.addEventListener('change', () => {
        // In a real application, you'd update pricing data here
        // For this example, we'll just log the state
        console.log('Pricing switched to:', toggle.checked ? 'Annually' : 'Monthly');

        // Example of visually altering prices (not dynamic data update)
        const proPrice = document.querySelector('.neumorphic-card-inner:nth-child(2) .neumorphic-text-shadow');
        const proTime = document.querySelector('.neumorphic-card-inner:nth-child(2) .ml-2');

        if (toggle.checked) {
          // Annual pricing (e.g., $19 * 12 * 0.8 = $182.4 -> $15 per month equivalent)
          proPrice.textContent = '$15'; 
          proTime.textContent = '/month (billed annually)';
        } else {
          // Monthly pricing
          proPrice.textContent = '$19';
          proTime.textContent = '/month';
        }
      });
    }

    // Dark mode toggle simulation (for demonstration purposes)
    // This part is for showcasing dark mode if an external toggle isn't available
    // In a real app, you'd use a robust dark mode implementation
    const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    };
    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    };

    // Check local storage for theme
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      enableDarkMode();
    } else if (storedTheme === 'light') {
      disableDarkMode();
    } else if (systemDarkMode.matches) {
      enableDarkMode(); // Default to system preference if no stored theme
    }

    // Listen for system theme changes
    systemDarkMode.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) { // Only apply if no user preference set
        e.matches ? enableDarkMode() : disableDarkMode();
      }
    });
  });
</script>