body{
 margin:0;
 font-family:'Jua',sans-serif;
 background:linear-gradient(#87CEEB, #B0E0E6); /* 하늘색 */
 overflow:hidden;
}

.machine{
 position:absolute;
 bottom:180px;
 left:50%;
 transform:translateX(-50%);
 width:420px;
 height:420px;
 border-radius:50%;
 border:16px solid #7e57c2;
 overflow:hidden;
 background:radial-gradient(circle, rgba(255,255,255,0.9), transparent);
}

.ball{
 position:absolute;
 width:64px;
 height:64px;
 border-radius:50%;
}

.base{
 position:absolute;
 bottom:80px;
 left:50%;
 transform:translateX(-50%);
 width:340px;
 height:190px;
 background:#6a1b9a;
 border-radius:40px;
}

.output-ball{
 position:absolute;
 bottom:-10px;
 left:50%;
 transform:translateX(-50%);
 width:140px;
 height:140px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:56px;
 color:#fff;
 opacity:0;
}

.result{
 position:absolute;
 top:40px;
 left:50%;
 transform:translateX(-50%);
 font-size:120px;
 color:white;
}

.top-panel{
 position:absolute;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 background:rgba(255,255,255,0.15);
 padding:6px 12px;
 border-radius:12px;
 backdrop-filter:blur(10px);
}

#maxInput{
 width:80px;
 text-align:center;
 padding:5px;
 border-radius:6px;
 border:none;
}

button{
 position:absolute;
 bottom:20px;
 padding:10px 25px;
 border:none;
 border-radius:10px;
 cursor:pointer;
}

.start{left:40%}
.reset{left:55%}

#soundToggle{
 position:absolute;
 top:10px;
 right:10px;
 font-size:12px;
 padding:4px 10px;
}


/* ============================= */
/* 🪟 기본 스타일 - 데스크톱 기준 */
/* ============================= */

.start,
.reset {
  position: absolute;
  bottom: 20px;
  width: 120px;
  height: 50px;
  font-size: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease;
  background-color: #fff;  /* 흰색 배경 */
  color: #000;             /* 검은 글씨 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.start {
  left: 20px;
}

.reset {
  right: 20px;
}

.machine {
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  bottom: 0;
}

.base {
  width: 250px;
  height: 150px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.output-ball {
  width: 100px;
  height: 100px;
  font-size: 36px;
  border-radius: 50%;
}

.result {
  font-size: 60px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.history-ball {
  width: 35px;
  height: 35px;
  font-size: 14px;
  border-radius: 50%;
}

#maxInput {
  width: 120px;
  font-size: 14px;
  padding: 8px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: none;
  transition: 0.3s ease;
}

#maxInput:focus {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
}

/* ============================= */
/* 📱 모바일 대응 - 768px 이하 */
/* ============================= */
@media (max-width: 768px) {

  .start,
  .reset {
    position: absolute;
    bottom: 20px;
    width: 40%;
    max-width: 150px;
    height: 45px;
    font-size: 14px;
    background-color: #fff;  /* 흰색 배경 */
    color: #000;             /* 검은 글씨 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  .start {
    left: 5%;
  }

  .reset {
    display: none; /* 모바일에서 숨김 */
  }

  /* 기타 모바일 크기 조정 */
  .machine {
    width: 200px;
    height: 200px;
    bottom: 100px;
  }

  .base {
    width: 180px;
    height: 100px;
    bottom: 40px;
  }

  .ball {
    width: 30px;
    height: 30px;
  }

  .output-ball {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }

  .result {
    font-size: 50px;
    top: 10px;
  }

  .history-ball {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  #maxInput {
    width: 100px;
    font-size: 12px;
    padding: 6px;
  }
}