/* SPHERE 로딩 표시 (2026-09-17 · 69번째) — 상자 없음. 가운데: 큰 링 · 큰 제목 · 단계 줄 · 가는 막대. 아래: 작은 글줄. 무채색. */
.sph-loading { position: absolute; inset: 0; z-index: 24; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; box-sizing: border-box; pointer-events: none; color: #ededed; font-family: inherit; }
.sph-loading[hidden], .sph-loading [hidden] { display: none; }
.sph-loading-engine, .sph-loading-scene { background: rgb(14 14 16 / 52%); }   /* backdrop-filter 없음: 소프트웨어 GL(헤드리스 QA)에서 프레임을 굶겨 부팅 대기가 넘쳤다 */
.sph-loading-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(100%, 560px); text-align: center; }
.sph-loading-ring { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgb(255 255 255 / 14%); border-top-color: rgb(255 255 255 / 88%); box-sizing: border-box; animation: sph-loading-turn 1s linear infinite; }
.sph-loading-title { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; overflow-wrap: anywhere; }
.sph-loading-detail { font-size: 13px; line-height: 18px; color: rgb(255 255 255 / 62%); font-variant-numeric: tabular-nums; }
.sph-loading-bar { width: 180px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 14%); overflow: hidden; }
.sph-loading-bar-fill { display: block; height: 100%; width: 4%; background: rgb(255 255 255 / 88%); transition: width .28s ease; }
.sph-loading-foot { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(100% - 32px, 560px); font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 72%); text-shadow: 0 1px 2px rgb(0 0 0 / 60%); pointer-events: none; }
.sph-loading-foot-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sph-loading-spinner { flex: 0 0 14px; width: 14px; height: 14px; border: 2px solid rgb(255 255 255 / 22%); border-top-color: rgb(255 255 255 / 90%); border-radius: 50%; animation: sph-loading-turn .8s linear infinite; box-sizing: border-box; }
.sph-loading-dismiss { flex: 0 0 auto; pointer-events: auto; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; background: rgb(0 0 0 / 40%); color: #eee; padding: 3px 10px; font: inherit; font-size: 12px; line-height: 16px; cursor: pointer; }
.sph-loading-dismiss:hover { background: rgb(0 0 0 / 60%); }
.sph-loading-dismiss:focus-visible { outline: 2px solid #ddd; outline-offset: 3px; }
@keyframes sph-loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sph-loading-ring, .sph-loading-spinner { animation: none; border-style: dotted; } .sph-loading-bar-fill { transition: none; } }
@media (max-width: 720px) { .sph-loading-ring { width: 48px; height: 48px; } .sph-loading-title { font-size: 17px; line-height: 24px; } .sph-loading-foot { bottom: 72px; } }