/*
 * 診断システム専用CSS - Tailwind版
 * Version: 2.0.0
 * Tailwind CSS + カスタムコンポーネント
 */

/* ==========================================================================
   CSS変数（テーマカラー定義）
   ========================================================================== */
:root {
  --pet-primary: #ff6b35;
  --pet-primary-dark: #e55a2b;
  --pet-secondary: #4ecdc4;
  --pet-success: #27ae60;
  --pet-warning: #f39c12;
  --pet-danger: #e74c3c;
  --pet-info: #3498db;
}

/* ==========================================================================
   Tailwind CDN補完用カスタムコンポーネント
   ========================================================================== */

@layer components {
  /* 診断ページレイアウト */
  .pet-diagnosis-layout {
    @apply min-h-screen py-8;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }

  /* プログレスバー拡張 */
  .pet-progress-fill {
    background: linear-gradient(90deg, var(--pet-success) 0%, var(--pet-info) 100%);
    transition: width 0.3s ease;
  }

  /* ステップインジケーター */
  .pet-step-indicators {
    @apply flex justify-between items-center mb-8 px-4;
  }
  
  .pet-step-item {
    @apply flex flex-col items-center relative flex-1;
  }
  
  .pet-step-item:not(:last-child)::after {
    content: '';
    @apply absolute top-5 left-1/2 w-full h-0.5 bg-gray-200 -z-10;
    transform: translateX(50%);
  }
  
  .pet-step-item.completed::after {
    @apply bg-green-500;
  }
  
  .pet-step-circle {
    @apply w-10 h-10 rounded-full border-2 border-gray-300 bg-white flex items-center justify-center
           text-sm font-semibold text-gray-500 transition-all duration-300 relative z-10;
  }
  
  .pet-step-item.active .pet-step-circle {
    @apply border-blue-500 bg-blue-500 text-white;
    transform: scale(1.1);
  }
  
  .pet-step-item.completed .pet-step-circle {
    @apply border-green-500 bg-green-500 text-white;
  }

  /* フォーム要素 */
  .pet-form-input {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl text-base
           focus:border-blue-500 focus:ring-4 focus:ring-blue-500 focus:ring-opacity-20
           transition-all duration-200 bg-white focus:outline-none;
  }
  
  .pet-form-input.error {
    @apply border-red-500 ring-4 ring-red-500 ring-opacity-20;
  }
  
  .pet-form-select {
    @apply pet-form-input appearance-none bg-white cursor-pointer pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }

  /* 選択肢カード */
  .pet-choice-card {
    @apply relative cursor-pointer;
  }
  
  .pet-choice-card input[type="radio"],
  .pet-choice-card input[type="checkbox"] {
    @apply sr-only;
  }
  
  .pet-choice-content {
    @apply block p-4 border-2 border-gray-200 rounded-xl transition-all duration-200
           hover:border-blue-500 hover:bg-blue-50 text-center;
  }
  
  .pet-choice-card:has(input:checked) .pet-choice-content {
    @apply border-blue-500 bg-blue-50 ring-4 ring-blue-500 ring-opacity-20;
  }

  /* ボタンコンポーネント */
  .pet-btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-xl font-semibold text-base
           transition-all duration-200 cursor-pointer min-h-[44px] gap-2;
  }
  
  .pet-btn:disabled {
    @apply opacity-60 cursor-not-allowed;
  }
  
  .pet-btn-primary {
    background-color: var(--pet-primary);
    @apply text-white shadow-md hover:shadow-lg;
  }
  
  .pet-btn-primary:hover:not(:disabled) {
    background-color: var(--pet-primary-dark);
    transform: translateY(-1px);
  }
  
  .pet-btn-success {
    background-color: var(--pet-success);
    @apply text-white text-lg px-8 py-4 hover:bg-green-600;
  }
  
  .pet-btn-success:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  
  .pet-btn-outline {
    @apply bg-white border-2 border-gray-300 text-gray-700
           hover:border-blue-500 hover:text-blue-500 hover:bg-blue-50;
  }

  /* 商品カード */
  .pet-product-card {
    @apply bg-white rounded-xl p-6 shadow-md border border-gray-100
           hover:shadow-lg transition-all duration-300 flex gap-4;
  }
  
  .pet-rank-badge {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold text-white;
    background: linear-gradient(135deg, #ff9800, #f57c00);
  }

  /* ローディング */
  .pet-loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50;
  }
  
  .pet-loading-content {
    @apply bg-white p-8 rounded-2xl text-center max-w-sm mx-4 shadow-2xl;
  }
  
  .pet-loading-spinner {
    @apply w-10 h-10 border-4 border-gray-200 rounded-full animate-spin mx-auto mb-4;
    border-top-color: var(--pet-info);
  }
}

/* ==========================================================================
   カスタムアニメーション
   ========================================================================== */

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* ==========================================================================
   診断ステップ制御
   ========================================================================== */

.pet-diagnosis-step {
  @apply hidden;
}

.pet-diagnosis-step.active {
  @apply block;
  animation: fadeInUp 0.3s ease;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 768px) {
  .pet-step-indicators {
    @apply hidden;
  }
  
  .pet-choice-grid {
    @apply grid-cols-1;
  }
  
  .pet-product-card {
    @apply flex-col text-center;
  }
  
  .pet-form-row {
    @apply flex-col gap-2;
  }
}

@media (max-width: 480px) {
  .pet-diagnosis-layout {
    @apply py-4;
  }
  
  .pet-btn {
    @apply text-sm px-4 py-2;
  }
  
  .pet-btn-lg {
    @apply text-base px-6 py-3;
  }
}

/* ==========================================================================
   アクセシビリティ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.pet-form-input:focus,
.pet-choice-card:focus-within .pet-choice-content,
.pet-btn:focus {
  @apply ring-4 ring-blue-500 ring-opacity-50 ring-offset-2;
}

@media (prefers-contrast: high) {
  .pet-form-input {
    @apply border-4;
  }
  
  .pet-btn {
    @apply border-2 border-current;
  }
  
  .pet-choice-content {
    @apply border-4;
  }
}