/* 정적 스플래시. index.html 이 파싱되는 순간 그려진다 — JS 없이 CSS 만으로 성립해야 한다.
   앱이 뜨면 React 의 BoniLoader(src/ui/BoniLoader.tsx)가 같은 그림으로 이 자리를 이어받는다.
   **양쪽은 항상 같아야 한다**: 96px 로고 하나, 화면 정중앙, 흰 배경. 한쪽만 바꾸면 부팅 중에
   화면이 한 번 갈아끼워져 사용자에게는 로딩이 두 번 일어난 것으로 보인다. */

html,
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  font-family: "Inter", "Noto Sans KR", sans-serif;
}

#splash-screen {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* design.md §3.11 — 부팅 로더 계층. BoniLoader 도 같은 값. */
  z-index: 9999;
}

.splash-logo {
  width: 96px;
  object-fit: contain;
}

/* 부팅이 20초를 넘겼을 때만 splash-fallback.js 가 붙인다. 정상 부팅에서는 존재하지 않는다.
   값은 design.md §3.1/§3.2 리터럴 고정 — 부팅 전 화면이라 CSS 변수를 쓸 수 없다.
   (text-2 #3F3F46 · primary #c127df · on-primary #ffffff · radius/L 56px) */
.splash-note {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.splash-note p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #3f3f46;
}
.splash-note button {
  border: 0;
  padding: 10px 20px;
  border-radius: 56px;
  background: #c127df;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}