/* 기본 스타일 */
* {
  box-sizing: border-box; /* 패딩과 보더가 너비와 높이에 포함되도록 설정해서 침범 방지! */
}

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../images/IMG_6063.jpeg') no-repeat center center / cover;
  color: white;
  overflow-x: hidden; /* 가로 스크롤바 숨겨서 침범 문제 해결! */
  flex-direction: column;
}

/* 프로필 섹션 */
.profile-container {
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  position: relative;
  z-index: 2;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 10px;
  object-fit: cover;
}

h1 {
  font-size: 1.8em;
  margin: 10px 0;
}

p {
  font-size: 1.1em;
  margin-bottom: 20px;
}

/* 버튼 공통 */
.button, .invite-button, .menu-toggle-button, .command-category-button, .command-item-button, #playMusicButton, #closeFullScreen {
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1em;
}

/* 초대 버튼 */
.invite-button {
  background-color: #ff4081;
}

.invite-button:hover {
  background-color: #f50057;
}

/* 메뉴 토글 버튼 */
.menu-toggle-button {
  background-color: #333;
  position: absolute;
  top: 20px;
  right: 20px; /* 오른쪽으로 이동 */
  z-index: 10; /* 메뉴 토글 버튼을 위로 올림 */
}

.menu-toggle-button:hover {
  background-color: #555;
}

/* 오른쪽 메뉴 */
.right-menu-container {
  position: fixed;
  top: 0;
  right: -260px;
  width: 250px;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 20px;
  transition: right 0.3s ease-in-out;
  z-index: 4;
  overflow-y: auto;
}

.right-menu-container.open {
  right: 0;
}

.command-category-button {
  background-color: #ff4081;
  width: 100%;
  margin-bottom: 5px;
  text-align: left;
}

.command-category-button:hover {
  background-color: #f50057;
}

.command-list {
  display: none;
  margin-top: 10px;
  margin-bottom: 10px;
}

.command-list.active {
  display: block;
}

.command-item-button {
  background-color: #555;
  width: 100%;
  margin: 3px 0;
  text-align: left;
}

.command-item-button:hover {
  background-color: #777;
}

/* 음악 재생 버튼 */
#musicControlContainer {
  position: fixed;
  bottom: 20px; /* 아래쪽에서 20px */
  left: 20px; /* ✨ 요기가 왼쪽으로 옮긴 부분! 왼쪽에서 20px 떨어지게 했어! */
  z-index: 5;
  /* transform: translateX(-50%); ✨ 요건 가운데 정렬할 때 쓰는 거라 빼줬어! */
}

#playMusicButton {
  background-color: #333;
}

#playMusicButton.playing {
  background-color: #f00;
}

/* 전체 설명 오버레이 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

.overlay.active {
  display: flex;
}

#closeFullScreen {
  margin-top: 20px;
  background-color: #ff4081;
}

#closeFullScreen:hover {
  background-color: #f50057;
}

/* 반응형 */
@media (max-width: 768px) {
  /* 프로필 영역을 작은 화면에서 더 작게 조정 */
  .profile-container {
    width: 90%;
  }

  /* 메뉴 토글 버튼 크기 조정 */
  .menu-toggle-button {
    padding: 8px 16px;
    font-size: 0.9em;
  }

  /* 오른쪽 메뉴가 모바일에서 화면에 안 겹치게 하기 */
  .right-menu-container {
    width: 100%;
    right: -100%; /* 모바일에서는 메뉴가 완전히 숨겨져야 함 */
  }

  .right-menu-container.open {
    right: 0;
  }

  /* 모바일에서 음악 재생 버튼 크기 조정 */
  #musicControlContainer {
    bottom: 10px; /* 모바일에서는 아래에서 10px만 떨어지게 */
    left: 10px; /* ✨ 모바일에서도 왼쪽에서 10px만 떨어지게! */
  }

  /* 음악 재생 버튼 크기 조정 */
  #playMusicButton {
    font-size: 0.9em;
    padding: 8px 16px;
  }
}