/* ────────────────────────────────────────────
   Wizard ナビゲーション
──────────────────────────────────────────── */

/* 全体コンテナ */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 40px; /* 下に余白 */
}

/* 各ステップ */
.wizard-nav .wizard-step {
  flex: 1;
  display: flex;
  flex-direction: column;    /* 上:丸数字、下:ラベル */
  align-items: center;
  position: relative;
  color: #888888;            /* デフォルト文字色 */
  font-size: 0.95rem;
}

/* 丸数字 */
.wizard-nav .wizard-step span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #888888; /* デフォルト背景色 */
  color: #ffffff;            /* 数字色 */
  font-weight: bold;
  margin-bottom: 6px;        /* 数字とラベル間のすき間 */
  z-index: 1;
}

/* 現在のステップ */
.wizard-nav .wizard-step.current {
  color: #007bff;            /* ラベル文字を青 */
}
.wizard-nav .wizard-step.current span {
  background-color: #007bff; /* 丸数字を青 */
}

/* 完了済みステップ */
.wizard-nav .wizard-step.completed span {
  background-color: #007bff; /* 丸数字を青 */
}

/* 横のつなぎ線 */
.wizard-nav .wizard-step::before,
.wizard-nav .wizard-step::after {
  content: "";
  position: absolute;
  top: 18px;                 /* 丸数字の中心に合わせる */
  height: 2px;
  background-color: #cccccc; /* デフォルト線色 */
  width: 50%;
  z-index: 0;
}
.wizard-nav .wizard-step::before {
  left: 0;
}
.wizard-nav .wizard-step::after {
  right: 0;
}

/* 最初のステップは左線を非表示 */
.wizard-nav .wizard-step:first-child::before {
  display: none;
}
/* 最後のステップは右線を非表示 */
.wizard-nav .wizard-step:last-child::after {
  display: none;
}

/* 完了済み・現在ステップまでの線を青く */
.wizard-nav .wizard-step.completed::before,
.wizard-nav .wizard-step.current::before {
  background-color: #007bff;
}
/* ────────────────────────────────────────────
   ドラッグ＆ドロップエリアの見た目崩れリセット
──────────────────────────────────────────── */
.drop-area {
  position: relative;
  border: 2px dashed #ccc;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  color: #555;
  background-color: #fafafa;
  transition: border-color 0.2s, background-color 0.2s;
  cursor: pointer;
  user-select: none;
}

.drop-area.dragover {
  border-color: #007bff;
  background-color: #e6f5ff;
}

/* 中のアイコン文字も中央揃えに */
.drop-area i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.drop-area span {
  display: block;
}

/* ────────────────────────────────────────────
   Wizardナビ：現在ステップ以前の線を青くする
──────────────────────────────────────────── */
.wizard-nav .wizard-step::before,
.wizard-nav .wizard-step::after {
  content: "";
  position: absolute;
  top: 18px;
  height: 2px;
  width: 50%;
  background-color: #ccc;
  z-index: 0;
}
.wizard-nav .wizard-step:first-child::before,
.wizard-nav .wizard-step:last-child::after {
  display: none;
}

/* 完了済みステップは前後とも青 */
.wizard-nav .wizard-step.completed::before,
.wizard-nav .wizard-step.completed::after {
  background-color: #007bff;
}

/* 現在ステップは左線を青、右線はグレー */
.wizard-nav .wizard-step.current::before {
  background-color: #007bff;
}
.wizard-nav .wizard-step.current::after {
  background-color: #ccc;
}

/* 数字とラベルの色調整はそのまま */
.wizard-nav .wizard-step.completed span,
.wizard-nav .wizard-step.current span {
  background-color: #007bff;
}
.wizard-nav .wizard-step.current {
  color: #007bff;
}

/* ────────────────────────────────────────────
   Wizard「戻る・次へ」ボタン共通スタイル
──────────────────────────────────────────── */
.wizard-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: flex-start; /* 左揃え */
}

/* ボタンの基本スタイル */
.wizard-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: #fff;
  text-decoration: none;
}

/* 「次へ」ボタン（プライマリ） */
.wizard-buttons .btn-primary {
  background-color: #007bff;
}
.wizard-buttons .btn-primary:hover {
  background-color: #0056b3;
}

/* 「戻る」ボタン（セカンダリ） */
.wizard-buttons .btn-secondary {
  background-color: #6c757d;
}
.wizard-buttons .btn-secondary:hover {
  background-color: #5a6268;
}

/* 無効状態 */
.wizard-buttons .btn:disabled,
.wizard-buttons .btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}
    /*────────────────────────────────────────────
       ボタン共通スタイル
    ────────────────────────────────────────────*/
    .btn {
      min-width: 100px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background-color: #007bff;
      color: #fff;
      padding: 8px 14px;
      font-size: 0.95rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.2s;
      margin-bottom: 8px;
      justify-content: center; 
    }
    .btn:hover { background-color: #0056b3; }
    .btn:disabled { background-color: #ccc; cursor: not-allowed; }
    .btn-secondary {
      background-color: #6c757d;
    }
    .btn-secondary:hover {
      background-color: #565e64;
    }
    .btn-danger {
      background-color: #dc3545;
    }
    .btn-danger:hover {
      background-color: #a71d2a;
    }

/* ────────────────────────────────────────────
   ナビの現在ステップをポップで強調
──────────────────────────────────────────── */
.wizard-nav .wizard-step.current span {
  animation: stepPop 0.5s ease;
}

@keyframes stepPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* ────────────────────────────────────────────
   アプリバージョン表示
──────────────────────────────────────────── */
.app-version {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-size: 0.8rem;
  color: #888;
  background: rgba(255,255,255,0.8);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none; /* クリックを透過 */
  z-index: 1000;
}