/* ===== 배경: 검정 → 회색 그라데이션 + 천천히 흐르는 애니메이션 ===== */
:root{
  --bg-top:#000000;
  --bg-bottom:##55555;
  --text:#e5e7eb;
  --muted:#b3b3b3;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%; color-scheme: dark;}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height:100vh;
  display:flex; flex-direction:column;
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  position:relative; overflow-x:hidden;
}

/* 흐르는 그라데이션 오버레이 */
body::before{
  content:"";
  position:fixed; inset:-20% -10% -10% -10%;
  background:
    radial-gradient(40% 35% at 20% 15%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(45% 40% at 85% 25%, rgba(255,255,255,.04), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: floatBlob 28s linear infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes floatBlob{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-4%, 2%, 0) scale(1.05); }
}

/* 파티클 캔버스 */
#bg{
  position:fixed; inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* 컨테이너 & 레이아웃 */
.container{max-width:var(--maxw); margin:0 auto; padding:0 12px}

/* 헤더 */
.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{font-weight:700; color:#fff; letter-spacing:.2px}
.nav a{color:#cfcfcf; text-decoration:none; margin-left:20px}
.nav a:hover{color:#fff}

/* Hero */
.hero{
  position:relative; z-index:1;
  flex:1; display:flex; align-items:center; justify-content:center;
  text-align:center; 
  padding:80px 16px 60px; /* 상하 여백 줄임 */
}
.headline{
  margin:0;
  font-size: clamp(36px, 5vw, 64px); /* 조금 더 압축 */
  font-weight: 800;
  letter-spacing: .2px;
  color:#fff;
  text-shadow: 0 2px 30px rgba(255,255,255,.08);
}

/* Footer */
.site-footer{
  z-index:1;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center; padding:22px 0; color:#bfbfbf; background:rgba(0,0,0,.35);
}

/* 접근성 */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  #bg{display:none}
}