アプリ用 › 組み合わせ

<!-- 組み合わせ（app-card ＋ ラベル ＋ stat ＋ delta）：P01 KPIサマリーの指標1枚 -->
<div style="background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--radius-app-card);padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-xs);font-family:var(--font-sans);">
  <div style="font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);color:var(--text-note);">指標名</div>
  <div style="font-family:var(--font-sans);font-size:var(--fs-app-stat);font-weight:var(--fw-bold);line-height:var(--lh-app);color:var(--heading);font-variant-numeric:tabular-nums;">1,234,560</div>
  <span style="font-family:var(--font-sans);font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);color:var(--up);font-variant-numeric:tabular-nums;">▲ +1.0%</span>
</div>

<!-- 組み合わせ（app-card ＋ 見出し ＋ segmented ＋ グラフ）：P05 時系列・P08 構成比などのグラフ枠。線は --chart-1〜4、格子は --chart-grid -->
<div style="background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--radius-app-card);padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-s);font-family:var(--font-sans);">
  <div style="display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);flex-wrap:wrap;">
    <div style="font-size:var(--fs-app-h3);font-weight:var(--fw-bold);line-height:var(--lh-app);color:var(--heading);">グラフ見出し</div>
    <div style="display:inline-flex;gap:var(--space-2xs);padding:var(--space-2xs);background:var(--surface-2);border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);">
      <button style="border:0;background:transparent;color:var(--text-sub);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-pill);cursor:pointer;">項目1</button>
      <button style="border:0;background:var(--primary);color:var(--on-primary);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-pill);cursor:pointer;">項目2</button>
    </div>
  </div>
  <svg viewBox="0 0 600 200" style="width:100%;height:auto;" role="img" aria-label="グラフ見出し">
    <g style="stroke:var(--chart-grid);"><line x1="0" y1="50" x2="600" y2="50"/><line x1="0" y1="100" x2="600" y2="100"/><line x1="0" y1="150" x2="600" y2="150"/></g>
    <polyline fill="none" style="stroke:var(--chart-1);stroke-width:var(--chart-stroke);vector-effect:non-scaling-stroke;" points="0,150 100,140 200,120 300,130 400,90 500,70 600,40"/>
  </svg>
</div>

<!-- 組み合わせ（app-badge の番号 ＋ 名称 ＋ delta）：P12 ランキングの1行 -->
<div style="display:grid;grid-template-columns:var(--space-l) 1fr auto;align-items:center;gap:var(--space-s);padding:var(--space-s) 0;border-bottom:var(--border) solid var(--line);font-family:var(--font-sans);font-size:var(--fs-app-body);line-height:var(--lh-app);">
  <span style="width:var(--space-l);height:var(--space-l);border-radius:var(--radius-pill);background:var(--accent-bg);color:var(--accent-text);font-family:var(--font-sans);font-size:var(--fs-app-sub);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;">1</span>
  <div style="color:var(--heading);font-weight:var(--fw-medium);">名称</div>
  <span style="font-family:var(--font-sans);font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);color:var(--up);font-variant-numeric:tabular-nums;">▲ +1.0%</span>
</div>

<!-- 組み合わせ（app-card ＋ 画像 ＋ 名称・補足 ＋ 値・delta）：P14 カードグリッドの1枚。画像の比率は商材に合わせて aspect-ratio を差し替える -->
<div style="background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--radius-app-card);overflow:hidden;display:flex;flex-direction:column;font-family:var(--font-sans);">
  <div style="aspect-ratio:1/1;background:var(--surface-2);"></div>
  <div style="padding:var(--space-s);display:flex;flex-direction:column;gap:var(--space-2xs);">
    <div style="font-size:var(--fs-app-body);font-weight:var(--fw-bold);line-height:var(--lh-app);color:var(--heading);">名称</div>
    <div style="font-size:var(--fs-app-sub);line-height:var(--lh-app);color:var(--text-note);">補足</div>
    <div style="display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);font-variant-numeric:tabular-nums;">
      <span style="color:var(--text);">45,000</span>
      <span style="font-family:var(--font-sans);font-size:var(--fs-app-sub);font-weight:var(--fw-medium);line-height:var(--lh-app);color:var(--down);font-variant-numeric:tabular-nums;">▼ −1.0%</span>
    </div>
  </div>
</div>

<!-- 組み合わせ（アイコン枠 ＋ 見出し ＋ 説明 ＋ button の主）：P31 データ0件の案内 -->
<div style="display:flex;flex-direction:column;align-items:center;gap:var(--space-s);padding:var(--space-3xl) var(--space-m);text-align:center;font-family:var(--font-sans);">
  <div style="width:var(--space-3xl);height:var(--space-3xl);border-radius:var(--radius-pill);background:var(--surface-2);"></div>
  <div style="font-size:var(--fs-app-h3);font-weight:var(--fw-bold);line-height:var(--lh-app);color:var(--heading);">まだ〇〇がありません</div>
  <div style="font-size:var(--fs-app-sub);line-height:var(--lh-app);color:var(--text-sub);">〇〇を追加すると、〇〇が表示されます。</div>
  <button style="border:var(--border) solid transparent;background:var(--primary);color:var(--on-primary);font-family:var(--font-sans);font-size:var(--fs-app-body);font-weight:var(--fw-bold);line-height:var(--lh-app);padding:var(--space-xs) var(--space-m);border-radius:var(--radius-bar);cursor:pointer;">〇〇を追加</button>
</div>