careermate 0.1.2 → 0.1.4

package/dist/install-page/analytics.js

@@ -0,0 +1,97 @@
+// =============================================================================
+// CareerMate marketing-site analytics — careermate.life ONLY.
+//
+// SCOPE: this file loads on the PUBLIC marketing/demo site (install-page/) that
+// Vercel serves. It must NEVER be loaded by the local dashboard (apps/web, bound
+// to 127.0.0.1) — that would break the core promise in AGENTS.md:
+//   "절대 사용자 데이터를 외부로 업로드하지 마라."
+// There is no user career data on this site; only anonymous page/traffic signals.
+//
+// What runs here:
+//   1) Vercel Web Analytics   — cookieless, no PII, no consent banner required.
+//   2) Vercel Speed Insights  — Core Web Vitals, also cookieless.
+//   3) Google Analytics 4     — OPTIONAL. Off until GA_MEASUREMENT_ID is filled in.
+//      Runs under Google Consent Mode v2 with analytics_storage DENIED by default,
+//      i.e. cookieless pings, so it needs no consent banner and stays consistent
+//      with the local-first / privacy-first brand. (Flip consent to 'granted'
+//      later only if you add a real consent UI.)
+//
+// The marketing pages (index.html, start.html) are classic multi-page navigations,
+// so a single pageview on load is enough. The demo (/demo/) is a hash-router SPA,
+// so we emit a virtual pageview on every hashchange — otherwise every sub-route
+// (#/jobs, #/applications, …) would collapse into one "/demo" view.
+// =============================================================================
+(function () {
+  'use strict';
+
+  // ── 1. Vercel Web Analytics (cookieless) ───────────────────────────────────
+  // Queue shim per Vercel's HTML snippet; the injected script drains window.vaq.
+  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
+  loadScript('/_vercel/insights/script.js');
+
+  // ── 2. Vercel Speed Insights (cookieless) — OFF by default ──────────────────
+  // Vercel's Hobby plan allows Speed Insights on only ONE project at a time, and it's
+  // more valuable on the real app than on this rarely-changing static site (use the free
+  // PageSpeed Insights for ad-hoc checks here). Flip to true to load it (needs Enable in
+  // the Vercel dashboard too); leaving it false avoids a dead 404 script request.
+  var ENABLE_SPEED_INSIGHTS = false;
+  if (ENABLE_SPEED_INSIGHTS) {
+    window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
+    loadScript('/_vercel/speed-insights/script.js');
+  }
+
+  // ── 3. Google Analytics 4 (optional, cookieless via Consent Mode v2) ────────
+  // Paste your GA4 measurement ID (looks like "G-XXXXXXXXXX") here to turn it on.
+  // Leaving it blank keeps GA off entirely — Vercel analytics above still runs.
+  var GA_MEASUREMENT_ID = 'G-HK9KWTYCBD';
+  if (/^G-[A-Z0-9]+$/.test(GA_MEASUREMENT_ID)) initGoogleAnalytics(GA_MEASUREMENT_ID);
+
+  // ── Demo SPA: report hash route changes to Vercel as a custom event ─────────
+  // Vercel's script auto-tracks History API navigations but not hashchange.
+  if (location.pathname.indexOf('/demo') === 0) {
+    window.addEventListener('hashchange', function () {
+      window.va('event', { name: 'demo_route', data: { route: currentRoute() } });
+    });
+  }
+
+  // ── helpers ─────────────────────────────────────────────────────────────────
+  function loadScript(src) {
+    var s = document.createElement('script');
+    s.src = src;
+    s.defer = true;
+    document.head.appendChild(s);
+  }
+
+  function currentRoute() {
+    return (location.hash || '').replace(/^#\/?/, '').split('/')[0] || 'home';
+  }
+
+  function initGoogleAnalytics(id) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { window.dataLayer.push(arguments); }
+    window.gtag = gtag;
+    // Deny storage by default → GA runs cookieless. No banner required.
+    gtag('consent', 'default', {
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+      analytics_storage: 'denied',
+    });
+    gtag('js', new Date());
+    // send_page_view:false so we control pageviews (incl. the demo's hash routes).
+    gtag('config', id, { send_page_view: false, anonymize_ip: true });
+    loadScript('https://www.googletagmanager.com/gtag/js?id=' + id);
+
+    sendGaPageview();
+    window.addEventListener('hashchange', sendGaPageview);
+  }
+
+  function sendGaPageview() {
+    if (!window.gtag) return;
+    window.gtag('event', 'page_view', {
+      page_path: location.pathname + location.search + location.hash,
+      page_location: location.href,
+      page_title: document.title,
+    });
+  }
+})();

package/dist/install-page/index.html

@@ -15,6 +15,7 @@
   <title>CareerMate — 내 AI를 커리어 비서로</title>
   <meta name="description" content="Claude Desktop·Claude Code·Codex 같은 로컬 AI 앱에 연결하세요. CareerMate가 이력서·자기소개서·지원 현황을 이 컴퓨터에만 저장하고 MCP로 당신의 AI에 연결합니다." />
   <link rel="canonical" href="https://careermate.life/" />
+  <meta name="google-site-verification" content="MfU5uwl1RNXKklsJhXz2hPCRytjLpCjCXSa2ls5JQH0" />
   <meta name="theme-color" content="#faf8f4" media="(prefers-color-scheme: light)" />
   <meta name="theme-color" content="#14130f" media="(prefers-color-scheme: dark)" />
 
@@ -42,6 +43,8 @@
 
   <link rel="preload" href="fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin />
   <link rel="stylesheet" href="style.css" />
+  <!-- Privacy-friendly analytics for the marketing site only (never the local 127.0.0.1 app). -->
+  <script src="/analytics.js" defer></script>
 </head>
 <body>
   <a class="skip-link" href="#top">본문으로 건너뛰기</a>
@@ -72,68 +75,86 @@
 
     <!-- ========================================================== hero -->
     <header class="hero">
-      <span class="pill-badge">
-        <span class="pill-badge__dot" aria-hidden="true"></span>
-        로컬 전용 · 무료
-      </span>
-      <h1 class="hero__title">
-        내가 쓰던 <span class="accent">AI</span>를<br />
-        나만의 <span class="accent">커리어 비서</span>로
-      </h1>
-      <p class="hero__lede">
-        <strong>공고 분석 · 맞춤 자기소개서 · 지원 현황 추적</strong>을 평소 쓰던 AI에게 말로 시키면,<br />
-        결과가 이 컴퓨터 안에 쌓이고, 한 번 정리한 경력은 대화마다 다시 붙여넣지 않아도 돼요.
-      </p>
-
-      <ul class="trust-strip" aria-label="안심 포인트">
-        <li>내 컴퓨터에만 저장</li>
-        <li>외부 업로드 없음</li>
-        <li>계정·API 키 불필요</li>
-        <li>언제든 삭제</li>
-      </ul>
-
-      <div class="hero__cta">
-        <a class="btn btn--primary" href="start.html">처음이세요? — 내게 맞는 설치법 찾기</a>
-        <a class="btn btn--ghost" href="#install">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
-          바로 설치 방법 보기
-        </a>
+      <div class="hero__main">
+        <span class="pill-badge">
+          <span class="pill-badge__dot" aria-hidden="true"></span>
+          로컬 전용 · 무료
+        </span>
+        <h1 class="hero__title">
+          내가 쓰던 AI를<br />
+          나만의 커리어 비서로
+        </h1>
+        <p class="hero__lede">
+          <strong>공고 분석 · 맞춤 자기소개서 · 지원 현황 추적</strong>을 평소 쓰던 AI에게 말로 시키면, 결과가 이 컴퓨터 안에 쌓입니다. 한 번 정리한 경력은 대화마다 다시 붙여넣지 않아도 돼요.
+        </p>
+
+        <ul class="trust-strip" aria-label="안심 포인트">
+          <li>내 컴퓨터에만 저장</li>
+          <li>외부 업로드 없음</li>
+          <li>계정·API 키 불필요</li>
+          <li>언제든 삭제</li>
+        </ul>
+
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="start.html">처음이세요? — 내게 맞는 설치법 찾기</a>
+          <a class="btn btn--ghost" href="#install">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
+            바로 설치 방법 보기
+          </a>
+        </div>
+
+        <p class="hero__note">
+          CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude&nbsp;Desktop · Claude&nbsp;Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다. 설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
+        </p>
       </div>
 
-      <p class="hero__note">
-        CareerMate는 <strong>내 컴퓨터에서 도는 로컬 도구</strong>예요. 그래서 <span class="nowrap">Claude&nbsp;Desktop · Claude&nbsp;Code · Codex</span>처럼 내 컴퓨터의 프로그램을 띄울 수 있는 AI에서 동작합니다.<br />
-        설치를 마쳤다면 대시보드 <code>http://127.0.0.1:4319</code>에서 내 데이터를 확인하세요.
-      </p>
+      <!-- signature element: CareerMate를 설치하는 방식 자체가 "내 AI에게 한 문장" — 그 순간을 보여준다.
+           장식적 예시라 aria-hidden; 실제 복사 가능한 안내는 #install에 맥락과 함께 있다. -->
+      <aside class="hero__demo" aria-hidden="true">
+        <div class="chat">
+          <div class="chat__head">
+            <span class="chat__dot"></span>
+            내 AI 앱
+          </div>
+          <div class="chat__msg chat__msg--me">
+            <span class="chat__who">나</span>
+            <p>careermate.life/llms-install.txt 읽고, 이 폴더에 CareerMate 설치하고 연결해줘.</p>
+          </div>
+          <div class="chat__msg chat__msg--ai">
+            <span class="chat__who">AI</span>
+            <p>설치했어요. 이제 이력서를 주거나 공고를 붙여넣어 보세요.</p>
+            <ul class="chat__steps">
+              <li>Node 확인 후 이 폴더에 설치</li>
+              <li>데이터는 <code>.cm/data</code>에만 저장</li>
+              <li>대시보드 <code>127.0.0.1:4319</code> 열림</li>
+            </ul>
+          </div>
+        </div>
+        <p class="hero__demo-note">내 AI 앱 대화창에 붙여넣으면 끝 — 터미널이 없어도 돼요.</p>
+      </aside>
     </header>
 
     <!-- ========================================================== how -->
     <section id="how" class="section">
       <div class="section__head">
-        <span class="eyebrow">동작 방식</span>
-        <h2>당신의 AI가 <span class="accent">두뇌</span>,<br />CareerMate는 <span class="accent">커리어 서랍장</span></h2>
-        <p>CareerMate 안에는 AI가 들어 있지 않습니다.<br />생각하는 일은 당신의 AI가, 데이터 보관은 CareerMate가 맡습니다.</p>
+        <h2>당신의 AI가 두뇌, CareerMate는 커리어 서랍장</h2>
+        <p>CareerMate 안에는 AI가 들어 있지 않습니다. 생각하는 일은 당신의 AI가, 데이터 보관은 CareerMate가 맡습니다.</p>
       </div>
       <div class="cards-3">
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.99.13 3 3 0 0 0-1.5 5.5A3 3 0 0 0 6 16.5a3 3 0 0 0 6 .5V5z"/><path d="M12 5a3 3 0 1 1 5.99.13 3 3 0 0 1 1.5 5.5A3 3 0 0 1 18 16.5a3 3 0 0 1-6 .5V5z"/></svg>
-          </div>
-          <h3>1. 당신의 AI와 대화</h3>
-          <p>평소 쓰던 Claude에게 말로 시키면 됩니다.<br />분석·글쓰기 같은 “생각”은 전부 당신의 AI가 합니다.</p>
+          <span class="feature__no">01</span>
+          <h3>당신의 AI와 대화</h3>
+          <p>평소 쓰던 Claude에게 말로 시키면 됩니다. 분석·글쓰기 같은 “생각”은 전부 당신의 AI가 합니다.</p>
         </article>
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 12h6"/><path d="M9 12a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3"/><path d="M15 12a3 3 0 0 0 3 3v2a3 3 0 0 1-3 3"/></svg>
-          </div>
-          <h3>2. 안전하게 연결</h3>
-          <p>표준 연결 방식(MCP)이 AI와 CareerMate를 잇는 다리가 됩니다.<br />AI가 당신의 커리어 기록을 직접 읽고 정리해 저장합니다.</p>
+          <span class="feature__no">02</span>
+          <h3>안전하게 연결</h3>
+          <p>표준 연결 방식(MCP)이 AI와 CareerMate를 잇는 다리가 됩니다. AI가 당신의 커리어 기록을 직접 읽고 정리해 저장합니다.</p>
         </article>
         <article class="feature">
-          <div class="feature__icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/><path d="M7 7h.01M7 17h.01"/></svg>
-          </div>
-          <h3>3. 이 컴퓨터에 저장</h3>
-          <p>모든 데이터는 로컬 SQLite(<code>~/.careermate</code>)에만 저장됩니다.<br />외부 서버로 전송하지 않습니다. 대시보드로 눈으로 확인하세요.</p>
+          <span class="feature__no">03</span>
+          <h3>이 컴퓨터에 저장</h3>
+          <p>모든 데이터는 로컬 SQLite(<code>~/.careermate</code>)에만 저장됩니다. 외부 서버로 전송하지 않고, 대시보드에서 눈으로 볼 수 있습니다.</p>
         </article>
       </div>
     </section>
@@ -141,8 +162,7 @@
     <!-- ====================================================== features -->
     <section id="features" class="section">
       <div class="section__head">
-        <span class="eyebrow">할 수 있는 일</span>
-        <h2>지원 한 건을 <span class="accent">끝까지</span> 함께 처리</h2>
+        <h2>지원 한 건을 끝까지 함께 처리</h2>
         <p>프로필 정리부터 면접 준비까지, AI와 대화만으로 이어집니다.</p>
       </div>
       <div class="checks">
@@ -157,9 +177,8 @@
 
     <!-- ======================================================= preview -->
     <section id="preview" class="section">
-      <div class="section__head">
-        <span class="eyebrow">대시보드</span>
-        <h2>내 데이터를 <span class="accent">눈으로</span> 확인</h2>
+      <div class="section__head section__head--center">
+        <h2>내 데이터를 눈으로 확인</h2>
         <p>모든 기록은 이 컴퓨터의 대시보드(<code>127.0.0.1:4319</code>)에 모입니다.<br>아래는 실제 화면 — 설치 없이 바로 둘러볼 수 있어요.</p>
         <div class="section__cta">
           <a class="btn btn--primary" href="demo/">데모 둘러보기 →</a>
@@ -268,9 +287,8 @@
 
     <!-- ======================================================= install -->
     <section id="install" class="section">
-      <div class="section__head">
-        <span class="eyebrow">설치</span>
-        <h2>내 <span class="accent">AI 앱</span>에 연결하기</h2>
+      <div class="section__head section__head--center">
+        <h2>내 AI 앱에 연결하기</h2>
         <p>빈 폴더 잡고 <strong>한 문장이면 끝.</strong><br />
         터미널이 익숙하면 한 줄 설치, 싫으면 파일 하나로 — <strong>무료도 있습니다.</strong></p>
       </div>
@@ -455,6 +473,9 @@
             <li><strong>내보내기</strong> 자기소개서 등을 <code>~/.careermate/exports</code>로</li>
             <li><strong>삭제·관리</strong> 대시보드 <strong>설정(Settings)</strong>에서 직접</li>
           </ul>
+          <p class="privacy-card__note">
+            위 내용은 <strong>설치하는 앱</strong> 이야기예요. 지금 보고 계신 <strong>이 소개 웹사이트</strong>는 방문 통계를 보려고 쿠키 없는 익명 분석(Vercel Analytics)만 사용하며, 여기엔 어떤 커리어 데이터도 포함되지 않습니다.
+          </p>
         </div>
       </div>
     </section>

package/dist/install-page/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://careermate.life/sitemap.xml

package/dist/install-page/sitemap.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://careermate.life/</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://careermate.life/start</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://careermate.life/demo</loc>
+    <lastmod>2026-06-17</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>

package/dist/install-page/start.html

@@ -19,6 +19,8 @@
   <meta name="theme-color" content="#14130f" media="(prefers-color-scheme: dark)" />
   <link rel="preload" href="fonts/PretendardVariable.woff2" as="font" type="font/woff2" crossorigin />
   <link rel="stylesheet" href="style.css" />
+  <!-- Privacy-friendly analytics for the marketing site only (never the local 127.0.0.1 app). -->
+  <script src="/analytics.js" defer></script>
   <style>
     /* 선택형 위저드 — start.html 전용. style.css 토큰 재사용. */
     .wizard { max-width: 760px; margin: 0 auto; }
@@ -70,13 +72,14 @@
   </nav>
 
   <main id="top">
-    <header class="hero">
-      <span class="pill-badge"><span class="pill-badge__dot" aria-hidden="true"></span> 처음이세요?</span>
-      <h1 class="hero__title">터미널이 뭔지 몰라도<br /><span class="accent">괜찮아요</span></h1>
-      <p class="hero__lede">
-        <strong>쓰는 AI</strong>와 <strong>컴퓨터</strong>만 고르면,<br />
-        당신에게 맞는 설치 길 <strong>하나</strong>를 처음부터 알려드립니다.
-      </p>
+    <header class="hero hero--solo">
+      <div class="hero__main">
+        <span class="pill-badge"><span class="pill-badge__dot" aria-hidden="true"></span> 처음이세요?</span>
+        <h1 class="hero__title">터미널이 뭔지 몰라도 괜찮아요</h1>
+        <p class="hero__lede">
+          <strong>쓰는 AI</strong>와 <strong>컴퓨터</strong>만 고르면, 당신에게 맞는 설치 길 <strong>하나</strong>를 처음부터 알려드립니다.
+        </p>
+      </div>
     </header>
 
     <section class="section" style="padding-top:0">
@@ -112,7 +115,7 @@
           <!-- ===== Claude 유료 → Code 탭 ===== -->
           <div class="path" data-sub="claude">
             <span class="path__tag">당신에겐 — Claude "Code" 탭</span>
-            <h2>Claude 데스크톱 앱의 <span class="accent">Code 탭</span>으로</h2>
+            <h2>Claude 데스크톱 앱의 Code 탭으로</h2>
             <p>이미 Claude를 구독 중이라 추가 비용 없이 가장 매끄럽습니다.<br />앱 안에서 끝나 별도 터미널이 필요 없습니다.</p>
             <ol class="steps">
               <li class="step"><div class="step__no">1</div><div class="step__body">
@@ -147,7 +150,7 @@
           <!-- ===== ChatGPT 유료 → Codex CLI ===== -->
           <div class="path" data-sub="chatgpt">
             <span class="path__tag">당신에겐 — Codex CLI</span>
-            <h2>ChatGPT 구독으로 <span class="accent">Codex</span>에서</h2>
+            <h2>ChatGPT 구독으로 Codex에서</h2>
             <p>ChatGPT는 <strong>Codex를 터미널(CLI)에서</strong> 씁니다 — 명령을 몇 줄 입력합니다.<br />Codex <strong>데스크톱 앱은 등록이 사라질 수 있어</strong> 권장하지 않습니다. 터미널이 부담되면 <a href="#" data-goto-free>터미널 없이 가능한 무료 길</a>도 있습니다.</p>
             <ol class="steps">
               <li class="step"><div class="step__no">1</div><div class="step__body">
@@ -182,7 +185,7 @@
           <!-- ===== 무료/없음 → .mcpb 1순위, Antigravity 2순위 ===== -->
           <div class="path" data-sub="free">
             <span class="path__tag">당신에겐 — 무료로 시작</span>
-            <h2>유료 구독 없이 <span class="accent">무료로</span></h2>
+            <h2>유료 구독 없이 무료로</h2>
             <p>유료 구독이 없어도 됩니다. 터미널이 필요 없는, 가장 쉬운 길부터 안내합니다.</p>
 
             <div class="subcard">

package/dist/install-page/style.css

@@ -183,34 +183,42 @@ code { font-family: var(--mono); }
 .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
 
 /* ----------------------------------------------------------------- hero */
-/* single centered column — headline on top, the two install CTAs right below. */
+/* Asymmetric two columns: headline + CTAs on the left, the "한 문장" install
+   demo (the signature element) on the right. Left-aligned, not centered.
+   Stacks to one column on narrow screens. */
 .hero {
-  max-width: 720px; margin: 0 auto; padding: 66px 24px 8px; text-align: center;
+  max-width: var(--maxw); margin: 0 auto; padding: 72px 24px 8px;
+  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px; align-items: start;
 }
+.hero__main { min-width: 0; }
+/* solo variant (start.html): no demo column — one left-aligned column */
+.hero--solo { grid-template-columns: 1fr; max-width: 760px; }
 /* gentle staggered entrance on load */
 @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
-.hero > * { animation: riseIn .55s cubic-bezier(.22,.61,.36,1) both; }
+.hero__main > *, .hero__demo { animation: riseIn .55s cubic-bezier(.22,.61,.36,1) both; }
 .hero__title { animation-delay: .04s; }
 .hero__lede { animation-delay: .10s; }
 .hero__cta { animation-delay: .18s; }
 .hero__note { animation-delay: .24s; }
+.hero__demo { animation-delay: .16s; }
 .pill-badge {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
   color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border);
 }
 .pill-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
-.hero__title { font-size: clamp(2.05rem, 5vw, 3rem); margin: 20px 0 0; letter-spacing: -0.028em; }
+/* heavy display weight + tight tracking — strong contrast against the 400 lede */
+.hero__title { font-size: clamp(2.15rem, 4.6vw, 3.1rem); font-weight: 800; margin: 20px 0 0; letter-spacing: -0.035em; line-height: 1.1; }
 .hero__lede {
-  font-size: clamp(1rem, 2vw, 1.12rem); color: var(--text-secondary);
-  margin: 18px auto 0; max-width: 37rem;
+  font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: var(--text-secondary);
+  margin: 18px 0 0; max-width: 34rem; line-height: 1.6;
 }
 .hero__lede strong { color: var(--text); font-weight: 650; }
 
 /* trust strip — the four anxiety answers, scannable, restrained (accent only on the ✓) */
 .trust-strip {
-  list-style: none; margin: 16px auto 0; padding: 0; max-width: 40rem;
-  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
+  list-style: none; margin: 20px 0 0; padding: 0; max-width: 38rem;
+  display: flex; flex-wrap: wrap; gap: 8px;
 }
 .trust-strip li {
   display: inline-flex; align-items: center; gap: 6px;
@@ -221,50 +229,71 @@ code { font-family: var(--mono); }
 .trust-strip li::before { content: "✓"; color: var(--accent); font-weight: 700; }
 
 /* hero call-to-action — two install paths */
-.hero__cta { margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
+.hero__cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
 .hero__cta .btn { height: 42px; padding: 0 18px; font-size: 14.5px; }
 
 .hero__note {
-  margin: 18px auto 0; max-width: 38rem; font-size: 12.5px; line-height: 1.6;
+  margin: 20px 0 0; max-width: 36rem; font-size: 12.5px; line-height: 1.65;
   color: var(--text-tertiary);
 }
 .hero__note strong { color: var(--text-secondary); font-weight: 600; }
 .hero__note code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; color: var(--text-secondary); }
 
-/* ----------------------------------------------------------------- sections */
-.section { max-width: var(--maxw); margin: 0 auto; padding: 112px 24px 0; scroll-margin-top: 80px; }
-.section__head { max-width: 46rem; margin: 0 auto 34px; text-align: center; }
-.eyebrow {
-  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
-  text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
-}
-.section__head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
-.section__head p { margin-top: 11px; color: var(--text-secondary); font-size: 1rem; }
-.section__cta { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
-.section__cta-note { font-size: 13px; color: var(--text-tertiary, var(--text-secondary)); }
-
-/* how-it-works */
-.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
-.feature {
+/* signature — the "내 AI에게 한 문장" install demo (the one bold idea on the page).
+   nudged down so its top sits around the headline, not the small pill kicker. */
+.hero__demo { min-width: 0; margin-top: 40px; }
+.hero__demo-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary); }
+.chat {
   background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
-  padding: 22px 20px; transition: border-color .15s;
+  box-shadow: var(--shadow-md); overflow: hidden;
 }
-.feature:hover { border-color: var(--border-strong); }
-.feature__icon {
-  width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 14px;
-  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border);
+.chat__head {
+  display: flex; align-items: center; gap: 8px; padding: 10px 15px;
+  font-family: var(--mono); font-size: 12px; color: var(--text-tertiary);
+  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
 }
-.feature__icon svg { width: 20px; height: 20px; }
-.feature h3 { font-size: 16px; margin-bottom: 6px; }
-.feature p { color: var(--text-secondary); font-size: 14px; }
+.chat__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
+.chat__msg { padding: 15px 16px; }
+.chat__msg + .chat__msg { border-top: 1px solid var(--border); }
+.chat__who { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 7px; }
+.chat__msg--me p {
+  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--code-text);
+  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px;
+}
+.chat__msg--ai p { color: var(--text-secondary); font-size: 14px; }
+.chat__steps { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 6px; }
+.chat__steps li { display: flex; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
+.chat__steps li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
+.chat__steps code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; color: var(--text); }
+
+/* ----------------------------------------------------------------- sections */
+.section { max-width: var(--maxw); margin: 0 auto; padding: 112px 24px 0; scroll-margin-top: 80px; }
+/* left-aligned section heads (centered heads + uppercase eyebrows read as a template) */
+.section__head { max-width: 50rem; margin: 0 0 36px; }
+.section__head h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 750; letter-spacing: -0.02em; }
+.section__head p { margin-top: 12px; color: var(--text-secondary); font-size: 1.02rem; max-width: 42rem; }
+.section__cta { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.section__cta-note { font-size: 13px; color: var(--text-tertiary, var(--text-secondary)); }
+/* Centered head for showcase/guide sections whose body is itself centered (the big
+   carousel screenshot, the reading-column install guide) — a left head would misalign
+   with the centered media below it. Left-aligned heads stay on the content sections above. */
+.section__head--center { text-align: center; margin-left: auto; margin-right: auto; }
+.section__head--center p { margin-left: auto; margin-right: auto; }
+.section__head--center .section__cta { align-items: center; }
+
+/* how-it-works — a quiet numbered sequence, not an icon-card grid */
+.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
+.feature { padding-top: 16px; border-top: 1px solid var(--border-strong); }
+.feature__no { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent); }
+.feature h3 { font-size: 16px; margin: 12px 0 6px; }
+.feature p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
 .feature code { font-family: var(--mono); font-size: .85em; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; }
 
-/* checklist */
-.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 840px; margin: 0 auto; }
+/* capability list — hairline rows, not boxes ("use fewer borders") */
+.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; max-width: 880px; margin: 0; }
 .check {
   display: flex; gap: 12px; align-items: flex-start;
-  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 15px 17px;
+  padding: 16px 0; border-bottom: 1px solid var(--border);
 }
 .check > svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
 .check strong { display: block; font-size: 14.5px; font-weight: 650; }
@@ -309,9 +338,12 @@ code { font-family: var(--mono); }
 :root[data-theme='dark'] .shot__img--dark { display: block; }
 :root:not([data-theme='dark']) .shot__img--light { display: block; }
 
-/* prev / next arrows — overlap the frame edges, vertically centred on the frame */
+/* prev / next arrows — overlap the frame edges, vertically centred on the FRAME
+   (not the frame+caption). top:0 / bottom:caption-height + margin-block:auto centers
+   the arrow within the image area regardless of the responsive frame height — no
+   eyeballed percentage. ~36px ≈ figcaption line (13.5px ×1.65) + its 14px margin-top. */
 .carousel__arrow {
-  position: absolute; top: 44%; transform: translateY(-50%);
+  position: absolute; top: 0; bottom: 36px; margin-block: auto;
   width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
   background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
   box-shadow: var(--shadow-md); cursor: pointer; z-index: 2;
@@ -468,6 +500,7 @@ kbd {
 .privacy-card__list li { font-size: 13.5px; color: var(--text-secondary); }
 .privacy-card__list strong { color: var(--text); margin-right: 8px; }
 .privacy-card__list code { font-family: var(--mono); font-size: .86em; background: var(--bg-sunken); padding: 1px 6px; border-radius: 4px; color: var(--text); }
+.privacy-card__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-tertiary); line-height: 1.6; }
 
 /* footer */
 .foot {
@@ -495,7 +528,9 @@ kbd {
 
 /* responsive */
 @media (max-width: 820px) {
-  .cards-3 { grid-template-columns: 1fr; }
+  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
+  .hero__demo { max-width: 480px; margin-top: 0; }
+  .cards-3 { grid-template-columns: 1fr; gap: 24px; }
   .checks { grid-template-columns: 1fr; }
   .trouble { grid-template-columns: 1fr; }
   /* Logo-only brand on mobile frees room to keep the guided wizard ('처음이세요?')