/* 어시미 화면 — 토큰은 design/tokens.css(빵빵앱과 같은 토스 다크). 부품 모양도 빵빵 스튜디오(builder.css)를 따랐다 */
body{padding-bottom:0}
.ico{display:block;width:1.2em;height:1.2em;flex:none}
.hidden{display:none!important}

/* ---- 첫 화면 ---- */
.top{display:flex;align-items:flex-end;gap:12px;position:sticky;top:0;z-index:6;background:var(--bg);padding-bottom:10px}
.top .bd{flex:1;min-width:0}
.top .gear{flex:none;width:40px;height:40px;border-radius:12px;border:0;background:var(--surface);color:var(--dim);display:grid;place-items:center;font-size:20px}
.top .gear:active{background:var(--surface2)}
.top .sub{margin:6px 0 0;color:var(--dim);font-size:14px}
main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}

/* 감시 카드: 상태 원 · 이름 · 지금 상황 한 줄 · 최근 결과 띠 */
.watch{display:block;background:var(--surface);border-radius:var(--r);padding:16px;margin-bottom:10px;transition:transform 100ms var(--ease),background var(--fast) var(--ease)}
.watch:active{transform:scale(.985);background:var(--surface2)}
/* 마우스는 줄이지 않는다 — 가장자리를 누르면 줄어든 카드 밖에서 손을 떼게 되어 클릭이 안 먹었다 */
@media (hover:hover) and (pointer:fine){.watch:active{transform:none}}
.watch,.brow{-webkit-user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
/* 끌기: 들린 카드는 손가락을 그대로 따라오고(전환 없음), 비켜나는 카드는 부드럽게 미끄러진다 */
.sorting .watch:active{transform:none}
.watch.lift,.brow.lift{position:relative;z-index:3;background:var(--surface2);box-shadow:0 14px 36px rgba(0,0,0,.5);transition:box-shadow .18s var(--ease),background .18s var(--ease)}
.watch.settle,.brow.settle{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.watch .head{display:flex;align-items:flex-start;gap:12px}
.watch .head .stat,.watch .head .pill{margin-top:2px}
.watch .name{flex:1;min-width:0;font-size:17px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;align-self:center}
.watch .now{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--fg)}
.watch .now.ok{color:var(--dim)}
.watch .foot{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12.5px;color:var(--faint)}
.watch .foot .when{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch .foot .tags{flex:none;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.watch .tag{padding:2px 7px;border-radius:6px;background:var(--surface2);color:var(--dim);font-size:11.5px;font-weight:600;line-height:1.4}
.watch .tag.warn{background:var(--warn-bg);color:var(--warn)}.watch .tag.fail{background:var(--bad-bg);color:var(--bad)}
.watch .tag.unknown{background:oklch(0.30 0.06 300);color:oklch(0.78 0.12 300)}.watch .tag.new{background:var(--accent-bg);color:var(--accent-ink)}
.strip{flex:1;display:flex;gap:2px;height:14px;align-items:stretch;min-width:0}
.strip i{flex:1;max-width:8px;border-radius:2px;background:var(--surface3)}
.strip i.ok{background:oklch(0.75 0.16 160/.55)}.strip i.warn{background:var(--warn)}.strip i.fail{background:var(--bad)}.strip i.unknown{background:oklch(0.65 0.12 300)}
.watch .ptag,.brow .ptag,.pcolor .ptag,.ask-h .ptag{display:inline;margin-right:6px;padding:2px 7px;border-radius:6px;background:oklch(0.34 0.07 var(--ph,210));color:oklch(0.88 0.1 var(--ph,210));font-size:12px;font-weight:700;vertical-align:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.watch .unread{flex:none;display:inline-flex;align-items:center;gap:5px;color:var(--accent-ink);font-weight:600}
.watch .unread::before,.rrow .dot{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.rrow .dot{display:inline-block;flex:none}
.stat{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:var(--surface2);color:var(--faint)}
.stat.ok{background:var(--ok-bg);color:var(--ok)}.stat.warn{background:var(--warn-bg);color:var(--warn)}.stat.fail{background:var(--bad-bg);color:var(--bad)}
.stat.unknown{background:oklch(0.30 0.06 300);color:oklch(0.78 0.12 300)}
.stat.sm{width:34px;height:34px;font-size:18px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.fail{background:var(--bad-bg);color:var(--bad)}
.pill.unknown{background:oklch(0.30 0.06 300);color:oklch(0.78 0.12 300)}.pill.acc{background:var(--accent-bg);color:var(--accent-ink)}

/* 허락을 기다리는 대화 — 맨 위 */
.ask-card{display:flex;align-items:center;gap:12px;background:var(--warn-bg);color:var(--warn);border-radius:var(--r);padding:14px 16px;margin-top:18px}
.ask-card .t{font-weight:800;font-size:15.5px;color:var(--fg)}
.ask-card .s{font-size:13px;color:var(--warn)}
.ask-card .ico{font-size:24px}

/* ---- 감시 상세: 고정 헤더 + 탭 넷 (builder.css) ---- */
.apphead{position:fixed;top:0;left:0;right:0;z-index:10;background:var(--bg);padding:calc(10px + env(safe-area-inset-top)) 20px 10px;max-width:520px;margin:0 auto}
.apphead ~ #tab{padding-top:var(--head-h, 116px)}
html.solo .apphead{display:none}
html.solo .apphead ~ #tab{padding-top:0}
/* 카드 상세 머리 — 위에 붙는다 */
.page-h{position:sticky;top:0;z-index:4;background:var(--bg);margin:0 -20px 12px;padding:calc(12px + env(safe-area-inset-top)) 20px 12px;border-bottom:1px solid var(--line)}
.page-h .pt{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.page-h .pt .pill{flex:none;margin-top:3px}
.page-h h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.wide .page-h{padding-top:18px}
.card-talks{background:var(--surface);border-radius:var(--r);padding:8px 12px;margin-bottom:10px}
.ct-h{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--faint);padding:2px 0 4px}
.ct-new{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--accent-ink);font:inherit;font-size:13px;font-weight:700;padding:2px 0}
.ct-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;font-size:14px}
.ct-row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ct-row .w{flex:none;font-size:12px;color:var(--faint)}
.ct-row .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--surface3)}
.ct-row .dot.warn{background:var(--warn)}.ct-row .dot.run,.ct-row .dot.new{background:var(--accent)}
.card-talks details summary{font-size:12.5px;font-weight:700;color:var(--faint);padding:6px 0 2px;cursor:pointer;border-top:1px solid var(--line);list-style:none}
.apphead .line{display:flex;align-items:center;gap:8px}
.apphead .name{font-size:19px;font-weight:800;letter-spacing:-.02em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apphead .meta{font-size:12.5px;color:var(--faint);margin:3px 0 0 38px}
.iconbtn{background:none;border:0;color:var(--accent-ink);font-size:22px;width:32px;height:34px;display:grid;place-items:center;border-radius:10px;flex:none}
.iconbtn:active{background:var(--accent-bg)}
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n, 4),1fr);gap:4px;background:var(--surface);border-radius:14px;padding:4px;margin-top:12px}
.seg a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--dim);font-size:14px;font-weight:700;height:36px;border-radius:10px;transition:color var(--base) var(--ease)}
.seg a.on{color:var(--fg)}
.seg a .n{font-size:11px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:#1a1a1a;display:inline-flex;align-items:center;justify-content:center;line-height:1;letter-spacing:0;font-variant-numeric:normal}
.seg-ind{position:absolute;top:4px;left:4px;height:36px;width:calc((100% - 8px - (var(--n, 4) - 1) * 4px) / var(--n, 4));border-radius:10px;background:var(--surface3);transition:transform 320ms var(--ease)}
#tab{max-width:520px;margin:0 auto;padding-left:20px;padding-right:20px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
#tab.tab-in-r{animation:tab-in-r .26s var(--ease) backwards}
#tab.tab-in-l{animation:tab-in-l .26s var(--ease) backwards}
@keyframes tab-in-r{from{opacity:0;transform:translateX(18px)}}
@keyframes tab-in-l{from{opacity:0;transform:translateX(-18px)}}

/* ---- 현황 ---- */
.summary{background:var(--surface);border-radius:var(--r);padding:18px;margin-top:6px}
.summary .big{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
.summary .s{margin-top:6px;color:var(--dim);font-size:14px}
.summary.warn{background:var(--warn-bg)}.summary.warn .big{color:var(--warn)}
.summary.fail{background:var(--bad-bg)}.summary.fail .big{color:var(--bad)}
.summary.unknown{background:oklch(0.30 0.06 300)}
.item{background:var(--surface);border-radius:var(--r);padding:16px;margin-bottom:10px}
.item .h{display:flex;align-items:center;gap:10px}
.item .h .t{flex:1;font-weight:700;font-size:16px}
.item .m{margin-top:8px;font-size:15px;line-height:1.55}
a.item.tap{display:block;transition:transform 100ms var(--ease),background var(--fast) var(--ease)}
a.item.tap:active{transform:scale(.985);background:var(--surface2)}
.item .more{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-top:12px;font-size:13px;font-weight:700;color:var(--accent-ink)}
.item .more .ico{font-size:15px}
.cause{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--surface2);font-size:14.5px;line-height:1.55}
.cause b{color:var(--warn);margin-right:6px}
.cause.big{margin-top:0;font-size:15.5px;font-weight:600;background:var(--surface);padding:14px 16px}
.todo{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--accent-bg);color:var(--fg);font-size:14px;line-height:1.55}
.todo b{color:var(--accent-ink);margin-right:6px}
.cases{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.case{background:var(--surface2);border-radius:12px;padding:11px 13px;font-size:14px;line-height:1.5}
.case .w{font-weight:700}
.case .d{color:var(--dim);font-size:13px;margin-top:2px}
.case .y{margin-top:6px}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:14px 0 0;font-size:14px}
dl.facts dt{color:var(--dim)}dl.facts dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.basis{margin-top:12px;font-size:13px;color:var(--faint);line-height:1.55}
.oklist{background:var(--surface);border-radius:var(--r);padding:4px}
.oklist details{border-radius:var(--rr)}
.oklist summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;border-radius:var(--rr)}
.oklist summary::-webkit-details-marker{display:none}
.oklist summary:active{background:var(--surface2)}
.oklist summary .bd{flex:1;min-width:0}
.oklist summary .t{font-weight:700;font-size:15px}
.oklist summary .s{font-size:13px;color:var(--dim);margin-top:1px}
.oklist summary .chev{color:var(--faint);transition:transform var(--base) var(--ease)}
.oklist details[open] summary .chev{transform:rotate(90deg)}
.oklist .open{padding:0 12px 14px 58px}
.oklist .open dl.facts{margin-top:0}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ---- 칩·버튼 ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:999px;background:var(--surface);color:var(--dim);border:0}
.chip:active{background:var(--surface2)}
.chip.acc{background:var(--accent-bg);color:var(--accent-ink)}
.chip .ico{font-size:16px}

/* ---- 보고서 ---- */
.rhead{display:flex;align-items:center;gap:10px;margin:6px 2px 12px}
.rhead .t{flex:1;font-size:13.5px;color:var(--dim);line-height:1.5}
.rows{background:var(--surface);border-radius:var(--r);padding:4px}
.rrow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--rr);transition:background var(--fast) var(--ease)}
.rrow:active{background:var(--surface2)}
.rrow .bd{flex:1;min-width:0}
.rrow .t{font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center}
.rrow .s{font-size:13px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .chev{color:var(--faint)}
.doc{background:var(--surface);border-radius:var(--r);padding:20px 18px;margin-top:6px;line-height:1.65;font-size:15px;overflow-wrap:anywhere}
/* 보고서 화면은 카드 없이 화면 폭 그대로 — 카드 안 여백 + 바깥 여백이 두 겹으로 보여 좁았다 */
.doc.memo{margin:0 0 14px}
.doc.page{background:none;border-radius:0;padding:4px 0 0}
.doc.page h3{border-top-color:var(--surface2)}
.doc.page .tbl{margin-left:-4px;margin-right:-4px}
.doc h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.35}
.doc h3{font-size:18px;font-weight:800;margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.doc h4{font-size:16px;font-weight:700;margin:20px 0 6px}
.doc h5{font-size:15px;font-weight:700;margin:16px 0 4px}
.doc p{margin:8px 0}
.doc small{color:var(--faint);font-size:12.5px}
.doc blockquote{margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--surface2);color:var(--dim);font-size:13.5px}
.doc ul,.doc ol{margin:8px 0;padding-left:20px}
.doc hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.tbl{overflow-x:auto;margin:10px 0;border-radius:12px;background:var(--surface2)}
.tbl table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.45}
.tbl th{text-align:left;color:var(--faint);font-weight:700;font-size:12px;padding:9px 10px 6px;white-space:nowrap}
.tbl td{padding:7px 10px;border-top:1px solid var(--line);vertical-align:top;word-break:keep-all}
.tbl td:first-child{color:var(--dim);white-space:nowrap}
.doc a,.text a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-all}.doc a:active,.text a:active{opacity:.6}
.doc code,.text code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--surface2);padding:1px 5px;border-radius:6px}
pre.code{background:var(--surface2);border-radius:12px;padding:10px 12px;font:12.5px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0}

/* ---- 설정 (키·값 줄) ---- */
.kvs{background:var(--surface);border-radius:var(--r);padding:4px 16px}
.kv{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:15px}
.kv:first-child{border-top:0}
.kv .k{flex:none;width:96px;color:var(--dim)}
.kv .v{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.kv .v small{display:block;font-weight:500;color:var(--faint);font-size:12.5px;margin-top:2px}
.kv .v .v-row+.v-row{margin-top:8px}
.kv .v code{font-size:13px;background:var(--surface2);padding:1px 6px;border-radius:6px}
.sec-h{margin-top:26px}
.sec-h h2{font-size:17px}

/* ---- 대화 (builder.css 의 chat) ---- */
#log{display:flex;flex-direction:column;gap:14px}
.chat{display:flex;flex-direction:column;gap:14px;padding-bottom:12px}
/* 대화 화면은 한 틀(10/24): 문서는 안 움직이고 틀이 «보이는 화면»(--vvh 높이 · --vvt 만큼 내림 — chat.js) 그대로 — 대화만 안에서 스크롤
   키보드가 떠도 iOS 가 문서를 밀어 올릴 것이 없어서 머리는 맨 위, 입력창은 키보드 바로 위에 붙는다 */
html.chatmode,html.chatmode body{overflow:hidden;height:100%;overscroll-behavior:none}
html.chatmode .apphead{transform:translateY(var(--vvt,0px))}
.cwrap{position:fixed;left:0;right:0;top:0;height:var(--vvh,100dvh);transform:translateY(var(--vvt,0px));max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;padding:var(--head-h,116px) 20px 0}
.cwrap .chead{position:static;margin-top:0}
.cscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -20px;padding:4px 20px 0}
.msg-user{align-self:flex-end;max-width:85%;background:var(--accent-bg);color:var(--fg);padding:11px 14px;border-radius:18px 18px 6px 18px;white-space:pre-wrap;word-break:break-word}
.msg-ai{align-self:stretch;background:var(--surface);border-radius:6px 18px 18px 18px;padding:14px}
.msg-ai .who{font-size:12px;color:var(--faint);font-weight:700;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.msg-ai .who .claude{color:#D97757;font-size:15px}
.msg-ai .text{line-height:1.6;word-break:break-word}
.msg-ai .text p{margin:6px 0}.msg-ai .text p:first-child{margin-top:0}.msg-ai .text p:last-child{margin-bottom:0}
.msg-ai .text h2,.msg-ai .text h3,.msg-ai .text h4{font-size:16px;margin:12px 0 4px}
.msg-ai .text ul,.msg-ai .text ol{margin:6px 0;padding-left:20px}
.msg-ai details.steps{margin:0 0 10px;font-size:13px}
.msg-ai details.steps summary{cursor:pointer;list-style:none;color:var(--faint);font-weight:600;display:flex;align-items:center;gap:4px}
.msg-ai details.steps summary::-webkit-details-marker{display:none}
.msg-ai details.steps[open] summary .ico{transform:rotate(90deg)}
.steps .step{margin-top:8px;color:var(--dim);font-size:13.5px;line-height:1.55}
.steps .tool,.live .tool{margin-top:6px;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--faint);word-break:break-all;display:flex;gap:6px}
.steps .tool.denied,.live .tool.denied{color:var(--bad)}
.steps .tool.later,.live .tool.later{color:var(--warn)}
.denied-n{font-weight:600;color:var(--bad);background:var(--bad-bg);border-radius:999px;padding:0 7px;font-size:12px}
.denied-n.later{color:var(--warn);background:var(--warn-bg)}
.live .step{margin-top:8px;color:var(--dim);font-size:14px;line-height:1.55}
.ctx{align-self:center;max-width:100%}
.ctx summary{list-style:none;cursor:pointer}
.ctx summary::-webkit-details-marker{display:none}
.ctx[open] .chip{margin-bottom:8px}
.ctx pre{white-space:pre-wrap;background:var(--surface);border-radius:14px;padding:12px;font:12.5px/1.55 ui-monospace,Menlo,monospace;color:var(--dim);margin:0}
.approval{margin-top:12px;border-radius:14px;padding:12px;background:var(--warn-bg)}
.approval .q{font-weight:800;color:var(--warn);font-size:14px;display:flex;align-items:center;gap:6px}
.approval pre{margin:8px 0 10px;white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.5 ui-monospace,Menlo,monospace;color:var(--fg);background:oklch(0 0 0/.25);border-radius:10px;padding:10px;max-height:40dvh;overflow:auto}
.approval .btns{display:flex;gap:8px}
.approval .btns .btn{height:44px;flex:1;min-width:0}
.decided{margin-top:6px;font-size:12.5px;color:var(--faint)}
.note{font-size:13px;margin-top:10px;padding:9px 11px;border-radius:12px}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.bad{background:var(--bad-bg);color:var(--bad)}
.typing::after{content:"▍";animation:blink 1s steps(2) infinite;color:var(--accent-ink);margin-left:2px}
@keyframes blink{50%{opacity:0}}
.empty{text-align:center;color:var(--faint);padding:36px 12px 10px;line-height:1.7}
.empty .em{font-size:40px;display:block;margin-bottom:6px}
.sugs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
/* 입력창은 틀(.cwrap) 맨 아래 — 키보드가 떠 있으면 홈 막대 여백(safe area)을 뺀다 */
.composer{position:relative;flex:none;background:var(--bg);padding:10px 0 calc(10px + env(safe-area-inset-bottom));z-index:5}
.composer::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
html.kb .composer{padding-bottom:8px}
.chat .origin{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);margin:2px 2px 0}
.chat .origin svg{transform:rotate(-45deg);font-size:12px}
.chat .origin a{color:var(--accent-ink);font-weight:600}
.composer .meta{display:flex;align-items:center;gap:8px;margin:0 2px 8px;min-width:0}
.mchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--dim);font-size:12.5px;font-weight:600;white-space:nowrap}
.mchip .claude{color:#D97757}
.mchip:active{background:var(--surface)}
.mnote{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer .box{display:flex;align-items:flex-end;gap:8px;background:var(--surface);border-radius:20px;padding:6px 6px 6px 14px}
.composer textarea{flex:1;background:none;border:0;outline:none;resize:none;color:var(--fg);font:inherit;font-size:16px;line-height:1.45;max-height:160px;padding:8px 0}
.composer .send{flex:none;width:40px;height:40px;border-radius:14px;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:20px}
.composer .send.stop{background:var(--bad-bg);color:var(--bad)}
.composer .send[disabled]{opacity:.35}

/* ---- 아래 시트 · 토스트 ---- */
.backdrop{position:fixed;inset:0;background:rgb(0 0 0/.55);z-index:60;opacity:0;transition:opacity 400ms cubic-bezier(.32,.72,0,1);touch-action:none}
.backdrop.open{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--surface);border-radius:22px 22px 0 0;max-width:520px;margin:0 auto;
  padding:10px 20px calc(28px + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform 440ms cubic-bezier(.32,.72,0,1)}
.sheet.open{transform:none}
.sheet::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:var(--surface3);margin:0 auto 14px;cursor:grab}
.sheet h3{margin:14px 0 6px;font-size:16px;font-weight:800}
.sheet h3:first-of-type{margin-top:0}
.sheet .row{padding:11px 8px}
.sheet .row .ic{width:36px;height:36px;font-size:18px}
.sheet .row .on{color:var(--accent-ink)}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,16px);opacity:0;z-index:70;
  background:var(--surface3);color:var(--fg);padding:11px 16px;border-radius:14px;font-size:14px;font-weight:600;width:max-content;max-width:min(488px, calc(100% - 32px));text-align:center;
  transition:opacity 160ms var(--ease),transform 220ms var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.back{display:inline-flex;align-items:center;gap:2px;color:var(--accent-ink);font-weight:600}

/* ---- 배포 봇: 체크리스트 ---- */
button.rrow{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.chk .box{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--surface3);display:grid;place-items:center;font-size:16px;color:#fff}
.chk.done .box{background:var(--accent);border-color:var(--accent)}
.chk.done .t{color:var(--faint);text-decoration:line-through}
.chk .bd{display:flex;flex-direction:column}
.chk .s.auto.yes{color:var(--ok)}.chk .s.auto.no{color:var(--warn)}
.rrow a,.summary a,.item a{color:var(--accent-ink)}

/* ---- 배포 봇: 작업 → develop → 운영 · 흐름도 ---- */
:root{--lane0:oklch(0.75 0.16 160);--lane1:oklch(0.70 0.14 250);--lane2:oklch(0.72 0.13 310)}
.c0{--c:var(--lane0)}.c1{--c:var(--lane1)}.c2{--c:var(--lane2)}
.pipe{display:flex;align-items:stretch;gap:4px;margin-top:6px}
.pipe .st{flex:1;min-width:0;background:var(--surface);border-radius:14px;padding:12px 10px}
.pipe .st.warn{background:var(--warn-bg)}
.pipe .k{font-size:12px;font-weight:700;color:var(--c)}
.pipe .b{font-size:18px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .s{font-size:11.5px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe .arr{flex:none;align-self:center;color:var(--faint);font-size:14px}
.legend{display:flex;gap:12px;font-size:12px;font-weight:700;margin:0 2px 8px}
.legend span{color:var(--c)}
.flow{display:flex;flex-direction:column;gap:10px}
.g-grp{background:var(--surface);border-radius:var(--r);padding:0 12px 0 6px}
.g-grp[open]>summary{border-bottom:1px solid var(--line)}
.g-grp[open]{padding-bottom:6px}
.g-body .desc{font-size:13px;color:var(--fg);opacity:.85;margin-top:3px;line-height:1.4;overflow-wrap:anywhere}
.g-body .rv{font-size:12.5px;font-weight:700;margin-top:4px;overflow-wrap:anywhere}
.g-body .rv.stale{color:var(--warn)}.g-body .rv.open{color:var(--warn)}.g-body .rv.ok{color:var(--ok)}.g-body .rv.none,.g-body .rv.dim{color:var(--dim)}

.g-row{position:relative;display:flex;gap:4px}
.g-lanes{position:relative;flex:none;width:66px}
.g-lanes .v{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;opacity:.55}
.g-lanes .v.l0{left:12px;background:var(--lane0)}.g-lanes .v.l1{left:34px;background:var(--lane1)}
.g-dot{position:absolute;top:13px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--surface)}
.g-dot.hollow{background:var(--surface);border:2px solid var(--c)}
.g-dot.sm{top:15px;width:8px;height:8px;margin-left:-4px;box-shadow:none}
.g-link{position:absolute;top:18px;height:2px;margin-top:-1px;background:var(--c)}
.g-link.dash{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px)}
.g-body{flex:1;min-width:0;padding:8px 0 10px}
.g-body .t{font-size:14px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.g-body .s{font-size:12px;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.g-body .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.g-body .tags .pill{font-size:11px}
.g-body .ci.ok{color:var(--ok)}.g-body .ci.fail{color:var(--bad)}.g-body .ci.unknown{color:var(--warn)}
.g-day .g-body{padding:10px 0 2px;font-size:12px;font-weight:800;color:var(--faint)}
.g-row.deploy .g-body .t{color:var(--fg)}
.g-row.deploy.now{background:linear-gradient(90deg,oklch(0.75 0.16 160/.10),transparent 70%);border-radius:10px}
.g-grp>summary{list-style:none;cursor:pointer}
.g-grp>summary::-webkit-details-marker{display:none}
.g-head .caret{display:inline-block;margin-right:4px;color:var(--faint);transition:transform .15s}
.g-grp[open]>summary .caret{transform:rotate(90deg)}
.g-grp>.g-row:not(.g-head){padding-left:0}
.g-head.pending .g-body .t{color:var(--fg)}
.dep{padding:0}
.dep-h{display:flex;align-items:flex-start;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.dep-h .bd{display:flex;flex-direction:column;min-width:0;flex:1}
.dep-h .t{font-size:15px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.dep-h .s{font-size:12.5px;color:var(--dim);margin-top:2px}
.dep-b{padding:0 0 12px}
.g-grp-sub{margin:4px 0 6px 70px}
.g-grp-sub>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:800;color:var(--dim);padding:6px 0}
.g-grp-sub>summary::-webkit-details-marker{display:none}
.g-grp-sub>summary .caret{display:inline-block;margin-right:4px;transition:transform .15s}
.g-grp-sub[open]>summary .caret{transform:rotate(90deg)}
.cl-h{font-size:12px;font-weight:800;color:var(--faint);margin:8px 0 2px}
.cl-row{display:flex;gap:6px;font-size:13px;line-height:1.4;padding:3px 0;overflow-wrap:anywhere}
.cl-row .box{flex:none;width:16px;color:var(--ok);font-weight:800}
.cl-row:not(.done) .box::before{content:'○';color:var(--faint)}
.chk .prn{font-size:12.5px;font-weight:700;margin-left:2px}
.chk:not(.live){cursor:default}
.pill.env{font-weight:800}
.pill.env.prod{background:oklch(0.75 0.16 160/.16);color:var(--lane0)}
.pill.env.hot{background:oklch(0.72 0.17 40/.16);color:oklch(0.78 0.16 45)}
.pill.env.dev{background:oklch(0.70 0.14 250/.16);color:var(--lane1)}
.stat.prep{display:inline-grid;place-items:center;font-size:15px;line-height:1}
.ver{display:inline-block;font-size:12px;font-weight:800;color:#0b1a12;background:var(--lane0);border-radius:6px;padding:0 6px;margin-right:2px}

/* ---- 대화: 중요한 일 승인 이유 · Claude 의 질문 ---- */
.approval .why{font-weight:600;color:var(--fg);opacity:.8}
.approval.ask{background:var(--accent-bg)}
.approval.ask .q{color:var(--accent-ink)}
.approval .qq{margin:10px 0}
.approval .qt{font-weight:700;font-size:14.5px;margin-bottom:8px;line-height:1.45}
.approval .opts{display:flex;flex-direction:column;gap:6px}
.approval .opt{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px}
.approval .opt span{font-size:12.5px;color:var(--dim)}
.approval .opt.on{border-color:var(--accent);background:oklch(0.55 0.15 250/.25)}
.approval .other{margin-top:6px;width:100%}
/* CS 봇: 카드 한 줄 = (고르기) · 본문(눌러 상세) · 원문 링크 */
.cs-card{display:flex;align-items:flex-start;gap:10px;padding:14px}
.cs-card .bd{flex:1;min-width:0;color:inherit;text-decoration:none}
.cs-card .h .t{font-size:15.5px;line-height:1.4}
.cs-card .m{margin-top:6px;font-size:14px;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-card .more{justify-content:flex-start;margin-top:8px;font-weight:600;color:var(--dim);font-size:12.5px}
.cs-card > .chip.src{flex:none;padding:8px;font-size:15px}
.cs-card .talks{margin-top:8px}
.talk-tx{display:inline-flex;gap:3px;align-items:center;color:var(--accent-ink);cursor:pointer}
.pill.talk{display:inline-flex;gap:4px;align-items:center;background:var(--accent-bg);color:var(--accent-ink);cursor:pointer}
.pill.talk.busy{background:var(--warn-bg);color:var(--warn)}
.cs-card.on{outline:2px solid var(--accent);outline-offset:-2px}
.cs-card .box-btn{flex:none;background:none;border:0;padding:2px 0 0;color:inherit}
.cs-card .box-btn .box{width:24px;height:24px;border-radius:8px;border:2px solid var(--surface3);display:grid;place-items:center;font-size:15px;color:#fff}
.cs-card.on .box-btn .box{background:var(--accent);border-color:var(--accent)}
.chg{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:13px;color:var(--accent-ink);line-height:1.45}
.chg .ico{flex:none;margin-top:2px}
.pill.kind{flex:none}
.pill.kind.fix{background:var(--warn-bg);color:var(--warn)}
.pill.kind.answer{background:var(--accent-bg);color:var(--accent-ink)}
.pill.kind.discuss{background:oklch(0.30 0.06 300);color:oklch(0.78 0.12 300)}
a.back{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:700;color:var(--accent-ink);text-decoration:none}
.chip[disabled]{opacity:.45}
/* 검토: 카드를 고르면 맨 아래에 떠오르는 「N개 시작하기」 */
.fab-bar{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;z-index:5;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 60%,transparent);transform:translateY(110%);transition:transform 320ms cubic-bezier(.32,.72,0,1);pointer-events:none}
.fab-bar.on{transform:none;pointer-events:auto}
.fab{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:16px;font-weight:700;padding:15px;border:0;border-radius:16px;
  background:var(--accent);color:#fff;box-shadow:0 6px 24px rgb(0 0 0/.35)}
#tab.has-fab{padding-bottom:calc(110px + env(safe-area-inset-bottom))}

/* ---- 넓은 화면(맥 · 데스크탑, 900px 이상): 왼쪽 봇 목록 + 오른쪽 내용 ----
   html.wide 는 app.js 가 붙인다. 고정된 머리·입력창·시트는 왼쪽 목록 폭만큼 비켜서 오른쪽 가운데에 */
#side{display:none}
html.wide{--side-w:320px;--pane-w:1100px}
html.wide #side{display:block;position:fixed;top:0;bottom:0;left:0;width:var(--side-w);overflow-y:auto;overscroll-behavior:contain;z-index:20;
  background:oklch(0.145 0.012 255);border-right:1px solid var(--line);padding:18px 12px 28px}
html.wide #view{margin-left:var(--side-w)}
html.wide .top,html.wide main,html.wide #tab{max-width:var(--pane-w)}
html.wide .apphead,html.wide .cwrap,html.wide .fab-bar{left:var(--side-w);max-width:var(--pane-w)}
html.wide .apphead{padding-top:18px}
html.wide .sheet{left:var(--side-w);max-width:560px}
html.wide .toast{left:calc(50% + var(--side-w) / 2)}
/* 봇 목록이 늘 보이니 「뒤로(봇 목록)」는 뺀다 */
html.wide .apphead .line > a.iconbtn[href="#/"]{display:none}
html.wide .apphead .line:has(> a.iconbtn[href="#/"]) + .meta{margin-left:0}
.side-top{display:flex;align-items:center;gap:10px;padding:0 6px 14px}
.side-top .bd{flex:1;min-width:0}
.side-top .app{font-size:12.5px;font-weight:600;color:var(--faint)}
.side-top .h{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.side-top .gear{flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface);color:var(--dim);display:grid;place-items:center;font-size:18px}
#side .ask-card{margin:0 0 8px;padding:10px 12px;gap:10px}
#side .ask-card .t{font-size:14px}
#side .ask-card .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side .ask-card > div{min-width:0}
#side .ask-card .ico{font-size:20px}
.watch.sb{background:none;padding:11px 12px;margin-bottom:2px;border-radius:14px}
.watch.sb .head{gap:10px;align-items:center}
.watch.sb .stat.sm{width:28px;height:28px;font-size:16px;margin-top:0}
.watch.sb .name{font-size:14.5px;-webkit-line-clamp:1}
.watch.sb .now{margin:5px 0 0 38px;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.watch.sb .foot{margin:6px 0 0 38px;font-size:11.5px;gap:6px}
.watch.sb .tag{font-size:11px;padding:1px 6px}
.watch.sb.on{background:var(--surface2)}
.watch.sb.on .name{color:var(--fg)}
/* 마우스: 올리면 살짝 밝게 */
@media (hover:hover){
  .watch.sb:hover:not(.on){background:var(--surface)}
  .watch:not(.sb):hover,.rrow:hover,a.item.tap:hover{background:var(--surface2)}
  .chip:hover,.side-top .gear:hover,.top .gear:hover{background:var(--surface2)}
}

/* ---- 대화 목록: [봇 | 대화] 탭 · 볼 것 있음 / 나머지 ---- */
.hseg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:var(--surface);border-radius:12px;padding:4px;margin-top:16px}
.hseg button{border:0;background:none;color:var(--dim);font-weight:700;font-size:14px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px}
.hseg button.on{background:var(--surface3);color:var(--fg)}
.hseg .n{font-size:11px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:#1a1a1a;display:inline-flex;align-items:center;justify-content:center;line-height:1;letter-spacing:0;font-variant-numeric:normal}
#side .hseg{margin:0 0 12px}
.cgrp{font-size:12.5px;font-weight:800;color:var(--faint);margin:18px 4px 6px;display:flex;gap:6px;align-items:center}
.cgrp .n{color:var(--warn)}
.clist{display:flex;flex-direction:column;gap:2px}
.crow{display:flex;align-items:center;gap:11px;padding:10px;border-radius:12px;transition:background var(--fast) var(--ease)}
.crow:active{background:var(--surface2)}
.crow.on{background:var(--surface2)}
.crow .bd{flex:1;min-width:0;display:flex;flex-direction:column}
.crow .t{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .s{font-size:12.5px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow.newc .t{color:var(--accent-ink)}
.cic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:var(--surface2);color:var(--faint)}
.cic.warn{background:var(--warn-bg);color:var(--warn)}.cic.run{background:var(--ok-bg);color:var(--ok)}.cic.new{background:var(--accent-bg);color:var(--accent-ink)}.cic.acc{background:var(--accent-bg);color:var(--accent-ink)}
.cst{flex:none;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--surface2);color:var(--dim);white-space:nowrap}
.cst.warn{background:var(--warn-bg);color:var(--warn)}.cst.run{background:var(--ok-bg);color:var(--ok)}.cst.new{background:var(--accent-bg);color:var(--accent-ink)}
.cmore summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--dim);padding:10px 4px}
.cmore summary::-webkit-details-marker{display:none}
@media (hover:hover){.crow:hover:not(.on){background:var(--surface)}}

/* ---- 대화 상세: 머리줄 · 다른 대화 띠 · 입력창 위 허락 카드 · 지금 하는 일 ---- */
.chead{position:sticky;top:var(--head-h,116px);z-index:4;background:var(--bg);display:flex;align-items:center;gap:8px;padding:8px 0 10px;margin-top:-4px}
.chead .cback{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:700;color:var(--accent-ink)}
.chead .ct{flex:1;min-width:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .cmore-btn{font-size:20px;color:var(--dim);line-height:1}
.band{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;margin-bottom:12px;background:var(--accent-bg);color:var(--accent-ink);font-size:13.5px;font-weight:700}
.band span{flex:1}
.band.warn{background:var(--warn-bg);color:var(--warn)}
/* 허락·질문 카드는 대화 맨 밑(떠 있지 않다) */
#pin .approval{margin:12px 0 0}
.nowl.pend{cursor:pointer;color:var(--warn);font-weight:700}
.nowl{display:flex;align-items:center;gap:7px;margin:0 2px 8px;font-size:12.5px;color:var(--accent-ink);min-width:0}
.nowl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nowl b{flex:none;color:var(--faint);font-weight:600}
.step.pinned{display:flex;align-items:center;gap:6px;color:var(--warn);font-size:13px;font-weight:700;margin-top:8px}
.rename{display:flex;gap:8px;align-items:center;padding:6px 8px 4px}
.rename .input{flex:1}
.crow .cbot b{font-weight:700;margin-right:4px}
.crow .cbot{display:inline-block;margin-right:6px;padding:0 6px;border-radius:5px;font-size:11.5px;font-weight:500;line-height:17px;vertical-align:1px;background:oklch(0.32 0.07 var(--h));color:oklch(0.88 0.1 var(--h))}
/* 일하는 중: 아이콘이 천천히 숨 쉰다 */
.cic.run .ico{animation:breathe 1.6s ease-in-out infinite}
/* 일하는 중 = 기본 캐릭터가 통통 뛴다 · 기다리는 중 = 가만히(봇 목록 · 대화 목록 · 대화 안 「지금」 줄이 같은 규칙) */
.stat.char-stat,.cic.cchar{background:none}.stat.char-stat .char,.cic.cchar .char{width:100%;height:100%}
.char.hop{animation:hop 1.1s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px) rotate(-6deg)}60%{transform:translateY(-4px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.char.hop{animation:none}}
@keyframes breathe{50%{opacity:.35}}
.seg a .marks{display:inline-flex;gap:3px}.seg a .marks:empty{display:none}
.seg a .n.new,.hseg .n.new{background:var(--accent);color:#fff}
.hseg .hm{display:inline-flex;align-items:center;gap:4px}
.hseg .rdot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--ok);animation:breathe 1.6s ease-in-out infinite}
.hseg button{gap:5px}
/* 대화 체크(확인함) — 누르면 「확인한 대화」로 */
.ccheck{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--surface3);background:none;color:transparent;display:grid;place-items:center;font-size:15px;padding:0}
.ccheck.on{background:var(--surface3);border-color:var(--surface3);color:var(--dim)}
@media (hover:hover){.ccheck:not(.on):hover{border-color:var(--ok);color:var(--ok)}}
.ccheck:active{transform:scale(.92)}
/* 마우스가 있으면 체크 버튼은 줄에 올렸을 때만 — 자리도 안 차지하고(오른쪽 빈 여백 없게), 올리면 상태 칩 자리가 체크 버튼이 된다(휴대폰은 늘 보임) */
@media (hover:hover){
  .crow .ccheck{display:none}
  .crow:hover .ccheck{display:grid}
  .crow:hover .cst:has(~ .ccheck){display:none}
}
.note .btns{display:flex;margin-top:8px}.note [data-resume]{flex:0 0 auto;width:auto;height:34px;padding:0 14px;font-size:13px}
.watch .tag svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
.item .h .ackb{flex:none;height:26px;padding:0 10px;font-size:12px;color:var(--text);background:var(--surface2);border-radius:13px}
.rrow .ackb{flex:none;height:30px;font-size:12.5px}
.item .more .acts-in{display:flex;gap:6px;margin-right:auto}
.item .more .ackb{flex:none;height:28px;padding:0 10px;font-size:12px;font-weight:600;color:var(--text);background:var(--surface2);border-radius:14px}
.rows.muted .rrow .bd,.rows.muted .rrow>.stat{opacity:.5}

/* [봇 | 대화] — 칠한 칸이 미끄러진다(봇 상세 탭과 같은 움직임) */
.hseg{position:relative}
.hseg .hseg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / 3);border-radius:9px;background:var(--surface3);transition:transform .26s var(--ease)}
.hseg[data-on="chats"] .hseg-ind{transform:translateX(calc(100% + 4px))}
.hseg[data-on="notes"] .hseg-ind{transform:translateX(calc(200% + 8px))}
.hseg button{position:relative;z-index:1;transition:color .2s var(--ease)}
.hseg button.on{background:none}
#hbody.tab-in-r,#sbody.tab-in-r{animation:tab-in-r .26s var(--ease) backwards}
#hbody.tab-in-l,#sbody.tab-in-l{animation:tab-in-l .26s var(--ease) backwards}
/* 같은 탭 안(대화 목록 ↔ 대화)은 옅게 · 화면 전체(봇 ↔ 봇)는 움직임 없이 바로 바꾼다 — 옅게 하면 글자가 깜빡여 보인다(10/23) */
#tab.tab-fade{animation:tab-fade .18s var(--ease) backwards}
@keyframes tab-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hseg .hseg-ind,#tab,#hbody,#sbody{transition:none!important;animation:none!important}}
/* 어시미 로고 — 메인 캐릭터 + 이름 */
.app{display:flex;align-items:center;gap:6px}
.app .logo{width:22px;height:22px;object-fit:contain}
.side-top .app .logo{width:20px;height:20px}
/* 어시미 캐릭터 자리 */
.char{object-fit:contain;flex:none;pointer-events:none;user-select:none}
.empty .char.big{display:block;width:96px;height:96px;margin:0 auto 10px}
.char.toast{width:24px;height:24px;margin-right:6px;vertical-align:-6px}
.nowl .char{width:26px;height:26px;margin:-4px 0}
.approval .q .char{width:30px;height:30px;margin:-6px 2px -6px -2px}
.note .char{width:30px;height:30px;float:left;margin:-4px 8px 0 -2px}
.rrow .t .pill{white-space:nowrap}
.summary.has-char{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.summary.has-char > .big{grid-column:2}
.summary.has-char > :not(.char):not(.big){grid-column:1 / -1}   /* 아래 줄(시간 등)은 왼쪽 끝부터 */
.char.sum{grid-column:1;grid-row:1;width:28px;height:28px}
/* 첫 화면 봇 목록 — 대화 목록처럼 한 줄씩(아이콘 · 이름 · 지금 한 줄 · 꼬리표) */
.brow .tags{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:42%}
.brow .tag{padding:2px 7px;border-radius:6px;background:var(--surface2);color:var(--dim);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap}
.brow .tag.warn{background:var(--warn-bg);color:var(--warn)}.brow .tag.fail{background:var(--bad-bg);color:var(--bad)}.brow .tag.new{background:var(--accent-bg);color:var(--accent-ink)}
.brow .t .ptag{font-size:11px;padding:1px 6px}
.brow .s .pill{font-size:11px}
.cgrp .n.dim{color:var(--faint);font-weight:700}
#side .cgrp{margin:14px 4px 6px}

/* 대화의 사진 줄(봇 Claude 가 찍은 화면) — 가로로 넘기는 썸네일 · 누르면 전체 화면에서 옆으로 */
.msg-ai .shots{display:flex;gap:8px;overflow-x:auto;margin:10px -2px 0;padding:2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.msg-ai .shot{flex:none;width:112px;height:200px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface2);scroll-snap-align:start}
.msg-ai .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.msg-ai .shotcap{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:var(--faint)}
.shotview{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;flex-direction:column}
.shotview .pager{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.shotview .pg{flex:none;width:100%;height:100%;overflow-y:auto;scroll-snap-align:center;display:flex;justify-content:center;padding:calc(56px + env(safe-area-inset-top)) 12px calc(36px + env(safe-area-inset-bottom))}
.shotview .pg img{max-width:min(100%,520px);height:auto;align-self:flex-start;border-radius:12px}
.shotview .close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:40px;height:40px;border-radius:20px;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-size:20px}
.shotview .dots{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:6px}
.shotview .dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}.shotview .dots i.on{background:#fff}

/* 설정 · 프로젝트 색 — 색마다 캐릭터를 하나씩 놓고 고른다 */
.pcolor .t .ptag{margin-right:8px}.pcolor .t .dim{font-size:13px;font-weight:500;color:var(--dim)}
.pcolor .swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pcolor .swatch{width:42px;height:42px;padding:3px;border-radius:12px;border:2px solid transparent;background:var(--surface2);display:grid;place-items:center}
.pcolor .swatch img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.pcolor .swatch.on{border-color:var(--accent-ink)}

/* 첫 화면 머리: [봇 | 대화] 탭까지 같이 고정 */
.top.home{flex-wrap:wrap}
.top.home .hseg{flex-basis:100%;margin-top:14px}
/* 새로 받은 글이 바뀐 곳만 살짝 밝아졌다 돌아온다 */
.swap-flash{animation:swap-flash .9s var(--ease)}
@keyframes swap-flash{from{opacity:.35}}
@media (prefers-reduced-motion:reduce){.swap-flash{animation:none}}

/* 코드 블록 복사 단추(md) — 오른쪽 위 */
.codeb{position:relative}.codeb pre.code{padding-right:58px}
.code-copy{position:absolute;top:6px;right:6px;border:0;border-radius:8px;background:var(--surface3);color:var(--dim);font-family:inherit;font-size:12px;font-weight:600;line-height:1;padding:6px 9px}
.code-copy:active{opacity:.6}
html.quiet .in{animation:none!important}   /* 20초 새로 받기로 다시 그릴 때는 떠오르지 않는다 */

/* 앞에 뭐가 떠 있으면(아래 시트 · 사진 보기) 뒤 화면은 안 움직인다 — 손가락 막기는 app.js 의 touchmove
   overflow:hidden 은 마우스 기기만: iOS 는 이것을 걸면 뒤 화면이 맨 위로 튀었다가 닫을 때 돌아온다(10/24 시뮬레이터) */
@media (pointer: fine){html.locked,html.locked body{overflow:hidden}}
.shotview{overscroll-behavior:contain;touch-action:pan-x}

/* 봇 추가(목록 아래) · 봇 추가 창 · 봇 끝내기 확인 */
.addbot{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:12px 14px;border-radius:var(--rr);
  border:1.5px dashed var(--line);background:none;color:var(--dim);font-size:14.5px;font-weight:700}
.addbot:active{background:var(--surface2)}
.addbot .ico{font-size:17px}
.sheet-sub{color:var(--dim);font-size:13.5px;margin:0 0 12px}
.field.nb{margin-bottom:14px}
.field.nb textarea.input{resize:none;font-family:inherit;line-height:1.45}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.picks .chip{background:var(--surface2)}
.picks .chip.acc{background:var(--accent-bg);color:var(--accent-ink)}
.sheet-acts{display:flex;gap:8px}
.approval .btns .keep{flex:1.4;gap:4px;white-space:nowrap}
.approval .btns .keep svg{width:14px;height:14px;opacity:.7}

/* 알림 목록 — 안 읽음은 또렷하게 · 읽음은 옅게 · 오른쪽에 언제 */
.crow.note .bd .s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.crow.note .nago{flex:none;align-self:flex-start;margin-top:2px;font-size:12px;color:var(--faint)}
.crow.note:not(.read) .bd .t{font-weight:800}
.crow.note:not(.read) .nago{color:var(--accent);font-weight:700}
.crow.note.read{opacity:.55}
.cgrp .note-all{margin-left:auto;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;font-size:12.5px;padding:2px 4px;cursor:pointer}
/* 항목의 흐름 — 분석·후속 확인·대화가 시간순 상자로(11/3) */
.flow{background:var(--surface);border-radius:var(--r);padding:4px}
.flow details{border-radius:var(--rr)}
.flow summary{list-style:none;cursor:pointer;padding:12px;border-radius:var(--rr)}
.flow summary::-webkit-details-marker{display:none}
.flow summary:active{background:var(--surface2)}
.flow-i summary{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline}
.flow-i .k{font-size:12.5px;font-weight:700;color:var(--accent-ink)}
.flow-i .w{font-size:12.5px;color:var(--faint);justify-self:end}
.flow-i .h{grid-column:1/-1;font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flow-i[open] .h{-webkit-line-clamp:unset;font-weight:600}
.flow-i.busy .h{color:var(--dim)}
.flow-i .doc{padding:0 12px 10px;font-size:14px}
.flow-i > .chip{margin:0 12px 12px}
.flow-i + .flow-i,.flow .more{border-top:1px solid var(--line)}
.flow .more > summary{font-size:13px;font-weight:700;color:var(--faint)}
.issue-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--dim)}
/* 알림이 가리킨 곳 — 잠깐 테두리가 번진다(왼쪽 띠 아님) */
.hl{animation:hl 2.4s var(--ease) 1}
@keyframes hl{0%,30%{box-shadow:0 0 0 3px var(--accent-ink)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion: reduce){.hl{animation:none;box-shadow:0 0 0 3px var(--accent-ink)}}

/* 허락함(#/asks) · 봇 설정 › 허락 · 물어본 기록 (11/4) */
.ask-card .chev{margin-left:auto;color:var(--warn);font-size:18px}
.ask-card > div{min-width:0}
.ask-grp{background:var(--surface);border-radius:var(--r);padding:14px;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ask-h{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14.5px;min-width:0}
.ask-h > span:not(.ptag){color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ask-h em{font-style:normal;font-size:12px;color:var(--warn);flex:none}
.ask-sum{font-size:13px;line-height:1.5;color:var(--dim)}
.ask-card2{background:var(--warn-bg);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.ask-card2 .t{font-weight:800;font-size:14.5px;line-height:1.45}
.ask-card2 .s,.ask-card2 .why{font-size:12.5px;color:var(--warn)}
.ask-card2 pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,Menlo,monospace;background:oklch(0 0 0/.25);border-radius:10px;padding:8px 10px;max-height:30dvh;overflow:auto}
.ask-card2 .btns{display:flex;gap:6px}
.ask-card2 .btns .btn{flex:1;min-width:0;width:auto}
.ask-links{display:flex;gap:16px;font-size:13px;font-weight:600}
.ask-links a{color:var(--accent-ink)}
.allow-sum{display:block}
.rrow .s.warn{color:var(--warn)}
.rrow .s.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.rrow.asked{align-items:center}
.rrow.asked .t{display:block;margin-top:3px;font-size:14px;line-height:1.4}
.rrow.asked .s{white-space:normal}
.res{display:inline-block;margin-right:6px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface2);color:var(--dim)}
.res.ok{background:var(--ok-bg);color:var(--ok)}.res.bad{background:var(--bad-bg);color:var(--bad)}
.up-done{flex:none;font-size:12px;color:var(--faint);text-align:right;line-height:1.4}
.sec-h .more{font-size:13px;font-weight:600;color:var(--accent-ink)}
.sec-h .more.dim{color:var(--faint);font-weight:500}
.sec-h h2.sm{font-size:15px;color:var(--dim)}
.foot-note{font-size:12.5px;color:var(--faint);line-height:1.5;margin:14px 2px 0}
.retire-zone{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;padding-bottom:20px}
.retire-zone p{margin:0;font-size:12.5px;color:var(--faint);text-align:center;line-height:1.5}

/* 로그인·등록·승인 대기(people.js) */
.gate .empty{padding-top:16vh;color:var(--dim)}
.gate h2{margin:12px 0 6px;font-size:20px;color:var(--fg)}
html.gated #side{display:none}
html.gated #view{margin-left:0}
.gate p{margin:6px 0}
.chip.big{font-size:16px;padding:12px 28px;margin-top:8px}