/* =========================================================================== 리셋 · 타이포 · 배경(회로 패턴 + 시그니처 발광선) =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nx-header-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--nx-bg-base); color: var(--nx-text); font-family: var(--nx-font-sans); font-size: var(--nx-fs-md); font-weight: var(--nx-fw-base); line-height: 1.75; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* 배경 회로 패턴 — 정보 영역 뒤가 아니라 전체 캔버스 가장 뒤에 깐다. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(var(--nx-bg-circuit) 1px, transparent 1px), linear-gradient(90deg, var(--nx-bg-circuit) 1px, transparent 1px); background-size: 72px 72px; opacity: 0.55; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%); } /* 깊이감을 만드는 상단 광원. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient( ellipse 70% 45% at 50% -8%, rgba(0, 229, 255, 0.12), transparent 62% ), radial-gradient(ellipse 50% 40% at 88% 12%, rgba(124, 92, 255, 0.08), transparent 60%); } h1, h2, h3, h4 { margin: 0; line-height: 1.32; letter-spacing: -0.02em; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; transition: color var(--nx-t-fast); } img, svg { max-width: 100%; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(0, 229, 255, 0.28); color: #fff; } :focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; border-radius: var(--nx-r-sm); } /* 스크롤바 — 산업용 HUD 느낌을 유지한다. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--nx-bg-sunken); } ::-webkit-scrollbar-thumb { background: var(--nx-s3); border-radius: var(--nx-r-pill); border: 2px solid var(--nx-bg-sunken); } ::-webkit-scrollbar-thumb:hover { background: var(--nx-accent-dim); } /* ── 유틸 ─────────────────────────────────────────────────── */ .mono { font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; } .accent { color: var(--nx-accent); } .glow-soft { text-shadow: var(--nx-glow-soft); } .glow-strong { text-shadow: var(--nx-glow-strong); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 스크롤 등장 — 레이아웃이 아니라 불투명도/트랜스폼만 움직인다. `.js` 로 감싸는 이유: JS 가 죽거나 늦게 뜨면 본문 전체가 투명해진다. 스크립트가 에서 html 에 .js 를 붙였을 때만 숨긴다. */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--nx-t-slow), transform var(--nx-t-slow); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }