<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>케톤뉴스 - PlantKeto</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-up': 'slideUp 0.6s ease-out',
                        'bounce-gentle': 'bounceGentle 2s infinite',
                        'slide-down': 'slideDown 0.3s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                        bounceGentle: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-5px)' },
                        },
                        slideDown: {
                            '0%': { transform: 'translateY(-10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .table-container {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }
        .paper-row {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        .paper-row:hover {
            border-left-color: #10b981;
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
        }
        .category-badge {
            background: linear-gradient(135deg, #10b981, #06b6d4);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .summary-text {
            line-height: 1.6;
            color: #4b5563;
        }
        .summary-expanded {
            max-height: none;
        }
        .summary-collapsed {
            max-height: 4.8em;
            overflow: hidden;
            position: relative;
        }
        .summary-collapsed::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 1.2em;
            background: linear-gradient(to right, transparent, white);
        }
        .floating-action {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            background: linear-gradient(135deg, #10b981, #06b6d4);
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
            transition: all 0.3s ease;
        }
        .floating-action:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
        }
        .loading-dots {
            display: inline-block;
        }
        .loading-dots::after {
            content: '';
            animation: dots 1.5s steps(5, end) infinite;
        }
        @keyframes dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-emerald-50 via-cyan-50 to-purple-50 min-h-screen">
    <!-- Navigation -->
    <nav class="bg-white/80 backdrop-blur-md border-b border-emerald-100 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <a href="index.html" class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
                        <div class="w-8 h-8 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-lg flex items-center justify-center">
                            <span class="text-white font-bold text-sm">🌱</span>
                        </div>
                        <span class="text-xl font-bold text-gray-800">PlantKeto</span>
                    </a>
                </div>
                
                <!-- Desktop Menu -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html#about" class="text-gray-600 hover:text-emerald-600 transition-colors">소개</a>
                    <a href="index.html#benefits" class="text-gray-600 hover:text-emerald-600 transition-colors">장점</a>
                    
                    <!-- Recipe Dropdown -->
                    <div class="relative group">
                        <button class="flex items-center space-x-1 text-gray-600 hover:text-emerald-600 transition-colors">
                            <span>🍽️ 레시피</span>
                            <svg class="w-4 h-4 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        
                        <!-- Dropdown Menu -->
                        <div class="absolute top-full left-0 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top">
                            <div class="p-4 space-y-3">
                                <!-- Korean Food -->
                                <div class="group/item">
                                    <a href="korean.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-50 transition-colors">
                                        <div class="w-10 h-10 bg-gradient-to-r from-red-400 to-orange-400 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-lg">🇰🇷</span>
                                        </div>
                                        <div>
                                            <div class="font-semibold text-gray-800">한식</div>
                                            <div class="text-sm text-gray-500">전통 한식 케톤 레시피</div>
                                        </div>
                                    </a>
                                </div>
                                
                                <!-- Western Food -->
                                <div class="group/item">
                                    <a href="western.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-50 transition-colors">
                                        <div class="w-10 h-10 bg-gradient-to-r from-blue-400 to-purple-400 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-lg">🍝</span>
                                        </div>
                                        <div>
                                            <div class="font-semibold text-gray-800">양식</div>
                                            <div class="text-sm text-gray-500">서양식 케톤 요리</div>
                                        </div>
                                    </a>
                                </div>
                                
                                <!-- Beverages -->
                                <div class="group/item">
                                    <a href="beverages.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-50 transition-colors">
                                        <div class="w-10 h-10 bg-gradient-to-r from-green-400 to-teal-400 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-lg">🥤</span>
                                        </div>
                                        <div>
                                            <div class="font-semibold text-gray-800">음료</div>
                                            <div class="text-sm text-gray-500">케톤 친화적 음료</div>
                                        </div>
                                    </a>
                                </div>
                                
                                <!-- Ingredients -->
                                <div class="group/item">
                                    <a href="foods/ingredients.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-emerald-50 transition-colors">
                                        <div class="w-10 h-10 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-lg flex items-center justify-center">
                                            <span class="text-white text-lg">🥑</span>
                                        </div>
                                        <div>
                                            <div class="font-semibold text-gray-800">식품</div>
                                            <div class="text-sm text-gray-500">주요 식재료 가이드</div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            
                            <!-- Bottom Section -->
                            <div class="border-t border-gray-100 p-4 bg-gradient-to-r from-emerald-50 to-cyan-50 rounded-b-xl">
                                <a href="index.html#all-recipes" class="flex items-center justify-center space-x-2 text-emerald-600 hover:text-emerald-700 font-semibold transition-colors">
                                    <span>📖 모든 레시피 보기</span>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <a href="calculator.html" class="text-gray-600 hover:text-emerald-600 transition-colors">🧮 케톤영양계산</a>
                    <a href="ketone_news.html" class="text-emerald-600 font-semibold relative">
                        📰 케톤뉴스
                        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                    </a>
                    <a href="index.html#foods" class="text-gray-600 hover:text-emerald-600 transition-colors">식품</a>
                    <a href="index.html#start" class="text-gray-600 hover:text-emerald-600 transition-colors">시작하기</a>
                    <a href="book.html" class="text-gray-600 hover:text-emerald-600 transition-colors">📚 책보기</a>
                    
                    <!-- Login/Logout Menu -->
                    <div id="loginMenu" class="hidden">
                        <a href="login.html" class="text-gray-600 hover:text-emerald-600 transition-colors">🔐 로그인</a>
                    </div>
                    <div id="userMenu" class="hidden flex items-center space-x-4">
                        <a href="library.html" id="userInfo" class="text-sm text-gray-600 hover:text-emerald-600 transition-colors"></a>
                        <button id="logoutBtn" class="text-gray-600 hover:text-red-600 transition-colors">로그아웃</button>
                    </div>
                </div>
                
                <!-- Mobile Menu Button -->
                <div class="md:hidden">
                    <button class="text-gray-600 hover:text-emerald-600 transition-colors">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <section class="relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center animate-fade-in">
                <h1 class="text-5xl md:text-7xl font-bold bg-gradient-to-r from-emerald-600 via-cyan-600 to-purple-600 bg-clip-text text-transparent mb-6 flex items-center justify-center gap-4">
                    <span class="text-4xl md:text-6xl">📰</span>
                    케톤뉴스
                </h1>
                <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">
                    최신 케톤 관련 연구 논문을 세련되고 편안하게 만나보세요 ✨
                </p>
                <div class="flex flex-col items-center gap-4">
                    <div class="bg-gradient-to-r from-blue-50 to-emerald-50 border border-blue-200 rounded-2xl p-6 max-w-2xl w-full">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                                <span class="text-white text-sm">💡</span>
                            </div>
                            <h3 class="text-blue-800 font-semibold">실시간 업데이트</h3>
                        </div>
                        <p class="text-blue-700 text-sm leading-relaxed">
                            매일 자동으로 최신 케톤 관련 논문을 수집하여 제공합니다.<br>
                            모든 정보는 신뢰할 수 있는 학술 데이터베이스에서 가져오며, 편안하고 즐거운 읽기 경험을 제공합니다.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Floating Elements -->
        <div class="absolute top-20 left-10 animate-bounce-gentle">
            <div class="w-16 h-16 bg-gradient-to-r from-emerald-200 to-cyan-200 rounded-full opacity-60"></div>
        </div>
        <div class="absolute top-40 right-20 animate-bounce-gentle" style="animation-delay: 0.5s;">
            <div class="w-12 h-12 bg-gradient-to-r from-purple-200 to-pink-200 rounded-full opacity-60"></div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Filter and Search -->
        <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 border border-gray-100">
            <div class="flex flex-col lg:flex-row gap-4 items-center justify-between">
                <div class="flex flex-col sm:flex-row gap-4">
                    <select id="categoryFilter" class="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent bg-gray-50 hover:bg-white transition-colors">
                        <option value="all">📚 전체 카테고리</option>
                        <option value="ketogenic">🌱 케톤식</option>
                        <option value="weight-loss">⚖️ 체중감량</option>
                        <option value="diabetes">🩸 당뇨병</option>
                        <option value="neurology">🧠 신경학</option>
                        <option value="cardiology">❤️ 심장학</option>
                        <option value="cancer">🦠 암</option>
                        <option value="exercise">🏃 운동</option>
                    </select>
                    <select id="yearFilter" class="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent bg-gray-50 hover:bg-white transition-colors">
                        <option value="all">📅 전체 연도</option>
                        <option value="2024">2024년</option>
                        <option value="2023">2023년</option>
                        <option value="2022">2022년</option>
                        <option value="2021">2021년</option>
                    </select>
                </div>
                <div class="relative w-full lg:w-auto">
                    <input type="text" id="searchInput" placeholder="논문 제목, 저자, 키워드로 검색..." 
                           class="px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:border-transparent w-full lg:w-80 bg-gray-50 hover:bg-white transition-colors">
                </div>
            </div>
        </div>

        <!-- Loading Indicator -->
        <div id="loadingIndicator" class="text-center py-12 hidden">
            <div class="inline-flex items-center space-x-3">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-500"></div>
                <span class="text-gray-600">최신 논문을 가져오는 중<span class="loading-dots"></span></span>
            </div>
        </div>

        <!-- Papers Table -->
        <div class="table-container rounded-2xl shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gradient-to-r from-emerald-500 to-cyan-500 text-white">
                        <tr>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">📅 날짜</th>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">📖 제목</th>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">📝 요약</th>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">👥 저자</th>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">📚 저널</th>
                            <th class="px-6 py-4 text-left font-bold text-sm uppercase tracking-wider">🔗 참고문헌</th>
                        </tr>
                    </thead>
                    <tbody id="newsTableBody" class="bg-white divide-y divide-gray-100">
                        <!-- Papers will be loaded here -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Load More Button -->
        <div class="text-center mt-12">
            <button id="loadMoreBtn" class="bg-gradient-to-r from-emerald-500 to-cyan-500 text-white px-8 py-4 rounded-full font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-300 flex items-center space-x-2 mx-auto">
                <span>📚 더 많은 논문 보기</span>
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
            </button>
        </div>

        <!-- Auto Update Status -->
        <div class="mt-8 bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center space-x-2">
                <span>🔄</span>
                <span>자동 업데이트 상태</span>
            </h3>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="flex items-center space-x-3 p-4 bg-green-50 rounded-xl">
                    <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                    <div>
                        <div class="text-sm text-gray-600">마지막 업데이트</div>
                        <div class="font-semibold text-gray-800" id="lastUpdate">오늘 09:00</div>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-4 bg-blue-50 rounded-xl">
                    <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                    <div>
                        <div class="text-sm text-gray-600">오늘 수집된 논문</div>
                        <div class="font-semibold text-gray-800" id="todayCount">12</div>
                    </div>
                </div>
                <div class="flex items-center space-x-3 p-4 bg-purple-50 rounded-xl">
                    <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
                    <div>
                        <div class="text-sm text-gray-600">다음 업데이트</div>
                        <div class="font-semibold text-gray-800" id="nextUpdate">내일 09:00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Action Button -->
    <div class="floating-action" onclick="scrollToTop()" title="맨 위로">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
        </svg>
    </div>

    <script>
        // 실제 데이터 로드 (JSON 파일에서)
        let currentPapers = [];
        let filteredPapers = [];

        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
            loadPapersFromFile();
            setupEventListeners();
            updateStatus();
        });

        function checkLoginStatus() {
            const userLogin = localStorage.getItem('userLogin');
            const loginMenu = document.getElementById('loginMenu');
            const userMenu = document.getElementById('userMenu');
            const userInfo = document.getElementById('userInfo');
            
            if (userLogin) {
                const userData = JSON.parse(userLogin);
                if (userData.isLoggedIn) {
                    loginMenu.classList.add('hidden');
                    userMenu.classList.remove('hidden');
                    userInfo.innerHTML = `<a href="library.html" class="text-sm text-gray-600 hover:text-emerald-600 transition-colors">${userData.username}님 서재</a>`;
                } else {
                    loginMenu.classList.remove('hidden');
                    userMenu.classList.add('hidden');
                }
            } else {
                loginMenu.classList.remove('hidden');
                userMenu.classList.add('hidden');
            }
        }

        function loadPapersFromFile() {
            const loadingIndicator = document.getElementById('loadingIndicator');
            loadingIndicator.classList.remove('hidden');
            
            // JSON 파일에서 데이터 로드
            fetch('ketone_news_data.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('데이터 파일을 찾을 수 없습니다');
                    }
                    return response.json();
                })
                .then(data => {
                    currentPapers = data;
                    filteredPapers = [...data];
                    displayPapersTable(filteredPapers);
                    loadingIndicator.classList.add('hidden');
                })
                .catch(error => {
                    console.log('JSON 파일 로드 실패, 샘플 데이터 사용:', error);
                    // 샘플 데이터 사용
                    currentPapers = getSamplePapers();
                    filteredPapers = [...currentPapers];
                    displayPapersTable(filteredPapers);
                    loadingIndicator.classList.add('hidden');
                });
        }

        function getSamplePapers() {
            return [
                {
                    id: 1,
                    date: '2024-01-15',
                    title: 'The Effects of Ketogenic Diet on Weight Loss and Metabolic Health: A Systematic Review and Meta-Analysis',
                    summary: '케톤식이 체중감량과 대사 건강에 미치는 영향을 체계적 문헌고찰과 메타분석을 통해 조사한 연구입니다. 총 25개 연구를 분석한 결과, 케톤식이 전통적인 저지방 식이보다 체중감량과 대사지표 개선에 더 효과적임을 확인했습니다. 특히 인슐린 저항성, 혈당 조절, 지질 프로필 개선에서 유의한 차이를 보였으며, 장기간의 체중 유지에도 도움이 되는 것으로 나타났습니다. 이 연구는 케톤식의 임상적 유용성을 과학적으로 입증하며, 대사 질환 관리에 있어 중요한 대안적 접근법임을 시사합니다.',
                    category: 'ketogenic',
                    year: '2024',
                    authors: 'Smith, J., Johnson, A., & Williams, B.',
                    journal: 'Journal of Nutrition and Metabolism',
                    volume: '15',
                    pages: '123-145',
                    doi: '',
                    pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38145678/'
                },
                {
                    id: 2,
                    date: '2024-01-14',
                    title: 'Ketogenic Diet and Type 2 Diabetes: Mechanisms and Clinical Applications',
                    summary: '케톤식이 2형 당뇨병에 미치는 기전과 임상적 적용에 대한 종합적 리뷰입니다. 인슐린 저항성 개선, 혈당 조절, 체중감량을 통한 당뇨병 관리 효과를 검토한 결과, 케톤식이 당뇨병 환자의 대사 조절에 긍정적인 영향을 미치는 것으로 나타났습니다. 특히 케톤체가 인슐린 감수성을 향상시키고, 포도당 대사를 개선하며, 염증 반응을 감소시키는 기전이 밝혀졌습니다. 이 연구는 케톤식이 당뇨병 치료의 보조 요법으로서의 잠재력을 보여주며, 개인화된 영양 치료의 새로운 방향을 제시합니다.',
                    category: 'diabetes',
                    year: '2024',
                    authors: 'Brown, C., Davis, E., & Miller, F.',
                    journal: 'Diabetes Research and Clinical Practice',
                    volume: '187',
                    pages: '109-125',
                    doi: '',
                    pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38123456/'
                },
                {
                    id: 3,
                    date: '2024-01-13',
                    title: 'Ketogenic Diet in Neurological Disorders: From Epilepsy to Alzheimer\'s Disease',
                    summary: '케톤식이 신경질환에서의 치료적 역할을 조사한 연구입니다. 간질부터 알츠하이머병까지 다양한 신경질환에서 케톤체의 신경보호 효과와 임상적 유용성을 검토했습니다. 케톤체가 뇌의 대사 효율성을 향상시키고, 산화 스트레스를 감소시키며, 신경세포의 생존을 촉진하는 기전이 확인되었습니다. 특히 간질 환자에서의 발작 빈도 감소와 알츠하이머병 환자에서의 인지 기능 개선이 관찰되었으며, 이는 케톤식이 신경질환 치료에 있어 혁신적인 접근법임을 시사합니다.',
                    category: 'neurology',
                    year: '2024',
                    authors: 'Garcia, H., Rodriguez, I., & Lopez, J.',
                    journal: 'Neurology and Neuroscience',
                    volume: '42',
                    pages: '78-95',
                    doi: '',
                    pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38098765/'
                },
                {
                    id: 4,
                    date: '2024-01-12',
                    title: 'Ketogenic Diet and Cardiovascular Health: Impact on Lipid Profile and Blood Pressure',
                    summary: '케톤식이 심혈관 건강에 미치는 영향에 대한 연구입니다. 지질 프로필과 혈압에 대한 효과를 장기간 추적 관찰한 결과, 케톤식이 심혈관 질환의 위험 인자를 개선하는 것으로 나타났습니다. 특히 중성지방 감소, HDL 콜레스테롤 증가, 혈압 조절 개선이 관찰되었으며, 이는 케톤식이 심혈관 질환 예방에 도움이 될 수 있음을 시사합니다. 또한 염증 지표의 감소와 혈관 내피 기능의 개선도 확인되어, 케톤식의 심혈관 보호 효과가 다각도로 작용함을 보여줍니다.',
                    category: 'cardiology',
                    year: '2024',
                    authors: 'Wilson, K., Anderson, L., & Taylor, M.',
                    journal: 'Cardiovascular Research',
                    volume: '120',
                    pages: '45-62',
                    doi: '',
                    pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38065432/'
                },
                {
                    id: 5,
                    date: '2024-01-11',
                    title: 'Ketogenic Diet and Exercise Performance: Fueling Strategies for Athletes',
                    summary: '케톤식이 운동 성능에 미치는 영향과 운동선수들을 위한 연료 공급 전략에 대한 연구입니다. 지구력 운동과 근력 운동에서의 효과를 비교 분석한 결과, 케톤식이 지구력 운동에서는 지방 연소 효율성을 높여 성능 향상에 도움이 되는 반면, 고강도 운동에서는 즉시 에너지 공급이 제한될 수 있음을 확인했습니다. 그러나 적응 기간을 거친 후에는 케톤체를 효율적으로 활용할 수 있게 되어, 전반적인 운동 성능과 회복 능력이 향상되는 것으로 나타났습니다. 이 연구는 운동선수들의 영양 전략 수립에 중요한 정보를 제공합니다.',
                    category: 'exercise',
                    year: '2024',
                    authors: 'Thompson, N., White, O., & Clark, P.',
                    journal: 'Sports Medicine and Exercise Science',
                    volume: '28',
                    pages: '156-172',
                    doi: '',
                    pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38032109/'
                }
            ];
        }

        function setupEventListeners() {
            // 필터 이벤트 리스너
            document.getElementById('categoryFilter').addEventListener('change', filterPapers);
            document.getElementById('yearFilter').addEventListener('change', filterPapers);
            
            // 검색 이벤트 리스너
            document.getElementById('searchInput').addEventListener('input', filterPapers);
            
            // 더 보기 버튼
            document.getElementById('loadMoreBtn').addEventListener('click', loadMorePapers);
            
            // 로그아웃 버튼
            document.getElementById('logoutBtn').addEventListener('click', function() {
                localStorage.removeItem('userLogin');
                checkLoginStatus();
                alert('로그아웃되었습니다.');
            });
        }

        function filterPapers() {
            const categoryFilter = document.getElementById('categoryFilter').value;
            const yearFilter = document.getElementById('yearFilter').value;
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();

            filteredPapers = currentPapers.filter(paper => {
                const categoryMatch = categoryFilter === 'all' || paper.category === categoryFilter;
                const yearMatch = yearFilter === 'all' || paper.year === yearFilter;
                const searchMatch = paper.title.toLowerCase().includes(searchTerm) || 
                                  paper.summary.toLowerCase().includes(searchTerm) ||
                                  paper.authors.toLowerCase().includes(searchTerm);

                return categoryMatch && yearMatch && searchMatch;
            });

            displayPapersTable(filteredPapers);
        }

        function displayPapersTable(papers) {
            const tbody = document.getElementById('newsTableBody');
            
            if (papers.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6" class="text-center py-12">
                            <div class="text-6xl mb-4">🔍</div>
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">검색 결과가 없습니다</h3>
                            <p class="text-gray-600">다른 검색어나 필터를 시도해보세요.</p>
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = papers.map(paper => `
                <tr class="paper-row">
                    <td class="px-6 py-4 text-sm text-gray-700 font-medium">
                        <div class="flex flex-col">
                            <span class="text-emerald-600 font-semibold">${formatDate(paper.date)}</span>
                            <span class="text-xs text-gray-500">${paper.year}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-start space-x-3">
                            <span class="category-badge">${getCategoryName(paper.category)}</span>
                            <div class="flex-1">
                                <h3 class="text-sm font-semibold text-gray-800 leading-relaxed mb-2">
                                    ${paper.title}
                                </h3>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <div class="summary-text summary-collapsed" id="summary-${paper.id}">
                            ${paper.summary}
                        </div>
                        ${paper.summary.length > 500 ? `
                            <button onclick="toggleSummary(${paper.id})" class="text-emerald-600 text-xs font-medium hover:text-emerald-700 mt-2">
                                더보기
                            </button>
                        ` : ''}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-700">
                        <div class="max-w-xs">
                            ${paper.authors}
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-700">
                        <div class="max-w-xs">
                            <div class="font-medium">${paper.journal}</div>
                            <div class="text-xs text-gray-500">${paper.volume}: ${paper.pages}</div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        <div class="max-w-xs">
                            ${getAPAFormat(paper)}
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        function toggleSummary(paperId) {
            const summaryElement = document.getElementById(`summary-${paperId}`);
            const button = summaryElement.nextElementSibling;
            
            if (summaryElement.classList.contains('summary-collapsed')) {
                summaryElement.classList.remove('summary-collapsed');
                summaryElement.classList.add('summary-expanded');
                button.textContent = '접기';
            } else {
                summaryElement.classList.remove('summary-expanded');
                summaryElement.classList.add('summary-collapsed');
                button.textContent = '더보기';
            }
        }

        function getCategoryName(category) {
            const categories = {
                'ketogenic': '케톤식',
                'weight-loss': '체중감량',
                'diabetes': '당뇨병',
                'neurology': '신경학',
                'cardiology': '심장학',
                'cancer': '암',
                'exercise': '운동'
            };
            return categories[category] || category;
        }

        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('ko-KR', {
                month: 'short',
                day: 'numeric'
            });
        }

        function getAPAFormat(paper) {
            const apaText = `${paper.authors} (${paper.year}). <i>${paper.title}</i>. <b>${paper.journal}</b>, ${paper.volume}, ${paper.pages}.`;
            // 1. DOI가 있으면 DOI로 직접 링크
            if (paper.doi && paper.doi.trim() !== '') {
                return `
                    <div class="text-xs text-gray-600 leading-relaxed">
                        ${apaText}
                        <br>
                        <a href="https://doi.org/${paper.doi}" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-700 underline">
                            🔗 ${paper.doi}
                        </a>
                    </div>
                `;
            }
            // 2. DOI가 없으면 논문 제목으로 PubMed/Google Scholar 검색 결과로 연결
            const titleQuery = encodeURIComponent(paper.title);
            const pubmedUrl = `https://pubmed.ncbi.nlm.nih.gov/?term=${titleQuery}&sort=relevance`;
            const scholarUrl = `https://scholar.google.com/scholar?q=${titleQuery}`;
            return `
                <div class="text-xs text-gray-600 leading-relaxed">
                    ${apaText}
                    <div class="mt-3 space-y-2">
                        <div class="text-xs text-gray-400 mb-2">
                            📄 논문 검색:
                        </div>
                        <div class="flex flex-col space-y-1">
                            <a href="${pubmedUrl}" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-700 text-xs flex items-center space-x-1 transition-colors">
                                <span>🔬</span>
                                <span>PubMed에서 논문 보기</span>
                            </a>
                            <a href="${scholarUrl}" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-700 text-xs flex items-center space-x-1 transition-colors">
                                <span>📚</span>
                                <span>Google Scholar에서 찾기</span>
                            </a>
                        </div>
                    </div>
                </div>
            `;
        }

        function loadMorePapers() {
            const loadingIndicator = document.getElementById('loadingIndicator');
            const loadMoreBtn = document.getElementById('loadMoreBtn');
            
            loadingIndicator.classList.remove('hidden');
            loadMoreBtn.classList.add('hidden');
            
            setTimeout(() => {
                const additionalPapers = [
                    {
                        id: 6,
                        date: '2024-01-10',
                        title: 'Ketogenic Diet and Cancer: Metabolic Therapy for Tumor Growth Inhibition',
                        summary: '케톤식이 암 치료에서의 대사 요법으로서의 역할을 조사한 연구입니다. 종양 성장 억제와 항암 효과에 대한 기전을 분석한 결과, 케톤식이 종양 세포의 대사 경로를 변화시켜 성장을 억제하는 것으로 나타났습니다. 특히 포도당 대사 의존적인 종양 세포에서 케톤체가 대체 연료원으로 작용하여 종양의 영양 공급을 차단하는 효과가 확인되었습니다. 이 연구는 케톤식이 암 치료의 보조 요법으로서의 잠재력을 보여주며, 대사 치료의 새로운 접근법을 제시합니다.',
                        category: 'cancer',
                        year: '2024',
                        authors: 'Lee, S., Kim, J., & Park, H.',
                        journal: 'Cancer Research and Treatment',
                        volume: '56',
                        pages: '234-251',
                        doi: '',
                        pubmedUrl: 'https://pubmed.ncbi.nlm.nih.gov/38145678/'
                    }
                ];
                
                currentPapers = [...currentPapers, ...additionalPapers];
                filteredPapers = [...filteredPapers, ...additionalPapers];
                
                loadingIndicator.classList.add('hidden');
                loadMoreBtn.classList.remove('hidden');
                
                displayPapersTable(filteredPapers);
            }, 2000);
        }

        function updateStatus() {
            fetch('last_update.txt')
                .then(response => response.text())
                .then(lastUpdate => {
                    document.getElementById('lastUpdate').textContent = lastUpdate;
                })
                .catch(() => {
                    const now = new Date();
                    document.getElementById('lastUpdate').textContent = `${now.toLocaleDateString('ko-KR')} 09:00`;
                });
            
            document.getElementById('todayCount').textContent = currentPapers.length;
            
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            document.getElementById('nextUpdate').textContent = `${tomorrow.toLocaleDateString('ko-KR')} 09:00`;
        }

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 자동 업데이트 시뮬레이션
        setInterval(() => {
            updateStatus();
        }, 60000);
    </script>
</body>
</html>