## 🎬 퀴즈 영상에 생명을 불어넣다! ### 배경음악, 음성, 로고, 색상까지 – 몰입감을 위한 영상 응용기

Copy.correct-answer {
    background-color: #DC2626;
    color: white;
    font-family: 'Noto Sans KR', sans-serif;
}

Copy.correct-answer {
    background-color: #2563EB;
    color: white;
    font-family: 'Noto Sans KR', sans-serif;
}

Copy.correct-answer {
    background-color: #7C3AED;
    color: white;
    font-family: 'Noto Sans KR', sans-serif;
}

Copy.correct-answer {
    background-color: #EAB308;
    color: white;
    font-family: 'Noto Sans KR', sans-serif;
}

This is the question: {{2.question}}
Options are: {{join(2.options; ",")}}

Generate creative and detailed prompts that can be used to create background images for the above quiz question. These prompts should be designed for realistic Korean manhwa-style characters with a predominantly green color scheme. Your responses should inspire unique, relevant, and visually appealing backgrounds that enhance the quiz experience. The beforeAnswer image should not directly give the answer but be broadly related to the theme. The afterAnswer image should be a manhwa-style image of the answer or closely related to it.

Requirements:
- The prompts are generated in English
- The style should be realistic Korean webtoon/manhwa style characters
- Use green and forest green as the primary color palette
- Emphasize a realistic, detailed aesthetic with modern Korean manhwa art style
- The images should have a rich, atmospheric background with green tones
- When text is included, write it in Korean and avoid including text if possible
- The art style should be detailed, expressive, and reminiscent of popular Korean webtoons
- The background image should relate to Korea and Korean culture
- Characters should have realistic proportions and detailed features
- The buttons in the quiz interface should remain pink in color

Output should be in json format:
{
"beforeAnswer": "",
"afterAnswer": ""
}

<style>
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Hi+Melody&family=Jua&display=swap');

.background {
    background-color: rgba(255, 230, 240, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.option {
    background-color: rgba(255, 182, 213, 0.8);
    padding: 2.5rem; 
    text-align: center;
    font-size: 3.2rem; 
    border-radius: 20px; 
    margin-bottom: 1.2rem;
    width: 100%;
    font-weight: 700; 
    color: white;
    font-family: 'Hi Melody', 'Gaegu', sans-serif;
    border: 5px solid rgba(255, 130, 180, 0.9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: scale(1);
    transition: transform 0.2s;
    text-shadow: 1px 1px 2px rgba(150, 50, 100, 0.4);
    position: relative;
}

.option::before {
    content: "❤";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.option::after {
    content: "❤";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.option:hover, .option:active {
    transform: scale(1.02);
}

.answer {
    background-color: rgba(255, 85, 150, 0.8);
    border: 5px solid rgba(255, 0, 127, 0.9);
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    0% { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
    100% { box-shadow: 0 8px 20px rgba(255, 20, 147, 0.4); }
}

.option:last-child {
    margin-bottom: 0;
}

.question {
    background-color: rgba(255, 130, 180, 0.8);
    padding: 2.5rem;
    text-align: center;
    font-size: 4.2rem;
    border-radius: 20px;
    width: 100%;
    font-weight: 700;
    color: white;
    margin-bottom: 1.5rem;
    font-family: 'Jua', 'Hi Melody', sans-serif;
    border: 5px solid rgba(255, 85, 150, 0.9);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-shadow: 2px 2px 4px rgba(150, 50, 100, 0.5);
    position: relative;
}

.question::before {
    content: "★";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
}

.question::after {
    content: "★";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
}

.countdown {
    font-family: 'Jua', sans-serif;
    font-size: 6rem;
    color: rgba(255, 100, 170, 0.9);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.bubble {
    position: absolute;
    background-color: rgba(255, 220, 240, 0.7);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: -1;
    animation: float 7s infinite linear;
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}
</style>

<div class="flex items-center justify-center h-screen bg-transparent" style="width: 1080px; height: 1920px;">
    <!-- 배경 버블 효과 -->
    <div class="bubble" style="width: 80px; height: 80px; top: 10%; left: 10%; animation-delay: 0s;"></div>
    <div class="bubble" style="width: 60px; height: 60px; top: 20%; left: 80%; animation-delay: 1s;"></div>
    <div class="bubble" style="width: 100px; height: 100px; top: 60%; left: 15%; animation-delay: 2s;"></div>
    <div class="bubble" style="width: 70px; height: 70px; top: 70%; left: 75%; animation-delay: 3s;"></div>
    <div class="bubble" style="width: 90px; height: 90px; top: 40%; left: 60%; animation-delay: 4s;"></div>
    
    <div class="background w-full p-8 rounded-lg" style="max-width: 1080px;">
        <h1 class="question text-center">
            {{2.question}}
        </h1>

        <div class="space-y-6">
            <div class="option">
                {{2.options[1]}}
            </div>
            <div class="option">
                {{2.options[2]}}
            </div>
            <div class="option answer">
                {{2.options[3]}}
            </div>
        </div>
        
        <div class="mt-8 text-center countdown">
            <span id="countdown">5</span>
        </div>
    </div>
</div>

<script>
// 이미지 생성을 위한 프롬프트
const imagePrompt = `
Create a super cute Korean webtoon-style background image for a quiz question. 
The image should have:
- Adorable chibi characters with big expressive eyes and tiny bodies
- A vibrant pink color palette with pastel accents
- Kawaii style elements and cute facial expressions
- Heart and star decorations
- Soft, bubbly background with glowing effects
- Korean webtoon/manhwa aesthetic similar to 'Hello Coco' or 'Line Friends'
- The characters should be incredibly cute with expressive emotions
- Include small decorative elements like hearts, stars, or bubbles
- Very vibrant and eye-catching colors that appeal to all ages
- The entire image should feel joyful, playful and extremely adorable
`;

// 정답 이미지 프롬프트
const answerImagePrompt = `
Create an ultra-cute Korean webtoon-style image showing the answer to the quiz:
- Super adorable chibi character celebrating with arms raised
- Extremely cute facial expression showing excitement
- Big sparkling eyes and tiny happy mouth
- Surrounded by confetti, stars, and heart effects
- Vibrant pink background with glowing effects
- The cuteness level should be maximized with adorable proportions
- Include decorative elements that make viewers say "awww"
- Pastel color palette with emphasis on pink tones
- The character should have a very happy, satisfied expression
- The overall aesthetic should be kawaii and irresistibly cute
`;

// 카운트다운 애니메이션
let countdownEl = document.getElementById('countdown');
if (countdownEl) {
    let count = 5;
    const countdownInterval = setInterval(() => {
        count--;
        countdownEl.textContent = count;
        if (count <= 0) {
            clearInterval(countdownInterval);
        }
    }, 1000);
}
</script>