/* ============================================================
   lotto.css — 로또 추첨기 전용 스타일

   ★ 로또 페이지의 공·버튼·기록 목록 모양만 바꾸고 싶을 때
     이 파일을 수정하세요. 다른 페이지에는 영향이 없습니다.
   ============================================================ */

/* 추첨기 본체 박스 */
.stage{
  background:linear-gradient(180deg,var(--card),#141631);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px 20px 26px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

/* 로또 공 */
.balls{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;min-height:56px;align-items:center}
.ball{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#1a1a1a;
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.28), inset 3px 3px 6px rgba(255,255,255,.55);
}
.ball.pop{animation:pop .5s cubic-bezier(.18,1.4,.4,1) both}
@keyframes pop{
  0%{transform:scale(0) rotate(-40deg);opacity:0}
  60%{transform:scale(1.12) rotate(6deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.slot{width:52px;height:52px;border-radius:50%;border:2px dashed var(--line)}
.hint{margin-top:20px;text-align:center;color:var(--muted);font-size:13.5px}

/* 버튼들 */
.actions{display:flex;gap:10px;margin-top:18px}
.draw{
  flex:1;padding:16px;font-size:16.5px;color:#241c00;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 12px 24px -10px rgba(242,201,76,.5);
}
.draw:hover{filter:brightness(1.05)}
.five{
  padding:16px 18px;font-size:14.5px;color:var(--gold);
  background:rgba(242,201,76,.08);border:1px solid rgba(242,201,76,.3);
}
.five:hover{background:rgba(242,201,76,.14)}
.share{
  width:100%;margin-top:10px;padding:14px;font-size:14px;font-weight:700;
  color:var(--text);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
}
.share:hover{background:rgba(255,255,255,.09)}

/* 뽑은 번호 기록 */
.log{margin-top:26px}
.log-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.log-title{font-size:13px;font-weight:700;color:var(--muted)}
.clear{background:none;font-size:12.5px;color:var(--muted);padding:4px 6px}
.clear:hover{color:var(--text)}
.row{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);margin-bottom:8px;
}
.tag{font-size:12px;font-weight:800;color:var(--gold);width:18px;flex-shrink:0}
.mini{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.mini .ball{width:34px;height:34px;font-size:15px}
.copy{
  background:none;color:var(--muted);font-size:12px;padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);border-radius:9px;flex-shrink:0;
}
.copy:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.empty-log{color:var(--muted);font-size:13px;text-align:center;padding:16px 0}

@media (prefers-reduced-motion:reduce){.ball.pop{animation:none}}
@media (max-width:420px){
  .ball{width:46px;height:46px;font-size:19px}
  .slot{width:46px;height:46px}
}