/*
 * ========================================
 * 찍어방 공통 CSS (common.css)
 * ========================================
 * 목적: Safe Area 대응 + 터치 타겟 개선
 * 주의: 기존 스타일을 덮어쓰지 않고 보완만 함
 * ========================================
 */

/* ========================================
   1. Safe Area 대응 (아이폰 노치/홈바)
   ======================================== */

/* iOS Safari에서 전체 화면 사용 */
html {
  /* iOS 15+ 대응 */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* 고정 위치 요소들의 Safe Area 대응 */
.top,
.header,
[class*="top"] {
  padding-top: max(env(safe-area-inset-top), 20px);
}

/* 하단 고정 버튼/바가 있는 경우 */
[style*="position: fixed"][style*="bottom"],
[style*="position:fixed"][style*="bottom"],
.fixed-bottom,
.bottom-bar,
#multiSendBar {
  padding-bottom: env(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom);
}

/* ========================================
   2. 터치 타겟 크기 개선 (최소 44px)
   ======================================== */

/* 버튼 최소 크기 보장 */
button,
.btn,
.pill,
.pillBtn,
.tab,
[role="button"],
[onclick] {
  min-height: 44px;
  /* 너비는 콘텐츠에 따라 자연스럽게 */
}

/* 입력 필드 터치 영역 */
input,
select,
textarea {
  min-height: 44px;
}

/* 체크박스/라디오 터치 영역 확대 */
input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
}

/* 작은 버튼들 (btn-sm 등) 도 최소 높이 보장 */
.btn-sm,
.small,
[class*="btn-sm"] {
  min-height: 36px;
}

/* ========================================
   3. 모바일 터치 UX 개선
   ======================================== */

/* 터치 시 하이라이트 제거 (안드로이드) */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 스크롤 부드럽게 (iOS) */
.section,
.content,
[class*="list"],
[class*="scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* 텍스트 선택 방지 (앱 같은 느낌) */
button,
.btn,
.tab,
.pill,
.pillBtn,
.badge {
  -webkit-user-select: none;
  user-select: none;
}

/* ========================================
   4. 접근성 개선
   ======================================== */

/* 포커스 표시 (키보드 사용자용) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid #6200ea;
  outline-offset: 2px;
}

/* 애니메이션 감소 선호 사용자 대응 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}