/* ── 페이지 복사 버튼 (copy-page feature) ── */

/* 기본 상태: 호버 효과 */
#copy-page-btn {
  position: relative;
  transition: color 0.15s ease;
  transform: scale(0.9);
  transform-origin: top right;
  margin-top: -1px;
}

#copy-page-btn:hover {
  color: var(--md-default-fg-color--light);
}

/* CSS 커스텀 툴팁
   - title 속성 대신 data-tooltip 사용 (content.tooltips min-width:280px 회피)
   - white-space: nowrap → 텍스트 길이에 맞게 너비 자동 조정 */
#copy-page-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: var(--md-default-fg-color);
  color: var(--md-default-bg-color);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#copy-page-btn:hover::before {
  opacity: 1;
}

/* 복사됨 상태: 툴팁 숨기기 */
#copy-page-btn.md-copy-done::before {
  opacity: 0;
}

/* 복사됨 상태: 원래 SVG 아이콘 숨기기 */
#copy-page-btn.md-copy-done svg {
  display: none;
}

/* 복사됨 상태: check 아이콘을 ::after 로 삽입 */
#copy-page-btn.md-copy-done::after {
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z'/%3E%3C/svg%3E");
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  mask-image: var(--check-icon);
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: var(--check-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/* 복사됨 상태: 아이콘 색상 */
#copy-page-btn.md-copy-done {
  color: #6366F1;
}