@import "tailwindcss";

@layer components {
  /* 1. モーダルの背景（半透明オーバーレイ） */
  .modal-overlay {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-gray-900/60 backdrop-blur-sm p-4;
  }

  /* 2. 小さいタブ（モーダル本体） */
  .modal-content {
    @apply w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col;
  }

  /* 3. 「閉じる」アイコンボタン（右上の×ボタン） */
  .btn-close-icon {
    @apply p-2 rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-200;
  }

  /* 4. 「戻る・キャンセル」ボタン（枠線ありの控えめなボタン） */
  .btn-secondary {
    @apply px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 shadow-sm transition-all active:scale-95;
  }

  /* 5. 「メイン・追加」ボタン（青色の目立つボタン） */
  .btn-primary {
    @apply px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 shadow-md transition; 
  }
}