/* ════════════════════════════════════════════════════════════
   _common/css/share-buttons.css — SNS シェアボタン
   Sprint 11 (rev3) 新設 / 実装日: 2026-05-09 / spec_revision: 3
   ════════════════════════════════════════════════════════════
   ベース: _common/share-buttons.html
   依存: tokens.css の CSS 変数のみ参照（色のハードコード禁止）
   ════════════════════════════════════════════════════════════ */

.share-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2, 0.5rem);
  margin:var(--space-12, 3rem) 0 var(--space-8, 2rem);
  padding:var(--space-4, 1rem) var(--space-6, 1.5rem);
  background:var(--color-bg-2, #F4EFE6);
  border:1px solid var(--color-rule, rgba(26,20,16,0.10));
  border-radius:var(--radius-md, 8px);
  font-family:var(--font-en, 'Inter', sans-serif);
}

.share-label{
  font-size:var(--fs-sm, 0.875rem);
  font-weight:700;
  color:var(--color-text, #1A1410);
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-right:var(--space-2, 0.5rem);
}

.share-btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2, 0.5rem);
  padding:var(--space-2, 0.5rem) var(--space-4, 1rem);
  background:var(--color-bg-3, #FFFFFF);
  color:var(--color-text, #1A1410);
  border:1px solid var(--color-rule, rgba(26,20,16,0.10));
  border-radius:var(--radius-pill, 999px);
  font-size:var(--fs-sm, 0.875rem);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform var(--transition-fast, 150ms ease),
             background var(--transition-fast, 150ms ease),
             color var(--transition-fast, 150ms ease),
             border-color var(--transition-fast, 150ms ease);
  /* button 要素も a 要素と同じ挙動に */
  font-family:inherit;
  line-height:1.2;
}

.share-btn:hover,
.share-btn:focus-visible{
  transform:translateY(-2px);
  background:var(--color-primary, #E05020);
  color:var(--color-bg-3, #FFFFFF);
  border-color:var(--color-primary, #E05020);
  outline:none;
}

.share-btn:focus-visible{
  outline:2px solid var(--color-primary-h, #C44018);
  outline-offset:2px;
}

.share-btn[aria-hidden="true"]{
  display:inline-block;
}

.share-btn > span[aria-hidden="true"]{
  font-weight:900;
  font-size:var(--fs-base, 1rem);
  line-height:1;
  width:1.25em;
  text-align:center;
}

.share-btn-label{
  font-weight:600;
}

/* ── プラットフォーム別 hover 色（任意・装飾差別化） ── */
.share-btn--x:hover,
.share-btn--x:focus-visible{
  background:#000000;
  color:#FFFFFF;
  border-color:#000000;
}
.share-btn--fb:hover,
.share-btn--fb:focus-visible{
  background:#1877F2;
  color:#FFFFFF;
  border-color:#1877F2;
}
.share-btn--linkedin:hover,
.share-btn--linkedin:focus-visible{
  background:#0A66C2;
  color:#FFFFFF;
  border-color:#0A66C2;
}
.share-btn--line:hover,
.share-btn--line:focus-visible{
  background:#06C755;
  color:#FFFFFF;
  border-color:#06C755;
}

/* ── Copy URL コピー成功時の視覚フィードバック ── */
.share-btn--copy.is-copied{
  background:var(--color-primary-h, #C44018);
  color:var(--color-bg-3, #FFFFFF);
  border-color:var(--color-primary-h, #C44018);
  pointer-events:none;
}

/* ── レスポンシブ：狭い画面で文字を隠してアイコンだけに ── */
@media (max-width: 560px){
  .share-buttons{
    padding:var(--space-3, 0.75rem) var(--space-4, 1rem);
    gap:var(--space-2, 0.5rem);
  }
  .share-label{
    width:100%;
    margin-right:0;
    margin-bottom:var(--space-2, 0.5rem);
  }
  .share-btn{
    padding:var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  }
  .share-btn-label{
    /* 狭い画面では label を視覚的に非表示（読み上げは維持） */
    position:absolute;
    width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}

/* ── ダークテーマ対応（lab / global / prod） ── */
body.theme-lab .share-buttons,
body.theme-global .share-buttons{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
}
body.theme-lab .share-label,
body.theme-global .share-label{
  color:var(--color-text, #EDF1FA);
}
body.theme-lab .share-btn,
body.theme-global .share-btn{
  background:rgba(255,255,255,0.06);
  color:var(--color-text, #EDF1FA);
  border-color:rgba(255,255,255,0.12);
}

/* ── prefers-reduced-motion 対応 ── */
@media (prefers-reduced-motion: reduce){
  .share-btn{
    transition:none !important;
  }
  .share-btn:hover,
  .share-btn:focus-visible{
    transform:none !important;
  }
}

/* ── 印刷時は非表示 ── */
@media print{
  .share-buttons{display:none !important;}
}