<!DOCTYPE html>
<html lang="ko" data-require-auth="true">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="글로벌 스탠다드 테크놀로지의 반도체 유해가스 정화장비 특허 관리 및 분석 시스템">
    <meta name="keywords" content="특허관리,반도체,유해가스,정화장비,글로벌스탠다드테크놀로지,RAG,LLM,AI특허분석">
    <meta name="author" content="GST (Global Standard Technology)">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="GST 특허관리시스템 - AI 기반 특허 분석">
    <meta property="og:description" content="GST 내부 특허를 통합 관리하고 AI분석하는 특허분석 플랫폼">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="GST 특허관리시스템">
    
    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#1e40af">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="GST 특허">
    
    <!-- Manifest & Icons -->
    <link rel="manifest" href="/manifest.json">
    <title>글로벌 스탠다드 테크놀로지 - GST 내부 특허를 통합 관리</title>
    
    <!-- Preconnect for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    
    <!-- 🔐 인증 미들웨어 - 최우선 로드 -->
    <script src="js/auth-manager.js"></script>
    
    <!-- Critical CSS - Load first -->
    <link rel="stylesheet" href="css/style.css">
    
    <!-- External Libraries CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <link rel="stylesheet" 
          href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" 
          rel="stylesheet">
    
    <!-- Favicon & App Icons -->
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNCIgZmlsbD0iIzFlNDBhZiIvPgo8cGF0aCBkPSJNOCAxMkgxMlYyMEg4VjEyWiIgZmlsbD0id2hpdGUiLz4KPHA+aCBkPSJNMTQgOEgxOFYyNEgxNFY4WiIgZmlsbD0id2hpdGUiLz4KPHA+aCBkPSJNMjAgMTBIMjRWMjJIMjBWMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K">
    <link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDE4MCAxODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiByeD0iNDAiIGZpbGw9IiMxZTQwYWYiLz4KPHBhdGggZD0iTTQwIDYwSDcwVjEyMEg0MFY2MFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik04MCA0MEgxMTBWMTQwSDgwVjQwWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyMCA1MEgxNTBWMTMwSDEyMFY1MFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=">
    
    <!-- Tailwind 설정 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'korean': ['Noto Sans KR', 'sans-serif']
                    },
                    colors: {
                        'gst-blue': '#1e40af',
                        'gst-light-blue': '#3b82f6',
                        'gst-gray': '#6b7280',
                        'gst-dark': '#1f2937'
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'bounce-slow': 'bounce 2s infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="font-korean bg-gray-50">
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:top-4 focus:left-4 bg-gst-blue text-white px-4 py-2 rounded-md transition shadow-lg">본문 바로가기</a>
    <!-- 네비게이션 바 -->
    <nav class="bg-gst-blue shadow-lg" aria-label="주요 내비게이션">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-4">
                    <div class="text-white text-xl font-bold" aria-label="GST 특허관리시스템 홈">
                        <i class="fas fa-microscope mr-2" aria-hidden="true"></i>
                        GST 특허관리시스템
                    </div>
                </div>
                <div class="hidden md:flex space-x-6">
                    <a href="#dashboard" class="nav-link text-white hover:text-blue-200 transition-colors">
                        <i class="fas fa-chart-dashboard mr-1" aria-hidden="true"></i> 대시보드
                    </a>
                    <a href="#patents" class="nav-link text-white hover:text-blue-200 transition-colors">
                        <i class="fas fa-file-text mr-1" aria-hidden="true"></i> 특허 목록
                    </a>
                    <a href="#analytics" class="nav-link text-white hover:text-blue-200 transition-colors">
                        <i class="fas fa-chart-bar mr-1" aria-hidden="true"></i> 분석
                    </a>
                    <a href="#timeline" class="nav-link text-white hover:text-blue-200 transition-colors">
                        <i class="fas fa-timeline mr-1" aria-hidden="true"></i> 타임라인
                    </a>
                    <a href="pages/data-manager.html" onclick="return checkDataManagerAccess(event)" class="nav-link text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 px-3 py-1 rounded transition-colors shadow-md" title="데이터 임포트 및 수정 - 관리자 전용">
                        <i class="fas fa-database mr-1" aria-hidden="true"></i> 데이터 관리
                    </a>
                    <a href="pages/chatbot.html" class="nav-link text-white bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded transition-colors" aria-label="AI 챗봇" title="AI 특허 분석 챗봇">
                        <i class="fas fa-robot mr-1" aria-hidden="true"></i> AI 챗봇
                    </a>
                    <button onclick="AuthManager.logout()" class="nav-link text-white bg-red-600 hover:bg-red-700 px-3 py-1 rounded transition-colors" title="로그아웃">
                        <i class="fas fa-sign-out-alt mr-1" aria-hidden="true"></i> 로그아웃
                    </button>
                </div>
                <button class="md:hidden text-white" id="mobile-menu-button" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="모바일 메뉴 열기">
                    <i class="fas fa-bars" aria-hidden="true"></i>
                </button>
            </div>
            
            <!-- 모바일 메뉴 -->
            <div class="md:hidden hidden" id="mobile-menu">
                <div class="py-2 space-y-2" role="menu" aria-label="모바일 내비게이션">
                    <a href="#dashboard" class="block text-white hover:text-blue-200 py-2" role="menuitem">대시보드</a>
                    <a href="#patents" class="block text-white hover:text-blue-200 py-2" role="menuitem">특허 목록</a>
                    <a href="#analytics" class="block text-white hover:text-blue-200 py-2" role="menuitem">분석</a>
                    <a href="#timeline" class="block text-white hover:text-blue-200 py-2" role="menuitem">타임라인</a>
                    <a href="pages/data-manager.html" onclick="return checkDataManagerAccess(event)" class="block text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 py-2 rounded px-2 my-1" role="menuitem">
                        <i class="fas fa-database mr-2" aria-hidden="true"></i>데이터 관리
                    </a>
                    <a href="pages/chatbot.html" class="block text-white bg-purple-600 hover:bg-purple-700 py-2 rounded px-2 my-1" role="menuitem" title="AI 특허 분석 챗봇">
                        <i class="fas fa-robot mr-2" aria-hidden="true"></i>AI 챗봇
                    </a>
                    <button onclick="AuthManager.logout()" class="block w-full text-left text-white bg-red-600 hover:bg-red-700 py-2 rounded px-2 my-1" role="menuitem">
                        <i class="fas fa-sign-out-alt mr-2" aria-hidden="true"></i>로그아웃
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 메인 컨테이너 -->
    <main id="main-content" tabindex="-1">
        <div class="container mx-auto px-4 py-8">
        <!-- 헤더 섹션 -->
        <header class="text-center mb-12 animate-fade-in">
            <div class="relative inline-block">
                <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full blur-3xl opacity-20 animate-pulse-slow"></div>
                <h1 class="relative text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 bg-clip-text text-transparent mb-4">
                    GST 특허관리시스템
                </h1>
            </div>
            <div class="flex items-center justify-center gap-2 mb-6">
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-blue-100 text-blue-800">
                    <i class="fas fa-robot mr-2"></i>AI 기반 분석
                </span>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                    <i class="fas fa-shield-check mr-2"></i>207개 특허 및 실용실안
                </span>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-purple-100 text-purple-800">
                    <i class="fas fa-chart-line mr-2"></i>실시간 모니터링
                </span>
            </div>
            <p class="text-xl text-gst-gray max-w-3xl mx-auto leading-relaxed">
                글로벌스탠다드테크놀로지 특허를 <span class="font-semibold text-gst-blue">체계적으로 관리</span>하고 
                <span class="font-semibold text-purple-600">AI로 분석</span>하는 통합 플랫폼
            </p>
        </header>

        <!-- 대시보드 섹션 -->
        <section id="dashboard" class="mb-16">
            <h2 class="text-3xl font-semibold text-gst-dark mb-8 flex items-center">
                <i class="fas fa-chart-dashboard mr-3 text-gst-blue"></i>
                대시보드 개요
            </h2>
            
            <!-- 통계 카드 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 mb-8">
                <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl p-6 border-l-4 border-blue-500 transition-all duration-300 hover:-translate-y-2 animate-slide-up">
                    <div class="flex items-center justify-between">
                        <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center transform group-hover:rotate-6 transition-transform">
                            <i class="fas fa-file-alt text-2xl text-white"></i>
                        </div>
                        <div class="ml-4 flex-1 text-right">
                            <p class="text-sm font-medium text-gray-500 mb-1">총 특허 수</p>
                            <p class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent" id="total-patents">—</p>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div id="year-over-year-growth" class="flex items-center text-sm text-green-600">
                            <i class="fas fa-arrow-up mr-1"></i>
                            <span class="font-semibold">—</span>
                            <span class="text-gray-500 ml-1">vs 작년</span>
                        </div>
                    </div>
                </div>
                
                <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl p-6 border-l-4 border-green-500 transition-all duration-300 hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.1s;">
                    <div class="flex items-center justify-between">
                        <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center transform group-hover:rotate-6 transition-transform">
                            <i class="fas fa-cogs text-2xl text-white"></i>
                        </div>
                        <div class="ml-4 flex-1 text-right">
                            <p class="text-sm font-medium text-gray-500 mb-1">기술 분야</p>
                            <p class="text-3xl font-bold bg-gradient-to-r from-green-600 to-green-800 bg-clip-text text-transparent" id="tech-categories">—</p>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-layer-group mr-1"></i>
                            <span>다중 분야 특허</span>
                        </div>
                    </div>
                </div>
                
                <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl p-6 border-l-4 border-yellow-500 transition-all duration-300 hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.2s;">
                    <div class="flex items-center justify-between">
                        <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center transform group-hover:rotate-6 transition-transform">
                            <i class="fas fa-calendar text-2xl text-white"></i>
                        </div>
                        <div class="ml-4 flex-1 text-right">
                            <p class="text-sm font-medium text-gray-500 mb-1">출원 기간</p>
                            <p class="text-2xl font-bold bg-gradient-to-r from-yellow-600 to-yellow-800 bg-clip-text text-transparent" id="registration-range">—</p>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-clock mr-1"></i>
                            <span>최신 데이터</span>
                        </div>
                    </div>
                </div>
                
                <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl p-6 border-l-4 border-red-500 transition-all duration-300 hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.3s;">
                    <div class="flex items-center justify-between">
                        <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center transform group-hover:rotate-6 transition-transform">
                            <i class="fas fa-search text-2xl text-white"></i>
                        </div>
                        <div class="ml-4 flex-1 text-right">
                            <p class="text-sm font-medium text-gray-500 mb-1">활성 특허</p>
                            <p class="text-3xl font-bold bg-gradient-to-r from-red-600 to-red-800 bg-clip-text text-transparent" id="active-patents">—</p>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-green-600">
                            <i class="fas fa-check-circle mr-1"></i>
                            <span id="active-rate" class="font-semibold">—</span>
                            <span class="text-gray-500 ml-1">활성률</span>
                        </div>
                    </div>
                </div>

                <div class="group bg-white rounded-xl shadow-md hover:shadow-2xl p-6 border-l-4 border-purple-500 transition-all duration-300 hover:-translate-y-2 animate-slide-up" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-between">
                        <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center transform group-hover:rotate-6 transition-transform">
                            <i class="fas fa-star text-2xl text-white"></i>
                        </div>
                        <div class="ml-4 flex-1 text-right">
                            <p class="text-sm font-medium text-gray-500 mb-1">평균 중요도</p>
                            <p class="text-3xl font-bold bg-gradient-to-r from-purple-600 to-purple-800 bg-clip-text text-transparent" id="avg-priority-score">0.0</p>
                        </div>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-chart-bar mr-1"></i>
                            <span>AI 평가 점수</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 특허 목록 섹션 -->
        <section id="patents" class="mb-16 clearfix">
            <h2 class="text-3xl font-semibold text-gst-dark mb-8 flex items-center">
                <i class="fas fa-file-text mr-3 text-gst-blue" aria-hidden="true"></i>
                특허 목록 및 검색
            </h2>

            <noscript>
                <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-900 px-4 py-3 rounded mb-6" role="alert">
                    <p class="font-semibold">JavaScript가 비활성화되어 있습니다.</p>
                    <p class="text-sm">실시간 검색과 분석 기능을 사용하려면 브라우저에서 JavaScript를 활성화하세요.</p>
                </div>
            </noscript>
            
            <!-- 검색 및 필터 영역 -->
            <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
                <!-- 통합 검색 바 -->
                <div class="mb-6">
                    <label for="search-input" class="block text-sm font-medium text-gst-gray mb-2">
                        <i class="fas fa-search mr-2"></i>통합 검색 (특허번호, 제목, 키워드, 발명자, 본문)
                    </label>
                    <div class="relative" role="combobox" aria-haspopup="listbox" aria-owns="search-suggestions" aria-expanded="false">
                        <input type="search" id="search-input" 
                               class="w-full p-4 pr-32 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue focus:border-gst-blue transition-all"
                               placeholder="🔍 예: 스크러버, 10-1435371, 김종철, 반도체 폐가스..."
                               autocomplete="off"
                               role="searchbox"
                               aria-controls="search-suggestions"
                               aria-autocomplete="list"
                               aria-describedby="search-hint">
                        <div class="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2">
                            <button id="clear-search" class="hidden text-gray-400 hover:text-gray-600 transition-colors" title="검색 초기화">
                                <i class="fas fa-times-circle text-lg"></i>
                            </button>
                            <button id="advanced-search-toggle" class="text-gst-blue hover:text-blue-700 transition-colors" title="고급 검색">
                                <i class="fas fa-sliders-h text-lg"></i>
                            </button>
                        </div>
                        <div id="search-suggestions" class="absolute left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden hidden z-50" role="listbox"></div>
                    </div>
                    <div class="mt-2 flex items-center justify-between text-xs text-gst-gray">
                        <p id="search-hint">💡 풀텍스트 검색 지원 • 두 글자 이상 입력 시 실시간 제안</p>
                        <p id="search-result-count" class="hidden font-semibold text-gst-blue"></p>
                    </div>
                </div>
                
                <!-- 고급 검색 옵션 (접기/펼치기) -->
                <div id="advanced-search-panel" class="hidden border-t pt-4 mt-4">
                    <h3 class="text-sm font-semibold text-gray-700 mb-3">
                        <i class="fas fa-filter mr-2"></i>고급 필터
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <div>
                            <label for="category-filter" class="block text-sm font-medium text-gst-gray mb-2">
                                기술 분야
                            </label>
                            <select id="category-filter" 
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                                <option value="">전체</option>
                                <option value="scrubber">스크러버</option>
                                <option value="chiller">칠러</option>
                                <option value="plasma">플라즈마</option>
                                <option value="temperature">온도제어</option>
                                <option value="gas-treatment">가스처리</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="status-filter" class="block text-sm font-medium text-gst-gray mb-2">
                                특허 상태
                            </label>
                            <select id="status-filter" 
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                                <option value="">전체</option>
                                <option value="active">활성</option>
                                <option value="expired">만료</option>
                                <option value="pending">심사중</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="country-filter" class="block text-sm font-medium text-gst-gray mb-2">
                                <i class="fas fa-globe mr-1"></i>출원국
                            </label>
                            <select id="country-filter" 
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                                <option value="">전체</option>
                                <option value="KR">대한민국</option>
                                <option value="US">미국</option>
                                <option value="JP">일본</option>
                                <option value="CN">중국</option>
                                <option value="EP">유럽</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="right-type-filter" class="block text-sm font-medium text-gst-gray mb-2">
                                <i class="fas fa-certificate mr-1"></i>권리 유형
                            </label>
                            <select id="right-type-filter" 
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                                <option value="">전체</option>
                                <option value="특허">특허</option>
                                <option value="실용신안">실용신안</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="validity-filter" class="block text-sm font-medium text-gst-gray mb-2">
                                <i class="fas fa-check-circle mr-1"></i>존속 여부
                            </label>
                            <select id="validity-filter" 
                                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                                <option value="">전체</option>
                                <option value="유효">유효</option>
                                <option value="무효">무효</option>
                                <option value="포기">포기</option>
                                <option value="말소">말소</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="date-from" class="block text-sm font-medium text-gst-gray mb-2">
                                <i class="fas fa-calendar mr-1"></i>출원일 (시작)
                            </label>
                            <input type="date" id="date-from" 
                                   class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                        </div>
                        
                        <div>
                            <label for="date-to" class="block text-sm font-medium text-gst-gray mb-2">
                                <i class="fas fa-calendar mr-1"></i>출원일 (종료)
                            </label>
                            <input type="date" id="date-to" 
                                   class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                        </div>
                        
                        <div class="flex items-end">
                            <button id="reset-filters" 
                                    class="w-full p-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-medium">
                                <i class="fas fa-redo mr-2"></i>필터 초기화
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 검색 및 필터 영역 (간소화 버전) -->
                        </select>
                    </div>
                    
                    <div>
                        <label for="type-filter" class="block text-sm font-medium text-gst-gray mb-2">
                            <i class="fas fa-certificate mr-1"></i>권리 유형
                        </label>
                        <select id="type-filter" 
                                class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                            <option value="">전체</option>
                            <option value="특허">특허</option>
                            <option value="실용신안">실용신안</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="validity-filter" class="block text-sm font-medium text-gst-gray mb-2">
                            <i class="fas fa-check-circle mr-1"></i>존속여부
                        </label>
                        <select id="validity-filter" 
                                class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue">
                            <option value="">전체</option>
                            <option value="유효">유효</option>
                            <option value="무효">무효</option>
                            <option value="소멸">소멸</option>
                        </select>
                    </div>
                </div>
                
                <div class="mt-4 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3">
                    <div class="flex items-center gap-3">
                        <button id="search-button" type="button" class="bg-gst-blue text-white px-6 py-2 rounded-lg hover:bg-gst-dark transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gst-blue">
                            <i class="fas fa-search mr-2" aria-hidden="true"></i>검색
                        </button>
                        <button id="reset-button" type="button" class="text-gst-gray hover:text-gst-dark transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gst-blue">
                            <i class="fas fa-rotate-left mr-2" aria-hidden="true"></i>초기화
                        </button>
                    </div>
                    <span class="text-xs text-gst-gray" aria-live="polite">신규 필터: 출원국, 권리유형, 존속여부 추가됨</span>
                </div>
            </div>
            
            <!-- 특허 목록 리스트 -->
            <div class="bg-white rounded-lg shadow-lg overflow-hidden">
                <!-- 최신 특허 목록 -->
                <div class="p-6">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
                        <h3 class="text-lg font-semibold text-gst-dark flex items-center">
                            <i class="fas fa-clock mr-2 text-gst-blue" aria-hidden="true"></i>
                            최신 특허 등록 현황
                        </h3>
                        <div class="flex items-center gap-2 text-sm text-gst-gray" aria-live="polite">
                            <i class="fas fa-database" aria-hidden="true"></i>
                            <span id="data-source-indicator">데이터 소스 확인 중...</span>
                        </div>
                    </div>
                    
                    <div id="patents-loading" class="space-y-3" aria-hidden="true">
                        <div class="animate-pulse bg-gray-100 h-16 rounded-lg"></div>
                        <div class="animate-pulse bg-gray-100 h-16 rounded-lg"></div>
                        <div class="animate-pulse bg-gray-100 h-16 rounded-lg"></div>
                    </div>

                    <div id="patents-list-container" class="space-y-3 hidden" role="list" aria-live="polite"></div>
                    <div id="patents-empty-state" class="hidden text-center py-8 text-gst-gray">
                        <i class="fas fa-search text-4xl mb-4 block" aria-hidden="true"></i>
                        <p class="text-lg font-medium">조건에 맞는 특허가 없습니다.</p>
                        <p class="text-sm">필터를 조정하거나 다른 키워드를 입력해 보세요.</p>
                    </div>
                </div>

                <!-- 연도별 특허 등록 구분은 JavaScript에서 동적으로 채워집니다. -->
                <div id="patent-year-groups" class="bg-gray-50 border-t border-gray-200">
                    <!-- 동적 콘텐츠 -->
                </div>
                
                <!-- 페이지네이션 -->
                <div class="bg-gray-50 px-6 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-t" aria-live="polite">
                    <div class="text-sm text-gst-gray">
                        총 <span id="total-count">0</span>개 중 <span id="start-count">0</span>-<span id="end-count">0</span>개 표시
                    </div>
                    <div class="flex items-center gap-2">
                        <button id="prev-page" type="button" class="px-3 py-2 border border-gray-300 rounded-md text-gst-gray hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gst-blue" aria-label="이전 페이지">
                            이전
                        </button>
                        <select id="page-size" class="px-3 py-2 border border-gray-300 rounded-md text-gst-gray focus:outline-none focus:ring-2 focus:ring-gst-blue" aria-label="페이지당 항목 수">
                            <option value="10">10개</option>
                            <option value="20">20개</option>
                            <option value="30">30개</option>
                        </select>
                        <button id="next-page" type="button" class="px-3 py-2 border border-gray-300 rounded-md text-gst-gray hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gst-blue" aria-label="다음 페이지">
                            다음
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 분석 및 시각화 섹션 -->
        <section id="analytics" class="mb-16 clearfix">
            <h2 class="text-3xl font-semibold text-gst-dark mb-8 flex items-center">
                <i class="fas fa-chart-bar mr-3 text-gst-blue"></i>
                특허 분석 및 시각화
            </h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 기술 분야별 분포 차트 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-pie-chart mr-2 text-gst-blue"></i>
                        기술 분야별 특허 분포
                    </h3>
                    <div style="height: 400px;">
                        <canvas id="tech-distribution-chart" role="img" aria-label="기술 분야별 특허 분포 차트"></canvas>
                    </div>
                </div>
                
                <!-- 연도별 등록 현황 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-chart-line mr-2 text-green-600"></i>
                        연도별 특허 등록 현황
                    </h3>
                    <div style="height: 400px;">
                        <canvas id="yearly-registration-chart" role="img" aria-label="연도별 특허 등록 현황 차트"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 출처 비교 최적화 대시보드 (향후 확장용 - 현재 숨김) -->
            <div class="mt-8 hidden" id="source-optimization-dashboard">
                <div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-lg p-4 mb-6 border-l-4 border-purple-600">
                    <h3 class="text-lg font-bold text-purple-900 flex items-center mb-2">
                        <i class="fas fa-database mr-2"></i>
                        출처 비교 최적화 대시보드
                        <span class="ml-3 text-xs font-normal bg-purple-200 text-purple-800 px-2 py-1 rounded">OPS · USPTO · KIPRIS · WIPO · BigQuery</span>
                    </h3>
                    <p class="text-sm text-purple-800">
                        다원 특허 API 통합 모니터링 · RRF(k=60) 랭킹 · 99% 교차일치 목표 · OPS 4GB/주 한도 관리
                    </p>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- A. 출처 커버리지 차트 (데이터 계층) -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-layer-group mr-2 text-blue-600"></i>
                            출처별 커버리지
                            <span class="ml-2 text-xs text-gray-500 font-normal">(문헌수 · 청구항 · PDF)</span>
                        </h3>
                        <div style="height: 350px;">
                            <canvas id="source-coverage-chart" role="img" aria-label="출처별 커버리지 차트 - OPS, USPTO, KIPRIS, WIPO, BigQuery"></canvas>
                        </div>
                        <div class="mt-3 text-xs text-gray-600 bg-gray-50 p-3 rounded">
                            <i class="fas fa-info-circle mr-1"></i>
                            <strong>데이터 계층:</strong> provenance 필드 기반, 소스별 has_claims/has_pdf 집계
                        </div>
                    </div>
                    
                    <!-- B. 교차일치 게이지 (데이터 계층) -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-bullseye mr-2 text-green-600"></i>
                            교차일치율
                            <span class="ml-2 text-xs text-gray-500 font-normal">(번호 · 우선권)</span>
                        </h3>
                        <div style="height: 350px;">
                            <canvas id="source-agreement-gauge" role="img" aria-label="교차일치 게이지 - 목표 99% 이상"></canvas>
                        </div>
                        <div class="mt-3 text-xs text-gray-600 bg-gray-50 p-3 rounded">
                            <i class="fas fa-info-circle mr-1"></i>
                            <strong>품질 지표:</strong> cross_check.number_match & priority_match, 목표 ≥99%
                        </div>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
                    <!-- C. 레이턴시·오류율 트렌드 (성능 축) -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-tachometer-alt mr-2 text-yellow-600"></i>
                            레이턴시 & 오류율
                            <span class="ml-2 text-xs text-gray-500 font-normal">(성능 모니터링)</span>
                        </h3>
                        <div style="height: 350px;">
                            <canvas id="source-latency-chart" role="img" aria-label="소스별 레이턴시 및 오류율 차트"></canvas>
                        </div>
                        <div class="mt-3 text-xs text-gray-600 bg-gray-50 p-3 rounded">
                            <i class="fas fa-info-circle mr-1"></i>
                            <strong>성능 축:</strong> fetch_metrics.latency_ms & http_status, OPS/USPTO 한도 초과 탐지
                        </div>
                    </div>
                    
                    <!-- D. RRF 기여도 차트 (검색·랭킹 품질) -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-ranking-star mr-2 text-purple-600"></i>
                            RRF 기여도
                            <span class="ml-2 text-xs text-gray-500 font-normal">(k=60)</span>
                        </h3>
                        <div style="height: 350px;">
                            <canvas id="rrf-contribution-chart" role="img" aria-label="RRF 소스별 기여도 차트"></canvas>
                        </div>
                        <div class="mt-3 text-xs text-gray-600 bg-gray-50 p-3 rounded">
                            <i class="fas fa-info-circle mr-1"></i>
                            <strong>랭킹 품질:</strong> RRF(d) = Σ 1/(k + rank_i(d)), 다원 검색 결과 통합
                        </div>
                    </div>
                </div>
                
                <!-- 출처 최적화 요약 카드 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-8">
                    <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-600 mb-1">OPS 사용량</p>
                                <p class="text-lg font-bold text-blue-600" id="ops-quota-used">0 GB</p>
                            </div>
                            <i class="fas fa-server text-2xl text-blue-200"></i>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            / 4 GB/주 (무상 한도)
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-600 mb-1">USPTO 호출</p>
                                <p class="text-lg font-bold text-green-600" id="uspto-quota-used">0</p>
                            </div>
                            <i class="fas fa-flag-usa text-2xl text-green-200"></i>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            / 10,000/주 (API 한도)
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow p-4 border-l-4 border-yellow-500">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-600 mb-1">PatentsView</p>
                                <p class="text-lg font-bold text-yellow-600">Deprecated</p>
                            </div>
                            <i class="fas fa-exclamation-triangle text-2xl text-yellow-200"></i>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            2025-05-01 종료 예정
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-lg shadow p-4 border-l-4 border-purple-500">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-600 mb-1">평균 일치율</p>
                                <p class="text-lg font-bold text-purple-600" id="avg-agreement-rate">0%</p>
                            </div>
                            <i class="fas fa-check-double text-2xl text-purple-200"></i>
                        </div>
                        <div class="mt-2 text-xs text-gray-500">
                            목표: ≥99%
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 추가 분석 차트들 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
                <!-- 상태별 분포 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-tasks mr-2 text-purple-600"></i>
                        특허 상태 분포
                    </h3>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gst-gray">등록</span>
                            <span id="stat-registered" class="text-lg font-bold text-green-600">0</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gst-gray">출원</span>
                            <span id="stat-pending" class="text-lg font-bold text-blue-600">0</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gst-gray">포기/거절</span>
                            <span id="stat-rejected" class="text-lg font-bold text-red-600">0</span>
                        </div>
                    </div>
                </div>

                <!-- 기술 분야 TOP 3 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-trophy mr-2 text-yellow-600"></i>
                        주요 기술 분야
                    </h3>
                    <div id="top-categories" class="space-y-3">
                        <!-- JavaScript로 동적 생성 -->
                        <div class="text-sm text-gst-gray text-center py-4">
                            데이터 로딩 중...
                        </div>
                    </div>
                </div>

                <!-- 최근 등록 트렌드 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-chart-area mr-2 text-indigo-600"></i>
                        최근 등록 트렌드
                    </h3>
                    <div id="recent-trend" class="space-y-3">
                        <!-- JavaScript로 동적 생성 -->
                        <div class="text-sm text-gst-gray text-center py-4">
                            데이터 로딩 중...
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 🆕 신규 분석 섹션: Excel 필드 기반 -->
            <div class="bg-white rounded-lg shadow-lg p-6 mb-8 mt-8">
                <h3 class="text-xl font-semibold text-gst-dark mb-6 flex items-center">
                    <i class="fas fa-chart-line mr-3 text-gst-blue"></i>
                    고급 포트폴리오 분석
                    <span class="ml-3 px-3 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">NEW</span>
                </h3>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 국가별 포트폴리오 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-medium text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-globe text-blue-600 mr-2"></i>
                            국가별 특허 포트폴리오
                        </h4>
                        <div class="relative" style="height: 300px;">
                            <canvas id="country-portfolio-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 권리 유형 분포 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-medium text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-certificate text-green-600 mr-2"></i>
                            특허 vs 실용신안
                        </h4>
                        <div class="relative" style="height: 300px;">
                            <canvas id="patent-type-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 존속여부 트렌드 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-medium text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-chart-area text-red-600 mr-2"></i>
                            연도별 존속상태 추이
                        </h4>
                        <div class="relative" style="height: 300px;">
                            <canvas id="validity-trend-chart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 제품 적용 분야 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-medium text-gst-dark mb-4 flex items-center">
                            <i class="fas fa-box-open text-purple-600 mr-2"></i>
                            주요 적용 제품 분야
                        </h4>
                        <div class="relative" style="height: 300px;">
                            <canvas id="product-application-chart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 통계 요약 카드 -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
                    <div class="bg-blue-50 rounded-lg p-4 text-center">
                        <div class="text-3xl font-bold text-blue-600" id="stat-total-countries">-</div>
                        <div class="text-sm text-gray-600 mt-1">출원국 수</div>
                    </div>
                    <div class="bg-green-50 rounded-lg p-4 text-center">
                        <div class="text-3xl font-bold text-green-600" id="stat-valid-patents">-</div>
                        <div class="text-sm text-gray-600 mt-1">유효 특허</div>
                    </div>
                    <div class="bg-purple-50 rounded-lg p-4 text-center">
                        <div class="text-3xl font-bold text-purple-600" id="stat-products">-</div>
                        <div class="text-sm text-gray-600 mt-1">적용 제품</div>
                    </div>
                    <div class="bg-orange-50 rounded-lg p-4 text-center">
                        <div class="text-3xl font-bold text-orange-600" id="stat-avg-validity">-</div>
                        <div class="text-sm text-gray-600 mt-1">평균 존속기간</div>
                    </div>
                </div>
                
                <!-- 추가 통계 카드 (권리 분포 & 고유 명칭) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div class="bg-indigo-50 rounded-lg p-4">
                        <div class="text-sm text-gray-600 mb-2">권리 유형 분포 (Excel B열)</div>
                        <div class="text-lg font-mono text-indigo-700" id="stat-rights">-</div>
                    </div>
                    <div class="bg-teal-50 rounded-lg p-4 text-center">
                        <div class="text-3xl font-bold text-teal-600" id="stat-unique-names">-</div>
                        <div class="text-sm text-gray-600 mt-1">등록특허</div>
                    </div>
                </div>
            </div>
            
            <!-- 🆕 발명자 & 키워드 분석 섹션 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
                <!-- 발명자 네트워크 분석 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-users mr-3 text-purple-600"></i>
                        주요 발명자 TOP 10
                        <span class="ml-3 px-3 py-1 text-xs bg-purple-100 text-purple-800 rounded-full">NEW</span>
                    </h3>
                    <div style="height: 400px;">
                        <canvas id="inventor-chart"></canvas>
                    </div>
                </div>
                
                <!-- 포상 진행 유무 히트맵 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-award mr-3 text-yellow-600"></i>
                        특허 포상 진행 유무
                        <span class="ml-3 px-3 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full">NEW</span>
                    </h3>
                    <div style="height: 400px;">
                        <canvas id="priority-heatmap-chart"></canvas>
                    </div>
                    <div class="mt-4 text-sm text-gray-600">
                        <div class="flex items-center justify-center gap-6">
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 bg-blue-500 rounded"></div>
                                <span>출원포상</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <div class="w-4 h-4 bg-green-500 rounded"></div>
                                <span>등록포상</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 🆕 기술 키워드 & 출원번호 분석 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
                <!-- 기술 키워드 워드클라우드 (시뮬레이션) -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-tags mr-3 text-blue-600"></i>
                        핵심 기술 키워드 TOP 20
                        <span class="ml-3 px-3 py-1 text-xs bg-blue-100 text-blue-800 rounded-full">NEW</span>
                    </h3>
                    <div id="keyword-cloud" class="flex flex-wrap gap-2 justify-center items-center" style="min-height: 300px;">
                        <!-- JavaScript로 동적 생성 -->
                    </div>
                </div>
                
                <!-- 연도별 출원 vs 등록 비교 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-xl font-semibold text-gst-dark mb-4 flex items-center">
                        <i class="fas fa-chart-bar mr-3 text-green-600"></i>
                        연도별 출원 vs 등록 현황
                        <span class="ml-3 px-3 py-1 text-xs bg-green-100 text-green-800 rounded-full">NEW</span>
                    </h3>
                    <div style="height: 350px;">
                        <canvas id="application-vs-registration-chart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 타임라인 섹션 -->
        <section id="timeline" class="mb-24 clearfix">
            <h2 class="text-3xl font-semibold text-gst-dark mb-8 flex items-center">
                <i class="fas fa-timeline mr-3 text-gst-blue"></i>
                기술 발전 타임라인
            </h2>
            
            <div class="bg-white rounded-lg shadow-lg p-6">
                <div id="timeline-container" style="height: 600px;"></div>
            </div>
        </section>
        </div>
    </main>



    <!-- AI Chat Interface (RAG/LLM 통합 준비) -->
    <aside id="ai-chat-panel" class="fixed right-0 top-0 h-full w-full md:w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50" aria-hidden="true" role="complementary" aria-labelledby="ai-chat-title">
        <div class="flex flex-col h-full">
            <!-- Chat Header -->
            <header class="bg-gradient-to-r from-gst-blue to-gst-light-blue text-white p-4 flex justify-between items-center">
                <h2 id="ai-chat-title" class="text-lg font-semibold flex items-center">
                    <i class="fas fa-robot mr-2" aria-hidden="true"></i>
                    AI 특허 분석 도우미
                </h2>
                <button id="ai-chat-close" type="button" class="text-white hover:text-gray-200 transition-colors" aria-label="채팅 닫기">
                    <i class="fas fa-times text-xl" aria-hidden="true"></i>
                </button>
            </header>
            
            <!-- RAG Status Indicator -->
            <div id="rag-status" class="bg-yellow-50 border-b border-yellow-200 p-3 text-sm" role="status" aria-live="polite">
                <div class="flex items-center gap-2 text-yellow-800">
                    <i class="fas fa-info-circle" aria-hidden="true"></i>
                    <span><strong>RAG/LLM 준비 모드:</strong> 벡터 DB 연동 대기 중</span>
                </div>
            </div>
            
            <!-- Chat Messages Area -->
            <div id="ai-chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50" role="log" aria-live="polite" aria-atomic="false">
                <!-- Welcome Message -->
                <div class="flex items-start gap-3">
                    <div class="flex-shrink-0 w-8 h-8 bg-gst-blue rounded-full flex items-center justify-center">
                        <i class="fas fa-robot text-white text-sm" aria-hidden="true"></i>
                    </div>
                    <div class="flex-1 bg-white rounded-lg p-3 shadow-sm">
                        <p class="text-sm text-gray-700">
                            안녕하세요! GST 특허 분석 AI 도우미입니다. 🤖<br>
                            특허 검색, 기술 동향 분석, 유사 특허 찾기 등을 도와드립니다.<br><br>
                            <strong>현재 준비 중인 기능:</strong><br>
                            • 자연어 특허 검색<br>
                            • 특허 요약 및 분석<br>
                            • 유사 특허 추천<br>
                            • 기술 동향 인사이트<br><br>
                            <em class="text-xs text-gray-500">* RAG 벡터 DB와 LLM API 연동 후 정식 서비스 예정</em>
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Chat Input Area -->
            <footer class="border-t border-gray-200 p-4 bg-white">
                <form id="ai-chat-form" class="flex gap-2">
                    <input 
                        type="text" 
                        id="ai-chat-input" 
                        class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gst-blue focus:border-transparent" 
                        placeholder="특허에 대해 질문해보세요..."
                        autocomplete="off"
                        aria-label="AI에게 질문 입력"
                        disabled
                    >
                    <button 
                        type="submit" 
                        class="bg-gst-blue text-white px-4 py-2 rounded-lg hover:bg-gst-dark transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        aria-label="메시지 전송"
                        disabled
                    >
                        <i class="fas fa-paper-plane" aria-hidden="true"></i>
                    </button>
                </form>
                <div class="mt-2 text-xs text-gray-500 text-center">
                    <i class="fas fa-lightbulb mr-1" aria-hidden="true"></i>
                    예시: "스크러버 관련 특허 찾아줘", "2023년 등록된 특허는?"
                </div>
            </footer>
        </div>
    </aside>
    
    <!-- Chat Overlay -->
    <div id="ai-chat-overlay" class="fixed inset-0 bg-black bg-opacity-50 hidden z-40" aria-hidden="true"></div>

    <!-- JavaScript -->
    <script src="js/enhanced-search.js?v=4.0.0" defer></script>
    <script src="js/advanced-search-ui.js?v=4.0.0" defer></script>
    <script src="js/main.js?v=4.0.0" defer></script>
    <script src="js/patents-refactored.js?v=4.0.0" defer></script>
    <script src="js/charts.js?v=4.0.0" defer></script>
    <script src="js/timeline.js?v=4.0.0" defer></script>
    
    <!-- Service Worker Registration - DISABLED -->
    <script>
        // Service Worker 완전 비활성화 및 기존 등록 제거
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(function(registrations) {
                for(let registration of registrations) {
                    registration.unregister().then(function(success) {
                        console.log('🗑️ Service Worker 제거 완료:', success);
                    });
                }
            });
            
            // 모든 캐시 삭제
            if ('caches' in window) {
                caches.keys().then(function(cacheNames) {
                    cacheNames.forEach(function(cacheName) {
                        caches.delete(cacheName);
                        console.log('🗑️ 캐시 삭제:', cacheName);
                    });
                });
            }
            
            console.log('⚠️ Service Worker 비활성화됨 - 프로덕션 배포 시 활성화 필요');
        }
        
        // 데이터 관리 페이지 접근 권한 체크
        async function checkDataManagerAccess(event) {
            try {
                event.preventDefault(); // 기본 동작 방지 (비동기 처리 필요)
                
                // sessionStorage에서 토큰 확인 (auth-manager.js와 동일)
                const token = sessionStorage.getItem('gst_auth_token');
                
                if (!token) {
                    alert('로그인이 필요합니다.');
                    sessionStorage.setItem('redirect_after_login', '/pages/data-manager.html');
                    window.location.href = '/pages/ai-login.html';
                    return false;
                }
                
                // JWT 토큰 파싱
                const payload = JSON.parse(atob(token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
                
                // 토큰 만료 확인
                if (payload.exp && payload.exp * 1000 < Date.now()) {
                    alert('세션이 만료되었습니다. 다시 로그인해주세요.');
                    sessionStorage.removeItem('gst_auth_token');
                    sessionStorage.removeItem('gst_auth_user');
                    sessionStorage.setItem('redirect_after_login', '/pages/data-manager.html');
                    window.location.href = '/pages/ai-login.html';
                    return false;
                }
                
                // 1. Admin은 무조건 허용
                if (payload.role === 'admin') {
                    console.log('[데이터 관리 접근] 관리자 권한 확인:', payload.email);
                    window.location.href = '/pages/data-manager.html';
                    return true;
                }
                
                // 2. JWT에 can_edit_patents 있으면 허용
                if (payload.can_edit_patents === 1) {
                    console.log('[데이터 관리 접근] JWT 편집 권한 확인:', payload.email);
                    window.location.href = '/pages/data-manager.html';
                    return true;
                }
                
                // 3. API로 최신 권한 확인
                console.log('[데이터 관리 접근] API로 최신 권한 확인 중...');
                try {
                    const response = await fetch('/api/auth/check-permission', {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        }
                    });
                    
                    if (response.ok) {
                        const data = await response.json();
                        
                        if (data.success && data.hasPermission) {
                            console.log('[데이터 관리 접근] API 권한 확인 성공:', data.reason);
                            window.location.href = '/pages/data-manager.html';
                            return true;
                        }
                    }
                } catch (apiError) {
                    console.error('[데이터 관리 접근] API 권한 확인 오류:', apiError);
                }
                
                // 4. Fallback 화이트리스트 체크
                const FALLBACK_WHITELIST = [
                    'shlee3@gst-in.com',
                    'kspark1@gst-in.com',
                    'wjbang@gst-in.com',
                    'yjlee@gst-in.com',
                    'admin@gst-in.com',
                    'shkang@gst-in.com'
                ];
                
                if (FALLBACK_WHITELIST.includes(payload.email)) {
                    console.log('[데이터 관리 접근] Fallback 화이트리스트 권한 확인:', payload.email);
                    window.location.href = '/pages/data-manager.html';
                    return true;
                }
                
                // 5. 권한 없음
                alert('데이터 관리 권한이 없습니다.\n\n현재 로그인: ' + payload.email + '\n역할: ' + payload.role + '\n\n관리자에게 권한을 요청하세요.');
                return false;
                
            } catch (error) {
                console.error('권한 확인 오류:', error);
                alert('권한 확인 중 오류가 발생했습니다.\n다시 로그인해주세요.');
                window.location.href = '/pages/ai-login.html';
                return false;
            }
        }
                sessionStorage.removeItem('gst_auth_token');
                sessionStorage.removeItem('gst_auth_user');
                sessionStorage.setItem('redirect_after_login', '/pages/data-manager.html');
                window.location.href = '/pages/ai-login.html';
                return false;
            }
        }
    </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "a26c12e00b5144308d1ce15b668e9ec4"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
