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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  line-height: 1.6;
  color: #333;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* カードのホバーエフェクト */
.hover\:shadow-lg {
  transition: box-shadow 0.3s ease-in-out;
}

/* ボタンのトランジション */
button, a {
  transition: all 0.2s ease-in-out;
}

/* 画像の遅延読み込み */
img {
  max-width: 100%;
  height: auto;
}

/* ローディングアニメーション */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  border-top-color: #3b82f6;
  animation: spin 1s ease-in-out infinite;
}

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

/* プリント用スタイル */
@media print {
  header {
    display: none;
  }
  
  .no-print {
    display: none;
  }
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
}

/* アクセシビリティ */
*:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

a:focus,
button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* カスタムスクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============================================
   ワイヤーフレームモード用スタイル
   ============================================ */

body.wireframe-mode {
  background: #ffffff !important;
  font-family: 'Courier New', monospace !important;
}

/* テキストを手書き風に */
body.wireframe-mode * {
  color: #333333 !important;
  font-family: 'Courier New', monospace !important;
}

/* すべての背景をグレースケールに */
body.wireframe-mode .bg-gradient-to-br,
body.wireframe-mode .bg-gradient-to-r,
body.wireframe-mode .bg-gradient-to-t,
body.wireframe-mode .bg-white,
body.wireframe-mode .bg-gray-50,
body.wireframe-mode .bg-gray-100,
body.wireframe-mode .bg-blue-600,
body.wireframe-mode .bg-purple-600,
body.wireframe-mode .bg-green-600 {
  background: #ffffff !important;
  background-image: none !important;
}

/* ヘッダーをボーダーのみに */
body.wireframe-mode header {
  background: #ffffff !important;
  border: 2px solid #333333 !important;
  box-shadow: none !important;
}

/* すべてのカードとコンテナをボーダーのみに */
body.wireframe-mode .rounded-xl,
body.wireframe-mode .rounded-lg,
body.wireframe-mode .rounded-2xl,
body.wireframe-mode .shadow-lg,
body.wireframe-mode .shadow-md,
body.wireframe-mode .shadow-xl,
body.wireframe-mode .shadow-2xl {
  background: #ffffff !important;
  border: 2px solid #333333 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* 画像をプレースホルダーに */
body.wireframe-mode img {
  opacity: 0.1 !important;
  filter: grayscale(100%) !important;
  border: 2px dashed #666666 !important;
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0,
    #f0f0f0 10px,
    #e0e0e0 10px,
    #e0e0e0 20px
  ) !important;
}

/* ボタンをワイヤーフレーム風に */
body.wireframe-mode button,
body.wireframe-mode a[class*="bg-"],
body.wireframe-mode .inline-flex {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #333333 !important;
  color: #333333 !important;
  box-shadow: none !important;
}

body.wireframe-mode button:hover,
body.wireframe-mode a[class*="bg-"]:hover {
  background: #f0f0f0 !important;
  border: 2px solid #000000 !important;
}

/* バッジをシンプルに */
body.wireframe-mode .rounded-full {
  background: #ffffff !important;
  border: 1px solid #333333 !important;
  backdrop-filter: none !important;
  color: #333333 !important;
}

/* 番号バッジをシンプルな円に */
body.wireframe-mode .rounded-full[class*="bg-gradient"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 3px solid #333333 !important;
  color: #333333 !important;
}

/* タイムライン線をシンプルに */
body.wireframe-mode .bg-gradient-to-b {
  background: #333333 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* グラデーションを削除 */
body.wireframe-mode [class*="from-"],
body.wireframe-mode [class*="via-"],
body.wireframe-mode [class*="to-"] {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #333333 !important;
}

/* 入力フィールド */
body.wireframe-mode input,
body.wireframe-mode select,
body.wireframe-mode textarea {
  background: #ffffff !important;
  border: 2px solid #333333 !important;
  color: #333333 !important;
}

body.wireframe-mode input:focus,
body.wireframe-mode select:focus,
body.wireframe-mode textarea:focus {
  border: 2px solid #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* アイコンを消さずに残す */
body.wireframe-mode i {
  color: #333333 !important;
}

/* テキストコントラストを調整 */
body.wireframe-mode .text-blue-600,
body.wireframe-mode .text-green-600,
body.wireframe-mode .text-purple-600,
body.wireframe-mode .text-pink-600,
body.wireframe-mode .text-red-600,
body.wireframe-mode .text-gray-600,
body.wireframe-mode .text-gray-700,
body.wireframe-mode .text-gray-800,
body.wireframe-mode .text-white {
  color: #333333 !important;
}

/* ワイヤーフレームトグルボタン */
.wireframe-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  padding: 12px 24px;
  background: #ffffff;
  border: 2px solid #333333;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.wireframe-toggle:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

body.wireframe-mode .wireframe-toggle {
  background: #333333;
  color: #ffffff;
  border: 2px solid #333333;
}

body.wireframe-mode .wireframe-toggle:hover {
  background: #000000;
  border: 2px solid #000000;
}

/* ワイヤーフレームラベル */
body.wireframe-mode::before {
  content: "WIREFRAME MODE";
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9998;
  padding: 8px 16px;
  background: #333333;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  letter-spacing: 2px;
}