/* 공용 뵴: byom.js가 만드는 단추(.byom)와 말풍선(.byom-bubble). 홈과 AI News가 함께 읽는다
   페이지가 덮어쓸 수 있는 값: --bubble(말풍선 바탕), --byom-z·--byom-bubble-z(겹침 순서), --byom-focus(키보드 포커스 테두리 색) */

/* 몸(63×56)은 그림 상자(91×84) 안쪽 14px에 있어서, 상자를 오른쪽·아래 4px에 두면 몸이 화면 끝에서 18px 떨어진다 */
.byom {
  position: fixed; right: 4px; bottom: 4px; z-index: var(--byom-z, 20); width: 91px; height: 84px; padding: 0;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out;
}
.byom svg { display: block; animation: byom-hop 2.4s ease-in-out infinite; }
.byom:hover { transform: translateY(-6px); }
.byom.jump svg { animation: byom-jump 0.52s ease-out; }
.byom:focus-visible { outline: 2px solid var(--byom-focus, #b3f835); outline-offset: -10px; }
@keyframes byom-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes byom-jump { 0% { transform: scale(1.1, 0.85); transform-origin: 50% 100%; } 45% { transform: translateY(-10px); } 100% { transform: none; } }

/* 말풍선: 각진 상자에 아래 꼬리를 달고 몸 위로 18px 띄워, 몸과 빛 번짐에 겹치지 않게 한다. 꼬리는 몸 가운데를 가리킨다 */
.byom-bubble {
  position: fixed; right: 22px; bottom: 92px; z-index: var(--byom-bubble-z, 40); max-width: 240px; padding: 8px 12px;
  background: var(--bubble, #f8f9f6); color: #101113; border: 1.5px solid #08090c;
  font: 600 13px/1.4 'Pretendard Variable', Pretendard, system-ui, sans-serif; letter-spacing: -0.01em; word-break: keep-all; pointer-events: none;
  transform-origin: 90% 100%; opacity: 0; visibility: hidden; transform: translateY(6px) scale(0.9);
  transition: opacity .2s, transform .35s cubic-bezier(.3, 1.7, .5, 1), visibility 0s .35s;
}
.byom-bubble.on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.byom-bubble::after {
  content: ''; position: absolute; right: 24px; bottom: -6px; width: 9px; height: 9px; background: var(--bubble, #f8f9f6);
  border-right: 1.5px solid #08090c; border-bottom: 1.5px solid #08090c; transform: rotate(45deg);
}

/* 움직임 줄이기: 둥실거리기·누를 때 튀기와 말풍선 튀어나옴을 멈춘다(깜빡임은 byom.js가 멈춘다) */
@media (prefers-reduced-motion: reduce) {
  .byom svg, .byom.jump svg { animation: none; }
  .byom-bubble { transform: none; transition: opacity .2s, visibility 0s .2s; }
  .byom-bubble.on { transform: none; transition: opacity .2s; }
}