/* form.css - 入力フォーム専用スタイル */

.form-group {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-row-tight {
  gap: var(--space-sm);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.form-label.required::after {
  content: '*';
  color: var(--color-error);
  margin-left: var(--space-xs);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* 入力に応じて高さが広がる欄（住所など。2026-07-29 バッチ5）。
   高さはJS側で中身の高さに合わせるため、最小の高さと手動の伸縮は外す */
.form-textarea-auto {
  min-height: 0;
  resize: none;
  overflow-y: hidden;
  line-height: 1.6;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background-color: var(--bg-input-focus);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

.form-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.form-error {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--space-xs);
}

.char-counter {
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.form-section {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed var(--border-color);
}

.form-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.form-toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.form-toolbar-group .form-label {
  margin-bottom: 0;
}

/* トグルグループ */
.toggle-group {
  display: inline-flex;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.toggle-btn {
  padding: 4px 12px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.toggle-btn.active {
  background-color: var(--bg-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-medium);
}

/* 年齢表示 */
.age-display {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  padding-left: var(--space-sm);
}

/* 写真アップロード */
.photo-upload {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  position: relative;
  transition: all var(--transition-fast);
  overflow: hidden;
}

.photo-upload:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-alpha);
}

.photo-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  color: var(--text-secondary);
  gap: var(--space-sm);
}

.photo-hint {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

.photo-preview {
  position: relative;
  width: 100%;
  padding-top: 133.33%; /* 3:4 aspect ratio */
  background-color: var(--bg-tertiary);
}

.photo-preview img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove-btn {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

/* 動的リスト */
.dynamic-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.dynamic-list-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background-color: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.dynamic-list-item .form-group {
  margin-bottom: 0;
  flex: 1;
}

.dynamic-list-item .form-row {
  margin-bottom: 0;
  flex: 1;
}

.item-remove-btn {
  color: var(--text-tertiary);
  padding: var(--space-xs);
  margin-top: 24px; /* ラベルの高さ分下げる */
}

.item-remove-btn:hover {
  color: var(--color-error);
}

.add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  background-color: var(--color-primary-alpha);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.add-item-btn:hover {
  background-color: var(--color-primary);
  color: white;
}

/* CV用の大きな動的リストアイテム */
.cv-list-item {
  background-color: var(--bg-card);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  margin-bottom: var(--space-lg);
  position: relative;
}

.cv-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

/* プログレスステップ */
.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
}

.step-item.active {
  color: var(--color-primary);
}

.step-item.completed {
  color: var(--color-success);
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  transition: all var(--transition-normal);
}

.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.step-item.active .step-circle {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 4px var(--color-primary-alpha);
}

.step-item.completed .step-circle {
  background-color: var(--color-success);
  color: white;
}

.step-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: var(--border-color);
  margin: 0 var(--space-sm);
  margin-bottom: 20px; /* circleと揃えるため */
}

/* 学歴・職歴・資格の「年月」欄。
   西暦4桁がきちんと見える幅を確保する（スマホで2桁しか見えず、4桁入力に気づけなかった
   ＝2026-07-28 実機フィードバック5） */
/* .dynamic-list-item .form-group { flex: 1 } より強い選択子にする（同じ強さだと負ける） */
.dynamic-list-item .ym-group {
  flex: 0 0 190px;
}

.dynamic-list-item .ym-group .form-input {
  min-width: 4.5em;   /* 「2010」の4桁が隠れない幅 */
  text-align: center;
}

/* ステップナビゲーション（下部） */
.step-navigation {
  display: flex;
  /* 左右の端に散らさず、中央へ寄せて近づける（2026-08-06 M1-3）。
     画面が広いほど「前へ」と「次へ」が遠のき、目と手が行き来していた */
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-2xl);
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.autosave-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.autosave-indicator.show {
  opacity: 1;
}

/* 手動保存ボタン＋保存状態（2026-07-23 実機指摘a。自動保存だけに頼らず、
   利用者が自分で保存でき、保存された時が分かるようにする） */
.save-cluster {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.btn-save-now {
  flex-shrink: 0;
}
.save-status {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  white-space: nowrap;
}
/* 未保存の変更があるときは金色で「まだ保存されていない」と気づけるように */
.save-status.dirty {
  color: var(--gold);
  font-weight: var(--font-weight-medium);
}
.save-status.saved {
  color: var(--color-success);
}
/* 保存に失敗したときは、黙って通り過ぎず赤で知らせる（2026-07-24 二重監査 S3） */
.save-status.failed {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 640px) {
  /* 狭い画面では下部の操作バーを2段にする。
     1段目=保存ボタンと保存状態／2段目=前へ・次へ。
     横1列のままだと保存ボタンが画面の中央に浮いて見え、入力を隠していた（実機指摘⑨） */
  .step-navigation {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    /* iPhoneのホームバーに隠れないように下の余白を足す */
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    gap: var(--space-sm);
  }
  .save-cluster {
    order: -1;              /* 1段目に上げる */
    width: 100%;
    justify-content: center;
  }
  .step-navigation > .btn { flex: 1; justify-content: center; }
  .save-status { font-size: var(--font-size-xs); }
}

/* フォームのステップ表示制御 */
.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn var(--transition-normal);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}