MEDIABROWSER 배포 사이트 + 공개 릴리스 저장소 전환 (DEPLOYMENT_PLAN §5-ter, BACKLOG 12차) — site/: 프로모션(라이트 글래스모피즘, CSS scroll-driven 패럴랙스+IO 등장, 모션·투명도 축소 존중, no-JS 백지 방지 html.js 게이트)·릴리스(플랫폼 그룹, OS 자동 감지 권장, 이전 버전 접힘, 빈 상태)·사용 안내(설치→첫 다운로드→관리→휴대폰 연결→FAQ) 3페이지. 히어로/가이드 이미지는 VD_DATA_DIR 격리 프로필로 띄운 실제 앱 다운로드 패널 캡처(밝기 보정). 릴리스 데이터는 CORS 회피를 위해 배포 시 fetch-releases.mjs 가 releases.json 으로 정적 생성(git 무시). 공개 저장소 Video-Downloader/releases 신설(비공개 소스 저장소는 자산 익명 다운로드 불가) — CI 업로드를 env RELEASE_REPO 로 전환, draft 익명 비노출이라 QA 후 Publish 흐름 유지. build/deploy-site.ps1(wrangler pages deploy) 추가, 라이브: https://mediabrowser-7r4.pages.dev — Playwright 로 3페이지 전수 스크린샷 검증(빈 상태+샘플 데이터 렌더 포함)

site/index.html

@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<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>">
+<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" aria-current="page">
+    <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="#features">기능</a>
+    <a href="#mobile">모바일</a>
+    <a href="guide.html">사용 안내</a>
+  </div>
+  <a class="btn btn--primary btn--sm" href="releases.html">다운로드</a>
+</nav>
+
+<header class="hero">
+  <div class="orbs" aria-hidden="true">
+    <div class="orb orb--a"></div>
+    <div class="orb orb--b"></div>
+    <div class="orb orb--c"></div>
+  </div>
+  <div class="wrap hero__grid">
+    <div>
+      <h1>보던 영상,<br>그 자리에서 내 것으로.</h1>
+      <p class="sub">MEDIABROWSER 는 재생 중인 미디어를 감지해 내려받는 브라우저입니다.
+        받은 영상은 라이브러리로 관리하고, 휴대폰으로 이어봅니다.</p>
+      <div class="hero__cta">
+        <a class="btn btn--primary" href="releases.html">다운로드</a>
+        <a class="btn btn--ghost" href="guide.html">사용 안내</a>
+      </div>
+    </div>
+    <div class="hero__visual reveal">
+      <figure class="hero__panel glass">
+        <img src="assets/panel-downloads.png" alt="MEDIABROWSER 다운로드 패널. 전체·진행·완료·실패 탭과 모두 일시정지, 모두 재개, CSV 버튼이 있고, 영상을 재생하면 여기에 나타납니다 라는 안내가 보인다." width="426" height="330">
+        <figcaption class="hero__caption">앱의 다운로드 패널. 재생을 감지하면 이 목록에 자동으로 쌓입니다.</figcaption>
+      </figure>
+    </div>
+  </div>
+</header>
+
+<section id="features" class="section-pad">
+  <div class="wrap">
+    <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">주소를 붙여넣는 게 아니라,<br>그냥 봅니다.</h2>
+    <div class="bento">
+      <div class="bento__cell bento__cell--wide reveal">
+        <div class="bento__wave"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg></div>
+        <div>
+          <div class="bento__chipline" aria-label="지원 형식">
+            <span class="chip">HLS</span><span class="chip">DASH</span><span class="chip">MP4</span>
+          </div>
+          <h3>재생하면 감지됩니다</h3>
+          <p>내장 브라우저에서 영상이 재생되는 순간 스트림을 인식해 다운로드 목록에 올립니다.
+            별도 확장이나 주소 복사가 필요 없습니다.</p>
+        </div>
+      </div>
+      <div class="bento__cell glass reveal">
+        <h3>로그인 그대로</h3>
+        <p>탭의 쿠키와 Referer 를 그대로 물려받아 내려받습니다. 브라우저에서 보이던 영상은 그대로 받아집니다.</p>
+      </div>
+      <div class="bento__cell glass reveal">
+        <h3>끊겨도 이어서</h3>
+        <p>병렬 분할 다운로드와 이어받기, 그리고 ffmpeg 리먹스까지 자동으로 처리합니다. AES-128 스트림도 지원합니다.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section-pad" style="background:linear-gradient(180deg,transparent,var(--bg-deep) 30%,var(--bg-deep) 70%,transparent)">
+  <div class="wrap">
+    <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">다운로드는 관리가 절반입니다.</h2>
+    <div class="featlist">
+      <div class="featlist__item reveal">
+        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg></div>
+        <div><h3>속도와 세그먼트가 보입니다</h3><p>항목마다 속도, 남은 시간, 세그먼트 맵을 실시간으로 표시합니다.</p></div>
+      </div>
+      <div class="featlist__item reveal">
+        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg></div>
+        <div><h3>전체 일시정지와 재개</h3><p>한 번에 멈추고 한 번에 다시 시작합니다. 예약 시간을 걸어둘 수도 있습니다.</p></div>
+      </div>
+      <div class="featlist__item reveal">
+        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#check-circle"/></svg></div>
+        <div><h3>중복은 미리 알려줍니다</h3><p>이미 받은 영상을 다시 받으려 하면 내려받기 전에 확인해 줍니다.</p></div>
+      </div>
+      <div class="featlist__item reveal">
+        <div class="featlist__icon"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg></div>
+        <div><h3>라이브러리와 아카이브</h3><p>받은 영상을 모아 보고, 정리하고, 재생목록과 즐겨찾기로 관리합니다.</p></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="mobile" class="section-pad">
+  <div class="wrap mobile__grid">
+    <div class="mobile__stage reveal" aria-hidden="true">
+      <div class="mobile__card mobile__card--a glass">
+        <svg class="icon"><use href="assets/icons.svg#qr-code"/></svg>
+        <div><strong>QR 페어링</strong><span>화면의 코드를 한 번 스캔</span></div>
+      </div>
+      <div class="mobile__card mobile__card--b glass">
+        <svg class="icon"><use href="assets/icons.svg#device-mobile"/></svg>
+        <div><strong>스트리밍</strong><span>같은 네트워크에서 바로 재생</span></div>
+      </div>
+      <div class="mobile__card mobile__card--c glass">
+        <svg class="icon"><use href="assets/icons.svg#download-simple"/></svg>
+        <div><strong>전송</strong><span>파일을 휴대폰에 저장</span></div>
+      </div>
+    </div>
+    <div>
+      <h2 class="reveal" style="font-size:clamp(28px,3.6vw,40px)">받은 영상,<br>휴대폰에서 이어보기.</h2>
+      <p class="sub reveal" style="margin-top:20px">데스크톱 앱에 내장된 서버가 라이브러리를 휴대폰으로 스트리밍하거나 전송합니다.
+        QR 코드 한 번으로 페어링하고, Android 컴패니언 앱으로 어디서든 이어봅니다. iOS 는 준비 중입니다.</p>
+    </div>
+  </div>
+</section>
+
+<section class="section-pad" style="padding-top:0">
+  <div class="wrap">
+    <div class="band glass reveal">
+      <h2>Windows 에서 시작하세요.</h2>
+      <p class="sub">Windows 는 설치자로 바로 시작할 수 있습니다.
+        macOS 와 Linux 는 새 셸의 프리뷰 빌드, Android 는 컴패니언 앱을 제공합니다.</p>
+      <div class="band__oses">
+        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>Windows</div>
+        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>macOS 프리뷰</div>
+        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>Linux 프리뷰</div>
+        <div class="band__os"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>Android</div>
+      </div>
+      <a class="btn btn--primary" href="releases.html">다운로드</a>
+    </div>
+  </div>
+</section>
+
+<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>
+</footer>
+
+<script src="site.js" defer></script>
+</body>
+</html>