/* 두루미 놀이터 · 테스트 진행·결과 공통 화면의 B급 포스터(카드뉴스) 톤 — bposter.css 와 같은 토큰을 써요(해당 파일 뒤에 불러요).
   범위: ① 문항 화면(#v-quiz: 진행 바 · 문항 번호 · 문항 글 · 선택지) ② 로딩(#v-loading) ③ 결과 화면 '카드 바깥' 영역(.rbtns · .topacts · .bridge · .pair-ticket · .nexttests).
   하지 않는 것: 결과 카드 안쪽(.c2 · .rtop · .rbody 본문 — Card v2/폴백 영역), 테스트별 테마 색(crush-quiz · et-quiz 의 선택지 톤은 그대로).
   접근성: 눌리는 곳은 기존 44px 이상 유지 · 글자색은 어두운 잉크(#2b2436) 대 밝은 바탕 · 움직임 줄이기에서는 기울임·전환을 꺼요. */
:root{--bp-ink:#2b2436;--bp-yellow:#ffe46b;--bp-pink:#ffb7d1;--bp-mint:#bdecd6;--bp-lav:#dccffb;--bp-shadow:4px 5px 0 rgba(43,36,54,.22)}

/* ① 문항 화면 */
#v-quiz .progress{height:16px;margin-bottom:12px;border:2px solid var(--bp-ink);border-radius:99px;background:#fff;box-shadow:2px 3px 0 rgba(43,36,54,.2)}
#v-quiz .progress i{background:repeating-linear-gradient(135deg,#ffe46b 0 9px,#ffd23a 9px 18px);box-shadow:inset -2px 0 0 var(--bp-ink)}
#v-quiz .qrow .qnum{display:inline-block;padding:3px 10px;border:2px solid var(--bp-ink);border-radius:8px;background:var(--bp-yellow);color:var(--bp-ink);font-size:13px;font-weight:900;transform:rotate(-2deg);box-shadow:2px 3px 0 rgba(43,36,54,.22)}
#v-quiz .qreact{border:2px solid var(--bp-ink);background:var(--bp-mint);color:var(--bp-ink);font-weight:800}
#v-quiz .qprev{color:var(--bp-ink);font-weight:800}
#v-quiz .qtitle{padding:16px 16px 17px;border:2px solid var(--bp-ink);border-radius:18px;font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--bp-ink);box-shadow:var(--bp-shadow);
  background:linear-gradient(rgba(43,36,54,.045) 1px,transparent 1px) 0 0/100% 9px,linear-gradient(90deg,rgba(43,36,54,.045) 1px,transparent 1px) 0 0/9px 100%,#fffdf6}
#v-quiz .qnote{border:2px dashed var(--bp-ink);background:#fff6c2;color:var(--bp-ink)}
#v-quiz .opt{border:2px solid var(--bp-ink);border-radius:16px;color:var(--bp-ink);box-shadow:3px 4px 0 rgba(43,36,54,.2)}
#v-quiz .opt:not([data-choice-tone]){background:#fff}
#v-quiz .opt b{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);font-weight:900;line-height:22px}
#v-quiz #opts .opt:active,#v-quiz #opts .opt.sel{border-color:var(--bp-ink);background:#fff3b0;box-shadow:1px 2px 0 rgba(43,36,54,.25)}
#v-quiz #opts .opt.sel b{background:var(--bp-ink);color:var(--bp-yellow)}
#v-quiz #opts.picked .opt:not(.sel){opacity:.55}

/* ② 로딩 */
#v-loading .loading p{display:inline-block;max-width:92%;padding:8px 16px;border:2px solid var(--bp-ink);border-radius:14px;background:#fff;color:var(--bp-ink);font-size:19px;box-shadow:var(--bp-shadow);transform:rotate(-1deg)}
#v-loading .loading-card{border:2px solid var(--bp-ink);background:linear-gradient(145deg,var(--bp-pink),var(--bp-lav));box-shadow:2px 3px 0 rgba(43,36,54,.22)}
#v-loading .receipt{border:2px dashed var(--bp-ink);border-bottom:0;background:#fffdf5;color:var(--bp-ink)}

/* ③ 결과 화면 카드 바깥 — 카드 테두리 · 단추 · 이어서 타로 카드 · 쌍 티켓 · 이어서 해 볼 테스트 */
#v-tresult .rcard,#v-result .rcard{border:2px solid var(--bp-ink);box-shadow:7px 8px 0 rgba(43,36,54,.16)}
#v-tresult .rbtns .btn.ghost,#v-result .rbtns .btn.ghost,#v-tresult .topacts .btn.ghost{border:2px solid var(--bp-ink);background:#fff;color:var(--bp-ink);font-weight:800;box-shadow:3px 4px 0 rgba(43,36,54,.2)}
#v-tresult .rbtns .btn.ghost:active,#v-result .rbtns .btn.ghost:active,#v-tresult .topacts .btn.ghost:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(43,36,54,.2)}
#v-tresult .btn.gold,#v-result .btn.gold,#v-tresult .bridge .btn.gold,#v-result .bridge .btn.gold{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);font-weight:900;box-shadow:4px 5px 0 rgba(43,36,54,.3)}
#v-tresult .btn.gold:active,#v-result .btn.gold:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(43,36,54,.3)}
#v-tresult .img-formats button,#v-result .img-formats button{border:2px solid var(--bp-ink);border-radius:12px;background:#fff;color:var(--bp-ink);font-weight:800}
#v-tresult details.mini.more>summary,#v-result details.mini.more>summary{border:2px dashed var(--bp-ink);border-radius:14px;color:var(--bp-ink);font-weight:800}
#v-tresult .bridge,#v-result .bridge{border:2px solid var(--bp-ink);border-radius:24px;box-shadow:6px 7px 0 rgba(43,36,54,.22)}
#v-tresult .bridge h3,#v-result .bridge h3{color:var(--bp-yellow);letter-spacing:-.04em}
#v-tresult .bridge li,#v-result .bridge li{border:1.5px solid rgba(255,228,107,.4)}
#v-tresult .pair-ticket,#v-result .pair-ticket{border:2px solid var(--bp-ink);border-radius:18px;background:linear-gradient(135deg,#fff3b0,#ffe9c7);box-shadow:3px 4px 0 rgba(43,36,54,.2)}
.nexttests>h3{display:inline-block;margin:0 0 10px;padding:5px 12px;border:2px solid var(--bp-ink);border-radius:10px;background:var(--bp-yellow);color:var(--bp-ink);font-size:16px;font-weight:900;transform:rotate(-1.5deg);box-shadow:2px 3px 0 rgba(43,36,54,.22)}
.nexttests .tcard{border:2px solid var(--bp-ink);border-radius:16px;background:#fff;box-shadow:3px 4px 0 rgba(43,36,54,.2)}
.nexttests .tcard h3{color:var(--bp-ink);font-weight:900}
.nexttests .nwhy{border-top:2px dashed rgba(43,36,54,.35);color:#7a2f1c}
.hl-card{border:2px solid var(--bp-ink);border-radius:18px;box-shadow:4px 5px 0 rgba(43,36,54,.24)}
.hl-card .hl-go{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);font-weight:900;box-shadow:3px 4px 0 rgba(0,0,0,.35)}
.bonus{border:2px solid var(--bp-ink);box-shadow:3px 4px 0 rgba(43,36,54,.18)}
.bonus>summary{color:var(--bp-ink)}

/* ④ 도감 — '???' 빗금 종이 · 칸 윤곽 · 상세 모달(포스터 카드) */
#v-dex .dx{border:2px solid var(--bp-ink);border-radius:14px;box-shadow:2px 3px 0 rgba(43,36,54,.18)}
#v-dex .dx.lockd{border-style:dashed;border-color:rgba(43,36,54,.55);background:repeating-linear-gradient(135deg,#f6efe6 0 7px,#ece3d3 7px 14px);box-shadow:none}
#v-dex .dx.lockd b{color:var(--bp-ink)}
#v-dex .dxrecent .rl button{border:2px solid var(--bp-ink);background:#fff;box-shadow:2px 3px 0 rgba(43,36,54,.18)}
.dxmodal .dxcard{border:2px solid var(--bp-ink);border-radius:22px;background:#fffdf6;box-shadow:6px 7px 0 rgba(0,0,0,.4)}
.dxmodal .dxcard h3{display:inline-block;padding:3px 12px;border:2px solid var(--bp-ink);border-radius:10px;background:var(--bp-yellow);color:var(--bp-ink);transform:rotate(-1.5deg)}

/* ⑤ 하단 고정 막대('오늘의 뽑기' · fx/sticky) · 거울 결과의 상품 줄(.prod) */
.prod{box-shadow:3px 4px 0 rgba(0,0,0,.35)}
.prod .pp{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);font-weight:900}

/* ⑥ 야시장 천막 안쪽 화면 */
body.bp-market .tent-title{display:inline-block;padding:2px 12px;border:2px solid var(--bp-ink);border-radius:12px;background:var(--bp-yellow);color:var(--bp-ink);transform:rotate(-1deg);box-shadow:3px 4px 0 rgba(0,0,0,.35)}
body.bp-market .tback{border:2px solid var(--bp-ink);background:#fff;color:var(--bp-ink);box-shadow:2px 3px 0 rgba(0,0,0,.3)}
body.bp-market .nmbtn{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);font-weight:900;box-shadow:3px 4px 0 rgba(0,0,0,.4)}
body.bp-market .nmbtn.ghost{background:#fff;color:var(--bp-ink)}
body.bp-market .nmbtn:active:not(:disabled){transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
body.bp-market .nmcard,body.bp-market .tent-msg,body.bp-market .wtheme{border:2px solid rgba(255,228,107,.65);box-shadow:3px 4px 0 rgba(0,0,0,.35)}
body.bp-market .tent-say .sb,body.bp-market .mbubble{border:2px solid var(--bp-ink)}

/* ⑦ 내 기록: JS 로 그려지는 칸 · 풀이 보관함 · 업적 토스트/시트 */
body.bp-me .sum div,body.bp-me ul.list li,body.bp-me .chips li,body.bp-me .tb{border:2px solid var(--bp-ink);border-radius:14px;box-shadow:2px 3px 0 rgba(43,36,54,.16)}
body.bp-me .tb summary{font-weight:800;color:var(--bp-ink)}
body.bp-me .vt{border:2px solid var(--bp-ink);border-radius:14px}

/* ⑧ 도감 완성 도장 · NEW 도장 */
#v-dex .dxs .dxh{position:relative}
#v-dex .dxs.done .dxh::after{content:"완성";position:absolute;right:56px;top:-6px;padding:2px 9px;border:3px double #c23e25;border-radius:8px;background:rgba(255,255,255,.7);color:#c23e25;font:900 15px/1.2 Jua,sans-serif;letter-spacing:.06em;transform:rotate(-9deg);pointer-events:none}
#v-dex .dxs.done.pop .dxh::after{animation:dx-stamp .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dx-stamp{0%{transform:rotate(-9deg) scale(2.6);opacity:0}70%{transform:rotate(-9deg) scale(.92);opacity:1}100%{transform:rotate(-9deg) scale(1)}}
#v-dex .dx .dxnew{border:2px solid var(--bp-ink);background:var(--bp-yellow);color:var(--bp-ink);transform:rotate(9deg);box-shadow:1px 2px 0 rgba(43,36,54,.3);animation:dx-new .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes dx-new{0%{transform:rotate(9deg) scale(2);opacity:0}100%{transform:rotate(9deg) scale(1);opacity:1}}

/* ⑨ 야시장 천막 안쪽 — 천막마다 다른 조작 칸(취향 선택지 · 소원등 · 포토부스 · 습관 · 게시판)을 같은 포스터 외곽선·그림자·노란 질문 카드로 */
body.bp-market .nmt-opt,body.bp-market .nml-b,body.bp-market .nml-go,body.bp-market .nmp-save,body.bp-market .nmp-seg button,body.bp-market .nmh-pick,body.bp-market .nmh-go,body.bp-market .nmb-btn,body.bp-market .nmb-card,body.bp-market .nmf-drumbtn{border:2px solid rgba(255,228,107,.7);border-radius:16px;box-shadow:3px 4px 0 rgba(0,0,0,.4)}
body.bp-market .nmt-q{padding:9px 14px;border:2px solid var(--bp-ink);border-radius:14px;background:#fff6c2;color:var(--bp-ink);box-shadow:3px 4px 0 rgba(0,0,0,.35)}
body.bp-market .nmh-box,body.bp-market .nml-panel,body.bp-market .nmp-stage{border:2px solid rgba(255,228,107,.55);border-radius:18px}
body.bp-market .nmb-chip{border:1.5px solid rgba(255,228,107,.6)}
body.bp-market .nmt-opt:active,body.bp-market .nmh-pick:active,body.bp-market .nmb-btn:active,body.bp-market .nmb-card:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){#v-dex .dxs.done.pop .dxh::after,#v-dex .dx .dxnew{animation:none}#v-quiz .qrow .qnum,#v-loading .loading p,.nexttests>h3,.dxmodal .dxcard h3,body.bp-market .tent-title{transform:none}}