/* ドラッグ＆ドロップ用ドロップゾーン */
.drop-zone {
  max-width: 800px;
  width: 90%;
  margin: 40px auto 50px;
  padding: 30px;
  border: 2px dashed #3498db;
  border-radius: 8px;
  background-color: #eaf6ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: background-color .3s ease, border-color .3s ease;
}

/* ドラッグオーバー時 */
.drop-zone.dragover {
  background-color: #d0ebff;
  border-color: #2980b9;
}

/* ファイル選択後の背景色 */
.drop-zone.has-file {
  background-color: #f0fff0;
  border-color: #ffccd5;
}

/* 案内テキスト */
.drop-zone__prompt {
  color: #2980b9;
  font-size: 20px;
  margin-bottom: 8px;
}

/* ファイル選択ボタン（通常） */
.drop-zone__button {
  padding: 8px 16px;
  background-color: #3498db;      /* 青 */
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .3s ease;
}

/* ファイル選択ボタン（ホバー時は赤） */
.drop-zone__button:hover {
  background-color: #e74c3c;
  color: #fff;
}

/* 選択されたファイル名表示 */
.drop-zone__filename {
  margin-top: 12px;
  color: #000;                    /* 黒文字 */
  font-size: 16px;
}

/* input[type=file] は隠す */
.drop-zone__input {
  display: none !important;
}

/* 自動入力されたフィールドを黄色でハイライト */
input.autofilled,
select.autofilled,
textarea.autofilled {
  background-color: #fff9c4; /* 薄い黄色 */
  outline: 2px solid #fbc02d; /* 少し濃い黄色の枠線 */
  transition: background-color .3s, outline .3s;
}

/* 自動入力されたラジオボタン自身に枠線を付ける */
input[type="radio"].autofilled {
  outline: 2px solid #fbc02d;
  /* 必要に応じて背景色やマージン等も調整 */
}
/* 自動入力されたラジオに太いアウトライン＋影を付ける */
input[type="radio"].autofilled {
  outline: 3px solid #fbc02d;      /* 枠線の太さを3pxに */
  outline-offset: 2px;             /* ラジオから少し離して表示 */
  box-shadow: 0 0 0 2px rgba(251,192,45,0.5); /* 薄い黄色の影を追加 */
}

/* ラジオのラベル全体もハイライトしたい場合 */
input[type="radio"].autofilled + label,
label > input[type="radio"].autofilled {
  background-color: #fff9c4;       /* ラジオの背景を薄黄色に */
  border-radius: 4px;              /* 角を丸く */
  padding: 2px 4px;                /* ラジオと文字まわりに余白 */
}