사이트 다크 옵시디언 리디자인 + 디자인 감사 폴리시 (redesign/design-taste/high-end 스킬 적용) — 병행 세션의 리디자인(옵시디언 서피스 사다리·머신드 더블베젤·플루이드 아일랜드 내비·히어로 스트림 시뮬레이터·모바일 드로어)을 기반으로 감사 교정: 아이브로우 배급(페이지당 7→1, 장식 점 제거), em대시 전소거(타이틀 3종), 히어로 규율(헤드라인 2줄·서브텍스트 20단어 이내·신뢰 마이크로스트립 제거·CTA 라벨 다운로드/사용 안내로 의도별 단일화), 3등분 카드 파이프라인을 단일 베젤 레일(헤어라인 분할+아이콘 배지)로 재구성, 과장 카피 완화(100%·1초·평균1~3초·초고속), 시뮬레이터에 예시 화면 캡션 명시, 모바일 가로 오버플로 수정(그리드 min-width:0 — 긴 mono URL 이 열 최소폭을 밀던 실결함), OG 메타 3종·skip-link·focus-visible 링·브랜드 404 추가 — 데스크톱 1440/모바일 390 스크린샷 검증, scrollWidth==viewport 확인, 재배포 완료

site/guide.html

@@ -4,143 +4,278 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>사용 안내 - MEDIABROWSER</title>
-<meta name="description" content="MEDIABROWSER 설치부터 첫 다운로드, 다운로드 관리, 휴대폰 연결까지의 사용 안내.">
-<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='%232050f0'/><path d='M50 22v36M36 44l14 14 14-14M28 74h44' stroke='white' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
+<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: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">
 <link rel="stylesheet" href="styles.css">
 </head>
 <body>
 
-<nav class="nav glass" aria-label="주 메뉴">
-  <a class="nav__brand" href="index.html">
-    <span class="nav__mark"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg></span>
-    MEDIABROWSER
-  </a>
-  <div class="nav__links">
-    <a href="index.html#features">기능</a>
-    <a href="index.html#mobile">모바일</a>
-    <a href="guide.html" aria-current="page">사용 안내</a>
-  </div>
-  <a class="btn btn--primary btn--sm" href="releases.html">다운로드</a>
-</nav>
+<div class="ambient-lighting" aria-hidden="true">
+  <div class="ambient-spotlight"></div>
+  <div class="ambient-grid"></div>
+</div>
 
-<header class="pagehead">
-  <div class="orbs" aria-hidden="true">
-    <div class="orb orb--a"></div>
-    <div class="orb orb--b"></div>
+<!-- Fluid Island Navigation -->
+<div class="nav-wrapper">
+  <nav class="nav glass" aria-label="주 메뉴">
+    <a class="nav__brand" href="index.html">
+      <span class="nav__logo-badge">
+        <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+      </span>
+      <span>MEDIABROWSER</span>
+    </a>
+    <div class="nav__links">
+      <a class="nav__link" href="index.html#how-it-works">작동 방식</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>
+    </div>
+    <div class="nav__actions">
+      <a class="btn btn--primary btn--sm" href="releases.html">
+        <span>다운로드</span>
+        <span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-up-right"/></svg></span>
+      </a>
+      <button class="nav__hamburger" id="nav-toggle" aria-label="메뉴 열기" aria-expanded="false">
+        <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#list"/></svg>
+      </button>
+    </div>
+  </nav>
+</div>
+
+<!-- Mobile Navigation Drawer -->
+<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#features">핵심 기능</a>
+    <a class="mobile-menu-link" href="index.html#mobile">모바일 연결</a>
+    <a class="mobile-menu-link" href="guide.html" aria-current="page">사용 안내</a>
+    <a class="mobile-menu-link" href="releases.html" style="color:var(--accent)">다운로드 ↗</a>
   </div>
+</div>
+
+<!-- Page Header -->
+<header style="padding:calc(var(--nav-h) + 72px) 0 48px">
   <div class="wrap">
-    <h1>사용 안내</h1>
-    <p class="sub">설치부터 첫 다운로드, 휴대폰 연결까지. 처음이라면 위에서부터 순서대로 따라오세요.</p>
+    <div class="reveal">
+      <h1 style="font-size:clamp(2.4rem,4.2vw,3.5rem)">사용 안내</h1>
+      <p class="sub" style="margin-top:14px">설치부터 첫 영상 다운로드, 라이브러리 정리, 휴대폰 무선 연결까지. 단계별로 따라오시면 3분 안에 모든 기능을 손쉽게 활용할 수 있습니다.</p>
+    </div>
   </div>
 </header>
 
 <div class="wrap guide-layout">
-  <aside class="guide-toc glass" aria-label="목차">
-    <a href="#install">1. 설치</a>
-    <a href="#first">2. 첫 다운로드</a>
-    <a href="#manage">3. 다운로드 관리</a>
-    <a href="#phone">4. 휴대폰 연결</a>
-    <a href="#faq">자주 묻는 질문</a>
+  <!-- Sticky TOC -->
+  <aside class="guide-toc bezel-shell" aria-label="목차">
+    <div class="guide-toc-title">목차 바로가기</div>
+    <a class="guide-toc-link is-active" href="#install">1. 설치 및 시작하기</a>
+    <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>
   </aside>
 
+  <!-- Main Content -->
   <main>
-    <section class="guide-step" id="install">
-      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#rocket-launch"/></svg></span>설치</h2>
-      <p><a href="releases.html" style="color:var(--accent);font-weight:700;text-decoration:none">다운로드 페이지</a>에서 플랫폼에 맞는 빌드를 받으세요.</p>
-      <ul>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
-          <span><b>Windows</b>: 설치자(exe)를 실행하고 안내를 따르면 끝입니다. x64 와 arm64 를 제공합니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
-          <span><b>macOS 프리뷰</b>: tar.gz 를 풀고 앱을 실행합니다. 아직 서명이 없어 처음 실행 시 보안 확인이 필요할 수 있습니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
-          <span><b>Linux 프리뷰</b>: tar.gz 를 풀고 실행 파일을 실행합니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
-          <span><b>Android</b>: APK 를 설치합니다. 데스크톱 앱과 페어링해 쓰는 컴패니언입니다.</span></li>
+    <!-- Step 1: Install -->
+    <section class="bezel-shell guide-step-card reveal" id="install">
+      <div class="guide-step-head">
+        <div class="guide-step-num">1</div>
+        <h2>설치 및 환경 구성</h2>
+      </div>
+      <p><a href="releases.html" style="color:var(--accent);font-weight:700">다운로드 페이지</a>에서 사용하시는 운영체제에 맞는 패키지를 내려받습니다.</p>
+      
+      <ul class="guide-list">
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
+          <div><strong>Windows</strong>: 설치자(exe)를 실행하면 바로 설치가 완료됩니다. x64 및 ARM64 환경을 완벽하게 지원합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
+          <div><strong>macOS 프리뷰</strong>: 압축(tar.gz)을 풀고 실행합니다. Apple Silicon(M시리즈) 및 Intel Mac 을 지원합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
+          <div><strong>Linux 프리뷰</strong>: 압축(tar.gz)을 해제한 후 실행 파일을 구동합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
+          <div><strong>Android</strong>: 모바일 컴패니언 APK 를 휴대폰에 설치합니다. 데스크톱 앱과 페어링하여 스트리밍을 즐길 수 있습니다.</div>
+        </li>
       </ul>
-      <p>다운로드에 필요한 도구(yt-dlp, ffmpeg, deno)는 앱이 필요할 때 자동으로 설치합니다. 따로 준비할 것은 없습니다.</p>
+
+      <div class="guide-tip-box">
+        <strong>💡 자동 의존성 관리</strong>: 다운로드 및 무손실 리먹싱에 필요한 핵심 도구(ffmpeg, yt-dlp 등)는 앱이 필요할 때 자동으로 내려받아 격리된 경로에서 관리합니다. 사용자가 직접 환경 변수(PATH)를 설정할 필요가 없습니다.
+      </div>
     </section>
 
-    <section class="guide-step" id="first">
-      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#cursor-click"/></svg></span>첫 다운로드</h2>
-      <p>MEDIABROWSER 는 브라우저입니다. 평소처럼 사이트에 들어가 영상을 재생하면 나머지는 앱이 합니다.</p>
-      <ul>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#globe-hemisphere-west"/></svg>
-          <span>주소창에 사이트를 입력해 이동하고, 원하는 영상을 <b>재생</b>합니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg>
-          <span>재생이 시작되면 스트림(HLS, DASH, MP4)이 감지되어 오른쪽 <b>다운로드 패널</b>에 나타납니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
-          <span>목록에서 <b>다운로드</b>를 누르면 로그인 상태 그대로 내려받기가 시작됩니다.</span></li>
+    <!-- Step 2: First Download -->
+    <section class="bezel-shell guide-step-card reveal" id="first">
+      <div class="guide-step-head">
+        <div class="guide-step-num">2</div>
+        <h2>첫 영상 자동 감지 &amp; 다운로드</h2>
+      </div>
+      <p>MEDIABROWSER 는 자체 내장 브라우저를 기반으로 작동합니다. 복잡한 주소 복사나 개발자 도구 분석 없이 평소처럼 웹 서핑을 즐기세요.</p>
+
+      <ul class="guide-list">
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#cursor-click"/></svg>
+          <div><strong>웹사이트 접속 및 재생</strong>: 주소창에 원하는 사이트 URL 을 입력하고 영상을 재생합니다. 로그인 계정 상태가 브라우저 탭에 그대로 유지됩니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg>
+          <div><strong>실시간 스트림 스니핑</strong>: 비디오가 재생되는 즉시 우측 다운로드 패널에 HLS(.m3u8), DASH(.mpd), MP4 스트림 정보와 해상도가 감지되어 나타납니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+          <div><strong>다운로드 시작</strong>: 감지된 목록에서 <strong>다운로드</strong> 버튼을 누르면 로그인 세션과 인증 쿠키를 물려받아 즉시 고속 다운로드가 시작됩니다.</div>
+        </li>
       </ul>
-      <figure class="guide-media glass">
-        <img src="assets/panel-downloads.png" alt="다운로드 패널의 빈 상태 화면. 영상을 재생하면 여기에 나타납니다 라는 안내 문구가 표시되어 있다." width="426" height="330">
-        <figcaption>감지 전의 다운로드 패널. 재생을 시작하면 이 목록이 채워집니다.</figcaption>
-      </figure>
+
+      <div class="guide-tip-box">
+        <strong>🔒 보안 스트림 대응</strong>: 회원 전용 영상이나 Referer 검증이 걸려 있는 스트림도 브라우저 탭의 세션 헤더를 그대로 승계하므로 에러 없이 원본 그대로 수신됩니다.
+      </div>
     </section>
 
-    <section class="guide-step" id="manage">
-      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg></span>다운로드 관리</h2>
-      <p>패널의 탭으로 전체, 진행, 완료, 실패를 나눠 보고, 항목마다 속도와 남은 시간, 세그먼트 진행을 확인합니다.</p>
-      <ul>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
-          <span><b>모두 일시정지 / 모두 재개</b>로 한 번에 멈추고 다시 시작합니다. 항목별 일시정지도 됩니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
-          <span><b>예약</b>을 걸면 지정한 시간부터 내려받습니다. 이미 받은 영상은 중복 확인으로 알려줍니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg>
-          <span>받은 영상은 <b>라이브러리</b>에서 모아 보고, 재생목록과 즐겨찾기, 아카이브로 정리합니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
-          <span>목록은 <b>CSV</b> 로 내보내 기록으로 남길 수 있습니다.</span></li>
+    <!-- Step 3: Download Management -->
+    <section class="bezel-shell guide-step-card reveal" id="manage">
+      <div class="guide-step-head">
+        <div class="guide-step-num">3</div>
+        <h2>다운로드 관리 및 라이브러리 아카이빙</h2>
+      </div>
+      <p>패널의 상태 탭을 통해 진행 중인 작업과 완료된 아카이브를 직관적으로 관리할 수 있습니다.</p>
+
+      <ul class="guide-list">
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg>
+          <div><strong>실시간 세그먼트 맵</strong>: 수백 개의 비디오/오디오 청크 수신 상황과 실시간 전송 속도, 남은 시간을 한눈에 확인합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg>
+          <div><strong>일괄 일시정지 &amp; 재개</strong>: 네트워크 대역폭 조절이 필요할 때 모든 다운로드를 한 번에 멈추거나 다시 시작할 수 있습니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg>
+          <div><strong>중복 방지 &amp; 스케줄링</strong>: 이미 보관 중인 영상을 다시 다운로드할 때 중복 여부를 안내하며, 심야 시간대 예약 다운로드가 가능합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg>
+          <div><strong>라이브러리 정리 및 CSV 내보내기</strong>: 완료된 영상의 재생목록 분류 및 메타데이터 기록을 CSV 로 저장할 수 있습니다.</div>
+        </li>
       </ul>
     </section>
 
-    <section class="guide-step" id="phone">
-      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg></span>휴대폰 연결</h2>
-      <p>데스크톱 앱에 내장된 서버가 휴대폰과 라이브러리를 이어줍니다. 같은 네트워크에서 페어링 한 번이면 됩니다.</p>
-      <ul>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
-          <span>휴대폰에서 컴패니언 앱을 열고, 데스크톱 앱이 보여주는 <b>QR 코드</b>를 스캔합니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg>
-          <span>페어링이 끝나면 라이브러리의 영상을 휴대폰에서 <b>바로 재생</b>하거나 <b>파일로 전송</b>받습니다.</span></li>
-        <li><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#shield-check"/></svg>
-          <span>연결은 내 네트워크 안에서만 이루어집니다. 외부 서버를 거치지 않습니다.</span></li>
+    <!-- Step 4: Phone Companion -->
+    <section class="bezel-shell guide-step-card reveal" id="phone">
+      <div class="guide-step-head">
+        <div class="guide-step-num">4</div>
+        <h2>휴대폰 무선 연결 및 로컬 스트리밍</h2>
+      </div>
+      <p>데스크톱 앱에 내장된 로컬 웹 서버가 스마트폰과 PC 의 라이브러리를 하나로 연결해 줍니다.</p>
+
+      <ul class="guide-list">
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
+          <div><strong>QR 코드 1초 스캔</strong>: 스마트폰에서 컴패니언 앱을 실행하고 데스크톱 앱 화면의 QR 코드를 스캔합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg>
+          <div><strong>무손실 즉시 스트리밍</strong>: 동일한 홈 Wi-Fi 네트워크에서 PC 에 저장된 고화질 비디오를 인코딩 대기 없이 바로 감상합니다.</div>
+        </li>
+        <li>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+          <div><strong>모바일 파일 전송</strong>: 외출 전 필요한 영상을 휴대폰 로컬 스토리지로 초고속 전송하여 오프라인에서 시청하세요.</div>
+        </li>
       </ul>
+
+      <div class="guide-tip-box">
+        <strong>🛡️ 로컬 프라이버시</strong>: 모든 통신은 공유기 내부 로컬 네트워크(LAN)에서 암호화되어 직접 전송됩니다. 외부 클라우드나 사설 서버를 일절 거치지 않아 안전합니다.
+      </div>
     </section>
 
-    <section class="guide-step" id="faq">
-      <h2><span class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#gear"/></svg></span>자주 묻는 질문</h2>
-      <div class="guide-faq">
-        <details>
-          <summary>ffmpeg 나 yt-dlp 를 따로 설치해야 하나요?</summary>
-          <p>아니요. 필요한 시점에 앱이 자동으로 내려받아 관리합니다. 설정에서 직접 지정한 경로가 있으면 그걸 우선합니다.</p>
+    <!-- Step 5: FAQ -->
+    <section class="bezel-shell guide-step-card reveal" id="faq">
+      <div class="guide-step-head">
+        <div class="guide-step-num">5</div>
+        <h2>자주 묻는 질문 (FAQ)</h2>
+      </div>
+
+      <div class="faq-stack">
+        <details class="faq-item">
+          <summary>
+            <span>ffmpeg 나 yt-dlp 를 따로 설치해야 하나요?</span>
+            <svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
+          </summary>
+          <div class="faq-content">
+            아니요. 앱 최초 실행 시 또는 다운로드가 필요한 시점에 내장 모듈이 안전한 최신 바이너리를 자동으로 내려받아 관리합니다. 사용자가 직접 환경 변수나 폴더를 설정할 필요가 없습니다.
+          </div>
         </details>
-        <details>
-          <summary>받은 파일은 어디에 저장되나요?</summary>
-          <p>기본 저장 폴더에 저장되며, 설정에서 폴더를 바꿀 수 있습니다. 완료 목록에서 파일 위치를 바로 열 수 있습니다.</p>
+
+        <details class="faq-item">
+          <summary>
+            <span>받은 영상은 어디에 저장되며 변경할 수 있나요?</span>
+            <svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
+          </summary>
+          <div class="faq-content">
+            기본적으로 시스템의 '동영상' 폴더 내 MEDIABROWSER 디렉터리에 저장됩니다. 앱 설정 메뉴에서 외장 하드 드라이브나 원하는 사용자 정의 폴더로 언제든지 변경할 수 있습니다.
+          </div>
         </details>
-        <details>
-          <summary>다운로드가 중간에 끊기면 처음부터 다시 받나요?</summary>
-          <p>아니요. 세그먼트 단위로 이어받기를 지원해서 받다 만 지점부터 다시 진행합니다.</p>
+
+        <details class="faq-item">
+          <summary>
+            <span>다운로드 중 연결이 끊기면 처음부터 다시 받나요?</span>
+            <svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
+          </summary>
+          <div class="faq-content">
+            아니요. MEDIABROWSER 는 청크 및 세그먼트 단위로 다운로드 진척도를 영구 기록합니다. 인터넷이 끊기거나 앱을 재실행해도 이미 수신된 데이터는 보존되며 멈춘 지점부터 즉시 이어받습니다.
+          </div>
         </details>
-        <details>
-          <summary>업데이트는 어떻게 하나요?</summary>
-          <p>설정의 앱 업데이트 항목에서 새 버전을 확인할 수 있고, 다운로드 페이지에서 새 설치자를 받아 덮어 설치하면 됩니다.</p>
+
+        <details class="faq-item">
+          <summary>
+            <span>모바일 스트리밍 시 스마트폰 데이터가 소모되나요?</span>
+            <svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
+          </summary>
+          <div class="faq-content">
+            아니요. PC 와 스마트폰이 동일한 Wi-Fi 공유기 네트워크에 연결되어 있는 경우, 로컬 기기간 직접 전송(LAN)으로 동작하므로 통신사 LTE/5G 모바일 데이터는 전혀 소모되지 않습니다.
+          </div>
         </details>
-        <details>
-          <summary>어떤 사이트를 지원하나요?</summary>
-          <p>표준 스트리밍 형식(HLS, DASH, MP4)을 쓰는 사이트에서 동작합니다. 콘텐츠의 이용 약관과 저작권을 지키는 범위에서 사용해 주세요.</p>
+
+        <details class="faq-item">
+          <summary>
+            <span>어떤 사이트와 스트리밍 포맷을 지원하나요?</span>
+            <svg class="icon faq-chevron" aria-hidden="true"><use href="assets/icons.svg#caret-down"/></svg>
+          </summary>
+          <div class="faq-content">
+            표준 웹 비디오 포맷인 HLS(.m3u8), DASH(.mpd), MP4 프로토콜을 사용하는 대다수의 웹사이트에서 완벽하게 동작합니다. 단, DRM(디지털 저작권 관리 기술)으로 하드웨어 암호화된 유료 OTT 스트리밍 서비스는 기술적/법적 보호를 위해 다운로드가 제한될 수 있습니다.
+          </div>
         </details>
       </div>
     </section>
   </main>
 </div>
 
+<!-- Footer -->
 <footer>
   <div class="wrap footer__row">
-    <span class="footer__brand">MEDIABROWSER</span>
-    <a href="releases.html">다운로드</a>
-    <a href="guide.html">사용 안내</a>
-    <a href="https://git.chanpaca.net/Video-Downloader/releases" rel="noopener">릴리스 저장소</a>
-    <span class="footer__copy">© 2026 MEDIABROWSER</span>
+    <div class="footer__brand">
+      <span class="nav__logo-badge" style="width:26px;height:26px;border-radius:7px">
+        <svg class="icon" style="width:14px;height:14px" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+      </span>
+      <span>MEDIABROWSER</span>
+    </div>
+    <div class="footer__links">
+      <a href="releases.html">다운로드</a>
+      <a href="guide.html">사용 안내</a>
+      <a href="https://git.chanpaca.net/Video-Downloader/releases" target="_blank" rel="noopener">릴리스 저장소</a>
+    </div>
+    <div class="footer__copy">
+      &copy; 2026 MEDIABROWSER. All rights reserved.
+    </div>
   </div>
 </footer>