.ws-wrap { max-width:1240px; margin:0 auto; }
.ws-toolbar { display:flex; align-items:center; gap:1rem; margin-bottom:.9rem; }
.ws-hint { font-size:13px; color:#434655; }
.ws-btn { margin-left:auto; border:1.5px solid #2563eb; color:#2563eb; background:#fff; padding:.45rem 1.1rem;
          border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:background .2s; }
.ws-btn:hover { background:rgba(37,99,235,.06); }
.ws-asks { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:1rem; }
.ws-ask-label { font-size:12px; color:#737686; margin-right:.2rem; }
.ws-ask { border:1px solid rgba(37,99,235,.18); background:rgba(37,99,235,.04); color:#2563eb;
          padding:.45rem 1rem; border-radius:999px; font-size:13px; cursor:pointer; transition:all .2s; }
.ws-ask.is-on { background:linear-gradient(to right,#22d3ee,#2563eb); color:#fff; border-color:transparent; }

.workspace { display:flex; height:640px; border-radius:14px; overflow:hidden; border:1px solid rgba(115,118,134,.22);
             box-shadow:0 18px 50px rgba(19,27,46,.16); font-family:'Inter','Noto Sans KR',sans-serif;
             background:linear-gradient(178deg,#c3daf3 0%,#d8e8f7 26%,#e9f2fb 50%,#f5f1e8 76%,#fbe9dc 100%); }


.ws-main { flex:1 1 auto; min-width:0; display:flex; position:relative; }
.ws-main::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 78% 4%, rgba(0,163,196,.14), transparent 70%),
             radial-gradient(ellipse 95% 42% at 42% 104%, rgba(242,168,116,.22), transparent 72%); }
.mrail { position:relative; z-index:1; flex:0 0 76px; display:flex; flex-direction:column; align-items:stretch; gap:2px;
         padding:0 6px 8px; background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.5));
         border-right:1px solid rgba(148,163,184,.28); box-shadow:inset 1px 0 0 rgba(255,255,255,.9),0 6px 18px rgba(19,27,46,.12); }
.mrail-logo { height:52px; display:flex; align-items:center; justify-content:center; }
.mrail-logo img { width:58px; height:auto; }
.mri { position:relative; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
       font-size:10px; font-weight:700; line-height:14px; color:#41506a; border-radius:4px; text-align:center; transition:background .3s; }
.mri .material-symbols-outlined { font-size:22px; }
.mri.is-on { color:#0f1b2e; background:color-mix(in srgb, var(--c) 12%, transparent); }
.mri.is-on::before { content:""; position:absolute; left:-6px; top:50%; width:3px; height:26px; margin-top:-13px; background:var(--c); }
.mri.is-on .material-symbols-outlined { color:var(--c); }
.mrail-gap { flex:1; }

.mcol { position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; }
.mtop { flex:0 0 52px; display:flex; align-items:center; gap:8px; padding:8px 14px; }
.mnav { display:inline-flex; align-items:center; justify-content:center; gap:1px; height:36px; min-width:74px; padding:0 8px;
        border-radius:4px; font-size:12px; font-weight:800; color:#fff;
        background:linear-gradient(135deg,#22505f,#11243d 52%,#0f1626); box-shadow:0 1px 2px rgba(19,27,46,.05),0 3px 10px rgba(19,27,46,.08); }
.mnav + .mnav { margin-left:-4px; }
.mnav.is-dim { opacity:.38; }
.mnav .material-symbols-outlined { font-size:17px; }
.mtabs { display:flex; gap:6px; min-width:0; overflow:hidden; }
.mtab { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:36px; padding:6px 12px; border-radius:4px; font-size:12px;
        background:rgba(255,255,255,.72); border:1px solid rgba(148,163,184,.28); color:#41506a; white-space:nowrap; }
.mtab b { font-weight:600; }
.mtab .material-symbols-outlined { font-size:18px; color:var(--c); }
.mtab.is-on { background:#fff; color:#0f1b2e; border-top:2px solid var(--c); box-shadow:inset 0 -2px 0 var(--c),0 2px 6px #17354d24; }
.mtab.is-on b { font-weight:800; }
.mtab.is-new { animation:tabIn .35s ease; }
@keyframes tabIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.mtop-gap { flex:1; }
.mico { position:relative; width:34px; height:34px; flex:0 0 34px; display:inline-flex; align-items:center; justify-content:center;
        border-radius:4px; background:rgba(255,255,255,.72); border:1px solid rgba(148,163,184,.28); color:#41506a; }
.mico .material-symbols-outlined { font-size:18px; }
.mico-bell i { position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:#e11d48;
               color:#fff; font:800 9.5px/16px 'Inter',sans-serif; font-style:normal; text-align:center; }


.mstage { position:relative; flex:1; min-height:0; }
.stage-layer { position:absolute; inset:0 14px 14px; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.stage-layer.is-on { opacity:1; visibility:visible; transition:opacity .45s ease; }
.mcard { position:absolute; inset:0; background:#fff; border:1px solid #c6c6cd; border-radius:10px; overflow:hidden;
         box-shadow:0 1px 4px rgba(19,27,46,.10); }


.mflow { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.mflow-t { display:flex; align-items:center; gap:8px; font:800 22px 'Manrope','Noto Sans KR',sans-serif; color:#131b2e; letter-spacing:-.03em; margin:2px 0 10px; }
.mflow-t .material-symbols-outlined { font-size:20px; color:#41506a; }
.mkpi { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid #c6c6cd; }
.mkpi span { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; font-size:11px; font-weight:700; color:#45464d; }
.mkpi span + span { border-left:1px solid #e2e8f0; }
.mkpi b { font-size:19px; font-weight:800; color:#131b2e; font-variant-numeric:tabular-nums; }
.mkpi b.red { color:#dc2626; }
.msearch { align-self:flex-start; margin:8px 0; padding:8px 12px; background:#fff; border:1px solid #c6c6cd; font-size:11px; color:#64748b; }
.mtbl { flex:1; min-height:0; background:#fff; border:1px solid #c6c6cd; overflow:hidden; }
.mtr { display:grid; grid-template-columns:22px 78px 46px minmax(56px,.8fr) minmax(110px,1.5fr) 62px minmax(120px,1.6fr);
       align-items:center; gap:0 8px; height:40px; padding:0 10px; border-bottom:1px solid #e2e8f0; font-size:11px; color:#334155; }
.mtr > span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mtr > span:first-child { color:#2563eb; font-size:10px; }
.mth { height:32px; font-weight:750; color:#45464d; background:color-mix(in srgb,#3274df 5%,#fff); font-size:10.5px; }
.mtr .pn { font-weight:750; color:#0f172a; font-size:11.5px; }
.mtr i { font-style:normal; }
.kd { display:inline-block; padding:2px 8px; border-radius:999px; background:#dbeafe; color:#1e40af; font-size:10px; font-weight:700; }
.kd.ds { background:#fde3c8; color:#9a3412; }
.ps { display:inline-block; padding:3px 7px; background:#b45309; color:#fff; font-size:10px; font-weight:800; border-radius:2px; }
.ps.ds { background:#fff; color:#334155; border:1px solid #cbd5e1; }
.pc { display:inline-block; margin-right:4px; padding:2px 6px; border:1px solid #e2e8f0; background:#f8fafc; color:#94a3b8; font-size:9.5px; font-weight:600; }
.pc.on { background:#ea580c; border-color:#ea580c; color:#fff; font-weight:800; }
.mfoot { padding:8px 4px 0; font-size:11px; color:#45464d; }


.mhome { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.mhello { position:relative; padding:20px 24px; border-radius:12px; background:rgba(255,255,255,.88);
          border:1px solid color-mix(in srgb,#c6c6cd 75%,#3274df); box-shadow:0 1px 4px rgba(19,27,46,.10); overflow:hidden; }
.mhello::after { content:""; position:absolute; right:-60px; top:-80px; width:300px; height:300px; border-radius:50%;
                 background:radial-gradient(circle, rgba(50,116,223,.16), transparent 65%); }
.mhello-k { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#1959ba; letter-spacing:.06em; }
.mhello-k i { width:7px; height:7px; border-radius:50%; background:#3274df; box-shadow:0 0 0 3px rgba(50,116,223,.2); }
.mhello-t { margin-top:10px; font:800 26px 'Manrope','Noto Sans KR',sans-serif; letter-spacing:-.04em; color:#131b2e; }
.mhello-s { margin-top:6px; font-size:13px; color:#45464d; }
.mhello-d { display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:10px; border-top:1px solid #e2e8f0;
            width:fit-content; font-size:11.5px; color:#45464d; }
.mhello-d .material-symbols-outlined { font-size:15px; }
.mstats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mstat { position:relative; min-height:96px; padding:15px 17px; border:1px solid #c6c6cd; border-radius:10px; background:#fff;
         box-shadow:0 1px 4px rgba(19,27,46,.10); }
.mstat-l { font-size:11px; font-weight:700; color:#45464d; }
.mstat-n { margin-top:6px; font-size:26px; font-weight:800; line-height:1.05; color:#131b2e; font-variant-numeric:tabular-nums; }
.mstat-n small { margin-left:3px; font-size:11px; font-weight:600; }
.mstat-a { margin-top:6px; font-size:10px; color:#1959ba; }
.mstat-i { position:absolute; right:15px; top:15px; width:34px; height:34px; border-radius:7px; display:flex; align-items:center;
           justify-content:center; font-size:19px; color:#1959ba; background:color-mix(in srgb,#3274df 10%,#fff); }
.mlist { flex:1; min-height:0; padding:13px 16px; border:1px solid #c6c6cd; border-radius:10px; background:#fff; box-shadow:0 1px 4px rgba(19,27,46,.10); overflow:hidden; }
.mlist-h { display:flex; align-items:center; gap:6px; padding-bottom:9px; margin-bottom:6px; border-bottom:1px solid #e2e8f0; font-size:13px; font-weight:750; color:#131b2e; }
.mlist-h .material-symbols-outlined { font-size:17px; color:#1959ba; }
.mlist-h em { font-style:normal; font-size:10px; font-weight:700; color:#1959ba; border:1px solid #bcd0f1; border-radius:5px; padding:1px 6px; }
.mrow { display:grid; grid-template-columns:96px 1fr 70px 52px; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid #eef1f5; font-size:11px; color:#45464d; }
.mrow-h { padding:6px 4px; font-size:9.5px; font-weight:750; background:color-mix(in srgb,#3274df 5%,#fff); border-bottom:0; }
.mno { color:#1959ba; font-weight:700; font-size:10.5px; }
.mnm { color:#131b2e; font-weight:650; }
.mst { font-style:normal; display:inline-block; padding:2px 4px; border:1px solid #006398; color:#006398; border-radius:4px; font-size:9px; font-weight:750; }


.drw { position:absolute; inset:0; width:100%; height:100%; background:#fbfcfe; }
.drw .ln { fill:none; stroke:#1e293b; stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s ease; }
.drw .ln.hid { stroke-dasharray:.02 .015; stroke:#64748b; stroke-width:1.1; }
.drw .ctr { fill:none; stroke:#94a3b8; stroke-width:.8; stroke-dasharray:8 3 2 3; opacity:0; transition:opacity .6s; }
.drw .dim { opacity:0; transition:opacity .5s ease; }
.drw .dim line, .drw .dim path { stroke:#2563eb; stroke-width:.9; fill:none; }
.drw .dim text { fill:#1d4ed8; font:600 12px 'Inter','Noto Sans KR',sans-serif; }
.drw .note { fill:#b45309; font:700 12px 'Inter','Noto Sans KR',sans-serif; }
.drw .ttl { fill:#334155; font:600 11px 'Inter','Noto Sans KR',sans-serif; }
.drw .frame { fill:none; stroke:#cbd5e1; stroke-width:1; }
.drw.is-drawn .ln { stroke-dashoffset:0; }
.drw.is-drawn .ctr { opacity:1; }
.drw.show-dims .dim { opacity:1; }


.mdl-canvas { display:block; width:100%; height:100%; }


.doc-wrap { position:absolute; inset:0; overflow:hidden; display:flex; justify-content:center; }
.doc { width:100%; max-width:620px; background:#fff; border:1px solid #c6c6cd; border-radius:10px 10px 0 0; padding:22px 24px 18px;
       box-shadow:0 6px 24px rgba(19,27,46,.12); font-size:11.5px; color:#1e293b; }
.doc-h { display:flex; align-items:flex-end; justify-content:space-between; border-bottom:2px solid #1e293b; padding-bottom:.5rem; }
.doc-h h4 { font-size:20px; font-weight:800; letter-spacing:.35em; }
.doc-draft { font-size:10.5px; font-weight:700; color:#b45309; background:#fff7ed; border:1px solid #fed7aa; border-radius:4px; padding:.1rem .45rem; }
.doc-meta { display:grid; grid-template-columns:1fr 1fr; gap:.15rem 1.2rem; margin:.7rem 0 .8rem; color:#334155; }
.doc-meta b { color:#0f172a; font-weight:700; }
.doc table { width:100%; border-collapse:collapse; }
.doc th { background:#f1f5f9; font-weight:700; color:#334155; border:1px solid #cbd5e1; padding:.32rem .35rem; text-align:center; }
.doc td { border:1px solid #e2e8f0; padding:.32rem .35rem; text-align:center; white-space:nowrap; }
.doc td.l { text-align:left; }
.doc td.r { text-align:right; font-variant-numeric:tabular-nums; }
.doc td.typed { color:#6d28d9; font-weight:700; background:#f5f3ff; }
.doc td .chk { display:inline-block; margin-left:.25rem; font-size:10px; font-weight:700; color:#b45309; background:#fff7ed;
               border:1px solid #fed7aa; border-radius:3px; padding:0 .25rem; }
.doc tr.new td { animation:docRow .7s ease; }
@keyframes docRow { from { background:#dbeafe; } to { background:transparent; } }
.doc-sum { display:flex; justify-content:flex-end; gap:1.2rem; margin-top:.6rem; font-size:12px; opacity:0; transition:opacity .4s; }
.doc-sum.is-on { opacity:1; }
.doc-sum b { font-variant-numeric:tabular-nums; }
.doc-foot { margin-top:.5rem; font-size:10.5px; color:#64748b; }


.ws-panel { position:relative; flex:0 0 40%; max-width:450px; display:flex; flex-direction:column; background:#fff;
            box-shadow:-8px 0 24px rgba(19,27,46,.14); transition:flex-basis .45s ease, max-width .45s ease, opacity .3s ease; }
.workspace.is-closed .ws-panel { flex-basis:0; max-width:0; opacity:0; overflow:hidden; }
.wsp-head { flex:0 0 54px; display:flex; align-items:center; gap:.55rem; padding:0 .9rem; color:#fff;
            background:linear-gradient(135deg,#0f1626,#1a2338); }
.wsp-logo { height:20px; width:auto; }
.wsp-title { font-family:'Inter','Noto Sans KR',sans-serif; font-weight:800; letter-spacing:.16em; font-size:14px; white-space:nowrap; }
.wsp-tag { background:#f5c518; color:#131b2e; font-size:9.5px; font-weight:800; padding:.12rem .4rem; border-radius:3px; box-shadow:0 0 10px rgba(245,197,24,.45); }
.wsp-pin { margin-left:auto; display:inline-flex; align-items:center; gap:.2rem; padding:.32rem .7rem; border-radius:999px; font-size:11px; font-weight:700;
           background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 0 0 2px rgba(59,130,246,.25); white-space:nowrap; }
.wsp-pin .material-symbols-outlined { font-size:14px; }
.wsp-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.wsp-main { flex:1; min-height:0; display:flex; }
.wsp-tabs { flex:0 0 64px; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.6rem 0;
            background:linear-gradient(180deg,#eaf2fb,#f4f8fc); border-right:1px solid #dbe3ee; }
.wsp-tabs-gap { flex:1; }
.wsp-tab { display:flex; flex-direction:column; align-items:center; gap:.1rem; width:52px; padding:.45rem 0; background:none; border:0;
           color:#41506a; cursor:pointer; border-radius:6px; transition:all .2s; }
.wsp-tab em { font-style:normal; font-size:9.5px; letter-spacing:-.02em; }
.wsp-tab .material-symbols-outlined { font-size:21px; }
.wsp-tab:hover { background:rgba(50,116,223,.06); }
.wsp-tab.is-on { color:#1d6fd8; background:rgba(50,116,223,.12); }
.wsp-col { flex:1; min-width:0; display:flex; flex-direction:column; }
.wsp-bar { display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem; border-bottom:1px solid #e2e8f0; background:#fff; }
.wsp-bar-gap { flex:1; }
.wsp-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .75rem; border-radius:999px; font-size:11px; font-weight:700;
            color:#41506a; background:#fff; border:1px solid #c6c6cd; box-shadow:0 1px 2px rgba(19,27,46,.06); white-space:nowrap; }
.wsp-chip .material-symbols-outlined { font-size:15px; }
.wsp-chip-solid { color:#fff; background:#11243d; border-color:#00a3c4; box-shadow:0 0 0 1px rgba(0,163,196,.35),0 2px 8px rgba(17,36,61,.3); }
.wsp-chip-solid.is-pulse { animation:chipPulse .6s ease; }
@keyframes chipPulse { 50% { box-shadow:0 0 0 5px rgba(0,163,196,.35); } }
.wsp-body { flex:1; min-height:0; padding:.9rem; display:flex; flex-direction:column; gap:.7rem; overflow-y:auto; scroll-behavior:smooth;
            background:linear-gradient(180deg,#f4f8fc,#eaf2fb); }
.wsp-empty { margin:auto; text-align:center; padding:1rem; animation:msgIn .3s ease; }
.wsp-empty img { width:120px; height:auto; margin:0 auto .7rem; }
.wsp-empty-t { font-weight:800; letter-spacing:.12em; color:#8a6d1a; font-size:14px; }
.wsp-empty-t span { display:inline-block; margin-left:.25rem; background:#f5c518; color:#131b2e; font-size:9px; padding:.08rem .35rem; border-radius:3px; letter-spacing:0; vertical-align:2px; }
.wsp-empty-s { margin-top:.6rem; font-size:9.5px; font-weight:700; letter-spacing:.24em; color:#334155; }
.wsp-empty-q { margin-top:.8rem; font-size:11px; color:#45464d; line-height:1.7; }
.wsp-input { margin:0; padding:.55rem .75rem .6rem; border-top:1px solid #e2e8f0; background:#fff; }
.wsp-ph { display:block; min-height:2.6em; font-size:11.5px; color:#94a3b8; line-height:1.4; }
.wsp-ph.is-typing { color:#13243a; }
.wsp-in-row { display:flex; align-items:center; gap:.45rem; margin-top:.25rem; }
.wsp-ic { font-size:18px; color:#41506a; }
.wsp-in-gap { flex:1; }
.wsp-send { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#fff;
            background:linear-gradient(135deg,#00a3c4,#11243d); transition:transform .12s; }
.wsp-send .material-symbols-outlined { font-size:18px; }
.wsp-send.is-press { transform:scale(.86); }


.ws-panel .msg-me { align-self:flex-end; max-width:88%; padding:.55rem .85rem; border-radius:4px; font-size:12.5px; line-height:1.6;
                    color:#13243a; background:linear-gradient(135deg,#e4eefd,#d5e3fc); border:1px solid #b7cdee;
                    box-shadow:0 2px 8px rgba(0,99,152,.14); }
.ws-panel .msg-ai { align-self:flex-start; max-width:96%; padding:.75rem .9rem; border-radius:4px; font-size:12.5px; line-height:1.7;
                    color:#131b2e; background:#fff; border:1px solid #c6c6cd;
                    box-shadow:0 10px 26px -6px rgba(19,27,46,.16),0 2px 5px rgba(19,27,46,.08); }
.ws-panel .msg-ai b { color:#006398; }
.ws-panel .msg-ai ul { margin:.3rem 0 0 1rem; list-style:disc; }
.ws-panel .msg-ai li { margin:.1rem 0; }
.msg-att { display:inline-flex; align-items:center; gap:.25rem; margin-top:.35rem; padding:.12rem .5rem; border-radius:4px;
           background:rgba(255,255,255,.75); border:1px solid #b7cdee; font-size:11px; }
.msg-att .material-symbols-outlined { font-size:14px; }
.cur { display:inline-block; color:#006398; animation:curBlink 1s steps(1) infinite; margin-left:1px; }
@keyframes curBlink { 50% { opacity:0; } }
.ws-panel .msg-me, .ws-panel .msg-ai, .flow { animation:msgIn .22s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }


.flow { align-self:stretch; background:#fff; border:1px solid #dbe3ee; border-radius:12px; padding:7px 12px 8px;
        box-shadow:0 1px 4px rgba(19,27,46,.10); display:flex; flex-direction:column; gap:3px; }
.flow-row { display:flex; align-items:center; gap:6px; font-size:12px; color:#45464d; line-height:1.5; }
.flow-row .mk { flex:0 0 14px; display:inline-flex; justify-content:center; }
.flow-row .run { width:8px; height:8px; border-radius:50%; background:rgb(217,119,6); animation:flowBlink 1.2s ease-in-out infinite; }
.flow-row .ok { font-size:11px; font-weight:800; color:rgb(4,120,87); }
.flow-row .tm { font-size:11px; opacity:.62; }
.flow-row.is-think { color:#64748b; font-style:italic; }
@keyframes flowBlink { 0%,100% { opacity:1; } 50% { opacity:.35; } }


.wsp-modal { position:absolute; inset:54px 0 0; z-index:5; display:flex; align-items:center; justify-content:center; padding:1rem;
             background:rgba(8,12,24,.45); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.wsp-modal.is-on { opacity:1; visibility:visible; transition:opacity .3s ease; }
.wsp-card { width:100%; max-width:330px; background:#fff; color:#1e293b; border-radius:10px; padding:1rem 1.05rem .9rem;
            box-shadow:0 20px 50px rgba(0,0,0,.30); transform:translateY(10px); transition:transform .3s ease; }
.wsp-modal.is-on .wsp-card { transform:none; }
.wsp-card-h { display:flex; align-items:center; gap:.35rem; font-weight:800; font-size:13px; color:#006398; }
.wsp-card-h .material-symbols-outlined { font-size:18px; }
.wsp-card-t { display:flex; align-items:center; gap:.35rem; margin:.65rem 0 .45rem; font-weight:700; font-size:13.5px; }
.wsp-card-t .material-symbols-outlined { font-size:17px; color:#2563eb; }
.wsp-card dl { display:grid; grid-template-columns:auto 1fr; gap:.25rem .7rem; font-size:12px; background:#f8fafc; border-radius:6px; padding:.55rem .7rem; }
.wsp-card dt { color:#64748b; }
.wsp-card dd { color:#0f172a; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.wsp-card-n { margin-top:.55rem; font-size:11px; color:#64748b; }
.wsp-card-b { display:flex; justify-content:flex-end; gap:.4rem; margin-top:.7rem; }
.wsp-card-b span { font-size:12px; font-weight:700; padding:.4rem .9rem; border-radius:6px; }
.wsp-card-b .g { background:#eceef0; color:#434655; }
.wsp-card-b .p { background:linear-gradient(135deg,#00a3c4,#11243d); color:#fff; }


@media (max-width:1100px){
  .mico, .mtop-gap { display:none; }
  .mtr { grid-template-columns:22px 74px 42px minmax(52px,.8fr) minmax(100px,1.5fr) 58px; }
  .mtr > span:last-child { display:none; }
}
@media (max-width:900px){
  .workspace { flex-direction:column; height:auto; }
  .ws-main { height:420px; flex:0 0 auto; }
  .ws-panel { flex:0 0 auto; height:560px; max-width:none; box-shadow:0 -6px 18px rgba(19,27,46,.10); }
  .mrail { display:none; }
  .mnav { min-width:0; width:36px; padding:0; font-size:0; }
  .mnav .material-symbols-outlined { font-size:18px; }
  .mtr { grid-template-columns:62px minmax(0,1fr) 52px; height:36px; }
  .mtr > span:nth-child(1), .mtr > span:nth-child(3), .mtr > span:nth-child(4), .mtr > span:last-child { display:none; }
  .mkpi span { padding:7px 8px; font-size:10px; }
  .mkpi b { font-size:15px; }
  .mstats { gap:8px; }
  .mstat { min-height:80px; padding:11px 12px; }
  .mstat-i { display:none; }
  .mhello-t { font-size:20px; }
  .doc { padding:14px 14px 12px; font-size:10px; }
  .doc-h h4 { font-size:16px; }
  .doc td, .doc th { padding:.25rem .2rem; }
  }
@media (max-width:520px){
  .doc .hide-sm { display:none; }
  .doc-meta { grid-template-columns:1fr; }
  .mrow { grid-template-columns:1fr 52px; }
  .mrow > span:nth-child(1), .mrow > span:nth-child(3) { display:none; }
  .mstat-a { display:none; }
  .wsp-pin { display:none; }
  .wsp-title { margin-right:auto; }
}
@media (prefers-reduced-motion: reduce){
  .drw .ln, .drw .dim, .stage-layer, }


.feats { display:flex; flex-direction:column; gap:88px; margin-top:8px; }
.feat { display:grid; grid-template-columns:minmax(0,30%) minmax(0,1fr); gap:44px; align-items:center; }
.feat:nth-child(even) { grid-template-columns:minmax(0,1fr) minmax(0,30%); }
.feat:nth-child(even) .feat-txt { order:2; }
.feat-no { display:inline-flex; align-items:center; gap:.4rem; font:800 13px 'Inter',sans-serif; letter-spacing:.08em; color:#2563eb;
           background:rgba(37,99,235,.08); padding:.3rem .75rem; border-radius:999px; }
.feat-no .material-symbols-outlined { font-size:17px; }
.feat-txt h3 { margin:1rem 0 .8rem; font-size:26px; line-height:1.35; font-weight:800; letter-spacing:-.02em; color:#191c1e; }
.feat-txt p { font-size:15px; line-height:1.75; color:#434655; }
.feat-txt ul { margin-top:1rem; display:flex; flex-direction:column; gap:.45rem; }
.feat-txt li { position:relative; padding-left:1.5rem; font-size:14px; font-weight:600; color:#191c1e; }
.feat-txt li::before { content:"✓"; position:absolute; left:0; top:0; color:#059669; font-weight:800; }
.feat-demo .workspace { height:540px; }
.feat-demo .ws-panel { flex-basis:43%; max-width:400px; }
.feat-demo .mrail { flex-basis:64px; }
.feat-demo .mri { font-size:9px; min-height:46px; }
.feat-demo .mri .material-symbols-outlined { font-size:20px; }
.feat-demo .mico { display:none; }
.feat-demo .wsp-tabs { flex-basis:56px; }
.feat-demo .wsp-tab { width:46px; }
@media (max-width:1100px){
  .feat { grid-template-columns:minmax(0,1fr); gap:22px; }
  .feat:nth-child(even) { grid-template-columns:minmax(0,1fr); }
  .feat:nth-child(even) .feat-txt { order:0; }
  .feat-txt h3 { font-size:22px; }
  .feat-txt h3 br { display:none; }
  .feats { gap:64px; }
}
@media (max-width:900px){
  .feat-demo .workspace { height:auto; }
  .feat-demo .ws-main { height:340px; }
  .feat-demo .ws-panel { height:480px; max-width:none; }
}


.wsp-sys { align-self:stretch; display:flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:8px;
           background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; font-size:12px; animation:msgIn .25s ease; }
.wsp-sys .material-symbols-outlined { font-size:18px; color:#ea580c; }
.wsp-sys em { margin-left:auto; font-style:normal; font-size:10.5px; color:#9a3412; opacity:.8; }


.mphone { position:absolute; left:50%; bottom:16px; z-index:4; width:min(300px,80%); transform:translate(-50%,140%); opacity:0;
          transition:transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .3s; pointer-events:none; }
.mphone.is-on { transform:translate(-50%,0); opacity:1; }
.mphone-n { background:rgba(255,255,255,.96); border-radius:16px; padding:.7rem .85rem; box-shadow:0 14px 34px rgba(19,27,46,.28);
            border:1px solid rgba(148,163,184,.35); backdrop-filter:blur(8px); }
.mphone-h { display:flex; align-items:center; gap:.4rem; font-size:11px; color:#45464d; }
.mphone-h img { width:22px; height:auto; }
.mphone-h em { margin-left:auto; font-style:normal; font-size:10px; color:#94a3b8; }
.mphone-t { margin-top:.35rem; font-size:13px; font-weight:800; color:#131b2e; }
.mphone-x { margin-top:.15rem; font-size:11.5px; line-height:1.5; color:#334155; }


.mpane { position:absolute; inset:0; background:#fff; border:1px solid #c6c6cd; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(19,27,46,.10); }
.mmail { display:grid; grid-template-columns:40% 1fr; height:100%; }
.mmail-l { border-right:1px solid #e2e8f0; background:#f8fafc; }
.mm { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-bottom:1px solid #e2e8f0; font-size:11px; color:#45464d; }
.mm b { color:#131b2e; font-size:11.5px; }
.mm span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mm.is-on { background:#fff; box-shadow:inset 3px 0 0 #f43f5e; }
.mmail-r { padding:16px 18px; font-size:12px; color:#334155; line-height:1.7; }
.mmail-s { font-size:14px; font-weight:800; color:#131b2e; }
.mmail-f { font-size:11px; color:#64748b; margin:4px 0 12px; }
.mmail-a { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.mmail-a span { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border:1px solid #c6c6cd; border-radius:6px; font-size:11px; background:#f8fafc; }
.mmail-a .material-symbols-outlined { font-size:16px; color:#2563eb; }
.msvg { display:block; width:100%; height:auto; background:#fbfcfe; }
.msvg .mfr { fill:none; stroke:#cbd5e1; stroke-width:1.2; }
.msvg rect:not(.mfr), .msvg circle, .msvg path, .msvg line { fill:none; stroke:#1e293b; stroke-width:1.4; }
.msheets { position:relative; height:100%; padding:14px 16px; }
.msheets-h { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#131b2e; }
.msheets-h .material-symbols-outlined { font-size:18px; color:#6366f1; }
.msheets-h em { font-style:normal; font-weight:600; font-size:11px; color:#64748b; }
.msheet-all { position:absolute; left:16px; right:16px; top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
              border:2px solid #334155; background:#fbfcfe; transition:opacity .5s, transform .5s; }
.msheet-all .msvg .mfr { stroke:none; }
.msheet-grid { position:absolute; left:16px; right:16px; top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.msheet { opacity:0; transform:scale(.92); transition:opacity .4s, transform .4s; border:1px solid #c6c6cd; border-radius:6px; overflow:hidden; background:#fff;
          box-shadow:0 2px 8px rgba(19,27,46,.08); }
.msheet b { display:block; padding:5px 8px; font-size:10.5px; color:#131b2e; border-top:1px solid #e2e8f0; }
.msheets.is-split .msheet-all { opacity:0; transform:scale(.96); }
.msheets.is-split .msheet { opacity:1; transform:none; }
.msim { padding:14px 16px; height:100%; overflow:hidden; }
.msim-me { display:flex; align-items:center; gap:12px; padding:10px; border:1px dashed #94a3b8; border-radius:8px; background:#f8fafc; }
.msim-me .msvg { width:88px; border:1px solid #e2e8f0; }
.msim-me b { display:block; font-size:13px; color:#131b2e; }
.msim-me span { font-size:11px; color:#64748b; }
.msim-h { display:flex; align-items:center; gap:4px; margin:14px 0 8px; font-size:11.5px; font-weight:800; color:#6366f1; }
.msim-h .material-symbols-outlined { font-size:17px; }
.msim-r { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:8px; border:1px solid #e2e8f0; border-radius:8px;
          opacity:0; animation:simIn .45s ease forwards; }
.msim-r:first-of-type { border-color:#a5b4fc; background:#eef2ff; }
@keyframes simIn { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
.msim-r > i { flex:0 0 22px; height:22px; border-radius:50%; background:#6366f1; color:#fff; font:800 11px/22px 'Inter',sans-serif; font-style:normal; text-align:center; }
.msim-r .msvg { flex:0 0 64px; width:64px; border:1px solid #e2e8f0; }
.msim-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; font-size:10.5px; color:#45464d; }
.msim-b b { font-size:12px; color:#131b2e; }
.msim-b span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.msim-b em { font-style:normal; color:#047857; font-weight:700; }
.msim-p { text-align:right; font-size:13px; font-weight:800; color:#131b2e; font-variant-numeric:tabular-nums; }
.msim-p small { display:block; font-size:9.5px; font-weight:600; color:#64748b; }
@media (max-width:900px){
  .mmail { grid-template-columns:1fr; } .mmail-l { display:none; }
  .msheet-grid, .msheet-all { grid-template-columns:repeat(3,1fr); gap:6px; }
}


.mviewer { display:flex; flex-direction:column; }
.mv-head { display:flex; align-items:center; gap:8px; padding:10px 14px 6px; font-size:14px; color:#131b2e; }
.mv-head b { font-weight:800; letter-spacing:-.02em; }
.mv-pno { font-size:10px; font-weight:700; color:#64748b; letter-spacing:.08em; }
.mv-tabs { display:flex; gap:4px; padding:0 12px 8px; border-bottom:1px solid #e2e8f0; }
.mv-tabs span { padding:4px 10px; font-size:10.5px; color:#41506a; border:1px solid #e2e8f0; border-radius:4px; background:#f8fafc; }
.mv-tabs span.is-on { background:#fff; color:#0f1b2e; font-weight:800; border-color:#131b2e; }
.mv-body { flex:1; min-height:0; display:grid; grid-template-columns:34% 1fr; }
.mv-tree { border-right:1px solid #e2e8f0; padding:6px 0; overflow:hidden; }
.mv-f { display:flex; align-items:center; gap:6px; padding:7px 10px; font-size:11.5px; font-weight:800; color:#131b2e; }
.mv-f .material-symbols-outlined { font-size:17px; color:#d97706; }
.mv-f em { margin-left:auto; font-style:normal; font-size:10px; color:#64748b; }
.mv-r { display:flex; align-items:center; gap:6px; padding:6px 8px 6px 18px; font-size:10.5px; color:#334155; white-space:nowrap; overflow:hidden; }
.mv-r .material-symbols-outlined { font-size:15px; color:#64748b; }
.mv-r i { display:none; margin-left:auto; font-style:normal; font-size:8.5px; font-weight:800; color:#4338ca; background:#eef2ff; padding:1px 5px; border-radius:3px; }
.mv-f.is-sel { background:#fff7ed; }
.mv-r.is-sel { background:#e8ebf7; font-weight:800; color:#131b2e; }
.mv-view { position:relative; min-width:0; display:flex; flex-direction:column; background:#fff; }
.mv-bar { display:flex; align-items:center; gap:5px; padding:7px 10px; border-bottom:1px solid #e2e8f0; font-size:10.5px; color:#94a3b8; }
.mv-bar > span { display:inline-flex; align-items:center; gap:3px; padding:3px 7px; border:1px solid #e2e8f0; border-radius:4px; white-space:nowrap; flex:0 0 auto; }
.mv-bar > span .material-symbols-outlined { font-size:13px; }
.mv-bar > span.is-on { color:#131b2e; font-weight:800; border-color:#131b2e; }
.mv-file { font-style:normal; font-weight:700; color:#131b2e; margin-left:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mv-empty { position:absolute; inset:40px 0 0; display:flex; align-items:center; justify-content:center; font-size:11.5px; color:#94a3b8; }
.mviewer .mdl-canvas { flex:1; min-height:0; opacity:0; transition:opacity .5s ease; }
.mviewer.is-loaded .mdl-canvas { opacity:1; }
.mviewer.is-loaded .mv-empty { display:none; }
@media (max-width:900px){ .mv-body { grid-template-columns:1fr; } .mv-tree { display:none; } }


.feat-more { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:center; padding:44px 48px; border-radius:24px;
             color:#fff; background:linear-gradient(135deg,#0f1626 0%,#14305a 55%,#1d4ed8 100%); box-shadow:0 24px 60px rgba(19,27,46,.25); }
.feat-no-w { color:#fff; background:rgba(255,255,255,.14); }
.feat-more-txt h3 { margin:1rem 0 .8rem; font-size:30px; line-height:1.3; font-weight:800; letter-spacing:-.02em; }
.feat-more-txt p { font-size:15px; line-height:1.8; color:rgba(255,255,255,.82); }
.feat-more-txt p b { color:#67e8f9; }
.feat-steps { margin-top:1.3rem; display:flex; flex-direction:column; gap:.55rem; }
.feat-steps li { display:flex; align-items:center; gap:.65rem; font-size:14.5px; font-weight:600; }
.feat-steps li span { flex:0 0 26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
                      font:800 12px 'Inter',sans-serif; background:linear-gradient(135deg,#22d3ee,#2563eb); }
.feat-more-cta { display:inline-flex; align-items:center; gap:.35rem; margin-top:1.6rem; padding:.7rem 1.4rem; border-radius:999px; font-size:14px; font-weight:700;
                 color:#0f1626; background:#fff; text-decoration:none; transition:transform .2s; }
.feat-more-cta:hover { transform:translateY(-2px); }
.feat-more-cta .material-symbols-outlined { font-size:18px; }
.feat-more-chat { display:flex; flex-direction:column; gap:.75rem; padding:1.2rem; border-radius:16px; background:linear-gradient(180deg,#f4f8fc,#eaf2fb); }
.fm-me, .fm-ai { max-width:90%; padding:.65rem .9rem; border-radius:4px; font-size:13px; line-height:1.65; }
.fm-me { align-self:flex-end; color:#13243a; background:linear-gradient(135deg,#e4eefd,#d5e3fc); border:1px solid #b7cdee; }
.fm-ai { align-self:flex-start; color:#131b2e; background:#fff; border:1px solid #c6c6cd; box-shadow:0 6px 16px -6px rgba(19,27,46,.18); }
.fm-ai b { display:block; margin-bottom:.15rem; font-size:10.5px; letter-spacing:.06em; color:#006398; }
@media (max-width:1100px){ .feat-more { grid-template-columns:minmax(0,1fr); padding:32px 24px; } .feat-more-txt h3 { font-size:24px; } }


.wsp-sys em { white-space:nowrap; }
@media (max-width:900px){ .feat-demo .wsp-tabs { display:none; } }