/* ============================================================
   history.css — screen 4: 정지정지의 역사 (러시안 룰렛식 회전 실린더). 코멘트 #20
   곡 톱니가 왼쪽에 원을 이루며 배치·회전. 포커스(정면) 곡만 하이라이트 + 오른쪽 정보.
   ============================================================ */
.his-wrap{position:relative;height:100%;display:flex;flex-direction:column;z-index:2}
#history .sec-head{flex:0 0 auto;margin:23px 19px 0}
#history .sec-head .spark{left:70px}

.revolver{position:relative;flex:1 1 auto;min-height:0}

/* 회전 무대 — 드래그 레이어 + 곡 톱니 */
.rev-stage{position:absolute;inset:0;touch-action:none;cursor:grab}
.rev-stage:active{cursor:grabbing}
.rev-song{
  position:absolute;left:0;top:0;width:118px;height:118px;
  padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .3s ease;   /* transform/opacity는 JS가 매 프레임 갱신 */
}
.rev-song img{width:100%;height:100%;animation:spin 12s linear infinite;will-change:transform}
.rev-song.focus img{animation-duration:3.4s;filter:drop-shadow(0 0 10px rgba(255,231,71,.75))}
@media(prefers-reduced-motion:reduce){.rev-song img{animation:none}}

/* 포커스 곡 정보 — 정면(좌측 30%) 오른쪽에 표시 */
.rev-info{
  position:absolute;left:48%;right:14px;top:50%;transform:translateY(-50%);
  text-align:left;pointer-events:none;
  opacity:0;transition:opacity .28s ease;
}
.rev-info.show{opacity:1}
.rev-title{font-size:21px;font-weight:700;color:#fff;line-height:1.35}
.rev-year{font-size:16px;font-weight:400;color:var(--cream-dim)}
.rev-credits{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--cream-dim)}
.rev-link{
  display:inline-block;margin-top:16px;font-size:13px;color:var(--yellow);
  letter-spacing:.03em;text-decoration:none;pointer-events:auto;
  border-bottom:1px solid rgba(255,231,71,.5);padding-bottom:2px;
}
.rev-link:active{opacity:.7}

.rev-hint{
  position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font-family:var(--sans);font-size:12.5px;color:var(--cream-dim);letter-spacing:.04em;
  pointer-events:none;
}
.rev-hint .arrows{color:var(--yellow)}