/* ============================================================
   base.css — reset, typography, keyframes, scrollbar
   10 keyframes ported verbatim from the Neon references.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  /* 한글이 단어(어절)별로 줄바꿈되도록 — 어색한 중간 끊김 방지 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }   /* 외톨이 단어(고아) 줄바꿈 완화 */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 700; }
::selection { background: rgba(168, 85, 247, .85); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0A0712; }
::-webkit-scrollbar-thumb { background: #2a2140; border-radius: 8px; border: 3px solid #0A0712; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* keyboard focus ring */
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); }

/* ===================== 10 KEYFRAMES (from refs) ===================== */
@keyframes livepulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.78);} }
@keyframes glowpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(168,85,247,.55);} 70%{ box-shadow:0 0 0 8px rgba(168,85,247,0);} }
@keyframes marquee   { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes floaty    { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes spin      { to{ transform:rotate(360deg);} }
@keyframes eqbar     { 0%,100%{ transform:scaleY(.22);} 50%{ transform:scaleY(1);} }
@keyframes blink2    { 0%,100%{ opacity:.25;} 50%{ opacity:1;} }
@keyframes chatrise  { 0%{ opacity:0; transform:translateY(14px);} 10%{ opacity:1; transform:translateY(0);} 82%{ opacity:1;} 100%{ opacity:0; transform:translateY(-6px);} }
@keyframes hueline   { 0%{ background-position:0% 50%;} 100%{ background-position:200% 50%;} }
@keyframes scan      { 0%{ transform:translateY(-100%);} 100%{ transform:translateY(2200%);} }

/* extra utility motion */
@keyframes pingring  { 0%{ transform:scale(.6); opacity:.85;} 100%{ transform:scale(2.6); opacity:0;} }

/* reduced motion: kill all looping animation + canvas handled in JS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}