/* 共有ボタン（share.js）の見た目。案内ページの変数（--text・--accent）とアプリの変数（--ink）のどちらでも使える。 */
.share {
  --share-ink: var(--ink, var(--text, #eef1f5));
  --share-muted: var(--muted, #9aa3b0);
  --share-line: var(--line, rgba(238, 241, 245, .22));
  --share-accent: #dcebb3;   /* アプリの主ボタンと同じ黄緑（文字は --share-accent-ink） */
  --share-accent-ink: #243229;
  margin: 28px 0 0;
}
.share .share__label { margin: 0 0 12px; padding: 0; border: 0; font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--share-ink); }
.share__row { display: flex; flex-wrap: wrap; gap: 10px; }
.share__button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--share-line); border-radius: 6px; background: transparent; color: var(--share-ink);
  font: inherit; font-size: .95rem; line-height: 1.3; text-decoration: none; cursor: pointer;
}
.share__button:hover { border-color: var(--share-ink); }
.share__button--primary { background: var(--share-accent); border-color: var(--share-accent); color: var(--share-accent-ink); font-weight: 700; }
.share__button--primary:hover { border-color: var(--share-accent); background: #e9f4ce; }
.share__button[data-done="true"] { border-color: var(--share-accent); }
.share__button:focus-visible { outline: 3px solid var(--share-accent); outline-offset: 2px; }
.share .share__said { min-height: 1.5em; margin: 8px 0 0; font-size: .9rem; line-height: 1.6; color: var(--share-muted); }
.share .share__note { margin: 6px 0 0; font-size: .85rem; line-height: 1.7; color: var(--share-muted); }
.share__offscreen { position: fixed; top: -1000px; left: 0; opacity: 0; }

/* アプリの左パネル用：小さく並べる（説明文は案内ページだけに出す）。 */
.share--compact { margin: 14px 0 0; }
.share--compact .share__label { margin: 0 0 8px; font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--share-muted); }
/* 左パネル（幅約296px）に3つが1行で収まるよう、詰めて等分に伸ばす（4つ＝「共有…」がある端末では折り返してよい）。 */
.share--compact .share__row { gap: 6px; }
.share--compact .share__button { flex: 1 1 auto; min-height: 44px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
/* アプリの中では「走る」ボタンが主役。共有は塗らずに枠だけにする。 */
.share--compact .share__button--primary { background: transparent; color: var(--share-ink); border-color: var(--share-accent); font-weight: 600; }
.share--compact .share__said { margin-top: 6px; font-size: .76rem; }
.share--compact .share__note { display: none; }

@media (max-width: 480px) {
  .share:not(.share--compact) .share__button { flex: 1 1 calc(50% - 10px); }
}
@media (prefers-reduced-motion: no-preference) {
  .share__button { transition: border-color .15s ease; }
}