/* 🎨 파스텔 컬러 팔레트 */
    .landing-page {
        --mint-50: #f0fdf9;
        --mint-100: #ccfbef;
        --mint-200: #a7f3d0;
        --mint-400: #4ade80;
        --mint-500: #22c55e;
        --mint-600: #16a34a;
        --mint-700: #15803d;

        --pink-50: #fdf2f8;
        --pink-100: #fce7f3;
        --pink-200: #fbcfe8;
        --pink-400: #f472b6;
        --pink-500: #ec4899;
        --pink-700: #be185d;

        --orange-100: #ffedd5;
        --orange-500: #f97316;
        --orange-700: #c2410c;

        --jade-50: #f0fdf4;
        --jade-100: #dcfce7;
        --jade-200: #bbf7d0;
        --jade-500: #356859;
        --jade-600: #2d5a4a;
        --jade-700: #1f4d3a;
        --jade-800: #14532d;
    }

    /* Tailwind-like utility classes for custom colors */
    .bg-mint-50.svelte-1bs93qt {
        background-color: var(--mint-50);
    }
    .bg-mint-100.svelte-1bs93qt {
        background-color: var(--mint-100);
    }
    .bg-mint-200.svelte-1bs93qt {
        background-color: var(--mint-200);
    }
    .bg-mint-400\/20.svelte-1bs93qt {
        background-color: rgb(74 222 128 / 0.2);
    }
    .text-mint-500.svelte-1bs93qt {
        color: var(--mint-500);
    }
    .text-mint-600.svelte-1bs93qt {
        color: var(--mint-600);
    }
    .text-mint-700.svelte-1bs93qt {
        color: var(--mint-700);
    }

    .bg-pink-50.svelte-1bs93qt {
        background-color: var(--pink-50);
    }
    .bg-pink-100.svelte-1bs93qt {
        background-color: var(--pink-100);
    }
    .bg-pink-200.svelte-1bs93qt {
        background-color: var(--pink-200);
    }
    .bg-pink-400\/20.svelte-1bs93qt {
        background-color: rgb(244 114 182 / 0.2);
    }
    .text-pink-400.svelte-1bs93qt {
        color: var(--pink-400);
    }
    .text-pink-500.svelte-1bs93qt {
        color: var(--pink-500);
    }
    .text-pink-700.svelte-1bs93qt {
        color: var(--pink-700);
    }

    .bg-orange-100.svelte-1bs93qt {
        background-color: var(--orange-100);
    }
    .bg-orange-400\/20.svelte-1bs93qt {
        background-color: rgb(251 146 60 / 0.2);
    }
    .text-orange-500.svelte-1bs93qt {
        color: var(--orange-500);
    }
    .text-orange-700.svelte-1bs93qt {
        color: var(--orange-700);
    }

    .text-jade-500.svelte-1bs93qt {
        color: var(--jade-500);
    }
    .text-jade-600.svelte-1bs93qt {
        color: var(--jade-600);
    }
    .text-jade-700.svelte-1bs93qt {
        color: var(--jade-700);
    }
    .text-jade-800.svelte-1bs93qt {
        color: var(--jade-800);
    }
    .bg-jade-800.svelte-1bs93qt {
        background-color: var(--jade-800);
    }
    .text-jade-200.svelte-1bs93qt {
        color: #bbf7d0;
    }
    .text-jade-300.svelte-1bs93qt {
        color: #a7f3d0;
    }
    .border-jade-700.svelte-1bs93qt {
        border-color: var(--jade-700);
    }

    /* 버튼 스타일 */
    .btn-primary.svelte-1bs93qt {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(to right, var(--jade-500), var(--mint-500));
        color: white;
        font-weight: 600;
        border-radius: 9999px;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transition: all 0.3s;
    }
    .btn-primary.svelte-1bs93qt:hover {
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
        transform: translateY(-2px);
    }

    .btn-secondary.svelte-1bs93qt {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: white;
        color: var(--jade-700);
        font-weight: 600;
        border-radius: 9999px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        border: 1px solid #bbf7d0;
        transition: all 0.3s;
    }
    .btn-secondary.svelte-1bs93qt:hover {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transform: translateY(-2px);
    }

    /* 그림자 */
    .shadow-soft.svelte-1bs93qt {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

    /* 떠다니는 도형 애니메이션 */
    .floating-shape.svelte-1bs93qt {
        position: absolute;
        border-radius: 50%;
        opacity: 0.4;
        animation: svelte-1bs93qt-float 20s ease-in-out infinite;
    }

    .shape-1.svelte-1bs93qt {
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, var(--mint-200), var(--mint-100));
        top: 10%;
        left: -5%;
        animation-delay: 0s;
    }

    .shape-2.svelte-1bs93qt {
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, var(--pink-200), var(--pink-100));
        top: 60%;
        right: -3%;
        animation-delay: -5s;
    }

    .shape-3.svelte-1bs93qt {
        width: 150px;
        height: 150px;
        background: linear-gradient(135deg, var(--orange-100), #fff7ed);
        top: 30%;
        right: 20%;
        animation-delay: -10s;
    }

    .shape-4.svelte-1bs93qt {
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, var(--mint-100), white);
        bottom: 20%;
        left: 15%;
        animation-delay: -15s;
    }

    @keyframes svelte-1bs93qt-float {
        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }
        25% {
            transform: translate(20px, -30px) rotate(5deg);
        }
        50% {
            transform: translate(-10px, 20px) rotate(-5deg);
        }
        75% {
            transform: translate(30px, 10px) rotate(3deg);
        }
    }

    /* 흔들림 애니메이션 */
    @keyframes svelte-1bs93qt-wiggle {
        0%,
        100% {
            transform: rotate(-5deg);
        }
        50% {
            transform: rotate(5deg);
        }
    }

    .animate-wiggle.svelte-1bs93qt {
        animation: svelte-1bs93qt-wiggle 1s ease-in-out infinite;
    }

    /* Feature Card */
    .feature-card.svelte-1bs93qt {
        padding: 2rem;
        background: white;
        border-radius: 1.5rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        text-align: center;
        transition: all 0.3s;
        animation: svelte-1bs93qt-fadeInUp 0.6s ease-out forwards;
        opacity: 0;
    }
    .feature-card.svelte-1bs93qt:hover {
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
        transform: translateY(-8px);
    }

    .feature-icon.svelte-1bs93qt {
        width: 5rem;
        height: 5rem;
        margin: 0 auto 1.5rem auto;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mini Feature Card */
    .mini-feature-card.svelte-1bs93qt {
        padding: 1.5rem;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s;
        animation: svelte-1bs93qt-fadeInUp 0.6s ease-out forwards;
        opacity: 0;
    }
    .mini-feature-card.svelte-1bs93qt:hover {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
        transform: translateY(-4px);
    }

    /* Stat Card */
    .stat-card.svelte-1bs93qt {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        background: var(--jade-50);
        border-radius: 1rem;
        min-width: 100px;
    }

    @keyframes svelte-1bs93qt-fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 그라데이션 텍스트를 위한 추가 스타일 */
    .from-mint-500.svelte-1bs93qt {
        --tw-gradient-from: var(--mint-500);
    }
    .via-jade-500.svelte-1bs93qt {
        --tw-gradient-stops: var(--tw-gradient-from), var(--jade-500), var(--tw-gradient-to);
    }
    .to-pink-400.svelte-1bs93qt {
        --tw-gradient-to: var(--pink-400);
    }

    /* 반응형 조정 */
    @media (max-width: 768px) {
        .floating-shape.svelte-1bs93qt {
            opacity: 0.2;
        }

        .shape-1.svelte-1bs93qt {
            width: 150px;
            height: 150px;
        }
        .shape-2.svelte-1bs93qt {
            width: 100px;
            height: 100px;
        }
        .shape-3.svelte-1bs93qt {
            width: 80px;
            height: 80px;
        }
        .shape-4.svelte-1bs93qt {
            width: 60px;
            height: 60px;
        }
    }