/* Give → Get ── 「あなたが出すもの → 見られるもの」の3段と、その説明の板。
★もとは my-value.css の中にあった（2026-09-15 にこの1枚へ出した）。
出した理由は1つだけ ── **この3段を出す画面が、18枚から約420枚へ増えた**。
pv-give-first.js（登録だけで止まっている会員に1回だけ出す板）が
全ページで同じ見た目を要るようになったが、my-value.css は 62KB あり、
中には .mr-main / .mp-* / #pv-value … のようにマイページ専用の規則が入っている。
あれを全ページへ配ると、関係のない画面の作りに手を入れてしまう。
⚠️ **ここに新しい規則を書き足す前に、置き場所を考える。**
マイページだけのものは my-value.css に残す。この1枚に入れてよいのは
「3段の表」と「その板」だけ。
⚠️ 色は1つも直に書かない。全部 pv-tokens.css の --pv-* から取る
（出る画面がライトとダークの両方にまたがるため）。
読む側は3つ ── my-value.css を読む18枚（この直前に で並べてある）と、
actual-pay.js のロック画面、pv-give-first.js（要るときだけ動的に足す）。 */
/* ── Give → Get の説明パネル ────────────────────────────────
★覆いではない。position:fixed も aria-modal も使わない。
.mr-main の先頭に差し込むだけなので、下のページは見えたまま・
スクロールも止まらない。閉じ方は × ／ 外を押す ／ ESC の3つ。 */
.mr-gate{position:relative;margin:0 0 var(--pv-s-3);padding:20px 22px 22px;
background:var(--pv-surface);border:1px solid var(--pv-line);
border-left:3px solid var(--pv-orange);border-radius:var(--pv-r);
box-shadow:var(--pv-shadow-lift)}
.mr-gate:focus{outline:none}
.mr-gate:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.mr-gate-x{position:absolute;top:10px;right:10px;display:flex;align-items:center;
justify-content:center;width:30px;height:30px;border:0;border-radius:999px;
background:none;color:var(--pv-ink-3);cursor:pointer;
transition:background-color .18s var(--pv-ease),color .18s var(--pv-ease)}
.mr-gate-x:hover{background:var(--pv-line-soft);color:var(--pv-ink)}
.mr-gate-x:focus-visible{outline:2px solid var(--pv-orange);outline-offset:2px}
.mr-gate-x:active{transform:scale(.94)}
.mr-gate-t{padding-right:34px;font-size:1rem;font-weight:800;letter-spacing:-.02em;
line-height:1.4;color:var(--pv-ink)}
.mr-gate-s{margin-top:8px;font-size:.81rem;line-height:1.75;color:var(--pv-ink-2);max-width:62ch}
.mr-gate-cta{display:inline-flex;align-items:center;margin-top:18px;padding:11px 20px;
border-radius:999px;background:var(--pv-orange);color:#fff;
text-decoration:none;font-size:.83rem;font-weight:700;
box-shadow:0 8px 20px -12px rgba(249,115,22,.9);
transition:opacity .18s var(--pv-ease),box-shadow .18s var(--pv-ease),
transform .18s var(--pv-ease)}
.mr-gate-cta:hover{opacity:.92;box-shadow:0 10px 24px -12px rgba(249,115,22,.85)}
.mr-gate-cta:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.mr-gate-cta:active{transform:scale(.98)}
/* ── DEEP PAY の進み具合（パネルの中だけ）────────────────────
★条件は2つで、別々に書く（100人 ／ 本人の内訳）。混ぜると
「100人そろえば誰でも見られる」とも読めてしまう。
★数はサーバから来たときだけ描く。0 を置いて埋めない。 */
.mr-gate-goal{display:flex;align-items:baseline;gap:10px;margin-top:18px;
padding:14px 16px;border-radius:var(--pv-r-sm);
background:var(--pv-orange-soft)}
.mr-gate-goal-k{font-size:.68rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--pv-orange-ink)}
.mr-gate-goal-n{margin-left:auto;font-size:1.45rem;font-weight:800;
letter-spacing:-.03em;line-height:1;color:var(--pv-ink);
font-variant-numeric:tabular-nums}
.mr-gate-goal-u{font-size:.64rem;font-weight:700;letter-spacing:.08em;
color:var(--pv-ink-3)}
.mr-gate-left{margin-top:10px;font-size:.79rem;line-height:1.7;color:var(--pv-ink-2)}
/* 済んでいる人には緑（積み上がるもの・信頼）。先に出した人が損に見えないための1行。 */
.mr-gate-ok{display:inline-flex;align-items:center;margin-top:10px;padding:6px 12px;
border-radius:999px;background:var(--pv-green-soft);
border:1px solid var(--pv-green-line);
font-size:.76rem;font-weight:700;color:var(--pv-green-ink)}
.mr-gate-need{margin-top:10px;font-size:.79rem;line-height:1.7;color:var(--pv-ink-2)}
/* 招待は二番手の押しどころ（枠だけ）。橙の実塗りは1画面に1つに保つ。 */
.mr-gate-inv{display:inline-flex;align-items:center;margin-top:12px;margin-left:10px;
padding:10px 18px;border-radius:999px;background:none;
border:1px solid var(--pv-line);color:var(--pv-ink-2);
text-decoration:none;font-size:.8rem;font-weight:700;
transition:border-color .18s var(--pv-ease),color .18s var(--pv-ease),
transform .18s var(--pv-ease)}
.mr-gate-inv:hover{border-color:var(--pv-orange);color:var(--pv-orange-ink)}
.mr-gate-inv:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
.mr-gate-inv:active{transform:scale(.98)}
/* 「あと何人」の段だけ、札を数字として読ませる（準備中のグレーより一段はっきり） */
.pv-give-r.is-goal .pv-give-p{background:var(--pv-orange-soft);color:var(--pv-orange-ink);
font-variant-numeric:tabular-nums}
/* Give → Get の3段。ロック画面（actual-pay.js）とパネルで同じ部品を使う。 */
/* ★列は**見出しも含めた4段全部で共有する**。見出しだけ別の grid にすると、
「見られるもの」の上に来るのが REAL PAY ではなく札になる（実際にそうなっていた）。
だから列を持つのは .pv-give ひとつだけで、見出しと ul は subgrid で借りる。
★幅を測って止める。1fr のまま伸ばすと REAL PAY と札のあいだが本文の倍くらい空いて、
どの札がどの段のものか読み取りにくくなる。 */
.pv-give{margin-top:18px;max-width:620px;display:grid;
grid-template-columns:max-content 28px max-content minmax(0,1fr)}
.pv-give-hd{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
.pv-give-hd>*{padding:0 0 7px;font-size:.66rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--pv-ink-3)}
.pv-give-hd>:first-child{padding-left:2px}
/* 「見られるもの」は札の上ではなく、REAL PAY / DEEP PAY の上に立たせる。 */
.pv-give-hd>:last-child{grid-column:3/-1}
/* ★列は**3段で共有する**。1段ずつ別の grid にすると、
REAL PAY / DEEP PAY / VERIFIED PAY の文字幅と札の幅が段ごとに違うぶん
→ の位置が段ごとにずれる（実際にずれていた）。
だから grid は ul の側に置き、li は display:contents で消す。 */
/* ★列の隙間（column-gap）を作らない。作ると罫線がそこで切れて、
1本の線が3つに割れて見える。あいだは cell の padding で空ける。
★「出すもの → 見られるもの」は左に寄せて隣どうしにする。
出すものを 1fr にすると → が遠くへ飛んで、矢印が何を指しているのか読めない。 */
/* ★段に align-items:center を書かない。中央に寄せると背の低い升だけ上へ持ち上がり、
その升の罫線だけ数 px 上にずれる＝1本の線が矢印のところで切れて見える（実際にそうなっていた）。
升は伸ばしたまま（既定の stretch）にして、**升の中で**中央に寄せる。 */
.pv-give-l{display:grid;grid-column:1/-1;grid-template-columns:subgrid;column-gap:0;
list-style:none;margin:0;padding:0;border-top:1px solid var(--pv-line-soft)}
.pv-give-r{display:contents}
.pv-give-r>*{display:flex;align-items:center;
padding-block:11px;border-bottom:1px solid var(--pv-line-soft);font-size:.8rem}
.pv-give-g{color:var(--pv-ink-2);line-height:1.5;padding-left:2px}
/* ★opacity で薄くしない。opacity は**罫線ごと**薄くするので、この列だけ線が抜けて見える。
薄くするのは文字色だけにする。 */
.pv-give-ar{color:var(--pv-line);justify-content:center}
.pv-give-t{font-weight:800;letter-spacing:-.01em;color:var(--pv-ink-3)}
/* 札の高さは札で決める（行の上下余白と混ぜると、丸い札が縦に伸びる）。 */
.pv-give-s{justify-content:flex-end;padding-right:2px}
.pv-give-p{font-size:.7rem;font-weight:700;white-space:nowrap;
padding:3px 9px;border-radius:999px;
background:var(--pv-line-soft);color:var(--pv-ink-3)}
/* いま開く段だけが色を持つ。「準備中」を色で強調しない（開くと読める）。 */
.pv-give-r.is-live .pv-give-t{color:var(--pv-ink)}
.pv-give-r.is-live .pv-give-p{background:var(--pv-orange-soft);color:var(--pv-orange-ink)}
/* **DEEP PAY の札だけ**が押せる（2026-09-06 オーナー確定）── 押すと解放条件の説明が開く。
★もとは左メニューの DEEP PAY / VERIFIED PAY が入口だった。ナビを7項目へ畳んだ回に
その2段を撤去したので、DEEP PAY の説明への道だけをここへ移した。
⚠️ VERIFIED PAY の札は のまま＝この規則が当たらない。
本人確認の機能が出来るまで、押せる導線も目立たせる見た目も作らない。
★色は足さない。「準備中」を色で強調しないという上の決めごとを崩さない。
押せることは、指の形と輪郭と押し込みだけで伝える。 */
button.pv-give-p{appearance:none;-webkit-appearance:none;font:inherit;font-size:.7rem;
font-weight:700;cursor:pointer;
/* ★罫線のぶん札が太らないよう padding を1px ずつ引く
（このリポジトリは box-sizing を指定していない）。 */
padding:2px 8px;border:1px solid transparent;
transition:border-color .18s var(--pv-ease),color .18s var(--pv-ease),
transform .18s var(--pv-ease)}
button.pv-give-p:hover{border-color:var(--pv-line);color:var(--pv-ink-2)}
button.pv-give-p:focus-visible{outline:2px solid var(--pv-orange);outline-offset:3px}
button.pv-give-p:active{transform:scale(.96)}
@media (max-width:520px){
/* 狭いところでは3段を横に並べきれない。1段ずつの grid に戻して
「出すもの」の下に「見られるもの」を置く（→ は消す）。 */
.pv-give{display:block;max-width:none}
.pv-give-hd{display:flex;justify-content:space-between;gap:12px;padding:0 0 7px}
.pv-give-hd>*{padding:0}
.pv-give-l{display:block}
.pv-give-r{display:grid;grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:'g s' 't s';row-gap:2px;column-gap:10px;
padding:11px 2px;border-bottom:1px solid var(--pv-line-soft)}
.pv-give-r>*{padding-block:0;border-bottom:0}
.pv-give-g{grid-area:g;padding-left:0}
.pv-give-t{grid-area:t}
.pv-give-s{grid-area:s;align-self:center;padding-right:0}
.pv-give-ar{display:none}
}
@media (prefers-reduced-motion:reduce){
.mr-gate-x,.mr-gate-cta,.mr-gate-inv{transition:none}
.mr-gate-x:active,.mr-gate-cta:active,.mr-gate-inv:active{transform:none}
}