/* カスタムスタイル */

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
}

/* フォームのスタイル改善 */
.form-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ボタンのホバー効果 */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* 画像プレビュー */
.image-preview {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* アップロードエリア */
.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #6366f1;
  background-color: #f8fafc;
}

.upload-area.drag-over {
  border-color: #6366f1;
  background-color: #e0e7ff;
}

/* モーダルアニメーション */
.modal {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ローディングスピナー */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 成功・エラーメッセージの改善 */
.alert {
  animation: slideIn 0.3s ease;
}

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

/* 画像ギャラリーのスタイル */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.image-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 画像スロットのスタイル */
.image-slot {
  transition: all 0.3s ease;
}

.image-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-slot-uploaded {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #10b981;
}

.image-slot-empty {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-style: dashed;
  border-width: 2px;
}

.image-slot-empty:hover {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: #9333ea;
}

/* アップロードボタンの改善 */
.upload-btn {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

/* 保存ボタンのスタイル */
.save-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transition: all 0.3s ease;
}

.save-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* インライン編集のアニメーション */
.edit-transition {
  transition: all 0.3s ease;
}

.profile-view-mode {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
}

.profile-edit-mode {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
}

/* 保存ステータスのアニメーション */
.save-status {
  animation: fadeInUp 0.3s ease;
}

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

/* フォーカス状態の改善 */
.form-input-enhanced:focus {
  ring: 2;
  ring-color: rgb(59 130 246);
  ring-opacity: 0.5;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}