/* reset & 기본 스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  background: #f5f7fa;
  color: #333;
  line-height: 1.5;
}

/* 헤더 */
header {
  background: #1565c0;
  color: #fff;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
header h1 {
  font-size: 1.6rem;
  font-weight: 600;
}
.search-input {
  flex: 1;
  padding: 8px 12px;
  font-size: .95rem;
  border: none;
  border-radius: 4px;
}

/* 배너 */
.banner {
  text-align: center;
  margin: 16px 0;
}
.banner img {
  max-width: 100%;
  height: auto;
}

/* 메인 컨텐츠: 가운데 정렬 + 적당한 여백 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
}

/* 광고 슬롯 */
.adsbygoogle {
  display: block;
  text-align: center;
  margin-bottom: 24px;
}

/* 컨트롤 패널 */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .9rem;
  cursor: pointer;
}

/* 카테고리 필터 */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.category-filters button {
  padding: 6px 12px;
  font-size: .85rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.category-filters button.active {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}
.category-filters button:hover {
  background: #e3f2fd;
}

/* 이모지 그리드 */
.ecs_main-wrapp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
  overflow: visible; /* 툴팁이 잘리지 않도록 */
}

/* 이모지 아이템 */
.emoji-item {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .2s, background .2s;
  overflow: visible;
}
.emoji-item:hover {
  transform: translateY(-4px);
  background: #e3f2fd;
  z-index: 1000; /* hover된 아이템을 맨 앞으로 */
}

/* 이모지 이미지 & 텍스트 */
.emoji-item img,
.emoji-item .emoji-char {
  width: 64px;
  height: 64px;
  display: block;
  transition: transform .3s;
}
.emoji-item:hover img,
.emoji-item:hover .emoji-char {
  transform: scale(1.2) rotate(10deg);
}

/* 플레이스홀더 스피너 */
.spinner {
  border: 3px solid rgba(0,0,0,0.1);
  border-top: 3px solid #1565c0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 말풍선 스타일 툴팁 */
.tooltip {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 4px;
  font-size: .75rem;
  white-space: pre-line;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 말풍선 “꼬리” (right) */
.tooltip::after {
  content: '';
  position: absolute;
  border: 6px solid transparent;
  border-right-color: rgba(0,0,0,0.75);
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}

/* 마지막 컬럼 호버 시 툴팁 아래쪽 배치 & 꼬리 위치 조정 */
.emoji-item:last-child:hover .tooltip {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-top: 8px;
}
.emoji-item:last-child:hover .tooltip::after {
  border-right-color: transparent;
  border-top-color: rgba(0,0,0,0.75);
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

/* 툴팁 내부 오직 텍스트만 */
.tooltip img {
  display: none !important;
}

/* 툴팁 안 텍스트 정리 */
.tooltip-unicode {
  font-size: 1rem;
  margin-bottom: 4px;
}
.tooltip-code {
  font-size: .75rem;
  opacity: .9;
}

/* 섹션 제목 */
.category-section h2 {
  margin: 32px 0 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1565c0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

/* 푸터 */
footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 16px 32px;
  font-size: .85rem;
  margin-top: 48px;
}