/* ==========================================================================
collection.css — グッズコレクション
クラス名は既存 mp2-col-* に合わせてある。改名しない（renderCollection が参照）。
前提: tokens.css と primitives.css を先に読み込む。
ヒーロー帯は作らない。.page-head（48px の平らな見出し）＋タブ。
========================================================================== */
/* --- 節の外枠 ------------------------------------------------------------
ページのテーマ色は data-col-theme（プリセット）か style="--col-ac:#RRGGBB"（自作）。
ページの「明るさ」は data-col-scheme。背景の濃さは --col-bg-opacity（0〜1）。 */
.mp2-col {
/* 🔴【WO-148・BUG-101】アクセントはページ別ではなく会員の着せ替え（--mp2-ac）と同じ。 */
--col-ac: var(--mp2-ac, var(--col-orange));
--col-ac-fill: var(--mp2-acf, var(--mp2-ac, var(--col-orange)));
/* 🔴🔴【便B2・PM是正・2026-09-12】ここを `var(--text)` にしてはいけない。
便Bで見出し・タブの帯が `--text: var(--col-on-ac)` を宣言したため、
**--text → --col-on-ac → --text という輪**ができていた。
⚠️ 輪になった変数は「無効」になり、文字色が地に溶ける（実測＝暗い表示でタブ「全て」の
文字が白い丸の上に白＝対比1.17）。[data-col-theme] が付いている間は global.css:292-294 が
上書きするので気づかず、付いていない経路でだけ牙を剥く。
⇒ 既定は**テーマ固定の墨**にする（既定のテーマ＝橙は墨字が正しい・global.css と同じ判断）。 */
--col-on-ac: var(--mp2-onac, var(--mp2-pg));
/* 🔴【便C-1・椿さん指示・2026-09-12】地をマイページのプロフィールと同じ色にする
（選択肢A）。訪問者/本人どちらの表示でも、プロフィールの --mp2-pg があればそれを採り、
無いスタンドアロン画面では従来どおり --canvas 自身にフォールバックする（自己参照循環
ではなく既定値なので安全）。 */
--canvas: var(--mp2-pg, #F1EFEA);
/* 🔴【WO-102・2026-09-24】コレクションは、面・文字・線・薄い塗りも〈会員の着せ替え〉の札で描く（明るい表示でも暗い表示でも）。
⚠️ 地（--canvas）だけを着せ替えに向け、ほかをサイトの札のまま残していたため、暗い表示で面（並べ替え・共有・検索欄・「No Image」）だけが
サイトの暗い灰色になり、着せ替えの文字が読めなくなっていた（PM 実測 1.01）。⭐ 軸を切り替えるなら、その軸の札は全部切り替える。
⚠️ 下の「暗い配色」（data-col-scheme='dark'）は同じ札を対で置き直すので、そちらが勝つ。 */
--canvas-card: var(--mp2-cd, #FFFFFF);
--text: var(--mp2-tx, #1C1B19);
--text-dim: color-mix(in srgb, var(--mp2-tx, #1C1B19) 70%, transparent);
--hair: var(--mp2-hair, rgba(28, 27, 25, .14));
--tint: color-mix(in srgb, var(--mp2-tx, #1C1B19) 6%, transparent);
background: var(--canvas); color: var(--text);
display: flex; flex-direction: column; min-height: 0;
}
.mp2-col[data-col-scheme='dark'] {
--canvas: #1C1C1E; --canvas-card: #26262A;
--text: #EDEDF0; --text-dim: rgba(237,237,240,.62);
--hair: #3A3A3C; --tint: rgba(255,255,255,.10);
}
/* 🔴🔴【椿さん決定・2026-09-12】ページの地にテーマ色を薄く敷くのをやめた。
逐語＝「カテゴリの淡いベージュ敷って、そもそもなぜページの中に敷きがあるのか？
モックでは敷きなんてないですよね。（…）敷きなしですよ。当然。」
⚠️ パック（docs/handoff/collection.css:26-29）には敷きが書いてあるが、
2026-09-11 更新版のモックの一覧画面には敷きが無い（実測＝品物の面の地が
rgb(241,239,234)＝画面の地と同じ・collection-list-390/768/1280 の3枚とも）。
⇒ 見た目はモックが正典（D-14）なので、こちらを採る。
⭐ 敷きがあると、この面だけが「区画」として縁を持って見える（椿さんのご指摘そのもの）。
⚠️ これに伴い --col-bg-opacity はどこからも読まれなくなった（唯一の読み手がここだった）。
ページ設定の「背景の濃さ」つまみも外してある（5589行台）。戻すならこの2箇所が対。 */
.mp2-col-page { position: relative; background: var(--canvas); }
/* 🔴🔴【椿さん指示「PC版は画面幅の統一をしましょう」・2026-09-12】
■ 測った状態（1440px）＝縦のラインが3本に割れていた
見出し・札の行・検索の列＝左96px ／ 品物の升目＝左120px ／ サイト情報のページ＝左112px。
■ 直し＝左右の余白を1つの札にまとめ、コレクションの全部の行がこれを使う。
数値はサイトの基準（サイト情報のページ＝1280pxの器の内側に32px）に合わせた。
⭐ 札にする理由＝次に幅を変える人が、1か所だけ直せば全部そろう
（書き写すと、必ずどれか1行が取り残される）。 */
.mp2-col { --col-gutter: 16px; }
@media (min-width: 700px) { .mp2-col { --col-gutter: 24px; } }
@media (min-width: 1100px) { .mp2-col { --col-gutter: 32px; } }
/* --- 1280px の器。見出し・タブ・ツールバーも同じ幅で揃える ----------------
🔴【便B・B-12】直書きの 1280px をやめ、サイト全体の器の札 var(--content-max) を使う
（global.css:265 が正本＝1280px。ここでは値を書き写さない）。 */
.mp2-col-shell { width: 100%; max-width: var(--content-max); margin: 0 auto; }
/* --- 節の題（48px の行。題＋件数＋検索＋共有・プロフィール内に置くときだけ）----------- */
.mp2-col-head { flex: none; height: 48px; display: flex; justify-content: center; overflow: hidden; }
/* 🔴🔴【WO-144 round2・PM是正・2026-09-27】max-width:none＋margin:0＝下の #mp2-col-page-head
（136行目のC-16コメント参照）と同じ「帯を画面いっぱいにし、中身の余白は
MemberProfileShell.astro 側の padding-inline（--col-gutter 計算）に一本化」の形へ揃えた。
⚠️ 値をここで直接書き換えたのは、後ろに `.mp2-col-head__bar{max-width:none}` を別行で
足すと同一セレクタの重複になり、ビルドの重複検査（門）で止まるため（実測）。
ここより後ろに書く padding も同様＝既存のこの1行の中で直す。 */
.mp2-col-head__bar {
width: 100%; min-width: 0; max-width: none; margin: 0;
padding: 0 8px 0 16px;
display: flex; align-items: center; gap: 6px;
}
.mp2-col-head__bar h2 { margin: 0; font-size: var(--fs-sub); font-weight: 900; white-space: nowrap; }
.mp2-col-head__actions { margin-inline-start: auto; display: flex; flex: none; }
.mp2-cnt { font-size: var(--fs-mini); font-weight: 600; color: var(--text-dim); white-space: nowrap; }
/* --- ページのタブ（全て＋ページ名＋＋＋ページ設定）-----------------------
横に溢れたら横スクロール。折り返さない。 */
/* ⚠️ min-width:0 が無いと ＋ / ページ設定 が親を押し広げて画面外にはみ出す */
.mp2-col-page-tabs {
display: flex; align-items: center; gap: 2px;
width: 100%; min-width: 0; max-width: var(--content-max); margin: 0 auto;
padding: 10px 16px;
overflow-x: auto; scrollbar-width: none;
}
.mp2-col-page-tabs::-webkit-scrollbar { display: none; }
/* タブ行＝[ページ名（ここだけ横スクロール）] + [＋・ページ設定（常に画面内・右端固定）]
⚠️ ＋ と ページ設定 をスクロール域に入れない（画面外に消える）。 */
/* 🔴🔴【WO-144C・椿さん その25・2026-09-27】上に在った `.mp2-col-page-tabs-row`（この2つを
1本の帯として包み、自分で幅・余白・帯の地を持っていた）は撤去した。タブ（-wrap）と道具の
並び（-actions・⚙）が題の行（#mp2-col-page-head / .mp2-col-head__bar）へ同居する形に変わり、
「行」としての幅・余白・地は**親の見出し行**が既に持っているため、自分で持つ必要が無くなった
（renderCollection が -wrap/-actions をそれぞれ別々に見出し行へ差し込む＝⚙は行の最後尾）。 */
/* --- 見出し・ページの札の行は、ページのテーマ色のグラデーション（明るい表示のとき）-----
モックの --ac/--acDeep（collection-list-390.html の2つ目の色は計算値・16進数は写さない）。
行の中では --text/--text-dim/--hair（＝会員着せ替え軸の --mp2-tx/--mp2-tx2 も）を塗りの上の
色（--col-on-ac）へ差し替え、子の文字・罫・アイコンが自動で入れ替わるようにする。 */
/* 🔴🔴【PM是正・2026-09-12】グラデーションの2つ目の色は、**文字色の反対側**へ寄せる。
⚠️ 発注書（PM が書いた）は `var(--text)`＝**文字色の側**へ寄せる式だった。これは向きが逆で、
読みやすさが全テーマで下がる（実測＝橙 6.43→5.05／赤 4.65→**3.82**で合格線4.5を割る）。
モックの実物は `rgb(255,118,1) → rgb(255,143,47)`＝**明るい側**（墨文字なので白へ18%）。
⇒ 「反対側の色」を札で持つ。**値の書き方は global.css:292-294（--col-on-ac の分け方）を写す**
（あちらも同じ目的で #ffffff と var(--ink) を直に書いている）。
実測（18%寄せ・対 文字色）＝橙 7.26／赤 5.66／黄 9.84／緑 5.94／青 6.53／紫 5.15／桃 4.46。 */
.mp2-col { --col-ac-2: #ffffff; } /* 既定＝橙（文字は墨）なので白へ寄せる */
[data-col-theme] { --col-ac-2: var(--ink); }
[data-col-theme='orange'],
[data-col-theme='yellow'] { --col-ac-2: #ffffff; }
/* 🔴🔴【便B2・C-2・PM実測2026-09-12】本人の編集画面（/collection/・#mp2-col-page-head＝
primitives.css の共通 .page-head）は、この節では #mp2-col-head（訪問者用の軽量見出し）と
排他で、実際に画面へ出るのは常にこちら（4980行台 renderCollection が hidden を切替）。
便Bはグラデーションを #mp2-col-head にしか当てておらず、この画面では一度も出ていなかった
（実測＝getBoundingClientRect().height:0 の非表示要素だけが橙、実際に見えている48px行は
white/glass のまま）。#mp2-col-page-head はコレクションだけが使うユニークID＝共通の
.page-head（primitives.css:113・他の全機能ページが使う）自体は1行も変えない。 */
/* 🔴【WO-144C・椿さん その25・2026-09-27】`.mp2-col-page-tabs-row` をこの一覧から外した＝
撤去済み（上のコメント参照）。タブ・道具は今は #mp2-col-head / #mp2-col-page-head の
**子**になった＝この2つに掛かる背景・文字色トークンは子孫方向に継承されるので、
タブ・道具の側で同じ値をもう一度宣言する必要が無い。 */
.mp2-col-head,
#mp2-col-page-head {
background: linear-gradient(165deg, var(--col-ac-fill) 40%, color-mix(in srgb, var(--col-ac-fill) 82%, var(--col-ac-2)));
--text: var(--col-on-ac);
--text-dim: var(--col-on-ac);
--mp2-tx: var(--col-on-ac);
--mp2-tx2: var(--col-on-ac);
--hair: color-mix(in srgb, var(--col-on-ac) 30%, transparent);
color: var(--col-on-ac);
}
/* 🔴【C-16・PM是正2026-09-12】帯を画面いっぱいにする（max-width を外す）のはここ。
⚠️ 左右の余白の計算はここに書かない＝実装役は 16px / 8px を直書きしたが、
この画面の左右の余白は幅で変わる札（--col-gutter＝16/24/32px）なので、直書きすると
PC でタブの行と段違いになる（実測＝1440px で題32・タブ112）。
⇒ 計算は MemberProfileShell.astro 側の #mp2-col-page-head（--col-gutter を使う版）に一本化した。
⭐ 同じことを2か所で書くと、必ず片方が古びる。
⚠️ 2026-09-16＝`max-width: content-max` にすると PC で見出しが中央に詰まって見える
（共通 .page-head の max-width が勝つ）。帯は none・インデントは Shell 側が正。
🔴🔴【WO-144 round2・PM是正・2026-09-27】ここは元から #mp2-col-page-head（本人）専用。
⚠️ **「一本化した」はこのとき本人側にしか効いておらず、見に来た人の帯（.mp2-col-head__bar・
71行目）は古い `max-width:var(--content-max);margin:0 auto` のまま取り残されていた**＝
上のC-16自身が警告していた「2か所で書くと片方が古びる」が、その後のWO-144（その25・
タブをこの帯へ同居させた回）で現実になった（実測＝1440pxで本人112・見に来た人96）。
⇒ 見に来た人の帯にも同じ形（max-width:none・padding-inline を Shell 側の calc に一本化）を
71行目のその場で当てた（ここへ同じセレクタ文字列を足すと重複検査の門で止まるため）。 */
#mp2-col-page-head { max-width: none; }
/* 🔴【便B2・PM実測2026-09-12】`display:block` のままだと、中の nav（overflow-x:auto）の
横スクロール用の帯の分だけ**親が12px高くなる**（実測＝wrap 56px / nav 44px）。
タブ行がモックより22px高い原因のうち12pxがこれ。`flex` にして子の高さに揃える。 */
.mp2-col-page-tabs-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.mp2-col-page-tabs-wrap .mp2-col-page-tabs { width: auto; max-width: none; margin: 0; padding: 0 24px 0 0; }
/* 🔴【便B・B-6・副作用の是正】この行の地は上のB-6で --canvas からアクセント色の
グラデーションへ変わった。フェードの行き先を --canvas のまま残すと、はみ出しを隠す
帯だけ元の地色で描かれ、境目が見える。行の実際の地（--col-ac）へ合わせる。 */
/* 🔴🔴【便B2・PM是正・2026-09-12】はみ出しを隠す帯を「行の地と同じ色で塗りつぶす」のをやめ、
**中身（タブ）の側を右端で透過させる**形にする。
⚠️ 塗りつぶす方式は、行の地がグラデーションになった時点で成立しない＝どんな単色を
選んでも四角い塊として見える（実測＝素の --col-ac では濃い塊、グラデーションの終わりの色
では明るい塊。写真で両方確認）。⭐ 色を合わせにいくのではなく、**合わせる必要を無くす**。
これでモックと同じ「自然に消える」見え方になり、テーマ9色すべてで自動的に正しい。 */
.mp2-col-page-tabs-wrap::after { content: none; }
.mp2-col-page-tabs-wrap .mp2-col-page-tabs {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
[dir='rtl'] .mp2-col-page-tabs-wrap .mp2-col-page-tabs {
-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}
/* PC は横スクロールが起きないので、ぼかし自体を外す（モックも 900px 以上ではフェード無し）。 */
@media (min-width: 900px) {
.mp2-col-page-tabs-wrap .mp2-col-page-tabs { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 900px) { .mp2-col-page-tabs-wrap::after { display: none; } }
/* 🔴🔴【WO-144 round2・PM是正・2026-09-27】0件（noPages）の面ではタブ（flex:1）が無い＝
⚙が back の直後（左）に来ていた（実測＝owner-zero-sections-390.png）。逐語「歯車はいちばん右」
はこの状態でも成り立つ必要がある＝margin-inline-start:auto でこの入れ物自身を右へ押す。
⚠️ 通常時（タブが flex:1 で先に空きを使い切る）は無害＝タブの後ろに空きが残らないため
auto マージンが消費する余白が無く、見た目は1px も変わらない。 */
.mp2-col-page-tabs-actions { display: flex; gap: 4px; flex: none; align-items: center; margin-inline-start: auto; }
.mp2-seg--settings { width: 34px; padding: 0; justify-content: center; border-radius: 50%; } /* 歯車のアイコンだけ・aria-label 必須 */
.mp2-seg {
display: flex; align-items: center;
height: 34px; padding: 0 15px; flex: none;
border: 0; border-radius: var(--r-pill);
background: transparent; color: var(--text);
font: 500 var(--fs-mini)/1 var(--font-body); white-space: nowrap; cursor: pointer;
}
/* 🔴【便C-3・椿さん指示・2026-09-12】「立体加工」（浮き影）は規定外なので外す。地と太字だけ残す。 */
.mp2-seg.on { background: var(--canvas-card); font-weight: 700; }
/* 🔴【便C-8・椿さん指示・2026-09-12】歯車の「線の丸」をやめ、帯に薄く沈む面にする。
⚠️ 押されている状態（aria-pressed/.on）は変えない＝押す/押されるを持たないので対象外。
⚠️ 新しいセレクタを足さず、既存の border 宣言そのものを書き換える＝
scripts/check-css-specificity-shadow.mjs（触ってはいけないファイル）の「同一セレクタ重複」
検査が、同じセレクタに2つ目の border 宣言を足すことを「死んだCSSの疑い」として止めるため。
🔴🔴【WO-144C・椿さん その25・2026-09-27】`.mp2-seg--add`（＋・セクションを追加）は
この規則ごと撤去した＝＋を設定シートの「コレクション」グループへ移し、帯からは無くした
（openColPageEditor 参照）。 */
.mp2-seg--settings { border: 0; background: color-mix(in srgb, var(--col-on-ac) 12%, transparent); padding: 0 12px; font-size: var(--fs-mini); font-weight: 600; }
/* 🔴【便C-4・椿さん指示・2026-09-12】タブ切り替えを「ぬめっと移動する」動きにする。
選択を示す白い丸（.mp2-col-tab-ink）を押したタブの位置へ滑らせる。位置合わせは
MemberProfileShell.astro 側の JS（positionColTabInk）が offsetLeft/offsetWidth を読んで行う。 */
.mp2-col-page-tabs { position: relative; }
.mp2-col-tab-ink {
position: absolute; top: 50%; inset-inline-start: 0; transform: translateY(-50%);
height: 34px; width: 0; border-radius: var(--r-pill);
/* 🔴【便C-4・PM是正・実測で発見・2026-09-12】発注書の原文は `var(--canvas-card)` だったが、
実測でこの画面の「選ばれている札」の地は、サイトの明暗ではなくページの着せ替えの
地（--mp2-cd）を使っていた（#mp2-panel-collection .mp2-seg.on .mp2-seg__pill・
16101行付近）。端末/サイトが暗い設定・着せ替えは明るい、という組み合わせで実測したところ、
`--canvas-card` はサイト軸で #26262A（暗い）になり、印だけ黒っぽい染みになって見えた
（札は着せ替え軸で白のまま）。印を札と同じ色にするため、こちらも --mp2-cd を先に取る。 */
background: var(--mp2-cd, var(--canvas-card)); pointer-events: none; z-index: 0;
transition: transform .26s cubic-bezier(.2,0,0,1), width .26s cubic-bezier(.2,0,0,1);
}
.mp2-col-page-tabs .mp2-seg { position: relative; z-index: 1; }
.mp2-col-page-tabs .mp2-seg.on .mp2-seg__pill { background: transparent; }
@media (prefers-reduced-motion: reduce) { .mp2-col-tab-ink { transition: none; } }
/* 🔴【便C-7・椿さん指示・2026-09-12】PCの見出し行「＋アイテムを追加」は白ボタン
（style="--btn-ac/--btn-on" は MemberProfileShell.astro 側で入れ替え済み）。
primitives.css の .btn-primary:hover { filter: brightness(.94); } のままだと橙背景の
ときの前提で作られた沈み具合が強すぎるため、この見出しボタンにだけ「白のままわずかに沈む」
具合へ上書きする（他の .btn-primary の hover は変えない＝クラスで絞る）。 */
.mp2-col-head-add:hover { filter: brightness(.97); }
/* --- 道具の列（検索・並べ替え・共有／公開のつまみ）-------------------------
🔴🔴【椿さん その23・2026-09-27】見出しの行（48px の帯）の右側へ入れる＝アイテムの前の行を1つ減らす
（逐語＝「コレクション、タブ切り替え、検索ソート共有行とありすぎる気がする。縦に。」）。
⇒ 行としての余白・罫・幅は持たない。帯の中なので、文字と線は帯の上の色（--col-on-ac）を引き継ぐ。 */
.mp2-col-toolbar {
display: flex; align-items: center; gap: 2px; flex: none; min-width: 0;
margin-inline-start: auto;
}
/* 見出しの行の道具＝札の無いアイコン（押す的 44px・押すと帯に沈む丸）。 */
.mp2-col-tool {
position: relative; width: var(--tap); height: var(--tap); flex: none;
display: grid; place-items: center; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.mp2-col-tool:hover { background: color-mix(in srgb, var(--col-on-ac) 12%, transparent); }
/* 🔴【椿さん その23】検索窓＝虫めがねを押したときだけ、見出しの行の中で開く（開いている間は題とほかの道具を隠す）。
地は帯に沈む丸い枠（タブの行の＋・歯車と同じ）。 */
.mp2-col-search {
display: none; flex: 1; min-width: 0; height: 36px;
align-items: center; gap: 8px;
padding: 0 14px;
border: 0; border-radius: var(--r-pill);
background: color-mix(in srgb, var(--col-on-ac) 12%, transparent); color: inherit;
font: 400 var(--fs-note)/1 var(--font-body);
}
/* ブラウザが検索欄に自分で出す「×」（字を消すだけ）は出さない＝右の「閉じる×」と2つ並んで紛らわしい（PM が撮った絵で発見）。 */
.mp2-col-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.mp2-col-search-close { display: none; }
[data-col-search='open'] .mp2-col-toolbar { flex: 1; margin-inline-start: 0; }
[data-col-search='open'] .mp2-col-search { display: flex; }
[data-col-search='open'] .mp2-col-search-close { display: grid; }
/* ⚠️ 見に来た人の題（h2）は MemberProfileShell の `#mp2-shell h2 { display: flex }`（名札つき）に負けるので、
こちらも名札（#mp2-panel-collection）で強める（実測＝名札なしでは検索中も題が残った）。 */
[data-col-search='open'] .mp2-col-toolbar > :not(.mp2-col-search):not(.mp2-col-search-close),
#mp2-panel-collection[data-col-search='open'] .mp2-col-head__bar > h2,
[data-col-search='open'] #mp2-col-page-head > :not(.mp2-col-toolbar) { display: none; }
.mp2-col-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
/* 🔴【椿さん その23】並べ替え＝アイコンの上に端末の選択肢（select）を透明で重ねる＝押すと端末の一覧が開き、いまの並びに印が付く。
⚠️ select の文字は 16px 未満にしない（iOS が拡大する）。見えないので見た目には効かない。 */
.mp2-col-sort select {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; padding: 0; border: 0; border-radius: 50%;
opacity: 0; cursor: pointer; font-size: var(--fs-body);
-webkit-appearance: none; appearance: none;
}
.mp2-col-sort:focus-within { outline: 2px solid currentColor; outline-offset: -2px; }
/* 🔴🔴【WO-144C・椿さん その25・2026-09-27】`.mp2-col-pub`（帯の中の公開のつまみ）は
この規則ごと撤去した＝公開の切り替えは設定シートの「コレクション」グループへ移り、
帯（#mp2-col-toolbar）からは無くなった（openColPageEditor・#mp2-col-pub-sheet 参照）。 */
/* --- カテゴリ ------------------------------------------------------------- */
.mp2-col-cat { display: flex; flex-direction: column; gap: 8px; }
.mp2-col-cat-head-row {
display: flex; align-items: center; gap: 4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--hair);
}
/* 🔴 見える高さは 36px のまま（モックどおり）。押せる範囲だけ44pxに広げる（下の ::before）。 */
.mp2-col-cat-head-btn { position: relative; }
.mp2-col-cat-head-btn::before {
content: ''; position: absolute; top: 50%; inset-inline-start: 0;
transform: translateY(-50%); width: 100%; height: var(--tap);
}
.mp2-col-cat-head-btn {
flex: 1; min-width: 0; height: 36px;
display: flex; align-items: center; gap: 8px;
padding: 0; border: 0; background: transparent; color: var(--text);
text-align: start; cursor: pointer;
}
/* 開閉のしるし。JS が textContent を書き換えている箇所は ::before に寄せる */
.mp2-col-cat-head-btn > .caret { width: 11px; flex: none; font-size: 12px; color: var(--text-dim); }
.mp2-col-cat-head-btn > .name { font: 700 var(--fs-note)/1 var(--font-body); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 🔴【椿さん その23】グループの見出しの「◯種・◯個」は出さない（数が多すぎる）＝ .count の規則は外した。 */
.mp2-col-cat-head-add {
width: 36px; height: 36px; flex: none;
display: grid; place-items: center;
border: 1.5px solid var(--hair); border-radius: 50%;
background: transparent; color: var(--text); cursor: pointer;
}
.mp2-col-cat-add {
height: var(--tap); width: 100%;
display: flex; align-items: center; justify-content: center; gap: 6px;
border: 1.5px dashed var(--hair); border-radius: var(--r-pill);
background: transparent; color: var(--text-dim);
font: 600 var(--fs-mini)/1 var(--font-body); white-space: nowrap; cursor: pointer;
}
/* --- 写真の格子（4 → 5 → 6 列）-------------------------------------------- */
/* 中身は 1280px の器で中央寄せ。PC に左レールは置かない（ナビは上の横並び）
🔴【便B・B-12】直書きの 1280px を var(--content-max) に置き換え（格子の器＝文章を読ませる
段ではないので広げてよい）。 */
/* 🔴【便C-4・椿さん指示・2026-09-12】タブを切り替えたときの中身の入れ替えも少し和らげる。
⚠️ 動かしてよいのは透明度だけ（位置を動かすと、押した直後に中身が跳ねて見える）。 */
.mp2-col-body { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 14px var(--col-gutter, 16px) 24px; display: flex; flex-direction: column; gap: 16px; animation: mp2ColBodyIn .22s cubic-bezier(.2,0,0,1); }
@keyframes mp2ColBodyIn { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mp2-col-body { animation: none; } }
.mp2-col-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mp2-col-grid[hidden] { display: none; }
@media (min-width: 700px) { .mp2-col-body { padding: 18px var(--col-gutter, 24px) 28px; } .mp2-col-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .mp2-col-body { padding: 20px var(--col-gutter, 32px) 40px; } .mp2-col-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.mp2-col-tile { display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
/* ⚠️ グッズの写真は正円で切り抜く（角丸の正方形にしない）。--r-tile は 50%。 */
.mp2-col-pic {
position: relative; aspect-ratio: 1; overflow: hidden;
border-radius: 50%;
background: var(--canvas-card);
box-shadow: var(--elev-tile);
}
.mp2-col-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- 背景を透過した画像（item.bgRemoved）------------------------------------
🔴🔴【UAT第10便b・椿さん 2026-09-17】逐語＝「透過してるところはあくまで背景通りに」
「この画面にうまく溶け込んでほしい」「浮いてるような加工をしなくていい」。
⇒ 透けたところには**画面の地をそのまま見せる**＝丸の地・市松・影を付けない。
⇒ **丸でも切り抜かない**（切り抜いた形のまま置く）。見えない丸で切ると、四隅に届く部分（足元の小物など）が欠ける（PM 実測）。
⚠️ 透過していない写真はこれまでどおり（丸・地・影）。
⚠️ 暗い表示の丸い線は MemberProfileShell.astro 側の規則が付けている＝外す規則もそちらに在る。 */
.mp2-col-pic--transparent {
background: transparent;
box-shadow: none;
/* 丸で切らない＝角を四角にするのではなく、はみ出しを切らない（地も影も線も無いので、丸の形は見えない）。
⚠️ `border-radius: 0` にしない＝「角丸ゼロ」を増やさない検査（scripts/check-old-style-decard.mjs）に掛かる。 */
overflow: visible;
}
.mp2-col-pic--transparent img { object-fit: contain; }
/* 写真が無い（名前だけ）の件 */
.mp2-col-pic--empty {
display: grid; place-items: center;
padding: 6px;
font: 400 var(--fs-mini)/1.4 var(--font-body); color: var(--text-dim); text-align: center;
}
/* 個数の徽章。⚠️ .mp2-col-pic（overflow:hidden の正円）の**外**＝.mp2-col-tile 直下に置く。
中に入れると円で切り取られる。「×」は付けない。**1個のときは出さない**（無印）。 */
.mp2-col-tile { position: relative; }
.mp2-col-badge {
position: absolute; top: -4px; inset-inline-end: -4px; z-index: 2;
min-width: 22px; height: 22px; padding: 0 6px;
display: flex; align-items: center; justify-content: center;
border-radius: 11px;
background: var(--text); color: var(--canvas);
/* 🔴【椿さん その20・その23 案B】数の印も小さい札の段（--fs-mini＝13px）。12px を下回らない */
font: 700 var(--fs-mini)/1 var(--font-body);
/* 🔴【椿さん指摘・2026-09-12／PM 実測】数字が円の中心より 0.625px 下に見えていた。
原因＝Noto Sans JP は上へ 1.160em・下へ 0.290em（合計 1.450em）と非対称で、
line-height:1 の「行の箱」の中心と、数字の見た目の中心が一致しないため。
⇒ 刈り込みは下の .mp2-col-badge__n（入れ子の塊）で行う。ここには書かない（効かない）。 */
font-variant-numeric: tabular-nums lining-nums;
box-shadow: 0 0 0 2px var(--canvas), 0 2px 6px rgba(0,0,0,.25);
}
/* 🔴【PM 実測・2026-09-12】数字を包む入れ子。**ここに書かないと効かない。**
text-box は「文字を直接持つ入れ物」にしか効かず、display:flex のバッジ自身に書いても
素通りする（実測＝ズレ +0.625px のまま変化なし）。
⇒ 塊にしてから刈り込むと、数字の見た目の中心が円の中心に一致する（実測 −0.188px＝測定の刻み幅）。
⚠️ 対応していない古い端末では、これまでどおりの見え方になる（悪化はしない）。 */
.mp2-col-badge__n {
display: block;
text-box: trim-both cap alphabetic;
}
.mp2-col-name {
margin: 0;
/* 🔴【椿さん その20「コレクションの各アイテム名の表示は12px」・その23 案B】 */
font: 400 12px/1.35 var(--mp2-introfont, var(--font-body)); color: var(--text); text-align: center;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* --- 空（初回）----------------------------------------------------------- */
.mp2-col-empty { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 24px 20px; text-align: center; }
.mp2-col-empty__mark {
width: 92px; height: 92px; display: grid; place-items: center;
border: 3px dashed var(--col-ac); border-radius: 20px;
background: var(--tint); color: var(--col-ac);
}
.mp2-col-empty h3 { margin: 0; font: 900 20px/1.2 var(--font-body); }
/* 🔴【WO-132】text-wrap: pretty を外した＝両端をそろえる本文は、行をいっぱいまで詰める（確認用ページ第6版の見本と同じ組み方）。 */
.mp2-col-empty p { margin: 0; max-width: 300px; font: 400 var(--fs-note)/1.7 var(--font-body); color: var(--text-dim); }
.mp2-col-empty ol { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 320px; text-align: start; }
.mp2-col-empty li { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--hair); font: 400 var(--fs-note)/1.4 var(--font-body); }
.mp2-col-empty li > b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tint); font: 700 var(--fs-mini)/1 var(--font-body); }
.mp2-col-empty li:first-child > b { background: var(--col-ac-fill); color: var(--col-on-ac); }
.mp2-col-empty li > small { margin-inline-start: auto; font: 400 var(--fs-mini)/1 var(--font-body); color: var(--text-dim); white-space: nowrap; }
/* --- アイテムのシート（B-8・モック collection-sheet-edit.html/-add.html/-lifted.html）------- */
/* 見出し行＝題＋×＋✓。「持ち上げた形」のときだけ左に64pxの丸写真が並び、下に罫が出る
（JS 側は B-10 が配線＝lifted-thumb.hidden / headrow--lifted を切り替える）。 */
.mp2-col-item-sheet__headrow { display: flex; align-items: center; gap: 10px; flex: none; padding-bottom: 10px; border-bottom: 1px solid transparent; }
.mp2-col-item-sheet__headrow--lifted { border-bottom-color: var(--hair); }
.mp2-col-item-sheet__lifted-thumb { width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--hair); background: var(--canvas); }
.mp2-col-item-sheet__lifted-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp2-col-item-sheet__title { flex: 1; min-width: 0; font-size: var(--fs-sub); font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp2-col-item-sheet__save {
height: var(--tap); padding: 0 20px; flex: none;
border: 0; border-radius: var(--r-pill);
background: var(--col-ac-fill); color: var(--col-on-ac);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* 200pxの丸写真を中央に。持ち上げていないときだけ出す（B-10が hidden を切り替える）。 */
.mp2-col-item-sheet__photo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mp2-col-item-sheet__pic {
width: 204px; height: 204px; flex: none; position: relative; overflow: hidden;
display: grid; place-items: center;
border: 1px solid var(--hair); border-radius: 50%;
background: var(--canvas); color: var(--col-ac);
}
.mp2-col-item-sheet__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 写真を選ぶ前の空の枠だけに出す市松。色は --canvas から作る（16進数を写さない）。 */
.mp2-col-item-sheet__pic--empty {
border: 2px dashed var(--col-ac);
background:
conic-gradient(
color-mix(in srgb, var(--canvas) 93%, black) 0deg, color-mix(in srgb, var(--canvas) 93%, black) 25%,
color-mix(in srgb, var(--canvas) 62%, white) 0deg, color-mix(in srgb, var(--canvas) 62%, white) 50%,
color-mix(in srgb, var(--canvas) 93%, black) 0deg, color-mix(in srgb, var(--canvas) 93%, black) 75%,
color-mix(in srgb, var(--canvas) 62%, white) 0deg
) 0% 0% / 14px 14px;
}
/* 背景の透過処理中 */
.mp2-col-item-sheet__pic--busy::after {
content: ''; position: absolute; inset: 0;
background: rgba(28,27,25,.55);
}
.mp2-col-item-sheet__photo-actions { display: flex; align-items: center; gap: 10px; }
.mp2-col-item-sheet__pick-btn {
width: 48px; height: 48px; flex: none;
border-radius: 50%; border: 1.5px solid var(--hair);
background: var(--canvas); color: var(--text);
display: grid; place-items: center; cursor: pointer;
}
.mp2-col-item-sheet__bg-toggle {
display: flex; align-items: center; gap: 8px;
height: 48px; padding: 0 14px;
border-radius: var(--r-pill); background: var(--canvas); border: 1px solid var(--hair);
}
.mp2-col-item-sheet__bg-toggle svg { flex: none; opacity: .7; }
/* 名前欄。⚠️ 高さ・地の色はモックの実測値（2026-09-12・collection-sheet-add.html＝54px /
地は画面の地色 #F1EFEA）。シートの地が白なので、欄は地色で沈ませるのがモックの作り
（逆に「自分だけ」の箱は地色なので、その中の欄は白＝つねに面と反対側にする）。 */
.mp2-col-item-sheet__name { height: 54px; background: var(--canvas); font-size: var(--fs-body); font-weight: 700; }
/* ページ／カテゴリのピッカー＝ラベル無し・48pxの欄・左にアイコン・右に山形。
中の