/* 모달 푸터 — 비활성 버튼의 사유 툴팁 (2026-08-10 신설, 첫 소비자: 메일 상세 답장/전달)
 *
 * ⭐**버튼을 숨기지 않고 비활성 + 사유로 내기 위한 것**이다. 기능이 없어진 게 아니라
 *   「내 권한으로는 안 되는 것」인데 버튼이 사라지면 사용자는 화면이 고장난 줄 안다.
 *
 * 마크업 (gem footer_buttons 옵션으로 충분 — 추가 DOM 없음):
 *   { id: "reply-x", label: "답장", disabled: true, data: { rmm_hint: "사유" } }
 *   → <button disabled data-rmm-hint="사유" ...>
 *
 * ⚠`disabled` 버튼에도 CSS `:hover` 는 매칭된다(활성화 동작만 막힐 뿐).
 *   반면 네이티브 `title` 툴팁은 비활성 버튼에서 브라우저마다 안 뜨므로 ::after 로 그린다.
 * ⚠툴팁은 모달 내부 스택 컨텍스트라 z-index 를 크게 줄 필요가 없다(gem 1500~8000 대역 무관).
 */
.rmm-footer [data-rmm-hint] {
  position: relative;
  opacity: 0.5;
  cursor: not-allowed;
}

.rmm-footer [data-rmm-hint]::after {
  content: attr(data-rmm-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 5;
  min-width: 200px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  pointer-events: none;
}

/* 꼬리 */
.rmm-footer [data-rmm-hint]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  right: 14px;
  z-index: 5;
  border: 6px solid transparent;
  border-top-color: #1e293b;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s;
  pointer-events: none;
}

.rmm-footer [data-rmm-hint]:hover::after,
.rmm-footer [data-rmm-hint]:hover::before,
.rmm-footer [data-rmm-hint]:focus-visible::after,
.rmm-footer [data-rmm-hint]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 모바일 — 커서가 없어 hover 가 성립하지 않는다. 툴팁 대신 버튼 아래 사유를 상시 노출하면
   푸터 높이가 흔들리므로, 여기서는 툴팁을 끄고 비활성 표시만 남긴다. */
@media (hover: none) {
  .rmm-footer [data-rmm-hint]::after,
  .rmm-footer [data-rmm-hint]::before { display: none; }
}