<!doctype html>
<html lang="ko">
  <head>
    <script>
                  (function () {
                    var m = location.pathname.match(/^\/(en|zh|ja)(\/|$)/);
                    window.__i18n_preload_lang = m ? m[1] : 'ko';
                    
                    // 프로덕션 환경에서만 작동
                    if (m && m[1] && !location.hostname.includes('localhost')) {
                      var langFiles = {"en":"assets/lang-en-DEUUwab-.js","ja":"assets/lang-ja-Cj_-cFXN.js","zh":"assets/lang-zh-St6oq8Qc.js"};
                      if (langFiles[m[1]]) {
                        var link = document.createElement('link');
                        link.rel = 'modulepreload';
                        link.href = '/' + langFiles[m[1]];
                        document.head.appendChild(link);
                      }
                    }
                  })();
                </script>

    <meta charset="UTF-8" />
    <!-- Inline SVG favicon for optimal performance -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23C084FC'/%3E%3Cstop offset='50%25' style='stop-color:%238B5CF6'/%3E%3Cstop offset='100%25' style='stop-color:%236366F1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='8' fill='url(%23g)'/%3E%3Cpath d='M11 10h10l-5 12-5-12z' fill='white' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='white' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E">
    <script>
      // Fallback favicon for browsers that don't support SVG favicons
      (function() {
        var link = document.querySelector("link[rel*='icon']");
        if (link && link.href && link.href.indexOf('data:image/svg') === -1) {
          // SVG favicon failed to load or not supported
          var fallback = document.createElement('link');
          fallback.rel = 'icon';
          fallback.type = 'image/x-icon';
          fallback.href = '/favicon.ico';
          document.head.appendChild(fallback);
        }
      })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- iOS Web App Meta Tags -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Aii.gg">
    <link rel="apple-touch-icon" href="/apple-icon-152x152.png">
    
    <!-- Standard Mobile Web App Meta Tags -->
    <meta name="mobile-web-app-capable" content="yes">
    
    <!-- Android Web App Meta Tags -->
    <meta name="theme-color" content="#4F46E5">
    
    <title>Aii.gg: 생산성 100배 AI 서비스</title>
    
    <!-- Preload critical resources with fallback -->
    <link rel="preload" as="image" href="/lg.png" type="image/png" fetchpriority="high">
    <link rel="dns-prefetch" href="https://gtmtiuthabnoukdnfioc.supabase.co">
    <link rel="preconnect" href="https://gtmtiuthabnoukdnfioc.supabase.co" crossorigin>
    
    <!-- Primary Meta Tags -->
    <meta name="title" content="Aii.gg: 생산성 100배 AI 서비스" />
    <meta name="description" content="AI를 활용한 슬라이드 제작, 소설 작성, 여행 계획, 프로젝트 관리, 채팅 분석 등 다양한 생산성 도구를 제공합니다." />
    <meta name="keywords" content="AI, 인공지능, 생산성 도구, 슬라이드 제작, 소설 작성, 여행 계획, 프로젝트 관리, 채팅 분석" />
    <meta name="author" content="aii.gg" />
    
    <!-- Dynamic hreflang generation -->
    <script>
      (function() {
        const langs = ['ko', 'en', 'zh', 'ja'];
        const currentPath = window.location.pathname;
        const baseUrl = window.location.origin;
        
        langs.forEach(lang => {
          const link = document.createElement('link');
          link.rel = 'alternate';
          link.hreflang = lang;
          
          if (lang === 'ko') {
            link.href = baseUrl + currentPath.replace(/^\/(en|zh|ja)/, '');
          } else {
            link.href = baseUrl + '/' + lang + currentPath.replace(/^\/(ko|en|zh|ja)/, '');
          }
          
          document.head.appendChild(link);
        });
        
        // x-default
        const defaultLink = document.createElement('link');
        defaultLink.rel = 'alternate';
        defaultLink.hreflang = 'x-default';
        defaultLink.href = baseUrl + '/';
        document.head.appendChild(defaultLink);
      })();
    </script>
    
    <!-- Open Graph / Facebook (언어별 URL i18n 적용, 서비스 설명 최신화) -->
    <meta property="og:type" content="website" />
    <!-- Korean -->
    <meta property="og:url" content="https://aii.gg/" />
    <meta property="og:title" content="aii.gg: 생산성 100배 AI 서비스" />
    <meta property="og:description" content="AI 캐릭터 채팅, AI 챗봇 위젯, 소설 어시스턴스, 이상형 찾기, 교육 서비스, 자막 파일 번역, 코딩 학습 등 다양한 생산성 도구를 제공합니다." />
    <meta property="og:locale" content="ko_KR" />
    <!-- English -->
    <meta property="og:url" content="https://aii.gg/en" />
    <meta property="og:title" content="Aii.gg: 100x Productivity AI Service" />
    <meta property="og:description" content="AI character chat, AI chatbot widget, novel assistant, ideal type finder, education services, subtitle file translation, coding learning and more productivity tools." />
    <meta property="og:locale" content="en_US" />
    <!-- Japanese -->
    <meta property="og:url" content="https://aii.gg/ja" />
    <meta property="og:title" content="Aii.gg: 生産性100倍のAIサービス" />
    <meta property="og:description" content="AIキャラクターチャット、AIチャットボットウィジェット、小説アシスタント、理想のタイプ診断、教育サービス、字幕ファイル翻訳、コーディング学習など多彩な生産性ツールを提供します。" />
    <meta property="og:locale" content="ja_JP" />
    <!-- Chinese -->
    <meta property="og:url" content="https://aii.gg/zh" />
    <meta property="og:title" content="Aii.gg：生产力提升100倍的AI服务" />
    <meta property="og:description" content="提供AI角色聊天、AI聊天机器人小部件、小说助手、理想型匹配、教育服务、字幕文件翻译、编程学习等多种生产力工具。" />
    <meta property="og:locale" content="zh_CN" />
    <!-- Spanish -->
    <meta property="og:url" content="https://aii.gg/es" />
    <meta property="og:title" content="Aii.gg: Servicio de IA para multiplicar tu productividad por 100" />
    <meta property="og:description" content="Chat de personajes IA, widget de chatbot IA, asistente de novelas, buscador de pareja ideal, servicios educativos, traducción de archivos de subtítulos, aprendizaje de programación y más herramientas de productividad." />
    <meta property="og:locale" content="es_ES" />
    <!-- Portuguese -->
    <meta property="og:url" content="https://aii.gg/pt" />
    <meta property="og:title" content="Aii.gg: Serviço de IA para multiplicar sua produtividade por 100" />
    <meta property="og:description" content="Chat de personagem IA, widget de chatbot IA, assistente de romance, buscador de tipo ideal, serviços educacionais, tradução de arquivos de legendas, aprendizado de programação e outras ferramentas de produtividade." />
    <meta property="og:locale" content="pt_PT" />
    <!-- French -->
    <meta property="og:url" content="https://aii.gg/fr" />
    <meta property="og:title" content="Aii.gg : Service IA pour multiplier votre productivité par 100" />
    <meta property="og:description" content="Chat de personnage IA, widget de chatbot IA, assistant de roman, recherche d'idéal, services éducatifs, traduction de fichiers de sous-titres, apprentissage du codage et autres outils de productivité." />
    <meta property="og:locale" content="fr_FR" />
    <!-- German -->
    <meta property="og:url" content="https://aii.gg/de" />
    <meta property="og:title" content="Aii.gg: 100-facher Produktivitäts-Boost durch KI" />
    <meta property="og:description" content="KI-Charakter-Chat, KI-Chatbot-Widget, Roman-Assistent, Traumpartner-Finder, Bildungsdienste, Untertitel-Übersetzung, Coding-Lernen und weitere Produktivitätstools." />
    <meta property="og:locale" content="de_DE" />
    <!-- Italian -->
    <meta property="og:url" content="https://aii.gg/it" />
    <meta property="og:title" content="Aii.gg: Servizio IA per aumentare la produttività di 100 volte" />
    <meta property="og:description" content="Chat con personaggi IA, widget chatbot IA, assistente per romanzi, ricerca del tipo ideale, servizi educativi, traduzione di file di sottotitoli, apprendimento della programmazione e altri strumenti di produttività." />
    <meta property="og:locale" content="it_IT" />
    <!-- 기타 언어(기본값: 영어) -->
    <meta property="og:url" content="https://aii.gg/en" />
    <meta property="og:title" content="Aii.gg: 100x Productivity AI Service" />
    <meta property="og:description" content="AI character chat, AI chatbot widget, novel assistant, ideal type finder, education services, subtitle file translation, coding learning and more productivity tools." />
    <meta property="og:image" content="https://aii.gg/lg.png" />
    <meta property="og:site_name" content="aii.gg" />
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://aii.gg/" />
    <meta property="twitter:title" content="Aii.gg: 100x Productivity AI Service" />
    <meta property="twitter:description" content="AI-powered tools for slide creation, novel writing, travel planning, project management, chat analysis, and more productivity boosters." />
    <meta property="twitter:image" content="https://aii.gg/lg.png" />
    <!-- Additional SEO Tags -->
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <link rel="canonical" href="https://aii.gg/" />
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "aii.gg",
      "url": "https://aii.gg",
      "description": "Aii.gg: 생산성 100배 AI 서비스",
      "applicationCategory": "ProductivityApplication",
      "operatingSystem": "Any",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "KRW"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "ratingCount": "1024"
      }
    }
    </script>
    <style>
      /* Critical CSS for instant theme (see src/styles/critical.css) */
      :root {
        color-scheme: light dark;
        /* Light theme defaults */
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --border: 214.3 31.8% 91.4%;
      }
      
      @media (prefers-color-scheme: dark) {
        :root {
          --background: 222.2 84% 4.9%;
          --foreground: 210 40% 98%;
          --card: 222.2 84% 4.9%;
          --card-foreground: 210 40% 98%;
          --primary: 210 40% 98%;
          --primary-foreground: 222.2 47.4% 11.2%;
          --muted: 217.2 32.6% 17.5%;
          --muted-foreground: 215 20.2% 65.1%;
          --border: 217.2 32.6% 17.5%;
        }
      }
      
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
      }
      
      /* Prevent layout shift and prepare app container */
      #root {
        height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .app-container {
        flex: 1;
        width: 100%;
        min-height: calc(100vh - 4rem);
        overflow-y: auto;
        overflow-x: hidden;
        background: hsl(var(--background));
        -webkit-overflow-scrolling: touch;
      }
    </style>
    <script>
      // Minimal theme setup - read from Zustand store (theme-storage)
      (function() {
        const stored = localStorage.getItem('theme-storage');
        if (stored) {
          try {
            const parsed = JSON.parse(stored);
            const theme = parsed?.state?.theme;
            if (theme && theme !== 'system') {
              document.documentElement.classList.add(theme);
            } else {
              // theme is 'system' or not found, use system preference
              const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
              document.documentElement.classList.add(isDark ? 'dark' : 'light');
            }
          } catch (e) {
            // JSON parse error, fallback to system
            const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            document.documentElement.classList.add(isDark ? 'dark' : 'light');
          }
        } else {
          // No stored theme, use system preference
          const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
          document.documentElement.classList.add(isDark ? 'dark' : 'light');
        }
      })();
    </script>
    <!-- Mobile styles loaded dynamically by App.tsx -->
    <script type="module" crossorigin src="/assets/index-DOCr5_Lz.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-Dx5X_1Fl.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BED3r4GZ.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
