@charset "UTF-8";
/*!
 * iOS Safari 키보드 이슈 대응 CSS
 * iOS에서 키보드가 올라올 때 헤더 영역에 빈 여백이 생기는 문제 해결
 *
 * 문제 원인:
 * - iOS Safari는 키보드가 올라오면 visual viewport가 축소됨
 * - 하지만 100vh, height: 100%는 layout viewport 기준
 * - position: fixed 요소들이 실제 보이는 영역과 맞지 않게 배치됨
 *
 * 해결 방법:
 * - CSS 변수 --vh로 실제 viewport 높이 관리
 * - JavaScript에서 visualViewport API로 동적 업데이트
 * - 키보드가 올라올 때 레이아웃 조정
 *
 * @author leesy
 * @since 2025.01.22
 */

/* ============================================
   1. CSS 변수 정의
   ============================================ */
:root {
  /* 실제 viewport 높이 (JS에서 동적으로 업데이트) */
  --vh: 1vh;
  /* 키보드 오프셋 */
  --keyboard-height: 0px;
  /* iOS Safari visualViewport.offsetTop (JS에서 동적으로 업데이트) */
  --viewport-offset-top: 0px;
  /* 안전 영역 (노치 대응) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   2. iOS 키보드가 열렸을 때 기본 스타일
   html에 .ios-keyboard-open 클래스가 추가됨 (JS에서)
   ============================================ */

/* html, body 스크롤 허용 */
html.ios-keyboard-open,
html.ios-keyboard-open body {
  /* 키보드가 열렸을 때 스크롤 가능하도록 */
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  overflow-y: auto !important;
}

/* .wrap.fix 레이아웃 조정 */
html.ios-keyboard-open .wrap.fix {
  /* fixed에서 relative로 변경하여 스크롤 가능하게 */
  position: relative !important;
  height: auto !important;
  min-height: calc(var(--vh, 1vh) * 100);
  /* 스크롤 허용 */
  overflow-y: visible !important;
}

/* header 고정 유지 (GPU 가속) */
html.ios-keyboard-open header {
  /* 헤더는 고정 유지 */
  position: fixed !important;
  /* top은 JS에서 visualViewport.offsetTop으로 동적 설정하므로 !important 제거 */
  /* top: var(--viewport-offset-top, 0px); */
  left: 0 !important;
  right: 0 !important;
  /* GPU 가속으로 렌더링 최적화 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* 배경색 보장 */
  background-color: #ffffff !important;
  /* z-index 보장 */
  z-index: 9999 !important;
}

/* content 영역 패딩 조정 */
html.ios-keyboard-open .content {
  /* 키보드 높이만큼 하단 패딩 추가 */
  padding-bottom: calc(var(--keyboard-height, 0px) + 120px) !important;
}

/* 하단 고정 버튼 영역 */
html.ios-keyboard-open .stickyWrap {
  /* 키보드 위로 올라오도록 */
  position: relative !important;
  bottom: auto !important;
  transform: none !important;
}

/* ============================================
   3. 입력 필드 포커스 시 스타일
   ============================================ */

/* 입력 필드가 포커스될 때 smooth scroll */
html.ios-keyboard-open input:focus,
html.ios-keyboard-open textarea:focus,
html.ios-keyboard-open select:focus {
  /* 커서 위치로 스크롤 */
  scroll-margin-top: 80px;
  scroll-margin-bottom: 40px;
}

/* 주민등록번호 입력 필드 특별 처리 */
html.ios-keyboard-open .regnum-wrap input:focus {
  /* 주민번호 입력 시 더 많은 여유 공간 */
  scroll-margin-top: 100px;
}

/* ============================================
   4. dim, bottomsheet 등 오버레이 요소
   ============================================ */

/* dim 배경 */
html.ios-keyboard-open .dim {
  /* 실제 viewport 높이에 맞춤 */
  height: calc(var(--vh, 1vh) * 100) !important;
}

/* bottomsheet */
html.ios-keyboard-open .bottomsheet {
  /* bottom sheet가 키보드 위에 표시되도록 */
  max-height: calc(var(--vh, 1vh) * 100 - var(--keyboard-height, 0px) - 60px);
}

/* ============================================
   5. 특정 페이지/컴포넌트 대응
   ============================================ */

/* 본인인증 페이지 - 주민등록번호 입력 */
html.ios-keyboard-open .input-wrap#regnum {
  /* 충분한 여백 확보 */
  margin-bottom: 24px;
}

/* 회원가입/로그인 관련 페이지 */
html.ios-keyboard-open .wrap.fix .content.terms,
html.ios-keyboard-open .wrap.fix section.content {
  /* 스크롤 가능하도록 */
  overflow-y: visible !important;
  min-height: auto !important;
}

/* ============================================
   6. 애니메이션 및 트랜지션
   ============================================ */

/* 부드러운 레이아웃 전환 */
html.ios-transitioning .wrap,
html.ios-transitioning .wrap.fix,
html.ios-transitioning header,
html.ios-transitioning .content {
  transition: all 0.2s ease-out;
}

/* ============================================
   7. iOS Safari 전용 미디어 쿼리
   @supports (-webkit-overflow-scrolling: touch)는
   iOS Safari를 감지하는 방법
   ============================================ */

@supports (-webkit-overflow-scrolling: touch) {
  /* iOS Safari에서만 적용 */

  /* 기본 100vh 대신 CSS 변수 사용 */
  .wrap.fix {
    height: calc(var(--vh, 1vh) * 100);
  }

  /* body 스크롤 동작 개선 */
  body {
    -webkit-overflow-scrolling: touch;
  }

  /* 입력 필드 zoom 방지 */
  input[type="text"],
  input[type="number"],
  input[type="tel"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important; /* iOS에서 zoom 방지를 위해 16px 이상 */
  }
}

/* ============================================
   8. 안전 영역 (노치) 대응
   ============================================ */

@supports (padding-top: env(safe-area-inset-top)) {
  html.ios-keyboard-open header {
    padding-top: env(safe-area-inset-top);
  }

  html.ios-keyboard-open .stickyWrap {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   9. 디버깅용 스타일 (개발 중에만 사용)
   ============================================ */

/*
html.ios-keyboard-open::before {
  content: "iOS Keyboard Open";
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 99999;
  border-radius: 4px;
}
*/