.tooltip {
  position: absolute;
  background-color: #333; /* 배경색 */
  color: #fff; /* 텍스트 색상 */
  padding: 10px; /* 내부 여백 */
  border-radius: 5px; /* 모서리 둥글게 */
  font-size: 14px; /* 기본 텍스트 크기 */
  visibility: hidden; /* 초기 상태에서 숨김 */
  opacity: 0; /* 투명도 */
  transition: opacity 0.3s ease; /* 부드러운 투명도 전환 */
  pointer-events: none; /* 마우스 이벤트 차단 */
  z-index: 1000; /* 레이어 우선순위 */
  white-space: normal; /* 긴 텍스트 줄바꿈 허용 */
  max-width: 300px; /* 최대 너비 설정 */
  text-align: left; /* 텍스트 정렬 */
}

.tooltip img {
  max-width: 100%; /* 이미지 크기를 툴팁 영역에 맞춤 */
  height: auto; /* 비율 유지 */
  display: inline; /* 이미지를 텍스트와 동일한 인라인 요소로 설정 */
  vertical-align: middle; /* 텍스트와 수직 정렬 */
  margin-left: 0; /* 추가 여백 제거 */
  margin: 10px auto; /* 위아래 간격 조정 및 가운데 정렬 */
  /* 추가 스타일 */
  image-rendering: crisp-edges; /* 이미지 선명하게 */
}

.tooltip-trigger {
  color: rgb(135, 135, 135); /* 기본 상태 색상 */
  cursor: pointer; /* 클릭 가능한 포인터 표시 */
  text-decoration: none; /* 밑줄 제거 */
}

.tooltip-trigger:hover {
  color: darkblue; /* 마우스 오버 시 색상 */
}