/* =================================================================
 * c-tooltip — ツールチップ（吹き出しラベル）
 * Figma: パーツ集「20 ツールチップ」5371:85013 / 5371:85015
 *   吹き出し箱（Neutral02 地・白文字 12px Medium・角丸4px）＋ 下向き三角（10×6）。
 *
 *   インタラクティブ（既定）:
 *     <span class="c-tooltip">
 *       <span class="c-tooltip__trigger" tabindex="0" aria-describedby="x">?</span>
 *       <span class="c-tooltip__bubble" id="x" role="tooltip">
 *         <span class="c-tooltip__label">補足説明</span>
 *       </span>
 *     </span>
 *   → トリガに hover / focus で吹き出しを上に表示（JS不要）。
 *
 *   静的（c-tooltip--static、trigger なし）: 吹き出しを常時表示。
 * =================================================================*/

.c-tooltip {
  position: relative;
  display: inline-flex;
}

.c-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  cursor: help;
}

/* 吹き出し箱（既定はトリガ上に絶対配置・非表示）*/
.c-tooltip__bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);                  /* 6px = 矢印の高さ分の余白 */
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);    /* 4px 8px */
  background-color: var(--color-neutral-02); /* #787878 */
  border-radius: var(--radius-sm);           /* 4px */
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default);
}

/* 下向き三角（矢印 10×6・箱と同色）*/
.c-tooltip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5rem solid transparent;
  border-right: 5rem solid transparent;
  border-top: 6rem solid var(--color-neutral-02);
}

.c-tooltip__label {
  font-family: var(--font-jp);
  font-weight: var(--fw-medium);             /* 500 */
  font-size: var(--fs-body-xs);              /* 12px */
  line-height: var(--lh-snug);               /* 1.5 */
  color: var(--color-white);
  text-align: center;
}

/* hover / focus で表示 */
.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

/* 静的表示（trigger なし。Figma 単体パーツ相当）*/
.c-tooltip--static {
  display: inline-block;
}
.c-tooltip--static .c-tooltip__bubble {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}