/* 전역 스타일: Minecraft 테마를 강조한 다크 테마 */
body {
  margin: 0;
  font-family: 'Minecraft', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, #101014 0%, #1a1c24 100%); /* 부드러운 그라데이션 배경 */
  color: #e8ecef;
  line-height: 1.6;
  overflow-x: hidden;
}

/* 상단 네비게이션 바: 블록 스타일과 고정 배경 */
#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #1a1c24;
  padding: 14px 30px;
  gap: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  border-bottom: 3px solid #2a2e3a; /* Minecraft 블록 경계 */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 로고: Minecraft 픽셀 아트 스타일 */
#logo {
  max-height: 42px;
  width: auto;
  image-rendering: pixelated;
  transition: transform 0.3s ease, filter 0.3s ease;
}
#logo:hover {
  transform: scale(1.15);
  filter: brightness(1.3); /* 호버 시 밝게 */
}

/* 모바일 메뉴 토글 버튼: Minecraft 버튼 스타일 */
#menu-toggle {
  display: none;
  background: #2a2e3a;
  border: 2px solid #3b4252;
  font-size: 28px;
  cursor: pointer;
  color: #e8ecef;
  padding: 8px 14px;
  border-radius: 6px;
  transition: transform 0.3s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
#menu-toggle:hover {
  transform: scale(1.15);
  background-color: #4ecdc4; /* Minecraft 청록색 */
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}

/* 디스코드 링크: Minecraft 버튼과 Discord 색상 조화 */
#discord-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}
#discord-link {
  color: #ffffff;
  background-color: #5865f2; /* Discord 색상 */
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 18px;
  border-radius: 6px;
  border: 2px solid #3b4252;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#discord-link:hover {
  background-color: #7289da;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(88, 101, 242, 0.5);
}

/* 검색 박스: Minecraft 입력창 스타일 */
#search-box {
  padding: 10px 16px;
  border-radius: 6px;
  border: 2px solid #2a2e3a;
  background-color: #1e212b;
  color: #e8ecef;
  width: 240px;
  font-family: 'Minecraft', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
#search-box:focus {
  outline: none;
  border-color: #4ecdc4;
  background-color: #232630;
  box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.3);
}

/* 종목 버튼 목록: 블록 스타일 스크롤 */
#category-list {
  display: flex;
  overflow-x: auto;
  padding: 20px 30px;
  gap: 14px;
  background-color: #1a1c24;
  border-bottom: 3px solid #2a2e3a;
  scrollbar-width: thin;
  scrollbar-color: #4ecdc4 #1e212b;
}
#category-list::-webkit-scrollbar {
  height: 10px;
}
#category-list::-webkit-scrollbar-thumb {
  background-color: #4ecdc4;
  border-radius: 5px;
}
#category-list::-webkit-scrollbar-track {
  background-color: #1e212b;
}

/* 종목 버튼: Minecraft 블록 버튼 */
.category-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background-color: #2a2e3a;
  border: 2px solid #3b4252;
  border-radius: 6px;
  cursor: pointer;
  color: #e8ecef;
  font-size: 16px;
  font-weight: 1000;
  font-family: 'Minecraft', sans-serif;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.category-button img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  image-rendering: pixelated;
}
.category-button:hover {
  background-color: #3b4252;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.category-button.active {
  background-color: #4ecdc4;
  color: #ffffff;
  border-color: #2a2e3a;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
}

/* 티어 리스트: 가로 스크롤과 블록 카드 */
#tier-list-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 30px;
  padding: 30px;
  scrollbar-width: thin;
  scrollbar-color: #4ecdc4 #1e212b;
}
#tier-list-container::-webkit-scrollbar {
  height: 10px;
}
#tier-list-container::-webkit-scrollbar-thumb {
  background-color: #4ecdc4;
  border-radius: 5px;
}
#tier-list-container::-webkit-scrollbar-track {
  background-color: #1e212b;
}

/* 티어 블록: Minecraft 블록 카드 */
.tier-block {
  flex: 0 0 260px;
  background-color: #1e212b;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #2a2e3a;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tier-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
}

/* 티어 제목: Minecraft 폰트와 그림자 */
.tier-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
  font-family: 'Minecraft', sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/* 유저 리스트: 간격 최적화 */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 유저 항목: Minecraft 스킨과 버튼 스타일 */
.user-item {
  background-color: #2a2e3a;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid #3b4252;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.user-item:hover {
  background-color: #3b4252;
  transform: translateX(5px);
  box-shadow: 0 0 12px rgba(78, 205, 196, 0.5);
}
.user-skin {
  width: 36px;
  height: 36px;
  border-radius: 5px;
  margin-right: 12px;
  user-select: none;
  border: 2px solid #ffffff;
  background-color: #ffffff; /* 투명 PNG 색상 보호 */
  padding: 3px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.user-item:hover .user-skin {
  transform: scale(1.2);
  box-shadow: 0 0 14px rgba(78, 205, 196, 0.7); /* 청록색 빛남 */
}

/* 팝업: Minecraft 스타일의 팝업 */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#popup.show {
  visibility: visible;
  opacity: 1;
}
#popup-content {
  background-color: #1e212b;
  padding: 30px;
  border-radius: 10px;
  border: 3px solid #2a2e3a;
  width: 360px;
  position: relative;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  transform: scale(0.85);
  transition: transform 0.4s ease;
}
#popup.show #popup-content {
  transform: scale(1);
}
#popup-content h3 img.user-skin {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  margin-right: 16px;
  border: 2px solid #ffffff;
  background-color: #ffffff;
  padding: 3px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 0.3s ease;
}
#popup-content h3:hover img.user-skin {
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(78, 205, 196, 0.7);
}
#popup-close {
  position: absolute;
  top: 16px;
  right: 20px;
  cursor: pointer;
  font-size: 28px;
  color: #e8ecef;
  transition: color 0.2s ease, transform 0.2s ease;
}
#popup-close:hover {
  color: #4ecdc4;
  transform: scale(1.3);
}
.hidden {
  display: none;
}

/* 반응형 디자인: 600px 이하에서 최적화 */
@media (max-width: 600px) {
  #search-box,
  #discord-wrapper {
    display: none;
  }
  #menu-toggle {
    display: block;
  }
  #category-list {
    display: none;
    flex-direction: column;
    padding: 20px;
    background-color: #1a1c24;
  }
  #category-list.show-menu {
    display: flex;
  }
  .category-button {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 20px;
  }
  .tier-block {
    flex: 0 0 220px;
  }
  .user-skin {
    width: 32px;
    height: 32px;
  }
  #popup-content h3 img.user-skin {
    width: 56px;
    height: 56px;
  }
}