/* 초기 HTML의 인라인 지정을 피하고 본문 여백을 외부 CSS로 설정합니다. */
body { margin: 0; }
/* 창 기준 정렬: 상위 레이아웃 높이/스크롤과 무관하게 배치합니다. */
/* 초기 HTML과 React 공통 대기 화면: 정렬·줄바꿈·높이를 동일하게 유지합니다. */
.page-loading {
  position: fixed; inset: 0; z-index: 2000;
  box-sizing: border-box; width: auto; height: auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow-y: auto;
  margin: 0; border: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: #fff; color: #102437; text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
.page-loading *, .page-loading *::before, .page-loading *::after { box-sizing: border-box; }
.page-loading .page-loading__content {
  display: flex; flex-direction: column; align-items: center;
  width: min(100%, 360px); min-width: 0; flex: 0 0 auto; margin: auto; padding: 0; gap: 0;
}
.page-loading .page-loading__brand {
  display: block; flex: none; width: 180px; height: 68px;
  max-width: 100%; margin: 0 0 24px; padding: 0; border: 0;
  object-fit: contain; object-position: center;
}
.page-loading .page-loading__title {
  width: 100%; margin: 0; padding: 0; color: #102437;
  font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: -.025em;
  text-align: center; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
.page-loading .page-loading__track {
  flex: none; width: 128px; height: 4px; margin: 22px 0 18px;
  overflow: hidden; border-radius: 8px; background: #e8eeec;
}
.page-loading .page-loading__track::after {
  content: ""; display: block; width: 40%; height: 100%; border-radius: inherit;
  background: #438f85; animation: page-loading-slide 1.6s ease-in-out infinite;
}
/* 두 줄 영역을 미리 확보해 지연 안내로 바뀌어도 로고와 제목이 움직이지 않게 합니다. */
.page-loading .page-loading__message {
  width: 100%; min-height: 48px; margin: 0; padding: 0;
  color: #596970; font-size: 14px; font-weight: 400; line-height: 24px;
  text-align: center; word-break: keep-all; overflow-wrap: anywhere;
}
.page-loading .page-loading__message span { display: block; min-height: 24px; }
@keyframes page-loading-slide { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
@media (max-width: 380px) {
  .page-loading .page-loading__brand { width: 164px; height: 62px; margin-bottom: 22px; }
  .page-loading .page-loading__title { font-size: 18px; }
}
@media (max-height: 440px) and (orientation: landscape) {
  .page-loading { padding-top: 20px; padding-bottom: 20px; }
  .page-loading .page-loading__brand { width: 148px; height: 56px; margin-bottom: 16px; }
  .page-loading .page-loading__track { margin-top: 16px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loading .page-loading__track::after { animation: none; transform: translateX(75%); }
}