/* Ponte 도입 상담톡 v2. v9 흰 테마 토큰 · 움직임은 transform · opacity 만 */
.cb-l,.cb-p,.cb-s,.consult-cta{--cb-fg:#121212;--cb-fg2:#4d4d4d;--cb-fg3:#8c8c8c;--cb-line:#ececec;--cb-bg2:#fafafa;--cb-bg3:#f4f4f5;--cb-ac:#121212;--cb-ac2:#121212;--cb-ease:cubic-bezier(.16,1,.3,1);--cb-spring:cubic-bezier(.34,1.32,.5,1);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all}

/* ── #contact 자리: 짧은 안내 + 상담 시작 버튼 ── */
.consult-cta{max-width:720px;margin-inline:auto;padding:48px 32px;text-align:center;border:1px solid var(--cb-line);border-radius:24px;background:#fff}
.consult-cta .eyebrow{display:inline-flex}
.consult-cta .h2{margin-inline:auto}
.consult-cta .sd{margin:18px auto 0}
.consult-cta .btn{margin-top:28px;height:52px;padding:0 26px;font-size:15.5px}
.consult-cta .cc-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:20px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--cb-fg3)}
.consult-cta .cc-steps li{display:inline-flex;align-items:center;gap:6px}
.consult-cta .cc-steps li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cb-ac)}
@media(max-width:560px){.consult-cta{padding:36px 20px}.consult-cta .btn{width:100%;justify-content:center}}

/* ── 하단 버튼: 질문 칩 두 개 + 검정 알약(#36) ──
   위치는 translate, 눌림은 scale, 등장 · 접힘은 transform · opacity · clip-path. 그림자는 겹을 따로 두고 투명도만 바꾼다 */
.cb-lz{--cb-spr:cubic-bezier(.3,1.35,.5,1);--cb-sprs:cubic-bezier(.25,1.1,.4,1);--cb-sprp:cubic-bezier(.3,1.7,.5,1);--cb-ec:cubic-bezier(.4,0,.2,1);--w:128px;--h:50px;
 position:fixed;right:max(20px,calc(env(safe-area-inset-right) + 16px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 16px));z-index:9990;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;letter-spacing:-.01em;line-height:1.3;transition:opacity .3s var(--cb-ease),visibility 0s}
.cb-lz:not(.is-in){visibility:hidden}
.cb-lz.off{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}
.cb-lz.off *{pointer-events:none!important}
.cb-qw{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cb-q{pointer-events:auto;position:relative;display:inline-flex;align-items:center;height:36px;margin:0;padding:0 14px;border:1px solid rgba(18,18,18,.13);border-radius:18px;background:#fff;color:#121212;font:inherit;font-size:13.5px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 2px 6px rgba(18,18,18,.07);-webkit-tap-highlight-color:transparent;touch-action:manipulation;transform-origin:100% 100%;translate:0 0;scale:1;
 transition:transform .55s var(--cb-spr) calc(var(--i,0)*55ms + 70ms),opacity .22s ease calc(var(--i,0)*55ms + 70ms),visibility 0s,translate .55s var(--cb-spr),scale .5s var(--cb-spr)}
.cb-q::before{content:"";position:absolute;inset:-4px 0}
.cb-q::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 10px 22px rgba(18,18,18,.14);opacity:0;pointer-events:none;transition:opacity .28s ease}
.cb-q span{position:relative;transition:transform .45s var(--cb-spr)}
.cb-q:focus{outline:none}
.cb-q:focus-visible{outline:2px solid var(--cb-ac);outline-offset:2px}
.cb-qh,.cb-xr{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.cb-qh::before{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(100deg,transparent,rgba(18,18,18,.2),transparent);transform:translateX(-120%)}
.cb-qh i,.cb-xr i{position:absolute;border-radius:50%;background:rgba(18,18,18,.1);opacity:0}
.cb-xr i{background:rgba(255,255,255,.2)}
/* 알약: 겉 단추는 자리만 잡고, 누르는 면(.cb-xf)이 clip-path 로 접힌다(누르는 자리도 같이 줄어든다) */
.cb-l{pointer-events:none;position:relative;display:block;width:var(--w);height:var(--h);margin:0;padding:0;border:0;border-radius:calc(var(--h)/2);background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;translate:0 0;scale:1;transition:translate .55s var(--cb-spr),scale .5s var(--cb-spr)}
.cb-l:focus{outline:none}
.cb-xs,.cb-xh,.cb-xm{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.cb-xs{box-shadow:0 12px 30px -10px rgba(18,18,18,.45);transition:opacity .25s ease}
.cb-xh{box-shadow:0 18px 40px -12px rgba(18,18,18,.5);opacity:0;transition:opacity .28s ease}
.cb-xm{left:auto;width:var(--h);box-shadow:0 8px 24px rgba(18,18,18,.18),0 1px 3px rgba(18,18,18,.1);opacity:0;transition:opacity .2s ease}
.cb-xf{pointer-events:auto;position:relative;display:flex;align-items:center;gap:9px;width:100%;height:100%;padding:0 0 0 17px;border-radius:inherit;background:#121212;color:#fff;clip-path:inset(0 round calc(var(--h)/2));transition:clip-path .55s var(--cb-sprs)}
.cb-xi{display:block;flex:none;width:22px;height:22px;transition:transform .55s var(--cb-sprs)}
.cb-xi svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cb-xl{font-size:15px;font-weight:600;white-space:nowrap;line-height:1;transition:opacity .22s ease .14s}
.cb-xo{position:absolute;inset:-4px;border-radius:calc(var(--h)/2 + 4px);border:2px solid var(--cb-ac);opacity:0;pointer-events:none;transition:opacity .12s}
.cb-l:focus-visible .cb-xo{opacity:1}
@media(hover:hover){
 .cb-q:hover,.cb-l:hover{translate:0 -3px}
 .cb-q:hover::after,.cb-l:hover .cb-xh{opacity:1}
 .cb-q:hover span{transform:translateX(-2px)}
 .cb-l:hover .cb-xi{animation:cb-wig .6s cubic-bezier(.2,.7,.2,1)}
}
.cb-q:active,.cb-l:active{scale:.96 .93;transition:translate .55s var(--cb-spr),scale .09s ease-out}
/* 등장: 알약이 먼저, 칩은 아래부터 차례로 */
.cb-lz.is-in:not(.is-set) .cb-l{animation:cb-rise .75s var(--cb-spr) backwards}
.cb-lz.is-in:not(.is-set) .cb-xi{animation:cb-icon .65s var(--cb-sprp) .14s backwards}
.cb-lz.is-in:not(.is-set) .cb-xl{animation:cb-lb .45s cubic-bezier(.2,.7,.2,1) .22s backwards}
.cb-lz.is-in:not(.is-set) .cb-q{animation:cb-chipin .7s var(--cb-spr) calc(.4s + var(--i,0)*.11s) backwards}
@keyframes cb-rise{from{opacity:0;transform:translateY(18px) scale(.86)}}
@keyframes cb-icon{from{opacity:0;transform:rotate(-28deg) scale(.5)}}
@keyframes cb-lb{from{opacity:0;transform:translateX(-6px)}}
@keyframes cb-chipin{from{opacity:0;transform:translateY(16px) scale(.78)}}
@keyframes cb-wig{0%,100%{transform:none}30%{transform:rotate(-12deg)}65%{transform:rotate(7deg)}}
@keyframes cb-shim{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes cb-wave{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.08)}55%{transform:rotate(10deg)}}
/* 대기 신호: 한 번만. 칩 위로 옅은 빛, 알약 아이콘이 한 번 흔들림 */
.cb-lz.cue .cb-qh::before{animation:cb-shim 1.05s var(--cb-ec) calc((1 - var(--i,0))*.18s) 1}
.cb-l.nudge .cb-xi{animation:cb-wave 1.1s var(--cb-ease) .3s 1}
/* 빠르게 내리면: 칩은 알약 속으로, 알약은 아이콘 원으로 */
.cb-lz.is-compact .cb-q{transform:translateY(22px) scale(.78);opacity:0;visibility:hidden;transition:transform .3s var(--cb-ec) calc((1 - var(--i,0))*45ms),opacity .16s ease calc((1 - var(--i,0))*45ms),visibility 0s .36s}
.cb-lz.is-compact .cb-xf{clip-path:inset(0 0 0 calc(100% - var(--h)) round calc(var(--h)/2));transition:clip-path .34s var(--cb-ec)}
.cb-lz.is-compact .cb-xi{transform:translateX(calc(var(--w) - var(--h)/2 - 28px));transition:transform .34s var(--cb-ec)}
.cb-lz.is-compact .cb-xl{opacity:0;transition:opacity .1s ease}
.cb-lz.is-compact .cb-xs,.cb-lz.is-compact .cb-xh{opacity:0}
.cb-lz.is-compact .cb-xm{opacity:1}
.cb-lz.is-compact .cb-xo{inset:-4px -4px -4px auto;width:calc(var(--h) + 8px)}
/* 칩이 첫 말풍선으로 날아가는 동안 쓰는 그림자 조각 */
.cb-gh{position:fixed!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;margin:0!important;z-index:9995;pointer-events:none!important;animation:none!important;transition:none!important;translate:none!important;scale:none!important;box-sizing:border-box;white-space:nowrap;will-change:transform,opacity}
.cb-gh *{animation:none!important;transition:none!important}
.cb-u.fly .cb-m.me.cb-hide{opacity:0}

/* ── 배경(좁은 화면에서만 보인다) ── */
.cb-s{position:fixed;inset:0;z-index:9991;background:rgba(18,18,18,.32);opacity:0;transition:opacity .35s var(--cb-ease)}
.cb-s.in{opacity:1}
.cb-s.drag{transition:none}
.cb-s[hidden]{display:none}
@media(min-width:561px){.cb-s{background:transparent;pointer-events:none}}

/* ── 패널: 버튼 자리에서 튀어 오른다 ── */
.cb-p{position:fixed;right:max(20px,calc(env(safe-area-inset-right) + 16px));bottom:max(20px,calc(env(safe-area-inset-bottom) + 16px));z-index:9992;width:420px;height:min(720px,calc(100vh - 40px));height:min(720px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cb-line);border-radius:24px;background:#fff;box-shadow:0 30px 70px -24px rgba(18,18,18,.3),0 2px 8px rgba(18,18,18,.04);font-size:14.5px;line-height:1.6;color:var(--cb-fg);
 opacity:0;transform:translate(14px,24px) scale(.86);transform-origin:calc(100% - 56px) calc(100% - 26px);transition:transform .5s var(--cb-spring),opacity .26s var(--cb-ease)}
.cb-p.in{opacity:1;transform:none}
.cb-p.out{transition:transform .26s cubic-bezier(.5,0,.75,0),opacity .2s ease-in}
.cb-p:focus{outline:none}
.cb-p[hidden]{display:none}
.cb-p.drag{transition:none}

/* 머리 */
.cb-h{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:16px 12px 12px 16px;background:#fff}
.cb-hm{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#121212;color:#fff}
.cb-hm svg{width:17px;height:17px}
.cb-ht{flex:1;min-width:0;display:grid;line-height:1.3}
.cb-ht b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.cb-ht small{font-size:12px;color:var(--cb-fg3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-ib{flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cb-fg3);cursor:pointer;transition:background .2s,color .2s,transform .35s var(--cb-ease)}
.cb-ib svg{width:17px;height:17px}
@media(hover:hover){.cb-ib:hover{background:var(--cb-bg3);color:var(--cb-fg)}#cb-close:hover{transform:rotate(90deg)}#cb-restart:hover{transform:rotate(-60deg)}}
.cb-ib:focus-visible{outline:2px solid var(--cb-ac);outline-offset:1px}
/* 진행 표시 10칸 */
.cb-bar{flex:none;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:0 16px 12px;border-bottom:1px solid var(--cb-line)}
.cb-bar i{position:relative;height:3px;border-radius:3px;background:var(--cb-bg3);overflow:hidden}
.cb-bar i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#121212;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--cb-ease)}
.cb-bar i.on::after{transform:scaleX(1)}
.cb-bar i.now::after{background:var(--cb-ac)}
.cb-grip{display:none}

/* 대화 */
.cb-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 10px;display:flex;flex-direction:column;gap:6px;background:#fff;scrollbar-width:thin}
.cb-b>*{flex-shrink:0}
.cb-b>:first-child{margin-top:auto}
.cb-r{display:flex;align-items:flex-end;gap:8px;max-width:90%;animation:cb-in .42s var(--cb-ease) both}
.cb-r.cont{margin-top:-2px}
.cb-r.cont .cb-av{visibility:hidden}
.cb-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--cb-bg3);color:#121212}
.cb-av svg{width:13px;height:13px}
.cb-m{padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--cb-bg3);color:var(--cb-fg);white-space:pre-line;overflow-wrap:anywhere;text-wrap:pretty}
.cb-m a{color:var(--cb-ac2);text-underline-offset:3px}
.cb-u{position:relative;align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;max-width:84%;margin:4px 0 2px;animation:cb-in .36s var(--cb-ease) both}
.cb-u.fly{animation:none}
.cb-u+.cb-u{margin-top:0}
.cb-pv{max-width:100%;margin:4px 4px 0 0;font-size:12px;line-height:1.4;color:var(--cb-fg2);text-align:right;overflow-wrap:anywhere}
.cb-pv::before{content:"";display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;border-radius:50%;background:var(--cb-ac);vertical-align:middle}
.cb-c.picked{opacity:0;transition:none}
.cb-m.me{display:block;max-width:100%;margin:0;border:0;border-radius:18px 18px 6px 18px;background:#121212;color:#fff;font:inherit;text-align:left}
button.cb-m.me{position:relative;cursor:pointer;transition:background .2s,transform .2s var(--cb-ease)}
button.cb-m.me:active{transform:scale(.97)}
@media(hover:hover){button.cb-m.me:hover{background:#2a2a2a}}
button.cb-m.me:focus-visible{outline:2px solid var(--cb-ac);outline-offset:2px}
.cb-ed{position:absolute;right:calc(100% + 8px);bottom:9px;font-size:11.5px;white-space:nowrap;color:var(--cb-fg3);pointer-events:none;opacity:0;transform:translateX(4px);transition:opacity .2s,transform .2s var(--cb-ease)}
@media(hover:hover){.cb-u:hover .cb-ed{opacity:1;transform:none}}
.cb-u:focus-within .cb-ed,.cb-u.editing .cb-ed{opacity:1;transform:none}
.cb-u.editing .cb-m.me{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cb-ac)}
.cb-u.gone .cb-m.me{background:var(--cb-bg3);color:var(--cb-fg3);text-decoration:line-through;text-decoration-color:rgba(140,140,140,.6)}
.cb-u.gone .cb-ed{display:none}
.cb-u.gone::after{content:"정리에서 뺐습니다";font-size:11.5px;color:var(--cb-fg3);margin-top:3px}
.cb-r.now,.cb-u.now,.cb-card.now,.cb-card.now .cb-sec{animation:none}
.cb-flash::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:rgba(18,18,18,.12);box-shadow:0 0 0 3px rgba(18,18,18,.4);animation:cb-flash 1.1s var(--cb-ease) both}
.cb-m.me.cb-flash::after{background:none;inset:-1px;box-shadow:0 0 0 4px rgba(18,18,18,.55)}
@keyframes cb-flash{0%{opacity:0;transform:scale(.98)}20%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cb-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* 입력 중 */
.cb-t{display:flex;align-items:flex-end;gap:8px;animation:cb-in .3s var(--cb-ease) both}
.cb-t.cont .cb-av{visibility:hidden}
.cb-dots{display:inline-flex;gap:4px;padding:13px 14px;border-radius:18px 18px 18px 6px;background:var(--cb-bg3)}
.cb-dots i{width:6px;height:6px;border-radius:50%;background:#a6a6a6;animation:cb-dot 1.1s ease-in-out infinite}
.cb-dots i:nth-child(2){animation-delay:.14s}
.cb-dots i:nth-child(3){animation-delay:.28s}
@keyframes cb-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* ── 정리 카드 ── */
.cb-card{margin:6px 0 4px 34px;border:1px solid var(--cb-line);border-radius:20px;background:#fff;overflow:hidden;animation:cb-in .5s var(--cb-ease) both;box-shadow:0 10px 30px -18px rgba(18,18,18,.18)}
.cb-ch{display:grid;gap:2px;padding:14px 16px;background:var(--cb-bg2);border-bottom:1px solid var(--cb-line)}
.cb-ch b{font-size:15px;font-weight:700}
.cb-ch small{font-size:12.5px;color:var(--cb-fg2)}
.cb-sec{padding:12px 16px 10px;border-top:1px solid var(--cb-line);animation:cb-in .5s var(--cb-ease) both;animation-delay:calc(var(--i,0) * 130ms + 120ms)}
.cb-ch+.cb-sec{border-top:0}
.cb-card.upd .cb-sec,.cb-card.upd .cb-prop li,.cb-card.now .cb-prop li{animation:none}
.cb-later h4{color:var(--cb-ac2)}
.cb-later .cb-row-b .v{color:var(--cb-fg2)}
.cb-empty{margin:0;font-size:13px;color:var(--cb-fg2)}
.cb-more-n,.cb-plain{padding:3px 0;font-size:12.5px;line-height:1.45;color:var(--cb-fg2)}
.cb-more-n{color:var(--cb-fg3)}
.cb-qn{margin:10px 0 0;font-size:13.5px;font-weight:500;color:var(--cb-fg)}
.cb-sec h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--cb-fg3)}
.cb-sec ul{margin:0;padding:0;list-style:none;display:grid;gap:1px}
.cb-row-b{position:relative;display:flex;align-items:baseline;gap:8px;width:calc(100% + 12px);margin:0 -6px;padding:4px 6px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-size:13.5px;line-height:1.45;text-align:left;cursor:pointer;transition:background .2s}
@media(hover:hover){.cb-row-b:hover{background:var(--cb-bg2)}}
.cb-row-b:focus-visible{outline:2px solid var(--cb-ac);outline-offset:0}
.cb-row-b .k{flex:none;width:108px;color:var(--cb-fg3);font-size:12.5px}
.cb-row-b .v{flex:1;min-width:0;color:var(--cb-fg);overflow-wrap:anywhere}
.cb-row-b:active{transform:scale(.99)}
.cb-prop ul{gap:9px}
.cb-prop li{animation:cb-in .45s var(--cb-ease) both;animation-delay:calc(var(--i,0) * 130ms + var(--j,0) * 55ms + 200ms);display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.cb-prop li div{display:grid;gap:1px;min-width:0}
.cb-prop li b{font-size:13.5px;font-weight:600}
.cb-prop li small{font-size:12px;color:var(--cb-fg2);line-height:1.45}
.cb-prop li.p-unsupported b{color:var(--cb-fg3);text-decoration:line-through;text-decoration-color:rgba(140,140,140,.5)}
.cb-tag{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;line-height:1}
.cb-tag.supported{background:#121212;color:#fff}
.cb-tag.unverified{background:rgba(18,18,18,.1);color:var(--cb-ac2)}
.cb-tag.custom_dev{background:#fff;color:var(--cb-ac2);box-shadow:inset 0 0 0 1px rgba(18,18,18,.45)}
.cb-tag.unsupported{background:var(--cb-bg3);color:var(--cb-fg3)}
.cb-tag.ud{height:18px;padding:0 6px;background:var(--cb-bg3);color:var(--cb-fg2);font-weight:500}
.cb-scope{background:var(--cb-bg2)}
.cb-scope p{margin:0;font-size:13px;color:var(--cb-fg2)}
.cb-scope .cb-rv{margin-bottom:6px}

/* ── 적은 말 확인 카드 ── */
.cb-cf{align-self:flex-start;max-width:88%;margin:2px 0 4px 34px;padding:12px 14px 12px;border:1px solid var(--cb-line);border-radius:16px 16px 16px 6px;background:#fff;box-shadow:0 8px 24px -16px rgba(18,18,18,.25);animation:cb-in .42s var(--cb-ease) both;transition:opacity .3s}
.cb-cfh{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--cb-fg3)}
.cb-cf dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13.5px;line-height:1.45}
.cb-cf dt{color:var(--cb-fg3);font-size:12.5px;white-space:nowrap}
.cb-cf dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.cb-cf dt,.cb-cf dd{animation:cb-in .4s var(--cb-ease) both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
.cb-cf.now dt,.cb-cf.now dd,.cb-cf.now{animation:none}
.cb-cf.cb-yes{border-color:rgba(18,18,18,.35)}
.cb-cf.cb-no{opacity:.55}
.cb-cf.cb-no dd{text-decoration:line-through;text-decoration-color:rgba(140,140,140,.6)}
.cb-new{position:absolute;left:50%;top:-46px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:999px;background:#121212;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px -10px rgba(18,18,18,.5);opacity:0;transform:translate(-50%,8px) scale(.94);transition:opacity .2s var(--cb-ease),transform .3s var(--cb-spring)}
.cb-new.in{opacity:1;transform:translate(-50%,0)}
.cb-new[hidden]{display:none}
.cb-new svg{width:14px;height:14px}
.cb-new:focus-visible{outline:2px solid var(--cb-ac);outline-offset:2px}

/* ── 접수 완료 ── */
.cb-done:focus{outline:none}
.cb-done{margin:8px 0 4px;padding:22px 18px 18px;border:1px solid var(--cb-line);border-radius:20px;background:var(--cb-bg2);text-align:center;animation:cb-in .5s var(--cb-ease) both}
.cb-done b{display:block;margin-top:10px;font-size:17px;font-weight:700}
.cb-done p{margin:6px 0 0;font-size:13.5px;color:var(--cb-fg2)}
.cb-done h4{margin:16px 0 6px;font-size:12px;font-weight:700;color:var(--cb-fg3);text-align:left}
.cb-done ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;text-align:left;font-size:13px;color:var(--cb-fg2)}
.cb-done li{display:flex;gap:8px}
.cb-done li::before{content:"";flex:none;width:5px;height:5px;margin-top:8px;border-radius:50%;background:var(--cb-ac)}
.cb-done .cb-dn{margin-top:14px;padding-top:12px;border-top:1px solid var(--cb-line);text-align:left}
.cb-ok{width:52px;height:52px}
.cb-ok circle{fill:none;stroke:#121212;stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:cb-draw .6s var(--cb-ease) .1s forwards}
.cb-ok path{fill:none;stroke:var(--cb-ac);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:cb-draw .45s var(--cb-ease) .55s forwards}
@keyframes cb-draw{to{stroke-dashoffset:0}}

/* ── 선택지 · 입력 ── */
.cb-f{position:relative;flex:none;padding:10px 16px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--cb-line);background:#fff}
.cb-o{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-height:min(46vh,360px);overflow-y:auto;margin:0 -4px 10px;padding:4px;scrollbar-width:thin}
.cb-o[hidden]{display:none}
.cb-o.out{opacity:0;transform:translateY(6px);transition:opacity .16s ease-in,transform .16s ease-in;pointer-events:none}
.cb-o.stack{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}
.cb-c{overflow-wrap:anywhere;min-height:40px;padding:8px 16px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;color:var(--cb-fg);font:inherit;font-size:14px;line-height:1.35;text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .25s var(--cb-ease);animation:cb-chip .42s var(--cb-ease) both;animation-delay:calc(var(--i,0) * 38ms)}
.cb-o.stack>.cb-c{border-radius:16px;padding:10px 16px}
@keyframes cb-chip{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(hover:hover){.cb-c:hover{border-color:#121212}}
.cb-c:active{transform:scale(.97)}
.cb-c:focus-visible,.cb-k:focus-visible{outline:2px solid var(--cb-ac);outline-offset:2px}
.cb-c.cur{border-color:#121212;box-shadow:inset 0 0 0 1px #121212}
.cb-c.cur::after{content:" · 지금 답";color:var(--cb-fg3);font-size:12px}
.cb-c.pr{background:#121212;border-color:#121212;color:#fff;font-weight:600;text-align:center}
@media(hover:hover){.cb-c.pr:hover{box-shadow:0 10px 24px -12px rgba(18,18,18,.6)}}
.cb-c.sub{min-height:34px;border-color:transparent;background:none;color:var(--cb-fg3);font-size:13px;padding:6px 10px}
.cb-o.stack>.cb-c.sub{align-self:flex-end}
.cb-c:disabled{opacity:.4;cursor:default}
.cb-uk{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;width:100%;margin-top:2px}
.cb-uk .cb-c{flex:none;white-space:nowrap}
.cb-uk .cb-sp{flex:1}
.cb-c.ghost{min-height:30px;padding:4px 12px;border:1px dashed #dcdcdc;background:transparent;color:var(--cb-fg2);font-size:12.5px}
.cb-c.ghost.cb-more{border-color:transparent;color:var(--cb-fg3);text-decoration:underline;text-underline-offset:3px}
/* 여러 개 고르기 */
.cb-o.multi{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}
.cb-gh{margin:8px 4px 2px;font-size:12px;font-weight:700;color:var(--cb-fg3);animation:cb-chip .42s var(--cb-ease) both;animation-delay:calc(var(--i,0) * 38ms)}
.cb-hint{margin:0 4px 2px;font-size:12.5px;color:var(--cb-fg3)}
.cb-kw{display:flex;flex-wrap:wrap;gap:8px}
.cb-kw.desc{display:grid;grid-template-columns:1fr;gap:6px}
.cb-k{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 20px;border:1px solid #e3e3e3;border-radius:999px;background:#fff;color:var(--cb-fg);font:inherit;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s var(--cb-ease);animation:cb-chip .42s var(--cb-ease) both;animation-delay:calc(min(var(--i,0),14) * 30ms)}
.cb-k b{font-size:14px;font-weight:500;line-height:1.35;overflow-wrap:anywhere;transition:transform .25s var(--cb-ease)}
.cb-k small{font-size:12px;color:var(--cb-fg2);line-height:1.45}
.cb-k em{margin-left:8px;font-style:normal;font-size:10.5px;font-weight:600;color:var(--cb-ac2);background:rgba(18,18,18,.1);padding:1px 6px;border-radius:999px}
.cb-k::after{content:"";position:absolute;left:13px;top:50%;width:14px;height:14px;margin-top:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;opacity:0;transform:scale(.5);transition:opacity .18s,transform .28s var(--cb-spring);pointer-events:none}
.cb-k.on{border-color:#121212;background:#121212;color:#fff}
.cb-k.on::after{opacity:1;transform:scale(1)}
.cb-k.on b{transform:translateX(9px)}
.cb-k.on small{color:rgba(255,255,255,.72)}
.cb-k.on em{color:#ffc9a8;background:rgba(255,255,255,.16)}
.cb-k.none{flex:none;margin-right:100%;border-color:transparent;background:transparent;color:var(--cb-fg3)}
.cb-k.none.on{background:#121212;color:#fff}
.cb-kw.desc>.cb-k{display:grid;justify-content:stretch;align-content:center;gap:2px;padding:9px 40px 9px 14px;border-radius:14px;text-align:left}
.cb-kw.desc>.cb-k::after{left:auto;right:14px}
.cb-kw.desc>.cb-k.on b{transform:none}
.cb-kw.desc>.cb-k em{position:absolute;top:9px;right:38px;margin:0}
.cb-k:active{transform:scale(.98)}
@media(hover:hover){.cb-k:not(.on):hover{border-color:#121212}}
.cb-row{position:sticky;bottom:-4px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding-top:8px;background:linear-gradient(rgba(255,255,255,0),#fff 10px)}
.cb-row .cb-c.pr{flex:1 1 100%}
.cb-i{display:flex;align-items:center;gap:8px}
.cb-i input{flex:1;min-width:0;height:44px;padding:0 16px;border:1px solid #e3e3e3;border-radius:999px;background:var(--cb-bg2);color:var(--cb-fg);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s,background .2s}
.cb-i input::placeholder{color:var(--cb-fg3);font-size:14px}
.cb-i input:focus{outline:0;background:#fff;border-color:var(--cb-ac);box-shadow:0 0 0 3px rgba(18,18,18,.15)}
.cb-i button{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#121212;color:#fff;cursor:pointer;transition:transform .25s var(--cb-spring)}
.cb-i button:active{transform:scale(.9)}
.cb-i svg{display:block;width:17px;height:17px}
.cb-e{margin:8px 0 0 16px;font-size:12.5px;color:#b5430c}
.cb-e:empty{display:none}
.cb-p.fin .cb-i{display:none}
.cb-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* ── 390px 등 좁은 화면: 아래에서 올라오는 시트 ── */
@media(max-width:560px){
.cb-lz{--w:122px;--h:48px;gap:8px}
.cb-xf{padding-left:15px;gap:8px}
.cb-xl{font-size:14.5px}
.cb-p{left:0;right:0;bottom:0;width:auto;height:calc(100vh - max(16px,env(safe-area-inset-top)));height:calc(100dvh - max(16px,env(safe-area-inset-top)));border:0;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(18,18,18,.18);font-size:15px;line-height:1.55;transform:translateY(100%);opacity:1;transform-origin:50% 100%;transition:transform .55s var(--cb-ease)}
.cb-p.in{transform:none}
.cb-h{padding:22px 10px 10px 14px;touch-action:none}
.cb-grip{display:block;position:absolute;left:50%;top:8px;width:38px;height:5px;margin-left:-19px;border-radius:5px;background:#dedede}
.cb-bar{padding:0 14px 10px}
.cb-ib{width:40px;height:40px}
.cb-b{padding:16px 14px 8px}
.cb-r{max-width:94%}
.cb-u{max-width:86%}
.cb-card{margin-left:0}
.cb-cf{max-width:calc(100% - 34px)}
.cb-row-b .k{width:100px}
.cb-f{padding:10px 14px max(12px,env(safe-area-inset-bottom))}
.cb-c{min-height:44px;font-size:15px}
.cb-c.ghost{min-height:34px;font-size:13px}
.cb-o{max-height:50dvh}
.cb-i input{height:46px}
.cb-i button{width:46px;height:46px}
.cb-p.kb{border-radius:0}
.cb-p.kb .cb-o{max-height:30dvh}
}
/* 낮은 화면(200% 확대 · 가로 모드): 대화가 보이도록 선택지 · 머리를 줄인다 */
@media(max-height:600px){
.cb-h{padding:10px 10px 8px 14px}
.cb-hm{width:30px;height:30px;border-radius:9px}
.cb-bar{padding-bottom:8px}
.cb-b{padding-top:10px}
.cb-o{max-height:30vh;margin-bottom:8px}
.cb-f{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){
.cb-p,.cb-s,.cb-bar i::after{transition:none!important}
.cb-p.in{transform:none!important}
.cb-r,.cb-u,.cb-t,.cb-c,.cb-k,.cb-gh,.cb-card,.cb-sec,.cb-prop li,.cb-cf,.cb-cf dt,.cb-cf dd,.cb-done,.cb-flash::after,.cb-dots i{animation:none!important}
.cb-o.out,.cb-new,.cb-p.out{transition:none!important}
.cb-ok circle,.cb-ok path{animation:none;stroke-dashoffset:0}
}

/* v4: 마지막 확인 뒤에는 입력창을 숨긴다 · 제안 줄 표시 */
.cb-i[hidden]{display:none}
.cb-tags{flex:none;display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.cb-tag.prop{background:#fff;color:var(--cb-fg2);box-shadow:inset 0 0 0 1px var(--cb-line)}
.cb-sub{margin-left:8px;font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--cb-fg3)}
.cb-sug li b{font-weight:500}

/* v5: 대화 목록 · 하단 탭 · 대화 지우기 · 키보드 · 작은 화면 */
.cb-p button,.cb-l,.cb-q{touch-action:manipulation}
.cb-ib.cb-txt{width:auto;height:34px;gap:5px;padding:0 10px;border-radius:999px;font:inherit;font-size:12.5px;display:inline-flex;align-items:center;color:var(--cb-fg2)}
.cb-ib.cb-txt svg{width:14px;height:14px}
.cb-tabs{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--cb-line);background:#fff;padding-bottom:max(0px,env(safe-area-inset-bottom))}
.cb-tabs[hidden]{display:none}
.cb-tabs button{min-height:44px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--cb-fg3);cursor:pointer;border-top:0;position:relative;-webkit-tap-highlight-color:transparent;transition:color .25s var(--cb-ease)}
.cb-tabs button span,.cb-tabs button{transform-origin:center}
.cb-tabs button:active{transform:scale(.94);transition:transform .08s}
.cb-tabs::before{content:"";position:absolute;top:-1px;left:0;width:50%;height:2px;border-radius:2px;background:var(--cb-fg);transition:transform .38s var(--cb-spring)}
.cb-tabs:has(button:nth-child(2).on)::before{transform:translateX(100%)}
.cb-tabs::after{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 12px);border-radius:10px;background:var(--cb-bg3);z-index:0;transition:transform .38s var(--cb-spring)}
.cb-tabs:has(button:nth-child(2).on)::after{transform:translateX(calc(100% + 12px))}
.cb-tabs button{z-index:1}
.cb-tabs button.on{color:var(--cb-fg)}
.cb-tabs button:focus{outline:none}.cb-tabs button:focus-visible{outline:2px solid var(--cb-fg);outline-offset:-6px;border-radius:12px}
.cb-p.tabs .cb-f{padding-bottom:10px}
.cb-ls{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px;background:#fff}
.cb-ls[hidden]{display:none}
.cb-b[hidden],.cb-f[hidden]{display:none}
.cb-lsl{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.cb-li{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--cb-line);border-radius:16px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cb-li:focus-visible,.cb-back:focus-visible{outline:2px solid var(--cb-ac);outline-offset:2px}
@media(hover:hover){.cb-li:hover{border-color:#121212}}
.cb-lt{flex:1;min-width:0;display:grid;gap:2px}
.cb-l1{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.cb-l1 time{font-size:12px;color:var(--cb-fg3)}
.cb-lp{font-size:13px;color:var(--cb-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-lsf,.cb-lsa{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.cb-note{flex:1 1 100%;margin:0;font-size:12.5px;color:var(--cb-fg2)}
.cb-back{min-height:44px;margin:-6px 0 4px -8px;padding:0 8px;border:0;background:none;color:var(--cb-fg2);font:inherit;font-size:13.5px;cursor:pointer}
.cb-lh{margin:0 0 8px;font-size:16px}
.cb-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0 0 6px;font-size:13.5px}
.cb-dl dt{color:var(--cb-fg3)}.cb-dl dd{margin:0;overflow-wrap:anywhere}
.cb-ls .cb-sec{padding:10px 0 8px}
.cb-tr{margin-top:12px;font-size:13px}.cb-tr summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.cb-tr ul{margin:0;padding-left:18px;color:var(--cb-fg2);overflow-wrap:anywhere}
/* 키보드가 올라온 동안: 패널을 보이는 영역 안으로 */
.cb-p.kb{bottom:var(--cb-kb-bottom,0px);height:var(--cb-vvh,auto);max-height:var(--cb-vvh,none)}
.cb-p.kb .cb-bar{display:none}
.cb-p.kb .cb-tabs{display:none}
@media(min-width:561px){.cb-p.kb{bottom:calc(var(--cb-kb-bottom,0px) + 8px);height:min(720px,calc(var(--cb-vvh,100vh) - 16px));max-height:none}}
@media(pointer:coarse){
.cb-c.sub,.cb-c.ghost{min-height:44px}
.cb-ib{width:44px;height:44px}
.cb-ib.cb-txt{height:44px;width:auto}
.cb-row-b{min-height:44px;align-items:center}
.cb-new{height:44px}
.cb-k{min-height:44px}
.cb-tr summary,.cb-back{min-height:44px}
button.cb-m.me{min-height:44px}
}
/* 가로 모드 등 낮은 화면 */
@media(max-height:500px) and (orientation:landscape){
.cb-p{top:8px;bottom:8px;height:auto;max-height:none}
.cb-bar{display:none}
.cb-o{max-height:34vh}
.cb-p.kb{top:0;bottom:var(--cb-kb-bottom,0px);height:var(--cb-vvh,auto)}
.cb-p.kb .cb-h{display:none}
}
@media(prefers-reduced-motion:reduce){.cb-li{transition:none}}

/* 하단 버튼: 터치 기기는 칩도 44px · 움직임 줄이기는 서서히 바뀌기만 */
@media(pointer:coarse){.cb-q{height:44px;padding:0 16px;border-radius:22px;font-size:14.5px}.cb-q::before{inset:0}}
@media(prefers-reduced-motion:reduce){
.cb-lz,.cb-lz *{animation:none!important;transition-property:opacity!important;transition-duration:.18s!important;transition-delay:0s!important;transition-timing-function:linear!important}
.cb-l,.cb-l:hover,.cb-l:active,.cb-q,.cb-q:hover,.cb-q:active{translate:none!important;scale:none!important}
.cb-q,.cb-q span{transform:none!important}
.cb-lz.is-compact .cb-xi{transform:translateX(calc(var(--w) - var(--h)/2 - 28px))}
}

@media (prefers-reduced-motion:reduce){.cb-tabs::before,.cb-tabs::after{transition:none}.cb-tabs button:active{transform:none}}