/* 공통 툴팁(tooltip.js): data-tip="사전 키" 가 있는 요소에 마우스를 올리면(터치는 길게 누르면) 뜨는 작은 말풍선.
   가이드의 짚기 말풍선(.gs-tip, z-index 70)과 열린 창(50~60) 위에 뜬다. 누르는 동작은 가로막지 않는다. */
.tip-bubble { position: fixed; z-index: 80; max-width: 260px; padding: 5px 9px; background: #1c2330; color: #fff; border-radius: 4px; font: 500 12px/1.45 var(--font); white-space: normal; word-break: keep-all; box-shadow: 0 3px 10px rgba(20, 26, 36, .28); pointer-events: none; opacity: 0; transition: opacity .12s; }
.tip-bubble.is-on { opacity: 1; }
/* 말풍선 꼬리: 요소 아래에 뜨면 위로, 요소 위에 뜨면 아래로 향한다. */
.tip-bubble::after { content: ''; position: absolute; left: var(--tip-ax, 50%); margin-left: -5px; border: 5px solid transparent; }
.tip-bubble.is-below::after { bottom: 100%; border-bottom-color: #1c2330; }
.tip-bubble.is-above::after { top: 100%; border-top-color: #1c2330; }