careermate 0.1.1 → 0.1.3

package/dist/install-page/start.html

@@ -6,7 +6,7 @@
   <script>
     (function () {
       try {
-        var t = window.localStorage.getItem('cf-theme');
+        var t = window.localStorage.getItem('careermate-theme') || window.localStorage.getItem('cf-theme');
         document.documentElement.setAttribute('data-theme', t === 'light' || t === 'dark' ? t : 'dark');
       } catch (e) { document.documentElement.setAttribute('data-theme', 'dark'); }
     })();
@@ -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">
@@ -129,13 +132,15 @@
               </div></li>
               <li class="step"><div class="step__no">4</div><div class="step__body">
                 <h3>이 문장 한 번 붙여넣기</h3>
+                <p class="paste-note">💬 Code 탭의 <strong>대화창에</strong> 붙여넣으세요 — 터미널 명령이 아니에요. 이 문장은 공개 안내 페이지만 읽어 설치하며, <strong>당신의 이력서·개인정보는 외부로 올라가지 않아요.</strong></p>
                 <div class="code"><button class="copy-btn" type="button" data-copy-target="p-claude">복사</button>
                   <pre id="p-claude">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre></div>
                 <p class="step__tip"><strong>Node가 없어도 됩니다.</strong> 필요하면 Claude가 먼저 확인하고 설치까지 도와줍니다.<br />직접 받으려면 아래 <strong>'필요한 프로그램 받기'</strong>의 Node.js를 보세요. 설치 중 뜨는 허용 창은 눌러 주세요.</p>
               </div></li>
               <li class="step"><div class="step__no">5</div><div class="step__body">
                 <h3>앱 재시작 → 확인</h3>
-                <p>Claude 앱을 완전히 껐다 켜고(처음 한 번 MCP 승인을 허용), <strong>"커리어메이트 연결됐는지 확인해줘"</strong>라고 말하면 됩니다.</p>
+                <p>Claude 앱을 완전히 껐다 켜고(처음 한 번 MCP 승인 허용), <strong>"커리어메이트 연결됐는지 확인해줘"</strong>라고 말하면 끝.</p>
+                <p class="recover"><strong>도구가 안 보이면?</strong> 앱을 트레이까지 <strong>완전히 종료</strong>했다 다시 켜고, 처음 뜬 승인 창을 허용했는지 확인하세요. 그래도 안 되면 <a href="index.html#install">파일로 설치(.mcpb)</a>나 설치 전체의 <a href="index.html#install">문제가 생겼을 때</a>를 보세요.</p>
               </div></li>
             </ol>
             <div class="filenote">📎 <strong>이력서 넣는 법:</strong> 가장 쉬운 방법은 <strong>이력서 내용을 대화창에 붙여넣기</strong>입니다. 또는 작업 폴더에 파일을 넣고 <em>"이력서.pdf 읽어서 등록해줘"</em>라고 하거나 채팅에 직접 첨부하세요. (스캔본·보안 PDF는 안 읽힐 수 있습니다 → 그땐 텍스트로 붙여넣으세요.)</div>
@@ -145,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">
@@ -163,13 +168,15 @@
               </div></li>
               <li class="step"><div class="step__no">3</div><div class="step__body">
                 <h3>빈 폴더에서 codex 실행 → 이 문장</h3>
+                <p class="paste-note">💬 실행한 <strong>codex 안에</strong> 붙여넣으세요 — AI에게 보내는 메시지예요(쉘 명령이 아님). 공개 안내만 읽어 설치하며, <strong>당신의 데이터는 외부로 올라가지 않아요.</strong></p>
                 <div class="code"><button class="copy-btn" type="button" data-copy-target="p-codex">복사</button>
                   <pre id="p-codex">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre></div>
                 <p class="step__tip">설치 중 <strong>네트워크 허용</strong>을 물으면 한 번 허용하세요(npm 다운로드 때문).</p>
               </div></li>
               <li class="step"><div class="step__no">4</div><div class="step__body">
                 <h3>확인</h3>
-                <p>Codex 안에서 <code>/mcp</code>를 입력해 <code>careermate</code>가 보이면 연결된 것입니다.</p>
+                <p>Codex 안에서 <code>/mcp</code>를 입력해 <code>careermate</code>가 보이면 연결 성공.</p>
+                <p class="recover"><strong>안 보이면?</strong> <code>node --version</code>이 v22.5 이상인지, Codex를 껐다 켰는지 확인하세요. 그래도 안 되면 설치 전체의 <a href="index.html#install">문제가 생겼을 때</a>를 참고하세요.</p>
               </div></li>
             </ol>
             <div class="filenote">📎 <strong>이력서 넣는 법:</strong> 첨부 기능이 없으니, 작업 폴더에 파일을 넣고 <em>"./이력서.pdf 읽어서 등록해줘"</em>라고 하세요. PDF가 안 읽히면 내용을 <strong>텍스트로 붙여넣으세요.</strong></div>
@@ -178,12 +185,12 @@
           <!-- ===== 무료/없음 → .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">
               <strong>① 1순위 — Claude 데스크톱 + 파일 설치(터미널 없이)</strong>
-              <p class="hint" style="margin:.3rem 0 .8rem">Claude 무료 계정이면 됩니다. 터미널·Node 없이 파일 하나로 끝납니다.</p>
+              <p class="hint" style="margin:.3rem 0 .8rem">Claude 무료 계정이면 됩니다. 터미널·Node 없이 파일 하나로 끝.</p>
               <ol class="steps">
                 <li class="step"><div class="step__no">1</div><div class="step__body">
                   <h3>Claude 데스크톱 설치 → 로그인(무료 OK)</h3>
@@ -199,11 +206,11 @@
                 </div></li>
                 <li class="step"><div class="step__no">4</div><div class="step__body">
                   <h3>재시작 → 확인</h3>
-                  <p>앱을 껐다 켜고 <strong>"커리어메이트 연결됐는지 확인해줘"</strong>라고 말하세요. 도구가 보이면 됩니다.</p>
+                  <p>앱을 껐다 켜고 <strong>"커리어메이트 연결됐는지 확인해줘"</strong>. 도구가 보이면 끝.</p>
                 </div></li>
               </ol>
               <div class="filenote">📎 <strong>이력서 넣는 법:</strong> Claude 채팅창에 파일을 <strong>직접 첨부</strong>하면 됩니다(가장 쉬움).</div>
-              <p class="hint" style="margin-top:.7rem">⚠️ 만약 <strong>도구가 안 뜨면</strong>(Claude 내장 Node 버전 문제일 수 있음) → 아래 ②를 쓰세요.</p>
+              <p class="hint" style="margin-top:.7rem">⚠️ <strong>도구가 안 뜨면</strong>(Claude 내장 Node 버전 문제일 수 있습니다) → 아래 ②를 쓰세요.</p>
             </div>
 
             <div class="subcard">
@@ -216,12 +223,14 @@
                 </div></li>
                 <li class="step"><div class="step__no">2</div><div class="step__body">
                   <h3>빈 폴더 열고 → 이 문장</h3>
+                  <p class="paste-note">💬 Antigravity의 <strong>대화창에</strong> 붙여넣으세요 — 터미널 명령이 아니에요. 공개 안내만 읽어 설치하며, <strong>당신의 데이터는 외부로 올라가지 않아요.</strong></p>
                   <div class="code"><button class="copy-btn" type="button" data-copy-target="p-anti">복사</button>
                     <pre id="p-anti">https://careermate.life/llms-install.txt 를 읽고, 그 안내대로 CareerMate를 이 폴더에 설치하고 연결해줘. 데이터도 이 폴더의 .cm/data 안에 저장하고, Node 설치처럼 시스템에 바꿀 게 있으면 실행 전에 먼저 알려줘. 설치가 끝나면 앱 재시작 방법과 이력서를 주는 법, 대시보드 주소(http://127.0.0.1:4319)도 알려줘.</pre></div>
                 </div></li>
                 <li class="step"><div class="step__no">3</div><div class="step__body">
                   <h3>확인</h3>
                   <p>연결 상태를 확인하고(보통 <code>/mcp</code> 또는 "연결됐는지 확인해줘") 끝.</p>
+                  <p class="recover"><strong>안 보이면?</strong> 앱을 완전히 껐다 켜고 다시 시도하세요. 막히면 설치 전체의 <a href="index.html#install">문제가 생겼을 때</a>를 보세요.</p>
                 </div></li>
               </ol>
               <div class="filenote">📎 <strong>이력서 넣는 법:</strong> 작업 폴더에 파일을 넣고 파일명으로 지시. 안 읽히면 텍스트로 붙여넣기.</div>
@@ -275,39 +284,10 @@
 
   <div class="sr-only" role="status" aria-live="polite" id="copy-status"></div>
 
+  <script src="landing.js"></script>
   <script>
     (function () {
       'use strict';
-      var status = document.getElementById('copy-status');
-      // --- clipboard ---
-      function legacyCopy(text) {
-        var ta = document.createElement('textarea');
-        ta.value = text; ta.setAttribute('readonly', ''); ta.style.position = 'absolute'; ta.style.left = '-9999px';
-        document.body.appendChild(ta); ta.select();
-        var ok = false; try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
-        document.body.removeChild(ta); return ok;
-      }
-      function copyText(text, onok) {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          navigator.clipboard.writeText(text).then(onok, function () { if (legacyCopy(text)) onok(); });
-        } else if (legacyCopy(text)) { onok(); }
-      }
-      document.querySelectorAll('.copy-btn').forEach(function (btn) {
-        btn.addEventListener('click', function () {
-          var src = document.getElementById(btn.getAttribute('data-copy-target'));
-          if (!src) return;
-          copyText(src.textContent || '', function () {
-            var o = btn.textContent; btn.textContent = '복사됨'; btn.classList.add('copied');
-            if (status) status.textContent = '클립보드에 복사되었습니다.';
-            window.setTimeout(function () { btn.textContent = o; btn.classList.remove('copied'); }, 1600);
-          });
-        });
-      });
-
-      // --- theme toggle ---
-      var root = document.documentElement, toggle = document.getElementById('theme-toggle');
-      function isDark() { var t = root.getAttribute('data-theme'); if (t === 'dark') return true; if (t === 'light') return false; return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; }
-      if (toggle) toggle.addEventListener('click', function () { var n = isDark() ? 'light' : 'dark'; root.setAttribute('data-theme', n); try { window.localStorage.setItem('cf-theme', n); } catch (e) {} });
 
       // --- wizard ---
       var result = document.getElementById('result');

package/dist/install-page/style.css

@@ -109,6 +109,19 @@ a:hover { text-decoration: underline; }
 code { font-family: var(--mono); }
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
 ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
+/* skip link — hidden until focused, then drops into the top-left */
+.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-200%);
+  background: var(--accent); color: var(--text-on-accent); padding: 8px 14px; border-radius: var(--radius-sm);
+  font-weight: 600; transition: transform .15s; }
+.skip-link:focus { transform: none; outline: 2px solid var(--text-on-accent); outline-offset: 2px; }
+/* agent-prompt paste boxes: a caption so they read as "message to the AI", not a shell command,
+   plus the privacy reassurance at the highest-anxiety paste moment */
+.paste-note { font-size: .86rem; line-height: 1.55; color: var(--text-secondary);
+  background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
+  padding: .55rem .8rem; margin: 0 0 .5rem; }
+.paste-note strong { color: var(--text); font-weight: 650; }
+.recover { font-size: .88rem; line-height: 1.55; color: var(--text-secondary); margin: .5rem 0 0; }
+.recover strong { color: var(--text); }
 
 .accent { color: var(--accent); }
 .nowrap { white-space: nowrap; }
@@ -170,73 +183,117 @@ 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: 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;
+  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
+  background: var(--surface); border: 1px solid var(--border);
+  padding: 5px 11px; border-radius: 999px;
+}
+.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; }
-
-/* 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);
+}
+.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;
 }
-.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__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; }
@@ -281,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;
@@ -440,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 {
@@ -467,10 +528,17 @@ 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; }
-  .nav__links { display: none; }
+  /* Logo-only brand on mobile frees room to keep the guided wizard ('처음이세요?')
+     in the sticky nav without overflow; section anchors collapse, and '설치하기'
+     stays in nav__actions so install is never lost. */
+  .nav__name { display: none; }
+  .nav__links a { display: none; }
+  .nav__links a[href="start.html"] { display: inline-flex; }
 }
 @media (max-width: 540px) {
   .hero { padding-top: 46px; }