リアルタイムプレビュー（Live Preview）— 名刺カードへの入力連動

/* === リアルタイムプレビュー ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --preview-accent:      #2B7FE8;
  --preview-border:      #D0D7E0;
  --preview-text:        #1A2733;
  --preview-text-muted:  #5A6A7A;
  --preview-placeholder: #C3CBD4;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
}

.preview-wrapper {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* 入力フォーム側 */
.preview-form {
  flex: 1;
  min-width: 260px;
}

.preview-field {
  margin-bottom: 14px;
}

.preview-field label {
  display: block;
  font-size: 13px;
  color: var(--preview-text-muted);
  margin-bottom: 4px;
}

.preview-field input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: sans-serif;
  border: 1.5px solid var(--preview-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.preview-field input:focus {
  border-color: var(--preview-accent);
  box-shadow: 0 0 0 3px rgba(43, 127, 232, 0.12);
}

/* 名刺風プレビューカード */
.preview-card {
  width: 320px;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--preview-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 24px;
}

.preview-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--preview-text);
  margin: 0 0 6px;
}

.preview-card-title,
.preview-card-company {
  font-size: 13px;
  color: var(--preview-text-muted);
  margin: 0 0 2px;
}

.preview-card-contact {
  margin-top: 16px;
  font-size: 12px;
  color: var(--preview-text-muted);
}

.preview-card-contact p {
  margin: 0 0 2px;
}

/* 未入力時はグレーのプレースホルダー文言にする */
.preview-card .is-placeholder {
  color: var(--preview-placeholder);
}

/* スマホ対応 */
@media (max-width: 480px) {
  body { padding: 16px; }
  .preview-card {
    width: 100%;
    max-width: 320px;
  }
}

// 入力欄・プレビュー要素・プレースホルダー文言の対応関係を配列にまとめる
var previewFields = [
  { input: document.getElementById('previewName'),    preview: document.getElementById('previewCardName'),    placeholder: '氏名' },
  { input: document.getElementById('previewCompany'), preview: document.getElementById('previewCardCompany'), placeholder: '会社名' },
  { input: document.getElementById('previewTitle'),   preview: document.getElementById('previewCardTitle'),   placeholder: '部署・役職' },
  { input: document.getElementById('previewTel'),     preview: document.getElementById('previewCardTel'),     placeholder: '電話番号' },
  { input: document.getElementById('previewEmail'),   preview: document.getElementById('previewCardEmail'),   placeholder: 'メールアドレス' }
];

// 5項目とも同じ処理のため共通関数でリスナー登録・更新を行う
previewFields.forEach(function (field) {
  field.input.addEventListener('input', function () {
    updatePreviewField(field);
  });
});

function updatePreviewField(field) {
  var value = field.input.value;
  if (value) {
    // 入力ありの場合は入力内容をそのまま表示（textContent なので innerHTML は使わない）
    field.preview.textContent = value;
    field.preview.classList.remove('is-placeholder');
  } else {
    // 未入力の場合は項目名をプレースホルダーとして表示
    field.preview.textContent = field.placeholder;
    field.preview.classList.add('is-placeholder');
  }
}

function resetDemo() {
  previewFields.forEach(function (field) {
    field.input.value = '';
    updatePreviewField(field);
  });
}