AI 보조 온보딩

<div class="stage"><div class="label">SETUP FROM ONE GOAL</div><div class="prompt">I WANT TO LAUNCH A TEAM PROJECT</div><div class="setup"><span>GOAL</span><span>WORKSPACE</span><span>TEAM</span><span>VIEW</span><span>RESULT</span></div><div class="hint">SUGGESTED STEPS, USER CAN EDIT</div></div>

.stage{position:relative;width:min(94vw,760px);height:min(88vh,310px);font:800 clamp(10px,max(3.4vmin,1vw),15px)/1.25 sans-serif}.stage *{box-sizing:border-box}.label{font-size:clamp(10px,max(3.4vmin,1vw),12px);letter-spacing:.1em;color:var(--muted)}.accent{color:var(--accent)}.pill{border:1.5px solid var(--fg);border-radius:999px;background:var(--surface);padding:.5em .8em}.hint{position:absolute;right:2%;bottom:0;font-size:clamp(10px,max(3.4vmin,1vw),12px);color:var(--muted)}.prompt{position:absolute;left:4%;right:4%;top:19%;padding:clamp(8px,2.5vmin,18px);border:2px solid var(--fg);background:var(--surface);font-size:clamp(10px,max(3.4vmin,1vw),14px)}.prompt:after{content:'';display:inline-block;width:2px;height:1em;margin-left:.4em;vertical-align:middle;background:var(--accent);animation:blink .6s steps(1) infinite}.setup{position:absolute;left:3%;right:3%;top:55%;display:flex;gap:1%}.setup span{flex:1;text-align:center;padding:clamp(7px,2vmin,15px) 0;border:2px solid var(--fg);background:var(--surface);font-size:clamp(10px,max(3.4vmin,1vw),12px);animation:fillstep 5s infinite}.setup span:nth-child(2){animation-delay:.5s}.setup span:nth-child(3){animation-delay:1s}.setup span:nth-child(4){animation-delay:1.5s}.setup span:nth-child(5){animation-delay:2s}@keyframes fillstep{0%,12%{background:var(--surface);color:var(--fg)}35%,87%{background:var(--accent-2);color:#211b19}100%{background:var(--surface)}}@keyframes blink{50%{opacity:0}}