/* [2026-09-25] 매뉴얼 화면 예시 — 실제 앱 화면(팀 막대, 사이드바, 탭 줄, 본문)을 그대로 옮기고, 그 위에서 자동 시연(guide-demo.js)이 도는 부품 모음 */

/* 두 칸 툴 목록 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 6px}
.tcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:15px 16px}
a.tcard{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
a.tcard:hover{border-color:color-mix(in srgb,var(--pink) 45%,var(--line));box-shadow:0 4px 14px rgba(20,22,30,.07)}
.tcard .th{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.tcard .dot{width:26px;height:26px;flex:none;border-radius:7px;background:color-mix(in srgb,var(--pink) 16%,var(--surface));color:var(--pink);display:grid;place-items:center;font-size:14px}
.tcard .dot svg{width:15px;height:15px;display:block}
.tcard .tt{font-size:14.5px;font-weight:750;color:var(--ink)}
.tcard p{margin:0;font-size:13.5px;color:var(--muted)}
.tcard .paid{font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--pink);border:1px solid color-mix(in srgb,var(--pink) 40%,transparent);border-radius:999px;padding:1px 7px;margin-left:auto}

/* ── 앱 화면 틀 — 항상 라이트모드, 실제 앱에서 잰 색 ── */
.shotwrap{overflow-x:auto;margin:2px 0 6px;scrollbar-width:thin;scrollbar-color:transparent transparent}
.shotwrap:hover{scrollbar-color:var(--line) transparent}
.shotwrap::-webkit-scrollbar{height:6px}
.shotwrap::-webkit-scrollbar-track{background:transparent}
.shotwrap::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.shotwrap:hover::-webkit-scrollbar-thumb{background:var(--line)}
.topnav{scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.shot{position:relative;border:1px solid #e6e4f1;border-radius:var(--radius);overflow:hidden;background:#fcfaff;box-shadow:0 10px 30px rgba(20,22,30,.10);min-width:560px;cursor:default}
.shot *{box-sizing:border-box}
.app{display:flex;min-height:300px;color:#1b1d24;font-size:12.5px;line-height:1.5}

/* 팀 막대 */
.rail{width:46px;flex:none;background:#eeecf9;border-right:1px solid #e6e4f1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 12px}
.rail .av{position:relative;width:32px;height:32px;border-radius:8px;background:#4a2be9;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:700}
.rail .av.dim{opacity:.45}
.rail .av .bdg{position:absolute;top:-4px;right:-4px;background:#c026d3;color:#fff;font-size:9px;font-weight:700;line-height:14px;padding:0 4px;border-radius:999px}
.rail .plus{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#9aa1ad;font-size:19px;line-height:0;transition:background .15s,color .15s}
.rail .plus.dh{background:#e2def3;color:#1b1d24}

/* 사이드바 */
.side{width:186px;flex:none;background:#eeecf9;border-right:1px solid #e6e4f1;padding:10px 8px;display:flex;flex-direction:column;gap:2px;position:relative}
.side .sh{display:flex;align-items:center;gap:6px;padding:0 4px;margin-bottom:8px;font-size:13px;font-weight:700;color:#1b1d24}
.side .sh .ics{margin-left:auto;display:flex;gap:6px}
.side .grp{color:#3a3f49;font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:10px;padding:3px 8px}
.side .grp:first-child{margin-top:0}
.side .grp .plusmini{margin-left:auto;color:#767c86;font-size:15px;line-height:0;padding:0 2px;opacity:0;transition:opacity .15s}
.side .grp.dh .plusmini,.side .grp .plusmini.dh,.side .grp .plusmini.on{opacity:1}
.side .li{color:#52575f;font-size:12.5px;display:flex;gap:6px;align-items:center;padding:3px 8px;border-radius:6px;position:relative}
.side .li.sub{padding-left:14px}
.side .li.sub.ic{padding-left:20px}
.side .li.sel{background:#d9d2f5;color:#1b1d24;font-weight:600}
.side .li.dh{background:#e4e0f4}
.side .li .bdg{margin-left:auto;background:#c026d3;color:#fff;font-size:10px;font-weight:600;line-height:15px;padding:0 6px;border-radius:999px}
.side .li .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#c026d3}
.side .li .pinm{font-size:12px;line-height:1}
.side .add{color:#9aa1ad;font-size:12px;padding:4px 8px 4px 20px;border-radius:6px}
.side .add.dh{background:#e4e0f4;color:#3a3f49}
/* 아이콘(실제 앱과 같은 lucide, 보라색). data-ic 로 고른다 */
.ic::before{content:"";display:inline-block;vertical-align:-2px;flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;color:#b93fc4}
.ic.gray::before{color:#9aa1ad}
.ic.ink::before{color:#3a3f49}
.ic.white::before{color:#fff}
.ic.sm::before{width:12px;height:12px}
.ic.lg::before{width:16px;height:16px}
.icn{display:inline-flex;align-items:center;gap:5px}

/* 본문 */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.main.center{justify-content:center;align-items:center}
.tabbar{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e6e4f1}
.tabbar .tab{display:inline-flex;align-items:center;gap:6px;height:44px;padding-top:2px;border-bottom:2px solid #4a2be9;font-size:13px;font-weight:600;color:#1b1d24;white-space:nowrap}
.tabbar .tab.dv.on{animation:none}
.tabbar .tabx{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:#9aa1ad;margin-left:2px}
.tabbar .tabx.dh{background:#e7e3f6;color:#52575f}
.tabbar .tplus{color:#c9c6d6;display:inline-flex}
.tabbar .ticons{margin-left:auto;display:flex;align-items:center;gap:10px;color:#9aa1ad}
.tabbar .ticons .ic::before{color:#9aa1ad}
.pbtn{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;white-space:nowrap;transition:transform .12s,filter .15s}
.pbtn.dh{filter:brightness(1.06)}
.pbtn .arr{padding-left:6px;margin-left:2px;border-left:1px solid rgba(255,255,255,.35)}
.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px;position:relative}
.body.tight{padding:0}
.empty{text-align:center;color:#767c86;font-size:12.5px;line-height:1.95;margin:auto}
.empty b{color:#3a3f49}
.empty .dim{color:#9aa1ad}
.empty .big{font-size:22px;display:block;margin-bottom:4px}
.card{border:1px solid #e6e4f1;border-radius:10px;height:50px;display:grid;place-items:center;color:#767c86;font-size:11.5px;margin-bottom:12px}
.cap-under{font-size:12.5px;color:var(--muted);margin:8px 2px 0;text-align:center}
.subtabs{display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid #e6e4f1;flex:none}
.subtabs>span{padding:9px 0;font-size:12.5px;color:#767c86;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.subtabs>span.on{color:#1b1d24;font-weight:600;border-bottom:2px solid #4a2be9;margin-bottom:-1px}
.subtabs>span.dh{color:#1b1d24}
.subtabs .r{margin-left:auto;display:flex;gap:10px;color:#9aa1ad;font-size:11px}
.bdg{display:inline-flex;align-items:center;background:#c026d3;color:#fff;font-size:10px;font-weight:600;line-height:15px;padding:0 6px;border-radius:999px}
.seg{display:inline-flex;border:1px solid #e6e4f1;border-radius:6px;overflow:hidden;font-size:11.5px}
.seg span{padding:3px 9px;color:#767c86;background:#fff;border-left:1px solid #e6e4f1}
.seg span:first-child{border-left:0}
.seg span.on{background:#d9d2f5;color:#1b1d24;font-weight:600}
.shot .chip{display:inline-flex;align-items:center;gap:3px;border:1px solid #e6e4f1;background:#fff;border-radius:999px;padding:2px 9px;font-size:11px;color:#52575f}
.tag{display:inline-block;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600}
.pill{display:inline-block;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600;color:#fff}
.ava{flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;width:30px;height:30px;font-size:10px}
.ava.s{width:20px;height:20px;font-size:8px}
.ava.xs{width:16px;height:16px;font-size:7px}

/* 대화 */
.msgs{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;padding-bottom:24px}
.datechip{align-self:center;border:1px solid #e6e4f1;background:#fff;border-radius:999px;padding:1px 10px;font-size:11px;color:#767c86}
.msg{display:flex;gap:9px;align-items:flex-start}
.msg .mn{font-size:12.5px;font-weight:600;color:#1b1d24;margin-bottom:3px}
.msg .mn span{font-weight:400;color:#9aa1ad;font-size:11px;margin-left:6px}
.msg .brow{display:flex;align-items:flex-end;gap:6px}
.msg .bub{position:relative;display:inline-block;background:#f0eef8;border-radius:8px;padding:6px 11px;font-size:13px;color:#1b1d24;max-width:420px}
.msg .bub.dh{background:#ece8fd;box-shadow:0 0 0 1px #c9bdf7}
.msg .read{font-size:11px;color:#9aa1ad;padding-bottom:2px}
.msg .file{display:inline-flex;align-items:center;gap:6px;margin-top:5px;border:1px solid #e6e4f1;background:#fff;border-radius:8px;padding:5px 9px;font-size:12px;color:#3a3f49}
/* 메시지 아래 답장 수 — 실제 화면과 같이 「답장 N」 + 마지막 시각 + 오른쪽 끝 화살표 */
.msg .replies{display:flex;align-items:center;gap:7px;margin-top:5px;padding-top:5px;border-top:1px solid #e6e4f1;font-size:12px;color:#6d28d9;width:fit-content;min-width:180px}
.msg .replies b{font-weight:700}
.msg .replies .t{font-size:11px;color:#9aa1ad;font-weight:400}
.msg .replies .chev{margin-left:auto;color:#9aa1ad;font-size:13px}
.mention{background:#ede9fe;color:#5b21b6;border-radius:4px;padding:0 4px;font-weight:500}
.tcard2{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;border:1px solid #e6e4f1;background:#fff;border-radius:8px;padding:6px 10px;font-size:13px}
/* 말풍선 아래 오른쪽에 붙는 액션 바 */
.abar{position:absolute;right:0;top:calc(100% - 2px);display:flex;align-items:center;gap:1px;padding:3px 4px;background:#fff;border:1px solid #e6e4f1;border-radius:8px;box-shadow:0 6px 16px rgba(18,8,60,.16);opacity:0;pointer-events:none;transition:opacity .2s;z-index:3}
.abar.on{opacity:1}
.abar span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;color:#9aa1ad;font-size:13px}
.abar span.dh{background:#f1eff8;color:#3a3f49}
.abar span.dp{background:#4a2be9;color:#fff}
.abar .sep{width:1px;height:14px;background:#e6e4f1;margin:0 3px}
.composer{margin-top:auto;border-top:1px solid #e6e4f1;padding:10px 12px 10px;flex:none;position:relative}
.composer .crow{display:flex;align-items:center;gap:8px}
.composer .inp{flex:1;font-size:12.5px;color:#9aa1ad;min-height:19px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.composer .hint{display:flex;gap:4px}
.composer .hint span{border:1px solid #e6e4f1;border-radius:4px;padding:1px 6px;font-size:10px;color:#9aa1ad}
.composer .cbtns{display:flex;align-items:center;gap:10px;margin-top:8px;color:#9aa1ad}
.composer .send{margin-left:auto;background:linear-gradient(90deg,#7c3aed,#c026d3);color:#fff;border-radius:6px;padding:3px 12px;font-size:12px;font-weight:600;transition:transform .12s}
.composer .send.dp,.pbtn.dp,.rprimary.dp,.makebtn.dp,.kcard.dp,.mk.dp,.toast.dp,.trow.dp,.menu div.dp,.nrow.dp,.ev.dp,.frow-item.dp{transform:scale(.96)}
/* 입력창 위에 뜨는 멘션 고르기 */
.pop{position:absolute;left:12px;bottom:calc(100% - 4px);background:#fff;border:1px solid #e6e4f1;border-radius:10px;padding:5px;min-width:200px;box-shadow:0 12px 30px rgba(20,22,30,.18);font-size:12.5px;z-index:4;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .18s,transform .18s}
.pop.on{opacity:1;transform:none}
.pop.down{top:calc(100% + 2px);bottom:auto;left:70px}
.pop .cb{width:14px;height:14px;border:1.5px solid #cfd3da;border-radius:4px;display:grid;place-items:center;font-size:9px;color:#fff;flex:none}
.pop .cb.on{background:#7c3aed;border-color:#7c3aed}
.dragging{position:relative;z-index:9;box-shadow:0 14px 30px rgba(74,43,233,.22)!important;border-color:#c4b5fd!important}
.pop div{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:#1b1d24}
.pop div.dh,.pop div.msel{background:#ede9fe}
.pop .dept{margin-left:auto;color:#9aa1ad;font-size:11px}
/* 오른쪽에 열리는 답장(스레드) 패널 */
.thread{position:absolute;top:0;right:0;bottom:0;width:250px;background:#fff;border-left:1px solid #e6e4f1;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,1,.36,1);z-index:5}
.thread.on{transform:none}
.thread .th{height:44px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #e6e4f1;font-size:13px;font-weight:600}
.thread .th .dv{display:none}
.thread .th .dv.on{display:inline}
.thread .th .x{margin-left:auto;color:#9aa1ad}
.thread .tb{padding:12px;display:flex;flex-direction:column;gap:12px;flex:1}
.thread .tb .msg .bub{max-width:100%}
.thread .composer{margin-top:auto}
/* 시연 중 나타나는 줄(메시지, 댓글, 목록 항목)은 위에서 살짝 내려오며 뜬다 */
.dv:not(.on){display:none!important}
.dv.on{animation:dvin .32s ease-out}
@keyframes dvin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dnone{display:none!important}

/* 칸반 */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-height:0}
.kcol{background:#f4f2fb;border-radius:10px;padding:8px;min-width:0}
.kcol .kh{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11.5px;color:#9aa1ad;font-weight:600}
.kcol .kh .plusmini{margin-left:auto;color:#c9c6d6;font-size:14px;line-height:0}
.kcard{background:#fff;border:1px solid #e6e4f1;border-radius:9px;padding:9px 10px;font-size:12px;color:#1b1d24;margin-bottom:7px;transition:transform .15s,box-shadow .15s,border-color .15s}
.kcard.dh{transform:translateY(-2px);box-shadow:0 8px 20px rgba(74,43,233,.14);border-color:#c4b5fd}
.kcard .kt{display:flex;gap:6px;align-items:flex-start;font-weight:500;line-height:1.35}
.kcard .kt.done{color:#9aa1ad;text-decoration:line-through;font-weight:400}
.kcard .km{display:flex;align-items:center;gap:5px;margin-top:7px;flex-wrap:wrap}
.kcard .kf{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;color:#52575f}
.kcard .kf .due{margin-left:auto;color:#9aa1ad}
.kcard .kf .due.warn{color:#d97706;font-weight:600}
.quick{display:flex;align-items:center;gap:8px;border-top:1px solid #e6e4f1;padding:9px 16px;font-size:12px;color:#9aa1ad;flex:none}
.quick .r{margin-left:auto;display:flex;gap:10px;font-size:11px;color:#767c86}
/* 할 일 상세 */
.detail{display:flex;flex:1;min-height:0}
.detail .dmain{flex:1;padding:14px 16px;min-width:0}
.detail .dside{width:190px;flex:none;border-left:1px solid #e6e4f1;padding:12px;display:flex;flex-direction:column;gap:10px}
.detail h4{margin:0 0 8px;font-size:16px;font-weight:700}
.prow{display:flex;align-items:center;gap:8px;font-size:12px;min-height:24px}
.prow .k{background:none;border:0;padding:0;color:#9aa1ad;font-weight:400;font-size:12px;width:52px;flex:none}
.prow .v{display:flex;align-items:center;gap:5px;color:#3a3f49}
.cmt{display:flex;gap:7px;font-size:12px}
.cmt .cb{background:#f4f2fb;border-radius:8px;padding:5px 9px;color:#1b1d24}
.cmt .cn{font-size:11px;color:#767c86;margin-bottom:2px}
.cmt .cn b{color:#1b1d24;font-weight:600;margin-right:4px}
.chk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#3a3f49}
.chk .bx{width:14px;height:14px;border:1px solid #cfd3da;border-radius:3px;display:grid;place-items:center;font-size:9px;color:#059669;background:#fff}
.chk.done{color:#9aa1ad;text-decoration:line-through}

/* 내 메시지 */
.frow{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:11px;color:#767c86;flex:none}
.frow .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.nrow{border-radius:8px;padding:6px 9px;margin:0 8px 3px;transition:background .15s}
.nrow.me{background:#f3eefd}
.nrow.dh{background:#ece8fd}
.nrow .nh{display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;min-width:0}
.nrow .nh b{color:#1b1d24;font-weight:600}
.nrow .nh .t{color:#9aa1ad}
.nrow .nh .src{display:inline-flex;align-items:center;gap:4px;color:#767c86}
.nrow .nh .where{color:#9aa1ad;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.nrow .nh .udot{width:6px;height:6px;border-radius:50%;background:#c026d3;flex:none}
.nrow .nb{margin:4px 0 0 26px;background:rgba(255,255,255,.9);border-radius:6px;padding:5px 9px;font-size:12px;color:#3a3f49;line-height:1.5}
.nrow.me .nb{background:#fff}
/* PC 알림창 — 오른쪽 아래 */
.toast{position:absolute;right:14px;bottom:14px;width:290px;display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e6e4f1;border-radius:12px;padding:11px 12px;box-shadow:0 14px 40px rgba(18,8,60,.24);opacity:0;transform:translateX(40px);transition:opacity .32s,transform .32s ease-out,border-color .15s;z-index:6;pointer-events:none}
.toast.on{opacity:1;transform:none}
.toast.dh{border-color:#c4b5fd}
.toast .tico{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#e857b0,#b20088);display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none}
.toast .tm{font-size:10.5px;color:#9aa1ad;display:flex;gap:6px}
.toast .tm b{color:#52575f;font-weight:600}
.toast .tt{font-size:12.5px;font-weight:600;color:#1b1d24;margin-top:1px}
.toast .td{font-size:11.5px;color:#52575f;line-height:1.4;margin-top:1px}

/* 사이드바, 헤더 드롭다운 */
.menu{position:absolute;background:#fff;border:1px solid #e6e4f1;border-radius:10px;padding:5px;min-width:150px;font-size:12.5px;color:#3a3f49;box-shadow:0 12px 30px rgba(20,22,30,.18);z-index:7;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .18s,transform .18s}
.menu.on{opacity:1;transform:none}
.menu div{padding:6px 9px;border-radius:6px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.menu div.dh,.menu .msel{background:#ede9fe;color:#1b1d24}
.menu .sep{height:1px;background:#e6e4f1;margin:4px 4px;padding:0}
.menu .cap{padding:4px 9px 2px;font-size:10.5px;color:#9aa1ad;font-weight:600}

/* 화면 위에 뜨는 창(모달) — 앱 화면 안에 겹쳐 뜬다 */
.mlayer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(24,20,45,.38);opacity:0;pointer-events:none;transition:opacity .26s ease-out;z-index:8}
.mlayer.on{opacity:1}
.mlayer>*{width:100%;max-width:430px;max-height:100%;overflow:auto;transition:opacity .26s ease-out,transform .26s ease-out;opacity:0;transform:translateY(10px) scale(.985)}
.mlayer.on>*{opacity:1;transform:none}
.shot.measuring .mlayer{opacity:0;visibility:hidden}
.shot.measuring .mlayer>*{max-height:none;opacity:1;transform:none}
.shot.measuring .dv:not(.on){display:block!important}
.rmodal{background:#fff;border:1px solid #e6e4f1;border-radius:14px;padding:18px 20px 20px;color:#1b1d24;box-shadow:0 20px 50px rgba(20,22,30,.18);font-size:13px}
.rmodal .head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #eef0f3;margin-bottom:14px}
.rmodal .head .t{font-size:15px;font-weight:700;color:#1b1d24}
.rmodal .head .x{color:#9aa1ad;font-size:14px}
.rmodal .lbl{font-size:13px;font-weight:700;color:#1b1d24;margin:0 0 7px}
.rmodal .lbl .opt{color:#9aa1ad;font-weight:500;font-size:12px;margin-left:5px}
.rmodal .lbl .req{color:#f0637a}
.rsub{color:#767c86;font-size:12.5px;margin:0 0 12px}
.namerow{display:flex;gap:9px;margin-bottom:16px}
.emoji{width:40px;height:40px;flex:none;border:1px solid #dfe1e6;border-radius:9px;display:grid;place-items:center;color:#767c86;font-size:16px}
.tinput{flex:1;border:1px solid #cfd3da;border-radius:9px;background:transparent;min-height:40px;padding:0 12px;display:flex;align-items:center;color:#9aa1ad;font-size:13.5px}
.tinput.focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.14)}
.tinput.area{min-height:64px;align-items:flex-start;padding:10px 12px}
.togrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tog{width:36px;height:20px;border-radius:999px;background:#cfd3da;flex:none;position:relative;transition:background .2s}
.tog::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.tog.on{background:#7c3aed}
.tog.on::after{transform:translateX(16px)}
.togtxt{font-size:12.5px;color:#767c86}
.togtxt b{color:#1b1d24;font-weight:600}
.selbox{border:1px solid #cfd3da;border-radius:9px;min-height:40px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:#1b1d24;font-size:13px;margin-bottom:14px}
.selbox.ph{color:#9aa1ad}
.selbox .chev{color:#9aa1ad;font-size:11px}
.makebtn{width:100%;text-align:center;border-radius:10px;padding:11px;font-size:13.5px;font-weight:700;background:#1b1d24;color:#fff;transition:transform .12s}
.rbtns{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:6px}
.rghost{color:#767c86;font-size:13px;font-weight:600}
.rprimary{background:#1b1d24;color:#fff;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;transition:transform .12s,filter .15s}
.rprimary.dh{filter:brightness(1.25)}
.rprimary.green{background:#10b981}
.opts{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.opt-row{border:1px solid #cfd3da;border-radius:9px;padding:9px 12px;font-size:13px;display:flex;justify-content:space-between;color:#1b1d24;transition:border-color .15s,background .15s}
.opt-row .d{color:#9aa1ad}
.opt-row.on,.opt-row.dh{border-color:#7c3aed;background:#f8f5ff}
.segbtns{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.segbtns span{border:1px solid #cfd3da;border-radius:8px;padding:5px 11px;font-size:12.5px;color:#1b1d24;transition:background .15s,color .15s,border-color .15s}
.segbtns span.on{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:600}
.segbtns span.dh{border-color:#7c3aed}
.days{display:flex;gap:5px;margin-bottom:14px;flex-wrap:wrap}
.days span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;border:1px solid #cfd3da;color:#767c86}
.days span.on{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:600}
.fld{display:flex;align-items:center;gap:10px;min-height:36px;border-bottom:1px solid #eef0f3;font-size:13px}
.fld .k{width:60px;flex:none;color:#9aa1ad;background:none;border:0;padding:0;font-weight:400;font-size:12.5px}
.fld .v{display:flex;align-items:center;gap:6px;color:#1b1d24}
.fld:last-child{border-bottom:0}
.fld.dh{background:#faf8ff}

/* 표 모양 목록(게시판, 북마크, 멤버) */
.tbl{border:1px solid #e6e4f1;border-radius:9px;overflow:hidden;background:#fff;font-size:12px}
.trow{display:grid;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #eef0f3;color:#1b1d24;transition:background .15s}
.trow:first-child{border-top:0}
.trow.hd{background:#f7f6fb;color:#767c86;font-size:11px;font-weight:600}
.trow.dh{background:#f8f5ff}
.trow .mu{color:#9aa1ad}
.trow .ttl{font-weight:500;display:flex;align-items:center;gap:6px;min-width:0}
.trow .ttl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{display:inline-flex;align-items:center;gap:5px;color:#52575f;white-space:nowrap;min-width:0}
.trow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 달력 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:minmax(44px,1fr);gap:1px;background:#e6e4f1;border:1px solid #e6e4f1;border-radius:9px;overflow:hidden;flex:1;min-height:0}
.cal .wd{background:#f7f6fb;text-align:center;color:#9aa1ad;font-size:10px;padding:4px 0}
.cal .cd{background:#fff;min-height:44px;color:#9aa1ad;font-size:10px;padding:3px 4px;display:flex;flex-direction:column;gap:2px;transition:background .15s}
.cal .cd.today{color:#4a2be9;font-weight:700}
.cal .cd.dh{background:#f8f5ff}
.cal .cd.o{color:#d1d5db}
.ev{display:block;border-radius:4px;padding:1px 5px;font-size:9.5px;font-weight:500;color:#6d28d9;background:#f3eefd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow .15s}
.ev.warn{color:#b45309;background:#fef3c7}
.ev.leave{color:#0369a1;background:#e6f4ff}
.ev.dh{box-shadow:0 0 0 1px #c4b5fd}
.calbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11.5px;color:#52575f;flex:none}
.calbar .dt{border:1px solid #e6e4f1;background:#fff;border-radius:6px;padding:3px 8px;font-weight:500;color:#1b1d24}
.calbar .btn{border:1px solid #e6e4f1;background:#fff;border-radius:6px;padding:3px 8px}

/* 두 칸 화면(결재, 연차, 파일박스, 타임라인) */
.two{display:flex;flex:1;min-height:0}
.two .lpane{width:180px;flex:none;border-right:1px solid #e6e4f1;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.two .rpane{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;gap:8px;position:relative}
.lpane .cap{font-size:10.5px;font-weight:600;color:#9aa1ad;margin:4px 0 2px}
.lpane .row{padding:5px 8px;border-radius:6px;color:#3a3f49;display:flex;align-items:center;gap:6px}
.lpane .row.sel{background:#d9d2f5;color:#1b1d24;font-weight:600}
.lpane .row.dh{background:#e4e0f4}
.lpane .row .mu{color:#9aa1ad;font-size:11px;margin-left:auto}
.doc{border:1px solid #e6e4f1;border-radius:10px;background:#fff;padding:11px 13px;font-size:12px;color:#3a3f49;transition:box-shadow .15s,border-color .15s}
.doc.dh{border-color:#c4b5fd;box-shadow:0 6px 16px rgba(74,43,233,.12)}
.doc .dt{font-size:13px;font-weight:600;color:#1b1d24}
.doc .dm{color:#9aa1ad;font-size:11px}
.stamps{display:flex;gap:8px}
.stamp{width:62px;border:1px solid #cfd3da;border-radius:6px;text-align:center;font-size:10px;color:#767c86;overflow:hidden}
.stamp .sn{border-bottom:1px solid #cfd3da;padding:2px 0;background:#f7f6fb;font-weight:600;color:#3a3f49}
.stamp .sv{height:34px;display:grid;place-items:center}
.stamp .sv .ok{width:26px;height:26px;border:2px solid #dc2626;border-radius:50%;color:#dc2626;font-size:10px;font-weight:800;display:grid;place-items:center;transform:rotate(-12deg)}
.stamp .sv .ok.dv.on{animation:stampin .35s cubic-bezier(.2,1.4,.5,1)}
@keyframes stampin{from{transform:rotate(-12deg) scale(1.8);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}
.leftbtns{display:flex;gap:8px;justify-content:flex-end}
.okbtn{background:#10b981;color:#fff;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;transition:transform .12s}
.nobtn{border:1px solid #cfd3da;color:#3a3f49;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600}
.okbtn.dp{transform:scale(.96)}
.statbox{border:1px solid #e6e4f1;border-radius:10px;padding:9px 11px;background:#fff}
.statbox .k{font-size:10.5px;color:#9aa1ad;font-weight:600;background:none;border:0;padding:0}
.statbox .n{font-size:18px;font-weight:800;color:#1b1d24}
.statbox .n small{font-size:11px;font-weight:600;color:#767c86}
.filerow{display:flex;align-items:center;gap:8px;border:1px solid #e6e4f1;border-radius:9px;padding:8px 11px;background:#fff;font-size:12.5px;color:#1b1d24;transition:background .15s,border-color .15s}
.filerow .mu{margin-left:auto;color:#9aa1ad;font-size:11px}
.filerow.dh{border-color:#c4b5fd;background:#faf8ff}
.filerow.drop{border-style:dashed;color:#9aa1ad;justify-content:center;background:transparent}
.filerow.drop.on{border-color:#7c3aed;background:#f8f5ff;color:#6d28d9}
.urlbox{display:flex;align-items:center;gap:8px;border:1px solid #e6e4f1;border-radius:8px;padding:6px 10px;background:#f7f6fb;font-size:11.5px;color:#52575f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.urlbox .cp{margin-left:auto;font-family:inherit;border:1px solid #cfd3da;background:#fff;border-radius:6px;padding:2px 8px;font-size:11px;color:#3a3f49}
.urlbox .cp.on{background:#10b981;border-color:#10b981;color:#fff}

/* 툴 추가하기(툴 장터) */
.mkt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk{border:1px solid #e6e4f1;border-radius:10px;background:#fff;padding:11px 12px;font-size:12px;transition:transform .15s,box-shadow .15s,border-color .15s}
.mk.dh{transform:translateY(-2px);border-color:#c4b5fd;box-shadow:0 8px 20px rgba(74,43,233,.14)}
.mk .mh{display:flex;align-items:center;gap:7px;font-weight:600;color:#1b1d24;margin-bottom:4px}
.mk .mh .dot{width:24px;height:24px;border-radius:7px;background:#f3eefd;color:#7c3aed;display:grid;place-items:center}
.mk .mh .dot::before{color:#7c3aed}
.mk p{margin:0;color:#767c86;font-size:11.5px;line-height:1.45}
.mk .paid{margin-left:auto;font-size:9.5px;font-weight:800;color:#b20088;border:1px solid rgba(178,0,136,.4);border-radius:999px;padding:0 6px}

/* 통합 검색 창 */
.smodal{background:#fff;border:1px solid #e6e4f1;border-radius:14px;box-shadow:0 20px 50px rgba(20,22,30,.22);padding:12px 14px;max-width:480px}
.smodal .sin{display:flex;align-items:center;gap:9px;border:1px solid #7c3aed;border-radius:10px;padding:9px 12px;box-shadow:0 0 0 3px rgba(124,58,237,.14);font-size:13.5px;color:#1b1d24}
.smodal .sin .ph{color:#9aa1ad}
.smodal .chips{display:flex;gap:6px;margin:10px 0}
.smodal .res{border-top:1px solid #eef0f3}
.srow{display:flex;align-items:center;gap:9px;padding:9px 6px;border-bottom:1px solid #eef0f3;font-size:12.5px;color:#3a3f49;border-radius:6px;transition:background .15s}
.srow:last-child{border-bottom:0}
.srow.dh{background:#f8f5ff}
.srow b{color:#1b1d24;font-weight:600}
.srow .hit{background:#fef08a;color:#1b1d24;border-radius:2px;padding:0 1px}
.srow .r{margin-left:auto;color:#9aa1ad;font-size:11px}
.bub .hit{background:#fef08a;border-radius:2px;padding:0 1px}

/* 노트 */
.ntitle{font-size:20px;font-weight:700;color:#1b1d24;margin:6px 0 10px;min-height:28px}
.ntitle.ph,.nline.ph{color:#c9c6d6}
.nline{font-size:13px;color:#3a3f49;min-height:20px;margin-bottom:6px}
.ntable{border:1px solid #e6e4f1;border-radius:6px;overflow:hidden;font-size:11.5px;margin:6px 0}
.ntable div{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid #eef0f3}
.ntable div:first-child{border-top:0;background:#f7f6fb;font-weight:600}
.ntable span{padding:4px 8px;border-left:1px solid #eef0f3}
.ntable span:first-child{border-left:0}
.ntree{font-size:12px;color:#3a3f49;display:flex;flex-direction:column;gap:2px}
.ntree .row{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:6px}
.ntree .row.sel{background:#d9d2f5;color:#1b1d24;font-weight:600}
.ntree .row.sub{padding-left:22px}
.ntree .row .more{margin-left:auto;color:#9aa1ad;opacity:0}
.ntree .row.dh .more,.ntree .row .more.dh{opacity:1}

/* 시연이 친 글자, 커서 */
.typed{color:#1b1d24!important}
.caret::after{content:"";display:inline-block;width:1.5px;height:1.05em;background:#7c3aed;margin-left:1px;vertical-align:-2px;animation:blink .9s step-end infinite}
@keyframes blink{50%{opacity:0}}
/* 바깥 칸은 자리 이동만, 안쪽 화살표 그림만 누를 때 줄어든다 — 둘을 한 요소에 걸면 축소가 이동값까지 줄여 커서가 원점 쪽으로 끌려간다 */
.dcur{position:absolute;left:0;top:0;z-index:20;pointer-events:none;opacity:0;transform:translate(0,0);transition:transform .65s ease-in-out,opacity .22s;will-change:transform}
.dcur.show{opacity:1}
.dcur svg{display:block;transform-origin:3px 2px;transition:transform .12s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.dcur.press svg{transform:scale(.86)}

/* 누르는 자리 강조 — 말풍선 없이 테두리만 (2026-09-25 사장님 지시로 「클릭」 말풍선 제거) */
.hl{outline:3px solid var(--hl);outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px var(--hl-soft)}
.relbox{position:relative}

@media (max-width:520px){
  .shot{min-width:520px}
}

/* ── 아이콘 데이터(lucide 원본 path, 스크립트로 뽑음) — .ic 와 함께 쓴다: <span class="ic i-bell"></span> ── */
.i-bell{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E")}
.i-circle-check{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.i-folder{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E")}
.i-message-circle{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E")}
.i-wrench{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E")}
.i-calendar{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E")}
.i-file-text{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E")}
.i-bookmark{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")}
.i-plane{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E")}
.i-waypoints{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.586 5.414-5.172 5.172'/%3E%3Cpath d='m18.586 13.414-5.172 5.172'/%3E%3Cpath d='M6 12h12'/%3E%3Ccircle cx='12' cy='20' r='2'/%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='4' cy='12' r='2'/%3E%3C/svg%3E")}
.i-stamp{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 13V8.5C14 7 15 7 15 5a3 3 0 0 0-6 0c0 2 1 2 1 3.5V13'/%3E%3Cpath d='M20 15.5a2.5 2.5 0 0 0-2.5-2.5h-11A2.5 2.5 0 0 0 4 15.5V17a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z'/%3E%3Cpath d='M5 22h14'/%3E%3C/svg%3E")}
.i-webhook{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2'/%3E%3Cpath d='m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06'/%3E%3Cpath d='m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8'/%3E%3C/svg%3E")}
.i-search{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E")}
.i-arrow-up-down{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E")}
.i-plus{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E")}
.i-x{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E")}
.i-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E")}
.i-users{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E")}
.i-ellipsis{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")}
.i-ellipsis-vertical{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E")}
.i-corner-down-right{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E")}
.i-smile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' x2='9.01' y1='9' y2='9'/%3E%3Cline x1='15' x2='15.01' y1='9' y2='9'/%3E%3C/svg%3E")}
.i-paperclip{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551'/%3E%3C/svg%3E")}
.i-clock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")}
.i-eye{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.i-chevron-down{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.i-folder-open{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
.i-settings{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.i-file{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E")}
.i-image{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E")}
.i-check{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.i-pencil{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E")}
.i-reply{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3C/svg%3E")}
.i-send{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E")}
.i-sparkles{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E")}
.i-message-square{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}