/* OX 팩토리 — 진행에 따라 생기는 탭 · 다음 단계 제안 · 🎨 디자인 #1 · 2026-10-25 밤 · 클래스 st2-
   대표님 T7: 「처음엔 다 기획하는 줄 알고 하다가, 끝나면 『디자인 해 볼까요?』 → 디자인 탭이 생기고, 『제작해 볼까요?』 → 제작 탭.
   머리에 쓰는 우산이면 제작 추천 자체가 안 가니 제작 탭이 안 생긴다」 */

/* 탭 — 두 개 이상일 때만 보인다(기획만 있으면 탭 없음) */
.st2-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:#EFEAE1}
.st2-tabs button{position:relative;border:0;background:none;border-radius:99px;padding:7px 16px;font:inherit;font-size:14.5px;font-weight:750;color:#7A746A;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.st2-tabs button.on{background:#fff;color:var(--ink,#1D1F23);box-shadow:0 1px 3px rgba(28,28,30,.12)}
.st2-tabs button.st2-new{animation:st2-in .55s cubic-bezier(.3,1.6,.5,1)}
.st2-tabs.st2-enter{animation:st2-row .5s cubic-bezier(.2,1.2,.3,1)}  /* 탭 줄이 처음 생기는 순간(기획 하나 → 기획 · 디자인) */
@keyframes st2-row{from{opacity:0;transform:translateY(-10px) scale(.9)}to{opacity:1;transform:none}}
.st2-tabs button.st2-new::after{content:"";position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--o,#FF5A1F)}
.st2-tabs button.st2-new.on::after{display:none}
@keyframes st2-in{0%{transform:scale(.4);opacity:0;max-width:0}60%{opacity:1}100%{transform:none;max-width:140px}}
body.st2-none .bflow{display:none!important}
body.st2-none .tflow{visibility:hidden}
.flow .st2-tabs{font-size:inherit}
.bflow .st2-tabs{margin:0 auto}

/* 다음 단계 제안 — 🏭 #9 스펙 v2: 팝업으로 막지 않고 · 「아니요」 없이 · 그 화면 맨 아래에 남는다(누를 때까지)
   크게: 로봇이 막대 위로 고개를 내밀고, 질문은 굵게, 단추는 크게. 화면 내용은 그대로 스크롤된다 */
.st2-bar{position:fixed;left:0;right:0;bottom:0;z-index:54;margin:0 auto;max-width:640px;min-height:92px;display:flex;align-items:center;gap:12px;
 padding:14px 14px calc(14px + env(safe-area-inset-bottom)) 118px;background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -10px 34px -16px rgba(0,0,0,.28),0 -1px 0 var(--line,#E4DED3);
 transform:translateY(130%);transition:transform .5s cubic-bezier(.2,1.15,.3,1)}
.st2-bar.on{transform:none}
.st2-bar .st2-bot{position:absolute;left:4px;bottom:calc(10px + env(safe-area-inset-bottom));width:112px;height:97px;object-fit:contain;transform-origin:50% 100%}
.st2-bar.on .st2-bot{animation:st2-peek .7s .25s cubic-bezier(.25,1.6,.45,1) both}
@keyframes st2-peek{from{opacity:0;transform:translateY(34px) scale(.8)}to{opacity:1;transform:none}}
.st2-bar .st2-q{flex:1;min-width:0;margin:0;font-size:19.5px;font-weight:850;letter-spacing:-.03em;line-height:1.25;color:var(--ink,#1D1F23);text-align:left;word-break:keep-all}
.st2-bar .st2-yes{flex:none;width:auto;height:54px;padding:0 22px;border-radius:16px;font-size:17.5px}
.st2-yes{display:flex;align-items:center;justify-content:center;border:0;background:var(--o,#FF5A1F);color:#fff;font:inherit;font-weight:800;cursor:pointer;transition:filter .15s,transform .1s}
.st2-yes:active{filter:brightness(.94);transform:scale(.98)}
.st2-bar.on .st2-yes{animation:st2-nudge 2.8s 1.4s ease-in-out infinite}
@keyframes st2-nudge{0%,86%,100%{transform:none}90%{transform:scale(1.06)}95%{transform:scale(.98)}}
/* 물건 · 끝 — 끝난 느낌: 신난 로봇 + 꽃가루 한 번 + 「공유」 */
.st2-bar.st2-done{background:linear-gradient(180deg,#FFF7F2,#fff 60%)}
.st2-confetti{position:absolute;left:60px;top:-10px;width:0;height:0;pointer-events:none}
.st2-confetti b{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}
.st2-bar.on .st2-confetti b{animation:st2-cf 1.2s .45s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes st2-cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.st2-pad{height:130px}  /* 막대에 가리지 않게 화면 끝에 빈칸 */

/* 제작 탭 안 — 신청 칸(시트 대신 탭 안에 바로) */
.rq-form{max-width:440px;margin:6px auto 30px;background:#fff;border-radius:24px;padding:14px 16px 18px;box-shadow:0 1px 0 var(--line,#E4DED3),0 0 0 1px rgba(28,28,30,.04)}

@media (min-width:861px){.st2-bar{bottom:20px;border-radius:24px;max-width:560px}}
@media (prefers-reduced-motion:reduce){.st2-bar,.st2-bar *,.st2-tabs,.st2-tabs button{animation:none!important;transition-duration:.12s!important}.st2-bar.on{transform:none!important}}