releases/site/index.html

604 lines
32 KiB
HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<a class="skip-link" href="#how-it-works">본문 바로가기</a>
<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="#compare">비교</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="#compare">비교</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 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>
<!-- Multi-Tab Interactive Hero Workstation Simulator -->
<div class="hero__visual reveal">
<div class="bezel-shell spotlight-card">
<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>
<!-- Workstation Tabs Switcher -->
<div class="simulator-tabs" role="tablist" aria-label="시뮬레이터 모드">
<button class="sim-tab-btn is-active" role="tab" aria-selected="true" data-tab="tab-sniffer">1. 스트림 감지</button>
<button class="sim-tab-btn" role="tab" aria-selected="false" data-tab="tab-segments">2. 세그먼트 맵</button>
<button class="sim-tab-btn" role="tab" aria-selected="false" data-tab="tab-mobile">3. 모바일 QR</button>
</div>
</div>
<div class="simulator-content">
<!-- TAB 1: Stream Sniffer (Default) -->
<div class="sim-tab-panel is-active" id="tab-sniffer" role="tabpanel">
<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 badge-chip--accent" style="font-size:0.72rem">Cookie Passed</span>
</div>
<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>
<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></span>
<span>남은 시간: <strong style="color:var(--text-primary)">31초</strong></span>
</div>
</div>
</div>
<!-- TAB 2: Segment Parallel Map -->
<div class="sim-tab-panel" id="tab-segments" role="tabpanel">
<div style="display:flex;justify-content:space-between;align-items:center;padding:4px 0">
<span style="font-weight:700;font-size:0.9rem">16-Thread 병렬 세그먼트 수신 상태</span>
<span class="badge-chip badge-chip--accent text-mono" style="font-size:0.7rem">AES-128 Active</span>
</div>
<div style="display:grid;grid-template-columns:repeat(8,1fr);gap:6px;background:var(--surface-2);padding:14px;border-radius:var(--radius-chip);border:1px solid var(--border-subtle)">
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#01</div>
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#02</div>
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#03</div>
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#04</div>
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#05</div>
<div style="height:26px;background:var(--accent);border-radius:4px;display:grid;place-items:center;font-size:0.7rem" class="text-mono">#06</div>
<div style="height:26px;background:#60a5fa;border-radius:4px;display:grid;place-items:center;font-size:0.7rem;animation:blink 1s infinite alternate" class="text-mono">#07</div>
<div style="height:26px;background:#60a5fa;border-radius:4px;display:grid;place-items:center;font-size:0.7rem;animation:blink 1s infinite alternate" class="text-mono">#08</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#09</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#10</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#11</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#12</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#13</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#14</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#15</div>
<div style="height:26px;background:var(--surface-3);border-radius:4px;display:grid;place-items:center;font-size:0.7rem;color:var(--text-muted)" class="text-mono">#16</div>
</div>
<div class="bento-spec-box text-mono" style="margin-top:4px">
<div class="spec-line"><span>이어받기 지원:</span><span style="color:var(--success)">세그먼트 체크포인트 자동 보존</span></div>
<div class="spec-line"><span>리먹서:</span><span>ffmpeg Direct Stream Copy (재인코딩 없음)</span></div>
</div>
</div>
<!-- TAB 3: Mobile QR Sync -->
<div class="sim-tab-panel" id="tab-mobile" role="tabpanel">
<div style="display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;background:var(--surface-2);padding:18px;border-radius:var(--radius-chip);border:1px solid var(--border-subtle)">
<div style="width:100px;height:100px;background:#ffffff;border-radius:10px;padding:6px;display:grid;place-items:center">
<svg class="icon" style="width:84px;height:84px;color:#08090d"><use href="assets/icons.svg#qr-code"/></svg>
</div>
<div>
<div style="font-weight:700;font-size:0.95rem">내장 로컬 서버 온라인</div>
<div class="text-mono" style="font-size:0.8rem;color:var(--accent);margin:4px 0">http://192.168.1.100:5000</div>
<p style="font-size:0.82rem;color:var(--text-secondary)">스마트폰에서 컴패니언 앱을 열고 QR을 스캔하면 즉시 라이브러리가 연결됩니다.</p>
</div>
</div>
<div class="bento-spec-box text-mono" style="margin-top:4px">
<div class="spec-line"><span>전송 방식:</span><span>홈 Wi-Fi 로컬 다이렉트 (클라우드 업로드 0%)</span></div>
<div class="spec-line"><span>재생 지연:</span><span style="color:var(--success)">로컬 즉시 스트리밍</span></div>
</div>
</div>
<!-- Quick Specs Row -->
<div class="spec-line text-mono" style="padding:10px 4px 0;font-size:0.75rem;border-top:1px solid var(--border-subtle)">
<span>단축키: <kbd>Ctrl</kbd> + <kbd>D</kbd> 다운로드 패널 열기</span>
<span>상태: <strong style="color:var(--success)">엔진 정상 대기 중</strong></span>
</div>
</div>
</div>
</div>
<p class="sim-caption">실제 다운로드 흐름을 재현한 예시 화면입니다.</p>
</div>
</div>
</header>
<!-- Section 1: How it Works (3-Step Pipeline) -->
<section id="how-it-works" class="section-pad">
<div class="wrap">
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Section 2: Why MEDIABROWSER (Problem vs Solution Comparison Matrix) -->
<section id="compare" class="section-pad" style="padding-top:0">
<div class="wrap">
<div class="section-head section-head--center reveal">
<h2>기존 방식의 피로감, 여기서 끝납니다</h2>
<p class="sub">불안정한 웹 변환기나 번거로운 다운로더와 비교해 보세요. MEDIABROWSER 는 그 과정 전부를 앱 하나로 끝냅니다.</p>
</div>
<div class="compare-grid">
<!-- Legacy Approach Card -->
<div class="bezel-shell spotlight-card reveal">
<div class="bezel-inner compare-card compare-card--legacy">
<div class="compare-head">
<div class="compare-item-icon"><svg class="icon" style="width:14px;height:14px"><use href="assets/icons.svg#x"/></svg></div>
<div class="compare-title">기존 웹 변환 사이트 및 확장 프로그램</div>
</div>
<ul class="compare-list">
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
<div>
<strong>매번 주소를 복사하고 붙여넣는 번거로움</strong>
<p>영상을 볼 때마다 URL 을 복사하고 변환 사이트에 붙여넣어야 합니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
<div>
<strong>로그인 세션이 풀려 다운로드 실패</strong>
<p>회원 전용 영상이나 보안 스트림은 쿠키가 전달되지 않아 에러가 발생합니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
<div>
<strong>끊기면 0%부터 다시 시작하는 불안정함</strong>
<p>대용량 파일 수신 중 네트워크가 끊기면 처음부터 다시 받아야 합니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#x"/></svg></div>
<div>
<strong>무수한 악성 팝업 광고와 개인정보 유출 위험</strong>
<p>의심스러운 외부 서버로 내 데이터와 링크가 전송됩니다.</p>
</div>
</li>
</ul>
</div>
</div>
<!-- MEDIABROWSER Approach Card -->
<div class="bezel-shell spotlight-card reveal">
<div class="bezel-inner compare-card compare-card--modern">
<div class="compare-head">
<div class="compare-item-icon"><svg class="icon" style="width:14px;height:14px"><use href="assets/icons.svg#check-circle"/></svg></div>
<div class="compare-title" style="color:var(--accent)">MEDIABROWSER</div>
</div>
<ul class="compare-list">
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
<div>
<strong>주소 복사 없이 재생 즉시 자동 감지</strong>
<p>웹 서핑 중 비디오가 재생되면 스트림 정보를 가로채 바로 다운로드 목록에 올립니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
<div>
<strong>탭의 쿠키와 Referer 헤더 자동 승계</strong>
<p>내가 보고 있던 로그인 계정 상태 그대로 보안 스트림도 문제없이 수신합니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
<div>
<strong>1바이트부터 이어받는 세그먼트 병렬 엔진</strong>
<p>수백 개의 청크 단위로 진행도를 기록하며 끊겨도 멈춘 지점부터 즉시 이어받습니다.</p>
</div>
</li>
<li class="compare-item">
<div class="compare-item-icon"><svg class="icon" style="width:12px;height:12px"><use href="assets/icons.svg#check-circle"/></svg></div>
<div>
<strong>광고 없는 로컬 앱 &amp; 홈 Wi-Fi 모바일 스트리밍</strong>
<p>외부 서버를 거치지 않고 내 PC와 휴대폰 간에 직접 안전하게 전송합니다.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Core Engineering Features (Asymmetric Bento Grid) -->
<section id="features" class="section-pad" style="padding-top:0">
<div class="wrap">
<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 spotlight-card 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>
<!-- Bento Cell 2: Resilient Segment Engine (Span 5) -->
<div class="bezel-shell bento-cell--span-5 spotlight-card 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>
<!-- Bento Cell 3: Smart Duplicate Detector & Scheduling (Span 5) -->
<div class="bezel-shell bento-cell--span-5 spotlight-card 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>
<!-- Bento Cell 4: Realtime Telemetry & ffmpeg Remux (Span 7) -->
<div class="bezel-shell bento-cell--span-7 spotlight-card 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>평균 1~3초 이내 완료 (무손실 스트림 복사)</span></div>
<div class="spec-line"><span>지원 포맷:</span><span>MP4, MKV, M4A 오디오 추출 지원</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4: 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);margin-top:12px">내 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 class="mobile-cards-stage reveal">
<div class="bezel-shell spotlight-card">
<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 spotlight-card">
<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 spotlight-card">
<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 5: 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 spotlight-card 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 spotlight-card 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 spotlight-card 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 spotlight-card 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 6: Bottom CTA Banner -->
<section class="section-pad" style="padding-top:0">
<div class="wrap">
<div class="bezel-shell spotlight-card 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>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="wrap footer__row">
<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>
<script src="site.js" defer></script>
</body>
</html>