-
목록을 불러오지 못했어요
-
잠시 후 새로고침해 주세요. 급하다면
- 릴리스 저장소에서 직접 받을 수 있습니다.
+ root.innerHTML = `
+
릴리스 목록을 불러오지 못했습니다
+
네트워크 상태를 확인하고 새로고침해 주세요. 급하신 경우 릴리스 저장소에서 직접 다운로드하실 수 있습니다.
`;
}
})();
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%;
+ }
}