フォントペアリングツール

<!-- 情報バー -->
<div class="fp-info-strip" id="fp-info-strip">
  <span class="fp-info-item"><strong>見出し：</strong><span id="fp-info-heading">—</span></span>
  <span class="fp-info-item"><strong>本文：</strong><span id="fp-info-body">—</span></span>
  <span class="fp-info-item"><strong>スタイル：</strong><span id="fp-info-style">—</span></span>
</div>

<!-- コントロール -->
<div class="fp-card" style="margin-bottom:16px;">
  <h3>カスタマイズ</h3>
  <div class="fp-controls">
    <div class="fp-control-group" style="grid-column:1/-1;">
      <label>サンプルテキスト</label>
      <input type="text" id="fp-sample-text" value="人間の知恵と技術が融合し、新たな創造の地平が拓かれる" />
    </div>
    <div class="fp-control-group">
      <label>見出しサイズ <span class="fp-val" id="fp-heading-size-val">2.4rem</span></label>
      <input type="range" id="fp-heading-size" min="1.2" max="4.5" step="0.1" value="2.4" />
    </div>
    <div class="fp-control-group">
      <label>本文サイズ <span class="fp-val" id="fp-body-size-val">1rem</span></label>
      <input type="range" id="fp-body-size" min="0.75" max="1.5" step="0.05" value="1" />
    </div>
    <div class="fp-control-group">
      <label>行間 <span class="fp-val" id="fp-line-height-val">1.7</span></label>
      <input type="range" id="fp-line-height" min="1.0" max="2.5" step="0.05" value="1.7" />
    </div>
    <div class="fp-control-group">
      <label>字間 <span class="fp-val" id="fp-letter-spacing-val">0em</span></label>
      <input type="range" id="fp-letter-spacing" min="-0.05" max="0.2" step="0.005" value="0" />
    </div>
    <div class="fp-control-group">
      <label>見出しカラー</label>
      <input type="color" id="fp-heading-color" value="#1a1a2e" />
    </div>
    <div class="fp-control-group">
      <label>本文カラー</label>
      <input type="color" id="fp-body-color" value="#374151" />
    </div>
  </div>

  <div class="fp-section-title">プレビューモード</div>
  <div class="fp-mode-tabs">
    <button class="fp-mode-tab active" data-mode="blog">ブログ記事</button>
    <button class="fp-mode-tab" data-mode="hero">ヒーローセクション</button>
    <button class="fp-mode-tab" data-mode="card">カードレイアウト</button>
  </div>
</div>

<!-- プレビュー -->
<div class="fp-preview-wrap">
  <div class="fp-preview-label">ライブプレビュー</div>
  <div id="fp-preview"></div>
</div>

<!-- CSS出力 -->
<div class="fp-card">
  <h3>CSSコード</h3>
  <div class="fp-css-box">
    <pre id="fp-css-output"></pre>
    <button class="fp-copy-btn" id="fp-copy-btn">CSSをコピー</button>
  </div>
</div>