/* 소리톡 V2 통합 공통 스타일 (style.css) */

/* 1. 기본 폰트 및 리셋 */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  background-color: #f0eee8; /* PC 바탕화면 배경색 */
  color: #1a1a18; /* 기본 텍스트 색상 */
  
  /* 모바일 터치 시 껌벅이는 기본 파란색/회색 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
}

/* 2. Form 요소 고급화 (Focus 아웃라인 및 Placeholder) */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #2563EB !important; /* 포커스 시 브랜드 컬러 테두리 */
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important; /* 부드러운 포커스 링 */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder, textarea::placeholder {
  color: #b8b4a8; /* 플레이스홀더 색상을 디자인에 맞게 부드럽게 */
}

/* 3. 스크롤바 커스텀 (모바일 앱 느낌을 위해 얇고 둥글게) */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d4d1c7;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b8b4a8;
}

/* 
 * 4. 공통 애니메이션 키프레임 
 * (React 컴포넌트 내부에서 호출하는 트랜지션 효과들)
 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

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