/* ═══════════════════════════════════════════════
   모바일 폼팩터 — mobile.html, mobile-call.html 공통
   사이드바 숨김 + 풀스크린 + 큰 터치 영역
   ═══════════════════════════════════════════════ */

body {
  background: #f8fafc !important;
  -webkit-tap-highlight-color: transparent;
}

/* 풀스크린 모바일 셸 */
.mobile-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: white;
}

/* mobile-call.html 별칭 (기존 호환) */
.shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: white;
}

/* 헤더/탭바 sticky */
.mobile-header {
  position: sticky; top: 0; z-index: 10;
  background: white;
}
.mobile-bottom-nav {
  position: sticky; bottom: 0;
  background: white;
  border-top: 1px solid #ececec;
}

/* 연락처 카드 선택 효과 */
.contact-card { transition: all 0.15s; }
.contact-card.selected {
  background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%) !important;
  border-color: #4f46e5 !important;
}

/* 단계 번호 (통화 메모 워크플로우) */
.step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #18181b; color: white;
  font-weight: 700; font-size: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-active .step-num {
  background: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}

/* 큰 터치 영역 (접근성) */
button, input, textarea { min-height: 44px; }