사이트 인터랙티브 워크스테이션 확장 + 감사 폴리시 재적용 + 원클릭 릴리스 도구 — 병행 세션 확장분(히어로 3탭 워크스테이션 시뮬레이터, 비교 섹션(기존 방식 vs MEDIABROWSER), 가이드 단축키 섹션(kbd), 스포트라이트 카드, build/release.ps1 원클릭 릴리스(-Publish/-DeploySite), build-remote.ps1 PowerShell 원격 빌드, upload-release-asset.ps1 로컬 실행 지원(.env 자동 로드·-Publish 승격·-Repo), fetch-releases.mjs 인증·폴백)을 수용하고, 덮여 사라진 감사 폴리시를 새 베이스에 재적용: 타이틀 em대시 제거+OG 메타(index/guide), 아이브로우 6→1(장식 점 제거), 히어로 2줄 헤드라인·20단어 서브·CTA 라벨 단일화·신뢰 스트립 제거, 파이프라인 3분리 카드→단일 머신드 레일 재구성, 과장 카피 완화(100%·1초·초고속·완벽), 시뮬레이터 예시 캡션, skip-link·focus-visible·hero__grid min-width:0(모바일 오버플로) 재적용 — 데스크톱/모바일 검증(scrollWidth 375==375, 아이브로우 1, 레일·캡션·탭 3종 확인), deploy-site.ps1 로 재배포 완료

site/guide.html

@@ -7,7 +7,7 @@
 <meta name="description" content="MEDIABROWSER 설치부터 첫 스트림 감지, 세그먼트 이어받기, 모바일 컴패니언 QR 연결까지 단계별 안내.">
 <meta property="og:type" content="website">
 <meta property="og:title" content="사용 안내 - MEDIABROWSER">
-<meta property="og:description" content="설치, 첫 영상 감지, 다운로드 관리, 휴대폰 QR 연결까지 단계별로 안내합니다.">
+<meta property="og:description" content="설치, 첫 영상 감지, 다운로드 관리, 휴대폰 QR 연결, 단축키까지 단계별로 안내합니다.">
 <meta property="og:url" content="https://mediabrowser-7r4.pages.dev/guide.html">
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='24' fill='%233b82f6'/><path d='M50 22v36M36 44l14 14 14-14M28 74h44' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css">
@@ -31,6 +31,7 @@
     </a>
     <div class="nav__links">
       <a class="nav__link" href="index.html#how-it-works">작동 방식</a>
+      <a class="nav__link" href="index.html#compare">비교</a>
       <a class="nav__link" href="index.html#features">핵심 기능</a>
       <a class="nav__link" href="index.html#mobile">모바일 연결</a>
       <a class="nav__link" href="guide.html" aria-current="page">사용 안내</a>
@@ -51,6 +52,7 @@
 <div class="mobile-menu-overlay" id="mobile-menu" aria-hidden="true">
   <div class="mobile-menu-links">
     <a class="mobile-menu-link" href="index.html#how-it-works">작동 방식</a>
+    <a class="mobile-menu-link" href="index.html#compare">비교</a>
     <a class="mobile-menu-link" href="index.html#features">핵심 기능</a>
     <a class="mobile-menu-link" href="index.html#mobile">모바일 연결</a>
     <a class="mobile-menu-link" href="guide.html" aria-current="page">사용 안내</a>
@@ -63,7 +65,7 @@
   <div class="wrap">
     <div class="reveal">
       <h1 style="font-size:clamp(2.4rem,4.2vw,3.5rem)">사용 안내</h1>
-      <p class="sub" style="margin-top:14px">설치부터 첫 영상 다운로드, 라이브러리 정리, 휴대폰 무선 연결까지. 단계별로 따라오시면 3분 안에 모든 기능을 손쉽게 활용할 수 있습니다.</p>
+      <p class="sub" style="margin-top:14px">설치부터 첫 영상 다운로드, 라이브러리 정리, 휴대폰 무선 연결까지 단계별로 안내합니다.</p>
     </div>
   </div>
 </header>
@@ -76,13 +78,14 @@
     <a class="guide-toc-link" href="#first">2. 첫 영상 자동 감지</a>
     <a class="guide-toc-link" href="#manage">3. 다운로드 및 라이브러리</a>
     <a class="guide-toc-link" href="#phone">4. 휴대폰 QR 연결</a>
-    <a class="guide-toc-link" href="#faq">5. 자주 묻는 질문</a>
+    <a class="guide-toc-link" href="#shortcuts">5. 단축키 안내</a>
+    <a class="guide-toc-link" href="#faq">6. 자주 묻는 질문</a>
   </aside>
 
   <!-- Main Content -->
   <main>
     <!-- Step 1: Install -->
-    <section class="bezel-shell guide-step-card reveal" id="install">
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="install">
       <div class="guide-step-head">
         <div class="guide-step-num">1</div>
         <h2>설치 및 환경 구성</h2>
@@ -114,7 +117,7 @@
     </section>
 
     <!-- Step 2: First Download -->
-    <section class="bezel-shell guide-step-card reveal" id="first">
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="first">
       <div class="guide-step-head">
         <div class="guide-step-num">2</div>
         <h2>첫 영상 자동 감지 &amp; 다운로드</h2>
@@ -142,7 +145,7 @@
     </section>
 
     <!-- Step 3: Download Management -->
-    <section class="bezel-shell guide-step-card reveal" id="manage">
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="manage">
       <div class="guide-step-head">
         <div class="guide-step-num">3</div>
         <h2>다운로드 관리 및 라이브러리 아카이빙</h2>
@@ -170,7 +173,7 @@
     </section>
 
     <!-- Step 4: Phone Companion -->
-    <section class="bezel-shell guide-step-card reveal" id="phone">
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="phone">
       <div class="guide-step-head">
         <div class="guide-step-num">4</div>
         <h2>휴대폰 무선 연결 및 로컬 스트리밍</h2>
@@ -197,10 +200,50 @@
       </div>
     </section>
 
-    <!-- Step 5: FAQ -->
-    <section class="bezel-shell guide-step-card reveal" id="faq">
+    <!-- Step 5: Shortcuts Table -->
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="shortcuts">
       <div class="guide-step-head">
         <div class="guide-step-num">5</div>
+        <h2>주요 키보드 단축키</h2>
+      </div>
+      <p>키보드만으로 빠르고 편리하게 브라우징과 다운로드를 제어할 수 있습니다.</p>
+
+      <table class="shortcut-table">
+        <thead>
+          <tr>
+            <th>단축키</th>
+            <th>동작 설명</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+            <td>우측 다운로드 패널 열기 / 닫기</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+            <td>다운로드 완료 라이브러리 아카이브 열기</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>T</kbd></td>
+            <td>새 브라우징 탭 열기</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></td>
+            <td>전체 다운로드 일괄 일시정지 / 일괄 재개 토글</td>
+          </tr>
+          <tr>
+            <td><kbd>F5</kbd> 또는 <kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+            <td>현재 브라우징 탭 새로고침</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <!-- Step 6: FAQ -->
+    <section class="bezel-shell spotlight-card guide-step-card reveal" id="faq">
+      <div class="guide-step-head">
+        <div class="guide-step-num">6</div>
         <h2>자주 묻는 질문 (FAQ)</h2>
       </div>