<div class="fp-control-section">
  <span class="fp-label">見出しテキスト</span>
  <input class="fp-input-text" id="fp-heading-text" type="text" value="美しい日本語タイポグラフィ" />
</div>

<div class="fp-control-section">
  <span class="fp-label">本文テキスト</span>
  <input class="fp-input-text" id="fp-body-text" type="text" value="適切なフォントの組み合わせは、読みやすさを高め、コンテンツの印象を決定づけます。見出しと本文のバランスを大切に。" />
</div>

<div class="fp-control-section">
  <span class="fp-label">見出しサイズ</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-heading-size" type="range" min="18" max="72" value="36" />
    <span class="fp-range-val" id="fp-heading-size-val">36px</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">本文サイズ</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-body-size" type="range" min="12" max="28" value="16" />
    <span class="fp-range-val" id="fp-body-size-val">16px</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">行の高さ（行間）</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-line-height" type="range" min="120" max="230" value="175" />
    <span class="fp-range-val" id="fp-line-height-val">1.75</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">文字間隔（本文）</span>
  <div class="fp-range-row">
    <input class="fp-range" id="fp-letter-spacing" type="range" min="-5" max="20" value="2" />
    <span class="fp-range-val" id="fp-letter-spacing-val">0.02em</span>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">文字色</span>
  <div class="fp-color-row" id="fp-color-swatches">
    <button class="fp-swatch active" data-color="#1a1a1a" style="background:#1a1a1a;" title="ほぼ黒"></button>
    <button class="fp-swatch" data-color="#2d3748" style="background:#2d3748;" title="スレート"></button>
    <button class="fp-swatch" data-color="#1a365d" style="background:#1a365d;" title="ネイビー"></button>
    <button class="fp-swatch" data-color="#4a1d2e" style="background:#4a1d2e;" title="バーガンディ"></button>
    <button class="fp-swatch" data-color="#065f46" style="background:#065f46;" title="フォレスト"></button>
    <button class="fp-swatch" data-color="#374151" style="background:#374151;" title="クールグレー"></button>
    <button class="fp-swatch" data-color="#f8f9fa" style="background:#f8f9fa; border:1.5px solid #dee2e6;" title="ほぼ白"></button>
  </div>
</div>

<div class="fp-control-section">
  <span class="fp-label">背景色</span>
  <div class="fp-color-row" id="fp-bg-swatches">
    <button class="fp-swatch active" data-bg="#ffffff" style="background:#ffffff; border:1.5px solid #dee2e6;" title="白"></button>
    <button class="fp-swatch" data-bg="#f8f9fa" style="background:#f8f9fa; border:1.5px solid #dee2e6;" title="ライトグレー"></button>
    <button class="fp-swatch" data-bg="#fefce8" style="background:#fefce8;" title="クリーム"></button>
    <button class="fp-swatch" data-bg="#eff6ff" style="background:#eff6ff;" title="ブルーティント"></button>
    <button class="fp-swatch" data-bg="#0f172a" style="background:#0f172a;" title="ダーク"></button>
    <button class="fp-swatch" data-bg="#1e293b" style="background:#1e293b;" title="スレートダーク"></button>
  </div>
</div>