@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;700;900&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
}

body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: 'Pretendard', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box; }

.card{
  width: 250px;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: none;
  text-align: center;
}

.discWrap{
  width: 150px;
  height: 150px;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  cursor: pointer;
}

/* ✅ 고정 그림자 (디스크가 돌아도 그림자는 고정) */
.discWrap::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  box-shadow: 0 18px 28px rgba(0,0,0,0.22);
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
}

.disc{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  position:relative;
  z-index:1;

  animation: spin 10s linear infinite;
  animation-play-state: paused; /* 기본 멈춤 */
}

/* ✅ 재생(클릭) 중일 때만 회전 */
.card.playing .disc{
  animation-play-state: running;
}

/* ✅ 미세 하이라이트 */
.disc::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 0 12px rgba(255,255,255,0.18);
  opacity:0.35;
  pointer-events:none;
}

.discHole{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:38px;
  height:38px;
  border-radius:50%;
  background:#111;            /* 바깥 검정 */
  box-shadow: inset 0 0 0 10px #fff; /* 안쪽 흰 */
  z-index:2;
  pointer-events:none;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}