/* ブログ詳細の共有ボタン（X / はてなブックマーク / Facebook / URL をコピー / その他の方法で共有）。
   InfraAcademy のブログ詳細と同じ作り・同じ大きさ（40px の丸いボタン、19px のアイコン）で、
   色は Giji Academy に合わせる（枠と影は灰みの紫、吹き出しと知らせは #484858）。
   PC（1024px 以上）は本文の左に縦のレールを置き、スクロールしても付いてくる。
   それより狭い画面は、記事の見出しの下に横一列で出す。 */
.blog-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.blog-share-rail { display: none; }
.blog-share-mobile { display: block; }
.blog-share-actions { display: flex; align-items: center; gap: .55rem; }
.blog-share-button {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #58586b;
  box-shadow: 0 1px 3px rgba(88, 88, 107, .08);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}
.blog-share-button:hover { border-color: #bfbfe8; color: #484858; box-shadow: 0 6px 16px rgba(88, 88, 107, .16); transform: translateY(-1px); }
.blog-share-button:focus-visible { outline: 3px solid rgba(88, 88, 107, .3); outline-offset: 2px; }
.blog-share-button[hidden] { display: none; }
.blog-share-button svg { width: 19px; height: 19px; }
/* はてなと Facebook は、ロゴの色だけそれぞれのサービスの色にして見分けられるようにする（枠と影はほかと同じ） */
.blog-share-button--hatena { color: #008fde; font-size: 14px; font-weight: 900; letter-spacing: -.04em; }
.blog-share-button--facebook { color: #1877f2; }
.blog-share-button[data-copy-state="copied"] { border-color: #86efac; color: #15803d; }

/* 「URL をコピーしました」などの知らせ。画面の右下に少しだけ出す */
.blog-share-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  border-radius: .65rem;
  background: #484858;
  padding: .7rem 1rem;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(72, 72, 88, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(.5rem);
  transition: opacity .15s ease, transform .15s ease;
}
.blog-share-toast[data-visible="true"] { opacity: 1; transform: translateY(0); }

@media (min-width: 1024px) {
  /* 共有のレール | 本文 | サイドバー。サイドバーはこれまでと同じく全体の約 1/4（1280px 幅で 280px） */
  .blog-detail-layout {
    grid-template-columns: 40px minmax(0, 1fr) 23%;
    column-gap: 1.5rem;
    align-items: start;
  }
  .blog-share-rail {
    position: sticky;
    top: 6rem;
    display: block;
    height: max-content;
    align-self: start;
  }
  .blog-share-mobile { display: none; }
  .blog-share-rail .blog-share-actions { flex-direction: column; gap: .85rem; }
  /* ボタンの名前の吹き出し。レールは本文の左にあるので、右（本文の側）へ出す */
  .blog-share-rail .blog-share-button::after {
    position: absolute;
    top: 50%;
    left: calc(100% + .7rem);
    z-index: 20;
    border-radius: .45rem;
    background: #484858;
    padding: .42rem .65rem;
    color: #fff;
    content: attr(data-tooltip);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(.25rem, -50%);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    visibility: hidden;
    white-space: nowrap;
  }
  .blog-share-rail .blog-share-button:hover::after,
  .blog-share-rail .blog-share-button:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-share-button,
  .blog-share-toast,
  .blog-share-rail .blog-share-button::after { transition: none; }
  .blog-share-button:hover { transform: none; }
}