/* 상담 · 앰플장 · 떼쓰기 · 긴 영수증 (13-consult.js가 만드는 #consult). 좌표는 무대(390×844) 단위.
   위 124~572 = 캔버스 장면(consultDraw) · 아래 572~844 = 손으로 누르는 판. 말투 말풍선은 손님 앞 404~566. */
#consult{position:absolute;inset:0;z-index:8;display:none;pointer-events:none;font-family:var(--font)}
#consult.on{display:block}
#consult button{font-family:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#consult .tap{animation:csTap .22s cubic-bezier(.3,1.6,.5,1)}
@keyframes csTap{0%{transform:scale(1)}35%{transform:scale(.92)}100%{transform:scale(1)}}
#consult .no{animation:csNo .3s}
@keyframes csNo{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* 아래 판(공통): 책상 나무 + 위쪽 그림자 */
.csPanel{position:absolute;left:0;right:0;top:572px;bottom:0;display:none;pointer-events:auto;padding:16px 11px calc(40px + env(safe-area-inset-bottom));
  background:linear-gradient(#C9B48E 0,#BFA77D 10px,#B39B70 100%);box-shadow:0 -6px 18px rgba(30,42,48,.22),inset 0 3px 0 rgba(255,255,255,.25)}
#consult.m-deal #csDeal,#consult.m-cab #csCab,#consult.m-nag #csNag{display:block}

/* 손패 4장: 86×120 · 아이콘 + 가격 + 한 단어 */
.csHand{display:flex;gap:8px;justify-content:center}
.csCard{position:relative;width:86px;height:120px;flex:none;border-radius:14px;background:#FFFDF8;box-shadow:0 5px 0 #D9CBAE,0 9px 16px rgba(60,40,10,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;gap:2px;transition:transform .16s cubic-bezier(.3,1.5,.5,1),opacity .16s;animation:csDeal .32s cubic-bezier(.3,1.5,.5,1) backwards}
.csCard:nth-child(2){animation-delay:.04s}.csCard:nth-child(3){animation-delay:.08s}.csCard:nth-child(4){animation-delay:.12s}
@keyframes csDeal{0%{transform:translateY(60px) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
.csCard canvas{width:56px;height:56px}
.csCard b{font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.csCard b.deal{color:#B07A00}
.csCard span{font-size:12.5px;font-weight:800;color:var(--ink2);line-height:1.15;max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csCard:active{transform:translateY(3px)}
.csCard.sel{transform:translateY(-14px);box-shadow:0 0 0 3px var(--laser),0 12px 22px rgba(229,50,126,.3)}
.csCard.dim{opacity:.55}
.csCard.empty{background:transparent;box-shadow:none;border:2px dashed rgba(90,70,40,.3);animation:none}

/* 계약서 쾅 · 실장에게 맡기기 */
.csAct{display:flex;gap:8px;margin-top:14px}
.csSign{position:relative;flex:1;height:62px;border-radius:16px;background:var(--laser);color:#fff;font-size:19px;font-weight:900;box-shadow:0 4px 0 #A41F59;
  display:flex;align-items:center;justify-content:center;gap:10px;letter-spacing:-.02em}
.csSign:active{transform:translateY(3px);box-shadow:0 1px 0 #A41F59}
.csSign em{font-style:normal;font-size:15px;font-weight:900;background:rgba(255,255,255,.22);border-radius:10px;padding:3px 9px;font-variant-numeric:tabular-nums}
.csSign em.bump{animation:bump .3s cubic-bezier(.3,1.8,.5,1)}
.csSign .csSeal{width:26px;height:26px;border-radius:50%;border:3px solid #fff;flex:none;position:relative}
.csSign .csSeal::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#fff}
.csSign.ready{animation:csPulse 1.3s ease-in-out infinite}
@keyframes csPulse{50%{box-shadow:0 4px 0 #A41F59,0 0 0 6px rgba(229,50,126,.22)}}
.csMgr{width:112px;height:62px;flex:none;border-radius:16px;background:#2A3238;color:#fff;font-size:14px;font-weight:800;line-height:1.2;box-shadow:0 4px 0 #11171a}
.csMgr:active{transform:translateY(3px);box-shadow:0 1px 0 #11171a}
.csMgr[hidden]{display:none}

/* 말투 3개(라운드 4): 손님 얼굴·소품을 가리지 않게 손패 자리에서 올라오는 하단 시트 */
.csPitch{position:absolute;left:0;right:0;top:572px;bottom:0;z-index:3;display:none;flex-direction:column;justify-content:flex-start;gap:7px;pointer-events:auto;
  padding:10px 12px calc(14px + env(safe-area-inset-bottom));background:#F6F1E6;border-radius:22px 22px 0 0;box-shadow:0 -8px 22px rgba(30,42,48,.28);animation:csSheet .24s cubic-bezier(.3,1.3,.5,1) both}
@keyframes csSheet{0%{transform:translateY(60%);opacity:.4}100%{transform:none;opacity:1}}
.csPitch.on{display:flex}
.csPitch.gone{opacity:0;pointer-events:none;transition:opacity .15s}
.csPHead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.csPHead span{flex:1;min-width:0;font-size:14px;font-weight:800;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csPHead span b{font-size:16px;font-weight:900;color:var(--ink);margin-right:4px}
.csPHead span em{font-style:normal;font-weight:900;color:#2E7D55;margin-right:2px}
.csPBack{flex:none;height:44px;padding:0 14px;border-radius:14px;background:#fff;border:2px solid rgba(30,42,48,.18);font-size:13.5px;font-weight:900;color:var(--ink)}
.csPBack:active{transform:translateY(2px)}
#consult.pitching #csDeal .csHand{visibility:hidden}
.csSty{height:50px;border-radius:18px;background:#fff;border:2.5px solid #1E2A30;display:flex;align-items:center;gap:8px;padding:0 12px 0 8px;text-align:left;
  box-shadow:0 3px 0 rgba(30,42,48,.35);animation:csPop .26s cubic-bezier(.3,1.6,.5,1) both}
@keyframes csPop{0%{transform:scale(.6) translateY(20px);opacity:0}100%{transform:none;opacity:1}}
.csSty i{font-style:normal;flex:none;font-size:12px;font-weight:900;color:#fff;background:var(--laser);border-radius:9px;padding:3px 7px}
.csSty span{flex:1;min-width:0;font-size:15.5px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csSty:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(30,42,48,.35)}

/* 라운드 17(★39 3차): 분석(얼굴 보고 분야 고르기) — 말투 시트와 같은 자리, 손패보다 먼저 뜬다 */
.csDiag{position:absolute;left:0;right:0;top:572px;bottom:0;z-index:4;display:none;flex-direction:column;justify-content:flex-start;gap:10px;pointer-events:auto;
  padding:14px 12px calc(14px + env(safe-area-inset-bottom));background:#F6F1E6;border-radius:22px 22px 0 0;box-shadow:0 -8px 22px rgba(30,42,48,.28);animation:csSheet .24s cubic-bezier(.3,1.3,.5,1) both}
.csDiag.on{display:flex}
.csDiagHead{font-size:15px;font-weight:900;color:var(--ink);text-align:center}
.csDiagGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.csDiagBtn{height:54px;border-radius:16px;background:#fff;border:2.5px solid #1E2A30;font-size:15px;font-weight:900;color:var(--ink);box-shadow:0 3px 0 rgba(30,42,48,.35);animation:csPop .26s cubic-bezier(.3,1.6,.5,1) both}
.csDiagBtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(30,42,48,.35)}

/* 앰플장: 병 2개 → 바꾸기 */
.csBottles{display:flex;gap:12px;justify-content:center}
.csBottle{width:164px;height:150px;border-radius:16px;background:#F7FAFA;box-shadow:0 5px 0 #C9D5DB,0 9px 16px rgba(30,42,48,.16);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4px;gap:1px}
.csBottle canvas{width:60px;height:75px}
.csBottle b{font-size:16px;font-weight:900;color:var(--ink)}
.csBottle small{font-size:12px;font-weight:800;color:var(--muted)}
.csBottle.fake{background:#FFF9E8;box-shadow:0 5px 0 #E2D2A6,0 9px 16px rgba(60,40,10,.16)}
.csBottle.fake canvas{animation:csWob 1.6s ease-in-out infinite}
@keyframes csWob{50%{transform:rotate(4deg)}}
.csBottle:active{transform:translateY(3px)}
.csSwapRow{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.csSwap{height:96px;border-radius:20px;background:#2A3238;color:#fff;box-shadow:0 5px 0 #11171a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.csSwap span{font-size:26px;font-weight:900;letter-spacing:.1em}
.csSwap small{font-size:12px;font-weight:800;opacity:.7}
.csSwap:active{transform:translateY(4px);box-shadow:0 1px 0 #11171a}
.csGhost{height:46px;border-radius:14px;background:rgba(255,255,255,.35);color:#4A3A22;font-size:14px;font-weight:800}

/* 떼쓰기 5택 */
.csNagGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.csNagB{height:62px;border-radius:14px;background:#FFFDF8;box-shadow:0 4px 0 #D9CBAE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.csNagB.wide{grid-column:1/-1;height:52px;background:#2A3238;color:#fff;box-shadow:0 4px 0 #11171a}
.csNagB b{font-size:15.5px;font-weight:900}
.csNagB span{display:flex;gap:4px}
.csNagB span i{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:7px;background:#EEF1F3;color:var(--ink2)}
.csNagB.wide span i{background:rgba(255,255,255,.18);color:#fff}
.csNagB.lock{opacity:.5}
.csNagB:active{transform:translateY(3px)}

/* 긴 영수증: 줄당 0.25초, 7줄이 넘으면 종이가 바닥까지 늘어난다 */
.csRcpt{position:absolute;inset:0;display:none;pointer-events:auto;background:rgba(18,24,28,.45)}
.csRcpt.on{display:block}
.csRcpt .paper{position:absolute;left:46px;right:46px;top:132px;max-height:720px;display:flex;flex-direction:column;padding:14px 16px 14px;background:var(--receipt);color:var(--receipt-ink);
  font-family:var(--mono);box-shadow:0 10px 26px rgba(0,0,0,.35);animation:csRcIn .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes csRcIn{0%{transform:translateY(-40px) scaleY(.6);opacity:0}100%{transform:none;opacity:1}}
.csRcpt .paper.long{transition:min-height .22s cubic-bezier(.3,1.4,.5,1)}
.csRcpt .paper.long .win{flex:1 1 auto;display:flex;flex-direction:column}
.csRcpt .paper.long .lines{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-around}
.csRcpt .paper.floor{box-shadow:0 10px 26px rgba(0,0,0,.35)}
.csRcpt .paper.floor::after{display:none}
.csRcpt .paper::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,var(--receipt) 0) 0 0/12px 8px,linear-gradient(45deg,transparent 6px,var(--receipt) 0) 0 0/12px 8px}
.csRcpt h4{margin:0;text-align:center;font-size:15px;letter-spacing:.3em}
.csRcpt .sub{text-align:center;font-size:11px;color:#888;margin:2px 0 8px;border-bottom:1px dashed #aaa;padding-bottom:6px}
.csRcpt .win{flex:0 1 auto;min-height:0;overflow:hidden}
.csRcpt .lines{transition:transform .2s}
.csRcpt .rl{display:flex;justify-content:space-between;font-size:14px;line-height:28px;animation:csLine .18s ease-out both}
.csRcpt .rl b{font-variant-numeric:tabular-nums}
.csRcpt .rl.gag{color:#8a7f72;font-size:12.5px}
@keyframes csLine{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
.csRcpt .tot{flex:none;display:flex;justify-content:space-between;border-top:2px dashed #888;margin-top:6px;padding-top:6px;font-size:19px;font-weight:900;visibility:hidden}
.csRcpt .paper.done .tot{visibility:visible}
.csRcpt .seal{position:absolute;right:66px;bottom:26px;width:86px;height:86px;border:4px solid #D13B3B;border-radius:50%;color:#D13B3B;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font);font-size:17px;font-weight:900;line-height:1.1;padding:8px;word-break:keep-all;transform:scale(2.2) rotate(-16deg);opacity:0;mix-blend-mode:multiply;pointer-events:none}
.csRcpt .seal.on{animation:csSeal .34s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes csSeal{0%{transform:scale(2.4) rotate(-16deg);opacity:0}60%{transform:scale(.88) rotate(-12deg);opacity:1}100%{transform:scale(1) rotate(-12deg);opacity:.92}}
.csRcpt .foot{flex:none;margin:8px 0 0;font-family:var(--font);font-size:10.5px;color:#8a8a8a;text-align:center;visibility:hidden}
.csRcpt .paper.done .foot{visibility:visible}

/* 결과 컷(앰플장·떼쓰기·도망) */
.csFlash{position:absolute;left:0;right:0;top:250px;display:none;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.csFlash.on{display:flex;animation:csPop .3s cubic-bezier(.3,1.6,.5,1) both}
.csFlash canvas{width:120px;height:120px}
.csFlash b{max-width:340px;padding:10px 18px;border-radius:18px;background:#2A3238;color:#fff;font-size:19px;font-weight:900;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.csFlash b:empty{display:none}
.csFlash.caught b{background:#B23A3A}.csFlash.grin b{background:#B07A00}.csFlash.real b{background:#2E7D55}.csFlash.flee b{background:#5A6A72}

/* ───────── 라운드 3 (U1): 손패 자리 고정·뒤집기 · 덤 효과 금테 · 할인 가격표 · 그냥 보내기 · 떼쓰기 박자 ───────── */
#consult .csCard.flip{animation:csFlip .38s cubic-bezier(.3,1.4,.5,1)}
@keyframes csFlip{0%{transform:perspective(400px) rotateY(90deg);opacity:.3}100%{transform:none;opacity:1}}
#consult .csCard.lever{box-shadow:0 0 0 3px #F2B632,0 0 14px rgba(242,182,50,.75),0 3px 0 #B07A00;animation:csLever 1.2s ease-in-out infinite}
@keyframes csLever{50%{box-shadow:0 0 0 3px #F2B632,0 0 22px rgba(242,182,50,.95),0 3px 0 #B07A00}}
#consult .csCard .lvB{position:absolute;left:50%;top:-10px;transform:translateX(-50%) rotate(-4deg);padding:1px 7px;border-radius:8px;background:#F2B632;color:#4A3A10;font-style:normal;font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 1px 0 #B07A00}
#consult .csCard b.svc{color:#B07A00}
#consult .csCard b.cut{color:#C0564C;white-space:nowrap;font-size:13.5px}
#consult .csCard b.cut s{color:#8A979E;font-weight:700;margin-right:1px}
#consult .csSign.send{background:#5E7C8C;box-shadow:0 4px 0 #3B4E58}
#consult .csSign.send .csSeal{opacity:.35}
#consult .csRcpt .cutL{margin:4px 0 0;text-align:right;font-size:12px;font-weight:800;color:#C0564C}
#consult .csNagB span i{white-space:nowrap}
#consult .csNagGrid.beat{display:flex;align-items:center;justify-content:center}
#consult .csBeatTip{font-size:16px;font-weight:900;color:#fff;text-align:center}
#consult .csBeatTip b{color:#F2B632}
#consult .csBeat{position:absolute;inset:0;pointer-events:none;z-index:5}
#consult .csBq{position:absolute;max-width:170px;padding:10px 14px;border-radius:18px;background:#fff;border:2.5px solid #1E2A30;font-size:14px;font-weight:900;color:#1E2A30;line-height:1.3;word-break:keep-all;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;transition:transform .18s cubic-bezier(.3,1.6,.5,1),opacity .12s;touch-action:manipulation;min-height:44px}
#consult .csBq.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;animation:csBqWob .5s ease-in-out infinite}
#consult .csBq.hit{background:#E4F3EA;border-color:#2E7D55;color:#2E7D55;animation:none;transform:translate(-50%,-50%) scale(.9)}
@keyframes csBqWob{50%{transform:translate(-50%,-50%) scale(1.06) rotate(-2deg)}}

/* ───────── 라운드 4 (U1): 관리 도장 · 결과 띠 · 유형 배지 누르는 자리 ───────── */
#consult .csCard .csWho{position:absolute;right:4px;top:4px;padding:1px 5px;border-radius:7px;font-style:normal;font-size:9.5px;font-weight:900;line-height:1.35;letter-spacing:-.02em;white-space:nowrap;
  border:1.5px solid currentColor;transform:rotate(6deg);background:rgba(255,255,255,.85)}
#consult .csCard .csWho.w-doc{color:#8A979E}
#consult .csCard .csWho.w-care{color:#2E7D55}
#consult .csCard .csWho.w-nurse{color:#3A8FB7}
#consult .csCard.lever .csWho{top:12px}
.csFlash .csBand{font-style:normal;padding:6px 16px;border-radius:12px;font-size:22px;font-weight:900;letter-spacing:.04em;color:#fff;background:#B07A00;transform:rotate(-4deg);box-shadow:0 4px 0 rgba(0,0,0,.18);animation:csSeal .34s cubic-bezier(.3,1.6,.5,1) both}
.csFlash.caught .csBand{background:#B23A3A}
.csTagHit{position:absolute;left:6px;top:154px;width:140px;height:48px;display:none;background:transparent;border:0;padding:0;pointer-events:auto;-webkit-tap-highlight-color:transparent}
#consult.m-deal .csTagHit{display:block}
#consult.rc .csTagHit{display:none}

/* ───────── 라운드 5 (U1): 도장 뜻 한 줄 · 고른 카드 테두리 · 잘 먹히는 말투(1~2일차) ───────── */
#consult .csCard .csWho{font-size:11px;padding:1px 5px;top:3px;right:3px}
#consult .csCard .csWho::after{content:'';position:absolute;inset:-9px -6px -12px -12px}   /* 손끝 맞춤 칸(보이지 않게 넓힘) */
#consult .csCard.lever .csWho{top:13px}
.csWhoTip{position:absolute;top:530px;left:195px;transform:translate(-50%,6px);max-width:300px;padding:9px 14px;border-radius:14px;background:#2A3238;color:#fff;font-size:13.5px;font-weight:800;
  line-height:1.3;white-space:nowrap;box-shadow:0 6px 16px rgba(30,42,48,.3);opacity:0;pointer-events:none;transition:opacity .14s,transform .18s cubic-bezier(.3,1.5,.5,1);z-index:5}
.csWhoTip.on{opacity:1;transform:translate(-50%,0)}
.csWhoTip::after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#2A3238}
.csWhoTip.w-care{background:#2E7D55}.csWhoTip.w-care::after{border-top-color:#2E7D55}
.csWhoTip.w-nurse{background:#3A8FB7}.csWhoTip.w-nurse::after{border-top-color:#3A8FB7}
.csCard.sel{box-shadow:0 0 0 3.5px var(--laser),0 0 0 7px rgba(229,50,126,.22),0 12px 22px rgba(229,50,126,.3)}
.csCard.sel.dim{opacity:1}
.csPHead span b.csPick{display:inline-block;padding:2px 9px;border-radius:9px;border:2.5px solid var(--laser);background:#fff;color:var(--ink)}
.csSty.best{border-color:rgba(46,125,85,.75);box-shadow:0 3px 0 rgba(30,42,48,.35),0 0 0 4px rgba(95,168,132,.28)}
.csSty.best i{background:#2E7D55}

/* 라운드 6(U1): 부제 한 줄(앰플 = '탄력·볼륨') — 이름·부제 모두 잘리지 않게(344px에서도 무대 비율 그대로) */
#consult .csCard.hasSub{padding-top:5px;gap:1px}
#consult .csCard.hasSub canvas{width:50px;height:50px}
#consult .csCard.hasSub span{max-width:82px}
#consult .csCard .csSub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:80px;font-size:11px;font-weight:800;line-height:1.12;color:#2E7D55;white-space:normal;word-break:keep-all;text-align:center;letter-spacing:-.03em;background:#EAF5EE;border-radius:6px;padding:1px 4px}

/* ───────── 라운드 7(U1): 계약서 줄 · 정해 온 카드 · 추가 제언 · '서비스' 도장(길게 0.4초) ───────── */
.csItems{position:absolute;left:8px;right:8px;top:508px;height:62px;display:none;align-items:center;gap:6px;padding:12px 2px 4px;box-sizing:border-box;overflow-x:auto;overflow-y:visible;scrollbar-width:none;pointer-events:auto;touch-action:pan-x;z-index:2}
.csItems::-webkit-scrollbar{display:none}
#consult.m-deal .csItems.has{display:flex}
#consult.rc .csItems,#consult.pitching .csItems{display:none}
.csFreeLeft{flex:none;padding:4px 9px;border-radius:10px;background:rgba(178,58,58,.92);color:#fff;font-size:11.5px;font-weight:900;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.csFreeLeft.bump{animation:csTap .3s cubic-bezier(.3,1.6,.5,1)}
.csIt{position:relative;flex:none;height:44px;display:flex;align-items:center;gap:6px;padding:0 4px 0 10px;border-radius:12px;background:#FFFDF8;box-shadow:0 3px 0 #D9CBAE,0 5px 10px rgba(60,40,10,.15)}
.csIt b{font-size:12.5px;font-weight:900;color:var(--ink);max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csIt em{font-style:normal;font-size:12px;font-weight:900;color:#2E7D55;white-space:nowrap;padding-right:6px}
.csIt.free{padding-right:46px}
.csIt.free em{color:#B23A3A;text-decoration:line-through}
.csIt.pre{box-shadow:0 0 0 2.5px #3A8FB7,0 3px 0 #D9CBAE}
.csPre{position:absolute;left:6px;top:-9px;padding:0 6px;border-radius:7px;background:#3A8FB7;color:#fff;font-style:normal;font-size:10px;font-weight:900;line-height:16px;white-space:nowrap;transform:rotate(-3deg);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.csFreeSt{position:absolute;right:2px;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;border:3px solid #C0392B;color:#C0392B;font-style:normal;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;transform:rotate(-14deg);background:rgba(255,255,255,.55);pointer-events:none}
.csFreeSt.in{animation:csFreeIn .25s cubic-bezier(.3,1.6,.5,1) both}
@keyframes csFreeIn{0%{transform:rotate(-14deg) scale(1.9);opacity:0}60%{transform:rotate(-14deg) scale(.88);opacity:1}100%{transform:rotate(-14deg) scale(1)}}
.csFree{position:relative;flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.csFree span{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;border:2.5px dashed #C0392B;color:#C0392B;font-size:10.5px;font-weight:900;display:flex;align-items:center;justify-content:center;background:#fff;transform:rotate(-10deg)}
.csFree i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#C0392B 0turn,transparent 0turn);opacity:.35}
.csFree.hold i{animation:csFreeFill .4s linear forwards}
.csFree.hold span{border-style:solid}
@property --csF{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes csFreeFill{from{--csF:0deg}to{--csF:360deg}}
.csFree.hold i{background:conic-gradient(#C0392B var(--csF),rgba(192,57,43,.12) var(--csF));opacity:.9}
.csFreeTip{position:absolute;top:478px;left:195px;transform:translate(-50%,6px);padding:8px 13px;border-radius:13px;background:#B23A3A;color:#fff;font-size:13px;font-weight:900;white-space:nowrap;box-shadow:0 6px 14px rgba(30,42,48,.28);opacity:0;pointer-events:none;transition:opacity .12s,transform .16s;z-index:6}
.csFreeTip.on{opacity:1;transform:translate(-50%,0)}
#consult .csCard .csAdd{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(-3deg);padding:0 7px;border-radius:8px;background:#7A5AA8;color:#fff;font-style:normal;font-size:10px;font-weight:900;line-height:16px;white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.2)}

/* 라운드 8(U1 · §24-6): 꾹 눌러 서비스 · 실장 n/3 · 결과 두 줄 */
.csFree i{opacity:.55;background:conic-gradient(rgba(192,57,43,.35) 0turn,rgba(192,57,43,.14) 0turn)}
.csFree:not(.hold) i{background:rgba(192,57,43,.14)}
.csFreeHint{position:absolute;right:0;top:-10px;padding:0 6px;border-radius:7px;background:#B23A3A;color:#fff;font-style:normal;font-size:10px;font-weight:900;line-height:16px;white-space:nowrap;pointer-events:none;box-shadow:0 1px 0 rgba(0,0,0,.2);transform:rotate(2deg)}
.csIt.pre .csFreeHint{right:0;left:auto}
.csMgr{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.csMgr span{display:block}
.csMgrN{font-style:normal;font-size:11px;font-weight:900;line-height:15px;padding:0 7px;border-radius:8px;background:rgba(255,255,255,.18);color:#FFE08A;white-space:nowrap}
.csMgr.lock{background:#5A6268;color:rgba(255,255,255,.7);box-shadow:0 4px 0 #3A4045}
.csMgr.lock .csMgrN{background:#B23A3A;color:#fff}
.csMgr.lock:active{transform:none;box-shadow:0 4px 0 #3A4045}
.csFlash b{white-space:pre-line}
.csFlash.res8 b{font-size:17px;line-height:1.35}
.csFlash.mgr8 b{font-size:16px}