/* めぐみや 用語ツールチップ（試作）
   リンクと誤解されないよう、色は本文と同じ・点線下線のみで示す。 */

/* 従来の自動リンクと同じ見た目にする（本番実測: color #CA6666 / 下線なし）。
   リンクではないことは点線下線とカーソル形状で示す。 */
.post-content .mg-term{
  all:unset;
  display:inline;
  cursor:help;
  font:inherit;
  color:#CA6666;
  border-bottom:1px dotted rgba(202,102,102,.55);
  text-underline-offset:2px;
}
.post-content .mg-term:hover,
.post-content .mg-term[aria-expanded="true"]{
  color:#e24b4b;
  border-bottom-color:#e24b4b;
  background:rgba(226,75,75,.09);
}
.post-content .mg-term:focus-visible{
  outline:2px solid #e24b4b;
  outline-offset:2px;
}

.mg-tip{
  position:fixed;
  z-index:9999;
  width:min(320px, calc(100vw - 24px));
  box-sizing:border-box;
  padding:14px 16px 14px;
  background:#fff;
  border:1px solid #EFC3C0;
  border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.13);
  font-size:13px;
  line-height:1.75;
  color:#333;
  text-align:left;
}
.mg-tip[hidden]{ display:none }
.mg-tip__n{
  margin:0 0 6px !important;
  padding:0 22px 0 0;
  font-size:14px;
  font-weight:700;
  color:#e24b4b;
  line-height:1.4;
}
.mg-tip__d{ margin:0 !important; font-size:13px; line-height:1.75 }

/* 吹き出しの三角 */
.mg-tip::before,
.mg-tip::after{
  content:"";
  position:absolute;
  left:var(--mg-arrow, 50%);
  transform:translateX(-50%);
  border:8px solid transparent;
}
.mg-tip::before{ bottom:-16px; border-top-color:#EFC3C0 }
.mg-tip::after { bottom:-15px; border-top-color:#fff }
.mg-tip.is-below::before{ bottom:auto; top:-16px; border-top-color:transparent; border-bottom-color:#EFC3C0 }
.mg-tip.is-below::after { bottom:auto; top:-15px; border-top-color:transparent; border-bottom-color:#fff }

.mg-tip.is-noarrow::before,
.mg-tip.is-noarrow::after{ display:none }

/* 閉じる（スマホで使う） */
.mg-tip__x{
  position:absolute;
  top:4px; right:4px;
  width:28px; height:28px;
  padding:0;
  border:0; background:none;
  font-size:17px; line-height:1;
  color:#999; cursor:pointer;
}
@media (hover: hover){
  .mg-tip__x{ display:none }
}

@media (prefers-reduced-motion: reduce){
  .mg-tip{ transition:none }
}