
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    
    <!-- Preconnect to external origins for better performance -->
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
    <link rel="dns-prefetch" href="https://replit.com">
    
    <!-- Content Security Policy: 개발환경용 모든 리소스 허용 -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: blob:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; style-src * 'unsafe-inline'; font-src * data:;">
    
    <!-- 파비콘 -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    <!-- PWA 매니페스트 -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#1e40af">
    <meta name="msapplication-config" content="/browserconfig.xml">
    
    <!-- Critical CSS inline for faster rendering -->
    <style>
      :root{--law-navy:230 40% 12%;--law-gold:215 70% 45%;--law-light:220 20% 97%}
      body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:0;line-height:1.6}
      .max-w-7xl{max-width:80rem;margin:0 auto}
      .text-center{text-align:center}
      .hero-section{background:linear-gradient(135deg,hsl(var(--law-navy)) 0%,hsl(230 50% 20%) 100%);color:white;padding:5rem 1rem}
      .container{max-width:1200px;margin:0 auto;padding:0 1rem}
      .grid{display:grid}
      .aspect-video{aspect-ratio:16/9;position:relative}
      .aspect-video img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
      img{display:block;max-width:100%;height:auto}
      .w-full.h-auto.rounded-lg.shadow-md{width:100%;height:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover}
      .custom-content img{max-width:100%;height:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;display:block;margin:0 auto}
    </style>
    
    <!-- SEO 메타태그 (페이지별로 동적 변경됨) -->
    <title data-page-title>형사 사건 전문 변호사 | 고채경 변호사</title>
    <meta name="description" data-page-description content="대한변호사협회 형사법 전문 변호사 고채경 변호사가 경찰 단계부터 재판까지 투명한 소통으로 의뢰인과 함께합니다. 성범죄, 경제범죄, 교통사고 등 형사사건 상담 접수" />
    <meta name="keywords" data-page-keywords content="고채경변호사, 형사전문변호사, 대한변호사협회, 성범죄, 경제범죄, 교통사고, 형사사건상담" />
    
    <!-- Open Graph 메타태그 -->
    <meta property="og:title" content="형사 사건 전문 | 고채경 변호사" />
    <meta property="og:description" content="대한변호사협회 형사법 전문 변호사 고채경 변호사가 경찰 단계부터 재판까지 투명한 소통으로 의뢰인과 함께합니다. 성범죄, 경제범죄, 교통사고 등 형사사건 상담 접수" />
    <meta property="og:type" content="website" />
    
    <!-- Twitter Card 메타태그 -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="형사 사건 전문 | 고채경 변호사" />
    <meta name="twitter:description" content="대한변호사협회 형사법 전문 변호사 고채경 변호사가 경찰 단계부터 재판까지 투명한 소통으로 의뢰인과 함께합니다. 성범죄, 경제범죄, 교통사고 등 형사사건 상담 접수" />
    <script type="module" crossorigin src="/assets/index-CivXjBqo.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-C2ENag_1.css">
  </head>
  <body>
    <div id="root"></div>
    
    <!-- Async CSS loading for non-critical styles -->
    <link rel="preload" href="/assets/index-DZPd4rJD.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="/assets/index-DZPd4rJD.css"></noscript>
    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js" defer></script>
  </body>
</html>
