/* 4.0.14 · 메뉴 내부 UI. 편집 DOM·이벤트 위임·캔버스 좌표는 기존 모듈이 소유한다.
   새 구조용 래퍼는 기존 UI에서 contents: 기존 flex 항목 순서/크기를 유지한다. */
.uib-parts,.uib-query,.uib-actions{display:contents}
.uiw-acct-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-right:54px}
.uiw-acct-head .shead{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0;flex:1}
.uiw-acct-head .board-tools{margin:0!important}

/* 화면 > 도구 > 작업 영역. 색은 메뉴 식별과 상태에, 본문은 중립색에 둔다. */
:root[data-ui=modern] .view{--ui-accent:var(--won);--ui-tint:color-mix(in srgb,var(--ui-accent) 7%,var(--panel));--ui-space:var(--uia-pad)}
:root[data-ui=modern] :is(#v-board,#v-meet,#v-files,#v-pages){--ui-accent:var(--dev)}
:root[data-ui=modern] :is(#v-acct,#v-vault){--ui-accent:var(--acct)}
:root[data-ui=modern] :is(#v-products,#v-targeting,#v-brain){--ui-accent:var(--prod)}
:root[data-ui=modern] :is(#v-adresearch,#v-place){--ui-accent:var(--mkt)}
:root[data-ui=modern] .office{padding:24px clamp(16px,2.4vw,40px) 36px}
:root[data-ui=modern] :is(.shead,.fxpgtop,.tghead){margin-bottom:22px;min-height:42px;gap:12px;align-items:center}
:root[data-ui=modern] :is(.shead,.fxpgtop,.tghead) h1{font-size:25px;line-height:1.35;font-weight:750;letter-spacing:-.7px}
:root[data-ui=modern] :is(.view>.shead h1,.uiw-acct-head h1,.fxpgtop h2,#pkRoot>.shead h1,#adopsRoot>.shead h1,#tgRoot>.shead h1,.tghead h1,.pshead h1)::before{content:"";display:inline-block;width:5px;height:1em;background:var(--ui-accent);border-radius:4px;margin-right:12px;vertical-align:-.08em}
:root[data-ui=modern] .view .panel{box-shadow:none}
:root[data-ui=modern] .view .panel>.ptitle{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line2)}
:root[data-ui=modern] .view .empty{line-height:1.7;padding:28px 16px}
:root[data-ui=modern] .view :is(.mini.pri,.chip.on){box-shadow:none}
:root[data-ui=modern] .view :is(button,input,select,textarea):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}

/* 탭은 메뉴 안의 탐색, 필터는 본문 도구: 크기와 표면을 분리한다. */
:root[data-ui=modern] :is(.actabs,.vlanes,#arTabs,.tgtabs,.systabs2,#wsTabs,#adopsRoot>.systabs){display:flex;flex-wrap:wrap;gap:4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0;margin:0 0 20px;overflow:visible}
:root[data-ui=modern] :is(.actabs,.vlanes,#arTabs,.tgtabs,.systabs2,#wsTabs,#adopsRoot>.systabs)>button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:10px 14px;border:0;border-bottom:3px solid transparent;border-radius:7px 7px 0 0;background:transparent;color:var(--ink-soft);font-size:14px;line-height:1.45;white-space:normal}
:root[data-ui=modern] :is(.actabs,.vlanes,#arTabs,.tgtabs,.systabs2,#wsTabs,#adopsRoot>.systabs)>button.on{color:var(--ui-accent);background:var(--ui-tint);border-bottom-color:var(--ui-accent);font-weight:750}
:root[data-ui=modern] .vlanes button.on .n{color:var(--ink-soft)}
:root[data-ui=modern] :is(#arTabs,#wsTabs,#adopsRoot>.systabs)>button{flex:1 1 150px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;text-align:left}
:root[data-ui=modern] :is(#arTabs,#wsTabs,#adopsRoot>.systabs)>button>span{white-space:normal;overflow-wrap:anywhere}
:root[data-ui=modern] :is(.actabs,.systabs2) button.on :is(.n,.bd){color:var(--ui-accent);background:var(--panel)}
:root[data-ui=modern] .view :is(.archips,.vcats){gap:8px;align-items:center}
:root[data-ui=modern] .view :is(.archip,.vcat){border-radius:7px;padding:6px 11px;line-height:1.45;min-height:32px}

/* 오피스: NOW → 공간 → 일정/구독. 자리·노크·예약·피드를 전부 같은 DOM에 보존. */
:root[data-ui=modern] #v-office .ofnow{background:var(--ui-tint);border-color:color-mix(in srgb,var(--won) 25%,var(--line));padding:12px 18px;gap:18px;margin-bottom:18px}
:root[data-ui=modern] #v-office .ofnlab{display:flex;align-items:center;gap:7px;color:var(--won);letter-spacing:.5px;white-space:nowrap;margin:0}
:root[data-ui=modern] #nowList{display:flex;flex:1;min-width:0;align-items:stretch;gap:10px;overflow-x:auto;padding:2px 0}
:root[data-ui=modern] #nowList .now-item{min-height:60px;max-width:400px;box-sizing:border-box}
:root[data-ui=modern] #nowList .tt{min-width:0;white-space:normal;font-size:calc(14px * var(--uia-text,1));line-height:1.5}
:root[data-ui=modern] #nowList .tt>span:not(.uia-glyph){font-size:calc(12.5px * var(--uia-text,1));line-height:1.5}
:root[data-ui=modern] #nowList .empty{padding:10px 2px;font-size:calc(14px * var(--uia-text,1));line-height:1.5;white-space:normal;text-align:left}
:root[data-ui=modern] #v-office .ofband{padding:0;overflow:clip;margin-bottom:20px}
:root[data-ui=modern] #v-office .ofband>.ptitle{padding:16px 20px;margin:0;background:var(--panel)}
:root[data-ui=modern] #v-office .obrow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:var(--uia-row) 20px;border-top:1px solid var(--line2);min-height:68px}
:root[data-ui=modern] #v-office .oblab{width:auto;display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:calc(14.5px * var(--uia-text,1));line-height:1.6}
:root[data-ui=modern] #v-office .oblab :is(.uia-symbol,.uia-original){color:var(--won);width:1.4em;height:1.4em;min-width:20px;min-height:20px}
:root[data-ui=modern] #v-office .obct{min-width:0;gap:10px}
:root[data-ui=modern] #v-office :is(.room,.bubble,.loungec){background:var(--panel2);border:1px solid var(--line);padding:12px 14px;border-radius:10px;box-shadow:none}
:root[data-ui=modern] #v-office .room.newroom{background:var(--ui-tint);border:1px dashed color-mix(in srgb,var(--won) 45%,var(--line))}
:root[data-ui=modern] #v-office .ochip{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;gap:7px}
:root[data-ui=modern] #v-office .ofcal{grid-template-columns:minmax(0,1fr) minmax(230px,27%);gap:20px}
:root[data-ui=modern] #v-office .ofchead{padding-bottom:12px;border-bottom:1px solid var(--line2);gap:8px}
:root[data-ui=modern] #v-office .ofcal>.panel:last-child{border-top:3px solid var(--dev)}
:root[data-ui=modern] #v-office .ofcalwrap{border-radius:9px}

/* 업무보드: 범위 필터 / 검색·프로젝트 / 보기·생성. 카드의 읽는 순서를 표면으로 구분. */
:root[data-ui=modern] #boardTools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;padding:var(--uia-pad);margin:0 0 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
:root[data-ui=modern] .uib-parts{display:flex;flex-wrap:wrap;gap:7px;grid-column:1;align-items:center}
:root[data-ui=modern] .uib-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px;grid-column:2;grid-row:1}
:root[data-ui=modern] .uib-query{display:flex;align-items:center;flex-wrap:wrap;gap:8px;grid-column:1 / -1;grid-row:2;border-top:1px solid var(--line2);padding-top:12px}
:root[data-ui=modern] .uib-query .ksearch{flex:1 1 220px;width:auto;min-width:0;margin:0;background:var(--panel2);padding:9px 12px;border-radius:8px}
:root[data-ui=modern] .uib-query .ksel{flex:0 1 280px;width:280px;max-width:100%;padding:9px 12px;border-radius:8px;background:var(--panel)}
:root[data-ui=modern] #boardTools .bfilter{grid-column:1 / -1;grid-row:3;margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
:root[data-ui=modern] #boardTools :is(.chip,.segbtn){padding:7px 11px;border-radius:7px;min-height:34px}
:root[data-ui=modern] #boardBody .board{align-items:start;gap:14px}
:root[data-ui=modern] #boardBody .col{--ui-state:var(--ink-faint);background:color-mix(in srgb,var(--ui-state) 6%,var(--bg));border:1px solid var(--line2);padding:12px;min-width:250px}
:root[data-ui=modern] #boardBody .col[data-state="진행중"]{--ui-state:var(--dev)}
:root[data-ui=modern] #boardBody .col[data-state="완료"]{--ui-state:var(--won)}
:root[data-ui=modern] #boardBody .col[data-state="보류"]{--ui-state:var(--warn)}
:root[data-ui=modern] #boardBody .col>h5{padding:0 3px 12px;min-height:32px;gap:8px;flex-wrap:wrap}
:root[data-ui=modern] #boardBody .ktit::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ui-state);margin-right:7px}
:root[data-ui=modern] #boardBody .wip{border:0;background:var(--panel);color:var(--ink-soft);border-radius:6px;padding:2px 7px}
:root[data-ui=modern] #boardBody .kcard{border:1px solid var(--line);border-top:3px solid color-mix(in srgb,var(--c) 55%,var(--line));padding:var(--uia-pad);margin-bottom:var(--uia-gap);background:var(--panel);transition:border-color .15s,box-shadow .15s}
:root[data-ui=modern] #boardBody .kcard:hover{border-color:var(--c);box-shadow:0 4px 12px #182e4910}
:root[data-ui=modern] #boardBody .kcard .top{gap:6px;flex-wrap:wrap;align-items:center}
:root[data-ui=modern] #boardBody .kcard .kno{font-size:11px;letter-spacing:.2px;color:var(--ink-faint)}
:root[data-ui=modern] #boardBody .kcard .t{font-size:16px;font-weight:700;line-height:1.55;margin:12px 0}
:root[data-ui=modern] #boardBody .kcard .kproj{margin:8px 0 6px;font-size:13px}
:root[data-ui=modern] #boardBody .kprog{background:var(--panel2);border-radius:7px;padding:8px 10px;line-height:1.6}
:root[data-ui=modern] #boardBody .kprog.kcall{background:var(--free);color:#fff}
:root[data-ui=modern] #boardBody .kcard .mods{margin-top:10px}
:root[data-ui=modern] #boardBody .kcard .meta{border-top:1px solid var(--line2);padding-top:12px;margin-top:12px;font-size:12px;gap:6px;line-height:1.5}
:root[data-ui=modern] #boardBody .kwaitme{box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 35%,transparent)}
:root[data-ui=modern] :is(.csmod,.dsgnmod){box-shadow:none}
:root[data-ui=modern] .csmod:not(.fold)>.csmh{padding-bottom:10px;border-bottom:1px solid var(--line2);margin-bottom:12px}
:root[data-ui=modern] .modpickbtn{border-radius:8px;min-height:36px;padding:7px 12px}
:root[data-ui=modern] .csbox{width:min(780px,100%);padding-top:24px;background:var(--bg)}
:root[data-ui=modern] .cshead{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
:root[data-ui=modern] .cshead .eb{letter-spacing:.03em;font-size:11px}
:root[data-ui=modern] .csmeta{gap:8px}
:root[data-ui=modern] .csasg{padding-top:12px;gap:10px;flex-wrap:wrap}
:root[data-ui=modern] .csasg .apick{flex:1 1 160px}
:root[data-ui=modern] .csasg .cstoolchips{display:flex;flex-wrap:wrap;gap:7px;max-width:100%}
:root[data-ui=modern] .cstitle{font-size:24px;line-height:1.45;font-weight:750;margin-bottom:14px}
:root[data-ui=modern] .csbodywrap{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:18px}
:root[data-ui=modern] .csmod{padding:var(--uia-pad);margin-bottom:var(--uia-gap)}
:root[data-ui=modern] .modpick{background:var(--panel);border:1px solid var(--dev);border-radius:10px;padding:var(--uia-pad)}

/* 브리핑: 내 브리핑과 회의 기록의 간격, 목록보다 기록을 넓게. */
:root[data-ui=modern] #briefLayer:not(:empty){padding:var(--uia-pad);border:1px solid var(--line);border-top:3px solid var(--dev);border-radius:12px;background:var(--panel);margin-bottom:24px}
:root[data-ui=modern] #briefLayer .bfrow{background:var(--panel2);box-shadow:none;flex-wrap:wrap;padding:var(--uia-row) 14px;gap:9px}
:root[data-ui=modern] #briefLayer .bfpv{flex-basis:200px}
:root[data-ui=modern] #v-meet .mgrid{grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);gap:20px}
:root[data-ui=modern] #v-meet .mtool{padding:12px 0;margin-bottom:10px;gap:8px;flex-wrap:wrap}
:root[data-ui=modern] #meetList .mtile{padding:var(--uia-pad);background:var(--panel2);margin-bottom:10px;border:1px solid var(--line2)}
:root[data-ui=modern] #minutesPanel{border-top:3px solid var(--dev);min-width:0}

/* 회계: 숫자/내 처리 도구/탭/장부의 층을 분리. 결재와 지급을 합치지 않는다. */
:root[data-ui=modern] .uiw-acct-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px;padding-right:54px}
:root[data-ui=modern] .uiw-acct-head .shead{margin:0;flex:1}
:root[data-ui=modern] .uiw-acct-head .board-tools{margin:0!important;gap:10px}
:root[data-ui=modern] .acsum{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px;padding:0;border:0;background:none}
:root[data-ui=modern] .acsum .acsb{flex:1 1 145px;min-width:0;border:1px solid var(--line);border-top:3px solid var(--acct);background:var(--panel);border-radius:10px;padding:var(--uia-pad)}
:root[data-ui=modern] .acsum .acsb.in{border-top-color:var(--won)}
:root[data-ui=modern] .acsum .acsb.out{border-top-color:var(--warn)}
:root[data-ui=modern] .acsum .acsplit{display:none}
:root[data-ui=modern] #acctBody .aq{padding:var(--uia-row) 14px;border-bottom:1px solid var(--line2);gap:12px}
:root[data-ui=modern] #acctBody .amt{font-variant-numeric:tabular-nums;font-weight:750}
:root[data-ui=modern] #acctBody :is(.panel,.acbox){margin-bottom:var(--uia-gap)}

/* 공유함/위키: 탐색은 낮은 채도, 파일/문서는 흰 작업 면. 원래 독립 스크롤 유지. */
:root[data-ui=modern] .pgdlayout{gap:20px}
:root[data-ui=modern] .pgdside{background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:12px 8px}
:root[data-ui=modern] .pgddoc{background:var(--panel);border:1px solid var(--line);border-radius:12px}
:root[data-ui=modern] .pgdmeta{padding:12px 0;border-bottom:1px solid var(--line2);gap:10px;flex-wrap:wrap}
:root[data-ui=modern] .pgdbody{padding-top:20px}
:root[data-ui=modern] .pgdfolds{border-top:1px solid var(--line2);padding-top:16px;margin-top:24px}

/* 금고: 보호된 값의 노출 방식은 그대로, 분류/목록/펼친 상세를 구별. */
:root[data-ui=modern] #vaultBody>.panel{padding:0;border:1px solid var(--line);background:var(--panel);border-radius:12px;overflow:clip}
:root[data-ui=modern] #vaultBody .vtool{padding:14px 16px;background:transparent;border-radius:0;border-bottom:1px solid var(--line2);gap:8px;flex-wrap:wrap;margin:0}
:root[data-ui=modern] #vaultBody .vcats{padding:10px 16px;border-bottom:1px solid var(--line2);margin:0}
:root[data-ui=modern] #vaultBody .vgrp{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:16px 16px 8px;background:transparent;margin:0;letter-spacing:0;color:var(--ink-soft)}
:root[data-ui=modern] #vaultBody .vrow{padding:12px 16px;gap:12px;min-height:58px;margin:0;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:var(--panel)}
:root[data-ui=modern] #vaultBody .vrow:hover{background:var(--panel2)}
:root[data-ui=modern] #vaultBody .vrow.open{background:var(--panel2);border-left:0;border-bottom:0;box-shadow:inset 3px 0 var(--acct)}
:root[data-ui=modern] #vaultBody .vdet{margin:0;padding:0 16px 16px;background:var(--panel2);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:inset 3px 0 var(--acct)}
:root[data-ui=modern] #vaultBody .vgrab{gap:7px}
:root[data-ui=modern] #vaultBody .vcp{padding:7px 10px;border-radius:7px;min-height:32px}

/* 제품: 카드형 개요와 단계별 작업/개요 영역. 단계·반복 물길 모두 유지. */
:root[data-ui=modern] .pklist{max-width:none;grid-template-columns:minmax(0,1fr);gap:12px}
:root[data-ui=modern] .pkrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 20px;border:1px solid var(--line);border-radius:10px}
:root[data-ui=modern] .pkrow .pkname{grid-column:1;font-size:20px;min-width:0;overflow-wrap:anywhere}
:root[data-ui=modern] .pkrow .pkmini{grid-row:2;grid-column:1 / -1;width:100%;gap:5px}
:root[data-ui=modern] .pkrow .pkmini i{height:7px}
:root[data-ui=modern] .pkrow .pkps{grid-row:3;grid-column:1 / -1;line-height:1.7}
:root[data-ui=modern] .pkrow .pkchev{grid-row:1;grid-column:2}
:root[data-ui=modern] .pkrow .pkstuck{justify-self:start}
:root[data-ui=modern] .pkrail{gap:8px;margin-bottom:20px}
:root[data-ui=modern] .pkrseg{padding:14px;min-height:72px}
:root[data-ui=modern] .pkrseg.on{background:color-mix(in srgb,var(--prod) 8%,var(--panel));border-color:var(--prod)}
:root[data-ui=modern] .pkwork{gap:20px}
:root[data-ui=modern] .pkinsp{width:30%;min-width:245px;border-top:3px solid var(--prod);padding:var(--uia-pad)}
:root[data-ui=modern] .pksh{padding:var(--uia-pad)}
:root[data-ui=modern] .pkstep{border-width:1px;border-radius:11px}

/* 분석 표는 밀도/선택/복사 문법을 보존하고 도구·표·근거 상세만 분리한다. */
:root[data-ui=modern] :is(#arBody,#tgRoot){min-width:0}
:root[data-ui=modern] :is(#arBody,#arLatestTools)>.board-tools{padding:var(--uia-pad);border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:16px;gap:9px}
:root[data-ui=modern] #arBody .arstats{gap:12px;margin-bottom:18px}
:root[data-ui=modern] #arBody :is(.armswrap,.ardshwrap){border:1px solid var(--line);border-radius:10px;background:var(--panel)}
:root[data-ui=modern] #arBody :is(.artbl,.ardsh) th{background:var(--panel2);color:var(--ink-soft)}
:root[data-ui=modern] #arBody .arbanner{padding:var(--uia-row) 16px;border-radius:9px;margin-bottom:16px}
:root[data-ui=modern] :is(.artools,.tgtools){padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:9px;gap:9px;flex-wrap:wrap}
:root[data-ui=modern] :is(.arshwrap,.tgshwrap){border:1px solid var(--line);border-radius:10px;background:var(--panel)}
:root[data-ui=modern] :is(.arsh,.tgsh) th{background:var(--panel2);color:var(--ink-soft)}
:root[data-ui=modern] :is(.arsh,.tgsh) tbody tr:hover td{background:color-mix(in srgb,var(--dev) 4%,var(--panel))}
:root[data-ui=modern] .tgwork{gap:20px}
:root[data-ui=modern] .tginsp{border-top:3px solid var(--prod);border-radius:10px;background:var(--panel);padding:var(--uia-pad)}
:root[data-ui=modern] #adopsRoot .aop-context{padding:12px 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 16px}
:root[data-ui=modern] #adopsRoot :is(.aop-card,.aop-panel){border-radius:11px;padding:var(--uia-pad);box-shadow:none}
:root[data-ui=modern] #adopsRoot .aop-grid{gap:var(--uia-gap)}
:root[data-ui=modern] #adopsRoot>.systabs{gap:0;flex-wrap:nowrap;overflow-x:auto;margin-bottom:16px}
:root[data-ui=modern] #adopsRoot>.systabs>button{flex:0 0 auto;min-width:0;min-height:42px;flex-direction:row;align-items:center;padding:10px 14px;white-space:nowrap}
:root[data-ui=modern] #adopsRoot>.systabs>button>span{display:none}
:root[data-ui=modern] #adopsRoot .aop-inbox{border-top:1px solid var(--line)}
:root[data-ui=modern] #adopsRoot .aop-note{background:transparent;border:0;border-left:2px solid var(--line);border-radius:0;padding:8px 12px;color:var(--ink-soft)}
:root[data-ui=modern] #adopsRoot .aop-warn{border-left-color:var(--warn);color:var(--warn)}
:root[data-ui=modern] #adopsRoot .aop-stats .arstat{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:none}
:root[data-ui=modern] #adopsRoot .aop-panel>.aop-panel{border:0;padding:0}
@media(max-width:860px){:root[data-ui=modern] #adopsRoot>.systabs>button{min-height:44px;padding:10px 12px}}

/* 브레인/정제소/시스템: 탐색·작업 영역, 상태·원문, 관리 탭의 구분. */
:root[data-ui=modern] .bmwrap{gap:20px;grid-template-columns:210px minmax(0,1fr)}
:root[data-ui=modern] .bmlist{border-radius:10px;background:var(--panel2);border-color:var(--line2)}
:root[data-ui=modern] .bmmap{padding:var(--uia-row) 10px;border-radius:7px}
:root[data-ui=modern] .bmmap.on{background:var(--panel);border-color:color-mix(in srgb,var(--prod) 40%,var(--line));box-shadow:inset 3px 0 var(--prod)}
:root[data-ui=modern] .bmpanel{border-radius:12px;border-color:var(--line)}
:root[data-ui=modern] .bmhead{padding:14px 18px;background:var(--panel);flex-wrap:wrap;gap:8px}
:root[data-ui=modern] .bmfoot{background:var(--panel2);padding:10px 16px;flex-wrap:wrap}
:root[data-ui=modern] #fbBody .fbstat{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:20px 24px;background:var(--ui-tint);border:1px solid var(--line);border-left:4px solid var(--won);border-radius:10px;color:var(--ink);text-align:left}
:root[data-ui=modern] #fbBody .fbstat .n{font-size:30px;line-height:1.3;margin:0;color:var(--won)}
:root[data-ui=modern] #fbBody .fbstat .w{margin-left:auto;color:var(--ink-soft)}
:root[data-ui=modern] #fbBody>.archips{padding:14px 0;margin:0}
:root[data-ui=modern] #sysBody{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px 24px;align-items:start}
:root[data-ui=modern] #sysFind{grid-column:1 / -1;max-width:none;margin:0;background:var(--panel)}
:root[data-ui=modern] #sysTabs{display:flex;flex-direction:column;grid-column:1;gap:5px;border:0;margin:0;position:sticky;top:12px}
:root[data-ui=modern] #sysTabs .systab2{width:100%;justify-content:flex-start;text-align:left;border:0;border-radius:8px;padding:12px 14px;min-height:42px}
:root[data-ui=modern] #sysBody #sysTabs .systab2.on{background:var(--panel);border-bottom:0;box-shadow:inset 3px 0 var(--won);color:var(--won)}
:root[data-ui=modern] #sysPane{min-width:0;grid-column:2}
:root[data-ui=modern] #sysPane .panel{margin-bottom:var(--uia-gap)}
:root[data-ui=modern] #v-chat :is(.ch-list,.thread){background:var(--panel2);border-radius:10px}
:root[data-ui=modern] #v-chat .chhead{padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
:root[data-ui=modern] #v-chat .composer{border-radius:10px;border:1px solid var(--line);background:var(--panel)}
:root[data-ui=modern] :is(#v-admin,#v-work)>.board-tools{padding:var(--uia-pad);border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:18px}
:root[data-ui=modern] .wsw-mopt{flex-wrap:wrap;min-width:0;gap:8px}
:root[data-ui=modern] .wsw-mopt .mn{min-width:0;overflow-wrap:anywhere}

/* 글씨 크기는 uiappearance의 원래 규칙 순서 복제, 간격은 밀도 변수로만 조절. */
:root[data-ui=modern][data-ui-density=compact] :is(#boardTools,.ofband,.ofcal,#briefLayer){margin-bottom:12px}
:root[data-ui=modern][data-ui-density=compact] #v-office .obrow{min-height:52px}
:root[data-ui=modern][data-ui-density=compact] #boardBody .kcard .t{margin:8px 0}
:root[data-ui=modern][data-ui-density=compact] #boardBody .kcard .meta{padding-top:8px;margin-top:8px}
:root[data-ui=modern][data-ui-density=compact] .pkrow{padding:14px;gap:10px}
:root[data-ui=modern][data-ui-density=compact] #vaultBody .vrow{min-height:50px}
@media(max-width:1200px){
  :root[data-ui=modern] .pcwork{grid-template-columns:minmax(0,1fr)}
  :root[data-ui=modern] #boardTools{grid-template-columns:minmax(0,1fr)}
  :root[data-ui=modern] .uib-actions{grid-column:1;grid-row:4;justify-content:flex-start}
  :root[data-ui=modern] #v-office .ofcal{grid-template-columns:minmax(0,1fr)}
  :root[data-ui=modern] .pkinsp{min-width:220px}
}
@media(max-width:980px){
  :root[data-ui=modern] .pkmain{width:100%}
  :root[data-ui=modern] #v-meet .mgrid{grid-template-columns:minmax(0,1fr)}
  :root[data-ui=modern] .pkinsp{width:100%;min-width:0}
  :root[data-ui=modern] #sysBody{grid-template-columns:minmax(0,1fr);gap:12px}
  :root[data-ui=modern] #sysTabs{grid-column:1;flex-direction:row;flex-wrap:wrap;position:static}
  :root[data-ui=modern] #sysTabs .systab2{width:auto}
  :root[data-ui=modern] #sysPane{grid-column:1}
}
@media(max-width:860px){
  :root[data-ui=modern] #v-admin .ptitle{flex-wrap:wrap}
  :root[data-ui=modern] #v-admin .ptitle .sub{white-space:normal;min-width:0;max-width:100%;overflow-wrap:anywhere}
  :root[data-ui=modern] .wsw-id{flex-wrap:wrap}
  :root[data-ui=modern] .pksh{flex-wrap:wrap}
  :root[data-ui=modern] .pkshr{width:100%;margin-left:0;flex-wrap:wrap}
  :root[data-ui=modern] .pkcrow{flex-wrap:wrap}
  :root[data-ui=modern] .pkct{max-width:calc(100% - 20px);white-space:normal;overflow-wrap:anywhere;flex:1 1 calc(100% - 20px)}
  :root[data-ui=modern] .office{padding:18px 12px 28px}
  :root[data-ui=modern] #v-office .obrow{grid-template-columns:minmax(0,1fr);gap:9px;padding:var(--uia-pad)}
  :root[data-ui=modern] #v-office .oblab{width:auto;flex-wrap:wrap}
  :root[data-ui=modern] #v-office .ofband>.ptitle{padding:var(--uia-pad)}
  :root[data-ui=modern] #v-office .ofnow{gap:10px;padding:12px;flex-direction:column;align-items:stretch}
  :root[data-ui=modern] #nowList{flex:none;width:100%}
  :root[data-ui=modern] #nowList .now-item{max-width:100%;flex-shrink:0}
  :root[data-ui=modern] #nowList .acts{flex-wrap:wrap}
  :root[data-ui=modern] .uib-query .ksel{flex-basis:100%;width:100%}
  :root[data-ui=modern] #boardBody .col{min-width:240px}
  :root[data-ui=modern] :is(.actabs,.vlanes,#arTabs,.tgtabs)>button{padding:8px 10px}
  :root[data-ui=modern] #vaultBody .vrow{gap:8px}
  :root[data-ui=modern] .bmwrap{grid-template-columns:minmax(0,1fr);gap:12px}
  :root[data-ui=modern] #fbBody .fbstat{padding:16px;gap:12px}
  :root[data-ui=modern] #fbBody .fbstat .w{margin-left:0;flex-basis:100%}
  :root[data-ui=modern] .csbox{padding:16px 14px calc(110px + env(safe-area-inset-bottom,0px))}
  :root[data-ui=modern] .csreg{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
}
/* 글자 대신 출력되던 장식 아이콘도 같은 Google 원본을 사용한다. */
:root[data-ui=modern][data-ui-icons=google] .wsd-stdc.ro .sl::before,:root[data-ui=modern][data-ui-icons=google] .pllane .plrun.dust::after,:root[data-ui=modern][data-ui-icons=google] .plcell.win::before,:root[data-ui=modern][data-ui-icons=google] .plrrow.first .plrl::after{content:"";display:inline-block;width:1em;height:1em;background:currentColor;mask:var(--uia-pseudo) center/contain no-repeat;vertical-align:-.12em}
:root[data-ui=modern][data-ui-icons=google] .wsd-stdc.ro .sl::before{--uia-pseudo:url('/vendor/material-symbols/lock_24px.svg');margin-right:4px}
:root[data-ui=modern][data-ui-icons=google] .pllane .plrun.dust::after{--uia-pseudo:url('/vendor/material-symbols/air_24px.svg')}
:root[data-ui=modern][data-ui-icons=google] .plcell.win::before{--uia-pseudo:url('/vendor/material-symbols/workspace_premium_24px.svg')}
:root[data-ui=modern][data-ui-icons=google] .plrrow.first .plrl::after{--uia-pseudo:url('/vendor/material-symbols/celebration_24px.svg');margin-left:4px}

/* 구매 묶음은 목록 가장자리에 붙이지 않고, 분류 표시와 같은 기준선으로 맞춘다. */
:root[data-ui=modern] #vaultBody .vbat{margin:4px 16px 12px;width:auto;max-width:calc(100% - 32px)}
:root[data-ui=modern] #vaultBody .vgrp i{margin:0}
:root[data-ui=modern] #vaultBody .vgrp .vtag{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:24px;padding:3px 6px;margin:0;font-size:11px;line-height:1;vertical-align:middle;box-sizing:border-box}
:root[data-ui=modern] #vaultBody .vgrp :is(.vtag.ad,.vtag.lk){width:24px;height:24px;padding:3px;border-radius:6px;background:transparent}
:root[data-ui=modern] #vaultBody .vgrp :is(.uia-symbol,.uia-original){width:14px;height:14px;min-width:14px;min-height:14px}
@media(max-width:720px){
  :root[data-ui=modern] #vaultBody .vrow[data-vid]{grid-template-columns:minmax(0,1fr);gap:8px}
  :root[data-ui=modern] #vaultBody .vrow[data-vid] .vw{flex-direction:column;align-items:flex-start;gap:4px}
  :root[data-ui=modern] #vaultBody .vrow[data-vid] .vw>b{overflow-wrap:anywhere}
  :root[data-ui=modern] #vaultBody .vrow[data-vid] .vsub{max-width:100%}
  :root[data-ui=modern] #vaultBody .vrow[data-vid] .vst{justify-content:flex-start}
}
/* 공유함 본문은 style.css의 기존 레이아웃을 양쪽 UI가 함께 사용한다. */
:root[data-ui=modern] .fxpgtop{padding:0 54px 0 0}
@media(max-width:860px){:root[data-ui=modern] .fxwrap{padding-top:14px;padding-left:12px;padding-right:12px}:root[data-ui=modern] .fxsearch{flex:1 1 180px;min-width:0}}