/* share-helpers.css
 * URL共有・画像DL機能の共通スタイル（issue #157 Phase 2）。
 * 各ページに <link rel="stylesheet" href="share-helpers.css"> で読み込む。
 *
 * クラス命名は既存の hm-* を維持（旧ヒートマップ実装からの履歴）。
 * 新規追加: .sh-card / .sh-icons / .sh-icon （カードへの共有アイコン取付）
 */

/* ── 残量表示 ────────────────────────────────────────────────────────── */
.hm-quota-display {
  font-size: .68rem; color: var(--muted); padding: .2rem .45rem;
  background: var(--surface2); border-radius: 10px; white-space: nowrap;
  font-family: 'DM Mono', monospace; line-height: 1.6;
}
.hm-quota-display.warn  { color: var(--accent); background: rgba(240,165,0,.12); }
.hm-quota-display.empty { color: var(--isogo); background: rgba(196,64,36,.12); }

/* ── 画像エクスポート時のフッター ────────────────────────────────────── */
.hm-export-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .4rem .3rem; margin-top: .8rem;
  gap: 1.2rem;
}
.hm-export-footer .hm-export-left { display: flex; align-items: center; gap: .9rem; flex: 1; }
.hm-export-footer .hm-export-logo { height: 72px; width: auto; flex-shrink: 0; }
.hm-export-footer .hm-export-text { display: flex; flex-direction: column; justify-content: center; }
.hm-export-footer .hm-export-brand { font-size: 1.1rem; font-weight: 700; color: var(--ocean); line-height: 1.3; }
.hm-export-footer .hm-export-meta { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.hm-export-footer .hm-export-url { font-family: 'DM Mono', monospace; font-size: .78rem; color: var(--wave); margin-top: .2rem; }
.hm-export-footer .hm-export-trace { font-family: 'DM Mono', monospace; font-size: .65rem; color: var(--muted); margin-top: .25rem; opacity: .85; }
.hm-export-footer #_hm-export-qr canvas, .hm-export-footer #_hm-export-qr img,
.hm-export-footer #_hm-export-qr-tmp canvas, .hm-export-footer #_hm-export-qr-tmp img,
.hm-export-footer .hm-export-qr-box canvas, .hm-export-footer .hm-export-qr-box img { display: block; }

/* コンパクトレイアウト: ロゴ・テキスト・QRを縦並び（小カード向け）
 * 上余白は下余白(.35rem)の約1.5倍に設定してカードからフッターまでを詰める */
.hm-export-footer--compact {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: .5rem .4rem .35rem;
  margin-top: 0;  /* 基底の .8rem を上書き（カード直下に詰める） */
}
.hm-export-footer--compact .hm-export-left {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex: 0 0 auto;
}
.hm-export-footer--compact .hm-export-logo { height: 44px; }
.hm-export-footer--compact .hm-export-text { align-items: flex-start; text-align: left; }
.hm-export-footer--compact .hm-export-brand { font-size: .92rem; }
.hm-export-footer--compact .hm-export-meta { font-size: .68rem; margin-top: .15rem; }
/* URL は元の見た目（色 var(--wave)、太さ既定）を維持しつつ、サイズを
 * 横並び基準より少し小さい .72rem に。1行に収まりやすくする。 */
.hm-export-footer--compact .hm-export-url {
  font-size: .72rem;
  margin-top: .2rem;
}
/* URL文字列とXハンドルそれぞれを nowrap チャンクにしてハイフン位置での
 * 不本意な改行を防止。1行に収まらない場合は URL と X の間で改行する。 */
.hm-export-footer .hm-export-domain { white-space: nowrap; }
/* ブランド行: 「さかなデータフック」の右に小さくトレースID
 * メタテキストに日付などを入れたとき右側がはみ出さないよう、
 * トレースIDをブランド行に移動してメタ行を空ける設計。 */
.hm-export-footer .hm-export-brand-row {
  display: flex;
  align-items: baseline;
  gap: .8em;
  flex-wrap: wrap;
}
/* brand-row 内のトレースIDは旧 margin-top（メタ行下用）を打ち消す */
.hm-export-footer .hm-export-brand-row .hm-export-trace { margin-top: 0; }
/* X ハンドル: URL と同じ行・同じサイズ（inherit）で並べる
 * 先頭の " · " で URL とのスペースが既に確保されているため margin-left は不要 */
.hm-export-footer .hm-export-x {
  color: var(--wave);
  white-space: nowrap;
}
.hm-export-footer--compact .hm-export-trace { font-size: .58rem; margin-top: .2rem; }
.hm-export-footer--compact .hm-export-qr-box { margin-top: .2rem; }

/* ── トースト ───────────────────────────────────────────────────────── */
.hm-toast {
  position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
  background: var(--ocean); color: #fff; padding: .6rem 1.2rem; border-radius: 6px;
  font-size: .82rem; box-shadow: 0 4px 14px rgba(13,53,97,.3);
  z-index: 9998; opacity: 0; transition: opacity .2s;
}
.hm-toast.show { opacity: 1; }
.hm-toast.error { background: #c44024; }

/* ── ログイン必須モーダル ───────────────────────────────────────────── */
#hm-login-modal, #hm-limit-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6); align-items: center; justify-content: center;
}
#hm-login-modal.active, #hm-limit-modal.active { display: flex; }
#hm-login-modal .hm-login-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: min(420px, 92vw); padding: 1.5rem 1.4rem 1.2rem;
  box-shadow: 0 8px 32px rgba(10,61,92,.25); text-align: center;
}
#hm-login-modal .hm-login-icon { font-size: 2.4rem; margin-bottom: .5rem; }
#hm-login-modal h3 { font-size: 1.05rem; margin-bottom: .6rem; color: var(--ocean); }
#hm-login-modal p { font-size: .82rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.2rem; }
#hm-login-modal .hm-login-actions { display: flex; gap: .6rem; justify-content: center; }
#hm-login-modal .hm-login-actions button {
  font-size: .85rem; padding: .55rem 1.3rem; border-radius: 6px;
  font-family: inherit; cursor: pointer; font-weight: 600;
}
#hm-login-modal .hm-login-primary { background: var(--accent); color: #1a1200; border: none; }
#hm-login-modal .hm-login-primary:hover { filter: brightness(1.05); }
#hm-login-modal .hm-login-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
#hm-login-modal .hm-login-ghost:hover { background: var(--surface2); }

/* ── 上限到達モーダル ───────────────────────────────────────────────── */
#hm-limit-modal .hm-limit-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: min(520px, 92vw); max-height: 92vh; overflow-y: auto;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 8px 32px rgba(10,61,92,.25);
}
#hm-limit-modal .hm-limit-icon { font-size: 2.2rem; text-align: center; margin-bottom: .4rem; }
#hm-limit-modal h3 { font-size: 1.05rem; color: var(--ocean); text-align: center; margin-bottom: .5rem; }
#hm-limit-modal .hm-limit-summary {
  background: var(--surface2); border-radius: 6px; padding: .55rem .8rem;
  font-size: .8rem; color: var(--muted); margin-bottom: .9rem; text-align: center;
}
#hm-limit-modal .hm-limit-divider {
  border-top: 1px dashed var(--border); margin: .8rem 0 .9rem;
}
#hm-limit-modal .hm-limit-form-title {
  font-size: .92rem; font-weight: 700; color: var(--text); margin-bottom: .6rem;
}
#hm-limit-modal .hm-limit-field { margin-bottom: .8rem; }
#hm-limit-modal .hm-limit-field-label {
  display: block; font-size: .76rem; font-weight: 700; color: var(--text); margin-bottom: .3rem;
}
#hm-limit-modal .hm-limit-field-label .hm-limit-required {
  color: var(--isogo); font-size: .68rem; margin-left: .3rem;
}
#hm-limit-modal .hm-limit-field-hint {
  font-size: .68rem; color: var(--muted); line-height: 1.5; margin: .15rem 0 .3rem;
}
#hm-limit-modal .hm-limit-radio-group { display: flex; gap: 1rem; flex-wrap: wrap; }
#hm-limit-modal .hm-limit-radio {
  display: flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: .82rem; color: var(--text);
}
#hm-limit-modal textarea {
  width: 100%; padding: .5rem; font-family: inherit; font-size: .82rem;
  border: 1px solid var(--border); border-radius: 6px; resize: vertical;
  min-height: 4rem; box-sizing: border-box; background: var(--surface);
  color: var(--text); outline: none;
}
#hm-limit-modal textarea:focus { border-color: var(--wave); }
#hm-limit-modal .hm-limit-actions {
  display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem;
}
#hm-limit-modal .hm-limit-actions button {
  padding: .55rem 1.2rem; font-size: .85rem; border-radius: 6px;
  font-family: inherit; cursor: pointer; font-weight: 600;
}
#hm-limit-modal .hm-limit-submit { background: var(--accent); color: #1a1200; border: none; }
#hm-limit-modal .hm-limit-submit:hover { filter: brightness(1.05); }
#hm-limit-modal .hm-limit-submit:disabled { background: var(--border); color: var(--muted); cursor: not-allowed; }
#hm-limit-modal .hm-limit-cancel { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
#hm-limit-modal .hm-limit-cancel:hover { background: var(--surface2); }
#hm-limit-modal .hm-limit-error { color: var(--isogo); font-size: .76rem; margin-top: .5rem; }

/* ── カード共有アイコン（PCホバー＋スマホ長押し） ─────────────────── */
.sh-card { position: relative; }
.sh-icons {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: flex;
  gap: .2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 5;
}
.sh-card:hover .sh-icons,
.sh-icons:focus-within {
  opacity: .9;
  pointer-events: auto;
}
/* ホバー非対応デバイス（=スマホ・タブレット等）では「画面内に全体が見えていて
 * 最上部」のカードに自動でアイコンを表示する。PC（ホバー可能）では上のホバー
 * 規則だけで表示制御し、スクロール中の頻繁な表示切り替えを避ける。 */
@media (hover: none) {
  .sh-card.sh-active .sh-icons {
    opacity: .9;
    pointer-events: auto;
  }
}
.sh-icon {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 5px;
  width: 26px; height: 26px;
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ocean);
  font-family: inherit;
  transition: background .12s, transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
/* モバイル専用の📤共有ボタンは視認性とタップ快適さのため大きめ（≈2倍） */
.sh-icon.sh-icon-share {
  width: 48px; height: 48px;
  border-radius: 8px;
}
.sh-icon:hover {
  background: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.sh-icon:active { transform: scale(.96); }
.sh-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  opacity: 1;
}
/* 画像エクスポート中はアイコン非表示（キャプチャに含めない） */
body.hm-exporting .sh-icons { visibility: hidden; }