/* OX 팩토리 — 「진짜로 만들기」 신청(결제 전 임시판) · 🎨 디자인 #1 · 2026-10-25 밤 · 클래스 · 상태 모두 rq-
   스펙 docs/product/request-spec.md(🏭 #9) · 설명 문구 없이: 이름 · 바라는 점 한 줄 · 값 범위 · [신청] */

/* ① 디자인 화면 맨 아래 큰 단추(시안 3개를 본 뒤부터) — 코인 칩 없음 */
.pbar button.rq-cta,button.rq-cta{display:flex;flex:1;max-width:440px;padding:0;align-items:center;justify-content:center;gap:8px;width:100%;height:58px;border:0;border-radius:17px;background:var(--o,#FF5A1F);color:#fff;
 font:inherit;font-size:18px;font-weight:800;letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 26px -14px rgba(255,90,31,.8);transition:filter .15s,transform .1s}
.pbar button.rq-cta:active,button.rq-cta:active{filter:brightness(.94);transform:scale(.99)}
.pbar button.rq-cta span,button.rq-cta span{font-size:22px;line-height:1;margin-top:-2px}
.pbar button.rq-cta.rq-did,button.rq-cta.rq-did{background:#fff;color:var(--ink,#1D1F23);box-shadow:inset 0 0 0 1.5px var(--line,#E4DED3)}
button.rq-cta.rq-did em{font-style:normal;color:var(--o,#FF5A1F)}

/* 단계 막대 · 내 기획 목록의 「신청됨」 */
.rq-tag{display:inline-block;margin-left:6px;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:var(--o,#FF5A1F);border-radius:99px;padding:2px 7px;vertical-align:2px;letter-spacing:0}
.pst i.rq-chip{background:var(--o,#FF5A1F);color:#fff}

/* ② 신청 시트 */
.rq{position:fixed;inset:0;z-index:65;display:flex;align-items:flex-end;justify-content:center}
.rq-dim{position:absolute;inset:0;background:rgba(20,21,24,.5);opacity:0;transition:opacity .25s}
.rq.rq-on .rq-dim{opacity:1}
.rq-box{position:relative;width:100%;max-width:440px;max-height:94dvh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
 transform:translateY(100%);transition:transform .42s cubic-bezier(.2,1,.3,1);box-shadow:0 -10px 40px -18px rgba(0,0,0,.35)}
.rq.rq-on .rq-box{transform:none}
.rq.rq-out .rq-box{transform:translateY(100%);transition:transform .28s cubic-bezier(.5,0,.75,.3)}
.rq.rq-out .rq-dim{opacity:0}
.rq-grab{width:40px;height:5px;border-radius:5px;background:#E6E0D6;margin:0 auto 12px}
.rq-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F4F1EB;color:#5B5F66;font-size:18px;line-height:36px;cursor:pointer;z-index:2}
.rq-pic{margin:4px 0 14px;border-radius:20px;overflow:hidden;background:#F3EFE8;aspect-ratio:16/10;max-height:30dvh;width:100%}
.rq-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rq-name{font-size:25px;font-weight:850;letter-spacing:-.035em;line-height:1.25;color:var(--ink,#1D1F23);margin:0 2px 14px;word-break:keep-all}
.rq-in{display:block;width:100%;height:56px;border:0;border-radius:15px;background:#F7F4EE;padding:0 16px;font:inherit;font-size:16.5px;color:var(--ink,#1D1F23);outline:none;transition:box-shadow .15s}
.rq-in::placeholder{color:#A9A297}
.rq-in:focus{box-shadow:0 0 0 2px var(--o,#FF5A1F);background:#fff}
.rq-ways{display:flex;gap:6px;margin:10px 0 8px}
.rq-ways button{flex:1;height:40px;border:0;border-radius:12px;background:#F7F4EE;font:inherit;font-size:14.5px;font-weight:700;color:#5B5F66;cursor:pointer}
.rq-ways button.on{background:var(--x,#1C1C1E);color:#fff}
.rq-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:18px 2px 16px}
.rq-price b{font-size:23px;font-weight:850;letter-spacing:-.03em;color:var(--ink,#1D1F23)}
.rq-price span{font-size:14.5px;font-weight:600;color:#8D867B}
.rq-send{display:flex;align-items:center;justify-content:center;width:100%;height:60px;border:0;border-radius:17px;background:var(--o,#FF5A1F);color:#fff;font:inherit;font-size:18.5px;font-weight:800;cursor:pointer;transition:filter .15s,transform .1s}
.rq-send:active{filter:brightness(.94);transform:scale(.99)}
.rq-send:disabled{opacity:.7}
.rq-send i{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:rq-spin .7s linear infinite}
@keyframes rq-spin{to{transform:rotate(360deg)}}

/* ③ 신청 뒤 — 「신청했어요」 (#buildv 안 · 다시 들어와도 같은 화면) */
.rq-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 16px 36px;max-width:440px;margin:0 auto}
.rq-bot{position:relative;width:250px;height:217px}
.rq-bot img{width:100%;height:100%;object-fit:contain;animation:rq-pop .6s cubic-bezier(.25,1.5,.45,1) both}
@keyframes rq-pop{from{opacity:0;transform:translateY(20px) scale(.88)}to{opacity:1;transform:none}}
.rq-ok{position:absolute;right:18px;top:20px;width:46px;height:46px;border-radius:50%;background:var(--o,#FF5A1F);display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg,#F7F4EE);animation:rq-pop .5s .35s cubic-bezier(.3,1.7,.5,1) both}
.rq-ok svg{width:24px;height:24px}
.rq-done h2{margin:10px 0 6px;font-size:27px;font-weight:850;letter-spacing:-.035em;color:var(--ink,#1D1F23)}
.rq-done p{margin:0 0 22px;font-size:16.5px;color:#6B6F76}
.rq-card{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border-radius:18px;padding:10px 14px 10px 10px;box-shadow:0 1px 0 var(--line,#E4DED3),0 0 0 1px rgba(28,28,30,.04);text-align:left}
.rq-card img{width:56px;height:56px;border-radius:12px;object-fit:cover;object-position:50% 25%;flex:none}
.rq-card b{flex:1;min-width:0;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink,#1D1F23);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ④ 코인으로 「진짜로 만들기」(T8 ⓐ · 📈 #4 coin-build-spec) — 제작 탭 한 장 안: 값 줄 → 코인 막대 → 단추 */
.rq-cb .rq-in.rq-note{margin-bottom:2px}
.rq-cbk{margin:18px 2px 16px}
.rq-cp{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.rq-cp b{font-size:23px;font-weight:850;letter-spacing:-.03em;color:var(--ink,#1D1F23)}
.rq-cp span{font-size:15.5px;font-weight:700;color:#8D867B}
.rq-cp span::before{content:'· ';color:#C9C2B6}
.rq-sk i{display:block;height:26px;width:96px;border-radius:9px;background:linear-gradient(90deg,#F1ECE3,#F8F5EF,#F1ECE3);background-size:200% 100%;animation:rq-sk 1.2s linear infinite}.rq-sk i+i{width:64px;height:18px}
@keyframes rq-sk{to{background-position:-200% 0}}
.rq-pt{font-style:normal;font-size:12px;font-weight:800;color:#6B6F76;border:1.5px solid #E4DED3;border-radius:99px;padding:2px 8px 1px;line-height:1.4}
.rq-pt.rq-fix{color:#fff;background:var(--x,#1C1C1E);border-color:var(--x,#1C1C1E)}
.rq-first{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:10px 0 0;padding:11px 13px;border-radius:14px;background:#FFF4EC}
.rq-first b{font-size:14.5px;font-weight:850;color:var(--o,#FF5A1F)}
.rq-first span{font-size:15.5px;font-weight:750;color:var(--ink,#1D1F23)}
.rq-held{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 10px 10px 14px;border-radius:14px;background:#F4F1EB;font-size:15px;font-weight:700;color:var(--ink,#1D1F23)}
.rq-held span{flex:1}
.rq-ask{border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px #E4DED3;height:36px;padding:0 14px;font:inherit;font-size:14px;font-weight:800;color:var(--ink,#1D1F23);cursor:pointer}
/* 코인 막대 — 코인 색(금) · 다 차면 한 번 반짝 */
.rq-gain{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:14px 0 -6px;font-size:13.5px;font-weight:750;color:#8D867B;animation:rq-pop .5s .2s cubic-bezier(.3,1.6,.5,1) both}
.rq-gain b{font-size:16px;font-weight:900;color:#B7791F;background:#FFF6D6;border-radius:99px;padding:1px 9px}
.rq-gain span::before{content:'· ';color:#C9C2B6}
.rq-gain i{font-style:normal;font-weight:900;color:var(--o,#FF5A1F)}
.rq-bar{position:relative;height:14px;margin:14px 0 9px;border-radius:99px;background:#F1ECE3;overflow:hidden}
.rq-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);min-width:14px;border-radius:99px;background:linear-gradient(90deg,#FFD866,#F2B527 55%,#E39A0A);box-shadow:inset 0 -2px 0 rgba(150,95,0,.18);transition:width .9s cubic-bezier(.25,1,.35,1)}
.rq-bar.rq-full i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);background-size:220% 100%;animation:rq-shine 1.1s .9s ease-out 1 both}
@keyframes rq-shine{from{background-position:120% 0}to{background-position:-120% 0}}
.rq-bl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:15px}
.rq-coin{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,#F2B527 60%,#C98A0B);box-shadow:inset 0 0 0 1.5px rgba(150,95,0,.35);flex:none}
.rq-have{font-size:17px;font-weight:900;color:var(--ink,#1D1F23);font-variant-numeric:tabular-nums}
.rq-of{font-weight:700;color:#8D867B;font-variant-numeric:tabular-nums}
.rq-st{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:#5B5F66;background:#F4F1EB;border-radius:99px;padding:4px 10px;white-space:nowrap}
.rq-st.rq-live{color:var(--o,#FF5A1F);background:#FFF0E7;display:inline-flex;align-items:center;gap:6px}
.rq-st.rq-live::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;animation:rq-blink 1.2s ease-in-out infinite}
@keyframes rq-blink{50%{opacity:.25}}
/* 대기 명단(🏭 #9 0-1절) — 상태 줄 하나: 대기 N번째(앞사람 점 · 나 주황) · 차례(주황 · 깜빡) · 견적 보관(회색) */
.rq-q{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:13px 14px;border-radius:15px;background:#F4F1EB;font-size:18px;font-weight:850;letter-spacing:-.02em;color:var(--ink,#1D1F23)}
.rq-q.rq-on{background:#FFF0E7;color:var(--o,#FF5A1F)}
.rq-q.rq-on em{width:10px;height:10px;border-radius:50%;background:currentColor;flex:none;animation:rq-blink 1.2s ease-in-out infinite}
.rq-q.rq-off{font-size:16px;font-weight:800;color:#5B5F66}
.rq-line{display:inline-flex;align-items:center;gap:4px;flex:none}
.rq-line i{width:12px;height:12px;border-radius:50%;background:#CFC8BC}
.rq-line u{text-decoration:none;font-size:13px;font-weight:900;color:#A9A297;margin:0 1px}
.rq-line b{width:16px;height:16px;border-radius:50%;background:var(--o,#FF5A1F);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
.rq-st.rq-more{color:var(--o,#FF5A1F);background:#FFF0E7}
/* 신청 취소 — 작게, 누르면 그 자리에서 한 번 묻기 */
.rq-cx{display:block;margin:12px auto -4px;border:0;background:none;padding:6px 10px;font:inherit;font-size:14px;font-weight:700;color:#A9A297;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#DDD6CA}
.rq-sure{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:12px;border-radius:15px;background:#F7F4EE;animation:rq-pop .35s cubic-bezier(.3,1.4,.5,1) both}
.rq-sure span{flex:1 0 100%;font-size:15.5px;font-weight:800;color:var(--ink,#1D1F23);margin:0 2px 2px}
.rq-sure .rq-sh2{flex:1;height:46px;font-size:15.5px}
.rq-sure .rq-yes{background:var(--x,#1C1C1E);color:#fff;box-shadow:none}
/* 탭 · 내 기획 칩 — 대기 N(검정) · 차례(주황 + 빨간 점) · 견적 ✓ · 확인 필요(회색) */
.rq-tag.rq-wait,.pst i.rq-chip.rq-wait{background:var(--x,#1C1C1E);color:#fff}
.rq-tag.rq-soft,.pst i.rq-chip.rq-soft{background:#EEEAE2;color:#5B5F66}
.rq-tag.rq-turn,.pst i.rq-chip.rq-turn{position:relative}
.rq-tag.rq-turn::after,.pst i.rq-chip.rq-turn::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#E5243B;box-shadow:0 0 0 2px #fff}

/* 열린 뒤(🏭 #9 단계) */
.rq-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 2px}
.rq-steps span{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:750;color:#A9A297;text-align:center}
.rq-steps i{display:block;height:8px;border-radius:99px;background:#F1ECE3}
.rq-steps .ok{color:#5B5F66}.rq-steps .ok i{background:var(--x,#1C1C1E)}
.rq-steps .on{color:var(--o,#FF5A1F);font-weight:850}.rq-steps .on i{background:var(--o,#FF5A1F);animation:rq-blink 1.6s ease-in-out infinite}
/* 단추 — 주황 하나 + 흰 하나(있을 때만) · 「동사 + 코인」 */
.rq-btns{display:flex;flex-direction:column;gap:10px}
.rq-btns:empty{display:none}
.rq-run{margin:8px 0 0;font-size:14px;font-weight:700;color:#8D867B}
.rq-nb{margin:-4px 0 2px;text-align:center;font-size:13px;line-height:1.4;color:var(--sub,#5B5F66)}
.rq-sh2{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line,#E4DED3);color:var(--ink,#1D1F23);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.rq-sh2:active{background:#FAF8F4}
.rq-cc{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px 2px 4px;border-radius:99px;background:rgba(127,127,127,.16);font-size:.84em;font-weight:850;line-height:1.45}
.rq-cc::before{content:'';width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1A8,#F2B527 55%,#B87A06)}
.rq-send .rq-cc{background:rgba(255,255,255,.24)}
/* 신청 뒤 머리 — 로봇은 작게, 카드는 한 장 안에 */
.rq-done.rq-sm{padding:0 16px 6px}
.rq-done.rq-sm .rq-bot{width:170px;height:148px}
.rq-done.rq-sm .rq-ok{right:8px;top:12px;width:38px;height:38px}
.rq-done.rq-sm h2{margin:6px 0 4px;font-size:24px}
.rq-done.rq-sm p{margin:0 0 14px;font-size:15.5px}
.rq-cb .rq-card{box-shadow:none;padding:2px 0 0;border-radius:0}
.rq-cb.rq-in1{animation:rq-pop .5s .1s cubic-bezier(.25,1.3,.45,1) both}

@media (min-width:861px){
 .rq{align-items:center}
 .rq-box{border-radius:28px;padding:18px 22px 22px;transform:translateY(24px) scale(.96);opacity:0;transition:transform .4s cubic-bezier(.2,1.2,.3,1),opacity .2s}
 .rq.rq-on .rq-box{transform:none;opacity:1}
 .rq.rq-out .rq-box{transform:scale(.96);opacity:0}
 .rq-grab{display:none}
}
@media (prefers-reduced-motion:reduce){.rq *,.rq,.rq-done *,.rq-cb,.rq-cb *{animation:none!important;transition-duration:.12s!important}.rq-box,.rq.rq-on .rq-box{transform:none!important}}