/* 앱(Capacitor WebView) 환경에서만 적용 — 웹 브라우저(is-web)에서는 기존 동작 그대로 유지 */

.is-app,
.is-app body {
  overscroll-behavior: none; /* pull-to-refresh / 바운스 스크롤 방지 */
  -webkit-user-select: none; /* 롱프레스 텍스트 선택 콜아웃 방지 */
  -webkit-tap-highlight-color: transparent; /* 탭 시 하이라이트 플래시 제거 */
}

.is-app input,
.is-app textarea,
.is-app select {
  -webkit-user-select: text; /* 입력 요소는 선택/커서 조작 가능하도록 복원 */
}

html.is-app {
  touch-action: pan-x pan-y; /* 핀치 줌 방지, 스크롤 제스처는 유지 */
  /* 모든 안전영역 보정 규칙이 공유하는 단일 값. env(safe-area-inset-top)이 0을 보고하는
     기기/타이밍에도 상태바 높이만큼은 항상 확보되도록 최솟값(24px)을 보장한다.
     이 값이 바뀌면 아래 header/main/#loginShell/#sideMenu/#contentFrame이 전부 함께 바뀐다 —
     따로따로 env(...)를 반복하면(과거 방식) 서로 어긋나 컨텐츠가 헤더에 가려지는 문제가 생길 수 있다. */
  --safe-top: max(env(safe-area-inset-top, 0px), 24px);
}

/* 엣지투엣지: 상태바를 투명 오버레이로 쓰므로, 고정 헤더의 배경이 상태바 뒤까지
   자연스럽게 이어지도록 padding-top으로 안전영역만큼 밀어올리고, height를 그만큼 늘려
   h-16(4rem) 컨텐츠 밴드 자체는 그대로 유지한다(아이콘 정렬이 안전영역에 밀려 어긋나지 않도록).
   box-sizing은 절대 건드리지 않는다 — border-box를 content-box로 바꾸면 세로뿐 아니라
   가로(px-margin-mobile 등 좌우 패딩)까지 너비에 더해져 헤더가 화면 오른쪽 밖으로 삐져나가고
   알림/검색 버튼이 잘려 보이는 문제가 생긴다. */
.is-app header.fixed.top-0 {
  padding-top: var(--safe-top) !important;
  height: calc(4rem + var(--safe-top)) !important;
}

/* 헤더가 늘어난 만큼, 헤더 아래 본문(main)도 추가로 밀어낸다.
   기존 pt-* 값은 그대로 두고 안전영역만큼만 더해서(margin) 페이지마다 다른 pt- 값을 신경 쓸 필요 없게 한다. */
.is-app main:not(#loginShell) {
  margin-top: var(--safe-top);
}

/* 로그인 화면은 헤더가 없어 배경(bg-mesh)이 곧바로 상태바 뒤까지 이어져야 하므로
   margin이 아닌 padding으로 안쪽 카드만 안전영역 아래로 내린다(배경은 계속 최상단까지 유지). */
.is-app #loginShell {
  padding-top: calc(48px + var(--safe-top)) !important; /* 기존 py-xl(48px) + 안전영역 */
}

/* 사이드 메뉴도 열렸을 때 상단 메뉴 항목이 상태바에 가리지 않도록 보정 */
.is-app #sideMenu {
  padding-top: calc(5rem + var(--safe-top)) !important; /* 기존 pt-20(5rem) + 안전영역 */
}

/* AppShell(부모 셸) 전용: 실제 화면은 이 iframe 안에서 로드된다.
   top은 Header(h-16=4rem) + 세이프에어리어 기준으로, 위 .is-app header 보정과 동일한 높이를 사용한다. */
/* <iframe>은 대체 요소(replaced element)라 position:fixed에 top/bottom만 주면(height 미지정)
   그 사이 간격만큼 자동으로 늘어나지 않고 HTML 기본 높이(150px)로 고정된다 — <div>와 다름.
   반드시 height를 top 오프셋만큼 뺀 값으로 명시해야 실제로 화면 바닥까지 채워진다. */
.is-app #contentFrame {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(4rem + var(--safe-top));
  height: calc(100% - 4rem - var(--safe-top));
  width: 100%;
  border: none;
  background: #f9f9ff;
}

/* 웹(is-web)에서는 세이프에어리어 변수가 없으므로 기존 그대로(4rem 고정) 동작시킨다. */
.is-web #contentFrame {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 4rem;
  height: calc(100% - 4rem);
  width: 100%;
  border: none;
  background: #f9f9ff;
}

/* embed=1로 AppShell의 iframe 안에서 로드되는 콘텐츠 화면: 자신의 헤더/사이드메뉴를 렌더링하지 않으므로
   헤더 공간을 미리 확보해두던 상단 여백(pt-20/pt-24 등)이 불필요해져 작은 기본 여백으로 대체한다. */
.is-embed main {
  padding-top: 16px !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   SPA 화면전환 슬라이드 (Phase 0: Common.js의 fn_spaNavigate/fn_spaRenderView 참고)
   ========================================================================== */
/* 전환 중인 두 화면이 absolute로 겹쳐도 body 높이가 0으로 무너지지 않도록 최소 높이를 보장한다 */
.spa-shell-body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 평상시(전환 중이 아닌) 화면: 일반 문서 흐름 그대로 */
.spa-shell-body .spa-view {
  position: relative;
  width: 100%;
}

/* 전환 중에는 나가는/들어오는 화면이 같은 자리에 겹쳐서 보여야 하므로 absolute + transform */
.spa-shell-body .spa-view.spa-view-incoming,
.spa-shell-body .spa-view.spa-view-exit-left,
.spa-shell-body .spa-view.spa-view-exit-right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.spa-shell-body .spa-view.spa-view-incoming {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.spa-shell-body .spa-view.spa-view-incoming.spa-view-from-right { transform: translateX(100%); }
.spa-shell-body .spa-view.spa-view-incoming.spa-view-from-left { transform: translateX(-100%); }
.spa-shell-body .spa-view.spa-view-incoming.spa-view-active { transform: translateX(0); }

.spa-shell-body .spa-view.spa-view-exit-left,
.spa-shell-body .spa-view.spa-view-exit-right {
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.spa-shell-body .spa-view.spa-view-exit-left { transform: translateX(-100%); }
.spa-shell-body .spa-view.spa-view-exit-right { transform: translateX(100%); }