/* 단계별 진행 */
        .steps-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
        }
        
        .step {
            margin-bottom: 40px;
            opacity: 0.5;
            transition: all 0.3s ease;
        }
        
        .step.active {
            opacity: 1;
        }
        
        .step-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #7C4DFF, #6366F1);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 15px;
        }
        
        .step-title {
            font-size: 24px;
            font-weight: 500;
            color: #333;
        }
        
        /* 1단계: API 키 입력 */
        .api-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .api-provider {
            margin-bottom: 25px;
        }
        
        .provider-label {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            color: #333;
        }
        
        .api-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .api-input:focus {
            outline: none;
            border-color: #7C4DFF;
            box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
        }
        
        .api-help {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
        .api-help a {
            color: #7C4DFF;
            text-decoration: none;
        }
        
        .api-help a:hover {
            text-decoration: underline;
        }
        
        /* 2단계: 템플릿 선택 */
        .templates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .template-card {
            background: white;
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .template-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .template-card.selected {
            border-color: #7C4DFF;
            background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), #fff);
        }
        
        .template-preview {
            width: 60px;
            height: 80px;
            background: linear-gradient(135deg, #7C4DFF, #6366F1);
            border-radius: 8px;
            margin: 0 auto 15px;
            position: relative;
            overflow: hidden;
        }
        
        .template-preview::before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 30px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }
        
        .template-preview::after {
            content: '';
            position: absolute;
            bottom: 10px;
            left: 10px;
            right: 10px;
            height: 15px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
        }
        
        .template-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }
        
        .template-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }
        
        .template-premium {
            position: absolute;
            top: 8px;
            right: 8px;
            background: linear-gradient(135deg, #7C4DFF, #6366F1);
            color: white;
            font-size: 10px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        /* 3단계: 뉴스 입력 */
        .news-input-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .input-tabs {
            display: flex;
            margin-bottom: 20px;
            background: #e9ecef;
            border-radius: 8px;
            padding: 4px;
        }
        
        .input-tab {
            flex: 1;
            padding: 10px 20px;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            color: #666;
        }
        
        .input-tab.active {
            background: white;
            color: #333;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .news-textarea {
            width: 100%;
            min-height: 120px;
            padding: 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
            transition: all 0.3s ease;
        }
        
        .news-textarea:focus {
            outline: none;
            border-color: #7C4DFF;
            box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
        }
        
        .news-url-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .news-url-input:focus {
            outline: none;
            border-color: #7C4DFF;
            box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.1);
        }
        
        /* 4단계: 생성 옵션 */
        .options-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .option-group {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
        }
        
        .option-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
        }
        
        .option-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .option-item input[type="radio"],
        .option-item input[type="checkbox"] {
            margin-right: 10px;
            transform: scale(1.2);
            accent-color: #7C4DFF;
        }
        
        .option-item label {
            font-size: 14px;
            color: #555;
            cursor: pointer;
        }
        
        /* 생성 버튼 */
        .generate-section {
            text-align: center;
            margin-top: 40px;
        }
        
        .generate-btn {
            background: linear-gradient(135deg, #7C4DFF, #6366F1);
            color: white;
            border: none;
            padding: 16px 40px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(124, 77, 255, 0.3);
        }
        
        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(124, 77, 255, 0.4);
        }
        
        .generate-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 요금제 정보 */
        .pricing-info {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            padding: 20px;
            margin-top: 30px;
            text-align: center;
        }
        
        .pricing-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
            color: #333;
        }
        
        .pricing-plans {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .pricing-plan {
            background: white;
            padding: 15px 20px;
            border-radius: 8px;
            border: 2px solid #e1e5e9;
            text-align: center;
            min-width: 150px;
        }
        
        .pricing-plan.recommended {
            border-color: #7C4DFF;
            position: relative;
        }
        
        .pricing-plan.recommended::before {
            content: '추천';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: #7C4DFF;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .plan-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #333;
        }
        
        .plan-price {
            font-size: 18px;
            font-weight: 700;
            color: #7C4DFF;
            margin-bottom: 8px;
        }
        
        .plan-features {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }
        
        /* 푸터 */
        .footer {
            background: #f2f2f2;
            border-top: 1px solid #e4e4e4;
            font-size: 14px;
            color: rgba(0,0,0,.54);
            margin-top: 50px;
        }
        
        .footer-country {
            padding: 15px 30px;
            border-bottom: 1px solid #dadce0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .footer-links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            min-height: 42px;
            flex-wrap: wrap;
        }
        
        .footer-left, .footer-right {
            display: flex;
            flex-wrap: wrap;
        }
        
        .footer-links a {
            color: rgba(0,0,0,.54);
            text-decoration: none;
            padding: 15px;
            display: block;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        .footer-links a.premium {
            background: linear-gradient(135deg, #7C4DFF, #6366F1);
            color: white;
            border-radius: 20px;
            padding: 8px 16px;
            margin: 7px;
            font-weight: 500;
        }
        
        .footer-links a.premium:hover {
            text-decoration: none;
            transform: translateY(-1px);
        }
        
        .footer-copyright {
            text-align: center;
            padding: 15px 20px;
            background: #e8eaed;
            font-size: 12px;
            color: #70757a;
        }
        
        /* 반응형 */
        @media (max-width: 768px) {
            .main-container {
                padding: 20px 10px;
            }
            
            .title-main {
                font-size: 36px;
            }
            
            .title-features {
                flex-direction: column;
                gap: 10px;
            }
            
            .steps-container {
                padding: 20px;
            }
            
            .templates-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 15px;
            }
            
            .pricing-plans {
                flex-direction: column;
                align-items: center;
            }
        }
        
        /* 로딩 애니메이션 */
        .loading {
            display: none;
            text-align: center;
            padding: 40px;
        }
        
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #7C4DFF;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            font-size: 16px;
            color: #666;
        }
        
        /* 특수 템플릿 스타일 */
        .template-breaking {
            background: linear-gradient(135deg, #dc3545, #c82333) !important;
        }
        
        .template-tech {
            background: linear-gradient(135deg, #007bff, #0056b3) !important;
        }
        
        .template-sports {
            background: linear-gradient(135deg, #28a745, #1e7e34) !important;
        }
        
        .template-economy {
            background: linear-gradient(135deg, #ffc107, #e0a800) !important;
        }
        
        .template-culture {
            background: linear-gradient(135deg, #e83e8c, #d91a72) !important;
        }
    </style>
</head>
<body>
    <!-- 헤더 -->
    <div class="header">
        <div class="header-content">
            <a href="/" class="logo-link">
                <img src="/4.코리안투데이 국문좌우조합_슬로건.png_new.png" 
                     alt="Korean Today" 
                     class="logo-kr"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                <img src="/9.코리안투데이_영문_좌우조합_슬로건.png" 
                     alt="Korean Today" 
                     class="logo-en" 
                     style="display: none;"
                     onerror="this.style.display='none'; this.parentNode.innerHTML='🎬 Korean Today Shorts';">
                🎬 Korean Today Shorts
            </a>
            <div class="nav-links">
                <a href="/">메인으로</a>
                <a href="/search.php">뉴스 검색</a>
                <a href="/pricing">요금제</a>
                <a href="/login">로그인</a>
            </div>
        </div>
    </div>

    <!-- 메인 컨테이너 -->
    <div class="main-container">
        <!-- 페이지 제목 -->
        <div class="page-title">
            <h1 class="title-main">🎬 쇼츠 자동 생성</h1>
            <p class="title-sub">뉴스 기사를 클릭 한 번으로 바이럴 쇼츠 영상 제작</p>
            <div class="title-features">
                <div class="feature-badge">⚡ 1분 완성</div>
                <div class="feature-badge">🤖 AI 자동화</div>
                <div class="feature-badge">📱 즉시 다운로드</div>
                <div class="feature-badge">💰 수익 창출</div>
            </div>
        </div>

        <!-- 단계별 진행 -->
        <div class="steps-container">
            <!-- 1단계: API 키 입력 -->
            <div class="step active" id="step1">
                <div class="step-header">
                    <div class="step-number">1</div>
                    <h2 class="step-title">AI API 키 입력</h2>
                </div>
                
                <div class="api-section">
                    <div class="api-provider">
                        <div class="provider-label">🤖 OpenAI API 키</div>
                        <input type="password" 
                               class="api-input" 
                               id="openaiKey" 
                               placeholder="sk-..." 
                               autocomplete="off">
                        <div class="api-help">
                            <a href="https://platform.openai.com/api-keys" target="_blank">API 키 발급 받기</a> | 
                            텍스트 생성 및 요약에 사용됩니다
                        </div>
                    </div>
                    
                    <div class="api-provider">
                        <div class="provider-label">🎨 ElevenLabs API 키 (선택사항)</div>
                        <input type="password" 
                               class="api-input" 
                               id="elevenlabsKey" 
                               placeholder="..." 
                               autocomplete="off">
                        <div class="api-help">
                            <a href="https://elevenlabs.io/" target="_blank">API 키 발급 받기</a> | 
                            고품질 음성 생성에 사용됩니다 (선택사항)
                        </div>
                    </div>
                    
                    <div class="api-provider">
                        <div class="provider-label">🖼️ DALL-E / Stable Diffusion API 키 (선택사항)</div>
                        <input type="password" 
                               class="api-input" 
                               id="imageKey" 
                               placeholder="..." 
                               autocomplete="off">
                        <div class="api-help">
                            이미지 생성에 사용됩니다 (선택사항)
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2단계: 템플릿 선택 -->
            <div class="step" id="step2">
                <div class="step-header">
                    <div class="step-number">2</div>
                    <h2 class="step-title">쇼츠 템플릿 선택 (10가지)</h2>
                </div>
                
                <div class="templates-grid">
                    <div class="template-card selected" data-template="breaking">
                        <div class="template-preview template-breaking"></div>
                        <div class="template-name">🚨 속보 스타일</div>
                        <div class="template-desc">긴급뉴스, 속보에 최적화된 강렬한 디자인</div>
                    </div>
                    
                    <div class="template-card" data-template="minimal">
                        <div class="template-preview"></div>
                        <div class="template-name">✨ 미니멀 클린</div>
                        <div class="template-desc">깔끔하고 모던한 디자인의 범용 템플릿</div>
                    </div>
                    
                    <div class="template-card" data-template="tech">
                        <div class="template-preview template-tech"></div>
                        <div class="template-name">💻 테크/IT</div>
                        <div class="template-desc">기술, IT, 과학 뉴스 전용 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="sports">
                        <div class="template-preview template-sports"></div>
                        <div class="template-name">⚽ 스포츠</div>
                        <div class="template-desc">스포츠 뉴스 전용 역동적 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="economy">
                        <div class="template-preview template-economy"></div>
                        <div class="template-name">💰 경제/금융</div>
                        <div class="template-desc">경제, 금융 뉴스 전용 신뢰감 있는 디자인</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="political">
                        <div class="template-preview"></div>
                        <div class="template-name">🏛️ 정치</div>
                        <div class="template-desc">정치 뉴스 전용 진중한 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="culture">
                        <div class="template-preview template-culture"></div>
                        <div class="template-name">🎭 문화/연예</div>
                        <div class="template-desc">문화, 연예 뉴스 전용 화려한 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="international">
                        <div class="template-preview"></div>
                        <div class="template-name">🌍 국제</div>
                        <div class="template-desc">국제 뉴스 전용 글로벌 감각 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="social">
                        <div class="template-preview"></div>
                        <div class="template-name">👥 사회</div>
                        <div class="template-desc">사회 이슈 전용 따뜻한 감성 템플릿</div>
                        <div class="template-premium">PRO</div>
                    </div>
                    
                    <div class="template-card" data-template="premium">
                        <div class="template-preview"></div>
                        <div class="template-name">⭐ 프리미엄</div>
                        <div class="template-desc">모든 뉴스에 활용 가능한 고급 템플릿</div>
                        <div class="template-premium">BUSINESS</div>
                    </div>
                </div>
            </div>

            <!-- 3단계: 뉴스 입력 -->
            <div class="step" id="step3">
                <div class="step-header">
                    <div class="step-number">3</div>
                    <h2 class="step-title">뉴스 내용 입력</h2>
                </div>
                
                <div class="news-input-section">
                    <div class="input-tabs">
                        <div class="input-tab active" data-tab="text">📝 텍스트 직접 입력</div>
                        <div class="input-tab" data-tab="url">🔗 뉴스 URL</div>
                        <div class="input-tab" data-tab="korean-today">📰 Korean Today 선택</div>
                    </div>
                    
                    <div class="tab-content active" id="tab-text">
                        <textarea class="news-textarea" 
                                  placeholder="뉴스 기사 내용을 입력하세요...&#10;&#10;예시:&#10;제목: 한국 경제 성장률 3.2% 기록&#10;내용: 올해 2분기 한국 경제가 전년 동기 대비 3.2% 성장을 기록했다고 한국은행이 발표했다..."></textarea>
                    </div>
                    
                    <div class="tab-content" id="tab-url">
                        <input type="url" 
                               class="news-url-input" 
                               placeholder="https://example.com/news-article">
                        <div class="api-help" style="margin-top: 10px;">
                            뉴스 기사 URL을 입력하면 자동으로 내용을 추출합니다
                        </div>
                    </div>
                    
                    <div class="tab-content" id="tab-korean-today">
                        <select class="news-url-input" id="koreanTodaySelect">
                            <option value="">최근 Korean Today 뉴스에서 선택...</option>
                        </select>
                        <div class="api-help" style="margin-top: 10px;">
                            Korean Today 최신 기사 중에서 선택하세요
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4단계: 생성 옵션 -->
            <div class="step" id="step4">
                <div class="step-header">
                    <div class="step-number">4</div>
                    <h2 class="step-title">생성 옵션</h2>
                </div>
                
                <div class="options-section">
                    <div class="option-group">
                        <div class="option-title">📏 영상 길이</div>
                        <div class="option-item">
                            <input type="radio" name="duration" value="15" id="duration15" checked>
                            <label for="duration15">15초 (Instagram 릴스)</label>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="duration" value="30" id="duration30">
                            <label for="duration30">30초 (TikTok 추천)</label>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="duration" value="60" id="duration60">
                            <label for="duration60">60초 (YouTube Shorts)</label>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <div class="option-title">🎵 오디오 옵션</div>
                        <div class="option-item">
                            <input type="checkbox" id="voiceover" checked>
                            <label for="voiceover">AI 음성 나레이션 추가</label>
                        </div>
                        <div class="option-item">
                            <input type="checkbox" id="bgmusic">
                            <label for="bgmusic">배경음악 추가</label>
                        </div>
                        <div class="option-item">
                            <input type="checkbox" id="soundeffects">
                            <label for="soundeffects">효과음 추가</label>
                        </div>
                    </div>
                    
                    <div class="option-group">
                        <div class="option-title">🎨 비주얼 옵션</div>
                        <div class="option-item">
                            <input type="checkbox" id="autoimage" checked>
                            <label for="autoimage">AI 이미지 자동 생성</label>
                        </div>
                        <div class="option-item">
                            <input type="checkbox" id="subtitles" checked>
                            <label for="subtitles">자막 추가</label>
                        </div>
                        <div class="option-item">
                            <input type="checkbox" id="animations">
                            <label for="animations">텍스트 애니메이션</label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 생성 버튼 -->
            <div class="generate-section">
                <button class="generate-btn" id="generateBtn" onclick="generateShorts()">
                    🎬 쇼츠 생성하기
                </button>
                
                <div class="loading" id="loadingSection">
                    <div class="loading-spinner"></div>
                    <div class="loading-text">쇼츠를 생성하고 있습니다... (약 1-2분 소요)</div>
                </div>
            </div>
        </div>

        <!-- 요금제 정보 -->
        <div class="pricing-info">
            <h3 class="pricing-title">💎 요금제 안내</h3>
            <div class="pricing-plans">
                <div class="pricing-plan">
                    <div class="plan-name">🆓 무료</div>
                    <div class="plan-price">무료</div>
                    <div class="plan-features">
                        월 10개 제한<br>
                        워터마크 포함<br>
                        기본 템플릿 2개
                    </div>
                </div>
                
                <div class="pricing-plan recommended">
                    <div class="plan-name">💎 프리미엄</div>
                    <div class="plan-price">$9.99/월</div>
                    <div class="plan-features">
                        무제한 생성<br>
                        워터마크 제거<br>
                        전체 템플릿 8개
                    </div>
                </div>
                
                <div class="pricing-plan">
                    <div class="plan-name">🏢 비즈니스</div>
                    <div class="plan-price">$29.99/월</div>
                    <div class="plan-features">
                        API 우선처리<br>
                        커스텀 워터마크<br>
                        전체 템플릿 10개
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 푸터 -->
    <div class="footer">
        <div class="footer-country">
            <span id="countryFlag">🇰🇷</span>
            <span id="countryName">대한민국</span>
        </div>
        <div class="footer-links">
            <div class="footer-left">
                <a href="/about">Korean Today 소개</a>
                <a href="/partnership">📰 언론사 제휴 등록</a>
                <a href="/advertise">광고</a>
                <a href="/business">비즈니스</a>
            </div>
            <div class="footer-right">
                <a href="/pricing" class="premium">🎬 쇼츠 프리미엄</a>
                <a href="/privacy">개인정보처리방침</a>
                <a href="/terms">약관</a>
                <a href="/help">고객센터</a>
            </div>
        </div>
        <div class="footer-copyright">
            © 2025 Korean Today. All rights reserved. | 세계 최초 뉴스→쇼츠 자동 생성 플랫폼
        </div>
    </div>

    <script>
        let selectedTemplate = 'breaking'; // 기본 선택
        
        // 지역별 로고 설정
        function setupLocalization() {
            const isKorean = navigator.language.startsWith('ko') || 
                           navigator.languages.some(lang => lang.startsWith('ko'));
            
            const logoKr = document.querySelector('.logo-kr');
            const logoEn = document.querySelector('.logo-en');
            const countryFlag = document.getElementById('countryFlag');
            const countryName = document.getElementById('countryName');
            
            if (isKorean) {
                logoKr.style.display = 'block';
                logoEn.style.display = 'none';
                countryFlag.textContent = '🇰🇷';
                countryName.textContent = '대한민국';
            } else {
                logoKr.style.display = 'none';
                logoEn.style.display = 'block';
                countryFlag.textContent = '🌍';
                countryName.textContent = 'Global';
            }
        }
        
        // 단계별 진행
        function activateStep(stepNumber) {
            document.querySelectorAll('.step').forEach(step => {
                step.classList.remove('active');
            });
            document.getElementById('step' + stepNumber).classList.add('active');
        }
        
        // API 키 입력 검증
        document.getElementById('openaiKey').addEventListener('input', function() {
            if (this.value.trim()) {
                activateStep(2);
            }
        });
        
        // 템플릿 선택
        document.querySelectorAll('.template-card').forEach(card => {
            card.addEventListener('click', function() {
                // 기존 선택 해제
                document.querySelectorAll('.template-card').forEach(c => {
                    c.classList.remove('selected');
                });
                
                // 새로운 선택
                this.classList.add('selected');
                selectedTemplate = this.dataset.template;
                
                // 프리미엄 템플릿 체크
                const isPremium = this.querySelector('.template-premium');
                if (isPremium && isPremium.textContent === 'PRO') {
                    alert('프리미엄 템플릿입니다. 업그레이드가 필요합니다.');
                } else if (isPremium && isPremium.textContent === 'BUSINESS') {
                    alert('비즈니스 템플릿입니다. 비즈니스 플랜이 필요합니다.');
                }
                
                activateStep(3);
            });
        });
        
        // 탭 전환
        document.querySelectorAll('.input-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                const targetTab = this.dataset.tab;
                
                // 탭 버튼 활성화
                document.querySelectorAll('.input-tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 탭 내용 표시
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById('tab-' + targetTab).classList.add('active');
            });
        });
        
        // 뉴스 입력 시 4단계 활성화
        document.querySelector('.news-textarea').addEventListener('input', function() {
            if (this.value.trim()) {
                activateStep(4);
            }
        });
        
        document.querySelector('.news-url-input').addEventListener('input', function() {
            if (this.value.trim()) {
                activateStep(4);
            }
        });
        
        // Korean Today 뉴스 로드
        async function loadKoreanTodayNews() {
            try {
                const response = await fetch('/api/news-sources/korean-today.php?limit=20');
                const data = await response.json();
                
                if (data.success && data.data) {
                    const select = document.getElementById('koreanTodaySelect');
                    select.innerHTML = '<option value="">최근 Korean Today 뉴스에서 선택...</option>';
                    
                    data.data.forEach(article => {
                        const option = document.createElement('option');
                        option.value = JSON.stringify({
                            title: article.title,
                            content: article.content,
                            url: article.url
                        });
                        option.textContent = article.title.substring(0, 60) + '...';
                        select.appendChild(option);
                    });
                } else {
                    console.error('뉴스 로드 실패:', data);
                }
            } catch (error) {
                console.error('뉴스 로드 실패:', error);
            }
        }
        
        // Korean Today 선택 시
        document.getElementById('koreanTodaySelect').addEventListener('change', function() {
            if (this.value) {
                activateStep(4);
            }
        });
        
        // 쇼츠 생성 함수
        async function generateShorts() {
            const openaiKey = document.getElementById('openaiKey').value.trim();
            
            if (!openaiKey) {
                alert('OpenAI API 키를 입력해주세요.');
                return;
            }
            
            // 뉴스 내용 가져오기
            let newsContent = '';
            const activeTab = document.querySelector('.input-tab.active').dataset.tab;
            
            if (activeTab === 'text') {
                newsContent = document.querySelector('.news-textarea').value.trim();
            } else if (activeTab === 'url') {
                const url = document.querySelector('.news-url-input').value.trim();
                if (!url) {
                    alert('뉴스 URL을 입력해주세요.');
                    return;
                }
                newsContent = 'URL: ' + url;
            } else if (activeTab === 'korean-today') {
                const selected = document.getElementById('koreanTodaySelect').value;
                if (!selected) {
                    alert('Korean Today 뉴스를 선택해주세요.');
                    return;
                }
                const newsData = JSON.parse(selected);
                newsContent = '제목: ' + newsData.title + '\n\n내용: ' + newsData.content;
            }
            
            if (!newsContent) {
                alert('뉴스 내용을 입력해주세요.');
                return;
            }
            
            // 생성 옵션 수집
            const options = {
                template: selectedTemplate,
                duration: document.querySelector('input[name="duration"]:checked').value,
                voiceover: document.getElementById('voiceover').checked,
                bgmusic: document.getElementById('bgmusic').checked,
                soundeffects: document.getElementById('soundeffects').checked,
                autoimage: document.getElementById('autoimage').checked,
                subtitles: document.getElementById('subtitles').checked,
                animations: document.getElementById('animations').checked,
                elevenlabsKey: document.getElementById('elevenlabsKey').value.trim(),
                imageKey: document.getElementById('imageKey').value.trim()
            };
            
            // 로딩 시작
            document.getElementById('generateBtn').disabled = true;
            document.getElementById('generateBtn').textContent = '생성 중...';
            document.getElementById('loadingSection').style.display = 'block';
            
            try {
                // 쇼츠 생성 API 호출
                const response = await fetch('/api/generate-shorts.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        openaiKey: openaiKey,
                        newsContent: newsContent,
                        options: options
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    // 성공 시 결과 페이지로 이동
                    window.location.href = '/shorts/result.php?id=' + result.videoId;
                } else {
                    alert('쇼츠 생성 실패: ' + result.error);
                }
                
            } catch (error) {
                console.error('쇼츠 생성 오류:', error);
                alert('쇼츠 생성 중 오류가 발생했습니다. 다시 시도해주세요.');
            } finally {
                // 로딩 종료
                document.getElementById('generateBtn').disabled = false;
                document.getElementById('generateBtn').textContent = '🎬 쇼츠 생성하기';
                document.getElementById('loadingSection').style.display = 'none';
            }
        }
        
        // 페이지 로드 시 초기화
        document.addEventListener('DOMContentLoaded', function() {
            setupLocalization();
            loadKoreanTodayNews();
        });
    </script>
</body>
</html>