/* 読み物ページ（担当 read）だけの部品。mm.css の上に重ねる。色は mm.css のトークンだけを使う。
   使うページ：about / guide / guide/sample / for-shops / support / terms / privacy / tokushoho */

/* ---- ページ内の目次（横並び） ---- */
.toc{display:flex;flex-wrap:wrap;gap:0 26px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:13px}
.toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--ink-soft)}
.toc a:hover{color:var(--ink)}
.toc i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.part{scroll-margin-top:80px}
.nb{display:inline-block}
.pagehead h1 .k{display:block;margin-bottom:.45em;font-size:.36em;letter-spacing:0;color:var(--ink-soft)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-row .small{flex-basis:100%;margin-top:2px}
.part .h3 + .lead{margin-top:10px}

/* ---- 本文の段落 ---- */
.say{max-width:40em;display:grid;gap:1.1em;color:var(--ink-soft);font-size:15.5px;line-height:2}
.say b{color:var(--ink)}

/* ---- メンモニ！の約束（about） ---- */
.vows{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:v}
.vows li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule);counter-increment:v;font-family:var(--display);font-weight:700;font-size:clamp(19px,2.4vw,30px);line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.vows li::before{content:counter(v,decimal-leading-zero);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0;color:var(--stamp)}

/* ---- 店舗側・調査員側の得（about） ---- */
.side-lead{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.8vw,36px);line-height:1.35;letter-spacing:-.03em}
.ben{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,48px);counter-reset:b}
.ben li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;padding:18px 0 20px;border-top:1px solid var(--rule);counter-increment:b;align-content:start}
.ben li::before{content:counter(b,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--mute);padding-top:4px}
.ben b{font-weight:700;font-size:15.5px;line-height:1.55}
.ben p{grid-column:2/3;font-size:14px;line-height:1.9;color:var(--ink-soft)}

/* ---- 登録の敷居（文＋登録画面の見本） ---- */
.gate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:start}
.gate .phone{margin:0}

/* ---- 順番のある手順（7ステップ・始め方） ---- */
.seven{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:s}
.seven li{display:grid;grid-template-columns:56px minmax(0,170px) minmax(0,1fr);gap:6px 16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule);counter-increment:s}
.seven li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--stamp)}
.seven b{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,22px);line-height:1.35}
.seven span{font-size:14px;line-height:1.85;color:var(--ink-soft);max-width:36em}
.seven.one li{grid-template-columns:56px minmax(0,1fr);font-size:14.5px;line-height:1.9;color:var(--ink-soft)}
.seven.one span{font-size:inherit;max-width:44em}
.seven.one b{font-family:var(--body);font-size:inherit;line-height:inherit;color:var(--ink)}
.seven a{color:var(--ink)}
.seven-n{margin-top:16px;font-size:13px;color:var(--mute)}

/* ---- 言葉の説明（about） ---- */
.gloss{margin-top:24px;border-top:1px solid var(--ink)}
.term{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:12px clamp(20px,3vw,40px);padding:28px 0 30px;border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.term h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.35;letter-spacing:-.02em}
.term h3 i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.1em;margin-bottom:8px}
.term .def{max-width:42rem;font-size:16px;line-height:1.95;font-weight:500}
.term ul{list-style:none;margin:14px 0 0;padding:0;max-width:42rem;border-top:1px solid var(--rule)}
.term li{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.85;color:var(--ink-soft)}
.term li::before{content:"";position:absolute;left:2px;top:1.3em;width:9px;height:1px;background:var(--ink)}
.term .notice{margin-top:16px;max-width:42rem}

/* ---- 使い方：流れ（本筋と補足） ---- */
.steps{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--ink)}
.steps li{display:grid;grid-template-columns:56px minmax(0,190px) minmax(0,1fr);gap:6px 16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--stamp);white-space:nowrap}
.steps b{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,21px);line-height:1.4}
.steps p{font-size:14.5px;line-height:1.9;color:var(--ink-soft);max-width:38em}
.steps li.sub{padding:12px 0 14px;background:linear-gradient(var(--rule),var(--rule)) 18px 0/1px 100% no-repeat}
.steps li.sub .n{color:var(--mute);padding-left:28px}
.steps li.sub b{font-family:var(--body);font-size:13.5px;color:var(--ink-soft)}
.steps li.sub p{font-size:13.5px}
.steps a{color:var(--ink)}

/* ---- 使い方：レベル ---- */
.lv{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,48px);margin-top:24px;align-items:start}
.lv .rows > div{grid-template-columns:minmax(0,130px) minmax(0,1fr)}
.lv .rows b{white-space:nowrap}
.pts{border-top:1px solid var(--ink)}
.pts div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.pts b{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pts .x b{color:var(--stamp)}
.rule-list .k{white-space:nowrap}

/* ---- レポートの見本（明朝の報告書） ---- */
.smpl{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.how{position:sticky;top:88px}
.how ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:h}
.how li{display:grid;grid-template-columns:28px minmax(0,1fr);padding:14px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.85;color:var(--ink-soft);counter-increment:h}
.how li::before{content:counter(h,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--mute);padding-top:2px}
.how li b{color:var(--ink)}
.how .min{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.how .min div{padding:12px 0}
.how .min div + div{padding-left:14px;border-left:1px solid var(--rule)}
.how .min b{display:block;font-family:var(--display);font-weight:700;font-size:28px;line-height:1;letter-spacing:-.02em}
.how .min b small{font-size:.45em;margin-left:2px}
.how .min span{display:block;margin-top:6px;font-size:11.5px;color:var(--mute);line-height:1.6}
.sheet .sheet-h h2{font-family:var(--mincho);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:.06em}
.sheet .q .t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px}
.sheet .q .cnt{font-family:var(--mono);font-size:11px;color:var(--ink)}
.sheet .q .cnt i{font-style:normal;color:var(--mute);margin-left:2px}
.sheet .q .a{text-wrap:pretty}
.sheet .q .a .sc{white-space:nowrap;display:inline-block;line-height:1.5}
.sheet .q.sub{padding-top:6px}
.sheet .q.sub .n{font-size:10.5px}
.qsec{margin-top:26px;padding-bottom:8px;border-bottom:1px solid var(--ink);font-family:var(--mincho);font-weight:700;font-size:15px;letter-spacing:.12em}
.sheet-h + .qsec{margin-top:18px}
.sheet .stamp{bottom:clamp(20px,3vw,34px)}
.sheet-foot{margin-top:18px;padding-right:120px;font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.7}
.reads{border-top:1px solid var(--ink)}
.reads > div{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 28px;padding:20px 0;border-bottom:1px solid var(--rule)}
.reads .k{font-weight:700;font-size:15px;line-height:1.55}
.reads .k i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mute);margin-bottom:4px}
.reads .who{font-family:var(--mono);font-size:11.5px;color:var(--mute);line-height:1.7}
.reads p{margin-top:6px;font-size:14.5px;line-height:1.9;color:var(--ink-soft);max-width:40em}

/* ---- 掲載をお考えの店舗へ：夜の面 ---- */
.night.sec{padding-block:clamp(56px,8vw,112px)}
.blind{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start}
.blind-h{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.4;letter-spacing:-.02em}
.blind ol{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--night-fg);counter-reset:b}
.blind li{display:grid;grid-template-columns:34px minmax(0,1fr);padding:15px 0;border-bottom:1px solid var(--night-rule);font-size:14px;line-height:1.9;color:var(--night-mute);counter-increment:b}
.blind li::before{content:counter(b,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--night-mute);padding-top:3px}
.blind li b{color:var(--night-fg);font-weight:700}
.quote{border-left:3px solid var(--night-fg);padding:4px 0 4px 22px}
.quote p{font-family:var(--mincho);font-weight:700;font-size:clamp(21px,2.3vw,30px);line-height:1.65;letter-spacing:.02em;color:var(--night-fg)}
.vows3{margin-top:30px;border-top:1px solid var(--night-rule)}
.vows3 div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--night-rule);font-size:13.5px;color:var(--night-mute)}
.vows3 b{font-weight:700;color:var(--night-fg)}

/* ---- 掲載をお考えの店舗へ：本文 ---- */
.how2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:start}
.how2 .phone{position:sticky;top:88px;margin:0}
.says{border-top:1px solid var(--ink)}
.says > div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.says .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.says .v{font-size:14.5px;line-height:1.9;color:var(--ink-soft);max-width:42em}
.says .v > b:first-child{display:block;margin-bottom:4px;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.rows .v a,.says .v a{color:var(--ink)}
/* 料金の暦（本番の例：9月に掲載） */
.cal{margin-top:6px}
.cal-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.cal-row > div{position:relative;padding:12px 12px 14px;border-right:1px solid var(--rule);min-width:0}
.cal-row > div:last-child{border-right:0}
.cal .m{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.cal .st{display:block;margin-top:6px;font-family:var(--display);font-weight:700;font-size:clamp(18px,1.8vw,24px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.cal .st small{font-size:.5em;margin-left:2px}
.cal .s{display:block;margin-top:6px;font-size:12px;color:var(--mute);line-height:1.6;min-height:1.6em}
.cal .bar{position:relative;height:8px;margin-top:12px;border-radius:2px;border:1px dashed var(--ink-soft)}
.cal .pay .bar{background:var(--ink);border:1px solid var(--ink)}
.cal .pin{position:absolute;left:83%;top:-7px;height:20px;width:2px;background:var(--stamp)}
.cal .pin::before{content:"25";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-style:normal;font-size:10px;color:var(--stamp)}
.cal .due{color:var(--stamp)}
.fee .rows{margin-top:26px}
/* ウィジェットとバナー */
.wgp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.wgp .themes button{border-color:var(--rule)}
.wgp .themes button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.wgp .themes-l{color:var(--mute)}
.states{border-top:1px solid var(--ink)}
.states > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.states p{font-size:14px;line-height:1.85;color:var(--ink-soft)}
.states p b{display:block;color:var(--ink);font-size:14.5px}
/* よその色：お店のHPに貼った見本（店のHPの色なのでトークンではなく固定） */
.badge{width:92px;aspect-ratio:1;max-width:100%;border-radius:50%;background:#FFFFFF;color:#2C2C2C;border:2px solid #B9975B;display:grid;place-items:center;text-align:center;line-height:1.25;box-shadow:0 8px 18px -10px rgba(0,0,0,.45)}
.badge small{display:block;font-size:7.5px;letter-spacing:.08em;opacity:.7}
.badge b{display:block;font-size:8.5px;color:#B9975B}
.badge strong{display:block;font-family:var(--display);font-weight:700;font-size:13px}
.badge em{display:block;font-style:normal;font-size:7.5px;opacity:.8}
.bn-row{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bn-row img{display:block;width:200px;height:40px;max-width:100%;border:1px solid var(--rule)}
.bn-row .mono{font-size:11px;color:var(--mute)}
.watch{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.watch li{padding:12px 14px 4px 0;min-width:0}
.watch li + li{padding-left:14px;border-left:1px solid var(--rule)}
.watch .d{display:block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.02em}
.watch .d small{font-size:.45em;margin-left:2px}
.watch li:nth-child(2) .d{color:var(--stamp)}
.watch span{display:block;margin-top:8px;font-size:12.5px;color:var(--mute);line-height:1.7}
.watch span.d{margin-top:0;color:var(--ink)}
.watch li:nth-child(2) span.d{color:var(--stamp)}
/* 代理店の方へ */
.talk{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:t}
.talk li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--rule);counter-increment:t}
.talk li::before{content:counter(t);font-family:var(--mono);font-size:12px;color:var(--mute);padding-top:2px}
.talk b{font-weight:700;font-size:15.5px;line-height:1.6}
.talk p{grid-column:2/3;font-size:14px;line-height:1.85;color:var(--ink-soft)}
.talk a{color:var(--ink)}
.closer{margin-top:22px;padding:22px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.closer .label{display:block;margin-bottom:8px}
.closer p{font-family:var(--mincho);font-weight:700;font-size:clamp(19px,2vw,25px);line-height:1.65}
.rebut{margin-top:22px}
.rebut > .label{display:block;margin-bottom:6px}
.rebut > div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:6px 20px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:14px;line-height:1.85}
.rebut .rq{font-weight:700}
.rebut .ra{color:var(--ink-soft)}
.apply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center}
.apply .h3{max-width:24em}

/* ---- お問い合わせ ---- */
.sup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(28px,5vw,72px);align-items:start}
.sup .form{max-width:none}
.sup fieldset{border:0;margin:0;padding:0;min-width:0}
.sup legend{padding:0;margin-bottom:8px}
.sup .seg span{min-height:42px;min-width:84px}
.sup .field .foot{display:flex;justify-content:flex-end;gap:12px;align-items:baseline}
.sup .form-actions .btn{min-width:200px}
.sup .done{padding:clamp(20px,3vw,28px);border:1px solid var(--rule);border-left:3px solid var(--ink);background:var(--sheet);border-radius:4px}
.sup .done b{display:block;font-family:var(--display);font-weight:700;font-size:20px}
.sup .done p{margin-top:6px;color:var(--ink-soft)}
.side .rows{margin-top:14px}
.side .rows > div{grid-template-columns:minmax(0,1fr);gap:2px}
.side .v{font-size:14px}
.side .v a{color:var(--ink)}
.side .notice{margin-top:22px}
.hours b{font-family:var(--display);font-weight:700}

/* ---- 規約・プライバシー・特商法：左に目次、右に条文 ---- */
.doc{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.doc-toc{position:sticky;top:88px;border-top:1px solid var(--ink);padding-top:12px}
.doc-toc ol{list-style:none;margin:10px 0 0;padding:0}
.doc-toc a{display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:6px;align-items:baseline;padding:8px 0;min-height:36px;font-size:13px;line-height:1.5;text-decoration:none;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.doc-toc a:hover{color:var(--ink)}
.doc-toc a i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--mute);white-space:nowrap}
.doc .prose{max-width:46em}
.doc .prose > section{scroll-margin-top:80px}
.doc .prose > section + section{margin-top:clamp(44px,5vw,64px)}
.doc .prose h2{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;padding-top:0;border-top:0}
.doc .prose h2 .no{flex:0 0 auto;margin-right:0;font-size:11.5px;letter-spacing:.04em;color:var(--stamp)}
.cl{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);gap:4px 22px;padding:14px 0;border-top:1px solid var(--rule)}
.cl:last-child{border-bottom:1px solid var(--rule)}
.cl h3{font-family:var(--body);font-weight:700;font-size:13.5px;line-height:1.9;color:var(--ink)}
.cl > div{font-size:14.5px;line-height:2;color:var(--ink-soft);min-width:0;overflow-wrap:anywhere}
.cl > div p + p,.cl .enum + p{margin-top:.6em}
.cl a{color:var(--ink)}
.cl b{color:var(--ink)}
.enum{list-style:none;margin:.5em 0 0;padding:0}
.enum li{display:grid;grid-template-columns:2.8em minmax(0,1fr);padding:6px 0;border-top:1px dashed var(--rule)}
.enum li + li{margin-top:0}
.enum .no{font-family:var(--mono);font-size:11px;color:var(--mute);padding-top:4px;margin-right:0}

/* ---- 狭い画面 ---- */
@media (max-width:960px){
  .gate,.blind,.how2,.wgp,.smpl,.sup,.doc,.apply{grid-template-columns:minmax(0,1fr)}
  .how,.how2 .phone,.doc-toc{position:static}
  .gate .phone,.how2 .phone{margin:0 auto}
  .reads > div{grid-template-columns:minmax(0,1fr)}
  .doc-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
}
@media (max-width:720px){
  .ben{grid-template-columns:minmax(0,1fr)}
  .seven li,.seven.one li{grid-template-columns:40px minmax(0,1fr)}
  .seven span{grid-column:2/3}
  .vows li{grid-template-columns:40px minmax(0,1fr)}
  .term{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li.sub{grid-template-columns:40px minmax(0,1fr)}
  .steps p{grid-column:2/3}
  .steps li.sub{background-position:4px 0}
  .steps li.sub .n{padding-left:12px}
  .lv{grid-template-columns:minmax(0,1fr)}
  .cal-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-row > div{border-bottom:1px solid var(--rule)}
  .cal-row > div:nth-child(2n){border-right:0}
  .cal-row > div:last-child{grid-column:1/-1}
  .watch{grid-template-columns:minmax(0,1fr)}
  .watch li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 0}
  .watch li + li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .watch span{margin-top:0}
  .rebut > div,.vows3 div{grid-template-columns:minmax(0,1fr);gap:2px}
  .talk li{grid-template-columns:28px minmax(0,1fr)}
  .states > div{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .badge{width:84px}
}
@media (max-width:560px){
  .lv .rows > div{grid-template-columns:minmax(0,1fr)}
  .sheet{padding:22px 16px}
  .sheet::before{inset:6px}
  .sheet-h .mono{text-align:left}
  .sheet-foot{padding-right:0;padding-bottom:70px}
  .doc-toc ol{grid-template-columns:minmax(0,1fr)}
  .cl{grid-template-columns:minmax(0,1fr);gap:2px}
  .sup .form-actions .btn{width:100%}
  .apply .btn{width:100%}
}

/* 掲載をお考えの店舗へ：貼れるパーツ全部（2026-10-10） */
.wparts{margin-top:clamp(28px,4vw,44px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--ink)}
.wparts>.small{margin-top:6px;color:var(--ink-soft);line-height:1.85}
.wp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.wp{display:grid;grid-template-rows:auto auto 1fr;gap:6px;min-width:0;padding:14px;border:1px solid var(--rule);border-radius:14px;background:var(--sheet)}
.wp.req{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wp-h{display:flex;align-items:center;gap:8px;min-width:0}
.wp-h .code{flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--paper);background:var(--ink);border-radius:6px;padding:2px 7px}
.wp-h b{font-size:14.5px;line-height:1.4;min-width:0}
.wp-h .rq{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:800;color:#141318;background:#FFD21F;border-radius:999px;padding:2px 9px}
.wp>p{font-size:12.5px;line-height:1.75;color:var(--ink-soft)}
.wp-pv{display:grid;place-items:center;min-height:120px;padding:14px;border-radius:10px;background:#fff;overflow:hidden;min-width:0}
.wp-pv.full{place-items:center stretch}
.wp-pv.full>*{min-width:0;max-width:100%}
.wp-pv.bn{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-content:center}
.wp-pv.bn img{max-width:100%;height:auto}
@media (max-width:720px){.wp-grid{grid-template-columns:minmax(0,1fr);gap:10px}.wp{padding:12px}.wp-pv{min-height:0;padding:10px}}