アプリ用 › 基本部品

<!-- 基本部品：ボタン。主（--primary 地）／副（枠付き）／文字だけ の3種。1画面に主ボタンは1つ -->
<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>
<button style="border:var(--border) solid var(--line);background:var(--surface);color:var(--heading);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>
<button style="border:var(--border) solid transparent;background:transparent;color:var(--accent-text);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-s);border-radius:var(--radius-bar);cursor:pointer;">〇〇する</button>

<!-- 基本部品：切替ボタン群（P35 期間切替など）。選択中は --primary 地＋ --on-primary の文字 -->
<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>
  <button style="border:0;background:transparent;color:var(--text-sub);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-pill);cursor:pointer;">項目3</button>
</div>

<!-- 基本部品：増減表示。色（--up / --down）だけで判断させず、▲▼と符号を必ず付ける -->
<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>
<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>

<!-- 基本部品：バッジ（アプリ用）。ラベル（中立／強調）と、順位などの番号の3種 -->
<span style="display:inline-block;background:var(--surface-2);color:var(--text-sub);font-family:var(--font-sans);font-size:var(--fs-app-note);font-weight:var(--fw-bold);line-height:var(--lh-app);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-pill);white-space:nowrap;">ラベル</span>
<span style="display:inline-block;background:var(--accent-bg);color:var(--accent-text);font-family:var(--font-sans);font-size:var(--fs-app-note);font-weight:var(--fw-bold);line-height:var(--lh-app);padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius-pill);white-space:nowrap;">ラベル</span>
<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>

<!-- 基本部品：カードの枠（アプリ用）。中身は自由。画像を端まで敷くときは padding:0; overflow:hidden; にする -->
<div style="background:var(--surface);border:var(--border) solid var(--line);border-radius:var(--radius-app-card);padding:var(--space-m);font-family:var(--font-sans);font-size:var(--fs-app-body);line-height:var(--lh-app);color:var(--text);">中身</div>

<!-- 基本部品：大きな数字（KPI の値）。桁をそろえるため等幅数字にする -->
<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>

<!-- 基本部品：入力欄（ラベル＋入力＋補足）。地は --surface-2、枠は --line -->
<label style="display:flex;flex-direction:column;gap:var(--space-2xs);font-family:var(--font-sans);line-height:var(--lh-app);">
  <span style="font-size:var(--fs-app-sub);font-weight:var(--fw-medium);color:var(--heading);">項目名</span>
  <input type="text" placeholder="〇〇" style="font-family:var(--font-sans);font-size:var(--fs-app-body);line-height:var(--lh-app);color:var(--text);background:var(--surface-2);border:var(--border) solid var(--line);border-radius:var(--radius-bar);padding:var(--space-xs) var(--space-s);">
  <span style="font-size:var(--fs-app-note);color:var(--text-note);">補足</span>
</label>

<!-- 基本部品：選択欄（ラベル＋選択）。見た目は input.html にそろえる -->
<label style="display:flex;flex-direction:column;gap:var(--space-2xs);font-family:var(--font-sans);line-height:var(--lh-app);">
  <span style="font-size:var(--fs-app-sub);font-weight:var(--fw-medium);color:var(--heading);">項目名</span>
  <select style="font-family:var(--font-sans);font-size:var(--fs-app-body);line-height:var(--lh-app);color:var(--text);background:var(--surface-2);border:var(--border) solid var(--line);border-radius:var(--radius-bar);padding:var(--space-xs) var(--space-s);">
    <option>選択肢1</option>
    <option>選択肢2</option>
  </select>
</label>