/*
 * apps/lucky-draw.css
 * "🍀 행운 추첨" 카드 전용 스타일 (완전 무작위 번호 뽑기)
 * css/apps/lotto-picker.css 구조를 참고해 별도 파일로 분리함.
 */

.lucky-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.lucky-toolbar .btn-primary {
  flex: 1 1 auto;
  min-width: 160px;
}

.lucky-canvas-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 8px;
  overflow: hidden;
}

#luckyCanvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-md) - 4px);
  background: #ffffff;
}

.lucky-result-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lucky-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  flex-wrap: wrap;
}

.lucky-result-rank {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  border-radius: 999px;
  padding: 4px 10px;
  flex: 0 0 auto;
}

/* 아주 드물게(1%) 나오는 골드 변형 - 은은한 색만 다르고 반짝임 효과는 없다. */
.lotto-ball.ball-gold {
  background: #c9971f;
  color: #fff;
}