nice-app-web/src/shared/ui/assets/css/xkeypad-modal.css

/**
 * XKeypad Modal Styles
 * 키패드 모달 스타일
 */

/* 모달 오버레이 - 전체화면 */
.xkeypad-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 9998;
  display: none;
  animation: fadeIn 0.2s ease;
}

.xkeypad-modal-overlay.active {
  display: block;
}

/* 모달 컨테이너 */
.xkeypad-modal-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Safe area 적용 */
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-bottom: constant(safe-area-inset-bottom, 0); /* iOS 11.0 */
}

.xkeypad-modal-container.active {
  transform: translateY(0);
}

/* 키패드 래퍼 */
.xkeypad-wrapper {
  position: relative;
  background-color: #dbdde2;
  overflow: hidden;
}

/* 키패드 컨텐츠 영역 */
.xkeypad-content {
  position: relative;
  background-color: #dbdde2;
}

/* XKeypad 컨테이너가 모달 내에서 보이도록 */
.xkeypad-content .xkp_ui_qwerty,
.xkeypad-content .xkp_ui_number {
  position: relative !important;
  z-index: 10001 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
}

/* 모든 키패드 자식 요소들이 보이도록 */
.xkeypad-content .xkp_ui_qwerty *,
.xkeypad-content .xkp_ui_number * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* 키패드 DIV가 모달 내에서 보이도록 */
.xkeypad-content > div {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 키패드 버튼들이 보이도록 */
.xkeypad-content ul,
.xkeypad-content li,
.xkeypad-content a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 애니메이션 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 반응형 대응 */
@media (max-width: 768px) {
  .xkeypad-modal-container {
    /* 모바일에서는 전체 너비 */
    left: 0;
    right: 0;
  }
}

@media (min-width: 769px) {
  /* 데스크톱에서는 중앙 정렬 */
  .xkeypad-modal-container {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    max-width: 600px;
    width: 100%;
  }

  .xkeypad-modal-container.active {
    transform: translateX(-50%) translateY(0);
  }
}

/* iOS 노치 대응 */
@supports (padding: max(0px)) {
  .xkeypad-modal-container {
    padding-bottom: max(env(safe-area-inset-bottom, 0), 0px);
  }
}

/* 키패드 타입별 높이는 자동 조정 - min-height 제거 */

/* 입력 필드 활성화 스타일 */
.xkeypad-input-active {
  border-color: #4CAF50 !important;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

/* 모달 열림/닫힘 시 body 스크롤 방지 */
body.xkeypad-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  /* top 값은 JavaScript에서 동적으로 설정 */
}

/* iOS 바운스 스크롤 방지 */
.xkeypad-modal-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 터치 이벤트 최적화 */
.xkeypad-modal-overlay,
.xkeypad-modal-container {
  touch-action: none;
}

.xkeypad-content {
  touch-action: manipulation;
}

/* 다크모드 지원 */
@media (prefers-color-scheme: dark) {
  .xkeypad-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .xkeypad-wrapper {
    background-color: #2c2c2e;
    border-top-color: #48484a;
  }

  .xkeypad-modal-header {
    background-color: #1c1c1e;
    border-bottom-color: #48484a;
  }

  .xkeypad-drag-indicator {
    background-color: #636366;
  }

  .xkeypad-close-btn {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .xkeypad-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .xkeypad-close-btn::before {
    color: #f0f0f0;
  }
}