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

This commit is contained in:
Yun Chan 2026-08-18 07:35:09 +09:00
parent 02995f4153
commit 9c9d9cb024
7 changed files with 2482 additions and 510 deletions

View file

@ -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>