/* ================= v-169 (2026-10-31) 지킴 도우미 전용 화면 =================
   대표님 10/31: 「지킴 도우미가 별도 메뉴가 있어서 클로드 인터페이스 처럼 위키사이트내에서 사용할수 있도록」
                 「1인당 하루에 5$정도의 한도로 정해서 한도가 매 대화시마다 보이게」
   · 왼쪽 내 대화 목록 · 가운데 대화 · 아래 입력(파일 · 그림 · 모델 · 웹 검색 · 위키 자료) · 머리와 입력칸 아래에 늘 오늘 쓴 돈 / 한도.
   · 위키 공통 색(--accent · --surface · --line · --ink …)만 씀 → 디자인 고르기 · 어두운 화면 그대로. 8px 격자 · 강조색 하나.
   · 너비는 화면이 아니라 도우미 칸 너비(container jc)로 맞춤 — 맥락 단 · 목록 단이 붙어도 맞게. */
.jcw{container:jc/inline-size;color:var(--ink)}
.jc{--jc-col:780px;--jc-side:280px;position:relative;display:grid;grid-template-columns:var(--jc-side) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:var(--jc-h,calc(100vh - 150px));min-height:520px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card,16px);overflow:hidden;word-break:keep-all;overflow-wrap:break-word;line-break:strict;font-size:15px}
.jc *,.jc *::before,.jc *::after{box-sizing:border-box}
.jc a{color:inherit;text-decoration:none;font-weight:inherit}
.jc button{width:auto;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;font:inherit;font-size:inherit;font-weight:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:left;box-shadow:none;min-height:0}
.jc button:disabled{cursor:default}
.jc .jc-comp.off .jc-tg,.jc .jc-comp.off .jc-ib,.jc .jc-comp.off .jc-mdl>button{opacity:.4;pointer-events:none}
.jc input,.jc textarea,.jc select{font:inherit;color:var(--ink);margin:0}
.jc h1,.jc h2,.jc h3,.jc h4{margin:0;max-width:none;letter-spacing:-.015em;position:static}
.jc p{margin:0}
.jc svg.ji{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jc :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jc .tn{font-variant-numeric:tabular-nums}

/* ── 왼쪽 · 내 대화 ── */
.jc .jc-side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface-2);border-right:1px solid var(--line)}
.jc .jc-sh{display:flex;align-items:center;gap:8px;padding:16px 16px 8px}
.jc .jc-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:15px;font-weight:800;letter-spacing:-.02em}
.jc .jc-brand .lg{width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.jc .jc-brand .lg svg.ji{width:18px;height:18px}
.jc .jc-x{display:none;width:36px;height:36px;border-radius:10px;justify-content:center;color:var(--muted)}
.jc .jc-x:hover{background:var(--surface);color:var(--ink)}
.jc .jc-new{margin:8px 16px 8px;height:40px;padding:0 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);font-size:14px;font-weight:700;color:var(--ink);gap:10px;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:border-color .15s,color .15s}
.jc .jc-new:hover{border-color:var(--accent);color:var(--accent-ink)}
.jc .jc-new .k{margin-left:auto;font-size:11px;font-weight:600;color:var(--faint)}
.jc .jc-find{margin:0 16px 4px;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--faint);transition:background .15s,border-color .15s}
.jc .jc-find:focus-within,.jc .jc-find:hover{background:var(--surface);border-color:var(--line)}
.jc .jc-find svg.ji{width:16px;height:16px}
#jc .jc-find input{flex:1;min-width:0;height:100%;border:0;background:transparent;box-shadow:none;outline:none;padding:0;font-size:13.5px;-webkit-appearance:none;appearance:none}
#jc .jc-find input:focus,#jc .jc-find input:focus-visible{outline:none;box-shadow:none;border:0;background:transparent}
.jc .jc-find input::placeholder{color:var(--faint)}
.jc .jc-list{flex:1;min-height:0;overflow-y:auto;padding:0 16px 12px;scrollbar-width:thin}
.jc .jc-g{font-size:11.5px;font-weight:700;color:var(--faint);padding:16px 12px 6px;letter-spacing:.02em}
.jc .jc-it{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 4px 7px 12px;border-radius:9px;font-size:13.5px;color:var(--ink)}
.jc .jc-it:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.jc .jc-it.on{background:color-mix(in srgb,var(--ink) 7%,transparent);font-weight:650}
.jc .jc-it .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc .jc-it .live{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:jcPulse 1.2s ease-in-out infinite}
.jc .jc-it .mo{width:28px;height:28px;border-radius:7px;justify-content:center;color:var(--faint);opacity:0;flex:none}
.jc .jc-it:hover .mo,.jc .jc-it.on .mo,.jc .jc-it .mo[aria-expanded="true"]{opacity:1}
.jc .jc-it .mo:hover{background:var(--surface);color:var(--ink)}
.jc .jc-it .mo svg.ji{width:16px;height:16px}
.jc .jc-none{padding:24px 12px;font-size:13px;color:var(--muted);line-height:1.6}
.jc .jc-sf{border-top:1px solid var(--line);padding:14px 16px 16px;display:grid;gap:12px}
.jc .jc-keep{font-size:11.5px;color:var(--muted);line-height:1.55;display:flex;gap:6px;align-items:flex-start}
.jc .jc-keep svg.ji{width:14px;height:14px;margin-top:2px}
.jc .jc-adm{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:650;color:var(--muted)}
.jc .jc-adm:hover,.jc .jc-adm.on{background:var(--surface);color:var(--ink)}
.jc .jc-adm .r{margin-left:auto;color:var(--faint)}

/* ── 하루 한도 막대(머리 알약) ── */
.jc .jc-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.jc .jc-bar i{display:block;height:100%;border-radius:inherit;background:var(--accent);transition:width .35s ease}
.jc .warn .jc-bar i,.jc .jc-bar.warn i{background:var(--sev2)}
.jc .stop .jc-bar i,.jc .jc-bar.stop i{background:var(--sev3)}

/* ── 가운데 ── */
.jc .jc-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.jc .jc-hd{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 20px;border-bottom:1px solid var(--line);flex:none}
.jc .jc-menu{display:none;width:36px;height:36px;border-radius:10px;justify-content:center;color:var(--muted);flex:none}
.jc .jc-menu:hover{background:var(--surface-2);color:var(--ink)}
.jc .jc-ttl{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
.jc .jc-ttl .tb{min-width:0;max-width:100%;padding:6px 8px;border-radius:8px;font-size:15px;font-weight:750;letter-spacing:-.015em}
.jc .jc-ttl .tb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc .jc-ttl .tb svg.ji{width:14px;height:14px;color:var(--faint);opacity:0;transition:opacity .15s}
.jc .jc-ttl .tb:hover{background:var(--surface-2)}
.jc .jc-ttl .tb:hover svg.ji{opacity:1}
.jc .jc-ttl .tb.plain{cursor:default;color:var(--muted);font-weight:650}
.jc .jc-ttl .tb.plain:hover{background:none}
#jc .jc-ttl input,#jc .jc-ttl input:focus{flex:1;min-width:0;height:36px;padding:0 10px;border:1px solid var(--accent);border-radius:8px;font-size:15px;font-weight:700;background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.jc .jc-pill{position:relative;display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--muted);flex:none;white-space:nowrap}
.jc .jc-pill:hover{border-color:var(--line-2);background:var(--surface-2)}
.jc .jc-pill svg.ji{width:16px;height:16px;color:var(--accent)}
.jc .jc-pill b{color:var(--ink);font-weight:800}
.jc .jc-pill .jc-bar{width:64px;height:5px}
.jc .jc-pill .lf{font-weight:650}
.jc .jc-pill.warn svg.ji,.jc .jc-pill.warn .lf{color:var(--sev2)}
.jc .jc-pill.stop svg.ji,.jc .jc-pill.stop .lf{color:var(--sev3)}
.jc .jc-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:300px;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 18px 48px -12px rgba(15,23,42,.28);display:grid;gap:10px;font-size:13px;line-height:1.6;color:var(--muted);white-space:normal;text-align:left;cursor:default}
.jc .jc-pop b{color:var(--ink)}
.jc .jc-pop .jc-btn{justify-self:start}

.jc .jc-body{flex:1;min-height:0;display:flex;flex-direction:column}
.jc .jc-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.jc .jc-msgs{max-width:var(--jc-col);margin:0 auto;padding:32px 28px 28px;display:flex;flex-direction:column;gap:32px}
.jc .jc-u{align-self:flex-end;max-width:min(86%,640px);display:grid;gap:8px;justify-items:end}
.jc .jc-u .bb{background:var(--surface-2);border:1px solid var(--line);border-radius:20px 20px 6px 20px;padding:12px 16px;font-size:15px;line-height:1.68;white-space:pre-wrap;color:var(--ink)}
.jc .jc-a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start}
.jc .jc-av{width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.jc .jc-av svg.ji{width:17px;height:17px}
.jc .jc-a .bd{min-width:0;padding-top:4px}
.jc .jc-a.err .bd .md{color:var(--sev3)}
.jc .jc-errbox{display:grid;gap:10px;padding:14px 16px;border-radius:12px;background:var(--sev3-bg);color:var(--ink);font-size:14px;line-height:1.6}
.jc .jc-errbox .h{display:flex;align-items:center;gap:8px;font-weight:750;color:var(--sev3)}
.jc .jc-errbox .h svg.ji{width:16px;height:16px}
.jc .jc-think{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.jc .jc-dots{display:inline-flex;gap:4px}
.jc .jc-dots i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35;animation:jcDot 1.1s ease-in-out infinite}
.jc .jc-dots i:nth-child(2){animation-delay:.15s}.jc .jc-dots i:nth-child(3){animation-delay:.3s}
.jc .jc-cur{display:inline-block;width:8px;height:1.05em;margin-left:2px;border-radius:2px;background:var(--accent);vertical-align:-2px;animation:jcBlink 1s steps(2) infinite}
@keyframes jcDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes jcBlink{50%{opacity:0}}
@keyframes jcPulse{50%{opacity:.35}}
.jc .jc-srch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin:0 0 8px}
.jc .jc-srch svg.ji{width:14px;height:14px;color:var(--accent)}
.jc .jc-srch b{color:var(--ink);font-weight:650}
.jc .jc-srch.off{color:var(--faint)}

/* 답 글(마크다운) */
.jc .md{font-size:15px;line-height:1.78;color:var(--ink)}
.jc .md>*:first-child{margin-top:0}
.jc .md p{margin:0 0 14px}
.jc .md p:last-child{margin-bottom:0}
.jc .md h3{font-size:17px;font-weight:800;margin:24px 0 10px;letter-spacing:-.02em}
.jc .md h4{font-size:15px;font-weight:800;margin:20px 0 8px}
.jc .md ul,.jc .md ol{margin:0 0 14px;padding-left:22px}
.jc .md li{margin:0 0 6px;padding-left:2px}
.jc .md li>ul,.jc .md li>ol{margin:6px 0 0}
.jc .md li::marker{color:var(--faint)}
.jc .md ol>li::marker{font-weight:700;color:var(--muted)}
.jc .md b,.jc .md strong{font-weight:750}
.jc .md em{font-style:normal;font-weight:650;color:var(--accent-ink)}
.jc .md code{font-family:var(--mono,ui-monospace,monospace);font-size:.86em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.jc .md pre{margin:0 0 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.6;white-space:pre}
.jc .md pre code{background:none;border:0;padding:0;font-size:inherit}
.jc .md hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.jc .md blockquote{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:var(--surface-2);color:var(--muted)}
.jc .md blockquote p{margin:0 0 6px}
.jc .md .tw{margin:0 0 16px;max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.jc .md table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.55}
.jc .md th,.jc .md td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.jc .md th{background:var(--surface-2);font-weight:750;color:var(--ink);white-space:nowrap}
.jc .md tr:last-child td{border-bottom:0}
.jc .md td.n,.jc .md th.n{text-align:right;font-variant-numeric:tabular-nums}
.jc .md a.lk{color:var(--accent-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:3px}
.jc .md a.asref{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin:0 1px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;font-weight:750;vertical-align:1px;text-decoration:none}
.jc .md .qh{margin:18px 0 8px;padding-top:12px;border-top:1px dashed var(--line-2);font-weight:750;color:var(--accent-ink)}

/* 답 아래 — 근거 · 웹 출처 · 쓴 돈 */
.jc .jc-src{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.jc .jc-src .lb{font-size:11.5px;font-weight:700;color:var(--faint);margin-right:2px}
.jc .jc-chip{display:inline-flex;align-items:center;gap:6px;max-width:260px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--muted)}
.jc .jc-chip:hover{border-color:var(--line-2);color:var(--ink)}
.jc .jc-chip b{color:var(--accent-ink);font-weight:750}
.jc .jc-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc .jc-meta{display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.jc .jc-meta .cost{font-weight:700;color:var(--ink)}
.jc .jc-meta .note{color:var(--muted);font-weight:500}
.jc .jc-meta .note.warn{color:var(--sev2);font-weight:650}
.jc .jc-meta .acts{display:inline-flex;gap:2px;margin-left:-6px}
.jc .jc-meta .acts button{height:28px;padding:0 8px;border-radius:7px;font-size:12px;color:var(--muted)}
.jc .jc-meta .acts button:hover{background:var(--surface-2);color:var(--ink)}
.jc .jc-meta .acts svg.ji{width:14px;height:14px}
.jc .jc-ufile{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ── 입력 ── */
.jc .jc-dock{flex:none;padding:0 28px 18px}
.jc .jc-comp{position:relative;max-width:calc(var(--jc-col) - 56px);margin:0 auto;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -14px rgba(15,23,42,.22);transition:border-color .15s,box-shadow .15s}
.jc .jc-comp:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line-2));box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px -14px rgba(15,23,42,.22)}
.jc .jc-comp.drag{border-color:var(--accent);border-style:dashed;background:color-mix(in srgb,var(--accent-soft) 50%,var(--surface))}
.jc .jc-comp.off{background:var(--surface-2)}
#jc .jc-comp textarea{display:block;width:100%;min-height:56px;max-height:260px;border:0;background:transparent;resize:none;padding:18px 20px 6px;font-size:15px;line-height:1.6;outline:none;box-shadow:none;border-radius:22px 22px 0 0;overflow-y:auto}
#jc .jc-comp textarea:focus,#jc .jc-comp textarea:focus-visible,#jc .jc-comp textarea:disabled{outline:none;box-shadow:none;border:0;background:transparent}
.jc .jc-comp textarea::placeholder{color:var(--faint)}
.jc .jc-files{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px 0}
.jc .jc-file{position:relative;display:flex;align-items:center;gap:10px;max-width:250px;padding:6px 30px 6px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.jc .jc-file .th{width:40px;height:40px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--surface);color:var(--muted);overflow:hidden;border:1px solid var(--line)}
.jc .jc-file .th img{width:100%;height:100%;object-fit:cover;display:block}
.jc .jc-file .th svg.ji{width:18px;height:18px}
.jc .jc-file .th.pdf{color:var(--sev3)}
.jc .jc-file .tx{min-width:0;display:grid}
.jc .jc-file .n{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc .jc-file .s{font-size:11px;color:var(--faint)}
.jc .jc-file .rm{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:6px;justify-content:center;color:var(--faint)}
.jc .jc-file .rm:hover{background:var(--surface);color:var(--ink)}
.jc .jc-file .rm svg.ji{width:13px;height:13px}
.jc .jc-file.sm{padding:4px 10px 4px 4px;background:var(--surface)}
.jc .jc-file.sm .th{width:28px;height:28px;border-radius:6px}
.jc .jc-file.sm .th svg.ji{width:15px;height:15px}
.jc .jc-file.busy .th{animation:jcPulse 1s ease-in-out infinite}
.jc .jc-cb{display:flex;align-items:center;gap:6px;padding:8px 12px 12px;flex-wrap:wrap}
.jc .jc-ib{width:34px;height:34px;border-radius:10px;justify-content:center;color:var(--muted)}
.jc .jc-ib:hover{background:var(--surface-2);color:var(--ink)}
.jc .jc-tg{height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;font-weight:650;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.jc .jc-tg svg.ji{width:15px;height:15px}
.jc .jc-tg:hover{color:var(--ink);border-color:var(--line-2);background:var(--surface-2)}
.jc .jc-tg .ts{display:none}
.jc .jc-tg[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.jc .jc-tg.na{opacity:.45}
.jc .jc-sp{flex:1}
.jc .jc-mdl{position:relative;flex:none}
.jc .jc-mdl>button{white-space:nowrap;height:34px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:650;color:var(--muted)}
.jc .jc-mdl>button:hover,.jc .jc-mdl>button[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.jc .jc-mdl>button svg.ji{width:14px;height:14px}
.jc .jc-menu-pop{position:absolute;bottom:calc(100% + 8px);right:0;z-index:30;min-width:340px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 18px 48px -12px rgba(15,23,42,.3);display:grid;gap:2px}
/* 처음 화면(입력칸이 가운데)에서는 모델 창을 아래로 — 위로 열면 머리 밑에서 잘림 */
.jc .jc-main.jc-hm .jc-mdl .jc-menu-pop{bottom:auto;top:calc(100% + 8px)}
.jc .jc-menu-pop.dn{bottom:auto;top:calc(100% + 2px);right:4px;min-width:200px}
.jc .jc-menu-pop .h{font-size:11.5px;font-weight:700;color:var(--faint);padding:8px 10px 4px}
.jc .jc-opt{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:2px 10px;align-items:center;width:100%;padding:9px 10px;border-radius:9px}
.jc .jc-opt:hover,.jc .jc-opt:focus-visible{background:var(--surface-2)}
.jc .jc-opt .t{font-size:13.5px;font-weight:700;color:var(--ink)}
.jc .jc-opt .d{grid-column:1;font-size:12px;color:var(--muted)}
.jc .jc-opt svg.ji{grid-row:1/4;grid-column:2;width:16px;height:16px;color:var(--accent)}
.jc .jc-opt .m{grid-column:1;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jc .jc-opt.dng .t{color:var(--sev3)}
.jc .jc-opt .t .rel{margin-left:8px;font-size:11.5px;font-weight:650;color:var(--muted)}
.jc .jc-opt .t .rel.low{color:var(--good)}
.jc .jc-menu-pop .h.ft{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:600}
#jc .jc-sel{height:36px;min-width:260px;max-width:100%;padding:0 32px 0 12px;border:1px solid var(--line-2);border-radius:10px;background-color:var(--surface);color:var(--ink);font-size:13px;font-weight:650}
#jc .jc-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
.jc .jc-send{width:34px;height:34px;border-radius:10px;justify-content:center;background:var(--accent);color:#fff;transition:background .15s,transform .1s}
.jc .jc-send:hover{filter:brightness(1.06)}
.jc .jc-send:active{transform:scale(.96)}
.jc .jc-send:disabled{background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--surface);filter:none;transform:none}
.jc .jc-send.stop{background:var(--ink);color:var(--surface)}
.jc .jc-send svg.ji{width:18px;height:18px;stroke-width:2.2}
.jc .jc-send.stop svg.ji{fill:currentColor;stroke:none}
.jc .jc-foot{max-width:calc(var(--jc-col) - 56px);margin:10px auto 0;padding:0 8px;display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.jc .jc-comp.off~.jc-foot .tip{display:none}
.jc .jc-foot .bud{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.jc .jc-foot .bud b{color:var(--ink);font-weight:750}
.jc .jc-foot .bud.warn .lf{color:var(--sev2);font-weight:700}
.jc .jc-foot .bud.stop .lf{color:var(--sev3);font-weight:700}
.jc .jc-limit{max-width:calc(var(--jc-col) - 56px);margin:0 auto 12px;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;background:var(--sev3-bg);color:var(--ink);font-size:13.5px;line-height:1.6}
.jc .jc-limit>svg.ji{color:var(--sev3);margin-top:2px}
.jc .jc-limit b{color:var(--sev3)}
.jc .jc-limit .jc-btn{margin-left:auto;flex:none}

/* ── 처음 화면(새 대화) ── */
.jc .jc-main.jc-hm .jc-body{justify-content:safe center;padding:12px 0 5vh;overflow-y:auto}
.jc .jc-main.jc-hm .jc-scroll{flex:none;overflow:visible}
.jc .jc-hero{max-width:var(--jc-col);margin:0 auto;padding:24px 28px 28px;text-align:center;display:grid;justify-items:center;gap:12px}
.jc .jc-hero .lg{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.jc .jc-hero .lg svg.ji{width:26px;height:26px}
.jc .jc-hero h2{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.25;margin-top:6px}
.jc .jc-hero p{font-size:14px;color:var(--muted);line-height:1.6;max-width:560px;text-wrap:balance}
.jc .jc-hero.stop .lg{background:var(--sev3-bg);color:var(--sev3)}
.jc .jc-hero .cd{font-size:13px;font-weight:700;color:var(--sev3);font-variant-numeric:tabular-nums}
.jc .jc-hero .jc-btn{margin-top:4px}
.jc .jc-sugg{max-width:var(--jc-col);width:100%;margin:16px auto 0;padding:0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.jc .jc-sg{display:grid;gap:4px;width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);transition:border-color .15s,background .15s}
.jc .jc-sg:hover{border-color:var(--line-2);background:var(--surface-2)}
.jc .jc-sg .k{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent-ink)}
.jc .jc-sg .k svg.ji{width:14px;height:14px}
.jc .jc-sg .q{font-size:13.5px;color:var(--ink);line-height:1.5}

/* ── 버튼 ── */
.jc .jc-btn{height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:700;color:var(--ink);justify-content:center;white-space:nowrap}
.jc .jc-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.jc .jc-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.jc .jc-btn.pri:hover{filter:brightness(1.06);color:#fff}
.jc .jc-btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}
.jc .jc-btn svg.ji{width:15px;height:15px}

/* ── 사용량 · 한도(관리자) ── */
.jc .jc-use{max-width:1040px;margin:0 auto;padding:28px 28px 40px;display:grid;gap:20px}
.jc .jc-use .top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.jc .jc-use h2{font-size:24px;font-weight:800;letter-spacing:-.03em}
.jc .jc-use .sub{margin-top:6px;font-size:13px;color:var(--muted)}
.jc .jc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.jc .jc-kpi{padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:4px}
.jc .jc-kpi .l{font-size:12px;font-weight:700;color:var(--muted)}
.jc .jc-kpi b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.jc .jc-kpi .d{font-size:12px;color:var(--faint)}
.jc .jc-def{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.jc .jc-def b{color:var(--ink)}
.jc .jc-money{display:inline-flex;align-items:center;height:36px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:0 10px;gap:4px}
.jc .jc-money:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.jc .jc-money span{color:var(--faint);font-weight:700}
#jc .jc-money input{width:72px;height:auto;min-height:0;border-radius:0;border:0;background:transparent;outline:none;box-shadow:none;padding:0;font-weight:700;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
#jc .jc-money input:focus,#jc .jc-money input:focus-visible{outline:none;box-shadow:none;border:0;background:transparent}
.jc .jc-money.sm{height:30px;border-radius:8px}
#jc .jc-money.sm input{width:56px;font-size:12.5px}
.jc .jc-tw{border:1px solid var(--line);border-radius:14px;overflow:hidden;overflow-x:auto}
.jc .jc-tbl{border-collapse:collapse;width:100%;font-size:13px}
.jc .jc-tbl th{background:var(--surface-2);font-size:12px;font-weight:700;color:var(--muted);text-align:left;padding:10px 14px;white-space:nowrap;border-bottom:1px solid var(--line)}
.jc .jc-tbl td{height:64px;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.jc .jc-tbl tr:last-child td{border-bottom:0}
.jc .jc-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.jc .jc-tbl .who b{display:block;font-weight:750}
.jc .jc-tbl .who span{font-size:12px;color:var(--faint)}
.jc .jc-tbl .use{min-width:180px}
.jc .jc-tbl .use .ln{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px}
.jc .jc-tbl .use .ln b{color:var(--ink)}
.jc .jc-tbl .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.jc .jc-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.jc .jc-tag.own{background:var(--accent-soft);color:var(--accent-ink)}
.jc .jc-tag.stop{background:var(--sev3-bg);color:var(--sev3)}
.jc .jc-tag.plus{background:var(--good-bg);color:var(--good)}
.jc button.jc-tag.plus{gap:4px;cursor:pointer}
.jc button.jc-tag.plus:hover{filter:brightness(.97);text-decoration:line-through}
.jc .jc-tag.plus svg.ji{width:11px;height:11px}
.jc .jc-money.bad{border-color:var(--sev3);box-shadow:0 0 0 3px var(--sev3-bg)}
.jc .jc-def .msg.bad{color:var(--sev3);font-weight:700}
.jc .jc-hd .back{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;font-size:14px;font-weight:700;color:var(--muted)}
.jc .jc-hd .back:hover{background:var(--surface-2);color:var(--ink)}
.jc .jc-hd .back svg.ji{width:16px;height:16px}
.jc .jc-use .note{font-size:12.5px;color:var(--muted);line-height:1.7}
.jc .jc-use details summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);list-style:revert}
.jc .jc-use details[open] summary{margin-bottom:6px}
.jc .jc-load{padding:48px 24px;text-align:center;color:var(--faint);font-size:13.5px}

/* 휴대폰 · 좁은 칸 — 대화 목록은 서랍으로 */
.jc .jc-scrim{display:none}
@container jc (max-width:820px){
  .jc{grid-template-columns:minmax(0,1fr);border-radius:12px}
  .jc .jc-side{position:absolute;inset:0 auto 0 0;z-index:40;width:min(86%,320px);transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s}
  .jc.list-open .jc-side{transform:none;visibility:visible;transition-delay:0s;box-shadow:0 0 0 1px var(--line),24px 0 60px -20px rgba(15,23,42,.35)}
  .jc.list-open .jc-scrim{display:block;position:absolute;inset:0;z-index:35;background:rgba(15,23,42,.32)}
  .jc .jc-x,.jc .jc-menu{display:inline-flex}
  .jc .jc-new .k{display:none}
  .jc .jc-hd{padding:8px 10px;gap:6px;min-height:56px}
  .jc .jc-pill{gap:6px;padding:0 10px}
  .jc .jc-pill .jc-bar,.jc .jc-pill .of{display:none}
  .jc .jc-msgs{padding:20px 16px 20px;gap:24px}
  .jc .jc-a{grid-template-columns:minmax(0,1fr);gap:0}
  .jc .jc-av{display:none}
  .jc .jc-dock{padding:0 16px max(12px,env(safe-area-inset-bottom))}
  .jc .jc-comp{border-radius:18px}
  #jc .jc-comp textarea{padding:14px 14px 4px;min-height:48px;font-size:16px}
  .jc .jc-cb{padding:6px 8px 8px}
  .jc .jc-tg{padding:0 10px}
  .jc .jc-tg .tl{display:none}
  .jc .jc-tg .ts{display:inline}
  .jc .jc-hero h2{font-size:24px}
  .jc .jc-hero{padding:16px 16px 20px}
  .jc .jc-sugg{grid-template-columns:minmax(0,1fr);padding:0 10px}
  .jc .jc-sugg .jc-sg:nth-child(n+3){display:none}
  .jc .jc-foot{font-size:11.5px}
  .jc .jc-foot .tip{display:none}
  .jc .jc-use{padding:20px 14px 32px}
  .jc .jc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container jc (max-width:480px){
  .jc .jc-pill b,.jc .jc-pill .of{display:none}
  .jc .jc-cb{flex-wrap:nowrap;gap:4px;padding:6px 8px 8px}
  .jc .jc-mdl>button{padding:0 6px}
  .jc .jc-mdl>button>svg.ji:first-child{display:none}
  .jc .jc-tg{padding:0 9px}
  .jc .jc-mdl>button .mn{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* 이 화면에서는 오른쪽 아래 떠 있는 단추를 감춤(입력칸 보내기 단추와 겹침) */
body.jc-on .asbtn,body.jc-on .fbbtn,body.jc-on .kkfab{display:none!important}