/* share.css — 「作ったものを人に渡す」共通部品の見た目。
 *
 * changelog.css と同じ考え方で、色を決め打ちしない。ページごとに地の色が
 * 明るかったり暗かったりするので、文字色は継承し、枠と下地は半透明の灰色にする。
 * SNS のブランド色も使わない（公式ボタン風に見せると、外部スクリプトを
 * 読んでいると誤解されるうえ、暗い地・明るい地の両方で読みにくくなる）。
 * 動きの演出は入れない（演出は /assets/motion.css にだけ書く決まり）。 */

.hs-share {
  padding: 1.4rem 0 .4rem;
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
  font-size: .9rem;
  line-height: 1.75;
}

/* 操作パネルの中に置かれたときは、外側の余白を持たない（親に従う） */
.hs-share-card {
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid rgba(128, 128, 128, .34);
  border-radius: 10px;
  background: rgba(128, 128, 128, .07);
  padding: .9rem 1.05rem 1rem;
}

.hs-share-h {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.hs-share-lead {
  margin: 0 0 .7rem;
  font-size: .82rem;
  opacity: .82;
}

.hs-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.hs-share-btn {
  display: inline-block;
  border: 1px solid rgba(128, 128, 128, .48);
  border-radius: 7px;
  background: rgba(128, 128, 128, .1);
  color: inherit;
  font: inherit;
  font-size: .82rem;
  line-height: 1.4;
  padding: .42rem .7rem;
  min-height: 34px;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hs-share-btn:hover { background: rgba(128, 128, 128, .2); }
.hs-share-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* まだ渡せるものが無いとき。押せないことを見た目でも出す（押しても理由を出す） */
.hs-share-btn.is-off,
.hs-share-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.hs-share-msg {
  margin: .55rem 0 0;
  font-size: .78rem;
  line-height: 1.7;
  opacity: .9;
  word-break: break-all;
}

.hs-share-msg:empty { margin: 0; }

/* リンクの中身とカードの絵は別、という断り書き。小さくは出すが、消さない。 */
.hs-share-ogp {
  margin: .5rem 0 0;
  font-size: .72rem;
  line-height: 1.65;
  opacity: .62;
}

/* コピーの取りこぼし用に一瞬だけ置く textarea。画面には出さないが、
   display:none だと選択できずコピーできないので、画面の外へ逃がす。 */
.hs-share-copysrc {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

@media (max-width: 560px) {
  .hs-share { font-size: .86rem; }
  .hs-share-card { padding: .8rem .85rem .9rem; }
  .hs-share-btn { font-size: .8rem; padding: .45rem .6rem; }
}