From 9c9d9cb024958b7b36e5d617abf7ab2d91afadc0 Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Tue, 18 Aug 2026 07:35:09 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9D=B4=ED=8A=B8=20=EB=8B=A4?=
 =?UTF-8?q?=ED=81=AC=20=EC=98=B5=EC=8B=9C=EB=94=94=EC=96=B8=20=EB=A6=AC?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20+=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=EA=B0=90=EC=82=AC=20=ED=8F=B4=EB=A6=AC=EC=8B=9C=20(redesign?=
 =?UTF-8?q?/design-taste/high-end=20=EC=8A=A4=ED=82=AC=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9)=20=E2=80=94=20=EB=B3=91=ED=96=89=20=EC=84=B8?=
 =?UTF-8?q?=EC=85=98=EC=9D=98=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8(?=
 =?UTF-8?q?=EC=98=B5=EC=8B=9C=EB=94=94=EC=96=B8=20=EC=84=9C=ED=94=BC?=
 =?UTF-8?q?=EC=8A=A4=20=EC=82=AC=EB=8B=A4=EB=A6=AC=C2=B7=EB=A8=B8=EC=8B=A0?=
 =?UTF-8?q?=EB=93=9C=20=EB=8D=94=EB=B8=94=EB=B2=A0=EC=A0=A4=C2=B7=ED=94=8C?=
 =?UTF-8?q?=EB=A3=A8=EC=9D=B4=EB=93=9C=20=EC=95=84=EC=9D=BC=EB=9E=9C?=
 =?UTF-8?q?=EB=93=9C=20=EB=82=B4=EB=B9=84=C2=B7=ED=9E=88=EC=96=B4=EB=A1=9C?=
 =?UTF-8?q?=20=EC=8A=A4=ED=8A=B8=EB=A6=BC=20=EC=8B=9C=EB=AE=AC=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=C2=B7=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=93=9C?=
 =?UTF-8?q?=EB=A1=9C=EC=96=B4)=EC=9D=84=20=EA=B8=B0=EB=B0=98=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B0=90=EC=82=AC=20=EA=B5=90=EC=A0=95:=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EB=B8=8C=EB=A1=9C=EC=9A=B0=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B8=89(=ED=8E=98=EC=9D=B4=EC=A7=80=EB=8B=B9=207=E2=86=921,?=
 =?UTF-8?q?=20=EC=9E=A5=EC=8B=9D=20=EC=A0=90=20=EC=A0=9C=EA=B1=B0),=20em?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=20=EC=A0=84=EC=86=8C=EA=B1=B0(=ED=83=80?=
 =?UTF-8?q?=EC=9D=B4=ED=8B=80=203=EC=A2=85),=20=ED=9E=88=EC=96=B4=EB=A1=9C?=
 =?UTF-8?q?=20=EA=B7=9C=EC=9C=A8(=ED=97=A4=EB=93=9C=EB=9D=BC=EC=9D=B8=202?=
 =?UTF-8?q?=EC=A4=84=C2=B7=EC=84=9C=EB=B8=8C=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?20=EB=8B=A8=EC=96=B4=20=EC=9D=B4=EB=82=B4=C2=B7=EC=8B=A0?=
 =?UTF-8?q?=EB=A2=B0=20=EB=A7=88=EC=9D=B4=ED=81=AC=EB=A1=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A6=BD=20=EC=A0=9C=EA=B1=B0=C2=B7CTA=20=EB=9D=BC?=
 =?UTF-8?q?=EB=B2=A8=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C/=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=20=EC=95=88=EB=82=B4=EB=A1=9C=20=EC=9D=98=EB=8F=84?=
 =?UTF-8?q?=EB=B3=84=20=EB=8B=A8=EC=9D=BC=ED=99=94),=203=EB=93=B1=EB=B6=84?=
 =?UTF-8?q?=20=EC=B9=B4=EB=93=9C=20=ED=8C=8C=EC=9D=B4=ED=94=84=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=EC=9D=84=20=EB=8B=A8=EC=9D=BC=20=EB=B2=A0=EC=A0=A4=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=BC(=ED=97=A4=EC=96=B4=EB=9D=BC=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B6=84=ED=95=A0+=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B0=B0?=
 =?UTF-8?q?=EC=A7=80)=EB=A1=9C=20=EC=9E=AC=EA=B5=AC=EC=84=B1,=20=EA=B3=BC?=
 =?UTF-8?q?=EC=9E=A5=20=EC=B9=B4=ED=94=BC=20=EC=99=84=ED=99=94(100%=C2=B71?=
 =?UTF-8?q?=EC=B4=88=C2=B7=ED=8F=89=EA=B7=A01~3=EC=B4=88=C2=B7=EC=B4=88?=
 =?UTF-8?q?=EA=B3=A0=EC=86=8D),=20=EC=8B=9C=EB=AE=AC=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=EC=97=90=20=EC=98=88=EC=8B=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=BA=A1=EC=85=98=20=EB=AA=85=EC=8B=9C,=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B0=80=EB=A1=9C=20=EC=98=A4=EB=B2=84=ED=94=8C?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95(=EA=B7=B8=EB=A6=AC=EB=93=9C=20mi?=
 =?UTF-8?q?n-width:0=20=E2=80=94=20=EA=B8=B4=20mono=20URL=20=EC=9D=B4=20?=
 =?UTF-8?q?=EC=97=B4=20=EC=B5=9C=EC=86=8C=ED=8F=AD=EC=9D=84=20=EB=B0=80?=
 =?UTF-8?q?=EB=8D=98=20=EC=8B=A4=EA=B2=B0=ED=95=A8),=20OG=20=EB=A9=94?=
 =?UTF-8?q?=ED=83=80=203=EC=A2=85=C2=B7skip-link=C2=B7focus-visible=20?=
 =?UTF-8?q?=EB=A7=81=C2=B7=EB=B8=8C=EB=9E=9C=EB=93=9C=20404=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=E2=80=94=20=EB=8D=B0=EC=8A=A4=ED=81=AC=ED=86=B1=20?=
 =?UTF-8?q?1440/=EB=AA=A8=EB=B0=94=EC=9D=BC=20390=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=B0=EC=83=B7=20=EA=B2=80=EC=A6=9D,=20scrollWidth=3D=3Dvie?=
 =?UTF-8?q?wport=20=ED=99=95=EC=9D=B8,=20=EC=9E=AC=EB=B0=B0=ED=8F=AC=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/404.html         |   38 +
 site/assets/icons.svg |   26 +-
 site/guide.html       |  331 +++++---
 site/index.html       |  501 ++++++++---
 site/releases.html    |  119 ++-
 site/site.js          |  155 +++-
 site/styles.css       | 1822 +++++++++++++++++++++++++++++++++++------
 7 files changed, 2482 insertions(+), 510 deletions(-)
 create mode 100644 site/404.html

diff --git a/site/404.html b/site/404.html
new file mode 100644
index 0000000..8f84d88
--- /dev/null
+++ b/site/404.html
@@ -0,0 +1,38 @@
+<!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="robots" content="noindex">
+<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>
+
+<div class="ambient-lighting" aria-hidden="true">
+  <div class="ambient-spotlight"></div>
+  <div class="ambient-grid"></div>
+</div>
+
+<main class="wrap" style="min-height:100dvh;display:grid;place-items:center;padding:48px 0">
+  <div class="bezel-shell" style="max-width:520px;width:100%">
+    <div class="bezel-inner" style="padding:56px 40px;text-align:center">
+      <div class="text-mono" style="font-size:0.85rem;color:var(--text-muted)">404</div>
+      <h1 style="font-size:clamp(1.8rem,4vw,2.4rem);margin-top:10px">여기엔 아무것도 없네요</h1>
+      <p style="margin-top:14px;color:var(--text-secondary)">주소가 바뀌었거나 잘못 입력된 것 같습니다.
+        찾으시는 건 아마 아래에 있을 거예요.</p>
+      <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px">
+        <a class="btn btn--primary" href="/">
+          <span>홈으로</span>
+          <span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-up-right"/></svg></span>
+        </a>
+        <a class="btn btn--ghost" href="/releases.html"><span>다운로드</span></a>
+      </div>
+    </div>
+  </div>
+</main>
+
+</body>
+</html>
diff --git a/site/assets/icons.svg b/site/assets/icons.svg
index 36386d3..2242d21 100644
--- a/site/assets/icons.svg
+++ b/site/assets/icons.svg
@@ -1 +1,25 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="display:none"><symbol id="android-logo" viewBox="0 0 256 256"><path d="M176,148a12,12,0,1,1-12-12A12,12,0,0,1,176,148ZM92,136a12,12,0,1,0,12,12A12,12,0,0,0,92,136Zm148,24v24a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V161.13A113.38,113.38,0,0,1,51.4,78.72L26.34,53.66A8,8,0,0,1,37.66,42.34L63.82,68.5a111.43,111.43,0,0,1,128.55-.19l26-26a8,8,0,0,1,11.32,11.32L204.82,78.5c.75.71,1.5,1.43,2.24,2.17A111.25,111.25,0,0,1,240,160Zm-16,0a96,96,0,0,0-96-96h-.34C74.91,64.18,32,107.75,32,161.13V184H224Z"/></symbol><symbol id="apple-logo" viewBox="0 0 256 256"><path d="M223.3,169.59a8.07,8.07,0,0,0-2.8-3.4C203.53,154.53,200,134.64,200,120c0-17.67,13.47-33.06,21.5-40.67a8,8,0,0,0,0-11.62C208.82,55.74,187.82,48,168,48a72.2,72.2,0,0,0-40,12.13,71.56,71.56,0,0,0-90.71,9.09A74.63,74.63,0,0,0,16,123.4a127.06,127.06,0,0,0,40.14,89.73A39.8,39.8,0,0,0,83.59,224h87.68a39.84,39.84,0,0,0,29.12-12.57,125,125,0,0,0,17.82-24.6C225.23,174,224.33,172,223.3,169.59Zm-34.63,30.94a23.76,23.76,0,0,1-17.4,7.47H83.59a23.82,23.82,0,0,1-16.44-6.51A111.14,111.14,0,0,1,32,123,58.5,58.5,0,0,1,48.65,80.47,54.81,54.81,0,0,1,88,64h.78A55.45,55.45,0,0,1,123,76.28a8,8,0,0,0,10,0A55.44,55.44,0,0,1,168,64a70.64,70.64,0,0,1,36,10.35c-13,14.52-20,30.47-20,45.65,0,23.77,7.64,42.73,22.18,55.3A105.82,105.82,0,0,1,188.67,200.53ZM128.23,30A40,40,0,0,1,167,0h1a8,8,0,0,1,0,16h-1a24,24,0,0,0-23.24,18,8,8,0,1,1-15.5-4Z"/></symbol><symbol id="arrow-right" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></symbol><symbol id="caret-down" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></symbol><symbol id="check-circle" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></symbol><symbol id="cursor-click" viewBox="0 0 256 256"><path d="M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z"/></symbol><symbol id="device-mobile" viewBox="0 0 256 256"><path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"/></symbol><symbol id="download-simple" viewBox="0 0 256 256"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></symbol><symbol id="folders" viewBox="0 0 256 256"><path d="M224,64H154.67L126.93,43.2a16.12,16.12,0,0,0-9.6-3.2H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H192.89A15.13,15.13,0,0,0,208,200.89V184h16.89A15.13,15.13,0,0,0,240,168.89V80A16,16,0,0,0,224,64ZM192,200H40V88H85.33l29.87,22.4A8,8,0,0,0,120,112h72Zm32-32H208V112a16,16,0,0,0-16-16H122.67L94.93,75.2a16.12,16.12,0,0,0-9.6-3.2H72V56h45.33L147.2,78.4A8,8,0,0,0,152,80h72Z"/></symbol><symbol id="gear" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"/></symbol><symbol id="globe-hemisphere-west" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm88,104a87.62,87.62,0,0,1-6.4,32.94l-44.7-27.49a15.92,15.92,0,0,0-6.24-2.23l-22.82-3.08a16.11,16.11,0,0,0-16,7.86h-8.72l-3.8-7.86a15.91,15.91,0,0,0-11-8.67l-8-1.73L96.14,104h16.71a16.06,16.06,0,0,0,7.73-2l12.25-6.76a16.62,16.62,0,0,0,3-2.14l26.91-24.34A15.93,15.93,0,0,0,166,49.1l-.36-.65A88.11,88.11,0,0,1,216,128ZM143.31,41.34,152,56.9,125.09,81.24,112.85,88H96.14a16,16,0,0,0-13.88,8l-8.73,15.23L63.38,84.19,74.32,58.32a87.87,87.87,0,0,1,69-17ZM40,128a87.53,87.53,0,0,1,8.54-37.8l11.34,30.27a16,16,0,0,0,11.62,10l21.43,4.61L96.74,143a16.09,16.09,0,0,0,14.4,9h1.48l-7.23,16.23a16,16,0,0,0,2.86,17.37l.14.14L128,205.94l-1.94,10A88.11,88.11,0,0,1,40,128Zm102.58,86.78,1.13-5.81a16.09,16.09,0,0,0-4-13.9,1.85,1.85,0,0,1-.14-.14L120,174.74,133.7,144l22.82,3.08,45.72,28.12A88.18,88.18,0,0,1,142.58,214.78Z"/></symbol><symbol id="linux-logo" viewBox="0 0 256 256"><path d="M229,214.25A8,8,0,0,1,217.76,213C216.39,211.27,184,169.86,184,88A56,56,0,0,0,72,88c0,81.86-32.37,123.27-33.75,125a8,8,0,0,1-12.51-10c.15-.2,7.69-9.9,15.13-28.74C47.77,156.8,56,127.64,56,88a72,72,0,0,1,144,0c0,39.64,8.23,68.8,15.13,86.28,7.48,18.94,15.06,28.64,15.14,28.74A8,8,0,0,1,229,214.25ZM100,88a12,12,0,1,0,12,12A12,12,0,0,0,100,88Zm68,12a12,12,0,1,0-12,12A12,12,0,0,0,168,100ZM99.58,128.84a8,8,0,0,0-7.15,14.31l32,16a7.94,7.94,0,0,0,7.15,0l32-16a8,8,0,0,0-7.16-14.31L128,143.05ZM128,176a54.07,54.07,0,0,0-47,28.11,8,8,0,1,0,14,7.78,37.35,37.35,0,0,1,66,0,8,8,0,0,0,14-7.78A54.07,54.07,0,0,0,128,176Z"/></symbol><symbol id="play-circle" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"/></symbol><symbol id="qr-code" viewBox="0 0 256 256"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm0,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48ZM200,40H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-64,72V144a8,8,0,0,1,16,0v32a8,8,0,0,1-16,0Zm80-16a8,8,0,0,1-8,8H184v40a8,8,0,0,1-8,8H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v8h24A8,8,0,0,1,216,160Zm0,32v16a8,8,0,0,1-16,0V192a8,8,0,0,1,16,0Z"/></symbol><symbol id="rocket-launch" viewBox="0 0 256 256"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"/></symbol><symbol id="shield-check" viewBox="0 0 256 256"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></symbol><symbol id="stack" viewBox="0 0 256 256"><path d="M230.91,172A8,8,0,0,1,228,182.91l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,36,169.09l92,53.65,92-53.65A8,8,0,0,1,230.91,172ZM220,121.09l-92,53.65L36,121.09A8,8,0,0,0,28,134.91l96,56a8,8,0,0,0,8.06,0l96-56A8,8,0,1,0,220,121.09ZM24,80a8,8,0,0,1,4-6.91l96-56a8,8,0,0,1,8.06,0l96,56a8,8,0,0,1,0,13.82l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,24,80Zm23.88,0L128,126.74,208.12,80,128,33.26Z"/></symbol><symbol id="waveform" viewBox="0 0 256 256"><path d="M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z"/></symbol><symbol id="windows-logo" viewBox="0 0 256 256"><path d="M208,136H128a8,8,0,0,0-8,8v57.45a8,8,0,0,0,6.57,7.88l80,14.54A7.61,7.61,0,0,0,208,224a8,8,0,0,0,8-8V144A8,8,0,0,0,208,136Zm-8,70.41-64-11.63V152h64ZM96,136H32a8,8,0,0,0-8,8v40a8,8,0,0,0,6.57,7.87l64,11.64a8.54,8.54,0,0,0,1.43.13,8,8,0,0,0,8-8V144A8,8,0,0,0,96,136Zm-8,50.05-48-8.73V152H88ZM213.13,33.86a8,8,0,0,0-6.56-1.73l-80,14.55A8,8,0,0,0,120,54.55V112a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V40A8,8,0,0,0,213.13,33.86ZM200,104H136V61.22l64-11.63ZM101.13,54.22a8,8,0,0,0-6.56-1.73l-64,11.64A8,8,0,0,0,24,72v40a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V60.36A8,8,0,0,0,101.13,54.22ZM88,104H40V78.68L88,70Z"/></symbol></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+<symbol id="android-logo" viewBox="0 0 256 256"><path d="M176,148a12,12,0,1,1-12-12A12,12,0,0,1,176,148ZM92,136a12,12,0,1,0,12,12A12,12,0,0,0,92,136Zm148,24v24a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V161.13A113.38,113.38,0,0,1,51.4,78.72L26.34,53.66A8,8,0,0,1,37.66,42.34L63.82,68.5a111.43,111.43,0,0,1,128.55-.19l26-26a8,8,0,0,1,11.32,11.32L204.82,78.5c.75.71,1.5,1.43,2.24,2.17A111.25,111.25,0,0,1,240,160Zm-16,0a96,96,0,0,0-96-96h-.34C74.91,64.18,32,107.75,32,161.13V184H224Z"/></symbol>
+<symbol id="apple-logo" viewBox="0 0 256 256"><path d="M223.3,169.59a8.07,8.07,0,0,0-2.8-3.4C203.53,154.53,200,134.64,200,120c0-17.67,13.47-33.06,21.5-40.67a8,8,0,0,0,0-11.62C208.82,55.74,187.82,48,168,48a72.2,72.2,0,0,0-40,12.13,71.56,71.56,0,0,0-90.71,9.09A74.63,74.63,0,0,0,16,123.4a127.06,127.06,0,0,0,40.14,89.73A39.8,39.8,0,0,0,83.59,224h87.68a39.84,39.84,0,0,0,29.12-12.57,125,125,0,0,0,17.82-24.6C225.23,174,224.33,172,223.3,169.59Zm-34.63,30.94a23.76,23.76,0,0,1-17.4,7.47H83.59a23.82,23.82,0,0,1-16.44-6.51A111.14,111.14,0,0,1,32,123,58.5,58.5,0,0,1,48.65,80.47,54.81,54.81,0,0,1,88,64h.78A55.45,55.45,0,0,1,123,76.28a8,8,0,0,0,10,0A55.44,55.44,0,0,1,168,64a70.64,70.64,0,0,1,36,10.35c-13,14.52-20,30.47-20,45.65,0,23.77,7.64,42.73,22.18,55.3A105.82,105.82,0,0,1,188.67,200.53ZM128.23,30A40,40,0,0,1,167,0h1a8,8,0,0,1,0,16h-1a24,24,0,0,0-23.24,18,8,8,0,1,1-15.5-4Z"/></symbol>
+<symbol id="arrow-right" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></symbol>
+<symbol id="arrow-up-right" viewBox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"/></symbol>
+<symbol id="caret-down" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></symbol>
+<symbol id="check-circle" viewBox="0 0 256 256"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"/></symbol>
+<symbol id="cursor-click" viewBox="0 0 256 256"><path d="M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z"/></symbol>
+<symbol id="device-mobile" viewBox="0 0 256 256"><path d="M176,16H80A24,24,0,0,0,56,40V216a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V40A24,24,0,0,0,176,16ZM72,64H184V192H72Zm8-32h96a8,8,0,0,1,8,8v8H72V40A8,8,0,0,1,80,32Zm96,192H80a8,8,0,0,1-8-8v-8H184v8A8,8,0,0,1,176,224Z"/></symbol>
+<symbol id="download-simple" viewBox="0 0 256 256"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></symbol>
+<symbol id="folders" viewBox="0 0 256 256"><path d="M224,64H154.67L126.93,43.2a16.12,16.12,0,0,0-9.6-3.2H72A16,16,0,0,0,56,56V72H40A16,16,0,0,0,24,88V200a16,16,0,0,0,16,16H192.89A15.13,15.13,0,0,0,208,200.89V184h16.89A15.13,15.13,0,0,0,240,168.89V80A16,16,0,0,0,224,64ZM192,200H40V88H85.33l29.87,22.4A8,8,0,0,0,120,112h72Zm32-32H208V112a16,16,0,0,0-16-16H122.67L94.93,75.2a16.12,16.12,0,0,0-9.6-3.2H72V56h45.33L147.2,78.4A8,8,0,0,0,152,80h72Z"/></symbol>
+<symbol id="gear" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"/></symbol>
+<symbol id="globe-hemisphere-west" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm88,104a87.62,87.62,0,0,1-6.4,32.94l-44.7-27.49a15.92,15.92,0,0,0-6.24-2.23l-22.82-3.08a16.11,16.11,0,0,0-16,7.86h-8.72l-3.8-7.86a15.91,15.91,0,0,0-11-8.67l-8-1.73L96.14,104h16.71a16.06,16.06,0,0,0,7.73-2l12.25-6.76a16.62,16.62,0,0,0,3-2.14l26.91-24.34A15.93,15.93,0,0,0,166,49.1l-.36-.65A88.11,88.11,0,0,1,216,128ZM143.31,41.34,152,56.9,125.09,81.24,112.85,88H96.14a16,16,0,0,0-13.88,8l-8.73,15.23L63.38,84.19,74.32,58.32a87.87,87.87,0,0,1,69-17ZM40,128a87.53,87.53,0,0,1,8.54-37.8l11.34,30.27a16,16,0,0,0,11.62,10l21.43,4.61L96.74,143a16.09,16.09,0,0,0,14.4,9h1.48l-7.23,16.23a16,16,0,0,0,2.86,17.37l.14.14L128,205.94l-1.94,10A88.11,88.11,0,0,1,40,128Zm102.58,86.78,1.13-5.81a16.09,16.09,0,0,0-4-13.9,1.85,1.85,0,0,1-.14-.14L120,174.74,133.7,144l22.82,3.08,45.72,28.12A88.18,88.18,0,0,1,142.58,214.78Z"/></symbol>
+<symbol id="linux-logo" viewBox="0 0 256 256"><path d="M229,214.25A8,8,0,0,1,217.76,213C216.39,211.27,184,169.86,184,88A56,56,0,0,0,72,88c0,81.86-32.37,123.27-33.75,125a8,8,0,0,1-12.51-10c.15-.2,7.69-9.9,15.13-28.74C47.77,156.8,56,127.64,56,88a72,72,0,0,1,144,0c0,39.64,8.23,68.8,15.13,86.28,7.48,18.94,15.06,28.64,15.14,28.74A8,8,0,0,1,229,214.25ZM100,88a12,12,0,1,0,12,12A12,12,0,0,0,100,88Zm68,12a12,12,0,1,0-12,12A12,12,0,0,0,168,100ZM99.58,128.84a8,8,0,0,0-7.15,14.31l32,16a7.94,7.94,0,0,0,7.15,0l32-16a8,8,0,0,0-7.16-14.31L128,143.05ZM128,176a54.07,54.07,0,0,0-47,28.11,8,8,0,1,0,14,7.78,37.35,37.35,0,0,1,66,0,8,8,0,0,0,14-7.78A54.07,54.07,0,0,0,128,176Z"/></symbol>
+<symbol id="list" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"/></symbol>
+<symbol id="play-circle" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48.24-94.78-64-40A8,8,0,0,0,100,88v80a8,8,0,0,0,12.24,6.78l64-40a8,8,0,0,0,0-13.56ZM116,153.57V102.43L156.91,128Z"/></symbol>
+<symbol id="qr-code" viewBox="0 0 256 256"><path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48v48Zm0,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48v48ZM200,40H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48v48Zm-64,72V144a8,8,0,0,1,16,0v32a8,8,0,0,1-16,0Zm80-16a8,8,0,0,1-8,8H184v40a8,8,0,0,1-8,8H144a8,8,0,0,1,0-16h24V144a8,8,0,0,1,16,0v8h24A8,8,0,0,1,216,160Zm0,32v16a8,8,0,0,1-16,0V192a8,8,0,0,1,16,0Z"/></symbol>
+<symbol id="rocket-launch" viewBox="0 0 256 256"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"/></symbol>
+<symbol id="shield-check" viewBox="0 0 256 256"><path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40Zm0,72c0,37.07-13.66,67.16-40.6,89.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81C61.82,179.51,48,149.3,48,112l0-56,160,0ZM82.34,141.66a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32l-56,56a8,8,0,0,1-11.32,0Z"/></symbol>
+<symbol id="sparkle" viewBox="0 0 256 256"><path d="M208,128a80,80,0,0,1-80,80,80,80,0,0,1-80-80,80,80,0,0,1,80-80A80,80,0,0,1,208,128Zm32-64a8,8,0,0,0-8-8H216V40a8,8,0,0,0-16,0V56H184a8,8,0,0,0,0,16h16V88a8,8,0,0,0,16,0V72h16A8,8,0,0,0,240,64ZM72,208H56V192a8,8,0,0,0-16,0v16H24a8,8,0,0,0,0,16H40v16a8,8,0,0,0,16,0V224H72a8,8,0,0,0,0-16Z"/></symbol>
+<symbol id="stack" viewBox="0 0 256 256"><path d="M230.91,172A8,8,0,0,1,228,182.91l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,36,169.09l92,53.65,92-53.65A8,8,0,0,1,230.91,172ZM220,121.09l-92,53.65L36,121.09A8,8,0,0,0,28,134.91l96,56a8,8,0,0,0,8.06,0l96-56A8,8,0,1,0,220,121.09ZM24,80a8,8,0,0,1,4-6.91l96-56a8,8,0,0,1,8.06,0l96,56a8,8,0,0,1,0,13.82l-96,56a8,8,0,0,1-8.06,0l-96-56A8,8,0,0,1,24,80Zm23.88,0L128,126.74,208.12,80,128,33.26Z"/></symbol>
+<symbol id="waveform" viewBox="0 0 256 256"><path d="M56,96v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM88,24a8,8,0,0,0-8,8V224a8,8,0,0,0,16,0V32A8,8,0,0,0,88,24Zm40,32a8,8,0,0,0-8,8V192a8,8,0,0,0,16,0V64A8,8,0,0,0,128,56Zm40,32a8,8,0,0,0-8,8v64a8,8,0,0,0,16,0V96A8,8,0,0,0,168,88Zm40-16a8,8,0,0,0-8,8v96a8,8,0,0,0,16,0V80A8,8,0,0,0,208,72Z"/></symbol>
+<symbol id="windows-logo" viewBox="0 0 256 256"><path d="M208,136H128a8,8,0,0,0-8,8v57.45a8,8,0,0,0,6.57,7.88l80,14.54A7.61,7.61,0,0,0,208,224a8,8,0,0,0,8-8V144A8,8,0,0,0,208,136Zm-8,70.41-64-11.63V152h64ZM96,136H32a8,8,0,0,0-8,8v40a8,8,0,0,0,6.57,7.87l64,11.64a8.54,8.54,0,0,0,1.43.13,8,8,0,0,0,8-8V144A8,8,0,0,0,96,136Zm-8,50.05-48-8.73V152H88ZM213.13,33.86a8,8,0,0,0-6.56-1.73l-80,14.55A8,8,0,0,0,120,54.55V112a8,8,0,0,0,8,8h80a8,8,0,0,0,8-8V40A8,8,0,0,0,213.13,33.86ZM200,104H136V61.22l64-11.63ZM101.13,54.22a8,8,0,0,0-6.56-1.73l-64,11.64A8,8,0,0,0,24,72v40a8,8,0,0,0,8,8H96a8,8,0,0,0,8-8V60.36A8,8,0,0,0,101.13,54.22ZM88,104H40V78.68L88,70Z"/></symbol>
+<symbol id="x" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></symbol>
+</svg>
\ No newline at end of file
diff --git a/site/guide.html b/site/guide.html
index 443a512..cb3abf5 100644
--- a/site/guide.html
+++ b/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>
 
diff --git a/site/index.html b/site/index.html
index b307d9e..de517fe 100644
--- a/site/index.html
+++ b/site/index.html
@@ -3,151 +3,456 @@
 <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>">
+<title>MEDIABROWSER - 보던 영상을 내 PC와 휴대폰으로</title>
+<meta name="description" content="주소 복사 없이 재생하는 순간 스트림 자동 감지. 브라우저 세션 승계, HLS/DASH 병렬 이어받기, 홈 Wi-Fi 모바일 로컬 스트리밍까지 지원하는 미디어 브라우저.">
+<meta property="og:type" content="website">
+<meta property="og:title" content="MEDIABROWSER - 보던 영상을 내 PC와 휴대폰으로">
+<meta property="og:description" content="재생하는 순간 스트림을 감지해 로그인 세션 그대로 저장하고, 휴대폰으로 이어보는 미디어 브라우저.">
+<meta property="og:url" content="https://mediabrowser-7r4.pages.dev/">
+<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" 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>
+<a class="skip-link" href="#how-it-works">본문 바로가기</a>
 
-<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 class="ambient-lighting" aria-hidden="true">
+  <div class="ambient-spotlight"></div>
+  <div class="ambient-grid"></div>
+</div>
+
+<!-- Fluid Island Navigation -->
+<div class="nav-wrapper">
+  <nav class="nav glass" aria-label="주 메뉴">
+    <a class="nav__brand" href="index.html" aria-current="page">
+      <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="#how-it-works">작동 방식</a>
+      <a class="nav__link" href="#features">핵심 기능</a>
+      <a class="nav__link" href="#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">
+        <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="#how-it-works">작동 방식</a>
+    <a class="mobile-menu-link" href="#features">핵심 기능</a>
+    <a class="mobile-menu-link" href="#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>
+
+<!-- Hero Section -->
+<header class="hero">
   <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 class="hero__copy">
+      <div>
+        <span class="eyebrow">미디어 스트림 엔진</span>
+      </div>
+      <h1>주소 복사는 잊으세요.<br>재생하면 준비됩니다.</h1>
+      <p class="sub">재생하는 순간 스트림(HLS · DASH · MP4)을 감지하고, 로그인 세션 그대로 원본 화질로 저장합니다. 휴대폰으로 이어보는 것까지.</p>
+
+      <div class="hero__cta-group">
+        <a class="btn btn--primary" 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>
+        <a class="btn btn--ghost" href="guide.html">
+          <span>사용 안내</span>
+          <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-right"/></svg>
+        </a>
       </div>
     </div>
+
+    <!-- Live Stream Sniffer Simulator (Machined Double-Bezel) -->
     <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 class="bezel-shell">
+        <div class="bezel-inner simulator-window">
+          <div class="simulator-topbar">
+            <div class="window-dots">
+              <span class="window-dot"></span>
+              <span class="window-dot"></span>
+              <span class="window-dot"></span>
+            </div>
+            <div class="simulator-url-bar text-mono">
+              <svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#shield-check"/></svg>
+              https://stream.example.com/watch?v=k94f...
+            </div>
+            <span class="badge-chip badge-chip--accent" style="font-size:0.7rem;padding:2px 8px">Sniffer Active</span>
+          </div>
+
+          <div class="simulator-content">
+            <!-- Detection Banner -->
+            <div class="detection-banner">
+              <div class="detection-info">
+                <div class="detection-pulse"></div>
+                <div>
+                  <div class="detection-title">스트림 자동 감지 완료</div>
+                  <div class="detection-specs text-mono">HLS Master Playlist · 1080p 60fps · 6,400 kbps</div>
+                </div>
+              </div>
+              <span class="badge-chip" style="background:rgba(59,130,246,0.2);color:#93c5fd">Cookie Passed</span>
+            </div>
+
+            <!-- Active Download Simulation Card -->
+            <div class="active-download-card">
+              <div class="download-head">
+                <div>
+                  <div class="download-name">4K_High_Bitrate_Stream_Archive.mp4</div>
+                  <div style="font-size:0.75rem;color:var(--text-muted);margin-top:2px" class="text-mono">HLS 분할 다운로드 · AES-128 복호화 및 ffmpeg MP4 리먹싱</div>
+                </div>
+                <span class="download-format-chip text-mono">HLS &bull; 1080p</span>
+              </div>
+
+              <!-- Realtime Segment Map -->
+              <div>
+                <div class="progress-track">
+                  <div class="progress-fill" id="sim-progress" style="width:72%"></div>
+                </div>
+                <div class="segment-visualizer" aria-hidden="true">
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block done"></div>
+                  <div class="seg-block active"></div>
+                  <div class="seg-block"></div>
+                  <div class="seg-block"></div>
+                  <div class="seg-block"></div>
+                  <div class="seg-block"></div>
+                </div>
+              </div>
+
+              <div class="download-meta-row text-mono">
+                <span>속도: <strong style="color:var(--accent)" id="sim-speed">18.4 MB/s</strong> (16 Threads)</span>
+                <span>진행률: <strong style="color:var(--text-primary)" id="sim-percent">72%</strong> (1.42 GB / 1.98 GB)</span>
+                <span>남은 시간: <strong style="color:var(--text-primary)">31초</strong></span>
+              </div>
+            </div>
+
+            <!-- Quick Specs Row -->
+            <div class="spec-line text-mono" style="padding:0 4px;font-size:0.75rem">
+              <span>내장 서버: <strong style="color:var(--success)">192.168.1.100:5000 (온라인)</strong></span>
+              <span>모바일 연결: <strong>QR 준비됨</strong></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p class="sim-caption">실제 다운로드 흐름을 재현한 예시 화면입니다.</p>
     </div>
   </div>
 </header>
 
-<section id="features" class="section-pad">
+<!-- Section 1: How it Works (3-Step Pipeline) -->
+<section id="how-it-works" 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 class="section-head section-head--center reveal">
+      <h2>웹서핑하고, 감지되고, 저장됩니다</h2>
+      <p class="sub">복잡한 확장 프로그램이나 개발자 도구 설정 없이, 평소처럼 영상을 보면 백그라운드 엔진이 나머지를 처리합니다.</p>
+    </div>
+
+    <div class="bezel-shell reveal">
+      <div class="bezel-inner pipeline-rail">
+        <div class="pipeline-card">
+          <div class="pipeline-step-badge">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#globe-hemisphere-west"/></svg>
+          </div>
+          <div>
+            <h3>평소처럼 영상 재생</h3>
+            <p style="margin-top:8px">내장 브라우저에서 원하는 사이트로 이동해 영상을 재생하세요. 별도 로그인 토큰이나 주소 복사가 필요 없습니다.</p>
+          </div>
+        </div>
+
+        <div class="pipeline-card">
+          <div class="pipeline-step-badge">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#waveform"/></svg>
+          </div>
+          <div>
+            <h3>세션 승계 &amp; 자동 감지</h3>
+            <p style="margin-top:8px">재생 버튼을 누르는 즉시 HLS(.m3u8), DASH(.mpd), MP4 스트림을 가로채고, 탭의 인증 쿠키와 Referer 를 승계합니다.</p>
+          </div>
+        </div>
+
+        <div class="pipeline-card">
+          <div class="pipeline-step-badge">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg>
+          </div>
+          <div>
+            <h3>병렬 이어받기 &amp; 리먹싱</h3>
+            <p style="margin-top:8px">세그먼트를 분할 병렬로 내려받고, 끊기면 받다 만 지점부터 이어받습니다. ffmpeg 가 무손실 MP4 로 결합합니다.</p>
           </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)">
+<!-- Section 2: Core Engineering Features (Asymmetric Bento Grid) -->
+<section id="features" class="section-pad" style="padding-top:0">
   <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 class="section-head reveal">
+      <h2>대용량 스트림 수신에 최적화된 엔진</h2>
+      <p class="sub">네트워크가 불안정해도, 스트림이 암호화되어 있어도 사용자의 개입 없이 안정적인 다운로드를 보장합니다.</p>
+    </div>
+
+    <div class="bento-grid">
+      <!-- Bento Cell 1: Cookie & Session Passthrough (Span 7) -->
+      <div class="bezel-shell bento-cell--span-7 reveal">
+        <div class="bezel-inner bento-cell">
+          <div>
+            <div class="bento-icon-wrapper">
+              <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#shield-check"/></svg>
+            </div>
+            <h3>로그인 세션 &amp; 쿠키 자동 승계</h3>
+            <p>회원 전용 영상이나 보안 스트림도 문제없습니다. 탭의 세션 쿠키와 Referer 헤더를 다운로드 요청에 그대로 전달하므로 별도의 토큰 추출이나 번거로운 재로그인이 필요 없습니다.</p>
+            <div class="bento-chips-row">
+              <span class="badge-chip">Cookie Passthrough</span>
+              <span class="badge-chip">Referer Header Lock</span>
+              <span class="badge-chip">Session Continuity</span>
+            </div>
+          </div>
+          <div class="bento-spec-box text-mono">
+            <div class="spec-line"><span>헤더 승계:</span><span>User-Agent, Cookie, Referer, Sec-Fetch-*</span></div>
+            <div class="spec-line"><span>보안 처리:</span><span>브라우저 샌드박스 내부 직접 바인딩</span></div>
+          </div>
+        </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>
+
+      <!-- Bento Cell 2: Resilient Segment Engine (Span 5) -->
+      <div class="bezel-shell bento-cell--span-5 reveal">
+        <div class="bezel-inner bento-cell">
+          <div>
+            <div class="bento-icon-wrapper">
+              <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#stack"/></svg>
+            </div>
+            <h3>끊겨도 안전한 세그먼트 이어받기</h3>
+            <p>네트워크가 불안정해 연결이 끊겨도 이미 받은 청크는 그대로 보존됩니다. 받다 만 지점부터 즉시 재개하며 AES-128 암호화 스트림도 자동으로 복호화합니다.</p>
+          </div>
+          <div class="bento-chips-row" style="margin-top:auto">
+            <span class="badge-chip badge-chip--accent">Segment Chunk Map</span>
+            <span class="badge-chip">AES-128 Decryptor</span>
+            <span class="badge-chip">Auto Retry</span>
+          </div>
+        </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>
+
+      <!-- Bento Cell 3: Smart Duplicate Detector & Scheduling (Span 5) -->
+      <div class="bezel-shell bento-cell--span-5 reveal">
+        <div class="bezel-inner bento-cell">
+          <div>
+            <div class="bento-icon-wrapper">
+              <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#folders"/></svg>
+            </div>
+            <h3>스마트 중복 방지 &amp; 스케줄러</h3>
+            <p>이미 다운로드한 영상을 다시 받으려 하면 미리 감지해 중복 저장을 방지합니다. 심야 시간대 자동 다운로드 예약과 CSV 내보내기도 지원합니다.</p>
+          </div>
+          <div class="bento-chips-row" style="margin-top:auto">
+            <span class="badge-chip">Duplicate Warning</span>
+            <span class="badge-chip">Scheduled Queue</span>
+            <span class="badge-chip">CSV Export</span>
+          </div>
+        </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>
+
+      <!-- Bento Cell 4: Realtime Telemetry & ffmpeg Remux (Span 7) -->
+      <div class="bezel-shell bento-cell--span-7 reveal">
+        <div class="bezel-inner bento-cell">
+          <div>
+            <div class="bento-icon-wrapper">
+              <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#play-circle"/></svg>
+            </div>
+            <h3>초고속 ffmpeg MP4 무손실 리먹싱</h3>
+            <p>다운로드가 완료되는 즉시 내장 ffmpeg 엔진이 비디오와 오디오 스트림을 손실 없이 단일 MP4 파일로 결합합니다. 재인코딩이 없어 CPU 부하가 낮고 화질 열화가 없습니다.</p>
+            <div class="bento-chips-row">
+              <span class="badge-chip badge-chip--accent">Zero Loss Remux</span>
+              <span class="badge-chip">ffmpeg Core Embedded</span>
+              <span class="badge-chip">Batch Pause / Resume</span>
+            </div>
+          </div>
+          <div class="bento-spec-box text-mono">
+            <div class="spec-line"><span>처리 방식:</span><span>재인코딩 없는 스트림 복사 (화질 열화 없음)</span></div>
+            <div class="spec-line"><span>지원 포맷:</span><span>MP4, MKV, M4A 오디오 추출 지원</span></div>
+          </div>
+        </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>
+<!-- Section 3: Mobile Companion Ecosystem -->
+<section id="mobile" class="section-pad" style="background:linear-gradient(180deg, transparent, rgba(13, 16, 23, 0.7) 40%, transparent)">
+  <div class="wrap mobile-showcase">
+    <div class="reveal">
+      <h2 style="font-size:clamp(2rem, 3.6vw, 2.75rem)">내 PC 의 라이브러리,<br>휴대폰에서 그대로 이어보기</h2>
+      <p class="sub" style="margin-top:16px">외부 클라우드로 비디오를 업로드할 필요가 없습니다. 데스크톱 앱 내장 서버가 홈 Wi-Fi 안에서 스마트폰과 바로 연결됩니다.</p>
+      
+      <div style="margin-top:32px;display:flex;gap:14px;flex-wrap:wrap">
+        <a class="btn btn--primary" href="guide.html#phone">
+          <span>모바일 연결 가이드</span>
+          <span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-up-right"/></svg></span>
+        </a>
       </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 class="mobile-cards-stage reveal">
+      <div class="bezel-shell">
+        <div class="bezel-inner feature-stack-card">
+          <div class="feature-stack-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#qr-code"/></svg>
+          </div>
+          <div>
+            <strong>QR 코드 즉시 페어링</strong>
+            <span>복잡한 IP 나 포트 설정 없이 모바일 앱으로 QR 을 스캔하면 끝납니다.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="bezel-shell">
+        <div class="bezel-inner feature-stack-card">
+          <div class="feature-stack-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#device-mobile"/></svg>
+          </div>
+          <div>
+            <strong>홈 네트워크 무손실 스트리밍</strong>
+            <span>PC 에 저장된 4K/1080p 영상을 인코딩 대기 없이 스마트폰에서 바로 재생합니다.</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="bezel-shell">
+        <div class="bezel-inner feature-stack-card">
+          <div class="feature-stack-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg>
+          </div>
+          <div>
+            <strong>로컬 파일 전송</strong>
+            <span>외출 전 터치 한 번으로 모바일 기기에 파일을 저장해 오프라인에서 시청하세요.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </section>
 
+<!-- Section 4: Cross-Platform Matrix -->
+<section class="section-pad">
+  <div class="wrap">
+    <div class="section-head section-head--center reveal">
+      <h2>모든 주요 운영체제를 지원합니다</h2>
+      <p class="sub">Windows 설치자로 바로 시작할 수 있으며, macOS · Linux 프리뷰와 Android 컴패니언 앱을 제공합니다.</p>
+    </div>
+
+    <div class="platform-matrix">
+      <div class="bezel-shell reveal">
+        <div class="bezel-inner platform-card">
+          <div class="platform-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#windows-logo"/></svg>
+          </div>
+          <h3>Windows</h3>
+          <p>Windows 10 / 11<br>x64 및 ARM64 네이티브</p>
+          <span class="platform-status-badge status--stable">안정판 제공</span>
+        </div>
+      </div>
+
+      <div class="bezel-shell reveal">
+        <div class="bezel-inner platform-card">
+          <div class="platform-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#apple-logo"/></svg>
+          </div>
+          <h3>macOS 프리뷰</h3>
+          <p>Apple Silicon (M1~M4)<br>&amp; Intel x64</p>
+          <span class="platform-status-badge status--preview">프리뷰 빌드</span>
+        </div>
+      </div>
+
+      <div class="bezel-shell reveal">
+        <div class="bezel-inner platform-card">
+          <div class="platform-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#linux-logo"/></svg>
+          </div>
+          <h3>Linux 프리뷰</h3>
+          <p>Ubuntu · Fedora · Arch<br>x64 바이너리</p>
+          <span class="platform-status-badge status--preview">프리뷰 빌드</span>
+        </div>
+      </div>
+
+      <div class="bezel-shell reveal">
+        <div class="bezel-inner platform-card">
+          <div class="platform-icon">
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#android-logo"/></svg>
+          </div>
+          <h3>Android</h3>
+          <p>Android 10+<br>컴패니언 앱 APK</p>
+          <span class="platform-status-badge status--stable">컴패니언</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Section 5: Bottom CTA -->
 <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 class="bezel-shell reveal">
+      <div class="bezel-inner cta-banner">
+        <h2>보던 영상 그대로,<br>지금 내 것으로 만들어보세요.</h2>
+        <p class="sub">별도의 설정 없이 1분 만에 설치하고 웹 서핑을 시작하세요. 필요한 도구는 앱이 알아서 관리합니다.</p>
+        <div style="display:flex;gap:14px;flex-wrap:wrap;justify-content:center">
+          <a class="btn btn--primary" 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>
+          <a class="btn btn--ghost" href="guide.html">
+            <span>사용 안내</span>
+            <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#arrow-right"/></svg>
+          </a>
+        </div>
       </div>
-      <a class="btn btn--primary" href="releases.html">다운로드</a>
     </div>
   </div>
 </section>
 
+<!-- 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>
 
diff --git a/site/releases.html b/site/releases.html
index 5c0844e..347ea7d 100644
--- a/site/releases.html
+++ b/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>
 
diff --git a/site/site.js b/site/site.js
index a922c9c..d2066ec 100644
--- a/site/site.js
+++ b/site/site.js
@@ -1,31 +1,91 @@
-// MEDIABROWSER 사이트 공용 스크립트
-// 1) 스크롤 등장(reveal) — IntersectionObserver, 모션 축소 설정이면 즉시 표시
-// 2) releases.html — releases.json(배포 시 생성)을 읽어 릴리스 목록 렌더
+// MEDIABROWSER Official Site Script
+// 1) IntersectionObserver Scroll Reveal
+// 2) Mobile Navigation Menu Controller
+// 3) Hero UI Simulator Micro-Interactions
+// 4) Dynamic Releases Renderer (releases.json)
 
+// ── 1. Scroll Reveal Controller ──────────────────────────────
 (function initReveal() {
   const items = document.querySelectorAll(".reveal");
   if (!items.length) return;
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) {
-    return; // .js 게이트를 켜지 않으면 CSS 기본값(표시 상태) 그대로
+    return;
   }
   document.documentElement.classList.add("js");
   const io = new IntersectionObserver((entries) => {
     for (const e of entries) {
-      if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
+      if (e.isIntersecting) {
+        e.target.classList.add("in");
+        io.unobserve(e.target);
+      }
     }
-  }, { threshold: 0.15, rootMargin: "0px 0px -8% 0px" });
+  }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
+
   items.forEach((el) => io.observe(el));
 })();
 
-// ── 릴리스 렌더 ──────────────────────────────────────────────
+// ── 2. Mobile Nav Drawer Controller ──────────────────────────
+(function initMobileNav() {
+  const toggleBtn = document.getElementById("nav-toggle");
+  const overlay = document.getElementById("mobile-menu");
+  if (!toggleBtn || !overlay) return;
+
+  function toggleMenu() {
+    const isActive = overlay.classList.toggle("is-active");
+    toggleBtn.setAttribute("aria-expanded", String(isActive));
+    document.body.style.overflow = isActive ? "hidden" : "";
+  }
+
+  toggleBtn.addEventListener("click", toggleMenu);
+
+  overlay.querySelectorAll(".mobile-menu-link").forEach((link) => {
+    link.addEventListener("click", () => {
+      overlay.classList.remove("is-active");
+      toggleBtn.setAttribute("aria-expanded", "false");
+      document.body.style.overflow = "";
+    });
+  });
+})();
+
+// ── 3. Hero UI Simulator Micro-Animation ─────────────────────
+(function initHeroSimulator() {
+  const progressEl = document.getElementById("sim-progress");
+  const percentEl = document.getElementById("sim-percent");
+  const speedEl = document.getElementById("sim-speed");
+  if (!progressEl || !percentEl || !speedEl) return;
+
+  let current = 72;
+  let direction = 1;
+
+  setInterval(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    if (direction === 1) {
+      current += 0.8;
+      if (current >= 96) direction = -1;
+    } else {
+      current = 64;
+      direction = 1;
+    }
+
+    const rounded = Math.min(99, Math.floor(current));
+    progressEl.style.width = rounded + "%";
+    percentEl.textContent = rounded + "%";
+
+    const baseSpeed = 18.2 + (Math.random() * 2.4 - 1.2);
+    speedEl.textContent = baseSpeed.toFixed(1) + " MB/s";
+  }, 1200);
+})();
+
+// ── 4. Releases Renderer ─────────────────────────────────────
 const PLATFORMS = [
-  { id: "windows", label: "Windows", icon: "windows-logo", sub: "설치자를 실행하면 됩니다",
+  { id: "windows", label: "Windows", icon: "windows-logo", sub: "x64 및 ARM64 네이티브 설치자 (exe)",
     match: (n) => /setup.*\.exe$/i.test(n) || /win/i.test(n) },
-  { id: "macos", label: "macOS 프리뷰", icon: "apple-logo", sub: "tar.gz 를 풀어 실행하는 프리뷰 빌드",
+  { id: "macos", label: "macOS 프리뷰", icon: "apple-logo", sub: "Apple Silicon & Intel tar.gz 프리뷰 빌드",
     match: (n) => /osx|darwin|mac/i.test(n) },
-  { id: "linux", label: "Linux 프리뷰", icon: "linux-logo", sub: "tar.gz 를 풀어 실행하는 프리뷰 빌드",
+  { id: "linux", label: "Linux 프리뷰", icon: "linux-logo", sub: "Ubuntu, Fedora, Arch tar.gz 프리뷰 빌드",
     match: (n) => /linux/i.test(n) },
-  { id: "android", label: "Android", icon: "android-logo", sub: "컴패니언 앱 APK",
+  { id: "android", label: "Android", icon: "android-logo", sub: "스마트폰 로컬 스트리밍 컴패니언 APK",
     match: (n) => /\.apk$/i.test(n) },
 ];
 
@@ -56,8 +116,14 @@ function esc(s) {
 
 function assetRow(a, recommended) {
   return `<div class="dl-asset">
-    <div><div class="dl-asset__name">${esc(a.name)}</div><div class="dl-asset__size">${fmtSize(a.size)}</div></div>
-    <a class="btn btn--primary btn--sm ${recommended ? "dl-reco" : ""}" href="${esc(a.url)}" title="${recommended ? "이 기기에 권장" : ""}">받기</a>
+    <div>
+      <div class="dl-asset__name">${esc(a.name)}</div>
+      <div class="dl-asset__size text-mono">${fmtSize(a.size)} ${recommended ? '<span style="color:var(--accent);font-weight:700">· 현재 기기에 권장</span>' : ''}</div>
+    </div>
+    <a class="btn btn--primary btn--sm ${recommended ? "dl-reco" : ""}" href="${esc(a.url)}" title="${recommended ? "현재 기기에 권장" : ""}">
+      <span>다운로드</span>
+      <span class="btn__icon-badge"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#download-simple"/></svg></span>
+    </a>
   </div>`;
 }
 
@@ -68,64 +134,85 @@ function groupsHtml(assets) {
     list.forEach((a) => used.add(a.name));
     if (!list.length) return "";
     return `<div class="dl-group" id="${p.id}">
-      <div class="dl-group__head"><svg class="icon" aria-hidden="true"><use href="assets/icons.svg#${p.icon}"/></svg>${p.label}</div>
+      <div class="dl-group__head">
+        <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#${p.icon}"/></svg>
+        <span>${p.label}</span>
+      </div>
       <div class="dl-group__sub">${p.sub}</div>
       ${list.map((a) => assetRow(a, detectPreferredAsset(a.name))).join("")}
     </div>`;
   }).filter(Boolean);
+
   const rest = assets.filter((a) => !used.has(a.name));
   if (rest.length) {
-    groups.push(`<div class="dl-group"><div class="dl-group__head">기타</div><div class="dl-group__sub">그 밖의 파일</div>
-      ${rest.map((a) => assetRow(a, false)).join("")}</div>`);
+    groups.push(`<div class="dl-group">
+      <div class="dl-group__head">기타 아카이브</div>
+      <div class="dl-group__sub">추가 바이너리 및 체크섬 파일</div>
+      ${rest.map((a) => assetRow(a, false)).join("")}
+    </div>`);
   }
   return `<div class="dl-groups">${groups.join("")}</div>`;
 }
 
 function releaseCard(r, featured) {
-  const pill = r.prerelease ? `<span class="rel-pill rel-pill--pre">프리뷰</span>` : `<span class="rel-pill">안정판</span>`;
+  const pill = r.prerelease ? `<span class="rel-pill rel-pill--pre">프리뷰 빌드</span>` : `<span class="rel-pill">공식 안정판</span>`;
   const meta = `<div class="rel-featured__meta">
-      <span class="rel-featured__tag">${esc(r.name || r.tag)}</span>${pill}
-      <span class="rel-featured__date">${fmtDate(r.published_at)}</span>
+      <span class="rel-featured__tag">${esc(r.name || r.tag)}</span>
+      ${pill}
+      <span class="rel-featured__date text-mono">${fmtDate(r.published_at)}</span>
     </div>
     ${r.notes ? `<p class="rel-featured__notes">${esc(r.notes)}</p>` : ""}
     ${groupsHtml(r.assets)}`;
-  if (featured) return `<article class="rel-featured glass">${meta}</article>`;
-  return `<details><summary><span class="rel-featured__tag" style="font-size:19px">${esc(r.name || r.tag)}</span>${pill}
-      <span class="rel-featured__date">${fmtDate(r.published_at)}</span></summary>
-    <div class="rel-old__body">${r.notes ? `<p class="rel-featured__notes">${esc(r.notes)}</p>` : ""}${groupsHtml(r.assets)}</div>
-  </details>`;
+
+  if (featured) {
+    return `<article class="bezel-shell"><div class="bezel-inner rel-featured">${meta}</div></article>`;
+  }
+  return `<div class="bezel-shell"><div class="bezel-inner"><details>
+    <summary>
+      <span class="rel-featured__tag" style="font-size:1.15rem">${esc(r.name || r.tag)}</span>
+      ${pill}
+      <span class="rel-featured__date text-mono">${fmtDate(r.published_at)}</span>
+      <svg class="icon faq-chevron" style="margin-left:8px"><use href="assets/icons.svg#caret-down"/></svg>
+    </summary>
+    <div class="rel-old__body">
+      ${r.notes ? `<p class="rel-featured__notes">${esc(r.notes)}</p>` : ""}
+      ${groupsHtml(r.assets)}
+    </div>
+  </details></div></div>`;
 }
 
 function emptyState() {
-  return `<div class="rel-empty glass">
+  return `<div class="bezel-shell rel-empty">
     <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#rocket-launch"/></svg>
-    <h2>첫 공개 릴리스를 준비하고 있어요</h2>
-    <p>빌드 파이프라인은 이미 돌아가고 있습니다. 곧 이 자리에서 설치자를 받을 수 있습니다.
-      먼저 <a href="guide.html" style="color:var(--accent);font-weight:700;text-decoration:none">사용 안내</a>를 둘러보세요.</p>
+    <h2>첫 공개 릴리스를 준비하고 있습니다</h2>
+    <p style="color:var(--text-secondary);max-width:54ch">빌드 파이프라인이 정상 작동 중이며 곧 공식 설치자가 배포됩니다. 먼저 <a href="guide.html" style="color:var(--accent);font-weight:700">사용 안내</a>를 둘러보세요.</p>
   </div>`;
 }
 
 (async function initReleases() {
   const root = document.getElementById("release-root");
   if (!root) return;
+
   try {
     const res = await fetch("releases.json", { cache: "no-cache" });
     if (!res.ok) throw new Error("HTTP " + res.status);
     const data = await res.json();
     const releases = (data.releases || []);
-    if (!releases.length) { root.innerHTML = emptyState(); return; }
+    if (!releases.length) {
+      root.innerHTML = emptyState();
+      return;
+    }
     const [latest, ...older] = releases;
     let html = releaseCard(latest, true);
     if (older.length) {
-      html += `<div class="rel-old"><h2 style="font-size:20px;margin-top:14px">이전 버전</h2>
+      html += `<div class="rel-old"><h2 style="font-size:1.35rem;margin-bottom:14px">이전 버전 기록</h2>
         ${older.map((r) => releaseCard(r, false)).join("")}</div>`;
     }
     root.innerHTML = html;
   } catch (err) {
-    root.innerHTML = `<div class="rel-empty glass">
-      <h2>목록을 불러오지 못했어요</h2>
-      <p>잠시 후 새로고침해 주세요. 급하다면
-        <a href="https://git.chanpaca.net/Video-Downloader/releases" style="color:var(--accent);font-weight:700;text-decoration:none" rel="noopener">릴리스 저장소</a>에서 직접 받을 수 있습니다.</p>
+    root.innerHTML = `<div class="bezel-shell rel-empty">
+      <h2>릴리스 목록을 불러오지 못했습니다</h2>
+      <p style="color:var(--text-secondary)">네트워크 상태를 확인하고 새로고침해 주세요. 급하신 경우 <a href="https://git.chanpaca.net/Video-Downloader/releases" style="color:var(--accent);font-weight:700" target="_blank" rel="noopener">릴리스 저장소</a>에서 직접 다운로드하실 수 있습니다.</p>
     </div>`;
   }
 })();
diff --git a/site/styles.css b/site/styles.css
index 9a1ab76..bd065d9 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -1,289 +1,1627 @@
-/* MEDIABROWSER 사이트 공용 디자인 시스템
-   라이트 단일 테마(사용자 지정) · 글래스모피즘 · 절제된 스크롤 모션
-   반경 체계: 버튼=필, 카드/패널=20px, 칩/입력=12px */
+/* MEDIABROWSER Design System
+   High-End Obsidian Dark Theme · Machined Double-Bezel Architecture
+   Restrained Fluid Motion · Responsive Layout Mechanics
+   Typography: Wanted Sans Variable + System Fallbacks */
 
 :root {
-  --bg: #f5f7fc;
-  --bg-deep: #e9edf8;
-  --ink: #171a23;
-  --muted: #5b6273;
-  --line: rgba(23, 26, 35, 0.08);
-  --accent: #2050f0;
-  --accent-deep: #1740c8;
-  --accent-soft: rgba(32, 80, 240, 0.09);
-  --glass: rgba(255, 255, 255, 0.58);
-  --glass-strong: rgba(255, 255, 255, 0.78);
-  --glass-brd: rgba(255, 255, 255, 0.72);
-  --shadow-soft: 0 24px 60px -24px rgba(32, 60, 160, 0.18);
-  --shadow-lift: 0 32px 80px -28px rgba(32, 60, 160, 0.28);
-  --r-card: 20px;
-  --r-chip: 12px;
+  /* Surface Ladder (Linear Obsidian Aesthetic) */
+  --bg-canvas: #08090d;
+  --bg-subtle: #0d1017;
+  --surface-1: #121622;
+  --surface-2: #181e2e;
+  --surface-3: #20273c;
+  --surface-glass: rgba(18, 22, 34, 0.72);
+  --surface-glass-strong: rgba(18, 22, 34, 0.88);
+
+  /* Borders & Hairlines */
+  --border-subtle: rgba(255, 255, 255, 0.07);
+  --border-medium: rgba(255, 255, 255, 0.12);
+  --border-highlight: rgba(255, 255, 255, 0.18);
+
+  /* Typography Colors */
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-inverse: #08090d;
+
+  /* Single Vibrant Accent */
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --accent-soft: rgba(59, 130, 246, 0.12);
+  --accent-glow: rgba(59, 130, 246, 0.28);
+  --accent-border: rgba(59, 130, 246, 0.35);
+
+  /* Semantic Highlights */
+  --success: #10b981;
+  --success-soft: rgba(16, 185, 129, 0.14);
+  --warning: #f59e0b;
+  --warning-soft: rgba(245, 158, 11, 0.14);
+
+  /* Shadows */
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
+  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.75);
+  --shadow-glow: 0 0 40px -10px var(--accent-glow);
+
+  /* Radii */
+  --radius-pill: 9999px;
+  --radius-bezel-outer: 24px;
+  --radius-bezel-inner: 18px;
+  --radius-card: 20px;
+  --radius-chip: 10px;
+
+  /* Layout */
   --nav-h: 68px;
+  --container-max: 1160px;
 }
 
-* { box-sizing: border-box; margin: 0; padding: 0; }
+/* ── Reset & Base ────────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-html { scroll-behavior: smooth; }
-@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
+html {
+  scroll-behavior: smooth;
+  color-scheme: dark;
+  background-color: var(--bg-canvas);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+}
 
 body {
-  font-family: "Wanted Sans Variable", "Wanted Sans", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
-  background: var(--bg);
-  color: var(--ink);
-  line-height: 1.6;
+  font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  background-color: var(--bg-canvas);
+  color: var(--text-primary);
+  line-height: 1.65;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
+  position: relative;
+  min-height: 100dvh;
 }
 
-::selection { background: var(--accent); color: #fff; }
+::selection {
+  background: var(--accent);
+  color: #ffffff;
+}
 
-.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: -0.25em; }
+a {
+  color: inherit;
+  text-decoration: none;
+}
 
-/* ── 배경 오브(패럴랙스 레이어) ─────────────────────────────── */
-.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
-.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
-.orb--a { width: 560px; height: 560px; left: -140px; top: -120px;
-  background: radial-gradient(circle at 35% 35%, #c9d6ff, #eef1fb 70%); }
-.orb--b { width: 480px; height: 480px; right: -120px; top: 160px;
-  background: radial-gradient(circle at 40% 40%, #d8e4ff, #f0f3fc 70%); }
-.orb--c { width: 380px; height: 380px; left: 34%; top: 560px;
-  background: radial-gradient(circle at 50% 40%, #dfe9ff, #f4f6fd 72%); opacity: 0.45; }
+/* ── Typography Scale & Weights ──────────────────────────────── */
+h1, h2, h3, h4 {
+  color: var(--text-primary);
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  font-weight: 800;
+  text-wrap: balance;
+}
 
-/* 스크롤 패럴랙스: 지원 브라우저에서만, 모션 축소 설정이면 정지 */
-@media (prefers-reduced-motion: no-preference) {
-  @supports (animation-timeline: scroll()) {
-    .orb { animation: orb-drift linear both; animation-timeline: scroll(); }
-    .orb--a { --drift: 180px; }
-    .orb--b { --drift: -240px; }
-    .orb--c { --drift: 120px; }
+p {
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+.sub {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  line-height: 1.7;
+  max-width: 60ch;
+}
+
+.text-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Icons ───────────────────────────────────────────────────── */
+.icon {
+  width: 1.25em;
+  height: 1.25em;
+  fill: currentColor;
+  flex: none;
+  display: inline-block;
+  vertical-align: -0.2em;
+}
+
+/* ── Ambient Glow Background ─────────────────────────────────── */
+.ambient-lighting {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.ambient-spotlight {
+  position: absolute;
+  top: -240px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1000px;
+  height: 650px;
+  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(59, 130, 246, 0.16) 0%, rgba(37, 99, 235, 0.05) 50%, transparent 80%);
+  filter: blur(60px);
+  opacity: 0.9;
+}
+
+.ambient-grid {
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+                    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+  background-size: 56px 56px;
+  mask-image: radial-gradient(ellipse 70% 50% at 50% 25%, #000 20%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 25%, #000 20%, transparent 80%);
+  opacity: 0.6;
+}
+
+/* ── Container Layout ────────────────────────────────────────── */
+.wrap {
+  width: min(var(--container-max), calc(100% - 48px));
+  margin-inline: auto;
+  position: relative;
+  z-index: 1;
+}
+
+section {
+  position: relative;
+  z-index: 1;
+}
+
+.section-pad {
+  padding: 120px 0;
+}
+
+.section-head {
+  margin-bottom: 56px;
+}
+
+.section-head--center {
+  text-align: center;
+  margin-inline: auto;
+  max-width: 680px;
+}
+
+.section-head h2 {
+  font-size: clamp(2rem, 3.8vw, 2.75rem);
+  margin-top: 12px;
+}
+
+.section-head .sub {
+  margin-top: 16px;
+  margin-inline: auto;
+}
+
+/* ── Eyebrow Badge ───────────────────────────────────────────── */
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-1);
+  border: 1px solid var(--border-medium);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.eyebrow-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+}
+
+/* ── Double-Bezel (Doppelrand) Architecture ───────────────────── */
+.bezel-shell {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
+  border: 1px solid var(--border-subtle);
+  padding: 6px;
+  border-radius: var(--radius-bezel-outer);
+  box-shadow: var(--shadow-md);
+  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.bezel-inner {
+  background: var(--surface-1);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-bezel-inner);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  height: 100%;
+}
+
+.bezel-shell:hover {
+  border-color: var(--border-highlight);
+}
+
+/* ── Glassmorphism ───────────────────────────────────────────── */
+.glass {
+  background: var(--surface-glass);
+  backdrop-filter: blur(20px) saturate(170%);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  border: 1px solid var(--border-medium);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-md);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .glass {
+    background: var(--surface-1);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
 }
-@keyframes orb-drift { to { transform: translateY(var(--drift, 0px)); } }
 
-/* ── 글래스 재질 ────────────────────────────────────────────── */
-.glass {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)), var(--glass);
-  backdrop-filter: blur(18px) saturate(160%);
-  -webkit-backdrop-filter: blur(18px) saturate(160%);
-  border: 1px solid var(--glass-brd);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), var(--shadow-soft);
-}
-@media (prefers-reduced-transparency: reduce) {
-  .glass { background: rgba(255, 255, 255, 0.96); backdrop-filter: none; -webkit-backdrop-filter: none; }
+/* ── Navigation (Fluid Island) ────────────────────────────────── */
+.nav-wrapper {
+  position: fixed;
+  top: 18px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
 }
 
-/* ── 내비게이션 ─────────────────────────────────────────────── */
 .nav {
-  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
-  width: min(1120px, calc(100% - 32px)); height: var(--nav-h);
-  display: flex; align-items: center; gap: 28px; padding: 0 22px;
-  border-radius: 999px; z-index: 50;
+  pointer-events: auto;
+  width: min(var(--container-max), calc(100% - 36px));
+  height: var(--nav-h);
+  border-radius: var(--radius-pill);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
 }
+
 .nav__brand {
-  font-weight: 800; letter-spacing: 0.04em; font-size: 15px;
-  color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-weight: 800;
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
+  color: var(--text-primary);
 }
-.nav__mark {
-  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
-  background: linear-gradient(135deg, var(--accent), #4d79ff); color: #fff;
-}
-.nav__mark .icon { width: 16px; height: 16px; }
-.nav__links { display: flex; gap: 22px; margin-left: auto; }
-.nav__links a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 600; }
-.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
 
+.nav__logo-badge {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--accent), #1d4ed8);
+  display: grid;
+  place-items: center;
+  color: #ffffff;
+  box-shadow: 0 4px 14px var(--accent-glow);
+}
+
+.nav__logo-badge .icon {
+  width: 18px;
+  height: 18px;
+}
+
+.nav__links {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+
+.nav__link {
+  color: var(--text-secondary);
+  font-size: 0.93rem;
+  font-weight: 600;
+  transition: color 0.2s ease;
+  position: relative;
+  padding: 6px 0;
+}
+
+.nav__link:hover {
+  color: var(--text-primary);
+}
+
+.nav__link[aria-current="page"] {
+  color: var(--text-primary);
+}
+
+.nav__link[aria-current="page"]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent);
+  border-radius: var(--radius-pill);
+}
+
+.nav__actions {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.nav__hamburger {
+  display: none;
+  background: transparent;
+  border: 0;
+  color: var(--text-primary);
+  cursor: pointer;
+  padding: 8px;
+}
+
+.nav__hamburger .icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* Mobile Nav Drawer */
+.mobile-menu-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 9, 13, 0.85);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  z-index: 90;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.mobile-menu-overlay.is-active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mobile-menu-links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  text-align: center;
+}
+
+.mobile-menu-link {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  transition: color 0.2s ease;
+}
+
+.mobile-menu-link:hover, .mobile-menu-link[aria-current="page"] {
+  color: var(--text-primary);
+}
+
+/* ── Buttons (Nested Button-in-Button Architecture) ───────────── */
 .btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer;
-  border: 0; white-space: nowrap;
-  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, background 0.18s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border-radius: var(--radius-pill);
+  font-weight: 700;
+  font-size: 0.95rem;
+  cursor: pointer;
+  border: 0;
+  white-space: nowrap;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  position: relative;
+  user-select: none;
 }
-.btn:active { transform: translateY(1px) scale(0.98); }
+
+.btn:active {
+  transform: translateY(1px) scale(0.98);
+}
+
 .btn--primary {
-  background: var(--accent); color: #fff; padding: 12px 22px; font-size: 15px;
-  box-shadow: 0 10px 24px -10px rgba(32, 80, 240, 0.55);
+  background: var(--accent);
+  color: #ffffff;
+  padding: 10px 14px 10px 22px;
+  box-shadow: 0 6px 20px -4px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
-.btn--primary:hover { background: var(--accent-deep); }
+
+.btn--primary:hover {
+  background: var(--accent-hover);
+  box-shadow: 0 10px 28px -4px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+.btn__icon-badge {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.btn--primary:hover .btn__icon-badge {
+  transform: translate(2px, -2px);
+}
+
 .btn--ghost {
-  background: rgba(255, 255, 255, 0.6); color: var(--ink); padding: 12px 22px; font-size: 15px;
-  border: 1px solid var(--line);
-}
-.btn--ghost:hover { background: #fff; }
-.btn--sm { padding: 9px 16px; font-size: 14px; }
-
-/* ── 공통 레이아웃 ──────────────────────────────────────────── */
-.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
-section { position: relative; }
-.section-pad { padding: 108px 0; }
-h1, h2, h3 { line-height: 1.22; letter-spacing: -0.02em; font-weight: 800; }
-.sub { color: var(--muted); font-size: 17px; max-width: 58ch; }
-
-/* 스크롤 등장 — JS 가 html 에 .js 를 붙였을 때만 숨김(no-JS 에서도 내용이 보이는 점진적 향상) */
-html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
-html.js .reveal.in { opacity: 1; transform: none; }
-@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
-
-/* ── 히어로 ─────────────────────────────────────────────────── */
-.hero { padding: calc(var(--nav-h) + 78px) 0 96px; min-height: 86dvh; display: flex; align-items: center; }
-.hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
-.hero h1 { font-size: clamp(38px, 5.2vw, 62px); }
-.hero .sub { margin-top: 22px; font-size: 18px; }
-.hero__cta { display: flex; gap: 14px; margin-top: 34px; }
-.hero__visual { position: relative; }
-.hero__panel {
-  border-radius: var(--r-card); padding: 14px;
-  transform: rotate(1.8deg);
-}
-.hero__panel img {
-  display: block; width: 100%; border-radius: 12px;
-  box-shadow: 0 18px 44px -18px rgba(10, 16, 40, 0.45);
-}
-.hero__caption { margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center; }
-
-/* ── 벤토 ───────────────────────────────────────────────────── */
-.bento { display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto auto; gap: 20px; margin-top: 52px; }
-.bento__cell { border-radius: var(--r-card); padding: 34px; position: relative; overflow: hidden; }
-.bento__cell--wide { grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px;
-  background: linear-gradient(160deg, #1b2440 0%, #22346e 55%, #2050f0 130%); color: #fff; }
-.bento__cell--wide h3, .bento__cell--wide p { color: #fff; }
-.bento__cell--wide p { opacity: 0.82; }
-.bento__wave { position: absolute; top: 30px; left: 34px; opacity: 0.9; }
-.bento__wave .icon { width: 44px; height: 44px; color: #9db6ff; }
-.bento__cell h3 { font-size: 21px; margin-bottom: 10px; }
-.bento__cell p { color: var(--muted); font-size: 15.5px; }
-.bento__chipline { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
-.chip {
-  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
-  border-radius: 999px; font-size: 13px; font-weight: 700;
-  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); color: #dfe8ff;
+  background: var(--surface-1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-medium);
+  padding: 12px 22px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
 
-/* ── 기능 그리드(카드 없는 정리) ────────────────────────────── */
-.featlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; margin-top: 56px; }
-.featlist__item { display: flex; gap: 16px; align-items: flex-start; }
-.featlist__icon {
-  width: 42px; height: 42px; flex: none; border-radius: var(--r-chip); display: grid; place-items: center;
-  background: var(--accent-soft); color: var(--accent);
+.btn--ghost:hover {
+  background: var(--surface-2);
+  border-color: var(--border-highlight);
+  color: #ffffff;
 }
-.featlist__icon .icon { width: 21px; height: 21px; }
-.featlist__item h3 { font-size: 17px; margin-bottom: 4px; }
-.featlist__item p { color: var(--muted); font-size: 15px; }
 
-/* ── 모바일 섹션 ────────────────────────────────────────────── */
-.mobile__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
-.mobile__stage { position: relative; min-height: 320px; }
-.mobile__card { position: absolute; border-radius: var(--r-card); display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
-.mobile__card .icon { width: 30px; height: 30px; color: var(--accent); }
-.mobile__card strong { display: block; font-size: 15.5px; }
-.mobile__card span { font-size: 13.5px; color: var(--muted); }
-.mobile__card--a { top: 8%; left: 4%; transform: rotate(-2.4deg); }
-.mobile__card--b { top: 40%; right: 6%; transform: rotate(1.6deg); }
-.mobile__card--c { bottom: 4%; left: 14%; transform: rotate(-1deg); }
+.btn--sm {
+  padding: 8px 12px 8px 18px;
+  font-size: 0.88rem;
+}
 
-/* ── 플랫폼 밴드 ────────────────────────────────────────────── */
-.band { border-radius: 28px; padding: 64px 56px; text-align: center; }
-.band h2 { font-size: clamp(28px, 3.6vw, 40px); }
-.band .sub { margin: 16px auto 0; }
-.band__oses { display: flex; gap: 34px; justify-content: center; margin: 36px 0 40px; color: var(--muted); }
-.band__os { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
-.band__os .icon { width: 34px; height: 34px; color: var(--ink); }
-.band__os--soon { opacity: 0.55; }
+.btn--sm .btn__icon-badge {
+  width: 24px;
+  height: 24px;
+}
 
-/* ── 푸터 ───────────────────────────────────────────────────── */
-footer { padding: 48px 0 60px; }
-.footer__row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 32px; }
-.footer__row a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
-.footer__row a:hover { color: var(--ink); }
-.footer__brand { font-weight: 800; letter-spacing: 0.04em; font-size: 14px; }
-.footer__copy { margin-left: auto; color: var(--muted); font-size: 13.5px; }
+.btn--secondary-action {
+  padding: 8px 16px;
+  border-radius: var(--radius-pill);
+  font-size: 0.85rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
 
-/* ── 릴리스 페이지 ──────────────────────────────────────────── */
-.pagehead { padding: calc(var(--nav-h) + 74px) 0 30px; }
-.pagehead h1 { font-size: clamp(32px, 4.2vw, 48px); }
-.pagehead .sub { margin-top: 16px; }
+.btn--secondary-action:hover {
+  color: var(--text-primary);
+  border-color: var(--border-medium);
+}
 
-.rel-layout { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: start; padding-bottom: 110px; }
-.rel-rail { position: sticky; top: calc(var(--nav-h) + 30px); display: flex; flex-direction: column; gap: 10px; }
-.rel-rail__box { border-radius: var(--r-card); padding: 22px; }
-.rel-rail__box h3 { font-size: 15px; margin-bottom: 12px; }
-.rel-rail__os { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-chip);
-  color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; }
-.rel-rail__os:hover { background: rgba(255, 255, 255, 0.75); }
-.rel-rail__os .icon { width: 19px; height: 19px; color: var(--muted); }
-.rel-rail__note { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
-.rel-rail__note a { color: var(--accent); font-weight: 700; text-decoration: none; }
+/* ── Hero Section ────────────────────────────────────────────── */
+.hero {
+  padding-top: calc(var(--nav-h) + 72px);
+  padding-bottom: 96px;
+  min-height: 90dvh;
+  display: flex;
+  align-items: center;
+}
 
-.rel-featured { border-radius: 24px; padding: 40px; }
-.rel-featured__meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
-.rel-featured__tag { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
-.rel-featured__date { color: var(--muted); font-size: 14.5px; }
-.rel-pill { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
-  background: var(--accent-soft); color: var(--accent); }
-.rel-pill--pre { background: rgba(214, 122, 20, 0.12); color: #a35a00; }
-.rel-featured__notes { margin-top: 18px; color: var(--muted); font-size: 15px; white-space: pre-line; max-width: 70ch; }
+.hero__grid {
+  display: grid;
+  grid-template-columns: 1.15fr 1fr;
+  gap: 56px;
+  align-items: center;
+}
 
-.dl-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
-.dl-group { border-radius: var(--r-card); background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); padding: 22px; }
-.dl-group__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 800; font-size: 16px; }
-.dl-group__head .icon { width: 21px; height: 21px; color: var(--ink); }
-.dl-group__sub { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
-.dl-asset { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
-.dl-asset + .dl-asset { border-top: 1px solid var(--line); }
-.dl-asset__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
-.dl-asset__size { color: var(--muted); font-size: 12.5px; }
-.dl-asset .btn { flex: none; }
-.dl-reco { outline: 2px solid var(--accent); outline-offset: 2px; }
+/* 그리드 자식의 min-width:auto 가 긴 mono 문자열(시뮬레이터 URL 등)로
+   열 최소폭을 밀어내 모바일 가로 오버플로를 만든다 — 축소 허용 */
+.hero__grid > * { min-width: 0; }
 
-.rel-old { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
-.rel-old details { border-radius: var(--r-card); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.55); }
-.rel-old summary { cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; align-items: center; gap: 12px; list-style: none; }
-.rel-old summary::-webkit-details-marker { display: none; }
-.rel-old summary .rel-featured__date { margin-left: auto; }
-.rel-old__body { padding: 0 22px 20px; }
+.hero__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
 
-.rel-empty { border-radius: 24px; padding: 72px 40px; text-align: center; }
-.rel-empty .icon { width: 44px; height: 44px; color: var(--accent); }
-.rel-empty h2 { font-size: 24px; margin: 18px 0 10px; }
-.rel-empty p { color: var(--muted); max-width: 48ch; margin: 0 auto; }
+.hero h1 {
+  font-size: clamp(2.5rem, 4.6vw, 4rem);
+  letter-spacing: -0.04em;
+  line-height: 1.12;
+}
 
-/* ── 가이드 페이지 ──────────────────────────────────────────── */
-.guide-layout { display: grid; grid-template-columns: 240px 1fr; gap: 52px; align-items: start; padding-bottom: 110px; }
-.guide-toc { position: sticky; top: calc(var(--nav-h) + 30px); border-radius: var(--r-card); padding: 22px; }
-.guide-toc a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 600; }
-.guide-toc a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.75); }
-.guide-step { padding: 44px 0; border-top: 1px solid var(--line); }
-.guide-step:first-of-type { border-top: 0; padding-top: 10px; }
-.guide-step h2 { font-size: 24px; display: flex; align-items: center; gap: 13px; }
-.guide-step h2 .featlist__icon { width: 38px; height: 38px; }
-.guide-step > p { color: var(--muted); margin-top: 14px; max-width: 66ch; }
-.guide-step ul { margin: 16px 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
-.guide-step li { display: flex; gap: 10px; color: var(--ink); font-size: 15px; }
-.guide-step li .icon { width: 18px; height: 18px; color: var(--accent); margin-top: 4px; }
-.guide-step li span b { font-weight: 750; }
-.guide-media { margin-top: 24px; border-radius: var(--r-card); padding: 12px; max-width: 460px; }
-.guide-media img { display: block; width: 100%; border-radius: 12px; }
-.guide-media figcaption { font-size: 13px; color: var(--muted); padding: 10px 6px 2px; }
-.guide-faq { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
-.guide-faq details { border: 1px solid var(--line); border-radius: var(--r-chip); background: rgba(255, 255, 255, 0.55); }
-.guide-faq summary { cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 15px; list-style: none; }
-.guide-faq summary::-webkit-details-marker { display: none; }
-.guide-faq p { padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; }
+.hero .sub {
+  font-size: 1.125rem;
+  line-height: 1.7;
+}
+
+.hero__cta-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+
+.hero__trust-strip {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-top: 14px;
+  padding-top: 24px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.hero__trust-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.hero__trust-item .icon {
+  color: var(--accent);
+}
+
+/* ── Hero Interactive Stream Sniffer Simulator ────────────────── */
+.stream-simulator {
+  position: relative;
+}
+
+.simulator-window {
+  background: var(--surface-1);
+  border-radius: var(--radius-bezel-inner);
+  overflow: hidden;
+  border: 1px solid var(--border-medium);
+  box-shadow: var(--shadow-lg), 0 0 60px -15px var(--accent-glow);
+}
+
+.simulator-topbar {
+  background: var(--bg-subtle);
+  padding: 12px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.window-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.window-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.window-dot:nth-child(1) { background: #ef4444; opacity: 0.8; }
+.window-dot:nth-child(2) { background: #f59e0b; opacity: 0.8; }
+.window-dot:nth-child(3) { background: #10b981; opacity: 0.8; }
+
+.simulator-url-bar {
+  background: var(--surface-2);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-pill);
+  padding: 4px 14px;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simulator-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.detection-banner {
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  border-radius: var(--radius-chip);
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.detection-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.detection-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent);
+  animation: pulse-ring 2s infinite ease-out;
+}
+
+@keyframes pulse-ring {
+  0% { transform: scale(0.95); opacity: 0.9; }
+  50% { transform: scale(1.3); opacity: 0.5; }
+  100% { transform: scale(0.95); opacity: 0.9; }
+}
+
+.detection-title {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.detection-specs {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+}
+
+.active-download-card {
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-chip);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.download-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+.download-head .download-name {
+  overflow-wrap: anywhere;
+}
+
+.download-name {
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.download-format-chip {
+  padding: 3px 8px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-pill);
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.progress-track {
+  width: 100%;
+  height: 8px;
+  background: var(--surface-3);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  width: 68%;
+  background: linear-gradient(90deg, var(--accent), #60a5fa);
+  border-radius: var(--radius-pill);
+  transition: width 0.4s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: progress-shimmer 2s infinite linear;
+}
+
+@keyframes progress-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+
+.segment-visualizer {
+  display: grid;
+  grid-template-columns: repeat(16, 1fr);
+  gap: 3px;
+  margin-top: 4px;
+}
+
+.seg-block {
+  height: 6px;
+  border-radius: 2px;
+  background: var(--surface-3);
+}
+
+.seg-block.done { background: var(--accent); }
+.seg-block.active { background: #93c5fd; animation: blink 1s infinite alternate; }
+
+@keyframes blink {
+  from { opacity: 0.4; }
+  to { opacity: 1; }
+}
+
+.download-meta-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+}
+
+/* ── Section: 3-Step Flow Pipeline ───────────────────────────── */
+/* 3단계 파이프라인: 분리 카드가 아니라 하나의 머신드 레일(헤어라인 분할) */
+.pipeline-rail {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.pipeline-rail .pipeline-card + .pipeline-card {
+  border-left: 1px solid var(--border-subtle);
+}
+
+.pipeline-card {
+  padding: 32px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  position: relative;
+}
+
+.pipeline-step-badge {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  display: grid;
+  place-items: center;
+  font-size: 0.95rem;
+  font-weight: 800;
+  color: var(--accent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.pipeline-card h3 {
+  font-size: 1.25rem;
+  margin-top: 4px;
+}
+
+.pipeline-card p {
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.pipeline-step-badge .icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* 히어로 시뮬레이터 정직성 캡션 */
+.sim-caption {
+  margin-top: 12px;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+/* 접근성: 본문 바로가기 + 키보드 포커스 링 */
+.skip-link {
+  position: fixed;
+  top: -48px;
+  left: 16px;
+  z-index: 200;
+  padding: 10px 16px;
+  border-radius: var(--radius-chip);
+  background: var(--accent);
+  color: #ffffff;
+  font-weight: 700;
+  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.skip-link:focus-visible { top: 16px; }
+
+a:focus-visible,
+button:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 6px;
+}
+
+/* ── Section: Asymmetric Feature Bento ───────────────────────── */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 24px;
+}
+
+.bento-cell {
+  padding: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  overflow: hidden;
+}
+
+.bento-cell--span-7 {
+  grid-column: span 7;
+}
+
+.bento-cell--span-5 {
+  grid-column: span 5;
+}
+
+.bento-cell--span-4 {
+  grid-column: span 4;
+}
+
+.bento-cell--span-8 {
+  grid-column: span 8;
+}
+
+.bento-cell--span-12 {
+  grid-column: span 12;
+}
+
+.bento-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  display: grid;
+  place-items: center;
+  color: var(--accent);
+  margin-bottom: 24px;
+}
+
+.bento-icon-wrapper .icon {
+  width: 24px;
+  height: 24px;
+}
+
+.bento-cell h3 {
+  font-size: 1.35rem;
+  margin-bottom: 10px;
+}
+
+.bento-cell p {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  line-height: 1.65;
+}
+
+.bento-chips-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+.badge-chip {
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  font-size: 0.78rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.badge-chip--accent {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+/* Feature Spec Mock in Bento */
+.bento-spec-box {
+  margin-top: 24px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-chip);
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.spec-line {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.82rem;
+}
+
+.spec-line span:first-child { color: var(--text-muted); }
+.spec-line span:last-child { color: var(--text-primary); font-weight: 600; }
+
+/* ── Section: Companion & Mobile Ecosystem ───────────────────── */
+.mobile-showcase {
+  display: grid;
+  grid-template-columns: 1fr 1.15fr;
+  gap: 56px;
+  align-items: center;
+}
+
+.mobile-cards-stage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.feature-stack-card {
+  padding: 20px 24px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.feature-stack-card:hover {
+  transform: translateX(6px);
+}
+
+.feature-stack-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  display: grid;
+  place-items: center;
+  color: var(--accent);
+  flex: none;
+}
+
+.feature-stack-icon .icon {
+  width: 22px;
+  height: 22px;
+}
+
+.feature-stack-card strong {
+  display: block;
+  font-size: 1.05rem;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+
+.feature-stack-card span {
+  font-size: 0.88rem;
+  color: var(--text-secondary);
+}
+
+/* ── Section: Cross-Platform Matrix ──────────────────────────── */
+.platform-matrix {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 18px;
+  margin-top: 36px;
+}
+
+.platform-card {
+  padding: 28px 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+}
+
+.platform-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  display: grid;
+  place-items: center;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.platform-icon .icon {
+  width: 28px;
+  height: 28px;
+}
+
+.platform-card h3 {
+  font-size: 1.15rem;
+}
+
+.platform-card p {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.platform-status-badge {
+  padding: 3px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 0.72rem;
+  font-weight: 800;
+  margin-top: auto;
+}
+
+.status--stable {
+  background: var(--success-soft);
+  color: var(--success);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.status--preview {
+  background: var(--warning-soft);
+  color: var(--warning);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+/* ── CTA Banner ──────────────────────────────────────────────── */
+.cta-banner {
+  padding: 72px 48px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.cta-banner h2 {
+  font-size: clamp(2rem, 3.5vw, 3rem);
+}
+
+.cta-banner .sub {
+  margin-inline: auto;
+}
+
+/* ── Footer ──────────────────────────────────────────────────── */
+footer {
+  padding: 64px 0 80px;
+  border-top: 1px solid var(--border-subtle);
+  position: relative;
+  z-index: 1;
+}
+
+.footer__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+
+.footer__brand {
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  font-size: 1rem;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footer__links {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.footer__links a {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.footer__links a:hover {
+  color: var(--text-primary);
+}
+
+.footer__copy {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+/* ── Guide Page Layout ───────────────────────────────────────── */
+.guide-layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 56px;
+  align-items: start;
+  padding-bottom: 120px;
+}
+
+.guide-toc {
+  position: sticky;
+  top: calc(var(--nav-h) + 36px);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.guide-toc-title {
+  font-size: 0.82rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.guide-toc-link {
+  display: block;
+  padding: 8px 12px;
+  border-radius: var(--radius-chip);
+  color: var(--text-secondary);
+  font-size: 0.92rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.guide-toc-link:hover {
+  color: var(--text-primary);
+  background: var(--surface-2);
+}
+
+.guide-toc-link.is-active {
+  color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 700;
+}
+
+.guide-step-card {
+  padding: 44px;
+  margin-bottom: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.guide-step-card:last-child {
+  margin-bottom: 0;
+}
+
+.guide-step-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.guide-step-num {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-border);
+  display: grid;
+  place-items: center;
+  color: var(--accent);
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+.guide-step-head h2 {
+  font-size: 1.6rem;
+}
+
+.guide-step-card p {
+  font-size: 1.02rem;
+  line-height: 1.7;
+}
+
+.guide-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 8px;
+}
+
+.guide-list li {
+  display: flex;
+  gap: 14px;
+  font-size: 0.96rem;
+  color: var(--text-secondary);
+  align-items: flex-start;
+}
+
+.guide-list li .icon {
+  color: var(--accent);
+  margin-top: 3px;
+  width: 18px;
+  height: 18px;
+}
+
+.guide-list li strong {
+  color: var(--text-primary);
+}
+
+.guide-tip-box {
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius-chip);
+  padding: 16px 20px;
+  margin-top: 12px;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.guide-tip-box strong {
+  color: var(--text-primary);
+}
+
+/* FAQ Accordion */
+.faq-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.faq-item {
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-chip);
+  background: var(--surface-1);
+  overflow: hidden;
+  transition: border-color 0.2s ease;
+}
+
+.faq-item:hover {
+  border-color: var(--border-highlight);
+}
+
+.faq-item summary {
+  padding: 18px 22px;
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  user-select: none;
+}
+
+.faq-item summary::-webkit-details-marker {
+  display: none;
+}
+
+.faq-chevron {
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  color: var(--text-muted);
+}
+
+.faq-item[open] .faq-chevron {
+  transform: rotate(180deg);
+  color: var(--accent);
+}
+
+.faq-content {
+  padding: 0 22px 20px;
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+/* ── Releases Page Layout ────────────────────────────────────── */
+.rel-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 48px;
+  align-items: start;
+  padding-bottom: 120px;
+}
+
+.rel-rail {
+  position: sticky;
+  top: calc(var(--nav-h) + 36px);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rel-rail__box {
+  padding: 24px;
+}
+
+.rel-rail__box h3 {
+  font-size: 0.88rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-bottom: 14px;
+}
+
+.rel-rail__os {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-chip);
+  color: var(--text-secondary);
+  font-size: 0.92rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.rel-rail__os:hover {
+  background: var(--surface-2);
+  color: var(--text-primary);
+}
+
+.rel-rail__os .icon {
+  width: 20px;
+  height: 20px;
+  color: var(--text-muted);
+}
+
+.rel-featured {
+  padding: 40px;
+}
+
+.rel-featured__meta {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.rel-featured__tag {
+  font-size: 1.85rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.rel-pill {
+  display: inline-flex;
+  padding: 4px 12px;
+  border-radius: var(--radius-pill);
+  font-size: 0.78rem;
+  font-weight: 800;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid var(--accent-border);
+}
+
+.rel-pill--pre {
+  background: var(--warning-soft);
+  color: var(--warning);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+.rel-featured__date {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.rel-featured__notes {
+  margin-top: 18px;
+  color: var(--text-secondary);
+  font-size: 0.96rem;
+  line-height: 1.7;
+  white-space: pre-line;
+}
+
+.dl-groups {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 18px;
+  margin-top: 32px;
+}
+
+.dl-group {
+  border-radius: var(--radius-chip);
+  background: var(--surface-2);
+  border: 1px solid var(--border-medium);
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dl-group__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 800;
+  font-size: 1.05rem;
+  color: var(--text-primary);
+}
+
+.dl-group__sub {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.dl-asset {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 10px 0;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.dl-asset:first-of-type {
+  border-top: 0;
+}
+
+.dl-asset__name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow-wrap: anywhere;
+}
+
+.dl-asset__size {
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  margin-top: 2px;
+}
+
+.dl-reco {
+  box-shadow: 0 0 0 2px var(--accent), 0 6px 20px var(--accent-glow) !important;
+}
+
+.rel-old {
+  margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.rel-old details {
+  border-radius: var(--radius-chip);
+  border: 1px solid var(--border-medium);
+  background: var(--surface-1);
+}
+
+.rel-old summary {
+  cursor: pointer;
+  padding: 18px 24px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  list-style: none;
+}
+
+.rel-old summary::-webkit-details-marker {
+  display: none;
+}
+
+.rel-old summary .rel-featured__date {
+  margin-left: auto;
+}
+
+.rel-old__body {
+  padding: 0 24px 24px;
+}
+
+.rel-empty {
+  padding: 72px 40px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.rel-empty .icon {
+  width: 48px;
+  height: 48px;
+  color: var(--accent);
+}
+
+.rel-empty h2 {
+  font-size: 1.5rem;
+}
+
+/* ── Reveal Animations ───────────────────────────────────────── */
+html.js .reveal {
+  opacity: 0;
+  transform: translateY(28px);
+  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+html.js .reveal.in {
+  opacity: 1;
+  transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.js .reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* ── Responsive Mechanics ────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .hero__grid {
+    grid-template-columns: 1fr;
+    gap: 48px;
+  }
+  .bento-cell--span-7, .bento-cell--span-5, .bento-cell--span-4, .bento-cell--span-8 {
+    grid-column: span 12;
+  }
+  .pipeline-rail {
+    grid-template-columns: 1fr;
+  }
+  .pipeline-rail .pipeline-card + .pipeline-card {
+    border-left: 0;
+    border-top: 1px solid var(--border-subtle);
+  }
+  .mobile-showcase {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+  .platform-matrix {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 
-/* ── 모바일 반응형 ──────────────────────────────────────────── */
 @media (max-width: 860px) {
-  .nav { gap: 14px; }
   .nav__links { display: none; }
-  .hero { min-height: auto; padding-bottom: 64px; }
-  .hero__grid, .mobile__grid { grid-template-columns: 1fr; gap: 40px; }
-  .bento { grid-template-columns: 1fr; }
-  .bento__cell--wide { min-height: 300px; }
-  .featlist { grid-template-columns: 1fr; gap: 28px; }
-  .section-pad { padding: 72px 0; }
-  .band { padding: 48px 24px; }
-  .band__oses { gap: 22px; flex-wrap: wrap; }
-  .rel-layout, .guide-layout { grid-template-columns: 1fr; gap: 28px; }
-  .rel-rail, .guide-toc { position: static; }
-  .dl-groups { grid-template-columns: 1fr; }
-  .mobile__stage { min-height: 380px; }
-  .rel-featured { padding: 26px; }
+  .nav__hamburger { display: block; }
+  .rel-layout, .guide-layout {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+  .rel-rail, .guide-toc {
+    position: static;
+  }
+  .dl-groups {
+    grid-template-columns: 1fr;
+  }
+  .section-pad {
+    padding: 80px 0;
+  }
+  .hero {
+    padding-top: calc(var(--nav-h) + 40px);
+    padding-bottom: 64px;
+    min-height: auto;
+  }
+  .guide-step-card {
+    padding: 28px 20px;
+  }
+  .rel-featured {
+    padding: 28px 20px;
+  }
+}
+
+@media (max-width: 640px) {
+  .wrap {
+    width: calc(100% - 32px);
+  }
+  .platform-matrix {
+    grid-template-columns: 1fr;
+  }
+  .hero__cta-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .btn {
+    width: 100%;
+  }
 }