Neumorphic Accordion 구성 요소

<div class="p-6 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-2xl">
    <!-- Accordion Item 1 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-1" class="hidden peer">
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Vision</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>At our core, we envision a future where innovative solutions empower businesses to thrive in a dynamically evolving digital landscape. We strive to be the leading partner in digital transformation, fostering growth and efficiency through cutting-edge technology and unwavering commitment to our clients' success.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="mb-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-2" class="hidden peer">
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Mission</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>Our mission is to deliver tailored, high-impact digital strategies and solutions that drive tangible results for our clients. We are dedicated to continuous innovation, fostering a collaborative environment, and maintaining the highest standards of integrity and excellence in all our endeavors.</p>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <input type="checkbox" id="accordion-3" class="hidden peer">
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer text-gray-800 dark:text-gray-200">
        <span class="font-semibold text-lg">Our Values</span>
        <svg class="w-6 h-6 transform transition-transform duration-300 peer-checked:rotate-180" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-screen">
        <div class="px-5 pb-5 text-gray-700 dark:text-gray-300">
          <p>We are guided by a core set of values: Innovation, Integrity, Client-Centricity, and Excellence. These principles underpin every decision we make and every action we take, ensuring we consistently deliver exceptional value and build lasting relationships with our clients.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neumorphic Shadows (Light Mode) */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a0a0a0, -8px -8px 16px #ffffff;
  }

  /* Neumorphic Shadows (Dark Mode) */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }

  /* Triadic Color Scheme */
  /* Using a base gray-200/gray-800 for background and text, and will imply the triadic through subtle interaction/accent colors if required for active states or borders (not explicitly drawn in this simple example, but conceptually part of the triadic palette) */
  /* For a true triadic, you might introduce a complementary hue for highlights/accents, e.g., an orange or teal if starting with purple/green. For this