/* 🚨 «항상» B 님 알약 높이만큼 띄워 둔다.
   처음엔 알약이 있는 지면에서만 띄우려 했는데, 그 알약이 «스크롤해야 나타나고»
   지면마다 나타나는 때가 달라서 결과가 흔들렸다(실측 : 같은 지면인데 잴 때마다 달랐다).
   조건을 없애면 흔들릴 여지도 없어진다. 알약이 없는 지면에서 88px 은 허전하지 않다. */
.ri-a-fab{position:fixed;right:18px;z-index:9300;
  /* 🚨 아래에 쌓인 것을 «전부» 더해서 자리를 잡는다. 하나라도 빼먹으면 겹친다.
        숫자 띠(--ri-cb-h) + 대회등록 알약 높이(--ri-fab-lift) + 여유 26px
        처음엔 «알약이 있을 때만» is-stack 으로 따로 올렸는데, 그 규칙이 띠 높이를
        빼먹어서 알약과 34px 겹쳤다(2026-09-24 실측). 조건을 없애니 겹칠 여지도 없어졌다. */
  bottom:calc(var(--ri-cb-h,0px) + var(--ri-fab-lift,50px) + 26px + var(--ri-fab-dodge,0px));
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.ri-a-fab__b{pointer-events:auto;position:relative;
  width:52px;height:52px;border-radius:999px;border:1px solid var(--ria-line,#111111);
  background:#fff;color:#000000;
  display:flex;align-items:center;justify-content:center;
  box-shadow:none;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
  cursor:pointer;text-decoration:none}
.ri-a-fab__b svg{width:23px;height:23px;stroke-width:1.5;display:block}
.ri-a-fab__b:hover,.ri-a-fab__b:focus-visible{background:#000000;color:#fff;
  border-color:#000000;transform:translateY(-3px);
  box-shadow:none}
.ri-a-fab__b:focus-visible{outline:2px solid #000;outline-offset:3px}
/* 이름표 — 올렸을 때만 왼쪽에 뜬다 */
.ri-a-fab__t{position:absolute;right:62px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;background:#000000;color:#fff;font-size:12.5px;font-weight:600;
  padding:7px 11px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.ri-a-fab__b:hover .ri-a-fab__t,.ri-a-fab__b:focus-visible .ri-a-fab__t{opacity:1;transform:translateY(-50%) translateX(0)}
/* 맨 위로 — 내려가야 나타난다 */
.ri-a-fab__b--top{opacity:0;visibility:hidden;transform:translateY(8px)}
.ri-a-fab.is-down .ri-a-fab__b--top{opacity:1;visibility:visible;transform:none}
/* 「무료」 딱지 */
.ri-a-fab__free{position:absolute;top:-4px;right:-4px;background:#000000;color:#fff;
  font-size:9.5px;font-weight:800;line-height:1;padding:3px 5px;border-radius:999px;letter-spacing:-.02em}

@media (max-width:820px){
  /* 폰 — 아래 길잡이 바 위로 올린다 */
  .ri-a-fab{right:12px;gap:8px;
    bottom:calc(var(--ri-bnav-h,64px) + var(--ri-cb-h,0px) + var(--ri-fab-lift,50px) + 26px
      + var(--ri-fab-dodge,0px) + env(safe-area-inset-bottom,0px))}
  .ri-a-fab__b{width:46px;height:46px}
  .ri-a-fab__b svg{width:21px;height:21px}
  .ri-a-fab__t{display:none}      /* 폰에서는 이름표가 화면을 가린다 */
}
@media (prefers-reduced-motion:reduce){
  .ri-a-fab__b,.ri-a-fab__t,.ri-a-fab__b--top{transition:none}
  .ri-a-fab__b:hover{transform:none}
}
@media print{.ri-a-fab{display:none}}