사이트 다크 옵시디언 리디자인 + 디자인 감사 폴리시 (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/releases.html

@@ -4,70 +4,115 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>다운로드 - MEDIABROWSER</title>
-<meta name="description" content="MEDIABROWSER 릴리스 다운로드. Windows 설치자, macOS·Linux 프리뷰 빌드, Android 컴패니언 APK.">
-<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 공식 릴리스 다운로드. Windows 네이티브 설치자, macOS·Linux 프리뷰 빌드, Android 컴패니언 APK.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="다운로드 - MEDIABROWSER">
+<meta property="og:description" content="플랫폼별 최신 릴리스를 내려받으세요. Windows 설치자, macOS·Linux 프리뷰, Android 컴패니언 APK.">
+<meta property="og:url" content="https://mediabrowser-7r4.pages.dev/releases.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">사용 안내</a>
-  </div>
-  <a class="btn btn--primary btn--sm" href="releases.html" aria-current="page">다운로드</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">사용 안내</a>
+    </div>
+    <div class="nav__actions">
+      <a class="btn btn--primary btn--sm" href="releases.html" aria-current="page">
+        <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">사용 안내</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">사용하는 플랫폼에 맞는 빌드를 받으세요. 설치가 끝나면
-      <a href="guide.html" style="color:var(--accent);font-weight:700;text-decoration:none">사용 안내</a>에서 첫 다운로드까지 3분이면 충분합니다.</p>
+    <div class="reveal">
+      <h1 style="font-size:clamp(2.4rem,4.2vw,3.5rem)">릴리스 다운로드</h1>
+      <p class="sub" style="margin-top:14px">사용하시는 플랫폼에 맞는 빌드를 내려받으세요. 설치가 완료된 후 <a href="guide.html" style="color:var(--accent);font-weight:700">사용 안내</a>를 참고하시면 3분 안에 첫 다운로드를 시작할 수 있습니다.</p>
+    </div>
   </div>
 </header>
 
 <div class="wrap rel-layout">
+  <!-- Sticky Rail -->
   <aside class="rel-rail">
-    <div class="rel-rail__box glass">
-      <h3>플랫폼</h3>
-      <a class="rel-rail__os" href="#windows"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>Windows</a>
+    <div class="bezel-shell rel-rail__box">
+      <h3>운영체제 바로가기</h3>
+      <a class="rel-rail__os" href="#windows"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>Windows (x64 / ARM)</a>
       <a class="rel-rail__os" href="#macos"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>macOS 프리뷰</a>
       <a class="rel-rail__os" href="#linux"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>Linux 프리뷰</a>
-      <a class="rel-rail__os" href="#android"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>Android</a>
+      <a class="rel-rail__os" href="#android"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>Android 컴패니언</a>
     </div>
-    <div class="rel-rail__box glass">
-      <p class="rel-rail__note">Windows 는 설치자(exe)를 실행하면 됩니다.
-        macOS 와 Linux 는 tar.gz 를 풀어 실행하는 프리뷰 빌드입니다.
-        전체 버전 기록은 <a href="https://git.chanpaca.net/Video-Downloader/releases" rel="noopener">릴리스 저장소</a>에 있습니다.</p>
+
+    <div class="bezel-shell rel-rail__box">
+      <p style="font-size:0.85rem;color:var(--text-secondary);line-height:1.6">
+        Windows 는 설치자(exe)를 실행하시면 됩니다. macOS 와 Linux 는 압축을 풀어 실행하는 프리뷰 빌드입니다. 전체 버전 이력 및 소스 코드는 <a href="https://git.chanpaca.net/Video-Downloader/releases" style="color:var(--accent);font-weight:700" target="_blank" rel="noopener">릴리스 저장소</a>에서 확인하실 수 있습니다.
+      </p>
     </div>
   </aside>
 
+  <!-- Releases Main Container -->
   <main id="release-root" aria-live="polite">
-    <div class="rel-empty glass" id="release-loading">
+    <div class="bezel-shell rel-empty" id="release-loading">
       <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
-      <h2>릴리스 목록을 불러오는 중</h2>
-      <p>잠시만 기다려 주세요.</p>
+      <h2>릴리스 목록을 불러오는 중입니다</h2>
+      <p style="color:var(--text-secondary)">잠시만 기다려 주세요.</p>
     </div>
   </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>