/* 금강보청기 청주센터 - 맞춤 스타일시트 */

/* 기본 폰트 및 부드러운 스크롤 */
html {
  scroll-behavior: smooth;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 어르신 전용 큰 글자 모드 (Senior Mode) */
body.senior-mode {
  font-size: 1.15rem;
  line-height: 1.8;
}

body.senior-mode h1 {
  font-size: 2.5rem !important;
  line-height: 1.4 !important;
}

body.senior-mode h2 {
  font-size: 2rem !important;
  line-height: 1.4 !important;
}

body.senior-mode h3 {
  font-size: 1.6rem !important;
}

body.senior-mode p,
body.senior-mode span,
body.senior-mode label,
body.senior-mode input,
body.senior-mode select,
body.senior-mode textarea {
  font-size: 1.15rem !important;
}

body.senior-mode button,
body.senior-mode .btn {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  font-size: 1.2rem !important;
}

/* 모바일 전용 하단 고정 플로팅 바 여백 확보 */
@media (max-width: 768px) {
  body {
    padding-bottom: 5.5rem;
  }
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 제품 카드 및 요소 호버 효과 */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

/* 신뢰도 뱃지 펄스 애니메이션 */
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.95; }
}
.pulse-badge {
  animation: soft-pulse 2.5s infinite ease-in-out;
}

/* 폼 입력창 고대비 및 가독성 최적화 (어르신 시인성 보장) */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  background-color: #ffffff !important;
  color: #0f172a !important; /* 최고 선명도의 진한 슬레이트 900 */
  border: 2px solid #94a3b8 !important; /* 흐릿하지 않고 뚜렷한 경계선 */
  font-weight: 600 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

input::placeholder,
textarea::placeholder {
  color: #64748b !important; /* 흐릿하지 않고 명확한 안내 텍스트 */
  opacity: 1 !important;
  font-weight: 500 !important;
}

input:focus,
select:focus,
textarea:focus {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
  outline: none !important;
}

/* 폼 라벨 고대비 선명화 */
label {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 날짜 선택기(Datepicker) 캘린더 아이콘 시인성 극대화 */
input[type="date"] {
  color-scheme: light !important;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 3px;
  background-color: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  filter: invert(24%) sepia(95%) saturate(3062%) hue-rotate(213deg) brightness(94%) contrast(97%);
  opacity: 1 !important;
  transition: all 0.2s ease-in-out;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: #dbeafe;
  border-color: #2563eb;
  transform: scale(1.08);
}