/* =========================================================
   SITOP 用語ツールチップ — スタイル
   記事本文で用語をマーキングし、ホバー/タップでポップアップ表示。
   カラーは SITOP ブランド（ロゴ #51436A）に準拠。
   ========================================================= */

:root{
  --sg-brand:#51436A;
  --sg-accent:#3f7f8c;
  --sg-line:#e6e2ee;
  --sg-concept:#51436A;  --sg-concept-bg:#eeebf4;
  --sg-threat:#c0492b;   --sg-threat-bg:#f9ece7;
  --sg-product:#3f7f8c;  --sg-product-bg:#e6f1f3;
}

/* 本文中の用語マーカー */
.gloss{
  border-bottom:2px dotted var(--sg-brand);
  color:var(--sg-brand);
  font-weight:500;
  cursor:help;
  text-underline-offset:2px;
}
.gloss:hover,
.gloss:focus{
  background:var(--sg-concept-bg);
  outline:none;
  border-radius:2px;
}

/* ポップアップ本体 */
#sg-tip{
  position:fixed;
  z-index:99999;
  max-width:330px;
  width:calc(100vw - 24px);
  background:#fff;
  border:1px solid var(--sg-line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(40,30,60,.22);
  padding:16px 18px;
  display:none;
  line-height:1.7;
  font-family:"Noto Sans JP","Helvetica Neue",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:#2c2740;
  animation:sg-pop .12s ease-out;
}
@keyframes sg-pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

#sg-tip .sg-badge{
  display:inline-block;font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:5px;margin-bottom:8px;
}
#sg-tip .sg-badge.concept{color:var(--sg-concept);background:var(--sg-concept-bg)}
#sg-tip .sg-badge.threat {color:var(--sg-threat); background:var(--sg-threat-bg)}
#sg-tip .sg-badge.product{color:var(--sg-product);background:var(--sg-product-bg)}

#sg-tip h4{font-size:1.05rem;color:var(--sg-brand);margin:0 0 6px}
#sg-tip .sg-def{font-weight:600;font-size:.9rem;margin-bottom:5px}
#sg-tip .sg-desc{font-size:.85rem;color:#4a4560;margin-bottom:12px}
#sg-tip a.sg-more{font-size:.83rem;font-weight:700;color:var(--sg-accent);text-decoration:none}
#sg-tip a.sg-more:hover{text-decoration:underline}

#sg-tip .sg-close{
  position:absolute;top:8px;right:10px;border:none;background:none;
  font-size:1.2rem;color:#6d6685;cursor:pointer;line-height:1;display:none;
}
body.sg-touch #sg-tip .sg-close{display:block}