郵便番号自動入力（Zip Code Lookup）— 7桁入力で住所を自動補完

:root {
  --color-accent:    #2B7FE8;
  --color-success:   #16A34A;
  --color-notfound:  #B45309;
  --color-error:     #DC2626;
  --color-border:    #D0D7E0;
  --color-text:      #2C3A4A;
  --color-hint:      #8A97A6;
}

body {
  font-family: sans-serif;
  background: #F4F6F9;
  padding: 24px 16px;
  margin: 0;
}

/* フォーム全体 */
.zip-form {
  max-width: 420px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-sizing: border-box;
}

/* 各入力欄のブロック */
.zip-field { margin-bottom: 20px; }
.zip-field:last-child { margin-bottom: 0; }

.zip-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.zip-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  font-family: sans-serif;
  background: #fff;
}

.zip-input:focus { border-color: var(--color-accent); }

/* 郵便番号欄は他の住所欄より幅を狭くして区別する */
.zip-input-postal { max-width: 200px; }

/* ステータスメッセージ（検索中／成功／該当なし／エラー） */
.zip-status {
  margin: 6px 0 0;
  font-size: 13px;
  min-height: 18px; /* レイアウトシフト防止 */
  line-height: 1.4;
}

.zip-status.searching { color: var(--color-text); }
.zip-status.success   { color: var(--color-success); }
.zip-status.notfound  { color: var(--color-notfound); }
.zip-status.error     { color: var(--color-error); }

/* ヒントテキスト */
.zip-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-hint);
}

// zipcloud 郵便番号検索API（APIキー不要・CORS対応）
var ZIPCLOUD_ENDPOINT = 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=';

var postalInput = document.getElementById('zip-postal');
var prefInput   = document.getElementById('zip-pref');
var cityInput   = document.getElementById('zip-city');
var townInput   = document.getElementById('zip-town');
var detailInput = document.getElementById('zip-detail');
var statusEl    = document.getElementById('zip-status');

// ステータスメッセージとスタイルをまとめて切り替える
function setStatus(type, message) {
  statusEl.textContent = message;
  statusEl.className = 'zip-status' + (type ? ' ' + type : '');
}

function clearStatus() {
  statusEl.textContent = '';
  statusEl.className = 'zip-status';
}

// 郵便番号から住所を検索し、結果を入力欄へ反映する
function searchAddress(digits) {
  setStatus('searching', '検索中…');

  fetch(ZIPCLOUD_ENDPOINT + digits)
    .then(function (res) {
      return res.json();
    })
    .then(function (data) {
      if (data.results && data.results.length > 0) {
        var address = data.results[0];
        prefInput.value = address.address1; // 都道府県
        cityInput.value = address.address2; // 市区町村
        townInput.value = address.address3; // 町域
        setStatus('success', '✓ 住所を自動入力しました');
      } else {
        setStatus('notfound', '該当する住所が見つかりませんでした。お手数ですが手動で入力してください');
      }
    })
    .catch(function () {
      setStatus('error', '住所の取得に失敗しました。お手数ですが手動で入力してください');
    });
}

// 郵便番号欄の入力を監視し、数字のみ抽出して7桁揃ったら自動検索する
postalInput.addEventListener('input', function () {
  var digits = postalInput.value.replace(/\D/g, '');
  postalInput.value = digits;

  if (digits.length === 7) {
    searchAddress(digits);
  } else {
    // 7桁に満たない・桁数が変わった場合はステータス表示をクリアする
    clearStatus();
  }
});