/* OX 팩토리 — 기다림 화면 · 🎨 디자인 #1 · 2026-10-25
   색은 라이브 :root 와 같은 이름(--o 주황 · --x 그래파이트 · --bg · --ink · --sub · --line)을 쓴다. 클래스는 전부 wa- 로 시작 */
.wa{--wa-o:var(--o,#FF5A1F);--wa-x:var(--x,#1C1C1E);--wa-ink:var(--ink,#1D1F23);--wa-sub:var(--sub,#5B5F66);--wa-line:var(--line,#E4DED3);--wa-skel:#EFEAE1;
 position:relative;display:flex;flex-direction:column;height:100%;min-height:0;color:var(--wa-ink);-webkit-font-smoothing:antialiased}
.wa-status{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--wa-sub);letter-spacing:-.01em;padding:0 2px 12px}
.wa-status i{width:7px;height:7px;border-radius:50%;background:var(--wa-o);animation:wa-pulse 1.4s ease-in-out infinite}
@keyframes wa-pulse{50%{opacity:.25;transform:scale(.7)}}

/* ── A 종이: 내 답이 기획안 한 줄 한 줄로 써진다 ───────────────────────────── */
.wa-sheet{position:relative;flex:1;min-height:0;background:#fff;border-radius:16px;overflow:hidden;
 box-shadow:0 1px 0 var(--wa-line),0 0 0 1px rgba(28,28,30,.04),0 24px 48px -28px rgba(28,28,30,.35);transition:transform .14s}
.wa-sheet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
.wa-sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(#fff 30%,rgba(255,255,255,0));pointer-events:none;z-index:1}
.wa-sheet.shake{transform:translateY(2px) scale(.995)}
.wa-feed{padding:26px 24px 80px;transition:transform .7s cubic-bezier(.3,.7,.2,1);will-change:transform}
.wa-mark{display:block;height:14px;margin-bottom:16px}.wa-mark svg{display:block;height:100%;width:auto}
.wa-title{position:relative;font-size:26px;line-height:1.28;font-weight:800;letter-spacing:-.025em;margin:0 0 12px;min-height:34px;word-break:keep-all}
.wa-idea{position:relative;display:inline;transition:color .3s}
.wa-idea::after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:2.5px;background:var(--wa-o);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.6,0,.3,1)}
.renamed .wa-idea{color:#B9B3A8;font-size:.62em;font-weight:700;display:block;width:max-content;margin-bottom:2px}
.renamed .wa-idea::after{transform:scaleX(1)}
.wa-name{display:block}
.wa-caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--wa-o);vertical-align:-.12em;animation:wa-blink 1s steps(2) infinite}
@keyframes wa-blink{50%{opacity:0}}
.wa-receipt{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px;min-height:16px}
.wa-receipt b{width:16px;height:16px;display:grid;place-items:center;font:800 11px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;border-radius:50%;
 opacity:0;transform:translateY(6px) scale(.6);transition:opacity .22s,transform .32s cubic-bezier(.2,1.5,.4,1)}
.wa-receipt b.on{opacity:1;transform:none}
.wa-receipt .o{box-shadow:inset 0 0 0 2.6px var(--wa-o)}
.wa-receipt .x{color:var(--wa-x)}.wa-receipt .x::before{content:"✕";font-size:12px}
.wa-receipt .q{background:var(--wa-skel);color:#9C958A}.wa-receipt .q::before{content:"?"}
.wa-receipt .t{background:var(--wa-o);color:#fff}.wa-receipt .t::before{content:"✎";font-size:10px}
.wa-sec{margin:0 0 16px}
.wa-sec h3 .t{border-radius:6px;transition:color .35s,background-color .35s}
.wa-sec h3 em{transition:color .35s}
.wa-sec:not(.on) h3 em{color:#D6CFC3}
.wa-sec:not(.on) h3 .t{color:transparent;background-color:var(--wa-skel)}
.wa-sec h3{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:750;letter-spacing:-.015em;margin:0 0 8px}
.wa-sec h3 em{font:700 13px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;font-style:normal;color:var(--wa-o);min-width:18px;font-variant-numeric:tabular-nums}
.wa-tick{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--wa-o);display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.wa-tick svg{width:12px;height:12px}
.wa-sec.done .wa-tick{transform:scale(1)}
.wa-line{position:relative;font-size:14.5px;line-height:1.55;color:var(--wa-sub);padding-left:28px;margin:0 0 4px;word-break:keep-all;min-height:22px}
.wa-line .hl{position:absolute;left:24px;right:auto;top:3px;height:calc(100% - 6px);width:0;background:rgba(255,90,31,.14);border-radius:4px;transition:width .6s cubic-bezier(.5,0,.2,1)}
.wa-line.hlon .hl{width:calc(100% - 24px)}
.wa-line span{position:relative}
.wa-skel{display:block;height:9px;border-radius:9px;background:var(--wa-skel);margin:8px 0 10px 28px;width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.wa-pics{display:flex;gap:8px;padding-left:28px;margin:4px 0 6px;flex-wrap:wrap}
.wa-pics img{width:calc((100% - 16px)/3);max-width:120px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--wa-line);opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.9);
 transition:opacity .25s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.wa-pics img.on{opacity:1;transform:none}
.wa-stamp{position:absolute;top:18px;right:18px;width:92px;opacity:0;transform:scale(1.9) rotate(-14deg);pointer-events:none}
.wa-stamp.on{opacity:1;transform:rotate(-9deg);transition:opacity .12s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.wa-stamp svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 0 rgba(255,90,31,.15))}

/* 날아오는 답 — 누르던 O/X 자리(아래)에서 종이로 */
.wa-fly{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wa-chip{position:absolute;left:50%;bottom:22px;display:flex;align-items:center;gap:8px;max-width:min(86%,420px);background:#fff;border-radius:99px;padding:7px 14px 7px 7px;
 font-size:14px;font-weight:650;color:var(--wa-ink);box-shadow:0 10px 26px -10px rgba(28,28,30,.45),0 0 0 1px rgba(28,28,30,.06);white-space:nowrap;
 transform:translate(-50%,30px);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .3s}
.wa-chip span{overflow:hidden;text-overflow:ellipsis}
.wa-chip b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;color:#fff;background:var(--wa-o)}
.wa-chip b.x{background:var(--wa-x)}.wa-chip b.q{background:#CFC7BA}
.wa-chip.up{transform:translate(-50%,0);opacity:1}
.wa-chip.go{transition:transform .45s cubic-bezier(.6,0,.4,1),opacity .38s .08s}

/* ── B 원: 내 답 하나하나가 스텐실 O 의 한 조각 ─────────────────────────────── */
.wa-ring{align-items:center;justify-content:center;text-align:center;overflow:hidden}
.wa-ring .wa-status{position:absolute;top:0;left:0}
.wa-rtitle{position:relative;font-size:24px;font-weight:800;letter-spacing:-.025em;line-height:1.25;margin:0 0 18px;min-height:30px;word-break:keep-all}
.wa-rtitle.renamed .wa-idea{display:block;width:max-content;margin:0 auto 2px}
.wa-stage{position:relative;width:min(78vw,340px);aspect-ratio:1;transition:transform .7s cubic-bezier(.5,0,.2,1)}
.wa-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wa-seg{fill:none;stroke-linecap:butt;transition:stroke-dashoffset .42s cubic-bezier(.5,0,.3,1)}
.wa-orbit{fill:none;stroke:var(--wa-o);stroke-width:3;stroke-linecap:round;transform-origin:150px 150px;animation:wa-spin 2.6s linear infinite;opacity:0;transition:opacity .5s}
.wa-orbit.on{opacity:1}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.wa-win image{opacity:0;transition:opacity 1.1s;transform-box:fill-box;transform-origin:center}
.wa-win image.on{opacity:1;animation:wa-kb 7s ease-out forwards}
@keyframes wa-kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.wa-xs{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.wa-xs g path{fill:none;stroke:var(--wa-o);stroke-width:32;stroke-linecap:butt;transition:stroke-dashoffset .28s cubic-bezier(.6,0,.3,1)}
.wa-cap{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;margin-top:20px;font-size:15px;font-weight:650;color:var(--wa-ink);max-width:min(88vw,460px)}
.wa-cap>*{transition:opacity .2s,transform .3s}
.wa-cap.swap>*{opacity:0;transform:translateY(6px)}
.wa-cap b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;color:#fff;background:var(--wa-o)}
.wa-cap b.x{background:var(--wa-x)}.wa-cap b.q{background:#CFC7BA}.wa-cap b.t{background:#FF9A73}
.wa-cap span{text-align:left;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.wa-ticks{display:flex;gap:6px;margin-top:14px}
.wa-ticks i{width:18px;height:4px;border-radius:4px;background:var(--wa-skel);position:relative;overflow:hidden}
.wa-ticks i::after{content:"";position:absolute;inset:0;background:var(--wa-o);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.wa-ticks i.on::after{transform:scaleX(1)}
.wa-ticks i.now::after{transform:scaleX(.5);animation:wa-now 1.6s ease-in-out infinite}
@keyframes wa-now{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(.7)}}

@media (min-width:861px){
 .wa-feed{padding:34px 40px 90px}
 .wa-title{font-size:30px}
 .wa-stage{width:380px}
}
/* 움직임 줄이기: 날아오기 · 타이핑 · 흔들림 · 회전을 끄고, 나타남은 짧은 페이드로만 (JS 도 같은 설정을 읽는다) */
@media (prefers-reduced-motion:reduce){
 .wa *,.wa *::before,.wa *::after{animation:none!important;transition-duration:.15s!important;transition-delay:0s!important}
 .wa-pics img,.wa-receipt b{transform:none!important}
 .wa-stamp,.wa-stamp.on{transform:rotate(-9deg)!important}
 .wa-orbit{display:none}
}
.wa.rm *,.wa.rm *::before,.wa.rm *::after{animation:none!important;transition-duration:.15s!important;transition-delay:0s!important}
.wa.rm .wa-pics img,.wa.rm .wa-receipt b{transform:none!important}
.wa.rm .wa-stamp,.wa.rm .wa-stamp.on{transform:rotate(-9deg)!important}
.wa.rm .wa-orbit{display:none}