/*
 * ピラー（/products/{slug}/）のスタイル — C コマース案（2026-07-18・ユーザー確定）。
 *
 * 方向: 黒 × ティファニー（怪獣8号）。三越伊勢丹インスパイアの editorial 見出し
 *   （小さな eyebrow ＋ シンプルな大見出し）、スリムな「条件からさがす」バー→パネル
 *   （PCアコーディオン / モバイルはボトムシート）、全商品連動＋ページネーション、
 *   商品は横スクロール1段の帯（PC/モバイル共通。帯末尾の「＞」で次の20件をその場に継ぎ足す。
 *   この下に「サイト別のカード」等のセクションを段として積む前提のレイアウト）。
 *
 * テーマの gift-media.css が土台（.gm-main / .gm-header / .gm-breadcrumb / .gm-btns /
 * EC購入ボタン memoco_ec_button）を敷く。ここはピラー固有の差分だけを持ち、購入ボタンは
 * テーマの色（Amazon橙・楽天赤・Yahoo桃）をそのまま使う（再定義しない）。
 * 読み込みは mu-plugins/memoco-pillar.php が is_singular('memoco_pillar') のときだけ enqueue。
 *
 * ★色は .gm-pillar スコープの局所トークンで持つ（テーマの --gm-* を上書きしない）。
 *   サイトはライト単一テーマなので dark は作らない（実サイトに合わせる）。
 */

.gm-pillar{
	--tf:var(--gm-tiff,#0ABAB5);   /* 差し色 */
	--tf-deep:#067E7A;              /* 白地で可読な濃ティファニー */
	--tf-wash:#E6F7F6;
	--ink:#0B0B0C;                 /* 墨黒（構造） */
	--paper:#FBFBF9;
	--card:#fff;
	--line:rgba(11,11,12,.12);
	--line-soft:rgba(11,11,12,.07);
	--slate:#5f6a69;
	--slate-2:#8b9594;
	--shadow:0 1px 2px rgba(11,11,12,.05);
	--shadow-lift:0 18px 40px -20px rgba(6,126,122,.45);
	--r:8px;
	--font-latin:"Helvetica Neue","Helvetica","Arial",sans-serif;
}

/* ============================================================ フルワイド

   テーマの .gm-main は記事の可読幅（960px）。ピラーはEC的な一覧なので、
   コンテナをフルワイド（最大1360px）へ広げる（2026-07-18 ユーザー指示）。
   ★.gm-main.gm-pillar（0,2,0）で書く＝テーマの .gm-main（0,1,0）に読み込み順に
   依らず勝つ（enqueue の順序が変わっても崩れない）。 */
.gm-main.gm-pillar{max-width:1360px;padding-left:28px;padding-right:28px}
@media (max-width:600px){
	.gm-main.gm-pillar{padding-left:16px;padding-right:16px}
}

/* 背景は薄いグレー・カードは白・枠線なし（2026-07-18 ユーザー指示）。
   グレーはティファニーへ僅かに寄せた無彩色（真のグレーは「未調整」に見えるため）。
   面の分離は枠線ではなく、白面＋やわらかい影で行う。 */
body.gm-pillar-page{background:#F2F4F4}

/* ============================================================ ヒーロー */
.gm-pillar .mc-hero{padding:22px 0 26px;position:relative}
.gm-pillar .mc-eyebrow{
	display:inline-block;font-family:var(--font-latin);letter-spacing:.28em;font-size:11.5px;
	font-weight:700;color:var(--tf-deep);text-transform:uppercase}
/* ★H1は改行させない（PC・モバイル共通。2026-07-18 ユーザー指示）。
   文字数（--mc-h1-len。テンプレが inline で渡す）から「1行で収まる最大サイズ」を計算する。
   CJKは1文字≒フォントサイズなので (画面幅 − 余白) ÷ 文字数 がそのまま上限になる。 */
.gm-pillar .mc-h1{
	font-size:clamp(18px, calc((100vw - 44px) / var(--mc-h1-len, 14)), 50px);
	line-height:1.14;font-weight:800;letter-spacing:.01em;
	margin:12px 0 0;color:var(--ink);white-space:nowrap}
.gm-pillar .mc-lede{
	margin:16px 0 0;max-width:62ch;color:var(--slate);font-size:15px;line-height:1.9}
.gm-pillar .mc-lede p{margin:0 0 .4em}
.gm-pillar .mc-meta{
	display:flex;gap:20px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--slate);
	align-items:baseline}
.gm-pillar .mc-meta .m{display:flex;align-items:baseline;gap:3px}
.gm-pillar .mc-meta b{
	color:var(--ink);font-size:19px;font-variant-numeric:tabular-nums;font-weight:800}
.gm-pillar .mc-meta__upd{color:var(--slate-2)}
.gm-pillar .mc-promo{margin:14px 0 0;font-size:11px;color:var(--slate-2)}

/* ============================================================ 条件からさがす（バー＋パネル）

   進化的強化: JS が無ければパネル（.mc-facets）は普通のセクションとして見える（道案内が
   Google と no-JS ユーザーに届く）。html.js のときだけ、スリムバー(.mc-filterbar)を出し、
   パネルを折り畳む（PC=アコーディオン / モバイル=ボトムシート）。 */

.gm-pillar .mc-filterbar{display:none}   /* no-js では出さない（パネルが常時見えるため） */
.gm-pillar .mc-facets__head,
.gm-pillar .mc-facets__x{display:none}   /* no-js ではヘッダ/×は不要 */
.gm-pillar .mc-sheet-bg{display:none}

html.js .gm-pillar .mc-filterbar{
	display:flex;align-items:center;position:sticky;top:8px;z-index:30;margin:6px 0 0;
	background:var(--card);border:none;border-radius:999px;overflow:hidden;
	box-shadow:0 1px 3px rgba(11,11,12,.08)}
/* バー全体が1つのボタン＝どこを押しても展開（2026-07-18 ユーザー指示） */
.gm-pillar .mc-filterbar__btn{
	appearance:none;border:none;background:none;cursor:pointer;font-family:inherit;
	font-weight:700;font-size:13.5px;color:var(--ink);padding:11px 18px;display:flex;
	gap:8px;align-items:center;width:100%;text-align:left}
.gm-pillar .mc-filterbar__btn:hover{color:var(--tf-deep)}
.gm-pillar .mc-filterbar__ic{color:var(--tf-deep);font-size:15px}
.gm-pillar .mc-filterbar__count{
	margin-left:auto;color:var(--slate-2);font-size:12.5px;font-weight:600;
	font-variant-numeric:tabular-nums}

/* パネル本体（no-js＝普通のカード。js＝折り畳み）。枠線なし・白面＋影 */
.gm-pillar .mc-facets{
	background:var(--card);border:none;border-radius:var(--r);
	margin:14px 0 0;padding:16px 18px;box-shadow:0 1px 3px rgba(11,11,12,.06)}
html.js .gm-pillar .mc-facets{
	margin-top:10px;overflow:hidden;max-height:0;opacity:0;padding:0 18px;box-shadow:none;
	transition:max-height .32s cubic-bezier(.22,1,.36,1),opacity .22s ease,padding .32s ease}
html.js body.mc-filter-open .gm-pillar .mc-facets{max-height:640px;opacity:1;padding:4px 18px 14px;
	box-shadow:0 1px 3px rgba(11,11,12,.06)}
html.js .gm-pillar .mc-facets__head{
	display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px;
	border-bottom:1px solid var(--line-soft);margin-bottom:4px}
html.js .gm-pillar .mc-facets__head b{font-size:14px;font-weight:800;color:var(--ink)}
html.js .gm-pillar .mc-facets__x{
	display:block;appearance:none;border:none;background:none;font-size:20px;line-height:1;
	color:var(--slate);cursor:pointer;padding:2px 6px}

.gm-pillar .mc-axis{display:flex;gap:14px;align-items:flex-start;padding:6px 0}
.gm-pillar .mc-axis__name{
	min-width:78px;flex:none;font-size:12.5px;font-weight:700;color:var(--slate);
	letter-spacing:.06em;margin:0;padding-top:7px;line-height:1.5}
.gm-pillar .mc-chips{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.gm-pillar .mc-chip{
	display:inline-flex;gap:7px;align-items:center;font-size:13px;padding:7px 14px;
	border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);
	transition:.18s;white-space:nowrap}
.gm-pillar .mc-chip:hover{
	border-color:var(--tf);color:var(--tf-deep);transform:translateY(-1px)}
.gm-pillar .mc-chip__count{
	color:var(--slate-2);font-size:11.5px;font-variant-numeric:tabular-nums}
/* 選択中のチップ（商品絞り込み中）。もう一度押すと解除（href が素のURLに変わる） */
.gm-pillar .mc-chip.is-on{background:var(--tf-deep);border-color:var(--tf-deep);color:#fff}
.gm-pillar .mc-chip.is-on .mc-chip__count{color:rgba(255,255,255,.75)}
.gm-pillar .mc-chip.is-on::after{content:"×";margin-left:2px;font-size:12px;opacity:.85}

/* ============================================================ 絞り込みバー */
.gm-pillar .mc-fbar{
	display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:16px 0 0;
	background:var(--tf-wash);border:1px solid var(--tf);border-radius:var(--r);
	padding:10px 16px;font-size:13px}
.gm-pillar .mc-fbar__label b{color:var(--tf-deep)}
.gm-pillar .mc-fbar__count{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.gm-pillar .mc-fbar__article{font-weight:700;color:var(--tf-deep)}
.gm-pillar .mc-fbar__article:hover{color:var(--ink)}
.gm-pillar .mc-fbar__clear{margin-left:auto;font-weight:700;color:var(--slate);
	border:1px solid var(--line);border-radius:999px;padding:4px 12px;transition:.15s}
.gm-pillar .mc-fbar__clear:hover{border-color:var(--tf);color:var(--tf-deep)}
.gm-pillar .mc-fbar__empty{margin:22px 0 40px;color:var(--slate);font-size:14px}

/* ============================================================ 特集記事から探す（道案内）

   記事カード風（サムネ＋タイトル。テーマの一覧カードと同じ材料）。軸ごとに
   横スクロールの帯＝棚と同じ設計言語。ラベル（条件）はカードの肩にティファニーで。 */
.gm-pillar .mc-guide{margin:44px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.gm-pillar .mc-gaxis{margin:18px 0 0}
.gm-pillar .mc-gaxis .mc-axis__name{padding-top:0;margin-bottom:10px}
.gm-pillar .mc-gcards{
	list-style:none;margin:0;padding:4px 2px 10px;display:grid;
	grid-auto-flow:column;grid-auto-columns:240px;gap:14px;overflow-x:auto;
	-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;
	-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);
	mask-image:linear-gradient(90deg,#000 96%,transparent)}
.gm-pillar .mc-gcards > li{scroll-snap-align:start;min-width:0}
.gm-pillar .mc-gcard{
	display:flex;flex-direction:column;gap:4px;height:100%;background:var(--card);
	border-radius:var(--r);padding:8px;box-shadow:0 1px 3px rgba(11,11,12,.06);
	text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.gm-pillar .mc-gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.gm-pillar .mc-gcard__media{
	display:block;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--tf-wash)}
.gm-pillar .mc-gcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.gm-pillar .mc-gcard__label{
	margin-top:6px;font-size:11px;font-weight:700;color:var(--tf-deep);letter-spacing:.04em;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-pillar .mc-gcard__title{
	font-size:13px;font-weight:700;line-height:1.55;color:var(--ink);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	min-height:2.6em}
.gm-pillar .mc-gcard__n{font-size:11px;color:var(--slate-2)}
@media (max-width:600px){
	.gm-pillar .mc-gcards{grid-auto-columns:66vw}
}
.gm-pillar .mc-facets__foot{margin-top:10px}
.gm-pillar .mc-facets__all{
	display:inline-flex;font-size:13px;font-weight:700;color:var(--tf-deep);padding:2px 0}
.gm-pillar .mc-facets__all:hover{color:var(--ink)}

/* ============================================================ セクション見出し */
.gm-pillar .mc-sec-head{margin:28px 0 20px}
.gm-pillar .mc-sec-head__k{
	display:block;font-family:var(--font-latin);letter-spacing:.26em;font-size:11px;
	font-weight:700;color:var(--tf-deep);text-transform:uppercase;margin:0 0 6px}
.gm-pillar .mc-sec-head__t{
	font-size:clamp(19px,2.4vw,26px);font-weight:800;letter-spacing:.02em;color:var(--ink);
	margin:0;line-height:1.3}
.gm-pillar .mc-sec-head__note{
	display:block;margin:8px 0 0;font-size:12.5px;color:var(--slate-2)}

/* ============================================================ 商品の帯（横スクロール1段）

   ★グリッドではなく横スクロールの帯（2026-07-18 ユーザー決定）。理由: この下に
   「サイト別のカード」等のセクションを段として積んでいくレイアウトにするため。
   記事下の関連記事（横スクロール10件×2段）と同じ設計言語。
   帯の末尾の「＞」カード（.mc-next）で次の20件をその場に継ぎ足す。 */
.gm-pillar .mc-shelf__grid{
	list-style:none;margin:0;padding:4px 2px 10px;display:grid;
	grid-auto-flow:column;grid-template-rows:auto;grid-auto-columns:238px;
	gap:16px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;scrollbar-width:thin;
	/* 右端をうっすら霞ませ「まだ続く」を示す */
	-webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);
	mask-image:linear-gradient(90deg,#000 96%,transparent)}
.gm-pillar .mc-shelf__grid > li{scroll-snap-align:start;min-width:0}

/* 「＞」カード＝次の20件をその場で継ぎ足す（JS無しならただの次ページリンク） */
.gm-pillar .mc-next{display:grid}
.gm-pillar .mc-next__btn{
	display:grid;place-items:center;align-content:center;gap:6px;width:120px;height:100%;
	background:var(--ink);color:#fff;border-radius:var(--r);text-decoration:none;
	font-weight:800;font-size:13.5px;text-align:center;padding:18px 10px;transition:.2s}
.gm-pillar .mc-next__btn:hover{background:var(--tf-deep)}
.gm-pillar .mc-next__ar{font-size:30px;line-height:1;color:var(--tf)}
.gm-pillar .mc-next__btn.is-busy{opacity:.5;pointer-events:none}
/* カードは白・枠線なし（グレー地に白面＋影で分離。2026-07-18 ユーザー指示）。
   ★min-width:0 必須: グリッドアイテムの既定は min-width:auto で、nowrap の説明文が
   カードの最小幅を押し広げ、モバイルで画面外まで伸びる（実際に崩れた）。 */
.gm-pillar .mc-p{
	background:var(--card);border:none;border-radius:var(--r);padding:10px;min-width:0;
	box-shadow:0 1px 3px rgba(11,11,12,.06);display:flex;flex-direction:column;cursor:pointer;
	transition:transform .25s ease,box-shadow .25s ease}
.gm-pillar .mc-p:hover{
	transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.gm-pillar .mc-p__media{
	position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--tf-wash)}
.gm-pillar .mc-p__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gm-pillar .mc-p__noimg{position:absolute;inset:0;background:
	linear-gradient(135deg,var(--tf-wash),#eef3f2)}
/* 画像に重ねるバッジは廃止（「編集部がN回選出」は本文の「N本の記事で選定」と重複。2026-07-18） */
.gm-pillar .mc-p__body{padding:12px 2px 2px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.gm-pillar .mc-p__votes{
	margin:0;font-size:11px;color:var(--slate-2);font-weight:600}
.gm-pillar .mc-p__votes b{color:var(--tf-deep);font-variant-numeric:tabular-nums}
/* ★カードの高さを揃える（2026-07-18 ユーザー指摘「内容次第でガタガタ」→「改行しないで」）:
   ブランド・商品名・本文とも**1行（改行なし・…省略）**。PC・モバイル共通。
   全文はカードクリックの詳細（.mc-psheet）で読む。DOMには全文がある＝SEOはそのまま。 */
.gm-pillar .mc-p__brand{
	margin:0;font-size:11px;letter-spacing:.1em;color:var(--slate-2);text-transform:uppercase;font-weight:700;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.5em}
.gm-pillar .mc-p__name{
	margin:0;font-size:14px;font-weight:700;line-height:1.5;color:var(--ink);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 紹介文は3行見せる（2026-07-18 ユーザー指示「記事リンクはポップアップでよいので
   その分initial表示を長く」）。min-height で無い商品も枠を保ち高さを揃える。 */
.gm-pillar .mc-p__desc{
	margin:4px 0 0;font-size:12px;color:var(--slate);line-height:1.65;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	min-height:4.95em}
/* 購入ボタン枠。ボタンそのものの色はテーマ（memoco_ec_button）。ここは並びだけ整える。 */
.gm-pillar .mc-p__buy{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.gm-pillar .mc-p__buy .gm-btn{flex:1 1 auto;min-width:0;font-size:11.5px}
/* ★登場記事リンクはカードの初期表示に出さない（2026-07-18 ユーザー指示
   「記事リンクはポップアップ表示でよい」）。その分、紹介文を3行見せる。
   DOMには残る＝クローラは読む・詳細シートは clone して表示する。 */
.gm-pillar .mc-p__articles{
	list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px dashed var(--line-soft);
	display:none;flex-direction:column;gap:2px}
.gm-pillar .mc-p__articles a{
	display:block;font-size:11.5px;color:var(--slate);transition:.15s;line-height:1.7;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-pillar .mc-p__articles a:hover{color:var(--tf-deep)}
.gm-pillar .mc-p__ar{color:var(--tf);margin-right:5px}

/* ============================================================ モバイル

   ★商品の帯はモバイルも横スクロール2段（PCと同じ）。カードは幅170pxのコンパクト縦型で、
     紹介文・登場記事は出さない（タップの詳細シートで読む。DOMには残る＝クロール維持）。
   ★「条件からさがす」パネルは下から出るボトムシート（js のときだけ）。 */
@media (max-width:600px){
	/* 1.2枚見え＝1枚＋次の覗き（横スクロールだと分かる幅。ユーザー指定） */
	.gm-pillar .mc-shelf__grid{grid-auto-columns:min(78vw,320px);gap:12px}
	.gm-pillar .mc-p__articles{display:none}  /* 帯では省く（詳細シートで見せる） */
	.gm-pillar .mc-next__btn{width:104px;font-size:13px}

	/* 条件からさがす: モバイルはバー全幅＋ボトムシート */
	html.js .gm-pillar .mc-filterbar{top:0;margin:10px 0 2px}
	html.js .gm-pillar .mc-filterbar__count{display:none}
	html.js .gm-pillar .mc-facets{
		position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000;margin:0;max-height:82vh;
		overflow:auto;border:none;border-radius:18px 18px 0 0;transform:translateY(103%);opacity:1;
		padding:0 0 4px;box-shadow:0 -24px 60px -24px rgba(0,0,0,.45);
		transition:transform .3s cubic-bezier(.22,1,.36,1)}
	html.js body.mc-filter-open .gm-pillar .mc-facets{transform:none;max-height:82vh;padding:0 0 4px}
	html.js .gm-pillar .mc-facets__head{
		position:sticky;top:0;background:var(--card);padding:16px 18px 12px;
		border-bottom:1px solid var(--line);margin:0}
	html.js .gm-pillar .mc-axis{flex-direction:column;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
	html.js .gm-pillar .mc-facets__foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom))}
	html.js body.mc-filter-open .gm-pillar .mc-sheet-bg{
		display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:999;animation:mc-fade .2s ease}
}
@keyframes mc-fade{from{opacity:0}to{opacity:1}}

/* ============================================================ 商品詳細シート（モバイル）

   カードタップで、そのカードのDOM複製（全文・購入ボタン・登場記事）を下から出す。
   ★中身はサーバー描画済みのカードの clone＝SEO中立（後読みしない）。
   ★このブロックはファイル末尾に置く（モバイルの .mc-p__articles{display:none} 等を
     後勝ちで上書きするため。specificity ではなく順序で勝っている＝移動させないこと）。 */
.mc-psheet{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:var(--card,#fff);
	border-radius:18px 18px 0 0;max-height:84vh;overflow:auto;
	box-shadow:0 -24px 60px -24px rgba(0,0,0,.45)}
.mc-psheet[hidden]{display:none}
body.mc-psheet-open .mc-psheet{animation:mc-up .28s cubic-bezier(.22,1,.36,1)}
@keyframes mc-up{from{transform:translateY(40px);opacity:.5}}
.mc-psheet__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;
	justify-content:space-between;background:var(--card,#fff);padding:16px 18px 12px;
	border-bottom:1px solid var(--line,rgba(11,11,12,.12))}
.mc-psheet__head b{font-size:15px;font-weight:800;color:var(--ink,#0B0B0C)}
.mc-psheet__x{appearance:none;border:none;background:none;font-size:22px;line-height:1;
	color:var(--slate,#5f6a69);cursor:pointer;padding:2px 8px}
.mc-psheet__body{padding:16px 18px calc(18px + env(safe-area-inset-bottom))}
/* 複製したカード部品の、シート内での見せ方 */
.mc-psheet .mc-p__media{width:56%;max-width:230px;margin:0 auto 14px;position:relative;
	aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--tf-wash,#E6F7F6)}
.mc-psheet .mc-p__desc{display:block;-webkit-line-clamp:unset;overflow:visible;
	font-size:13.5px;line-height:1.8;min-height:0;white-space:normal;text-overflow:clip}
.mc-psheet .mc-p__name{white-space:normal;text-overflow:clip}
.mc-psheet .mc-p__articles{display:flex}   /* カード側でモバイル非表示でも、シートでは出す */
.mc-psheet .mc-p__articles li:nth-child(n+3){display:list-item} /* カード側の2本制限もシートでは解除 */
.mc-psheet .mc-p__articles a{white-space:normal;overflow:visible;text-overflow:clip}
.mc-psheet .mc-p__name{font-size:16px;display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0}
.mc-psheet .mc-p__brand{white-space:normal;min-height:0}

/* PCでは中央モーダルとして出す（モバイルはボトムシートのまま）。
   幅広・高め（2026-07-18 ユーザー指示）＋広げた幅を活かして画像左・情報右の2カラム。 */
@media (min-width:601px){
	.mc-psheet{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);
		width:min(840px,94vw);border-radius:16px;max-height:90vh}
	.mc-psheet__body{display:flex;gap:26px;align-items:flex-start;padding:22px 26px}
	.mc-psheet .mc-p__media{width:42%;max-width:320px;margin:0;flex:none}
	.mc-psheet .mc-p__body{flex:1;min-width:0;padding:0}
	body.mc-psheet-open .mc-psheet{animation:mc-pop .2s ease}
}
@keyframes mc-pop{from{transform:translate(-50%,-48%);opacity:.5}}
/* シートを開いている間の背景暗転（.mc-sheet-bg は「条件からさがす」と共用の1枚） */
body.mc-psheet-open .gm-pillar .mc-sheet-bg{
	display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:999;animation:mc-fade .2s ease}
body.mc-psheet-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
	.gm-pillar .mc-p,.gm-pillar .mc-chip,.gm-pillar .mc-next__btn,.gm-pillar .mc-facets{transition:none}
	body.mc-psheet-open .mc-psheet{animation:none}
}