/* iOS/iPadOS 스타일 — 모달·팝업·드로어 애니메이션 */
:root {
  --hub-ios-backdrop-duration: 340ms;
  --hub-ios-panel-duration: 420ms;
  --hub-ios-drawer-duration: 440ms;
  --hub-ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hub-ios-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
  --hub-modal-duration: var(--hub-ios-panel-duration);
  --hub-modal-drawer-duration: var(--hub-ios-drawer-duration);
  --hub-modal-ease: var(--hub-ios-ease);
}

/* ── hidden / removeAttribute 기반 모달 (JS Observer) ── */
.hub-modal-animate:not(.hub-modal-is-open):not(.hub-modal-is-closing):not(.open):not(.is-open):not(.is-active) {
  display: none !important;
}

.hub-modal-animate.hub-modal-is-open,
.hub-modal-animate.hub-modal-is-closing {
  display: flex !important;
}

.hub-modal-animate.hub-modal-animate--block.hub-modal-is-open,
.hub-modal-animate.hub-modal-animate--block.hub-modal-is-closing,
.hub-modal-animate.hub-modal-animate--drawer.hub-modal-is-open,
.hub-modal-animate.hub-modal-animate--drawer.hub-modal-is-closing {
  display: block !important;
}

.hub-modal-animate {
  opacity: 0;
  -webkit-backdrop-filter: saturate(125%) blur(10px);
  backdrop-filter: saturate(125%) blur(10px);
  transition: opacity var(--hub-ios-backdrop-duration) var(--hub-ios-ease);
  will-change: opacity;
}

.hub-modal-animate.hub-modal-is-visible {
  opacity: 1;
}

.hub-modal-animate.hub-modal-is-closing {
  opacity: 0;
  pointer-events: none;
}

.hub-modal-animate-panel {
  transform: scale(0.91) translateY(18px);
  opacity: 0;
  transition:
    transform var(--hub-ios-panel-duration) var(--hub-ios-spring),
    opacity calc(var(--hub-ios-panel-duration) * 0.88) var(--hub-ios-ease);
  will-change: transform, opacity;
}

.hub-modal-animate.hub-modal-is-visible .hub-modal-animate-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.hub-modal-animate.hub-modal-is-closing .hub-modal-animate-panel {
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  transition-duration: calc(var(--hub-ios-panel-duration) * 0.72);
}

/* 드로어 */
.hub-modal-animate--drawer {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hub-modal-animate--drawer .hub-modal-animate-panel {
  transform: translateX(100%);
  opacity: 1;
  transition: transform var(--hub-ios-drawer-duration) var(--hub-ios-spring);
}

.hub-modal-animate--drawer.hub-modal-is-visible .hub-modal-animate-panel,
.hub-modal-animate--drawer.open .hub-modal-animate-panel {
  transform: translateX(0);
}

.hub-modal-animate--drawer.hub-modal-is-closing .hub-modal-animate-panel {
  transform: translateX(100%);
  opacity: 1;
}

/* 하단 시트 (물 마시기 설정 등) */
.hub-modal-animate--sheet.hub-modal-is-open,
.hub-modal-animate--sheet.hub-modal-is-closing {
  align-items: flex-end !important;
}

.hub-modal-animate--sheet .hub-modal-animate-panel {
  transform: translateY(100%);
  opacity: 1;
  transition: transform var(--hub-ios-drawer-duration) var(--hub-ios-spring);
  animation: none !important;
}

.hub-modal-animate--sheet.hub-modal-is-visible .hub-modal-animate-panel {
  transform: translateY(0);
  opacity: 1;
}

.hub-modal-animate--sheet.hub-modal-is-closing .hub-modal-animate-panel {
  transform: translateY(100%);
  opacity: 1;
}

/* ── .open / [hidden] 기반 레거시 팝업 (순수 CSS, Observer 없음) ── */
.hub-modal-ios {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(125%) blur(10px);
  backdrop-filter: saturate(125%) blur(10px);
  transition:
    opacity var(--hub-ios-backdrop-duration) var(--hub-ios-ease),
    visibility 0s linear var(--hub-ios-backdrop-duration);
}

.hub-modal-ios.hub-modal-ios--drawer {
  display: block !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hub-modal-ios--open-toggle.open,
.hub-modal-ios--open-toggle.is-open,
.hub-modal-ios--open-toggle.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--hub-ios-backdrop-duration) var(--hub-ios-ease),
    visibility 0s;
}

.hub-modal-ios--hidden-toggle:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--hub-ios-backdrop-duration) var(--hub-ios-ease),
    visibility 0s;
}

.hub-modal-ios-panel {
  transform: scale(0.91) translateY(18px);
  opacity: 0;
  transition:
    transform var(--hub-ios-panel-duration) var(--hub-ios-spring),
    opacity calc(var(--hub-ios-panel-duration) * 0.88) var(--hub-ios-ease);
  will-change: transform, opacity;
}

.hub-modal-ios--open-toggle.open .hub-modal-ios-panel,
.hub-modal-ios--open-toggle.is-open .hub-modal-ios-panel,
.hub-modal-ios--open-toggle.is-active .hub-modal-ios-panel,
.hub-modal-ios--hidden-toggle:not([hidden]) .hub-modal-ios-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.hub-modal-ios--drawer .hub-modal-ios-panel {
  transform: translateX(100%);
  opacity: 1;
  transition: transform var(--hub-ios-drawer-duration) var(--hub-ios-spring);
}

.hub-modal-ios--drawer.open .hub-modal-ios-panel {
  transform: translateX(0);
}

/* SweetAlert2 */
@keyframes hub-swal-popup-in {
  from { opacity: 0; transform: scale(0.9) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes hub-swal-popup-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.94) translateY(8px); }
}
@keyframes hub-swal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hub-swal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hub-swal-show {
  animation: hub-swal-popup-in var(--hub-ios-panel-duration) var(--hub-ios-spring) both;
}
.hub-swal-hide {
  animation: hub-swal-popup-out calc(var(--hub-ios-panel-duration) * 0.72) var(--hub-ios-ease) both;
}
.hub-swal-backdrop-show {
  animation: hub-swal-backdrop-in var(--hub-ios-backdrop-duration) var(--hub-ios-ease) both;
}
.hub-swal-backdrop-hide {
  animation: hub-swal-backdrop-out calc(var(--hub-ios-backdrop-duration) * 0.85) var(--hub-ios-ease) both;
}