/* ============================================================
   /share : 公開ページ管理ハブ(サイドバー「共有」の実体)
   左に設定(名前・公開・見た目・公開する項目)、右に実物の埋め込みプレビュー。
   以前は index.html 内の inline <style> + 大量の style="" だったものを集約。
   見出し・余白の体裁はチーム概要(.team-section-* )と揃える。
   ============================================================ */

/* ---- レイアウト(旧 inline <style>) ---- */
.cardhub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 940px) {
  .cardhub-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .cardhub-side { position: sticky; top: var(--space-4); }
}
.cardhub-card { padding: var(--space-4); }
.cardhub-frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}
.cardhub-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cardhub-accent-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

/* ---- 見出し・説明・カード間隔(チーム概要と統一) ---- */
.share-intro { margin-bottom: var(--space-5); }

.share-card { margin-bottom: var(--space-5); }          /* 地色/枠/padは .surface-card 側 */

.share-card-title {                                      /* カード見出し(旧 h2 text-2xl → lg) */
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-2);
}

.share-desc {                                            /* 説明文(muted・小さめ) */
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
  max-width: 64ch;
}
.share-desc:last-child { margin-bottom: 0; }

.share-note { color: var(--fg-muted); font-size: var(--text-sm); }  /* QR キャプション等の小注記 */

/* ---- 「公開する項目を選ぶ」内のサブセクション見出し(階層を一段下げる) ---- */
.sharing-section .section-title h3 {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
/* .field 内の注記(現在の名前 / 背景画像の説明)はラベル/入力との間に少し余白を取る */
.field .share-desc,
.field .share-note { margin-top: var(--space-2); }
.sharing-count { font-size: var(--text-sm); margin-left: var(--space-2); }
.sharing-empty { color: var(--fg-muted); padding: var(--space-3); }

/* ---- フォーム部品の体裁 ---- */
.share-publish-form { display: inline-block; }

.share-row {                                            /* 横並びの操作行(検索許可・QR 等) */
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.share-qr-row { gap: var(--space-4); }

.share-check-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}

.share-qr-img {                                         /* QR は白地でないと読み取り精度が落ちる */
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  line-height: 0;
}

.share-bg-form { margin-top: var(--space-5); }

.share-radio {                                          /* テンプレ/色/画像サイズのインライン選択 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--space-4);
  font-size: var(--text-sm);
}
.share-radio--tight { margin-right: var(--space-3); }   /* アクセント色は数が多いので詰める */