:root{
  --bg:#ffffff; --fg:#0b0c10; --fg-muted:#6b7280;
  --dur:180ms;  --progress:0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,-apple-system,'Noto Sans KR',Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--fg)}

.stage{min-height:100svh;display:grid;place-items:center;padding:6vh 3vw}
.eye-wrap{display:grid;place-items:center;gap:12px}

/* 눈 이미지(그림자 제거) */
.eye-img{width:clamp(300px,46vw,620px);height:auto;display:block;transition:opacity var(--dur) linear}
.hint{color:var(--fg-muted);font-size:.98rem;margin:6px 0 0;text-align:center}

/* 암전 */
body.stage-closed .eye-img{opacity:0}
.blackout{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity var(--dur) linear}
body.stage-closed .blackout{opacity:1}

/* 뉴스 레이어 (전체 화면) */
.news{position:fixed;inset:0;display:block;padding:0;background:linear-gradient(180deg,#0a0a0a,#121212)}
.news[hidden]{display:none}

/* 랜덤 배치 필드: 안전 패딩 6vh 5vw */
.news-inner{position:absolute;inset:6vh 5vw;max-width:none}
/* 배경 전면 큰 문구 줄바꿈 포함 버전 */
/* 배경 전면 큰 문구 — 여백/줄바꿈 조정 버전 */
.hl{
  position:absolute;
  left:50%;
  top:45%; /* 중앙보다 살짝 위 */
  transform:translate(-50%,-50%);
  font-family:'Pretendard','Spoqa Han Sans Neo','Noto Sans KR',system-ui,sans-serif;
  font-size:clamp(70px, 9vw, 160px); /* 화면 꽉 차게 (너무 크면 8vw 정도로 줄이기) */
  line-height:1.2;
  margin:0;
  color:#e5e5e5;
  font-weight:800;
  letter-spacing:-0.5px;
  opacity:0.18; /* 조금 더 진하게 */
  text-align:center;
  white-space:pre-line; /* 줄바꿈 제어용 */
  word-break:keep-all;
  max-width:85vw;
  pointer-events:none;
  user-select:none;
}

/* 문구가 너무 넓을 때 두 줄로만 나뉘게 제한 */
@media (max-width:800px){
  .hl{
    font-size:clamp(48px, 11vw, 100px);
    line-height:1.25;
    top:42%;
  }
}



/* 피드 필드: 전체 영역 절대 포지셔닝 */
.feed{position:absolute;inset:0;list-style:none;margin:0;padding:0;opacity:0;transition:opacity 360ms ease}

/* 각 뉴스 카드: 랜덤 위치/회전/딜레이 */
.feed .item{
  position:absolute;
  width:clamp(220px,36vw,560px);
  max-width:90vw;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;
  padding:14px 16px;
  backdrop-filter:saturate(120%) blur(0.5px);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  will-change:transform,opacity;
  /* 기본 중앙 기준(스크립트에서 left/top/rotate 주입) */
  transform:translate(-50%,-50%);
}

/* 텍스트 스타일 */
.feed .headline{
  margin:0 0 6px;
  font-size:clamp(18px,3.6vw,28px);
  line-height:1.1;
  color:#ff2b2b;
  font-weight:800;
  letter-spacing:.1px;
  text-shadow:0 0 12px rgba(255,40,40,.28);
  animation:glitch .6s steps(2,end) 1;
}
.feed .meta{
  margin:0;
  color:#b8b8b8;
  font-size:clamp(12px,2.4vw,14px);
}
.feed .meta .dot{padding:0 .5em;opacity:.6}

/* 표시 애니메이션 */
.news.show .hl{opacity:1}
.news.show .feed{opacity:1}

@keyframes glitch{
  0%{text-shadow:2px 0 red,-2px 0 cyan;transform:translate(0)}
  20%{text-shadow:-2px 0 red,2px 0 cyan;transform:translate(1px,-1px)}
  40%{text-shadow:3px 0 red,-3px 0 cyan;transform:translate(-1px,1px)}
  60%{text-shadow:-3px 0 red,3px 0 cyan;transform:translate(2px,-1px)}
  80%{text-shadow:2px 0 red,-2px 0 cyan;transform:translate(-1px,1px)}
  100%{text-shadow:0 0 12px rgba(255,40,40,.28);transform:none}
}

/* 슬라이더 */
.vslider{position:fixed;right:18px;top:50%;transform:translateY(-50%);width:44px;height:clamp(300px,62vh,520px);z-index:1200;user-select:none}
.vslider .rail{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);width:6px;background:rgba(0,0,0,.14);border-radius:999px}
.vslider .handle{position:absolute;left:50%;width:32px;height:32px;margin-left:-16px;top:calc(var(--progress)*(100% - 32px));border-radius:50%;border:none;outline:none;background:#111;color:#fff;cursor:grab;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:top 80ms linear,background-color 80ms linear,box-shadow 80ms linear}
.vslider .handle:active{cursor:grabbing}
.vslider .ticks{position:absolute;right:54px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;color:#475569;font-size:.85rem;text-align:right}
body.stage-closed .vslider .rail{background:rgba(255,255,255,.5)}
body.stage-closed .vslider .handle{background:#fff;color:#111;box-shadow:0 6px 20px rgba(255,255,255,.28)}
body.stage-closed .vslider .ticks{color:#e5e7eb}