/* 정적 스플래시. index.html 이 파싱되는 순간 그려진다 — JS 없이 CSS 만으로 성립해야 한다.
   앱이 뜨면 React 의 BoniLoader(src/ui/BoniLoader.tsx)가 같은 그림으로 이 자리를 이어받는다.
   **양쪽은 항상 같아야 한다** — 그래서 BoniLoader 도 아래 `.splash-logo` 를 그대로 쓴다.
   이 파일은 앱 CSS 보다 먼저 붙고 제거되지 않으므로 앱이 뜬 뒤에도 유효하다.

   로고는 **data URI 로 인라인한다(2.4KB / 2.6KB).** 별도 <img src> 였을 때
   "OS 스플래시 → 흰 화면 → 로고" 점멸이 났다: 렌더를 막는 건 이 CSS 뿐이라 첫 페인트가
   "흰 배경 + 로고 없음" 으로 나가는데, 브라우저가 만든 PWA 런치 스플래시는 바로 그 첫 페인트에
   걷힌다. 결과적으로 로고가 없는 프레임이 그대로 노출됐다. CSS 안에 있으면 첫 페인트에
   로고가 반드시 포함되므로 구조적으로 그 창이 생기지 않는다. (2026-08-12) */

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

/* 부팅 전 화면이라 CSS 변수를 쓸 수 없다 — design.md §3.1 `surface/0` 리터럴 고정.
   light #FFFFFF · dark #0A0A0C (index.html 의 theme-color 인라인 스크립트가 이미
   <html data-theme> 를 세팅한 뒤라 여기서 바로 분기할 수 있다). */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0a0a0c;
}

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;
}

html[data-theme="dark"] #splash-screen {
  background: #0a0a0c;
}

/* 96px 고정 폭 + 원본 비율(196x80) 을 aspect-ratio 로 예약한다. 예전엔 height 가 없어
   로드 전 높이가 0 이었고, 로고가 뜨는 순간 세로로 ~20px 밀렸다. */
.splash-logo {
  width: 96px;
  aspect-ratio: 196 / 80;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/png;base64,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");
}

html[data-theme="dark"] .splash-logo {
  background-image: url("data:image/png;base64,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");
}

/* 로고에 등장 모션을 두지 않는다(2026-08-12 사용자 결정). 스피너를 뺀 것과 같은 이유다 —
   정적 스플래시와 BoniLoader 는 서로를 이어받는 두 구현이라, 한쪽만 움직이면 교대 순간
   상태가 어긋나 "로딩이 두 번" 으로 보인다. 정지 그림이면 교대해도 픽셀이 변하지 않는다. */

/* 부팅이 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;
}
html[data-theme="dark"] .splash-note p {
  color: #a1a1aa;
}
.splash-note button {
  border: 0;
  padding: 10px 20px;
  border-radius: 56px;
  background: #c127df;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
