/* Tailwind では表現しにくい補完スタイル */

/* iOS Safari の bottom bar 回避 */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ステップ切り替え (SPA 風: 表示時にフェードイン)
 * Tailwind CDN が後勝ちで `.flex { display: flex }` を注入するため、
 * 単純な `.step { display: none }` (0,0,1,0) ではセレクタ詳細度負けして
 * 非アクティブ step が消えなくなる。
 * `.step:not(.step-active)` (0,0,2,0) にして詳細度を上げ、Tailwind より優先させる。
 */
.step:not(.step-active) {
  display: none;
}

.step.step-active {
  display: flex;
  animation: stepIn 280ms ease both;
}

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

@media (prefers-reduced-motion: reduce) {
  .step.step-active {
    animation: none;
  }
}

/* タップハイライト無効化（モバイル） */
button, label, a {
  -webkit-tap-highlight-color: transparent;
}

/* 選択肢ボタンのホバー */
.option-btn:hover {
  border-color: #5A8DBE;
}

.option-btn:active {
  transform: scale(0.97);
}

/* フッター: SPA らしく折り畳み可能・サンクス/解析中では非表示 */
body.step-thanks footer.compliance-footer,
body.step-analyzing footer.compliance-footer {
  display: none;
}

footer.compliance-footer details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
footer.compliance-footer details summary::-webkit-details-marker {
  display: none;
}
footer.compliance-footer details[open] summary .chevron {
  transform: rotate(180deg);
}
footer.compliance-footer details .chevron {
  display: inline-block;
  transition: transform 200ms ease;
}