/* 100AI 공통 스타일 */
* { -webkit-tap-highlight-color: transparent; }
html, body { scroll-behavior: smooth; }
body { padding-bottom: 76px; }

.app-container { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #faf8f5; position: relative; }
@media (min-width: 481px) {
  .app-container { box-shadow: 0 0 40px rgba(0,0,0,0.06); }
}

/* 스크롤바 숨기기 (가로 스크롤 카드용) */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 큰 버튼 */
.btn-primary {
  background: linear-gradient(135deg, #ff9a4d, #ff6b35);
  color: white; font-weight: 700; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,107,53,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4px 10px rgba(255,107,53,0.3); }
.btn-secondary {
  background: white; color: #ff6b35; font-weight: 700; border-radius: 999px;
  border: 2px solid #ffd6b8;
}
.btn-ghost { background: #f1f0ee; color: #555; font-weight: 600; border-radius: 999px; }

/* 카드 */
.product-card {
  border-radius: 24px; overflow: hidden; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .15s ease;
}
.product-card:active { transform: scale(0.97); }
.price-badge {
  background: rgba(255,255,255,0.95); color: #ff6b35; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 하단 내비게이션 */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px;
  background: white; border-top: 1px solid #f0eee9;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
}
.nav-item { color: #b4aea3; }
.nav-item.active { color: #ff6b35; }
.nav-fab {
  background: linear-gradient(135deg, #ff9a4d, #ff6b35);
  box-shadow: 0 8px 18px rgba(255,107,53,0.45);
}

/* 상단 헤더 */
.top-header {
  position: sticky; top: 0; z-index: 30; background: rgba(250,248,245,0.92);
  backdrop-filter: blur(8px);
}

/* 로딩 애니메이션 */
@keyframes bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.bounce-soft { animation: bounce-soft 1.2s ease-in-out infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255,107,53,0.5); }
  100% { box-shadow: 0 0 0 20px rgba(255,107,53,0); }
}
.pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }

@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fade-in-up .4s ease both; }

/* 토스트 */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: #333; color: white; padding: 10px 20px; border-radius: 999px;
  font-size: 14px; z-index: 100; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  opacity: 0; transition: opacity .25s ease, bottom .25s ease;
}
.toast.show { opacity: 1; bottom: 100px; }

/* 스텝 인디케이터 */
.step-dot { width: 8px; height: 8px; border-radius: 999px; background: #eadfd2; }
.step-dot.active { background: #ff6b35; width: 22px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: #ff9a4d !important; }

.emoji-grid-item { transition: transform .1s; }
.emoji-grid-item:active { transform: scale(0.92); }

.upload-box {
  border: 2px dashed #ffcda1; border-radius: 20px; background: #fff8f1;
}