/* 「ホーム画面に追加」導線の共通スタイル。
   結果表示後に window.A2HS.show() が呼ばれた時のみ .is-open が付く。 */

.a2hs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; padding: var(--sp-4);
  pointer-events: none;
}
.a2hs.is-open { display: block; }

.a2hs__panel {
  pointer-events: auto;
  max-width: 520px; margin-inline: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: var(--sp-5);
  animation: a2hs-up .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes a2hs-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.a2hs__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.a2hs__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft);
  display: grid; place-items: center; color: var(--brand); }
.a2hs__title { font-weight: 800; font-size: 1.05rem; }
.a2hs__desc { color: var(--text-sub); font-size: var(--fs-sm); margin-top: 2px; }
.a2hs__close {
  margin-left: auto; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: var(--bg-muted); color: var(--text-sub); cursor: pointer; font-size: 20px;
}
.a2hs__actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* iOS 図解オーバーレイ */
.a2hs__steps { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.a2hs__step { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.a2hs__badge { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--brand);
  color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .8rem; }
.a2hs__glyph { flex: 0 0 auto; width: 30px; height: 30px; color: var(--brand); }

@media (min-width: 768px) {
  .a2hs { bottom: var(--sp-5); right: var(--sp-5); left: auto; }
  .a2hs__panel { margin: 0; }
}