/* 생각 비틀기 크로스랩 - 커스텀 스타일 */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* 화면 전환 페이드인 */
.fade-in { animation: fadeIn 0.35s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 카드 호버 */
.card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* 선택 카드 */
.select-card {
  border: 2px solid #ECE6DB;
  transition: all 0.15s ease;
  cursor: pointer;
}
.select-card:hover { border-color: #FFD8A8; background: #FFF7ED; }
.select-card.selected {
  border-color: #FF9F43;
  background: #FFF4E6;
  box-shadow: 0 0 0 3px rgba(255,159,67,0.15);
}

/* 토스트 */
.toast-box {
  background: #2B2B2B;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  animation: toastIn 0.25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 로딩 스피너 */
.spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner-dark { border: 3px solid #FFE0B2; border-top-color: #FF9F43; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 입력창 포커스 */
textarea:focus, input:focus { outline: none; }

/* 결과 섹션 카드 */
.result-section { background: #fff; border-radius: 16px; }

/* 스크롤바 (PC) */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-thumb { background: #FFD8A8; border-radius: 8px; }
}