/*
 * 紹介ページの「説明のために描いた小さな UI」の見た目（2026-10-24 mock・BRIEF-mock）。HTML は server/modules/paidChallenge/bizIntroMock.js。
 *
 * founder（2026-10-24）「基本料金に入っているものが、実際のスクショを無理やり小さくしてるだけなのでわかりずらい。
 *   説明のためにUIの雰囲気を伝えるものをレンダリングするべき」
 *
 * 決め:
 *   - 絵は 1 枚の画用紙: 4:3（14.3em × 10.7em・基本料金の中身・しくみ・流れ）か 3:2（16em × 10.67em・オプション）。
 *     字の大きさは絵の幅の 7%（3:2 は 6.25%）（container query の cqw）＝ PC の 4 列でもスマホの 1 列でも同じ形のまま大きさだけ変わる。
 *     最初は 4:3 も 6.25% で組んだが、PC の 4 列（1 枚 240px ほど）で絵の字が 10px ほどになり小さかった（撮って確かめた）。
 *     3:2 はオプションの 3 列（1 枚 340px ほど）なので 6.25% で足りる（7% にすると高さが足りない）
 *     中の大きさは全部 em で書く（px で書くと、絵の幅が変わった時に部品だけ大きさが変わって形が崩れる）
 *   - 色はページと同じ（--red・--ink・--sub・--mute・--line・--mist。lp.css と paid-challenge-intro.css の変数）。
 *     絵の地は薄い地（--mist）・その上にアプリの部品の白いカード（角丸・細い線。影は付けない＝ページの影は 1 つだけの決め）
 *   - 言いたい 1 点だけを赤い大きな札（.mk-tag--big）にする。省いた所は灰色の棒（.mk-line）
 */

/* ---------- 画用紙 ---------- */
.pc-mock-fig{margin:0;position:relative;container-type:inline-size;aspect-ratio:4/3;background:var(--mist)}
.pc-mock-fig--sq{aspect-ratio:1}
.pc-mock-fig--wide{aspect-ratio:3/2}
.pc-mock-fig--wide .pc-mock{font-size:6.25cqw}
.pc-mock{position:absolute;inset:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:.7em;
  font-size:7cqw;line-height:1.25;font-weight:800;color:var(--ink);text-align:left;overflow:hidden;word-break:auto-phrase}
.pc-mock *{box-sizing:border-box}
.pc-mock p{margin:0}
.pc-mock img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- 部品 ---------- */
.mk-card{display:flex;flex-direction:column;gap:.5em;width:100%;max-height:100%;padding:.7em;border-radius:.8em;background:#fff;border:.07em solid var(--line)}
.mk-line{display:block;flex:none;width:var(--w);height:.42em;border-radius:.3em;background:var(--line)}
.mk-tag{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;max-width:100%;padding:.28em .75em;border-radius:99em;
  background:var(--red);color:#fff;font-size:.7em;font-weight:900;line-height:1.25;text-align:center}
.mk-tag--big{font-size:1em;padding:.38em .95em}
.mk-tag--wait{background:#FFD500;color:var(--ink)}
.mk-tag--soft{background:#FFE7E5;color:var(--red-deep, var(--red))}
.mk-tag--onred{background:#fff;color:var(--red)}
.mk-btn{display:block;align-self:stretch;padding:.5em 1em;border-radius:99em;background:var(--red);color:#fff;font-size:.82em;font-weight:900;line-height:1.2;text-align:center}
.mk-btn--sm{align-self:flex-start;padding:.32em .85em;font-size:.68em}
.mk-arrow{flex:none;width:0;height:0;border:.42em solid transparent;border-left:.62em solid var(--red);border-right:0}
.mk-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;font-size:.78em;font-weight:900;color:var(--sub)}
.mk-head--bar{padding-bottom:.4em;border-bottom:.09em solid var(--line);color:var(--ink)}
.mk-count{color:var(--red)}
.mk-plus{position:relative;width:1.1em;height:1.1em}
.mk-plus::before,.mk-plus::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:.16em;margin:-.08em 0 0 -50%;border-radius:.1em;background:var(--mute,#9CA3AF)}
.mk-plus::after{transform:rotate(90deg)}
.mk-tick{position:relative;flex:none;width:1.15em;height:1.15em;border-radius:50%;background:var(--red)}
.mk-tick::after{content:"";position:absolute;left:.38em;top:.2em;width:.3em;height:.55em;border:solid #fff;border-width:0 .14em .14em 0;transform:rotate(45deg)}
.mk-avatar{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:linear-gradient(135deg,#FF9F43,var(--red))}
.mk-call__title{font-size:.8em;line-height:1.35}

/* ---------- 基本料金に入っているもの ---------- */
/* 協賛の表示: キャンペーンのカード。札がいちばん大きい */
.mk-card--call{width:11.6em;align-items:flex-start}
.mk-card--call .mk-tag--big{font-size:.92em}
.mk-call__pic{width:100%;height:4em;border-radius:.5em;overflow:hidden;background:#FFF4E8}
.mk-call__pic img{object-fit:contain}

/* 対象の地域: 選択肢 4 つ・1 つが選ばれている */
.mk-choices{display:grid;gap:.4em}
.mk-choice{display:flex;align-items:center;gap:.5em;padding:.5em .65em;border-radius:.55em;border:.1em solid var(--line);font-size:.8em;color:var(--sub)}
.mk-radio{flex:none;width:1em;height:1em;border-radius:50%;border:.14em solid var(--mute,#9CA3AF)}
.mk-choice.is-on{border-color:var(--red);background:#FFF1F0;color:var(--red);font-weight:900}
.mk-choice.is-on .mk-radio{border-color:var(--red);background:radial-gradient(circle,var(--red) 0 42%,#fff 46%)}

/* 画像は 4 枚まで: 画像の枠 4 つ */
.mk-card--slots{gap:.7em}
.mk-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45em}
.mk-slot{display:grid;place-items:center;aspect-ratio:1;border-radius:.55em;border:.12em dashed var(--mute,#9CA3AF);overflow:hidden}
.mk-slot.is-on{border:.15em solid var(--red);background:#FFF4E8}
.mk-slot.is-on img{object-fit:contain}
.mk-slots--sm{grid-template-columns:repeat(2,2.3em)}

/* 運営の審査: 2 つの札と矢印 */
.mk-card--review{gap:.45em}
.mk-states{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45em;margin-top:.5em}
.mk-states .mk-tag{align-self:center;padding:.32em .72em}

/* 6 言語に翻訳: 同じ題が 3 言語で並ぶ */
.mk-langs{display:grid;gap:.42em;width:100%}
.mk-lang{display:flex;align-items:center;gap:.55em;padding:.55em .6em;border-radius:.65em;background:#fff;border:.07em solid var(--line)}
.mk-lang .mk-tag{flex:none;align-self:center;min-width:4.7em}
.mk-lang b{font-size:.74em;line-height:1.3}

/* おすすめ: 真ん中のカードに印。両脇は薄い */
.mk-shelf{display:flex;align-items:flex-end;justify-content:center;gap:.55em;width:100%;padding-top:1.4em}
.mk-game{position:relative;flex:none;width:2.8em;aspect-ratio:1}
.mk-game img{border-radius:.6em}
.mk-game.is-dim{opacity:.38}
.mk-game.is-pick{width:6.4em}
.mk-game.is-pick img{outline:.17em solid var(--red);outline-offset:-.02em}
.mk-tag--pick{position:absolute;z-index:1;left:50%;top:0;transform:translate(-50%,-62%);width:max-content;max-width:15em;font-size:.72em;
  background:#FFD500;color:var(--ink);border:.14em solid #fff}

/* 紹介できる: SNS の投稿の枠 */
.mk-card--post{gap:.45em}
.mk-post__who{display:flex;align-items:center;gap:.45em;font-size:.78em}
.pc-mock .mk-post__text{font-size:.7em;line-height:1.4;color:var(--sub)}
.mk-embed{display:flex;align-items:center;gap:.55em;padding:.4em;border-radius:.6em;border:.09em solid var(--line)}
.mk-embed img{flex:none;width:3em;height:3em;border-radius:.45em}
.mk-embed__txt{flex:1;display:flex;flex-direction:column;gap:.45em;min-width:0}

/* 日のマスの図（応募◯日・選考◯日＝ bizIntroViz.periodDiagram・版 C の◯本保証）を画用紙の大きさに合わせる */
.pc-mock--dg .pc-dg{width:100%;padding:0}
.pc-mock--dg .pc-dg-track{gap:.6em}
.pc-mock--dg .pc-dg-days{gap:.2em}
.pc-mock--dg .pc-dg-day{height:1.9em;border-radius:.3em}
.pc-mock--dg .pc-dg-legend{flex-direction:column;align-items:flex-start;gap:.35em;margin-top:.2em;font-size:1em}
.pc-mock--dg .pc-dg-legend span{gap:.45em}
.pc-mock--dg .pc-dg-legend span::before{width:.85em;height:.85em;border-radius:.2em}

/* ---------- しくみの 3 段（1:1 の画用紙）---------- */
.pc-mock--how-post,.pc-mock--how-make,.pc-mock--how-play{padding:1em}
.mk-field{display:flex;flex-direction:column;gap:.28em}
.mk-label{font-size:.68em;color:var(--sub)}
.mk-input{padding:.42em .55em;border-radius:.5em;border:.1em solid var(--line);background:var(--paper, #FDFCFA);font-size:.74em;line-height:1.35}
.mk-card--form{gap:.45em}
.mk-card--form .mk-slot{border-radius:.45em}
.mk-card--make{width:10.4em;align-items:center;gap:.6em}
.mk-make__game{width:7.4em;aspect-ratio:1;border-radius:.6em;overflow:hidden}
.mk-card--make .mk-tag{align-self:center}
.mk-chat{display:flex;flex-direction:column;gap:.55em;width:100%}
.pc-mock .mk-bubble{align-self:flex-start;padding:.5em .85em;border-radius:.95em .95em .95em .25em;background:#fff;border:.07em solid var(--line);font-size:.82em}
.mk-link{align-self:flex-end;display:flex;align-items:center;gap:.55em;width:11.4em;padding:.45em;border-radius:.8em;background:#fff;border:.07em solid var(--line)}
.mk-link img{flex:none;width:4.8em;height:4.8em;border-radius:.5em}
.mk-link__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45em}
.mk-link__txt b{font-size:.7em;line-height:1.3}

/* ---------- 申し込みの流れの 6 段 ---------- */
.mk-checks{display:grid;gap:.5em}
.mk-check{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:.5em;font-size:.78em}
.mk-check .mk-tick{font-size:1em}
.mk-check .mk-line{justify-self:end}
.mk-card--pay{gap:.5em}
.mk-bill>div{display:flex;justify-content:space-between;gap:.5em;padding:.32em 0;border-bottom:.09em solid var(--line);font-size:.7em;color:var(--sub)}
.mk-total{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}
.mk-total span{font-size:.8em}
.mk-total b{font-size:1.25em;color:var(--red);font-variant-numeric:tabular-nums}
.mk-card--admin{gap:.6em}
.mk-admin__row{display:flex;align-items:center;gap:.55em}
.mk-thumb{flex:none;width:2.6em;height:2.6em;border-radius:.5em;overflow:hidden;background:#FFF4E8}
.mk-thumb img{object-fit:contain}
.mk-admin__txt{flex:1;display:flex;flex-direction:column;gap:.4em}
.mk-card--admin>.mk-tag,.mk-card--open>.mk-tag{align-self:center}
.mk-card--open{gap:.5em}
.mk-card--open .mk-call__title{text-align:center}
.mk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4em}
.mk-tiles--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55em}
.mk-tile{position:relative;display:grid;place-items:center;aspect-ratio:1}
.mk-tile img{border-radius:.5em}
.mk-tile.is-empty{border-radius:.5em;border:.12em dashed var(--mute,#9CA3AF)}
.mk-tile.is-on img{outline:.16em solid var(--red)}
.mk-tile .mk-tick{position:absolute;right:-.3em;top:-.3em;border:.1em solid #fff;box-sizing:content-box}
.mk-card--pick{gap:.65em}

/* ---------- オプション（3:2）---------- */
/* 特別バナー: 「{brand} のアプリ」の画面のいちばん上のバナー（画面の名前の札は付けない） */
.mk-card--app{width:14.2em;height:100%;padding:0;gap:0;overflow:hidden}
.mk-appbar{display:flex;align-items:center;gap:.4em;padding:.5em .75em;border-bottom:.07em solid var(--line);font-size:.74em}
.mk-dot{width:.75em;height:.75em;border-radius:50%;background:var(--red)}
.mk-banner{display:flex;align-items:center;gap:.4em;height:4.7em;margin:.55em .6em;padding:.45em .55em .45em .75em;border-radius:.75em;
  background:linear-gradient(120deg,var(--red),#FF7A59);color:#fff}
.mk-banner__txt{flex:1;display:flex;flex-direction:column;gap:.35em;min-width:0}
.mk-banner__txt b{font-size:.78em;line-height:1.3}
.mk-banner img{flex:none;width:3.9em;height:3.9em;object-fit:contain}
.mk-feed{display:flex;flex-direction:column;gap:.45em;padding:.2em .75em .7em}
/* DreamCore ユーザーへのメール: 届いたメール 1 通 */
.mk-card--mail{width:13.6em;gap:.42em}
.mk-mail__from{display:flex;align-items:center;gap:.45em;font-size:.74em}
.mk-avatar--brand{width:1.5em;height:1.5em;background:var(--red)}
.mk-mail__body{display:flex;align-items:center;gap:.6em;padding:.4em .5em;border-radius:.6em;background:#FFF4E8}
.mk-mail__body img{flex:none;width:2.7em;height:2.7em;object-fit:contain}