<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HILLSTONE PARTNERS - 블록체인·NFT·M&A 전문 기업</title>

    <meta name="description" content="23년간의 M&A 전문성을 바탕으로 블록체인·NFT·메타버스 투자를 선도하는 힐스톤파트너스">

    

    <!-- Tailwind CSS -->

    <script src="https://cdn.tailwindcss.com"></script>

    

    <!-- Font Awesome -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">

    

    <!-- Google Fonts -->

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    

    <style>

        body {

            font-family: 'Inter', sans-serif;

            background: #ffffff;

            overflow-x: hidden !important;

        }

        

        /* PRESSKIT 관련 스타일 */

        .article-card {

            transition: all 0.3s ease;

            border: 1px solid #e5e7eb;

        }

        

        .article-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);

            border-color: #f97316;

        }

        

        /* 커스텀 드롭다운 스타일 */

        #custom-year-filter .fa-chevron-down {

            transition: transform 0.2s ease;

        }

        

        #year-options {

            max-height: 300px;

            overflow-y: auto;

            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);

        }

        

        .year-option {

            transition: all 0.15s ease;

        }

    </style>

</head>

<body>

    <!-- Navigation -->

    <nav class="bg-black text-white fixed w-full z-50 shadow-lg">

        <div class="container mx-auto px-4">

            <div class="flex justify-between items-center py-4">

                <div class="text-2xl font-bold">HILLSTONE PARTNERS</div>

                

                <!-- Desktop Menu -->

                <div class="hidden md:flex space-x-8">

                    <a href="#blockchain" class="hover:text-orange-400 transition-colors">BLOCKCHAIN</a>

                    <a href="#vision" class="hover:text-orange-400 transition-colors">VISION</a>

                    <a href="#portfolio" class="hover:text-orange-400 transition-colors">PORTFOLIO</a>

                    <a href="#team" class="hover:text-orange-400 transition-colors">TEAM</a>

                    <a href="#presskit" class="hover:text-orange-400 transition-colors">PRESSKIT</a>

                    <a href="#contact" class="hover:text-orange-400 transition-colors">CONTACT</a>

                </div>

                

                <!-- Mobile Menu Button -->

                <button class="md:hidden mobile-menu-button">

                    <i class="fas fa-bars text-xl"></i>

                </button>

            </div>

            

            <!-- Mobile Menu -->

            <div class="mobile-menu hidden md:hidden pb-4">

                <a href="#blockchain" class="block py-2 hover:text-orange-400">BLOCKCHAIN</a>

                <a href="#vision" class="block py-2 hover:text-orange-400">VISION</a>

                <a href="#portfolio" class="block py-2 hover:text-orange-400">PORTFOLIO</a>

                <a href="#team" class="block py-2 hover:text-orange-400">TEAM</a>

                <a href="#presskit" class="block py-2 hover:text-orange-400">PRESSKIT</a>

                <a href="#contact" class="block py-2 hover:text-orange-400">CONTACT</a>

            </div>

        </div>

    </nav>


    <!-- Hero Section -->

    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-gray-900 to-black text-white">

        <div class="container mx-auto px-4 text-center">

            <h1 class="text-6xl md:text-8xl font-black mb-6 tracking-tight">

                HILLSTONE<br>

                <span class="text-orange-500">PARTNERS</span>

            </h1>

            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed">

                23년간의 M&A 전문성을 바탕으로<br>

                블록체인·NFT·메타버스 투자를 선도합니다

            </p>

            <a href="#blockchain" class="inline-block bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-300 transform hover:scale-105">

                더 알아보기

            </a>

        </div>

    </section>


    <!-- PRESSKIT Section -->

    <section id="presskit" class="py-20 bg-white">

        <div class="container mx-auto px-4">

            <div class="text-center mb-16">

                <h2 class="text-5xl md:text-6xl font-black text-black tracking-tight mb-4">PRESSKIT</h2>

                <div class="w-24 h-1 bg-orange-500 mx-auto mb-8"></div>

                <p class="text-xl text-gray-600 font-light max-w-3xl mx-auto leading-relaxed mb-12">언론 보도 자료와 미디어 아카이브</p>

                

                <!-- 필터 및 검색 -->

                <div class="flex flex-col md:flex-row gap-4 mb-6">

                    <!-- 연도 필터 (커스텀 드롭다운) -->

                    <div class="relative">

                        <div id="custom-year-filter" class="bg-white border border-gray-300 rounded-lg px-4 py-3 pr-10 text-gray-900 cursor-pointer hover:border-orange-500 transition-all select-none">

                            <span id="current-year-text">전체 연도</span>

                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">

                                <i class="fas fa-chevron-down text-sm"></i>

                            </div>

                        </div>

                        

                        <!-- 드롭다운 옵션들 -->

                        <div id="year-options" class="hidden absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="">전체 연도</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2025">2025</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2024">2024</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2023">2023</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2022">2022</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2021">2021</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2020">2020</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2019">2019</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2018">2018</div>

                        </div>

                        

                        <!-- 숨겨진 실제 select -->

                        <select id="year-filter" class="hidden">

                            <option value="">전체 연도</option>

                            <option value="2025">2025</option>

                            <option value="2024">2024</option>

                            <option value="2023">2023</option>

                            <option value="2022">2022</option>

                            <option value="2021">2021</option>

                            <option value="2020">2020</option>

                            <option value="2019">2019</option>

                            <option value="2018">2018</option>

                        </select>

                    </div>

                </div>

                

                <!-- 결과 카운터 -->

                <div class="text-sm text-gray-500 mb-6">

                    <span id="results-count">로딩 중...</span>

                </div>

            </div>

            

            <!-- 로딩 인디케이터 -->

            <div id="loading-indicator" class="hidden text-center py-8">

                <i class="fas fa-spinner fa-spin text-2xl text-orange-500"></i>

                <p class="mt-2 text-gray-600">로딩 중...</p>

            </div>

            

            <!-- 기사 컨테이너 -->

            <div id="articles-container" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">

                <!-- 기사들이 여기에 동적으로 추가됩니다 -->

            </div>

            

            <!-- 페이지네이션 -->

            <div id="pagination-container" class="flex justify-center space-x-2">

                <!-- 페이지네이션 버튼들이 여기에 동적으로 추가됩니다 -->

            </div>

        </div>

    </section>


    <!-- Contact Section -->

    <section id="contact" class="py-20 bg-black text-white">

        <div class="container mx-auto px-4">

            <div class="text-center mb-16">

                <h2 class="text-5xl md:text-6xl font-black tracking-tight mb-4">CONTACT</h2>

                <div class="w-24 h-1 bg-orange-500 mx-auto mb-8"></div>

                <p class="text-xl font-light max-w-3xl mx-auto leading-relaxed">파트너십 문의</p>

            </div>

            

            <div class="max-w-2xl mx-auto">

                <div class="bg-gray-900 rounded-2xl p-8">

                    <h3 class="text-2xl font-bold mb-6">힐스톤 블록체인 센터</h3>

                    <div class="space-y-4">

                        <div class="flex items-center">

                            <i class="fas fa-envelope text-orange-500 mr-4"></i>

                            <span>harhie@gmail.com</span>

                        </div>

                        <div class="flex items-center">

                            <i class="fas fa-map-marker-alt text-orange-500 mr-4"></i>

                            <span>서울특별시 강남구</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- Modals -->

    <!-- 사진 모달 -->

    <div id="photo-content-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">

        <div class="bg-white rounded-lg max-w-4xl w-full max-h-full overflow-y-auto">

            <div class="relative">

                <button id="close-photo-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">

                    <i class="fas fa-times text-xl"></i>

                </button>

                <div class="p-6">

                    <img id="photo-modal-image" src="" alt="" class="w-full max-h-96 object-contain rounded-lg mb-4">

                    <div class="text-center">

                        <p class="text-sm text-gray-500 mb-2">

                            <span id="photo-modal-media"></span> · <span id="photo-modal-date"></span>

                        </p>

                        <p id="photo-modal-summary" class="text-gray-700"></p>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- 영상 모달 -->

    <div id="video-content-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">

        <div class="bg-white rounded-lg max-w-4xl w-full max-h-full overflow-y-auto">

            <div class="relative">

                <button id="close-video-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">

                    <i class="fas fa-times text-xl"></i>

                </button>

                <div class="p-6">

                    <video id="video-modal-player" controls class="w-full max-h-96 rounded-lg mb-4">

                        <source id="video-modal-source" src="" type="video/mp4">

                        브라우저가 비디오를 지원하지 않습니다.

                    </video>

                    <div class="text-center">

                        <p class="text-sm text-gray-500 mb-2">

                            <span id="video-modal-media"></span> · <span id="video-modal-date"></span>

                        </p>

                        <p id="video-modal-summary" class="text-gray-700 mb-4"></p>

                        <a id="video-modal-link" href="#" target="_blank" class="text-orange-500 hover:text-orange-600">

                            원본 기사 보기 →

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- JavaScript -->

    <script src="js/main.js"></script>

</body>

</html>

// Main JavaScript for Hillstone Partners Website


document.addEventListener('DOMContentLoaded', function() {

    console.log('DOM Content Loaded - Starting initialization');

    

    // Initialize all features

    initMobileMenu();

    initSmoothScrolling();

    

    // PRESSKIT 초기화

    try {

        initPresskit();

    } catch (error) {

        console.error('Presskit initialization failed:', error);

    }

    

    // 추가 안전장치: 3초 후 재시도

    setTimeout(() => {

        const articlesContainer = document.getElementById('articles-container');

        if (articlesContainer && articlesContainer.innerHTML.trim() === '') {

            console.log('PRESSKIT 내용이 비어있음, 재시도...');

            try {

                initPresskit();

            } catch (error) {

                console.error('PRESSKIT 재시도 실패:', error);

            }

        }

    }, 3000);

    

    console.log('Hillstone Partners website loaded successfully');

});


// Mobile Menu Toggle

function initMobileMenu() {

    const mobileMenuButton = document.querySelector('.mobile-menu-button');

    const mobileMenu = document.querySelector('.mobile-menu');

    

    if (mobileMenuButton && mobileMenu) {

        mobileMenuButton.addEventListener('click', function() {

            mobileMenu.classList.toggle('hidden');

            

            // Toggle hamburger icon

            const icon = mobileMenuButton.querySelector('i');

            if (mobileMenu.classList.contains('hidden')) {

                icon.classList.remove('fa-times');

                icon.classList.add('fa-bars');

            } else {

                icon.classList.remove('fa-bars');

                icon.classList.add('fa-times');

            }

        });

    }

}


// Smooth Scrolling for Navigation Links

function initSmoothScrolling() {

    const navLinks = document.querySelectorAll('a[href^="#"]');

    

    navLinks.forEach(link => {

        link.addEventListener('click', function(e) {

            e.preventDefault();

            

            const targetId = this.getAttribute('href');

            const targetSection = document.querySelector(targetId);

            

            if (targetSection) {

                const headerOffset = 80;

                const elementPosition = targetSection.offsetTop;

                const offsetPosition = elementPosition - headerOffset;

                

                window.scrollTo({

                    top: offsetPosition,

                    behavior: 'smooth'

                });

            }

        });

    });

}


// ============================================================

// PRESSKIT Section Functions

// ============================================================


// PRESSKIT 전역 변수

let presskitData = {

    articles: [],

    currentPage: 1,

    itemsPerPage: 10,

    totalItems: 0,

    totalPages: 0,

    currentFilter: { year: '', search: '' },

    isEditing: false,

    editingId: null

};


// PRESSKIT 초기화

function initPresskit() {

    console.log('🚀 Initializing Presskit...');

    

    // DOM 요소 확인

    const presskitSection = document.getElementById('presskit');

    if (!presskitSection) {

        console.error('❌ Presskit section not found');

        return;

    }

    console.log('✅ Presskit section found');

    

    // 필수 요소들이 모두 존재하는지 확인

    const requiredElements = [

        'custom-year-filter',

        'year-options', 

        'current-year-text',

        'year-filter',

        'articles-container'

    ];

    

    const elementStatus = {};

    requiredElements.forEach(id => {

        const element = document.getElementById(id);

        elementStatus[id] = !!element;

        if (element) {

            console.log(`✅ ${id}: found`);

        } else {

            console.error(`❌ ${id}: NOT found`);

        }

    });

    

    const missingElements = requiredElements.filter(id => !document.getElementById(id));

    if (missingElements.length > 0) {

        console.error('❌ Missing required elements:', missingElements);

        // 일부 요소가 없어도 계속 진행

    }

    

    try {

        // 이벤트 리스너 설정

        console.log('🔧 Setting up event listeners...');

        setupPresskitEventListeners();

        setupContentModalListeners();

        

        // 초기 데이터 로드

        console.log('📊 Loading initial data...');

        loadArticles();

        

        console.log('✅ Presskit initialized successfully');

    } catch (error) {

        console.error('❌ Error initializing Presskit:', error);

        

        // 에러가 발생해도 최소한의 내용 표시

        const container = document.getElementById('articles-container');

        if (container) {

            container.innerHTML = `

                <div class="text-center py-12 bg-gray-50 rounded-lg">

                    <i class="fas fa-exclamation-triangle text-4xl text-red-400 mb-4"></i>

                    <h3 class="text-lg font-medium text-gray-900 mb-2">로딩 중 오류가 발생했습니다</h3>

                    <p class="text-gray-500">페이지를 새로고침해주세요.</p>

                    <button onclick="initPresskit()" class="mt-4 px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">

                        다시 시도

                    </button>

                </div>

            `;

        }

    }

}


// 이벤트 리스너 설정

function setupPresskitEventListeners() {

    // 커스텀 연도 필터 설정

    setupCustomYearFilter();

}


// 커스텀 연도 필터 설정

function setupCustomYearFilter() {

    console.log('Setting up custom year filter...');

    

    const customFilter = document.getElementById('custom-year-filter');

    const yearOptions = document.getElementById('year-options');

    const currentYearText = document.getElementById('current-year-text');

    const hiddenSelect = document.getElementById('year-filter');

    

    console.log('Filter elements found:', {

        customFilter: !!customFilter,

        yearOptions: !!yearOptions,  

        currentYearText: !!currentYearText,

        hiddenSelect: !!hiddenSelect

    });

    

    if (!customFilter || !yearOptions || !currentYearText || !hiddenSelect) {

        console.log('Some filter elements not found, skipping setup');

        return;

    }

    

    const chevronIcon = customFilter.querySelector('.fa-chevron-down');

    

    let currentValue = '';

    let isOpen = false;

    

    // 드롭다운 토글

    customFilter.addEventListener('click', (e) => {

        e.stopPropagation();

        toggleDropdown();

    });

    

    function toggleDropdown() {

        if (isOpen) {

            closeDropdown();

        } else {

            openDropdown();

        }

    }

    

    function openDropdown() {

        isOpen = true;

        yearOptions.classList.remove('hidden');

        customFilter.setAttribute('aria-expanded', 'true');

        

        // 아이콘 회전

        if (chevronIcon) {

            chevronIcon.style.transform = 'rotate(180deg)';

        }

        

        // 보더 색상 변경 (활성화 상태)

        customFilter.classList.add('border-orange-500');

        customFilter.classList.remove('border-gray-300');

    }

    

    function closeDropdown() {

        isOpen = false;

        yearOptions.classList.add('hidden');

        customFilter.setAttribute('aria-expanded', 'false');

        

        // 아이콘 원위치

        if (chevronIcon) {

            chevronIcon.style.transform = 'rotate(0deg)';

        }

        

        // 보더 색상 원위치

        customFilter.classList.remove('border-orange-500');

        customFilter.classList.add('border-gray-300');

    }

    

    // 옵션 선택

    const optionElements = yearOptions.querySelectorAll('.year-option');

    optionElements.forEach((option, index) => {

        option.addEventListener('click', (e) => {

            e.stopPropagation();

            selectOption(option);

        });

    });

    

    function selectOption(option) {

        const value = option.getAttribute('data-value');

        const text = option.textContent;

        

        console.log('옵션 선택됨:', { value, text });

        

        // 모든 옵션의 선택 상태 제거

        optionElements.forEach(opt => {

            opt.classList.remove('bg-orange-50', 'text-orange-600');

            opt.setAttribute('aria-selected', 'false');

        });

        

        // 선택된 옵션 표시

        option.classList.add('bg-orange-50', 'text-orange-600');

        option.setAttribute('aria-selected', 'true');

        

        // UI 업데이트

        currentYearText.textContent = text;

        currentValue = value;

        

        // 숨겨진 select 업데이트

        hiddenSelect.value = value;

        console.log('숨겨진 select 값 업데이트됨:', hiddenSelect.value);

        

        // 드롭다운 닫기

        closeDropdown();

        

        // 필터 적용

        handleFilter();

        

        // 포커스를 드롭다운 버튼으로 되돌리기

        customFilter.focus();

    }

    

    // 외부 클릭 시 드롭다운 닫기

    document.addEventListener('click', (e) => {

        if (!customFilter.contains(e.target) && !yearOptions.contains(e.target)) {

            closeDropdown();

        }

    });

}


// 기사 데이터 로드

async function loadArticles(page = 1) {

    try {

        showLoading(true);

        

        const { year, search } = presskitData.currentFilter;

        

        console.log('기사 로드 시작...');

        console.log('현재 필터:', presskitData.currentFilter);

        

        // 정적 샘플 데이터

        const sampleArticles = [

            {

                id: "1",

                content_type: "기사",

                article_url: "https://example.com/article1",

                media_name: "한국경제신문",

                published_date: "2024-12-15T09:00:00Z",

                title: "힐스톤파트너스, 2024년 블록체인 투자 성과 발표",

                summary: "힐스톤파트너스가 2024년 한 해 동안의 블록체인 투자 성과를 발표했습니다. DeFi 섹터를 중심으로 한 투자 포트폴리오가 성공적인 결과를 보였다고 밝혔습니다.",

                year: 2024,

                image_url: "",

                video_url: ""

            },

            {

                id: "2", 

                content_type: "사진",

                article_url: "https://example.com/photo1",

                media_name: "매일경제",

                published_date: "2024-11-20T14:30:00Z",

                title: "힐스톤파트너스 CEO 황라열, 블록체인 컨퍼런스 기조연설",

                summary: "2024 서울 블록체인 위크에서 황라열 CEO가 '블록체인의 미래와 투자 전략'을 주제로 기조연설을 진행했습니다.",

                year: 2024,

                image_url: "https://picsum.photos/600/400?random=1",

                video_url: ""

            },

            {

                id: "3",

                content_type: "영상", 

                article_url: "https://example.com/video1",

                media_name: "전자신문",

                published_date: "2024-10-05T16:00:00Z",

                title: "힐스톤파트너스 메타버스 프로젝트 인터뷰",

                summary: "힐스톤파트너스의 메타버스 관련 투자 전략과 향후 계획에 대한 심층 인터뷰입니다.",

                year: 2024,

                image_url: "",

                video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"

            },

            {

                id: "4",

                content_type: "기사",

                article_url: "https://example.com/article2", 

                media_name: "조선일보",

                published_date: "2023-09-12T11:00:00Z",

                title: "국내 크립토펀드 힐스톤파트너스, NFT 시장 진출",

                summary: "힐스톤파트너스가 NFT 시장에 본격 진출하며 디지털 아트와 메타버스 관련 프로젝트에 투자를 확대한다고 발표했습니다.",

                year: 2023,

                image_url: "",

                video_url: ""

            },

            {

                id: "5",

                content_type: "사진",

                article_url: "https://example.com/photo2",

                media_name: "동아일보", 

                published_date: "2023-07-08T13:45:00Z",

                title: "힐스톤파트너스 팀 단체 사진",

                summary: "힐스톤파트너스 전 직원이 참석한 2023년 하반기 워크숍에서 촬영한 단체 사진입니다.",

                year: 2023,

                image_url: "https://picsum.photos/600/400?random=2",

                video_url: ""

            },

            {

                id: "6",

                content_type: "기사",

                article_url: "https://example.com/article3",

                media_name: "중앙일보",

                published_date: "2022-03-20T10:30:00Z", 

                title: "힐스톤파트너스 창립, 블록체인 투자 전문 펀드 출범",

                summary: "M&A 전문가 황라열이 이끄는 힐스톤파트너스가 창립되어 블록체인과 암호화폐 투자에 특화된 전문 펀드로 활동을 시작했습니다.",

                year: 2022,

                image_url: "",

                video_url: ""

            }

        ];

        

        let articles = sampleArticles;

        

        // 클라이언트 사이드에서 연도 필터링

        if (year) {

            articles = articles.filter(article => {

                const articleYear = article.year || new Date(article.published_date).getFullYear();

                return articleYear.toString() === year;

            });

            console.log(`${year}년 필터링 후 기사 수:`, articles.length);

        }

        

        // 클라이언트 사이드에서 날짜순 정렬 (최신 순)

        articles.sort((a, b) => {

            const dateA = new Date(a.published_date);

            const dateB = new Date(b.published_date);

            return dateB - dateA; // 내림차순 (최신 순)

        });

        

        presskitData.articles = articles;

        presskitData.totalItems = articles.length;

        presskitData.currentPage = 1;

        presskitData.totalPages = Math.ceil(articles.length / presskitData.itemsPerPage);

        

        console.log('최종 기사 수:', presskitData.articles.length);

        console.log('첫 번째 기사:', presskitData.articles[0]?.title);

        

        renderArticles();

        renderPagination();

        updateResultsCount();

        

    } catch (error) {

        console.error('Error loading articles:', error);

        showNotification('기사 로드 중 오류가 발생했습니다.', 'error');

    } finally {

        showLoading(false);

    }

}


// 기사 목록 렌더링

function renderArticles() {

    const container = document.getElementById('articles-container');

    if (!container) return;

    

    if (presskitData.articles.length === 0) {

        container.innerHTML = `

            <div class="text-center py-12 bg-gray-50 rounded-lg">

                <i class="fas fa-newspaper text-4xl text-gray-300 mb-4"></i>

                <h3 class="text-lg font-medium text-gray-900 mb-2">등록된 기사가 없습니다</h3>

                <p class="text-gray-500">선택한 연도에 등록된 기사가 없습니다.</p>

            </div>

        `;

        return;

    }

    

    // 현재 페이지에 해당하는 기사들만 가져오기

    const startIndex = (presskitData.currentPage - 1) * presskitData.itemsPerPage;

    const endIndex = startIndex + presskitData.itemsPerPage;

    const currentPageArticles = presskitData.articles.slice(startIndex, endIndex);

    

    console.log(`페이지 ${presskitData.currentPage}: ${startIndex}~${endIndex-1} (총 ${currentPageArticles.length}개 표시)`);

    

    const articlesHTML = currentPageArticles.map(article => createArticleCard(article)).join('');

    container.innerHTML = articlesHTML;

}


// 기사 카드 생성

function createArticleCard(article) {

    const publishedDate = new Date(article.published_date).toLocaleDateString('ko-KR', {

        year: 'numeric',

        month: 'long',

        day: 'numeric'

    });

    

    // 컨텐츠 타입별 스타일링

    const contentTypeConfig = {

        '기사': { 

            bgColor: 'bg-orange-100', 

            textColor: 'text-orange-800', 

            icon: 'fas fa-newspaper',

            hoverColor: 'hover:text-orange-600'

        },

        '사진': { 

            bgColor: 'bg-gray-100', 

            textColor: 'text-gray-800', 

            icon: 'fas fa-image',

            hoverColor: 'hover:text-orange-600'

        },

        '영상': { 

            bgColor: 'bg-black', 

            textColor: 'text-white', 

            icon: 'fas fa-video',

            hoverColor: 'hover:text-orange-600'

        }

    };

    

    const contentType = article.content_type || '기사';

    const config = contentTypeConfig[contentType] || contentTypeConfig['기사'];

    

    return `

        <div class="article-card bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all duration-300 cursor-pointer"

             onclick="openContentModal('${article.id}', '${contentType}')">

            <div class="flex items-center mb-2">

                <span class="inline-flex items-center ${config.bgColor} ${config.textColor} text-sm font-medium px-2 py-1 rounded">

                    <i class="${config.icon} mr-1"></i>

                    ${contentType}

                </span>

                <span class="inline-block bg-gray-100 text-gray-700 text-sm font-medium px-2 py-1 rounded ml-2">

                    ${article.media_name}

                </span>

                <span class="text-gray-500 text-sm ml-2">${publishedDate}</span>

            </div>

            

            <h3 class="text-lg font-semibold text-gray-900 mb-3 ${config.hoverColor} transition-colors">

                ${article.title}

            </h3>

            

            <p class="text-gray-600 text-sm leading-relaxed">${article.summary}</p>

        </div>

    `;

}


// 페이지네이션 렌더링

function renderPagination() {

    const container = document.getElementById('pagination-container');

    if (!container || presskitData.totalPages <= 1) {

        container.innerHTML = '';

        return;

    }

    

    let paginationHTML = '';

    

    // 이전 버튼

    if (presskitData.currentPage > 1) {

        paginationHTML += `

            <button onclick="changePage(${presskitData.currentPage - 1})" 

                    class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">

                <i class="fas fa-chevron-left"></i>

            </button>

        `;

    }

    

    // 페이지 번호들

    const startPage = Math.max(1, presskitData.currentPage - 2);

    const endPage = Math.min(presskitData.totalPages, presskitData.currentPage + 2);

    

    for (let i = startPage; i <= endPage; i++) {

        const isActive = i === presskitData.currentPage;

        paginationHTML += `

            <button onclick="changePage(${i})" 

                    class="px-3 py-2 text-sm border rounded-md transition-colors ${

                        isActive 

                        ? 'bg-orange-500 text-white border-orange-500' 

                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'

                    }">

                ${i}

            </button>

        `;

    }

    

    // 다음 버튼

    if (presskitData.currentPage < presskitData.totalPages) {

        paginationHTML += `

            <button onclick="changePage(${presskitData.currentPage + 1})" 

                    class="px-3 py-2 text-sm bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">

                <i class="fas fa-chevron-right"></i>

            </button>

        `;

    }

    

    container.innerHTML = paginationHTML;

}


// 결과 카운터 업데이트

function updateResultsCount() {

    const counter = document.getElementById('results-count');

    if (counter) {

        counter.textContent = `총 ${presskitData.totalItems}개의 기사`;

    }

}


// 페이지 변경

function changePage(page) {

    presskitData.currentPage = page;

    console.log('페이지 변경:', page);

    

    // 클라이언트 사이드 페이지네이션: 데이터를 다시 로드하지 않고 현재 데이터로 렌더링

    renderArticles();

    renderPagination();

}


// 필터 처리

function handleFilter() {

    const yearFilter = document.getElementById('year-filter');

    

    presskitData.currentFilter = {

        search: '', // 검색 기능 제거

        year: yearFilter ? yearFilter.value : ''

    };

    

    console.log('필터 변경됨:', presskitData.currentFilter);

    console.log('선택된 연도:', presskitData.currentFilter.year);

    

    presskitData.currentPage = 1;

    loadArticles(1);

}


// 로딩 표시

function showLoading(show) {

    const loadingIndicator = document.getElementById('loading-indicator');

    if (loadingIndicator) {

        if (show) {

            loadingIndicator.classList.remove('hidden');

        } else {

            loadingIndicator.classList.add('hidden');

        }

    }

}


// 컨텐츠 모달 열기

function openContentModal(articleId, contentType) {

    const article = presskitData.articles.find(a => a.id === articleId);

    if (!article) return;

    

    // 기사 타입인 경우 바로 외부 링크로 이동

    if (contentType === '기사') {

        window.open(article.article_url, '_blank');

        return;

    }

    

    const publishedDate = new Date(article.published_date).toLocaleDateString('ko-KR', {

        year: 'numeric',

        month: 'long',

        day: 'numeric'

    });

    

    switch(contentType) {

        case '사진':

            openPhotoModal(article, publishedDate);

            break;

        case '영상':

            openVideoModal(article, publishedDate);

            break;

        default:

            window.open(article.article_url, '_blank');

    }

}


// 사진 모달 열기

function openPhotoModal(article, publishedDate) {

    document.getElementById('photo-modal-media').textContent = article.media_name;

    document.getElementById('photo-modal-date').textContent = publishedDate;

    document.getElementById('photo-modal-summary').textContent = article.title;

    

    const imageUrl = article.image_url || 'https://via.placeholder.com/600x400?text=이미지+없음';

    document.getElementById('photo-modal-image').src = imageUrl;

    document.getElementById('photo-modal-image').alt = article.title;

    

    document.getElementById('photo-content-modal').classList.remove('hidden');

    document.body.style.overflow = 'hidden';

}


// 영상 모달 열기

function openVideoModal(article, publishedDate) {

    document.getElementById('video-modal-media').textContent = article.media_name;

    document.getElementById('video-modal-date').textContent = publishedDate;

    document.getElementById('video-modal-summary').textContent = article.summary || article.title;

    document.getElementById('video-modal-link').href = article.article_url;

    

    const videoUrl = article.video_url || '';

    const videoSource = document.getElementById('video-modal-source');

    const videoPlayer = document.getElementById('video-modal-player');

    

    if (videoUrl) {

        videoSource.src = videoUrl;

        videoPlayer.load();

    }

    

    document.getElementById('video-content-modal').classList.remove('hidden');

    document.body.style.overflow = 'hidden';

}


// 모달 닫기 함수들

function closeContentModal(modalId) {

    const modal = document.getElementById(modalId);

    if (modal) {

        modal.classList.add('hidden');

        document.body.style.overflow = 'auto';

        

        // 영상 모달의 경우 재생 중지

        if (modalId === 'video-content-modal') {

            const videoPlayer = document.getElementById('video-modal-player');

            if (videoPlayer) {

                videoPlayer.pause();

                videoPlayer.currentTime = 0;

            }

        }

    }

}


// 모달 이벤트 리스너 설정

function setupContentModalListeners() {

    // 사진 모달

    const photoModalClose = document.getElementById('close-photo-modal');

    if (photoModalClose) {

        photoModalClose.addEventListener('click', () => {

            closeContentModal('photo-content-modal');

        });

    }

    

    // 영상 모달

    const videoModalClose = document.getElementById('close-video-modal');

    if (videoModalClose) {

        videoModalClose.addEventListener('click', () => {

            closeContentModal('video-content-modal');

        });

    }

    

    // 모달 배경 클릭 시 닫기

    ['photo-content-modal', 'video-content-modal'].forEach(modalId => {

        const modal = document.getElementById(modalId);

        if (modal) {

            modal.addEventListener('click', (e) => {

                if (e.target.id === modalId) {

                    closeContentModal(modalId);

                }

            });

        }

    });

    

    // ESC 키로 모달 닫기

    document.addEventListener('keydown', (e) => {

        if (e.key === 'Escape') {

            ['photo-content-modal', 'video-content-modal'].forEach(modalId => {

                const modal = document.getElementById(modalId);

                if (modal && !modal.classList.contains('hidden')) {

                    closeContentModal(modalId);

                }

            });

        }

    });

}


// 전역 함수로 노출 (onclick에서 사용하기 위해)

window.changePage = changePage;

window.openContentModal = openContentModal;

window.initPresskit = initPresskit;


// Notification system

function showNotification(message, type = 'info') {

    const notification = document.createElement('div');

    notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm ${

        type === 'success' ? 'bg-green-500 text-white' : 

        type === 'error' ? 'bg-red-500 text-white' : 

        'bg-blue-500 text-white'

    }`;

    

    notification.innerHTML = `

        <div class="flex items-center">

            <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} mr-2"></i>

            <span>${message}</span>

            <button class="ml-4 text-white hover:text-gray-200" onclick="this.parentElement.parentElement.remove()">

                <i class="fas fa-times"></i>

            </button>

        </div>

    `;

    

    document.body.appendChild(notification);

    

    // Auto remove after 5 seconds

    setTimeout(() => {

        if (notification.parentNode) {

            notification.remove();

        }

    }, 5000);

}

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HILLSTONE PARTNERS - 블록체인·NFT·M&A 전문 기업</title>

    <meta name="description" content="23년간의 M&A 전문성을 바탕으로 블록체인·NFT·메타버스 투자를 선도하는 힐스톤파트너스">

    

    <!-- Tailwind CSS -->

    <script src="https://cdn.tailwindcss.com"></script>

    

    <!-- Font Awesome -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">

    

    <!-- Google Fonts -->

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    

    <style>

        body {

            font-family: 'Inter', sans-serif;

            background: #ffffff;

            overflow-x: hidden !important;

        }

        

        /* PRESSKIT 관련 스타일 */

        .article-card {

            transition: all 0.3s ease;

            border: 1px solid #e5e7eb;

        }

        

        .article-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);

            border-color: #f97316;

        }

        

        /* 커스텀 드롭다운 스타일 */

        #custom-year-filter .fa-chevron-down {

            transition: transform 0.2s ease;

        }

        

        #year-options {

            max-height: 300px;

            overflow-y: auto;

            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);

        }

        

        .year-option {

            transition: all 0.15s ease;

        }

    </style>

</head>

<body>

    <!-- Navigation -->

    <nav class="bg-black text-white fixed w-full z-50 shadow-lg">

        <div class="container mx-auto px-4">

            <div class="flex justify-between items-center py-4">

                <div class="text-2xl font-bold">HILLSTONE PARTNERS</div>

                

                <!-- Desktop Menu -->

                <div class="hidden md:flex space-x-8">

                    <a href="#blockchain" class="hover:text-orange-400 transition-colors">BLOCKCHAIN</a>

                    <a href="#vision" class="hover:text-orange-400 transition-colors">VISION</a>

                    <a href="#portfolio" class="hover:text-orange-400 transition-colors">PORTFOLIO</a>

                    <a href="#team" class="hover:text-orange-400 transition-colors">TEAM</a>

                    <a href="#presskit" class="hover:text-orange-400 transition-colors">PRESSKIT</a>

                    <a href="#contact" class="hover:text-orange-400 transition-colors">CONTACT</a>

                </div>

                

                <!-- Mobile Menu Button -->

                <button class="md:hidden mobile-menu-button">

                    <i class="fas fa-bars text-xl"></i>

                </button>

            </div>

            

            <!-- Mobile Menu -->

            <div class="mobile-menu hidden md:hidden pb-4">

                <a href="#blockchain" class="block py-2 hover:text-orange-400">BLOCKCHAIN</a>

                <a href="#vision" class="block py-2 hover:text-orange-400">VISION</a>

                <a href="#portfolio" class="block py-2 hover:text-orange-400">PORTFOLIO</a>

                <a href="#team" class="block py-2 hover:text-orange-400">TEAM</a>

                <a href="#presskit" class="block py-2 hover:text-orange-400">PRESSKIT</a>

                <a href="#contact" class="block py-2 hover:text-orange-400">CONTACT</a>

            </div>

        </div>

    </nav>


    <!-- Hero Section -->

    <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-gray-900 to-black text-white">

        <div class="container mx-auto px-4 text-center">

            <h1 class="text-6xl md:text-8xl font-black mb-6 tracking-tight">

                HILLSTONE<br>

                <span class="text-orange-500">PARTNERS</span>

            </h1>

            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed">

                23년간의 M&A 전문성을 바탕으로<br>

                블록체인·NFT·메타버스 투자를 선도합니다

            </p>

            <a href="#blockchain" class="inline-block bg-orange-500 hover:bg-orange-600 text-white px-8 py-4 rounded-lg text-lg font-semibold transition-all duration-300 transform hover:scale-105">

                더 알아보기

            </a>

        </div>

    </section>


    <!-- PRESSKIT Section -->

    <section id="presskit" class="py-20 bg-white">

        <div class="container mx-auto px-4">

            <div class="text-center mb-16">

                <h2 class="text-5xl md:text-6xl font-black text-black tracking-tight mb-4">PRESSKIT</h2>

                <div class="w-24 h-1 bg-orange-500 mx-auto mb-8"></div>

                <p class="text-xl text-gray-600 font-light max-w-3xl mx-auto leading-relaxed mb-12">언론 보도 자료와 미디어 아카이브</p>

                

                <!-- 필터 및 검색 -->

                <div class="flex flex-col md:flex-row gap-4 mb-6">

                    <!-- 연도 필터 (커스텀 드롭다운) -->

                    <div class="relative">

                        <div id="custom-year-filter" class="bg-white border border-gray-300 rounded-lg px-4 py-3 pr-10 text-gray-900 cursor-pointer hover:border-orange-500 transition-all select-none">

                            <span id="current-year-text">전체 연도</span>

                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">

                                <i class="fas fa-chevron-down text-sm"></i>

                            </div>

                        </div>

                        

                        <!-- 드롭다운 옵션들 -->

                        <div id="year-options" class="hidden absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg">

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="">전체 연도</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2025">2025</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2024">2024</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2023">2023</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2022">2022</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2021">2021</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2020">2020</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2019">2019</div>

                            <div class="year-option px-4 py-2 hover:bg-gray-50 cursor-pointer text-gray-900" data-value="2018">2018</div>

                        </div>

                        

                        <!-- 숨겨진 실제 select -->

                        <select id="year-filter" class="hidden">

                            <option value="">전체 연도</option>

                            <option value="2025">2025</option>

                            <option value="2024">2024</option>

                            <option value="2023">2023</option>

                            <option value="2022">2022</option>

                            <option value="2021">2021</option>

                            <option value="2020">2020</option>

                            <option value="2019">2019</option>

                            <option value="2018">2018</option>

                        </select>

                    </div>

                </div>

                

                <!-- 결과 카운터 -->

                <div class="text-sm text-gray-500 mb-6">

                    <span id="results-count">로딩 중...</span>

                </div>

            </div>

            

            <!-- 로딩 인디케이터 -->

            <div id="loading-indicator" class="hidden text-center py-8">

                <i class="fas fa-spinner fa-spin text-2xl text-orange-500"></i>

                <p class="mt-2 text-gray-600">로딩 중...</p>

            </div>

            

            <!-- 기사 컨테이너 -->

            <div id="articles-container" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">

                <!-- 기사들이 여기에 동적으로 추가됩니다 -->

            </div>

            

            <!-- 페이지네이션 -->

            <div id="pagination-container" class="flex justify-center space-x-2">

                <!-- 페이지네이션 버튼들이 여기에 동적으로 추가됩니다 -->

            </div>

        </div>

    </section>


    <!-- Contact Section -->

    <section id="contact" class="py-20 bg-black text-white">

        <div class="container mx-auto px-4">

            <div class="text-center mb-16">

                <h2 class="text-5xl md:text-6xl font-black tracking-tight mb-4">CONTACT</h2>

                <div class="w-24 h-1 bg-orange-500 mx-auto mb-8"></div>

                <p class="text-xl font-light max-w-3xl mx-auto leading-relaxed">파트너십 문의</p>

            </div>

            

            <div class="max-w-2xl mx-auto">

                <div class="bg-gray-900 rounded-2xl p-8">

                    <h3 class="text-2xl font-bold mb-6">힐스톤 블록체인 센터</h3>

                    <div class="space-y-4">

                        <div class="flex items-center">

                            <i class="fas fa-envelope text-orange-500 mr-4"></i>

                            <span>harhie@gmail.com</span>

                        </div>

                        <div class="flex items-center">

                            <i class="fas fa-map-marker-alt text-orange-500 mr-4"></i>

                            <span>서울특별시 강남구</span>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>


    <!-- Modals -->

    <!-- 사진 모달 -->

    <div id="photo-content-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">

        <div class="bg-white rounded-lg max-w-4xl w-full max-h-full overflow-y-auto">

            <div class="relative">

                <button id="close-photo-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">

                    <i class="fas fa-times text-xl"></i>

                </button>

                <div class="p-6">

                    <img id="photo-modal-image" src="" alt="" class="w-full max-h-96 object-contain rounded-lg mb-4">

                    <div class="text-center">

                        <p class="text-sm text-gray-500 mb-2">

                            <span id="photo-modal-media"></span> · <span id="photo-modal-date"></span>

                        </p>

                        <p id="photo-modal-summary" class="text-gray-700"></p>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- 영상 모달 -->

    <div id="video-content-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">

        <div class="bg-white rounded-lg max-w-4xl w-full max-h-full overflow-y-auto">

            <div class="relative">

                <button id="close-video-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 z-10">

                    <i class="fas fa-times text-xl"></i>

                </button>

                <div class="p-6">

                    <video id="video-modal-player" controls class="w-full max-h-96 rounded-lg mb-4">

                        <source id="video-modal-source" src="" type="video/mp4">

                        브라우저가 비디오를 지원하지 않습니다.

                    </video>

                    <div class="text-center">

                        <p class="text-sm text-gray-500 mb-2">

                            <span id="video-modal-media"></span> · <span id="video-modal-date"></span>

                        </p>

                        <p id="video-modal-summary" class="text-gray-700 mb-4"></p>

                        <a id="video-modal-link" href="#" target="_blank" class="text-orange-500 hover:text-orange-600">

                            원본 기사 보기 →

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- JavaScript -->

    <script src="js/main.js"></script>

</body>

</html>