body {
  margin:0;
  font-family: sans-serif;
  background:#121212;
  color:#fff;
}

#container {
  display:flex;
  height:100vh;
}

/* 재생목록 */
#sidebar {
  width:400px;
  background:#181818;
  padding:10px;
  overflow-y:auto;
}

#playlist li {
  padding:10px;
  cursor:pointer;
}

#playlist li.active {
  background:#1DB954; /* 스포티파이 초록색 */
  color:#000;
}

/* 플레이어 영역 */
#player {
  flex:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:50px;
}

#player-content {
  text-align:center;
  width:400px;
}

/* 파일 선택 버튼 */
#fileInput {
  padding:8px 12px;
  border-radius:5px;
  border:none;
  background:#2a2a2a; /* 뮤직 플레이어 회색 느낌 */
  color:#fff;
  cursor:pointer;
  margin-bottom:15px;
}

/* duet 이미지 */
#duetImg {
  width:250px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* 앨범커버 */
#cover {
  width:400px; /* 플레이어 길게 늘림 */
  height:400px; /* 플레이어 길게 늘림 */
  object-fit:cover;
  border-radius:10px;
  margin-top:40px; /* duet.png와 앨범커버 사이 간격 = 텍스트 두 줄 정도 */
  margin-bottom:30px;
  transition: transform 0.3s;
}

#cover.playing {
  transform: scale(1.05);
}

/* 타이틀/아티스트 */
#info {
  margin-bottom:15px;
}

#title {
  font-size:1.5em;
  margin:0;
}

#artist {
  font-size:1.2em;
  margin:0;
  color:#bbb;
}

/* 오디오 플레이어 */
audio {
  width:100%;
  height:70px; /* 플레이어 길이 확대 */
  margin-bottom:20px;
}

/* 버튼 5개 */
#controls {
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap: nowrap;
  margin-bottom:20px;
}

#controls button {
  width:60px; /* 버튼 크기 조금 키움 */
  height:60px;
  background:#181818; /* 플레이어와 같은 배경색 */
  border:none;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: transform 0.2s;
}

#controls button img {
  width:35px;
  height:35px;
}

#controls button.active {
  background:#1DB954; /* 선택된 버튼 강조 */
}

#controls button:hover {
  transform: scale(1.1);
}