/* Neo Dark 테마 변수 설정 */
:root {
  --bg-color: #121214;       /* 아주 깊은 다크 배경 */
  --container-bg: #1e1e22;   /* 컨테이너 배경 */
  --border-color: #333338;   /* 경계선 */
  --text-main: #e1e1e6;      /* 메인 텍스트 */
  --accent-color: #00e5ff;   /* 네온 블루 포인트 */
  --hover-bg: #2d2d35;       /* 호버 시 배경 */
  --scrollbar-thumb: #44444c; /* 스크롤바 막대 */
  --scrollbar-track: #121214; /* 스크롤바 트랙 */
}

/* 컨테이너 설정 */
.emoji-picker {
  position: absolute;
  width: 350px;
  max-height: 500px; /* 대니형이 요청한 500px */
  overflow-y: auto;
  background-color: var(--container-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: 12px;
  color: var(--text-main);
  font-family: 'Pretendard', sans-serif;
}

/* 정사각형 커스텀 스크롤바 */
.emoji-picker::-webkit-scrollbar {
  width: 12px; /* 정사각형 형태를 위해 두께 확보 */
}

.emoji-picker::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.emoji-picker::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-track); /* 트랙과 분리된 느낌 */
  border-radius: 0px; /* 완전한 사각형 */
}

.emoji-picker::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color); /* 호버 시 네온 빛 발산 */
}

/* 내부 레이아웃 */
.emoji-header {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.emoji-item:hover {
  background: var(--hover-bg);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.emoji-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}