/* feature-shared.css — 会員プロフィール系の複数機能パネルが共有する汎用パーツの見た目。
   🔴【place タブ抽出・2026-09-10・PM裁定】どのパネルにも専属しない（3機能以上が使う）のに
   docs/handoff/collection.css（着せ替えパック）には無かった規則を、MemberProfileShell.astro の
   <style is:global> からここへ集約した。参照は src/layouts/BaseLayout.astro の <link> 参照。

   ⚠️ このファイルに置くのは「収録先パックに無い、かつ複数機能で使う」ものだけ。
   - パックに既に在るもの（.mp2-cnt・.mp2-seg・.mp2-st-q/.mp2-st-other 系）はここへ重複させない
     （二重定義になるとカスケードの勝敗で古い方が勝つ事故を招く＝PM是正2026-09-10）。
   - 1機能にしか要らない見た目は、各コンポーネント自身の <style> に残す。

   ⚠️ `#mp2-shell` の接頭辞を付けない（collection.css と同じ流儀）。会員プロフィールの
   殻の外（将来の単独ページ化など）でも同じ見た目になるようにするため。 */

/* 🔴 線画アイコンの素材（塗りは使う側の currentColor）。
   ⚠️ 絵文字を使わない（端末ごとに形が変わる／豆腐になる）。 */
:root {
  --nb-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M6 6l1 14h10l1-14'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* 見出しの丸紋（丸抜きアイコン）。正典＝member-profile-v2.html:420-422 相当。
   使用箇所（2026-09-10時点）: 自己紹介・体験談・考察・企画・行った場所・バッジの各見出し。
   🔴🔴 丸の直径（1.95em＝39px）は1px も変えない（椿さん承認 2026-08-15・案①）。
   ⚠️ 丸を作っているのはこの外側の span であって、中の絵（MemberProfileMotif）ではない
   （paintMotif() が [data-mi] の中身を丸ごと差し替えるため・詳細は MemberProfileMotif.astro）。 */
.mp2-mi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.95em; height: 1.95em; flex: none; vertical-align: -.5em;
  color: var(--mp2-ac); background: var(--mp2-acs);
  border: 0; border-radius: 50%; padding: .1em;
}
/* 🔴【UAT第10便①・椿さんご指摘 2026-09-17／PM 実測】**丸に対する絵の割合を 62% にそろえた。**
   ■ 直す前＝絵は内側いっぱい（35px／丸 39px ＝ **90%**）で、地の色の輪がほとんど見えず、
     「太い・潰れている」に見えていた。
   ⭐ 第9便⑬で**テーマ選びの丸**を 88% → 62%（丸に対する割合）へ絞ったが、
     **この見出しの丸には同じ直しが入っていなかった。**
   ⇒ 内側 35px の **69%** ＝ 24.2px ＝ 丸 39px の **62%**（テーマ選びの丸と同じ比率）。
   ⚠️ **紋の絵は描き直していない**＝原寸で描いて見たところ、絵の中身ではなく
     「縁まで埋まっていたこと」が原因だった。 */
.mp2-mi svg { width: 69%; height: 69%; display: block; fill: currentColor; }

/* 各タブから、その機能の専用ページへ行くボタン。
   使用箇所（2026-09-10時点）: 考察・企画・体験談・行った場所・コレクションの各パネル。
   ⚠️ **本人にだけ出す**（呼び出し側の JS が isOwner のときだけ作る）。
   ⚠️ 白文字は `--mp2-acd`（明度を落とした差し色）に乗せる＝`--mp2-ac` だと対比が足りない。
   ⚠️ JS が後から作る要素なので、部品ごとの <style> では当たらない（is:global に置く理由）。 */
.mp2-go-feat {
  /* 🔴 実測38pxだった押す的を44px以上へ（--mp2-tap）。
     inline-flex+align-itemsで中央寄せ（inline-blockのままだとmin-heightだけでは文字が上に寄る）。 */
  display: inline-flex; align-items: center; min-height: var(--mp2-tap); margin-top: var(--space-md);
  padding: 0.4rem 1.2rem; border-radius: 999px;
  background: var(--mp2-acd); color: #fff;
  text-decoration: none; font-weight: 700; font-size: var(--fs-note);
}

/* 行の右端に置く、汎用の丸角アイコンボタン（編集・削除）。
   使用箇所（2026-09-10時点）: 名刺の属性行・SNSしるし行・おしらせ行・行った場所の各行。
   ⚠️ `.mp2-aw`/`.mp2-aw-acct`/`.mp2-aw-lbl`/`.mp2-aw-sic`/`.mp2-aw-k`/`.mp2-aw-v` は
   SNSしるし行専用のレイアウトなので、ここへは持ってこない（MemberProfileShell.astro に残す）。 */
/* 🔴 是正＝base 側の font-size は .mp2-aw-ic（svgのみ・文字を持たない）には不要で、
   .mp2-aw-del では直後の規則が常に 0 へ上書きする＝同一ファイル内の自己矛盾（重複検査が検出）。
   base からは落とし、必要な箇所（::before の「✕」グリフ）だけで個別に持つ。 */
.mp2-aw-ic, .mp2-aw-del {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: none; border: 1.5px solid var(--mp2-hair); border-radius: var(--radius-md); color: var(--mp2-tx2);
  padding: 0;
}
.mp2-aw-ic svg { width: 20px; height: 20px; }
/* 🔴【椿さん指示・2026-09-12】削除は**本物の線画**にする。
   ⚠️ 以前は `content: '✕'` という**文字**で絵のふりをしていた＝規定「アイコンは自前の線画SVG」に反する。
   ⚠️ `font-size: 0` は残す＝ボタンの中の文字（「削除」）を隠す役。読み上げには aria-label が効く。
   🔴 この規則は**サイト内8か所の削除ボタン**が共有している（名刺の項目・SNS・大事なリンク・
      知っておいてほしいこと・訪問歴）。**全部が同じ絵に変わる。**
   ⭐ 塗りは `currentColor` なので、hover の色替えが今までどおり効く。 */
.mp2-aw-del { font-size: 0; }
.mp2-aw-del::before {
  content: '';
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--nb-icon-trash) center / contain no-repeat;
          mask: var(--nb-icon-trash) center / contain no-repeat;
}
.mp2-aw-ic:hover, .mp2-aw-del:hover { border-color: var(--mp2-ac); color: var(--mp2-ac); }

/* フォームの保存状態メッセージ（基本形）。
   使用箇所（2026-09-10時点）: 名刺・体験談・考察・行った場所・コレクション・公開URL設定の各欄。
   ⚠️ `.mp2-dock .mp2-save-msg`/`.mp2-feature-dock .mp2-save-msg` の上書きは、黒帯（保存ドック）
   専用のレイアウト調整なので、ここへは持ってこない（MemberProfileShell.astro に残す）。 */
.mp2-save-msg { font-size: var(--fs-note); color: var(--mp2-tx2); }