html,body{margin:0;background:var(--color-surface)}
#app-startup{display:none;font-family:'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;color:var(--color-ink)}
html[data-app-state=loading] #root{display:none}
html[data-app-state=loading] #app-startup{display:flex;min-height:100vh;min-height:100svh;align-items:center;justify-content:center;padding:32px}
.startup-loading{text-align:center;width:240px;max-width:100%}
.startup-mascot{position:relative;width:88px;height:80px;margin:0 auto 16px}
.startup-mascot img{position:absolute;left:15px;bottom:14px;width:58px;height:44px;object-fit:contain;transform-origin:50% 90%;animation:startup-mochi-hop 1.1s ease-in-out infinite}
.startup-mascot:after{content:'';position:absolute;left:25px;bottom:6px;width:38px;height:5px;border-radius:50%;background:color-mix(in srgb, var(--color-ink) 13%, transparent);animation:startup-mochi-shadow 1.1s ease-in-out infinite}
.startup-brand{margin:0;font-size:26px;font-weight:800;letter-spacing:-1px}
.startup-loading p{margin:14px 0 24px;font-size:13px;color:var(--color-muted);line-height:1.7}
.startup-progress{height:4px;overflow:hidden;border-radius:4px;background:var(--color-subtle)}
.startup-progress:after{content:'';display:block;width:40%;height:100%;border-radius:inherit;background:var(--color-ink);animation:startup-progress 1.2s ease-in-out infinite alternate}
.startup-error{display:none}
html[data-app-state=failed] #app-startup{display:block;max-width:900px;margin:24px auto 0;padding:24px}
html[data-app-state=failed] .startup-loading{display:none}
html[data-app-state=failed] .startup-error{display:block;border:1px solid var(--color-line);border-radius:12px;padding:24px;line-height:1.8}
.startup-error h2{font-size:20px;margin:0 0 8px}
.startup-error p{font-size:14px;color:var(--color-muted);margin:0 0 16px}
.startup-error a{display:inline-block;margin-right:20px;font-size:14px;color:var(--color-ink);text-underline-offset:4px}
html:not([data-app-state=ready]) #root>main{font-family:'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;color:var(--color-ink);max-width:950px;margin:auto;line-height:1.8}
html:not([data-app-state=ready]) #root>main h1{font-size:26px;line-height:1.5}
html:not([data-app-state=ready]) #root>main a{color:var(--color-ink);text-underline-offset:4px}
@keyframes startup-progress{from{transform:translateX(0)}to{transform:translateX(150%)}}
@keyframes startup-mochi-hop{0%,100%{transform:translateY(0) scale(1.06,.94) rotate(-6deg)}45%{transform:translateY(-17px) scale(.98,1.03) rotate(2deg)}75%{transform:translateY(0) scale(1.08,.92) rotate(-6deg)}}
@keyframes startup-mochi-shadow{0%,75%,100%{transform:scaleX(1);opacity:1}45%{transform:scaleX(.65);opacity:.45}}
@media(prefers-reduced-motion:reduce){.startup-mascot img,.startup-mascot:after{animation:none}.startup-mascot img{transform:rotate(-6deg)}.startup-progress:after{animation:none;width:100%;opacity:.6}}