/* ── SNS シェアバー（円形アイコンボタン）─────────────────────
   全ページ共通。macros/share.html の share_bar マクロと partials/share_section.html
   から使う。base.html でグローバル読み込みするため bag 系以外のページでも効く。 */
.share-section { margin: 2rem auto; }

.share-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: 560px; margin: 1rem auto 0;
}
.share-label {
  font-size: .8rem; font-weight: 700;
  color: var(--mute, #69756c); margin-right: .1rem;
}
.share-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: none; border-radius: 50%;
  cursor: pointer; text-decoration: none; color: #fff;
  box-shadow: 0 2px 7px rgba(31, 42, 36, .16);
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.share-btn img {
  /* アイコン画像は外周に透明マージン＋白フチが入っているため、
     少し拡大して円形クリップし、フチを切り落とす。 */
  width: 112%; height: 112%; display: block;
  clip-path: circle(44.6%);
}
.share-btn:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(31, 42, 36, .26);
  filter: brightness(1.08);
}
.share-btn:active { transform: translateY(0); }
.share-btn.is-x { background: #000; }
.share-btn.is-threads { background: #000; }
.share-btn.is-line { background: #06c755; }
.share-btn.is-fb { background: #1877f2; }
.share-btn.is-native {
  background: linear-gradient(135deg,
    #feda75 0%, #fa7e1e 26%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
}
.share-btn.is-copy.is-done::after {
  content: "コピーしました";
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1f2a24); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 7px; white-space: nowrap;
  pointer-events: none;
}