/* =========================================================
   マイスコア用カスタムツールチップ（cmx-has-tooltip 専用）
   ========================================================= */
.cmx-has-tooltip {
  position: relative;
  cursor: default;
}

.cmx-has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: -44px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 10px;

  background: #FFF5F8;
  color: #4B4B69;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;

  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
  z-index: 2000;
}

.cmx-has-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #FFF5F8 transparent transparent transparent;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
  z-index: 1999;
}

.cmx-has-tooltip:hover::after,
.cmx-has-tooltip:hover::before {
  opacity: 1;
}

@media (max-width: 768px) {
  .cmx-has-tooltip::after,
  .cmx-has-tooltip::before {
    display: none;
  }
}


/* =========================================================
   チェック済み（view-button）
   ========================================================= */
.view-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}



/* =========================================================
   ❤️ / 🔁 / 🔗 共通の「押した状態」ピル
   ========================================================= */
.stat-pill-active {
  background: #D3EFFF;
  border-radius: 10px;
  padding: 4px 8px;
  transition: background .25s ease;
  position: relative;
  z-index: 50;  /* 前に来るように */
}


/* =========================================================
   ❤️ / 🔁 / 🔗 共通ツールチップ（ふわっと水色）
   ========================================================= */
.stat-pill-active:hover::after {
  position: absolute;
  top: -34px;       /* ← 位置調整ここ */
  left: 0;
  transform: translateX(0);

  padding: 4px 8px;
  border-radius: 8px;

  background: #D3EFFF;
  color: #4B4B69;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);

  z-index: 9999999;
}




.tooltip-cmx {
  position: relative;
  cursor: pointer;
}

.tooltip-cmx:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff7f7;
  color: #43558B;
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
  border: 1px solid #ffd3e1;
}

.tooltip-cmx:hover::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fff7f7 transparent transparent transparent;
}







/* -------------------------------------------------
   チェック済みツールチップ（新仕様 / JS連動用）
   ------------------------------------------------- */
.cmx-viewcheck {
  position: relative;
}

/* ツールチップ本体（最初は隠す） */
.cmx-viewcheck::after {
  content: attr(data-label);
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #d3f4ff;
  color: #007bff;
  font-size: 12px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9999;
}







/* ★ チェックのツールチップ */
.cmx-viewcheck {
  position: relative;
  cursor: pointer;
}

/* ツールチップ本体 */
.cmx-viewcheck:hover::after {
  content: attr(data-label);
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #D3EFFF;         /* あなたの希望：水色 (#D3EFFF) */
  color: #4B4B69;
  font-size: 12px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
  z-index: 2000;
}