/* ===== 모아앱 (MoaApp) 글로벌 디자인 시스템 ===== */
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', Roboto, sans-serif;
}

/* ---------- 타이포그래피 계층 ---------- */
.page-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}
.body-text {
  font-size: 13.5px;
  font-weight: 400;
  color: #4b5563;
}
.sub-caption {
  font-size: 11.5px;
  font-weight: 400;
  color: #9ca3af;
}

/* ---------- 공통 카드 ---------- */
.moa-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.moa-card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.moa-card-hover:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* ---------- 유틸 ---------- */
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.app-card img,
#app-detail img,
#developer-profile img,
#comment-list img {
  background-color: #f3f4f6;
}

/* 흰색 배경 앱 아이콘(로고) 시인성 개선용 연한 테두리.
   JS(checkIconWhiteBg)에서 아이콘의 네 모서리 픽셀이 흰색 계열일 때만 조건부로 부여된다. */
.icon-white-bg-border {
  border: 1px solid #e5e7eb;
}

/* 가로 스크롤 스크롤바 숨김(모바일 카드덱 느낌) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 리뷰 품앗이 모달 등 "여기가 스크롤 가능한 영역"임을 항상 시각적으로 알려주기 위한
   얇고 은은한 인디고 컬러 스크롤바. 기본 브라우저 스크롤바를 숨기지 않고 커스텀 색상만 부여. */
.visible-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #c7d2fe #f3f4f6; /* thumb / track (Firefox) */
}
.visible-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.visible-scrollbar::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 9999px;
}
.visible-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c7d2fe;
  border-radius: 9999px;
}
.visible-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a5b4fc;
}

/* 캡슐 토글 탭 공통 */
.capsule-tab-wrap {
  background: #eef0f4;
  border-radius: 9999px;
  padding: 4px;
  display: inline-flex;
  gap: 2px;
}
.capsule-tab {
  border-radius: 9999px;
  transition: all 0.2s ease;
}

/* 포커스 인풋 공통 (은은한 포인트 컬러) */
.moa-input {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.moa-input:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}