/* iOS/iPadOS 느낌 — 페이지·인터랙션 모션 (전역) */
:root {
  --hub-ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hub-ios-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --hub-ios-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
  --hub-ios-page-duration: 480ms;
  --hub-ios-press-duration: 140ms;
}

@keyframes hub-page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hub-content-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 메인 → 게시판: 깜빡임 없이 부드럽게 나가기 */
@keyframes hub-nav-shell-out {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.994);
  }
}

@keyframes hub-nav-curtain {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.hub-nav-exit {
  overflow: hidden;
}

body.hub-nav-exit .hub-motion-shell {
  animation: hub-nav-shell-out 440ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: 50% 0;
  pointer-events: none;
}

body.hub-nav-exit::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #ffffff 100%);
  animation: hub-nav-curtain 440ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

html.hub-motion-init body {
  animation: hub-page-enter var(--hub-ios-page-duration) var(--hub-ios-ease) both;
}

/* 로그인·홈 복귀: 첫 페인트에서 메인을 숨기고, 진입 애니메이션과 함께 표시 */
html.hub-enter-pending:not(.hub-motion-init) body,
html.hub-enter-pending:not(.hub-motion-init) .hub-motion-shell {
  opacity: 0;
}

/* 메인 → 게시판: 메인 나가기 전환만 사용, 도착 화면은 즉시 표시 (이중 애니메이션 방지) */
html.hub-motion-init.hub-nav-arrived body,
html.hub-motion-init.hub-nav-arrived .hub-motion-shell,
html.hub-motion-init.hub-nav-arrived #app,
html.hub-motion-init.hub-nav-arrived .quiz-app,
html.hub-motion-init.hub-nav-arrived .memory-app,
html.hub-motion-init.hub-nav-arrived .json-app-root,
html.hub-motion-init.hub-nav-arrived .typing-app,
html.hub-motion-init.hub-nav-arrived .sm-app-root,
html.hub-motion-init.hub-nav-arrived .water-app,
html.hub-motion-init.hub-nav-arrived .es-app,
html.hub-motion-init.hub-nav-arrived .login-card,
html.hub-motion-init.hub-nav-arrived .hub-ios-reveal,
html.hub-motion-init.hub-nav-arrived .hub-ios-stagger-pending,
html.hub-motion-init.hub-nav-arrived .hub-ios-stagger-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html.hub-motion-init .hub-motion-shell,
html.hub-motion-init #app,
html.hub-motion-init .quiz-app,
html.hub-motion-init .memory-app,
html.hub-motion-init .json-app-root,
html.hub-motion-init .typing-app,
html.hub-motion-init .sm-app-root,
html.hub-motion-init .water-app,
html.hub-motion-init .es-app,
html.hub-motion-init .login-card {
  animation: hub-content-enter calc(var(--hub-ios-page-duration) + 40ms) var(--hub-ios-ease) 0.05s both;
}

/* iframe 임베드 — 페이지 진입·reveal 애니메이션 없음 (게시판 신규/보기) */
html.hub-motion-embed body,
html.hub-motion-embed .hub-motion-shell,
html.hub-motion-embed #app,
html.hub-motion-embed .quiz-app,
html.hub-motion-embed .memory-app,
html.hub-motion-embed .json-app-root,
html.hub-motion-embed .typing-app,
html.hub-motion-embed .sm-app-root,
html.hub-motion-embed .water-app,
html.hub-motion-embed .es-app,
html.hub-motion-embed .login-card,
html.hub-motion-embed .hub-ios-reveal,
html.hub-motion-embed .hub-ios-stagger-pending,
html.hub-motion-embed .hub-ios-stagger-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 버튼·탭 호버/클릭 임팩트 (전역 — JS·hover media 조건 없이 즉시 적용) */
button:not(:disabled):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card),
input[type="button"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact),
input[type="submit"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact),
input[type="reset"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact),
.hub-ios-press,
.action-btn:not(.hub-board-card),
.hub-schedule-btn,
.schedule-add-btn,
.json-top-btn,
.mem-view-action,
.quiz-top-btn,
.typing-top-btn,
.sm-btn,
.admin-panel-btn,
.hub-account-toolbar__btn,
a.wu-home-btn,
a.wn-home-btn,
a.action-btn:not(.hub-board-card),
a.hub-mobile-back,
[role="button"]:not([aria-disabled="true"]):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card) {
  transition: transform 0.14s var(--hub-ios-ease-out),
    filter 0.14s var(--hub-ios-ease-out),
    box-shadow 0.14s var(--hub-ios-ease-out),
    background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:not(:disabled):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card):hover,
input[type="button"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):hover,
input[type="submit"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):hover,
input[type="reset"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):hover,
.hub-ios-press:hover,
.action-btn:not(.hub-board-card):hover,
.hub-schedule-btn:hover,
.schedule-add-btn:hover,
.json-top-btn:hover,
.mem-view-action:hover,
.quiz-top-btn:hover,
.typing-top-btn:hover,
.sm-btn:hover,
.admin-panel-btn:hover,
.hub-account-toolbar__btn:hover,
a.wu-home-btn:hover,
a.wn-home-btn:hover,
a.action-btn:not(.hub-board-card):hover,
a.hub-mobile-back:hover,
[role="button"]:not([aria-disabled="true"]):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card):hover {
  /* scale 금지 — overflow:hidden 부모에서 글자·클릭이 잘림 */
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
}

button:not(:disabled):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card):active,
input[type="button"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):active,
input[type="submit"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):active,
input[type="reset"]:not(:disabled):not(.no-ios-press):not(.no-btn-impact):active,
.hub-ios-press:active,
.action-btn:not(.hub-board-card):active,
.hub-schedule-btn:active,
.schedule-add-btn:active,
.json-top-btn:active,
.mem-view-action:active,
.quiz-top-btn:active,
.typing-top-btn:active,
.sm-btn:active,
.admin-panel-btn:active,
.hub-account-toolbar__btn:active,
a.wu-home-btn:active,
a.wn-home-btn:active,
a.action-btn:not(.hub-board-card):active,
a.hub-mobile-back:active,
[role="button"]:not([aria-disabled="true"]):not(.no-ios-press):not(.no-btn-impact):not(.hub-board-card):active {
  transform: translateY(1px) !important;
  filter: brightness(0.96) !important;
}

/* 첨부·파일 푸터 등 좁은 영역 — 호버 transform 자체 비활성 */
.mn-attach-toggle:hover,
.mn-attach-toggle:active,
.mn-doc-attach-btn:hover,
.mn-doc-attach-btn:active,
.mn-attach-section button:hover,
.mn-attach-section button:active,
.mn-attach-head button:hover,
.mn-attach-head button:active,
.info-file-upload-toolbar button:hover,
.info-file-upload-toolbar button:active,
.info-file-upload-toolbar label:hover,
.info-file-upload-toolbar label:active,
.info-files-mount button:hover,
.info-files-mount button:active,
.sch-files-mount button:hover,
.sch-files-mount button:active {
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  /* 버튼 임팩트는 유지 (떠오름/눌림 피드백). 페이지 진입 애니메이션만 줄임 */
  html.hub-motion-init body,
  html.hub-motion-init .hub-motion-shell,
  html.hub-motion-init #app {
    animation-duration: 0.01ms !important;
  }
  html.hub-enter-pending:not(.hub-motion-init) body,
  html.hub-enter-pending:not(.hub-motion-init) .hub-motion-shell {
    opacity: 1;
  }
}

/* 카드·리스트 항목 — 부드러운 등장 (JS가 .hub-ios-reveal 부여) */
@keyframes hub-reveal-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hub-ios-reveal {
  animation: hub-reveal-up 520ms var(--hub-ios-ease) both;
}

/* 동적 목록 — 스크롤 stagger (hubListStagger.js) */
.hub-ios-stagger-pending {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  will-change: transform, opacity;
}

.hub-ios-stagger-in {
  animation: hub-stagger-in 520ms var(--hub-ios-spring) both;
  animation-delay: var(--hub-stagger-delay, 0s);
}

@keyframes hub-stagger-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}