.tooltip-bubble {
  position: absolute;
  background: #333; color: #fff;
  font-size: 0.85rem; padding: 6px 10px;
  border-radius: 6px; z-index: 9999;
  opacity: 0; transition: opacity 0.3s ease;
  white-space: nowrap;
}

.tooltip-bubble.show { opacity: 1; }

/* 꼬리 (오른쪽에서 아이콘 향하도록) */
.tooltip-bubble::after {
  content: "";
  position: absolute;
  top: 50%; right: -12px;  /* 말풍선 오른쪽 외곽 */
  margin-top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
}


#stock-tooltip-bubble::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #1f2937 transparent transparent;
}

/* 기존 그대로 유지 */
.tooltip-bubble {
  position: absolute;
  background: #333; color: #fff;
  font-size: 0.85rem; padding: 6px 10px;
  border-radius: 6px; z-index: 9999;
  opacity: 0; transition: opacity 0.3s ease;
  white-space: nowrap;
}
.tooltip-bubble.show { opacity: 1; }

/* 기본: 오른쪽 꼬리 */
.tooltip-bubble::after {
  content: "";
  position: absolute;
  top: 50%; right: -12px;
  margin-top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #333;
}

/* --- 아래부터 이번 툴팁(id 전용) 오버라이드 --- */

/* 1) 오른쪽 꼬리 제거 */
#stock-tooltip-bubble::after {
  content: none !important;
}

/* 2) 왼쪽 꼬리 추가(색상 #333로 통일, 위치 -12px) */
#stock-tooltip-bubble::before {
  content: '';
  position: absolute;
  top: 50%; left: -12px;           /* ← 위치 보정 */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #333 transparent transparent; /* ← 배경과 동일 */
}