/* 솔랩스 마이크로 UI 키트: React Bits의 ThoughtLine · StatusMark · CallChip · RubberSegment · GlideSelect · LineSidebar · SloshGauge · PromptBar · VoicePill · SwipeToast 동작을 솔랩스 색(잉크 · 블루 · 민트)으로 옮김 */
:root{--u-ink:#0B0D12;--u-ink2:#394152;--u-ink3:#6B7385;--u-line:#E3E7EF;--u-paper:#FAFBFD;--u-paper2:#F1F4F9;--u-blue:#2F7BFF;--u-blue-d:#1F5FE6;--u-mint:#2BDCA8;
  --u-ease:cubic-bezier(.23,1,.32,1);--u-io:cubic-bezier(.77,0,.175,1);--u-spring:cubic-bezier(.34,1.56,.64,1);
  --u-liquid:linear-gradient(110deg,#2BDCA8 0%,#12C8F0 22%,#1A86FF 46%,#3A5CFF 64%,#12C8F0 84%,#2BDCA8 100%)}
@keyframes u-liquid{to{background-position:300% 50%}}
@keyframes u-spin{to{transform:rotate(360deg)}}

/* ThoughtLine: 반짝이는 글자 · 흐르는 시간 · 단계가 접히는 기록 */
.tl{display:flex;flex-direction:column;align-items:flex-start;font-size:14.5px;font-weight:500;line-height:1.25;color:var(--u-ink)}
.tl-head{all:unset;display:inline-flex;align-items:center;gap:.4em;white-space:nowrap;cursor:default;border-radius:8px}
.tl[data-done] .tl-head{cursor:pointer}
.tl-head:focus-visible{outline:2px solid var(--u-blue);outline-offset:3px}
.tl-glyph{width:1.15em;height:1.15em;flex:none;display:grid;place-items:center}
.tl-glyph svg{width:100%;height:100%;overflow:visible}
.tl[data-working] .tl-glyph svg{animation:tl-breathe 1.8s var(--u-io) infinite}
@keyframes tl-breathe{0%,100%{transform:scale(.82) rotate(0);opacity:.75}50%{transform:scale(1.08) rotate(45deg);opacity:1}}
.tl-label{display:inline-grid}
.tl-text{grid-area:1/1;width:max-content;opacity:0;filter:blur(2px);transition:opacity 350ms var(--u-ease),filter 350ms var(--u-ease)}
.tl-text[data-active]{opacity:1;filter:none}
.tl-text.done[data-active]{opacity:.78}
.tl-shim{display:inline-block;transition:opacity 180ms var(--u-ease),filter 180ms var(--u-ease)}
.tl-shim.tl-swap{opacity:0;filter:blur(3px)}
.tl[data-working] .tl-shim{background:linear-gradient(100deg,rgba(11,13,18,.42) 30%,var(--u-ink) 50%,rgba(11,13,18,.42) 70%);background-size:250% 100%;background-position:125% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tl-shim 1.8s linear infinite}
@keyframes tl-shim{to{background-position:-125% 0}}
.tl-timer{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.86em;font-weight:400;font-variant-numeric:tabular-nums;color:var(--u-ink3);transition:transform 350ms var(--u-io),opacity 350ms}
.tl-chev{display:inline-flex;width:1em;height:1em;opacity:0;color:var(--u-ink3);transition:opacity 200ms,transform 250ms var(--u-ease)}
.tl[data-done] .tl-chev{opacity:.7}
.tl[data-open] .tl-chev{transform:rotate(180deg)}
.tl-trace{display:grid;grid-template-rows:0fr;min-width:100%;transition:grid-template-rows 380ms var(--u-ease)}
.tl[data-open] .tl-trace{grid-template-rows:1fr}
.tl-fold{min-height:0;overflow:hidden}
.tl-steps{display:flex;flex-direction:column;gap:.5em;padding:.7em 0 .2em .55em;margin-left:.5em;border-left:1px solid var(--u-line);font-size:.92em;font-weight:400;color:var(--u-ink2)}
.tl-step{display:flex;align-items:center;gap:.55em;padding-left:.6em;animation:tl-in 260ms var(--u-ease) both}
@keyframes tl-in{from{opacity:0;transform:translateY(-4px)}}
.tl-step[data-done] .tl-step-t{opacity:.62}

/* StatusMark: 점선 대기 → 도는 호 → 그려지는 체크 */
.smk{width:18px;height:18px;flex:none;overflow:visible;color:#B9C3D4;transition:color 200ms}
.smk .t{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-opacity:0;stroke-width:2;transition:fill-opacity 180ms,stroke-opacity 200ms}
.smk .r{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:.055 .07;transform-origin:10px 10px}
.smk .c{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1.05;opacity:0}
.smk[data-s="run"]{color:var(--u-blue)}
.smk[data-s="run"] .t{stroke-opacity:.18}
.smk[data-s="run"] .r{stroke-dasharray:.26 .74;animation:u-spin .8s linear infinite}
.smk[data-s="done"]{color:var(--u-blue)}
.smk[data-s="done"] .t{fill-opacity:.08}
.smk[data-s="done"] .r{stroke-dasharray:1 0;transition:stroke-dasharray 240ms var(--u-ease)}
.smk[data-s="done"] .c{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 260ms var(--u-ease) 110ms,opacity 0ms 110ms}

/* CallChip: 채워지는 진행 · ms 카운터 · 끝나면 민트로 씻겨 내려감 */
.cc{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--u-ink);white-space:nowrap}
.cc-fill{position:absolute;inset:0;background:rgba(47,123,255,.1);transform:scaleX(0);transform-origin:left;pointer-events:none}
.cc[data-s="run"] .cc-fill{transform:scaleX(1);transition:transform var(--d,1200ms) linear}
.cc[data-s="done"] .cc-fill{transform:scaleX(1);background:rgba(43,220,168,.2);clip-path:inset(100% 0 0 0);transition:background-color 120ms,clip-path 420ms var(--u-ease) 180ms}
.cc[data-s="done"]{box-shadow:inset 0 0 0 1px rgba(47,123,255,.32)}
.cc>*{position:relative}
.cc-slot{position:relative;width:14px;height:14px;overflow:hidden;flex:none}
.cc-g{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(70%);filter:blur(3px);transition:opacity 220ms var(--u-ease),transform 220ms var(--u-ease),filter 220ms}
.cc-g[data-on]{opacity:1;transform:none;filter:none}
.cc-g.out{transform:translateY(-70%)}
.cc-spin{width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(47,123,255,.22);border-top-color:var(--u-blue);animation:u-spin .7s linear infinite}
.cc-ok{color:var(--u-blue)}
.cc-ms{color:var(--u-ink3);font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}
.cc[data-s="done"] .cc-ms{color:var(--u-blue-d)}

/* RubberSegment: 늘어났다 붙는 고무 손잡이 */
.rseg{position:relative;display:inline-grid;grid-auto-flow:column;padding:3px;border-radius:12px;background:var(--u-paper2);box-shadow:inset 0 1px 2px rgba(10,30,80,.06);max-width:100%;user-select:none;-webkit-user-select:none}
.rseg>button{all:unset;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 15px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--u-ink3);cursor:pointer;white-space:nowrap;transition:color 180ms}
.rseg>button:hover{color:var(--u-ink2)}
.rseg>button[aria-pressed="true"],.rseg>button[aria-selected="true"]{color:var(--u-ink);font-weight:600}
.rseg>button:focus-visible{outline:2px solid var(--u-blue);outline-offset:1px}
.rseg-thumb{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(10,30,80,.14),0 0 0 1px rgba(10,30,80,.04);transition:left 360ms var(--u-spring),width 360ms var(--u-spring),transform 360ms var(--u-spring)}
.rseg-thumb.stretch{transition:left 120ms var(--u-ease),width 120ms var(--u-ease)}
.rseg.mini>button{height:26px;padding:0 9px;font-size:12px;font-family:'IBM Plex Mono',ui-monospace,monospace}
.rseg.mini{padding:2px;border-radius:10px}.rseg.mini .rseg-thumb{top:2px;bottom:2px;border-radius:8px}
.rseg.line{background:none;box-shadow:none;padding:0;border-bottom:1px solid var(--u-line);border-radius:0}
.rseg.line>button{height:40px;border-radius:0;padding:0 14px}
.rseg.line .rseg-thumb{top:auto;bottom:-1px;height:2px;border-radius:2px;background:var(--u-liquid);background-size:300% 100%;animation:u-liquid 7s linear infinite;box-shadow:none}

/* GlideSelect: 모서리에서 열리는 메뉴 + 미끄러지는 하이라이트 */
.gsel{position:relative;display:block}
.gsel-t{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;padding:0 12px 0 14px;border-radius:12px;background:var(--u-paper);box-shadow:inset 0 0 0 1px var(--u-line);font-size:14.5px;color:var(--u-ink);cursor:pointer;transition:box-shadow 160ms,background 160ms,transform 160ms var(--u-ease)}
.gsel-t:hover{background:#fff;box-shadow:inset 0 0 0 1px #C9D3E5}
.gsel-t:active{transform:scale(.985)}
.gsel-t[aria-expanded="true"],.gsel-t:focus-visible{background:#fff;box-shadow:inset 0 0 0 1.5px var(--u-blue),0 0 0 4px rgba(47,123,255,.12)}
.gsel-t svg{width:14px;height:14px;color:var(--u-ink3);transition:transform 220ms var(--u-ease)}
.gsel-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.gsel-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsel-m{position:absolute;z-index:30;left:0;top:calc(100% + 6px);min-width:100%;padding:5px;border-radius:12px;background:#fff;box-shadow:0 18px 40px -16px rgba(10,30,80,.35),0 0 0 1px rgba(10,30,80,.07);transform-origin:top left;animation:gsel-pop 180ms var(--u-ease) both;max-height:260px;overflow:auto}
@keyframes gsel-pop{from{opacity:0;transform:scale(.94) translateY(-4px)}}
.gsel-m.closing{animation:gsel-out 120ms ease both}
@keyframes gsel-out{to{opacity:0;transform:scale(.97)}}
.gsel-hl{position:absolute;left:5px;right:5px;border-radius:8px;background:rgba(47,123,255,.08);transition:top 220ms var(--u-ease),height 220ms var(--u-ease),opacity 150ms;opacity:0;pointer-events:none}
.gsel-o{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;border-radius:8px;font-size:14px;color:var(--u-ink2);cursor:pointer}
.gsel-o[aria-selected="true"]{color:var(--u-ink);font-weight:600}
.gsel-o[aria-selected="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--u-blue);box-shadow:0 0 0 3px rgba(47,123,255,.15)}

/* SloshGauge: 값을 쫓아 출렁이는 액체 탱크 */
.slosh{position:relative;width:86px;height:150px;border-radius:22px;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#F6F8FC,#EDF1F8);box-shadow:inset 0 0 0 1px var(--u-line),inset 0 6px 14px -8px rgba(10,30,80,.18);flex:none}
.slosh-liq{position:absolute;inset:0;background:var(--u-liquid);background-size:300% 100%;animation:u-liquid 8s linear infinite;clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.slosh-liq::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 30%,transparent 70%,rgba(255,255,255,.2))}
.slosh-val{position:absolute;inset:0;display:grid;place-items:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:22px;font-weight:600;color:var(--u-ink);z-index:2;mix-blend-mode:normal}
.slosh-ticks{position:absolute;right:0;top:0;bottom:0;width:20%;background-image:linear-gradient(to top,rgba(11,13,18,.16) 0 1px,transparent 1px);background-size:100% 25%;z-index:1}
.slosh-gloss{position:absolute;left:10%;top:6%;width:22%;height:70%;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));z-index:3;pointer-events:none}

/* PromptBar: 글이 생기면 잉크로 차오르는 전송 버튼, 처리 중엔 정지 사각형 */
.pbar2{display:flex;align-items:flex-end;gap:8px;padding:8px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line),0 8px 24px -16px rgba(10,30,80,.3);transition:box-shadow 200ms}
.pbar2:focus-within{box-shadow:inset 0 0 0 1.5px var(--u-blue),0 0 0 4px rgba(47,123,255,.1),0 8px 24px -16px rgba(10,30,80,.3)}
.pb-ic{all:unset;flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--u-ink3);cursor:pointer;transition:background 150ms,color 150ms,transform 160ms var(--u-ease)}
.pb-ic:hover{background:var(--u-paper2);color:var(--u-ink)}
.pb-ic:active{transform:scale(.94)}
.pb-ic svg{width:18px;height:18px}
.pb-in{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14.5px;line-height:22px;color:var(--u-ink);padding:7px 2px;resize:none}
.pb-in:focus-visible{outline:none}
.pb-model{flex:none;align-self:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;padding:4px 9px;border-radius:999px;background:var(--u-paper2);color:var(--u-ink3)}
.pb-send{all:unset;position:relative;flex:none;width:36px;height:36px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:#E4E9F2;color:#fff;cursor:pointer;transition:transform 200ms var(--u-spring)}
.pb-send::before{content:"";position:absolute;inset:0;background:var(--u-ink);clip-path:circle(0% at 50% 100%);transition:clip-path 420ms var(--u-ease)}
.pb-send[data-on]::before,.pb-send[data-busy]::before{clip-path:circle(150% at 50% 100%)}
.pb-send[data-on]{transform:scale(1.04)}
.pb-send:active{transform:scale(.94)}
.pb-send i{position:relative;width:16px;height:16px;display:grid;place-items:center}
.pb-send svg{width:16px;height:16px;transition:transform 260ms var(--u-ease),opacity 200ms}
.pb-send .stop{position:absolute;width:10px;height:10px;border-radius:2.5px;background:#fff;transform:scale(0);transition:transform 260ms var(--u-spring)}
.pb-send[data-busy] svg{transform:scale(.3);opacity:0}
.pb-send[data-busy] .stop{transform:scale(1)}

/* VoicePill: 누르면 막대 · 시계가 들어간 캡슐로 부풂 */
.vpill{all:unset;position:relative;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 6px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line),0 10px 26px -14px rgba(10,30,80,.35);cursor:pointer;transition:padding 380ms var(--u-spring),background 300ms,box-shadow 300ms}
.vpill .mic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--u-ink);color:#fff;flex:none;transition:background 300ms,transform 300ms var(--u-spring)}
.vpill .mic svg{width:18px;height:18px}
.vpill .lv{display:flex;align-items:center;gap:3px;height:22px;width:0;overflow:hidden;opacity:0;transition:width 380ms var(--u-spring),opacity 200ms}
.vpill .lv i{width:3px;height:20%;border-radius:2px;background:var(--u-blue);transition:height 90ms}
.vpill .clk{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-variant-numeric:tabular-nums;color:var(--u-ink);width:0;overflow:hidden;opacity:0;transition:width 380ms var(--u-spring),opacity 200ms}
.vpill[data-on]{padding:0 18px 0 6px;background:#F3F7FF;box-shadow:inset 0 0 0 1.5px rgba(47,123,255,.45),0 12px 30px -14px rgba(47,123,255,.5)}
.vpill[data-on] .mic{background:#F25C54;transform:scale(.92)}
.vpill[data-on] .lv{width:66px;opacity:1}
.vpill[data-on] .clk{width:64px;opacity:1}
.vpill:focus-visible{outline:2px solid var(--u-blue);outline-offset:3px}

/* SwipeToast: 아래에서 올라오고, 남은 시간만큼 심지가 탐 */
.stoast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:120;transform:translate(-50%,140%);display:flex;flex-direction:column;min-width:min(340px,calc(100vw - 32px));max-width:calc(100vw - 32px);padding:13px 16px 15px;border-radius:14px;background:var(--u-ink);color:#fff;font-size:14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.45);overflow:hidden;touch-action:none;transition:transform 420ms var(--u-spring),opacity 260ms}
.stoast[data-in]{transform:translate(-50%,0)}
.stoast b{font-weight:600}
.stoast .fuse{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--u-liquid);background-size:300% 100%;animation:u-liquid 6s linear infinite;transform-origin:left}

/* JellyRadio: 고른 칩이 부풀고 이웃이 밀려남 */
.jelly{display:flex;flex-wrap:wrap;gap:8px}
.jelly>button{all:unset;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;color:var(--u-ink2);background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);cursor:pointer;transition:background 200ms,color 200ms,box-shadow 200ms}
.jelly>button:hover{box-shadow:inset 0 0 0 1px #BFCBE0}
.jelly>button[aria-checked="true"]{background:var(--u-ink);color:#fff;box-shadow:none;animation:jelly 520ms var(--u-ease)}
.jelly>button:focus-visible{outline:2px solid var(--u-blue);outline-offset:2px}
.jelly>button.nudge-l{animation:nudge-l 420ms var(--u-ease)}.jelly>button.nudge-r{animation:nudge-r 420ms var(--u-ease)}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.14,.9)}55%{transform:scale(.95,1.07)}80%{transform:scale(1.02,.99)}100%{transform:none}}
@keyframes nudge-l{40%{transform:translateX(-4px)}}@keyframes nudge-r{40%{transform:translateX(4px)}}

/* 롤링 숫자 (Counter) */
.roll{display:inline-flex;align-items:baseline;white-space:pre}
.roll .rd{display:inline-block;height:1.25em;overflow:hidden;line-height:1.25;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.roll .rc{display:flex;flex-direction:column;transition:transform 1.1s var(--u-ease)}
.roll .rc span{display:block;height:1.25em;line-height:1.25}
.roll .rl{display:inline-block;animation:roll-l 420ms var(--u-ease) both}
@keyframes roll-l{from{opacity:0;filter:blur(4px);transform:translateY(40%)}}

/* 업로드 영역 */
.udrop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px;border-radius:16px;text-align:center;cursor:pointer;color:var(--u-ink3);font-size:14px;background:
  linear-gradient(90deg,#C3CEE2 50%,transparent 0) 0 0/12px 1.5px repeat-x,linear-gradient(90deg,#C3CEE2 50%,transparent 0) 0 100%/12px 1.5px repeat-x,
  linear-gradient(0deg,#C3CEE2 50%,transparent 0) 0 0/1.5px 12px repeat-y,linear-gradient(0deg,#C3CEE2 50%,transparent 0) 100% 0/1.5px 12px repeat-y,#FBFCFE;border-radius:16px;transition:background-color 200ms}
.udrop:hover,.udrop.over{animation:ants .6s linear infinite;background-color:#F5F8FF}
@keyframes ants{to{background-position:12px 0,-12px 100%,0 -12px,100% 12px}}
.udrop .ui{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--u-blue);box-shadow:0 0 0 1px var(--u-line),0 8px 18px -10px rgba(47,123,255,.5);transition:transform 300ms var(--u-spring)}
.udrop:hover .ui{transform:translateY(-3px)}
.udrop .ui svg{width:20px;height:20px}
.udrop b{color:var(--u-ink);font-size:15px}
.udrop small{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px}
.udrop:focus-visible{outline:2px solid var(--u-blue);outline-offset:3px}
.ufile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);font-size:13.5px;animation:tl-in 260ms var(--u-ease)}
.ufile b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--u-ink);font-weight:500}
.ufile small{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--u-ink3)}

/* 실행 버튼 상태 */
.btn .bl{display:inline-grid}.btn .bl>span{grid-area:1/1;transition:opacity 260ms var(--u-ease),filter 260ms}
.btn .bl .b2{opacity:0;filter:blur(3px);display:inline-flex;align-items:center;gap:8px}
.btn[data-busy] .bl .b1{opacity:0;filter:blur(3px)}.btn[data-busy] .bl .b2{opacity:1;filter:none}
.btn[data-busy]{pointer-events:none}
.btn .bspin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:u-spin .7s linear infinite}

/* 블러로 들어오는 결과 블록 */
.blur-in{animation:blur-in 520ms var(--u-ease) both}
@keyframes blur-in{from{opacity:0;filter:blur(6px);transform:translateY(8px)}}

/* 헤더: 카카오톡 상담 · 언어 */
.kakao{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 6px;border-radius:12px;font-size:13.5px;font-weight:600;color:var(--u-ink);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--u-line),0 6px 16px -10px rgba(10,30,80,.25);cursor:pointer;white-space:nowrap;transition:box-shadow 200ms,transform 160ms var(--u-ease)}
.kakao:hover{box-shadow:inset 0 0 0 1px #E8D35A,0 8px 20px -10px rgba(200,170,0,.45)}
.kakao:active{transform:scale(.97)}
.kakao .kb{width:28px;height:28px;border-radius:9px;background:#FEE500;display:grid;place-items:center;transition:transform 300ms var(--u-spring)}
.kakao:hover .kb{transform:rotate(-8deg) scale(1.06)}
.kakao .kb svg{width:16px;height:16px;color:#191600}
.kakao:focus-visible{outline:2px solid var(--u-blue);outline-offset:2px}
/* 헤더 묶음 */
.hdr .rseg.mini{background:rgba(236,240,247,.85);box-shadow:inset 0 0 0 1px rgba(214,221,233,.7)}
.hdr .rseg.mini>button{height:28px;padding:0 9px;font-size:11.5px;letter-spacing:.04em}
/* 헤더의 카카오톡 · 텔레그램은 아이콘만 (설명은 마우스를 올리면 말풍선) */
.hdr .kakao .kt{display:none}.hdr .kakao{padding:0 5px}
/* 메뉴가 8개라 좁은 데스크톱에서 줄바꿈 없이 촘촘하게 */
.hdr nav a{white-space:nowrap}
@media (max-width:1180px){.hdr nav a{padding-inline:10px!important}}
@media (max-width:1040px){.hdr nav a{padding-inline:7px!important;font-size:13.5px!important}}
@media (max-width:380px){.hdr .lang{display:none}}

/* ===== v9: React Bits MICRO 추가분 ===== */
/* GradientText: 민트 → 시안 → 블루 → 인디고가 오가며 흐름(요요) */
@keyframes gtx{from{background-position:0% 50%}to{background-position:100% 50%}}
.g,.gtx{background:linear-gradient(90deg,#2BDCA8,#12C8F0,#1A86FF,#5B6CFF,#2BDCA8)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;animation:gtx 7s ease-in-out infinite alternate!important}
.gtag{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;isolation:isolate;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;width:max-content}
.gtag::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(90deg,#2BDCA8,#12C8F0,#1A86FF,#5B6CFF,#2BDCA8);background-size:300% 100%;animation:gtx 7s ease-in-out infinite alternate;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1}
.gtag::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:-2}
.gtag>span{background:linear-gradient(90deg,#16B98C,#0EA5D8,#1A6FFF,#4F5BFF,#16B98C);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gtx 7s ease-in-out infinite alternate}
.gtag i{width:6px;height:6px;border-radius:50%;background:#2BDCA8;box-shadow:0 0 0 3px rgba(43,220,168,.2)}

/* BorderGlow: 버튼 · 카드 테두리에 밝은 색 메시 + 바깥 번짐 */
.btn.has-eg,.kakao.has-eg{overflow:visible!important}
.kakao{position:relative;isolation:isolate}
.eg{position:absolute;inset:-18px;z-index:-1;pointer-events:none;opacity:var(--eg,0);border-radius:calc(var(--egr,14px) + 18px);
  -webkit-mask:conic-gradient(from calc(var(--ea,0deg) - 80deg) at 50% 50%,transparent 0deg,#000 50deg,#000 110deg,transparent 160deg),linear-gradient(rgba(0,0,0,.28) 0 0);-webkit-mask-composite:source-over;mask:conic-gradient(from calc(var(--ea,0deg) - 80deg) at 50% 50%,transparent 0deg,#000 50deg,#000 110deg,transparent 160deg),linear-gradient(rgba(0,0,0,.28) 0 0);mask-composite:add}
.eg i{position:absolute;inset:18px;border-radius:var(--egr,14px)}
@media (max-width:760px){.eg{display:none}}
.eg-r{padding:1.5px;background:conic-gradient(from var(--ea,0deg),#8BFFE0,#2BDCA8,#12C8F0,#1A86FF,#7A6BFF,#4FD8FF,#8BFFE0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.eg-h{box-shadow:0 0 1px 0 hsl(178 100% 72% / .9),0 0 4px 0 hsl(186 100% 66% / .7),0 0 10px 1px hsl(198 100% 62% / .5),0 0 14px 2px hsl(210 100% 62% / .34),0 0 22px 3px hsl(220 100% 64% / .16),inset 0 0 2px 0 hsl(186 100% 72% / .7),inset 0 0 8px 0 hsl(195 100% 66% / .35),inset 0 0 18px 0 hsl(210 100% 66% / .16)}
.btn.dark>.eg .eg-h{box-shadow:0 0 1px 0 hsl(170 100% 75% / 1),0 0 5px 0 hsl(180 100% 66% / .8),0 0 12px 1px hsl(195 100% 60% / .55),0 0 16px 3px hsl(210 100% 60% / .4),0 0 24px 4px hsl(222 100% 62% / .2),inset 0 0 3px 0 hsl(178 100% 75% / .8),inset 0 0 10px 0 hsl(190 100% 65% / .4)}
.card.has-eg::after,.glow.has-eg::after{opacity:0!important}
.card>.eg,.glow>.eg{inset:-32px;border-radius:calc(var(--egr,16px) + 32px);z-index:5}.card>.eg i,.glow>.eg i{inset:32px}

/* BellToggle */
.bell{--bt-clip:0px;position:relative;display:inline-grid;grid-template-columns:max-content;user-select:none;-webkit-user-select:none;transition:transform 160ms var(--u-ease)}
.bell[data-pressed]{transform:scale(.97)}
.bell-b{all:unset;box-sizing:border-box;grid-area:1/1;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 17px;border-radius:15px;background:#EAF0F8;color:var(--u-ink);font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;clip-path:inset(0 var(--bt-clip) 0 0 round 15px);transition:clip-path 340ms cubic-bezier(.23,1,.32,1),background-color 220ms,color 220ms}
.bell-b:hover{background:#E1E8F3}
.bell[data-on="true"] .bell-b{background:var(--u-ink);color:#fff}
.bell-b:focus-visible{outline:2px solid var(--u-blue);outline-offset:3px}
.bell-i{position:relative;display:inline-grid;width:18px;height:18px;flex:none;color:#1F5FE6;transition:color 220ms}
.bell[data-on="true"] .bell-i{color:#7CF5D2}
.bell-g{display:grid;place-items:center;grid-area:1/1;transform-origin:50% 16%}
.bell-g svg{width:18px;height:18px}
.bell-w{position:absolute;top:-4px;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:0;pointer-events:none}
.bell-w.l{right:calc(100% - 1px);transform-origin:100% 100%}.bell-w.r{left:calc(100% - 1px);transform-origin:0 100%}
.bell-s{display:inline-grid;grid-template-columns:max-content;height:18px;line-height:18px}
.bell-f{grid-area:1/1;justify-self:start;opacity:0;filter:blur(2px);transition:opacity 220ms,filter 220ms}
.bell[data-on="false"] .bell-f.off,.bell[data-on="true"] .bell-f.on{opacity:1;filter:none}
.subx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--u-ease)}
.subx.open{grid-template-rows:1fr}.subx>div{min-height:0;overflow:hidden}
.subf{display:flex;flex-direction:column;gap:10px;padding-top:14px}
.subf .row{display:flex;gap:8px}
.subf .btn.sbtn{--h:44px;height:44px;padding:0 18px!important;font-size:14px;border-radius:12px;flex:none}
.subf input[type=email]{flex:1;min-width:0;height:44px;border:0;border-radius:12px;padding:0 14px;font:inherit;font-size:14.5px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);outline:none;color:var(--u-ink)}
.subf input[type=email]:focus{box-shadow:inset 0 0 0 1.5px var(--u-blue),0 0 0 4px rgba(47,123,255,.12)}

.subw{display:flex;flex-direction:column;align-items:flex-start;max-width:420px}
.subw .subx{width:100%}
.foot .subw .scheck{color:#9AA6BC}.foot .subw .scheck .sbox{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.foot .subw input[type=email]{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.foot .subw .bell-b{background:rgba(255,255,255,.08);color:#fff}.foot .subw .bell-b:hover{background:rgba(255,255,255,.13)}.foot .subw .bell-i{color:#7CF5D2}
.foot .subw .bell[data-on="true"] .bell-b{background:#fff;color:var(--u-ink)}.foot .subw .bell[data-on="true"] .bell-i{color:#1F5FE6}
/* VoicePill */
.vp{--vp-size:56px;--vp-extra:164px;--vp-reach:10px;position:relative;display:inline-grid;place-items:center;isolation:isolate;width:var(--vp-size);height:var(--vp-size);margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:#fff;cursor:pointer;outline:none;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform 160ms var(--u-ease)}
.vp[data-pressed]{transform:scale(.95)}
.vp:focus-visible{box-shadow:0 0 0 3px rgba(47,123,255,.35)}
.vp-cap{position:absolute;inset:0 0 0 calc(-1 * (var(--vp-reach) + var(--vp-extra)));border-radius:999px;background:linear-gradient(90deg,rgba(43,220,168,.08),rgba(47,123,255,.12));box-shadow:inset 0 0 0 1px rgba(47,123,255,.22);clip-path:inset(0 0 0 calc(var(--vp-reach) + var(--vp-extra)) round 999px);transition:clip-path 260ms var(--u-ease);pointer-events:none}
.vp[data-state="listening"] .vp-cap{clip-path:inset(0 0 0 0 round 999px)}
.vp-time{position:absolute;top:0;bottom:0;right:100%;width:52px;display:grid;place-items:center;color:var(--u-ink);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;opacity:0;filter:blur(2px);transition:opacity 200ms,filter 200ms;pointer-events:none}
.vp-wave{position:absolute;top:22%;right:calc(100% + 52px);width:110px;height:56%;opacity:0;filter:blur(2px);transition:opacity 200ms,filter 200ms;pointer-events:none}
.vp[data-state="listening"] .vp-time,.vp[data-state="listening"] .vp-wave{opacity:1;filter:none}
.vp-g{position:relative;display:grid;place-items:center;width:var(--vp-size);height:var(--vp-size);border-radius:999px;background:var(--u-ink);box-shadow:0 10px 24px -10px rgba(10,30,80,.55),inset 0 1px 0 rgba(255,255,255,.12);transition:background 200ms,box-shadow 200ms}
.vp:hover .vp-g{box-shadow:0 14px 30px -10px rgba(26,134,255,.55),inset 0 1px 0 rgba(255,255,255,.16)}
.vp-g>*{grid-area:1/1;transition:opacity 200ms,filter 200ms,transform 200ms var(--u-ease)}
.vp-mic{display:inline-flex}.vp-mic svg{width:22px;height:22px}
.vp-stop{width:17px;height:17px;border-radius:5px;background:#FF6B62;opacity:0;filter:blur(2px);transform:scale(.6)}
.vp[data-state="listening"] .vp-mic{opacity:0;filter:blur(2px);transform:scale(.7)}
.vp[data-state="listening"] .vp-stop{opacity:1;filter:none;transform:none}

/* WarmTooltip */
.wtip{position:fixed;left:0;top:0;z-index:130;pointer-events:none;opacity:0;transition:transform 220ms var(--u-ease),width 220ms var(--u-ease),opacity 140ms}
.wtip.on{opacity:1}
.wtip-b{position:absolute;inset:0;border-radius:9px;background:var(--u-ink);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 10px 26px -10px rgba(10,20,50,.55);overflow:hidden;transform:scale(.88);transform-origin:center bottom;transition:transform 220ms cubic-bezier(.34,1.4,.64,1)}
.wtip[data-side="bottom"] .wtip-b{transform-origin:center top}
.wtip.on .wtip-b{transform:none}
.wtip-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wtip-l.in{animation:wtin 180ms var(--u-ease) both}
.wtip-l.out{animation:wtout 160ms var(--u-ease) both}
@keyframes wtin{from{opacity:0;transform:translateX(var(--dx,0));filter:blur(3px)}}
@keyframes wtout{to{opacity:0;transform:translateX(calc(var(--dx,0) * -1));filter:blur(3px)}}
.wtip-t{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;white-space:nowrap;letter-spacing:-.01em}
.wtip-t kbd{display:inline-flex;align-items:center;height:1.6em;padding:0 .45em;border-radius:.4em;background:rgba(255,255,255,.12);box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.86em;color:rgba(255,255,255,.75)}
.wtip-a{position:absolute;top:100%;width:8px;height:8px;margin:-5px 0 0 -4px;border-radius:2px;background:var(--u-ink);transform:rotate(45deg)}
.wtip[data-side="bottom"] .wtip-a{top:-3px;margin-top:0}
.wt-fuse{position:absolute;left:6px;right:6px;bottom:-5px;height:2px;border-radius:1px;background:var(--u-liquid);background-size:300% 100%;opacity:0;transform:scaleX(0);transform-origin:left;pointer-events:none;transition:transform 120ms,opacity 120ms}
.wt-arm>.wt-fuse{opacity:1;transform:scaleX(1);transition:transform 420ms linear,opacity 80ms}

/* BranchedMenu */
.bm{position:relative;display:flex;flex-direction:column;padding-left:14px;font-size:14px;line-height:1.2}
.bm::before{content:"";position:absolute;top:10px;bottom:0;left:0;width:2px;border-radius:1px;background:linear-gradient(180deg,#E1E6EF 0%,#E1E6EF 60%,transparent)}
.bm-mark{position:absolute;left:0;top:0;z-index:1;width:2px;height:16px;border-radius:1px;background:linear-gradient(180deg,#2BDCA8,#1A86FF);opacity:0;transition:top 260ms var(--u-ease),opacity 150ms}
.bm-mark[data-on]{opacity:1}
.bm-sec{display:flex;flex-direction:column}
.bm-head{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 6px 10px 0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--u-ink3);cursor:pointer;transition:color .2s}
.bm-head:hover,.bm-sec[data-open] .bm-head{color:var(--u-ink)}
.bm-head:focus-visible{outline:2px solid var(--u-blue);outline-offset:2px;border-radius:6px}
.bm-chev{width:14px;height:14px;opacity:.6;transition:transform .3s var(--u-ease)}
.bm-sec[data-open] .bm-chev{transform:rotate(180deg)}
.bm-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--u-ease)}
.bm-sec[data-open] .bm-body{grid-template-rows:1fr}
.bm-fold{min-height:0;overflow:hidden}
.bm-tree{position:relative;padding:6px 0;box-sizing:border-box}
.bm-lines{position:absolute;top:0;left:0;overflow:visible;opacity:0;pointer-events:none;transition:opacity 200ms}
.bm-sec[data-open] .bm-lines{opacity:1;transition:opacity 250ms 100ms}
.bm-base,.bm-reach{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bm-base{stroke:#DDE3ED}
.bm-reach{stroke-width:2;transition:stroke-dashoffset 420ms var(--u-ease)}
.bm-item{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:9px;width:100%;height:38px;padding:0 8px 0 40px;border-radius:10px;color:var(--u-ink3);font-size:14px;cursor:pointer;text-decoration:none;transition:color .2s,background .2s}
.bm-item:hover{color:var(--u-ink);background:rgba(47,123,255,.04)}
.bm-item[data-active]{color:var(--u-ink);font-weight:600}
.bm-item[data-active] .bm-ic{color:var(--u-blue)}
.bm-item:focus-visible{outline:2px solid var(--u-blue);outline-offset:-2px}
.bm-ic{display:inline-flex;flex:none;color:#A1AABB;transition:color .2s}.bm-ic svg{width:16px;height:16px}
.bm-ic .kb{width:18px;height:18px;border-radius:6px;background:#FEE500;display:grid;place-items:center}.bm-ic .kb svg{width:12px;height:12px;color:#191600}
.bm-lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-item em{margin-left:auto;font-style:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;color:#1F5FE6;background:rgba(47,123,255,.1);box-shadow:inset 0 0 0 1px rgba(47,123,255,.25);padding:1px 6px;border-radius:999px}

/* SpringCheck */
.scheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px;line-height:1.5;color:var(--u-ink2);user-select:none}
.scheck input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sbox{position:relative;flex:none;width:20px;height:20px;margin-top:0;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px #C5CEDD;display:grid;place-items:center;transition:box-shadow .2s}
.sbox::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--u-ink);transform:scale(0);transition:transform 360ms cubic-bezier(.34,1.56,.64,1)}
.sbox svg{position:relative;width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 260ms var(--u-ease) 80ms}
.scheck input:checked+.sbox::before{transform:scale(1)}
.scheck input:checked+.sbox svg{stroke-dashoffset:0}
.scheck input:focus-visible+.sbox{box-shadow:inset 0 0 0 1.5px var(--u-blue),0 0 0 4px rgba(47,123,255,.15)}
.scheck:hover .sbox{box-shadow:inset 0 0 0 1.5px #9FAEC6}
.scheck .st{transition:color .3s,opacity .3s}
.scheck.strike input:checked~.st{color:var(--u-ink3);text-decoration:line-through;text-decoration-color:rgba(107,115,133,.5)}
.scheck b{color:var(--u-ink);font-weight:600}
.scheck a{color:#1F5FE6}
.scheck.err .sbox{box-shadow:inset 0 0 0 1.5px #E5484D;animation:nudge-r .3s}

/* SquishSwitch */
.sqw{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:14px;color:var(--u-ink2);user-select:none}
.sqw input{position:absolute;opacity:0;width:1px;height:1px}
.sq{position:relative;flex:none;width:42px;height:24px;border-radius:12px;background:#D6DDE8;transition:background .25s}
.sq i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(10,30,80,.3);transition:left 300ms cubic-bezier(.34,1.4,.64,1)}
.sqw input:checked+.sq{background:var(--u-ink)}
.sqw input:checked+.sq i{left:21px}
.sq.go i{animation:sqst 300ms var(--u-ease)}
@keyframes sqst{40%{width:26px;border-radius:9px}100%{width:18px}}
.sqw input:checked+.sq.go i{animation-name:sqst2}
@keyframes sqst2{40%{width:26px;margin-left:-8px}100%{width:18px;margin-left:0}}
.sqw input:focus-visible+.sq{box-shadow:0 0 0 3px rgba(47,123,255,.3)}

/* SlideCommit */
.slc{position:relative;display:block;height:56px}
.slc-tr{position:relative;width:100%;height:100%;border-radius:999px;background:#EEF2F8;box-shadow:inset 0 1px 3px rgba(10,30,80,.08);touch-action:none;user-select:none;-webkit-user-select:none}
.slc-lb{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:14.5px;font-weight:600;padding-left:40px}
.slc-tx{grid-area:1/1;background:linear-gradient(100deg,rgba(11,13,18,.35) 30%,rgba(11,13,18,.9) 50%,rgba(11,13,18,.35) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:tl-shim 2.2s linear infinite;opacity:calc(1 - var(--p,0) * 1.6);transition:opacity .2s,filter .2s}
.slc-tx.err{background:none;color:#E5484D;opacity:0;filter:blur(2px)}
.slc[data-phase="error"] .slc-tx:not(.err){opacity:0}.slc[data-phase="error"] .slc-tx.err{opacity:1;filter:none}
.slc-cap{position:absolute;inset:4px;border-radius:999px;background:var(--u-ink);color:#fff;cursor:grab;outline:none;clip-path:inset(0 calc(100% - 48px) 0 0 round 24px);transition:background .25s}
.slc[data-held] .slc-cap{cursor:grabbing}
.slc-cap:focus-visible{box-shadow:inset 0 0 0 2px #7CF5D2}
.slc[data-phase="done"] .slc-cap{background:linear-gradient(90deg,#16B98C,#1A86FF);cursor:default}
.slc[data-phase="error"] .slc-cap{background:#E5484D}
.slc-in{position:absolute;inset:0}
.slc-in>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:600;white-space:nowrap;transition:opacity .2s,filter .2s,transform .3s var(--u-spring)}
.slc-ar svg{width:20px;height:20px}
.slc-sp,.slc-ok{opacity:0;filter:blur(2px)}
.slc-sp i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:u-spin .7s linear infinite}
.slc[data-phase="pending"] .slc-ar,.slc[data-phase="done"] .slc-ar{opacity:0;filter:blur(2px)}
.slc[data-phase="pending"] .slc-sp{opacity:1;filter:none}
.slc[data-phase="done"] .slc-ok{opacity:1;filter:none}
.slc-ok svg{width:18px;height:18px}

/* LatticeLoader */
.lat{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--u-ink2);white-space:nowrap}
.lat-g{position:relative;display:grid;grid-template-columns:repeat(3,4px);gap:2px;width:16px;height:16px}
.lat-g i{width:4px;height:4px;border-radius:1.2px;background:var(--u-blue);opacity:.2;animation:latw 1.1s ease-in-out infinite}
@keyframes latw{0%,100%{opacity:.18;transform:scale(.8)}45%{opacity:1;transform:none}}
.lat-g .smk{position:absolute;inset:-2px;width:20px;height:20px;opacity:0;transition:opacity .2s}
.lat[data-s="done"] .lat-g i{animation:none;opacity:0;transition:opacity .2s}
.lat[data-s="done"] .lat-g .smk{opacity:1}
.lat-v{display:inline-grid}.lat-v>span{grid-area:1/1;transition:opacity .25s,filter .25s}
.lat-b{opacity:0;filter:blur(2px)}
.lat[data-s="done"] .lat-a{opacity:0;filter:blur(2px)}.lat[data-s="done"] .lat-b{opacity:1;filter:none}
.lat-t{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;color:var(--u-ink3);font-variant-numeric:tabular-nums;transition:opacity .3s}
.lat[data-s="done"] .lat-t{opacity:.55}

/* Stepper */
.stp{display:flex;flex-direction:column;gap:22px}
.stp-head{display:flex;align-items:center}
.stp-i{all:unset;display:flex;align-items:center;gap:10px;cursor:default;flex:none}
.stp-i[data-st="complete"]{cursor:pointer}
.stp-c{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;background:#EEF2F8;color:var(--u-ink3);transition:background .3s,color .3s,box-shadow .3s}
.stp-i[data-st="active"] .stp-c{background:var(--u-ink);color:#fff;box-shadow:0 0 0 5px rgba(47,123,255,.12)}
.stp-c>i{width:9px;height:9px;border-radius:50%;background:#fff;animation:stpd 1.6s ease-in-out infinite}
@keyframes stpd{50%{transform:scale(.7);opacity:.7}}
.stp-i[data-st="complete"] .stp-c{background:rgba(47,123,255,.1);color:var(--u-blue);box-shadow:inset 0 0 0 1.5px rgba(47,123,255,.5)}
.stp-c svg{width:15px;height:15px}.stp-c svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:stpk .3s var(--u-ease) .08s forwards}
@keyframes stpk{to{stroke-dashoffset:0}}
.stp-l{font-size:13px;font-weight:500;color:var(--u-ink3);transition:color .3s}
.stp-i[data-st="active"] .stp-l{color:var(--u-ink);font-weight:600}
.stp-ln{position:relative;flex:1;height:2px;margin:0 12px;border-radius:2px;background:#E3E7EF;overflow:hidden;min-width:16px}
.stp-ln::after{content:"";position:absolute;inset:0;background:var(--u-liquid);background-size:300% 100%;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--u-ease)}
.stp-ln[data-done]::after{transform:scaleX(1)}
.stp-body{position:relative;overflow:hidden;transition:height .42s var(--u-ease)}
.stp-p{display:flex;flex-direction:column;gap:14px}
.stp-p.enter{animation:stpin .42s var(--u-ease) both}
.stp-p.exit{position:absolute;left:0;right:0;top:0;animation:stpout .42s var(--u-ease) both}
@keyframes stpin{from{opacity:0;transform:translateX(calc(var(--d,1) * 44px));filter:blur(3px)}}
@keyframes stpout{to{opacity:0;transform:translateX(calc(var(--d,1) * -30px));filter:blur(3px)}}
.stp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stp-back{all:unset;cursor:pointer;font-size:14px;color:var(--u-ink3);padding:8px 10px;border-radius:8px;transition:color .2s,opacity .2s}
.stp-back:hover{color:var(--u-ink)}.stp-back.off{opacity:0;pointer-events:none}
.stp-back:focus-visible{outline:2px solid var(--u-blue)}


/* AI 상담봇 (오른쪽 아래) */
.bot{position:fixed;right:max(34px,env(safe-area-inset-right,0px));bottom:calc(34px + env(safe-area-inset-bottom,0px));z-index:88}
/* 런처: 숨 쉬듯 모양이 바뀌는 말풍선 블롭 (오른쪽 아래 꼬리) + 민트→블루 유리 그라데이션 + 로고 마크 */
.bot-l{all:unset;position:relative;display:grid;place-items:center;width:64px;height:60px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--u-spring)}
.bot-l:hover{transform:translateY(-3px)}
.bot-l:active{transform:scale(.94)}
.bot-l:focus-visible{outline:2px solid var(--u-blue);outline-offset:4px;border-radius:22px}
.bot-blob,.bot-aura{position:absolute;inset:0;border-radius:58% 42% 50% 50% / 52% 48% 52% 48%;animation:botmorph 9s ease-in-out infinite}
.bot-blob{overflow:hidden;background:radial-gradient(120% 120% at 18% 12%,#8BFFE0 0%,#2BDCA8 26%,#12C8F0 52%,#1A86FF 78%,#5B6CFF 100%);box-shadow:0 18px 34px -14px rgba(26,134,255,.65),0 6px 14px -8px rgba(18,200,240,.5),inset 0 -6px 14px -6px rgba(20,40,140,.45),inset 0 2px 1px rgba(255,255,255,.55);transition:background .4s,box-shadow .35s}
.bot-blob::before{content:"";position:absolute;left:14%;top:9%;width:52%;height:34%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(1px);opacity:.85}
.bot-blob i{position:absolute;inset:-40%;background:conic-gradient(from var(--br,0deg),transparent 0 60%,rgba(255,255,255,.45) 70%,transparent 80%);animation:botspin 5.5s linear infinite;mix-blend-mode:soft-light}
.bot-aura{inset:-7px;background:conic-gradient(from var(--br,0deg),#8BFFE0,#12C8F0,#1A86FF,#7A6BFF,#8BFFE0);filter:blur(14px);opacity:.42;animation:botmorph 9s ease-in-out infinite,botspin 7s linear infinite,botpulse 3.2s ease-in-out infinite}
.bot-l:hover .bot-aura{opacity:.7}
@keyframes botmorph{0%,100%{border-radius:58% 42% 50% 50% / 52% 48% 52% 48%}25%{border-radius:46% 54% 44% 56% / 58% 46% 54% 42%}50%{border-radius:54% 46% 58% 42% / 46% 56% 44% 54%}75%{border-radius:44% 56% 50% 50% / 54% 44% 56% 46%}}
@keyframes botpulse{0%,100%{transform:scale(.96)}50%{transform:scale(1.06)}}
@property --br{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes botspin{to{--br:360deg}}
/* 몽글몽글 물방울 + AI 별: 블롭은 젤리처럼 출렁이고, 물방울은 주위를 돌며 떠오르다 톡 터짐 (열면 숨김) */
.bot-blob{animation:botmorph 9s ease-in-out infinite,botjelly 3.4s cubic-bezier(.45,0,.2,1) infinite}
.bot-sp{animation:botjelly 3.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes botjelly{0%,58%,100%{translate:0 0;scale:1 1}64%{translate:0 2px;scale:1.08 .9}71%{translate:0 -7px;scale:.93 1.08}79%{translate:0 1px;scale:1.04 .96}86%{translate:0 -2px;scale:.98 1.02}93%{translate:0 0;scale:1.01 .99}}
.bot-fx{position:absolute;inset:-30px;pointer-events:none;transition:opacity .3s;animation:botorbit 18s linear infinite}
@keyframes botorbit{to{rotate:360deg}}
/* 블롭 주위 AI 별: 돌며 떠오르고 빙글 돌다 사라짐 (크기 · 색 · 속도를 다르게) */
.bot-fx s.d1{width:18px;height:18px;left:4px;top:42px;color:#2BDCA8}
.bot-fx s.d2{width:12px;height:12px;left:20px;top:14px;color:#12C8F0;animation-delay:-1.2s;animation-duration:4.2s}
.bot-fx s.d3{width:16px;height:16px;right:18px;top:4px;color:#7A6BFF;animation-delay:-2.3s;animation-duration:3.9s}
.bot-fx s.d4{width:11px;height:11px;right:10px;bottom:12px;color:#1A86FF;animation-delay:-.7s;animation-duration:3.2s}
.bot-fx s.d5{width:14px;height:14px;left:30px;bottom:0;color:#3FE0A6;animation-delay:-2.9s;animation-duration:4.6s}
.bot-fx s.d6{width:10px;height:10px;right:0;top:46px;color:#5B6CFF;animation-delay:-1.8s;animation-duration:2.9s}
.bot-fx s.d7{width:13px;height:13px;left:52px;top:-4px;color:#12C8F0;animation-delay:-3.3s;animation-duration:4.4s}
.bot-fx s[class^="d"]{animation-name:botstar;animation-timing-function:cubic-bezier(.4,0,.3,1)}
@keyframes botstar{0%{transform:translate(0,10px) scale(.2) rotate(0);opacity:0}18%{transform:translate(-3px,4px) scale(1.1) rotate(45deg);opacity:1}45%{transform:translate(-8px,-6px) scale(.7) rotate(100deg);opacity:.85}70%{transform:translate(6px,-15px) scale(1.15) rotate(160deg);opacity:1}100%{transform:translate(-2px,-26px) scale(.15) rotate(230deg);opacity:0}}
.bot-fx s{position:absolute;display:block;filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 5px rgba(26,134,255,.45));animation:bottwinkle 2.4s ease-in-out infinite}
.bot-fx s svg{display:block;width:100%;height:100%;fill:currentColor}
.bot-fx .s1{width:20px;height:20px;left:4px;top:14px;color:#1A86FF}
.bot-fx .s2{width:14px;height:14px;left:16px;bottom:10px;animation-delay:-.9s;color:#2BDCA8}
.bot-fx .s3{width:17px;height:17px;right:6px;top:4px;animation-delay:-1.7s;color:#7A6BFF}
@keyframes bottwinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}30%{transform:scale(1.15) rotate(30deg);opacity:1}55%{transform:scale(.85) rotate(60deg);opacity:.9}75%{transform:scale(.4) rotate(90deg);opacity:.3}}
.bot-l:hover .bot-fx{animation-duration:7s}.bot-l:hover .bot-fx s{animation-duration:1.3s}.bot-l:hover .bot-fx s[class^="d"]{animation-duration:2s}
.bot-l:hover .bot-blob{animation-duration:9s,1.6s}.bot-l:hover .bot-sp{animation-duration:1.6s}
.bot[data-open="true"] .bot-fx{opacity:0}
.bot[data-open="true"] .bot-blob,.bot[data-open="true"] .bot-sp{animation:botmorph 9s ease-in-out infinite}
.bot-i{position:absolute;display:grid;place-items:center;transition:opacity .25s,transform .35s var(--u-spring),filter .25s}
.bot-sp{color:#fff;filter:drop-shadow(0 1px 2px rgba(10,40,120,.35))}
.bot-mk{width:30px;height:auto;display:block;overflow:visible}.bot-mk .bot-dot{fill:#fff;transform-box:fill-box;transform-origin:center;animation:botdot 2.6s var(--u-io) infinite}
@keyframes botdot{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.bot[data-open="true"] .bot-blob{background:radial-gradient(120% 120% at 18% 12%,#2A3242 0%,#0B0D12 70%);box-shadow:0 16px 30px -14px rgba(10,30,80,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.bot[data-open="true"] .bot-blob i{opacity:0}
.bot[data-open="true"] .bot-aura{opacity:.22}
.bot-x{color:#fff;opacity:0;transform:rotate(-90deg) scale(.6);filter:blur(2px)}.bot-x svg{width:20px;height:20px}
.bot[data-open="true"] .bot-sp{opacity:0;transform:rotate(90deg) scale(.6);filter:blur(2px)}
.bot[data-open="true"] .bot-x{opacity:1;transform:none;filter:none}
.bot-tag{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--u-ink);background:#fff;padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(10,30,80,.4),inset 0 0 0 1px var(--u-line);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--u-ease)}
.bot-l:hover .bot-tag{opacity:1;transform:translate(0,-50%)}
.bot[data-open="true"] .bot-tag{display:none}
.bot-p{position:absolute;right:0;bottom:calc(100% + 14px);width:min(392px,calc(100vw - 28px));height:min(600px,calc(100vh - 120px));display:flex;flex-direction:column;border-radius:22px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 30px 70px -24px rgba(10,30,80,.45),inset 0 0 0 1px rgba(214,221,233,.9);overflow:hidden;transform-origin:bottom right;opacity:0;visibility:hidden;transform:translateY(10px) scale(.92);filter:blur(4px);transition:opacity .25s,transform .38s cubic-bezier(.34,1.3,.64,1),filter .25s,visibility 0s .38s}
.bot[data-open="true"] .bot-p{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .25s,transform .42s cubic-bezier(.34,1.3,.64,1),filter .25s,visibility 0s}
.bot-h{display:flex;align-items:center;gap:11px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--u-line);background:linear-gradient(180deg,#fff,#F7F9FD)}
.bot-av{width:34px;height:34px;border-radius:56% 44% 50% 50% / 52% 48% 52% 48%;flex:none;display:grid;place-items:center;color:#fff;background:radial-gradient(120% 120% at 18% 12%,#8BFFE0 0%,#2BDCA8 26%,#12C8F0 52%,#1A86FF 80%,#5B6CFF 100%);box-shadow:inset 0 -3px 6px -3px rgba(20,40,140,.45),inset 0 1px 1px rgba(255,255,255,.5)}.bot-av svg{width:19px;height:auto}.bot-av .bot-dot{animation:none}
.bot-av.s{width:28px;height:28px}.bot-av.s svg{width:15px}
.bot-h b{display:block;font-size:14.5px;color:var(--u-ink)}
.bot-h small{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--u-ink3);font-family:'IBM Plex Mono',ui-monospace,monospace}
.bot-h small i{width:6px;height:6px;border-radius:50%;background:var(--u-mint);box-shadow:0 0 0 3px rgba(43,220,168,.18)}
.bot-c{all:unset;margin-left:auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--u-ink3);cursor:pointer}.bot-c:hover{background:var(--u-paper2);color:var(--u-ink)}.bot-c svg{width:16px;height:16px}
.bot-c:focus-visible{outline:2px solid var(--u-blue)}
.bot-m{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.bot-r{display:flex;gap:9px;align-items:flex-start;max-width:94%;animation:blur-in .35s var(--u-ease) both}
.bot-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:3px}
.bot-col .tl{font-size:12.5px}
.bot-b{padding:10px 13px;border-radius:15px;border-top-left-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);font-size:14px;line-height:1.62;color:var(--u-ink)}
.bot-u{align-self:flex-end;max-width:80%;padding:10px 13px;border-radius:15px;border-bottom-right-radius:5px;background:var(--u-ink);color:#fff;font-size:14px;line-height:1.55;animation:blur-in .3s var(--u-ease) both}
.bot-a{display:flex;flex-wrap:wrap;gap:6px}
.bot-a a{font-size:12.5px;font-weight:600;text-decoration:none;color:#1F5FE6;padding:6px 11px;border-radius:999px;background:rgba(47,123,255,.08);box-shadow:inset 0 0 0 1px rgba(47,123,255,.2);transition:background .2s}
.bot-a a:hover{background:rgba(47,123,255,.15)}
.bot-q{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.bot-q button{all:unset;cursor:pointer;font-size:12.5px;color:var(--u-ink2);padding:7px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-line);transition:box-shadow .2s,transform .2s var(--u-spring)}
.bot-q button:hover{box-shadow:inset 0 0 0 1px rgba(47,123,255,.45);transform:translateY(-1px)}
.bot-q button:focus-visible{outline:2px solid var(--u-blue)}
.bot-in{padding:0 12px}
.bot-in .pbar2{box-shadow:inset 0 0 0 1px var(--u-line)}
.bot-in .pb-model{display:none}
.bot-f{display:flex;justify-content:space-between;gap:8px;padding:10px 16px 12px;font-size:12.5px}
.bot-f a{display:inline-flex;align-items:center;gap:6px;color:var(--u-ink3);text-decoration:none}.bot-f a:hover{color:var(--u-ink)}
.bot-f .kb{width:18px;height:18px;border-radius:6px;background:#FEE500;display:grid;place-items:center}.bot-f .kb svg{width:11px;height:11px;color:#191600}
@media (max-width:560px){.bot{right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px))}.bot-l{width:58px;height:54px}.bot-mk{width:27px}
  .bot-p{position:fixed;left:8px;right:8px;bottom:calc(80px + env(safe-area-inset-bottom,0px));width:auto;height:min(78vh,620px)}}
@media (prefers-reduced-motion:reduce){.bot *{animation:none!important}}

/* 고정 상담 버튼 (예전) */
.dock{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:85;transition:transform .35s var(--u-ease)}
.dock.low{transform:translateY(-6px)}
.dock-k{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:999px;background:#FEE500;color:#191600;text-decoration:none;font-size:14px;font-weight:700;box-shadow:0 14px 32px -12px rgba(120,100,0,.55),inset 0 -2px 0 rgba(0,0,0,.06);transition:transform .25s var(--u-spring),box-shadow .25s}
.dock-k:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(120,100,0,.6)}
.dock-k .kb{width:36px;height:36px;border-radius:50%;background:#191600;display:grid;place-items:center}.dock-k .kb svg{width:18px;height:18px;color:#FEE500}
.mbar{display:none}
@media (max-width:760px){
  .dock{display:none}
  .mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:85;display:grid;grid-template-columns:auto 1fr;gap:8px;padding:6px;border-radius:18px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 16px 36px -14px rgba(10,30,80,.45),inset 0 0 0 1px rgba(214,221,233,.9);transition:transform .35s var(--u-ease)}
  .mbar.hide{transform:translateY(130%)}
  .mbar a{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:13px;font-size:14.5px;font-weight:600;text-decoration:none}
  .mbar-k{padding:0 14px;background:#FEE500;color:#191600}.mbar-k .kb svg{width:18px;height:18px;color:#191600}
  .mbar-c{background:var(--u-ink);color:#fff}
  body.has-mbar{padding-bottom:72px}
}
@media (prefers-reduced-motion:reduce){.bell *,.vp *,.wtip,.wtip *,.bm *,.slc *,.stp *,.g,.gtx,.gtag::before,.gtag>span{animation:none!important;transition:none!important}}

@media (prefers-reduced-motion:reduce){.tl *,.smk *,.cc *,.rseg-thumb,.gsel-m,.vpill,.vpill *,.stoast,.jelly>button,.udrop{animation:none!important;transition:none!important}}

/* ===== AI 표시 별 (ThoughtLine 별 · 반짝) ===== */
[data-ai]{display:inline-flex;align-items:center}
.ais{position:relative;display:inline-block;width:.95em;height:.95em;margin-right:.42em;flex:none}
/* 별이 붙기 전에도 같은 자리를 비워 둠 → 스크립트가 늦게 돌아도 옆 메뉴가 밀리지 않음 */
[data-ai]:not([data-ai-on])::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.42em;flex:none}
.ais svg{position:absolute;display:block;overflow:visible}
.ais .s1{left:0;top:0;width:100%;height:100%;animation:ais-br 3.4s ease-in-out infinite;transition:filter .35s}
.ais .s2{width:50%;height:50%;right:-34%;top:-30%;opacity:0;animation:ais-tw 4.2s ease-in-out 1.4s infinite}
.ais .s3{width:36%;height:36%;left:-30%;bottom:-22%;opacity:0;animation:ais-tw 4.2s ease-in-out 3.1s infinite}
@keyframes ais-br{0%,100%{transform:scale(.9) rotate(0)}50%{transform:scale(1.04) rotate(14deg)}}
@keyframes ais-tw{0%,72%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:1;transform:scale(1) rotate(45deg)}92%{opacity:0;transform:scale(.5) rotate(90deg)}}
[data-ai]:hover .ais .s1,[data-ai]:focus-visible .ais .s1{animation:ais-spin .8s var(--u-spring) both,ais-pulse 1.3s ease-in-out .8s infinite;filter:drop-shadow(0 0 2.5px rgba(43,220,168,.95)) drop-shadow(0 0 8px rgba(26,134,255,.6))}
@keyframes ais-spin{0%{transform:scale(.9) rotate(0)}100%{transform:scale(1.22) rotate(180deg)}}
@keyframes ais-pulse{0%,100%{transform:scale(1.22) rotate(180deg)}50%{transform:scale(1.02) rotate(196deg)}}
[data-ai]:hover .ais .s2,[data-ai]:focus-visible .ais .s2{animation:ais-tw2 .95s ease-in-out .1s infinite}
[data-ai]:hover .ais .s3,[data-ai]:focus-visible .ais .s3{animation:ais-tw2 .95s ease-in-out .55s infinite}
@keyframes ais-tw2{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1.08) rotate(60deg)}}
.ais i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#2BDCA8;opacity:0;pointer-events:none}
.ais i:nth-of-type(1){--dx:-12px;--dy:-9px}
.ais i:nth-of-type(2){--dx:13px;--dy:-7px;background:#1A86FF;animation-delay:.04s!important}
.ais i:nth-of-type(3){--dx:-10px;--dy:10px;background:#12C8F0;animation-delay:.08s!important}
.ais i:nth-of-type(4){--dx:11px;--dy:11px;background:#5B6CFF;animation-delay:.02s!important}
.ais i:nth-of-type(5){--dx:1px;--dy:-14px;width:2px;height:2px;background:#8FE9FF;animation-delay:.1s!important}
[data-ai]:hover .ais i{animation:ais-burst .75s var(--u-ease) both}
@keyframes ais-burst{0%{opacity:1;transform:translate(0,0) scale(1.2)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
[data-ai]:hover .ai-t,[data-ai]:focus-visible .ai-t{background:linear-gradient(100deg,#0B0D12 0%,#0B0D12 36%,#1A86FF 45%,#2BDCA8 52%,#0B0D12 62%,#0B0D12 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ais-sh 1.5s linear infinite}
@keyframes ais-sh{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.ais svg,.ais i,[data-ai]:hover .ai-t{animation:none!important}}

/* ===== 실제 서버 작업 상태 (실패) ===== */
.cc[data-s="fail"]{box-shadow:inset 0 0 0 1px rgba(229,72,77,.35);color:#B4232A}
.cc[data-s="fail"] .cc-fill{transform:scaleX(1);background:rgba(229,72,77,.08)}
.cc[data-s="fail"] .cc-ms{color:#B4232A}
.smk[data-s="error"]{color:#E5484D}
.smk[data-s="error"] .t{fill-opacity:.1}
.smk[data-s="error"] .r{stroke-dasharray:1 0}
.tl[data-fail] .tl-text.done{color:#B4232A}
/* ===== 마크다운 출력 (UI.md) ===== */
.md{display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.7;color:var(--u-ink-2,#394152)}
.md p{margin:0}.md h3,.md h4,.md h5,.md h6{margin:8px 0 0;color:var(--u-ink,#0B0D12);font-size:15px;letter-spacing:-.01em}
.md h3{font-size:16.5px}.md ul,.md ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.md code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.88em;padding:1px 6px;border-radius:6px;background:rgba(47,123,255,.08);color:#1F5FE6}
.md a{color:#1F5FE6}.md hr{border:0;border-top:1px dashed var(--line,#E3E7EF);margin:6px 0}
.md-t{overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line,#E3E7EF)}
.md table{border-collapse:collapse;width:100%;font-size:13.5px}
.md th,.md td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line,#E3E7EF);white-space:nowrap}
.md th{background:#F6F8FC;color:var(--u-ink,#0B0D12);font-weight:600}
.md tr:last-child td{border-bottom:0}
/* 화면에는 숨기고 화면 읽기 프로그램에만 읽히는 텍스트 */
.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ===== 모바일 메뉴 (UI.mnav · ≤900px) — 헤더 카드와 같은 흰 유리 카드 ===== */
.mnav-btn{all:unset;box-sizing:border-box;display:none;position:relative;flex:none;width:38px;height:38px;border-radius:11px;cursor:pointer;background:#fff;box-shadow:0 0 0 1px var(--u-line),0 2px 6px -2px rgba(10,30,80,.12);-webkit-tap-highlight-color:transparent;transition:box-shadow .2s}
.mnav-btn span{position:absolute;left:11px;width:16px;height:1.8px;border-radius:2px;background:var(--u-ink);transition:transform .32s var(--u-ease),top .32s var(--u-ease)}
.mnav-btn span:nth-child(1){top:15px}.mnav-btn span:nth-child(2){top:21.2px}
.mnav-btn[aria-expanded="true"] span{top:18.1px}
.mnav-btn[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.mnav-btn[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
.mnav-btn:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--u-blue)}
@media (max-width:900px){.mnav-btn{display:inline-block}.hdr .lang{display:none}}
.hdr.mnav-open .wrap,.hdr.mnav-open .bar{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border-color:rgba(214,221,233,.9);box-shadow:0 12px 32px -20px rgba(10,40,110,.4),inset 0 1px 0 #fff}
.mnav-bg{position:fixed;inset:0;z-index:58;background:rgba(11,13,18,.16);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s var(--u-ease)}
.mnav{position:fixed;z-index:59;top:calc(env(safe-area-inset-top,0px) + 76px);left:10px;right:10px;max-width:1160px;margin-inline:auto;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 88px);overflow:auto;overscroll-behavior:contain;padding:8px;border-radius:18px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(214,221,233,.9);box-shadow:0 24px 48px -26px rgba(10,40,110,.45),inset 0 1px 0 #fff;transform-origin:top right;opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .28s var(--u-ease),transform .28s var(--u-ease)}
.mnav[data-open],.mnav-bg[data-open]{opacity:1}
.mnav[data-open]{transform:none}
.mn-list{display:flex;flex-direction:column}
.mi{position:relative;display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:12px;text-decoration:none;color:var(--u-ink);font-size:16px;font-weight:600;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;transition:background .2s}
.mi+.mi::before{content:"";position:absolute;left:44px;right:12px;top:0;height:1px;background:rgba(227,231,239,.8)}
.mi:hover,.mi:active{background:var(--u-paper2)}
.mi:hover::before,.mi:hover+.mi::before,.mi.on::before,.mi.on+.mi::before{opacity:0}
.mi:focus-visible{outline:2px solid var(--u-blue);outline-offset:-2px}
.mi-n{min-width:20px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--u-blue-d)}
.mi-t{flex:1;display:flex;align-items:center;gap:6px}
.mi-a{width:16px;height:16px;flex:none;color:var(--u-ink3);transition:transform .25s var(--u-ease)}
.mi:hover .mi-a{transform:translateX(2px)}
.mi.on{background:#fff;box-shadow:0 0 0 1px var(--u-line),0 2px 6px -2px rgba(10,30,80,.12)}
.mi.on .mi-t::after{content:"";width:5px;height:5px;border-radius:50%;background:#2F7BFF}
.mn-ft{margin:6px 4px 2px;padding:14px 4px 4px;border-top:1px dashed var(--u-line);display:flex;flex-direction:column;gap:12px}
.mn-row{display:flex;align-items:center;gap:8px}
.mn-cta{display:flex;align-items:center;justify-content:center;height:48px;border-radius:14px;text-decoration:none;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(180deg,#1A1F2B,#0B0D12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 26px -12px rgba(0,40,120,.55);-webkit-tap-highlight-color:transparent}
.mn-cta:focus-visible{outline:2px solid var(--u-blue);outline-offset:2px}
.mnav .mi,.mnav .mn-ft{opacity:0;transform:translateY(6px);transition:opacity .3s var(--u-ease),transform .3s var(--u-ease),background .2s;transition-delay:calc(var(--i,0) * 28ms + 40ms),calc(var(--i,0) * 28ms + 40ms),0s}
.mnav[data-open] .mi,.mnav[data-open] .mn-ft{opacity:1;transform:none}
.mnav-on .bot{opacity:0;pointer-events:none;transition:opacity .2s}
/* 태블릿: 화면 전체 폭 대신 메뉴 버튼 아래 오른쪽 카드로 */
@media (min-width:600px){.mnav{left:auto;right:10px;width:380px}}
/* 카드 빛 테두리 · AI 버튼 별이 화면 밖으로 살짝 나가도 가로 스크롤이 생기지 않게 (clip은 sticky를 깨지 않음) */
html{overflow-x:clip}
/* 901~1000px: 메뉴가 넘쳐 로고가 찌그러지던 폭 → 메뉴를 ☰로 접음 (오른쪽 버튼은 그대로) */
@media (max-width:1000px){.hdr nav{display:none!important}.mnav-btn{display:inline-block}}
@media (min-width:1001px){.mnav,.mnav-bg{display:none!important}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav-bg,.mnav .mi,.mnav .mn-ft,.mnav-btn span{transition:none!important}}
/* GlideSelect 목록을 body 에 띄웠을 때 (잘림 방지) */
.gsel-m.fx{position:fixed;z-index:90;min-width:0;overflow:auto;overscroll-behavior:contain}
/* 텔레그램 상담 버튼 */
.kakao.tg .kb{background:#2AABEE}.kakao.tg .kb svg{color:#fff;width:15px;height:15px;transform:translateX(-1px)}
.kakao.tg:hover{box-shadow:inset 0 0 0 1px #8FD3F7,0 8px 20px -10px rgba(42,171,238,.45)}
@media (max-width:900px){.hdr .tg{display:none}}
.mn-msg{margin-left:auto;display:flex;gap:6px}


/* 헤더 계정 버튼 (로그인 기능이 켜졌을 때만) */
.acct{all:unset;box-sizing:border-box;width:38px;height:38px;border-radius:12px;display:inline-grid;place-items:center;color:var(--u-ink);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--u-line),0 6px 16px -10px rgba(10,30,80,.25);cursor:pointer;transition:box-shadow 200ms,transform 160ms var(--u-ease)}
.acct svg{width:19px;height:19px}.acct:hover{box-shadow:inset 0 0 0 1px #9CC4F2,0 8px 20px -10px rgba(26,134,255,.45)}.acct:active{transform:scale(.97)}
.acct:focus-visible{outline:2px solid var(--u-blue);outline-offset:2px}
.acct.in b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#2BDCA8,#1A86FF)}
@media (max-width:900px){.hdr .acct{display:none}}
.mn-acct{display:flex;align-items:center;gap:10px;padding:12px 4px;margin-bottom:6px;text-decoration:none;color:var(--u-ink);font-weight:600;border-bottom:1px solid var(--u-line)}
.mn-acct svg:first-child{width:20px;height:20px}.mn-acct span{flex:1}

/* 스크롤 안내 (UI.scrollHint) — 아래 가운데 알약 + 맨 위 진행 막대, 봇보다 아래층 */
.shint{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:86;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:1px solid var(--line,#E3E7EF);border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);box-shadow:0 18px 36px -22px rgba(10,40,110,.45);color:var(--ink,#0B0D12);font:500 13.5px/1 'IBM Plex Sans KR',sans-serif;letter-spacing:-.01em;cursor:pointer;opacity:0;transform:translate(-50%,14px);transition:opacity .45s var(--u-ease,ease),transform .45s var(--u-ease,ease),padding .3s var(--u-ease,ease);white-space:nowrap}
.shint.on{opacity:1;transform:translate(-50%,0)}
.shint:hover{border-color:#C9D4E6}
.shint:focus-visible{outline:2px solid var(--u-blue,#2F7BFF);outline-offset:3px}
.shint-i{position:relative;display:grid;place-items:center;width:22px;height:26px}
.shint-i>*{grid-area:1/1}
.shint-m{position:relative;display:block;width:16px;height:24px;border:1.6px solid var(--ink,#0B0D12);border-radius:9px}
.shint-m b{position:absolute;left:50%;top:5px;width:2.6px;height:5px;margin-left:-1.3px;border-radius:2px;background:linear-gradient(180deg,#2BDCA8,#1A86FF);animation:shintWheel 1.6s var(--u-ease,ease) infinite}
.shint-f{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#2BDCA8,#1A86FF);box-shadow:0 0 0 5px rgba(26,134,255,.14);animation:shintSwipe 1.8s var(--u-ease,ease) infinite}
.shint-r{display:none;width:22px;height:22px}
.shint-rp{transition:stroke-dashoffset .15s linear}
.shint-up{display:none;width:9px;height:9px;margin-top:4px;border-left:2px solid var(--u-blue-d,#1F5FE6);border-top:2px solid var(--u-blue-d,#1F5FE6);transform:rotate(45deg)}
.shint-c{position:relative;display:block;width:12px;height:16px}
.shint-c i{position:absolute;left:1px;width:8px;height:8px;border-right:1.8px solid var(--u-blue-d,#1F5FE6);border-bottom:1.8px solid var(--u-blue-d,#1F5FE6);transform:rotate(45deg);animation:shintChev 1.6s var(--u-ease,ease) infinite}
.shint-c i:first-child{top:0}.shint-c i:last-child{top:6px;animation-delay:.18s}
/* 내리는 중: 진행률 원 */
.shint[data-st=go] .shint-m,.shint[data-st=go] .shint-f,.shint[data-st=end] .shint-m,.shint[data-st=end] .shint-f{display:none}
.shint[data-st=go] .shint-r{display:block}
.shint[data-st=go]{padding:8px 15px 8px 10px}
/* 끝: 맨 위로 */
.shint[data-st=end] .shint-up{display:block}
.shint[data-st=end] .shint-c{display:none}
.shint[data-st=end]{padding:9px 16px 9px 12px}
/* 상태가 바뀔 때 톡 튀고, 내리다 멈추면 아래로 통통 */
.shint.on.pop{animation:shintPop .42s var(--u-spring,cubic-bezier(.34,1.56,.64,1))}
.shint.on.nudge{animation:shintNudge 1.4s var(--u-ease,ease) 2}
@keyframes shintPop{0%{transform:translate(-50%,0) scale(.92)}60%{transform:translate(-50%,0) scale(1.04)}100%{transform:translate(-50%,0) scale(1)}}
@keyframes shintNudge{0%,100%{transform:translate(-50%,0)}30%{transform:translate(-50%,6px)}55%{transform:translate(-50%,-2px)}}
@keyframes shintWheel{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1}70%{opacity:1;transform:translateY(7px)}100%{opacity:0;transform:translateY(9px)}}
@keyframes shintSwipe{0%{transform:translateY(7px);opacity:0}25%{opacity:1}75%{transform:translateY(-7px);opacity:1}100%{transform:translateY(-9px);opacity:0}}
@keyframes shintChev{0%,100%{opacity:.25}50%{opacity:1}}
/* 맨 위 진행 막대 */
.sprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;opacity:0;transition:opacity .4s}
.sprog.on{opacity:1}
.sprog i{display:block;height:100%;background:linear-gradient(90deg,#2BDCA8,#12C8F0 35%,#1A86FF 70%,#3A5CFF);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px rgba(26,134,255,.45)}
.mnav-on .shint{opacity:0;pointer-events:none}
@media (max-width:560px){.shint{bottom:calc(24px + env(safe-area-inset-bottom,0px));padding:9px 14px 9px 11px;font-size:13px}.shint[data-st=go]{padding:7px 13px 7px 9px}}
@media (prefers-reduced-motion:reduce){.shint,.shint *,.sprog i{animation:none!important;transition:none!important}.shint-m b{opacity:1}}