/* ================================
   Entry Form Styles (explicit colors)
   ================================ */

/* 基本レイアウト */
.entry {
  max-width: 840px;
  margin-inline: auto;
  color: #111827; /* 本文色 */
}
.entry__row { margin: 0 0 16px; }
.entry__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

/* 氏名だけは常時2列（スマホでも横並び） */
.name-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

/* ラベル・補助 */
.field label,
.field legend {
  display: block;
  margin-bottom: 4px;
  font-weight: 800;
  color: #111827;
}
.req {
  font-size: 0.8rem;
  margin-left: 6px;
  color: #b71c1c; /* 必須マーク */
}

/* 入力要素（テキスト/メール/セレクト） */
.field input[type="text"],
.field input[type="email"],
.field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #e5e7eb;          /* 枠線 */
  border-radius: 10px;
  background-color: #ffffff;           /* 背景 */
  color: #111827;                      /* 文字色 */
  -webkit-appearance: none;
  appearance: none;
}
.field input[type="text"]::placeholder,
.field input[type="email"]::placeholder {
  color: #9ca3af; /* プレースホルダー */
}

/* フォーカス */
.field input:focus,
.field select:focus {
  outline: 3px solid #06b6d4;  /* ティール系フォーカス */
  outline-offset: 1px;
  border-color: #06b6d4;
}

/* ラジオ等の並び */
.choice {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.choice label {
  color: #111827;
}

/* チェックライン（同意） */
.checkline {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #111827;
}
.checkline input[type="checkbox"] {
  accent-color: #06b6d4; /* チェック色 */
}

/* ヘルプ/エラー表示 */
.field__help {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #6b7280; /* ミュート */
}
.field__err {
  min-height: 1.2em;
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #b91c1c; /* エラー文字 */
}

/* エラー時の枠色強調 */
.is-error {
  border-color: #b91c1c !important;
}

/* ステータス/完了 */
.form-status {
  min-height: 1.2em;
  font-size: 0.95rem;
  color: #6b7280; /* ミュート */
}
.form-done {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;      /* 枠線 */
  background-color: #f9fafb;       /* 薄グレー背景 */
  color: #111827;                  /* 文字色 */
}
.form-done h3 { margin: 0 0 6px; color: #111827; }

/* honeypot */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信ボタン（テーマ既定に依存しない最小の安全策） */
#submitBtn {
  background: linear-gradient(90deg, #e97fd2, #41a2b3 50%, #8366c9);
  color: #ffffff;
  border: 1px solid #ffffff; /* グラデ上での境界を薄く */
}
#submitBtn:disabled {
  background: #d1d5db;  /* 無効時グレー */
  color: #ffffff;
  border-color: #d1d5db;
  cursor: not-allowed;
}







/* ================================
   Gender (radio) fieldset — explicit colors
   ================================ */
.entry fieldset {
  border: 1px solid #e5e7eb;        /* 枠線 */
  background-color: #ffffff;        /* 背景 */
  border-radius: 10px;
  padding: 12px 14px;
  color: #111827;                   /* 文字色 */
}

.entry fieldset legend {
  color: #111827;                   /* 見出し文字色 */
  font-weight: 800;
  padding: 0 6px;
  line-height: 1.3;
}

.entry fieldset legend .req {
  color: #b71c1c;                   /* 必須マーク */
}

/* ラジオ選択肢の見た目（ラベルをチップ風に） */
.entry fieldset .choice {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.entry fieldset .choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;       /* ラベル枠線 */
  border-radius: 8px;
  background-color: #f9fafb;       /* ラベル背景 */
  color: #111827;                   /* ラベル文字色 */
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.entry fieldset .choice label:hover {
  background-color: #f3f4f6;        /* ホバー背景 */
  border-color: #cbd5e1;            /* ホバー枠線 */
}

/* ラジオ本体（ブラウザ対応の範囲で色指定） */
.entry fieldset .choice input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #06b6d4;            /* チェック色 */
  cursor: pointer;
}

.entry fieldset .choice input[type="radio"]:focus-visible {
  outline: 3px solid #06b6d4;       /* フォーカス輪郭 */
  outline-offset: 2px;
}

/* エラー時の強調（JSが .is-error を側の input/select か fieldset に付与） */
.entry fieldset.is-error {
  border-color: #b91c1c;            /* エラー枠線 */
  background-color: #fff5f5;        /* ごく薄い赤背景 */
}

/* エラー文言の色（念のため再指定） */
.entry fieldset .field__err {
  color: #b91c1c;
}








/* === Radio / Checkbox：白地 + チェック時は黒い点 === */
.entry input[type="radio"],
.entry input[type="checkbox"]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 2px solid #111827;       /* 枠：黒 */
  background: #ffffff;              /* 地：白 */
  display: grid;
  place-content: center;
  cursor: pointer;
}

/* 形状（ラジオは円、チェックは角丸四角） */
.entry input[type="radio"]{ border-radius: 50%; }
.entry input[type="checkbox"]{ border-radius: 4px; }

/* 内側の黒い点（未チェックは非表示、チェック時に拡大） */
.entry input[type="radio"]::before,
.entry input[type="checkbox"]::before{
  content: "";
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;              /* 丸い点 */
  background: #111827;             /* 黒い点 */
  transform: scale(0);
  transition: transform .12s ease-in-out;
}

.entry input[type="radio"]:checked::before,
.entry input[type="checkbox"]:checked::before{
  transform: scale(1);
}

/* フォーカスリング（キーボード操作の見やすさ） */
.entry input[type="radio"]:focus-visible,
.entry input[type="checkbox"]:focus-visible{
  outline: 3px solid #0A7B61;      /* お好みで変更可 */
  outline-offset: 2px;
}

/* ラベル行の整列・色（性別ラジオの行など） */
.entry .choice label{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #111827;
}

.entry .checkline{
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #111827;
}

.entry .checkline input[type="checkbox"]{
  margin-top: 0; /* 行ずれ防止 */
}












/* フィールドの赤枠（コンテナに .is-error が付いたとき、内側の input/select を赤に） */
.field.is-error input[type="text"],
.field.is-error input[type="email"],
.field.is-error select {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}

/* ラジオ/チェック用：fieldset に .is-error が付いたとき */
.entry fieldset.is-error {
  border-color: #b91c1c !important;
  background-color: #fff5f5 !important;
}
.entry fieldset.is-error .choice label {
  border-color: #fca5a5 !important;
  background-color: #fff1f2 !important;
}