:root { --ink: #fff; --ink-soft: rgba(255, 255, 255, .74); --glass: rgba(255, 255, 255, .12); --glass-hover: rgba(255, 255, 255, .2); --blur: blur(40px) saturate(180%) brightness(.75); --edge: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .1); --shadow: 0 20px 50px rgba(8, 12, 24, .28); } * { box-sizing: border-box; margin: 0; } body { min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Pretendard", "Segoe UI", "Malgun Gothic", sans-serif; color: var(--ink); background: #3b404c; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .bg { position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(14, 18, 30, .42), rgba(14, 18, 30, .5)), url("../images/bg.webp") center / cover no-repeat; } .glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--edge); } svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sprite { position: absolute; width: 0; height: 0; } a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }