/* 유저 요청(2026-07-22, "테마 화이트로 바꿀 수 있게") — 구조색을 전부 변수화, 기본값(다크)은 기존과
   동일(회귀 없음), [data-theme="light"]에서만 오버라이드. 토글은 상단 버튼 + localStorage(§v4_theme). */
:root{
  /* §P6(2026-07-23) 비주얼 폴리시 — 타입스케일. 그동안 10~16px 사이 값들을 여기저기서 매직넘버로
     흩뿌려 써서(칩 11px, 사이드바제목 12px, h1 16px, 메타 10px 등) 위계가 코드만 봐선 안 보였음 —
     이름 붙은 6단 스케일로 모아서 "이 요소가 왜 이 크기인지"가 변수명으로 드러나게 함. 라이트/다크
     공통(글자 크기는 테마 안 탐, 색만 테마별로 다름 — 위 :root/:root[light] 분리와 다른 축). */
  --fs-xs:10px; --fs-sm:11px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px;
  --bg:#0e0f12; --fg:#e8e8ea;
  --border:#2a2b30; --border2:#333;
  --panel-bg:#15161a; --panel-bg2:#16171b; --input-bg:#1a1b1f;
  --hover-bg:#1c1d22; --active-bg:#2a3140; --active-hover-bg:#354055;
  --text-muted:#888; --text-muted2:#999; --text-dim:#777; --text-strong:#eee; --text-max:#fff;
  --agentitem-fg:#ccc; --h1-fg:#9aa; --proj-fg:#9ab; --row-border:#1e1f24;
  --err:#ff6b6b; --thinking:#666; --compact:#7fbfff; --tool:#c9a869; --warn:#e0a87f; --tok-key:#d6a4ff; --tok-var:#8fe3d8;
  --link-bg:#22303f; --link-fg:#7fbfff; --link-border:#2f4256;
  --lab-bg:#1c3a2a; --lab-fg:#7fe0a0; --personal-bg:#3a2a1c; --personal-fg:#e0b87f;
  /* §벤더표시(2026-08-01) — 계정슬롯이 없는 벤더(codex/cursor)용 배지색. 과금축(연구실/개인)과
     혼동되면 안 되므로 초록·주황 계열을 피해 청보라로 뺀다. */
  --vendor-bg:#232a4a; --vendor-fg:#9fb4f0;
  --success:#7fe0a0;
  --user-msg-bg:#1e2a38; --user-msg-bar:#4a86c8;  /* §유저메시지구분 */
  /* §P6(2026-07-23) 비주얼 폴리시 — accent 통일: 예전엔 --compact(#7fbfff)와 --link-fg(#8ab4d8)가
     같은 "강조 파랑" 용도인데 미세하게 다른 값이라 파편화돼있었음(위에서 link-fg를 compact와 동일값으로
     맞춤) — --accent를 그 위에 얹어 버튼 등 새 강조 요소도 같은 색 계열을 쓰게 함. */
  --accent:#7fbfff; --accent-fg:#0e0f12; --accent-hover:#9ecfff;
  /* §P6 WCAG 보정(2026-07-23): --err(#ff6b6b)는 밝은 빨강이라 흰 글자(--text-max) 대비 ~2.8:1로
     AA(4.5:1) 미달 — 어두운 글자(--bg값)로 바꾸면 ~7.5:1로 통과. 라이트테마 --err(#c62828)는
     반대로 어두워서 흰 글자가 이미 ~5.6:1로 통과하므로 danger-fg를 테마별로 분리. */
  --danger-fg:#0e0f12;
  --overlay-soft:rgba(0,0,0,.25); --overlay:rgba(0,0,0,.4); --overlay-strong:rgba(0,0,0,.6);
  /* §인라인코드칩(2026-08-21) — 종전 .md code 가 --input-bg 를 그대로 써서 라이트테마에선
     흰 패널 위 흰 배경(#fff/#fff)이라 칩 경계가 안 보이고, 다크에선 #1a1b1f 라 패널(#15161a)과
     차이가 거의 없었음. 배경/테두리/글자색을 코드 전용 3변수로 분리해 테마별로 대비를 준다. */
  /* 2026-08-22 재조정 — 불투명 고정색이라 패널/코드블록/인용 위에서 대비가 표면마다
     달라졌음. Primer(bgColor-neutral-muted)·Docusaurus(--ifm-code-background)가 쓰는
     반투명 오버레이 방식으로 바꿔 어느 표면 위에서도 같은 만큼 밝아지게 한다. 색조는
     링크 파랑(--link-fg)과 헷갈리지 않게 채도를 낮춘 청회색. */
  --code-bg:rgba(128,145,175,.22); --code-bd:rgba(150,170,200,.35);
  --code-fg:#dfe6f0; --code-blk-bg:#101216;
}
:root[data-theme="light"]{
  --bg:#f5f5f7; --fg:#1c1d21;
  --border:#d9d9de; --border2:#c7c7cc;
  --panel-bg:#ffffff; --panel-bg2:#f0f0f2; --input-bg:#ffffff;
  --hover-bg:#ececef; --active-bg:#dbe4f3; --active-hover-bg:#c7d6ee;
  --text-muted:#666; --text-muted2:#555; --text-dim:#777; --text-strong:#1c1d21; --text-max:#000;
  --agentitem-fg:#2c2d31; --h1-fg:#3a4a56; --proj-fg:#2f4658; --row-border:#e4e4e8;
  --err:#c62828; --thinking:#777; --compact:#1565c0; --tool:#8a6d1f; --warn:#a15a1f; --tok-key:#6a3bb5; --tok-var:#0f766e;
  --link-bg:#e3edf7; --link-fg:#1565c0; --link-border:#b9d3ea;
  --lab-bg:#dcf3e4; --lab-fg:#1f7a44; --personal-bg:#f7e6d3; --personal-fg:#9a5f18;
  --vendor-bg:#e2e7fb; --vendor-fg:#33459c;
  --success:#1f7a44;
  --user-msg-bg:#eaf2fb; --user-msg-bar:#1565c0;  /* §유저메시지구분 */
  --accent:#1565c0; --accent-fg:#ffffff; --accent-hover:#0d47a1;
  --danger-fg:#ffffff;
  --overlay-soft:rgba(0,0,0,.08); --overlay:rgba(0,0,0,.2); --overlay-strong:rgba(0,0,0,.35);
  --code-bg:rgba(60,95,150,.10); --code-bd:rgba(60,95,150,.26);
  --code-fg:#1f2b3d; --code-blk-bg:#f5f6f8;
}
/* §코딩폰트(2026-08-22, 유저 "나눔코딩같은거") — D2Coding 1.3.3 자체호스팅(OFL).
   한글 고정폭(영문:한글 = 1:2)이라 한글 섞인 코드/표 정렬이 안 깨짐. 외부 CDN 미사용. */
@font-face{font-family:'D2Coding';src:url('../../static/fonts/D2Coding.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
:root{--mono:'D2Coding','Cascadia Code','Consolas','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;margin:0;background:var(--bg);color:var(--fg);display:flex;height:100vh;height:var(--app-h,100dvh);overflow:hidden}
/* §사이드바배경(2026-08-10) — 모바일 오프캔버스(position:fixed)에서 배경 미지정 시
   뒤 채팅이 비쳐 겹쳐 보임. 데스크톱 flex 배치에서도 패널면으로 통일. */
#sidebar{width:200px;border-right:1px solid var(--border);padding:10px;overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;background:var(--panel-bg)}
#sidebar h2{font-size:var(--fs-base);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
/* §사이드바접기(2026-07-27, 유저 요청) — 우측 레일과 동일한 방식. 접으면 폭만 남기고 내용은 숨긴다.
   기본은 펼침(요청). 접힌 동안엔 리사이즈 핸들도 막아 폭이 어긋나는 걸 방지. */
#sidebar.collapsed{width:0;padding:0;border-right:none;overflow:hidden}
/* !important — 사이드바 1차 블록(자동운행 카드·에이전트 설정 묶음)은 인라인 style="display:flex"를
   달고 있어서 인라인이 이 규칙을 이겼다(유저 신고 2026-08-26 "접어도 몇 버튼이 남아서 안 접혀").
   폭은 CSS로 못 지운다(드래그 인라인 width) — applySidebarCollapsed에서 JS로 걷어낸다. */
#sidebar.collapsed > *{display:none !important}
#sidebarResize.collapsed{pointer-events:none}
.memo-pad{padding:0 0 8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.memo-pad-head{display:flex;align-items:center;gap:4px;margin-bottom:5px}
.memo-pad-title{flex:1;font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.memo-pad-head button{font-size:var(--fs-xs);padding:1px 5px;background:none;border:0;color:var(--text-muted)}
.memo-tabs{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.memo-tab{max-width:120px;flex:0 0 auto;padding:3px 7px;font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px 5px 0 0}
.memo-tab.active{color:var(--proj-fg);border-color:var(--proj-fg);background:color-mix(in srgb,var(--proj-fg) 10%,transparent)}
#memoEditor{box-sizing:border-box;width:100%;height:128px;min-height:72px;max-height:320px;resize:vertical;margin:0;padding:7px 8px;font-family:var(--mono);font-size:var(--fs-sm);line-height:1.45}
.memo-pad-foot{display:flex;align-items:center;gap:5px;margin-top:4px;min-width:0}
#memoStatus{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:var(--fs-xs)}
.memo-pad.collapsed .memo-tabs,.memo-pad.collapsed #memoEditor,.memo-pad.collapsed .memo-pad-foot{display:none}
.memo-pad.collapsed .memo-pad-head{margin-bottom:0}
#sidebarReopenBtn{position:fixed;left:0;top:8px;z-index:45;border:1px solid var(--border2);border-left:none;
  background:var(--panel-bg);color:var(--text-muted);border-radius:0 6px 6px 0;padding:4px 7px;
  cursor:pointer;font-size:var(--fs-sm);line-height:1;display:none}
#sidebarReopenBtn.show{display:block}
#main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#mainContent{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;min-height:0}
#sidebarResize{width:5px;cursor:col-resize;flex-shrink:0;background:transparent;transition:background .12s;z-index:10}
#sidebarResize:hover,#sidebarResize.dragging{background:var(--accent)}
#rightRail{width:260px;border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .18s ease;overflow:hidden}
#rightRail.collapsed{width:32px}
#rightRail.dragging{transition:none}
#railResizeHandle{width:4px;cursor:col-resize;background:transparent;flex-shrink:0;transition:background .12s;display:none}
#railResizeHandle.open{display:block}
#railResizeHandle.open:hover,#railResizeHandle.dragging{background:var(--accent)}
#railHeader{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
#railHeader span{font-size:var(--fs-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
#railToggleBtn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;font-size:var(--fs-base);flex-shrink:0}
#railToggleBtn:hover{color:var(--fg)}
#fileRail{flex:1;overflow-y:auto;padding:6px;font-size:var(--fs-sm)}
#fileRail .r-node{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:4px;cursor:pointer;white-space:nowrap;user-select:none;font-size:var(--fs-sm)}
#fileRail .r-node:hover{background:var(--hover-bg)}
#fileRail .r-node.active{background:var(--active-bg);color:var(--text-max);box-shadow:inset 2px 0 0 var(--accent)}
#fsToolbar button.on{color:var(--text-max);background:var(--active-bg);border-color:var(--accent)}
/* §다중선택·드래그이동·업로드(2026-08-14) — 선택(Ctrl/Shift+클릭)은 왼쪽 띠로, 드롭 대상은 점선으로 구분 */
#fileRail .r-node.fs-sel{background:var(--active-bg);box-shadow:inset 2px 0 0 var(--accent)}
#fileRail .r-node.fs-drop{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--hover-bg)}
#fileRail.fs-drop{outline:2px dashed var(--accent);outline-offset:-3px}
#fsUpProg{padding:3px 6px;border-bottom:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted)}
#fsUpProg .bar{height:4px;background:var(--border2);border-radius:2px;overflow:hidden;margin-top:3px}
#fsUpProg .bar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
@keyframes fsIndet{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
#fsUpProg .bar.indet > i{width:34%;animation:fsIndet 1.15s ease-in-out infinite;transition:none}
@keyframes fsSpin{to{transform:rotate(360deg)}}
.toast .tspin{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:fsSpin .8s linear infinite}
.toast .tbar{height:4px;background:var(--border2);border-radius:2px;overflow:hidden;margin-top:5px}
.toast .tbar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.toast .tbar.indet > i{width:34%;animation:fsIndet 1.15s ease-in-out infinite;transition:none}
.toast .tcancel{float:right;margin:-1px 0 0 8px;padding:1px 7px;font-size:var(--fs-xs);background:var(--input-bg);color:var(--text-muted);border:1px solid var(--border2);border-radius:5px;cursor:pointer}
.toast .tcancel:hover{color:var(--text-strong);border-color:var(--accent)}
.toast .tcancel:disabled{opacity:.5;cursor:default}
#fileRail .r-node .r-icon{flex-shrink:0;font-size:.85em}
#fileRail .r-node .r-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
#fileRail .r-children{margin-left:14px}
#rightRail.collapsed #railHeader span,#rightRail.collapsed #fileRail{display:none}
/* §파일탐색기 확장(2026-08-13) — 주소창/즐겨찾기/새 파일·폴더 툴바 */
#railAddrBar{display:flex;gap:3px;padding:6px 6px 0;flex-shrink:0}
#fsAddrInput{flex:1;min-width:0;font-size:var(--fs-xs);padding:3px 5px;background:var(--panel-bg2);color:var(--text-strong);border:1px solid var(--border);border-radius:4px}
#railAddrBar button{background:none;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;padding:2px 5px;border-radius:4px;font-size:var(--fs-xs);flex-shrink:0}
#railAddrBar button:hover{color:var(--fg);background:var(--hover-bg)}
#fsFavList{display:flex;flex-wrap:wrap;gap:3px;padding:5px 6px 0}
.fs-fav-chip{font-size:var(--fs-xs);color:var(--text-muted);background:var(--panel-bg2);border:1px solid var(--border);border-radius:10px;padding:1px 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.fs-fav-chip:hover{color:var(--fg);border-color:var(--accent)}
#fsToolbar{display:flex;gap:3px;padding:5px 6px 2px;flex-shrink:0}
#fsToolbar button{background:none;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:var(--fs-xs)}
#fsToolbar button:hover{color:var(--fg);background:var(--hover-bg)}
#rightRail.collapsed #railAddrBar,#rightRail.collapsed #fsFavList,#rightRail.collapsed #fsToolbar{display:none}
#fsCtxMenu{position:fixed;z-index:9999;background:var(--panel-bg);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.3);padding:4px;min-width:140px}
#fsCtxMenu .fs-ctx-item{padding:5px 10px;font-size:var(--fs-sm);cursor:pointer;border-radius:4px;white-space:nowrap;color:var(--text-strong)}
#fsCtxMenu .fs-ctx-item:hover{background:var(--hover-bg)}
#fsCtxMenu .fs-ctx-item.danger{color:var(--danger,#e5484d)}
.fs-path-link{color:var(--accent);text-decoration:underline dotted;text-underline-offset:2px;cursor:pointer;font-family:var(--mono);font-size:0.95em;word-break:break-all}
.fs-path-link:hover{text-decoration-style:solid}
/* PROP-133 item1: :line 링크로 점프했을 때 3초간 그 줄을 물들인다 */
.cm-line.v4-line-flash{background:rgba(255,196,0,0.22);border-radius:2px}
/* §파일탐색기 폴더 다이얼로그(2026-08-13) — 서버측 트리를 브라우징하는 in-app 대체(브라우저는 원격
   서버 파일시스템을 가리키는 네이티브 OS 다이얼로그를 낼 수 없음) */
.fs-picker-row{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:4px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-sm);color:var(--text-strong)}
.fs-picker-row:hover{background:var(--hover-bg)}
/* §P8(2026-07-25) VS Code 탭 시스템 */
#tabBar{display:flex;align-items:stretch;background:var(--panel-bg);border-bottom:1px solid var(--border);overflow-x:hidden;flex-shrink:0;min-height:33px}
#tabsList{display:flex;align-items:stretch;flex:1;overflow-x:auto;min-width:0}
#tabsList::-webkit-scrollbar{height:3px}
#tabsList::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.v4tab{display:flex;align-items:center;gap:5px;padding:0 10px;border-right:1px solid var(--border);cursor:pointer;font-size:12px;white-space:nowrap;user-select:none;background:var(--bg3);color:var(--text-muted);min-width:80px;max-width:180px;transition:background .1s;flex-shrink:0}
.v4tab:hover{background:var(--hover-bg)}
.v4tab.active{background:var(--panel-bg2);color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--accent)}
.v4tab .tab-lbl{overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-size:12px}
.v4tab .tab-icon{font-size:11px;flex-shrink:0;opacity:.7}
/* §미읽음(2026-08-12) — 답변 완료·아직 안 본 탭은 빨간 점(예전 warn 노란 점은 프리페치가
   modified를 즉시 지워 사실상 사라졌음). 파일 dirty와 구분: chat unread=err, file dirty=warn는
   fileModDot가 별도. */
.v4tab.modified .tab-lbl::before{content:'● ';font-size:8px;color:var(--err);vertical-align:middle}
.v4tab-close{padding:1px 4px;border-radius:3px;background:none;border:none;color:inherit;cursor:pointer;font-size:12px;line-height:1;opacity:.5;flex-shrink:0}
.v4tab-close:hover{background:var(--border2);opacity:1}
#tabBarActions{display:flex;align-items:center;padding:0 4px;gap:2px;flex-shrink:0;border-left:1px solid var(--border)}
#tabBarActions button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:3px 7px;border-radius:3px}
#tabBarActions button:hover{background:var(--border);color:var(--fg)}
/* §MOBBAR_INLINE(p536) — 탭바로 승격한 📌 고정 토글의 켜짐 상태 */
#tabBarActions #pinLedeBtn{font-size:12px;opacity:.5}
#tabBarActions #pinLedeBtn.on{opacity:1;background:var(--active-bg);color:var(--text-max)}
/* 워크벤치 레이아웃 */
#workbench{flex:1;display:flex;min-height:0;overflow:hidden}
#paneMain{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#paneSplitHandle{width:4px;cursor:col-resize;background:transparent;flex-shrink:0;transition:background .12s;display:none}
#paneSplitHandle.open{display:block}
#paneSplitHandle.open:hover,#paneSplitHandle.dragging{background:var(--accent)}
#paneSide{display:none;flex-direction:column;flex-shrink:0;width:50%;min-width:200px;max-width:75%;overflow:hidden}
#paneSide.open{display:flex}
/* §PC 집중보기·중간 화면 대응(2026-08-26) — 21:9 전용 고정폭을 피하고 16:9·3:2에서도
   본문 최소폭을 확보한다. 집중보기는 모바일과 같은 배타 표시지만 사용자가 직접 고른다. */
@media (min-width:769px){
  #mobRailBtn{display:none}
  body.desk-chat-only #paneSide,body.desk-chat-only #paneSplitHandle{display:none !important}
  body.desk-file-only #paneMain,body.desk-file-only #paneSplitHandle{display:none !important}
  body.desk-file-only #paneSide.open{display:flex !important;width:100% !important;max-width:none !important;min-width:0}
}
@media (min-width:769px) and (max-width:1500px){
  #mainContent{padding:10px}
  #paneSide{width:44%;min-width:320px}
  #rightRail:not(.collapsed){width:220px}
  #mainContent.side-chat-mode #drSplitRow{gap:6px}
}
@media (min-width:769px) and (max-aspect-ratio:3/2){
  #paneSide{width:46%;min-width:300px}
  #rightRail:not(.collapsed){width:200px}
}
@media (min-width:769px) and (max-height:800px){
  #mainContent{padding-top:8px;padding-bottom:8px}
  #sideChatHead{padding-top:4px;padding-bottom:4px}
}
/* §레이아웃 프리셋(2026-08-14, 유저요청 "ui를 에이전트 위주에서 파일 위주로 개편 ... 토글로") —
   DOM 구조는 그대로 두고 flex order만 뒤집는 방식. 20k줄 단일파일에서 마크업을 옮기면 회귀 위험이
   크고 롤백도 어렵다. 순서: [파일트리][에디터][채팅][에이전트]. 테두리 방향도 함께 뒤집는다.
   드래그 리사이즈는 방향 부호만 반전(_layoutSign) — 폭 조절 자체는 기존과 동일하게 유지. */
body.layout-file #rightRail{order:1;border-left:none;border-right:1px solid var(--border)}
body.layout-file #railResizeHandle{order:2}
body.layout-file #main{order:3}
body.layout-file #sidebarResize{order:4}
body.layout-file #sidebar{order:5;border-right:none;border-left:1px solid var(--border)}
body.layout-file #paneSide{order:1}
body.layout-file #paneSplitHandle{order:2}
body.layout-file #paneMain{order:3}
body.layout-file #sidebarReopenBtn{left:auto;right:0;border-left:1px solid var(--border2);border-right:none;border-radius:6px 0 0 6px}
/* §도킹 모드(2026-08-18, 유저요청 "왼쪽에 파일탐색기와 같이 ... 버튼누르면 에이전트 리스트, 또 누르면 파일탐색기") —
   에이전트 패널(#sidebar)과 파일 레일(#rightRail)을 화면 왼쪽 같은 자리에 두고 활동바(#dockTabBar)로 한 쪽만 보인다.
   프리셋(layout-file)보다 뒤에 선언해 같은 특이도에서 이기게 한다 — 도킹 중엔 프리셋 순서를 무시한다. */
#dockTabBar{display:none;order:0;flex-direction:column;align-items:center;gap:2px;width:40px;flex-shrink:0;
  padding:6px 0;background:var(--panel-bg);border-right:1px solid var(--border)}
#dockTabBar button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:var(--fs-lg);
  line-height:1;padding:7px 0;width:32px;border-radius:6px}
#dockTabBar button:hover{background:var(--active-bg);color:var(--fg)}
#dockTabBar button.on{background:var(--active-bg);color:var(--text-max)}
.dockModeBtn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;font-size:var(--fs-base);flex-shrink:0}
.dockModeBtn:hover{color:var(--fg)}
#rightRail.collapsed .dockModeBtn{display:none}
body.dock-left #dockTabBar{display:flex}
body.dock-left #rightRail{order:2;border-left:none;border-right:1px solid var(--border)}
body.dock-left #railResizeHandle{order:3}
body.dock-left #sidebar{order:2;border-left:none;border-right:1px solid var(--border)}
body.dock-left #sidebarResize{order:3}
body.dock-left #main{order:4}
body.dock-left.dock-agents #rightRail,body.dock-left.dock-agents #railResizeHandle{display:none}
body.dock-left.dock-files #sidebar,body.dock-left.dock-files #sidebarResize{display:none}
/* §SYSTEM_EDITOR(PROP-143) — 좌측 3번째 탭. 에이전트·파일 레일과 같은 자리를 쓴다. */
#designRail{width:260px;border-right:1px solid var(--border);display:none;flex-direction:column;
  flex-shrink:0;overflow:hidden;background:var(--panel-bg)}
body.dock-left.dock-design #designRail{display:flex;order:2}
body.dock-left.dock-design #sidebar,body.dock-left.dock-design #sidebarResize,
body.dock-left.dock-design #rightRail,body.dock-left.dock-design #railResizeHandle{display:none}
body.dock-left.dock-design #sidebarReopenBtn{display:none}
#designRail .dr-head{display:flex;align-items:center;gap:6px;padding:7px 9px;border-bottom:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--text-strong);flex-shrink:0}
#designRail .dr-head b{flex:1;font-weight:600}
#designRail .dr-bar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);flex-shrink:0}
#designRail .dr-bar input{flex:1;min-width:0;font-size:var(--fs-xs);padding:4px 6px;border-radius:5px;
  border:1px solid var(--border2);background:var(--input-bg);color:var(--text-strong)}
#designRail .dr-bar button,#designRail .dr-head button{background:none;border:1px solid var(--border2);
  color:var(--text-muted);border-radius:5px;cursor:pointer;font-size:var(--fs-xs);padding:3px 7px}
#designRail .dr-bar button:hover,#designRail .dr-head button:hover{background:var(--active-bg);color:var(--fg)}
#designRail select.dr-root{width:100%;font-size:var(--fs-xs);padding:4px 6px;border-radius:5px;
  border:1px solid var(--border2);background:var(--input-bg);color:var(--text-strong)}
#designRailList{flex:1;overflow-y:auto;padding:4px 6px 12px}
.dr-item{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;cursor:pointer;
  font-size:var(--fs-sm);color:var(--text-strong)}
.dr-item:hover{background:var(--active-bg)}
.dr-item.on{background:var(--active-bg);color:var(--text-max)}
.dr-item .k{flex-shrink:0;opacity:.75}
.dr-item .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-item .v{flex-shrink:0;font-size:var(--fs-xs);color:var(--text-muted)}
.dr-empty{padding:14px 10px;color:var(--text-muted);font-size:var(--fs-xs);line-height:1.6}
/* 편집기 본문 — 우측 파일뷰어 패인(#paneSide) 안의 사이드 탭. 파일 탭과 같은 자리를 번갈아 쓴다.
   (2026-09-07 유저 "아직 채팅창에 열리는데" — #viewStack은 채팅과 같은 자리라 파일 뷰어가 아니다) */
#sideSysModPanel{display:none;flex:1;min-height:0;flex-direction:column;padding:8px 10px 10px;overflow:hidden}
#paneSide.sysmod-mode #sideSysModPanel{display:flex}
#paneSide.sysmod-mode #sideFileViewerPanel{display:none}
#seHead{display:flex;gap:8px;align-items:center;padding:2px 2px 8px;flex-shrink:0;font-size:var(--fs-sm)}
#seHead b{color:var(--text-strong);font-weight:600}
#seHead .sub{color:var(--text-muted);font-size:var(--fs-xs)}
#seBody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.se-wrap{display:flex;gap:10px;align-items:stretch;flex:1;min-height:360px}
.se-left{flex:1;display:flex;flex-direction:column;min-width:0}
.se-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px;font-size:var(--fs-sm)}
.se-tools button{background:none;border:1px solid var(--border2);color:var(--text-muted);border-radius:6px;
  cursor:pointer;font-size:var(--fs-xs);padding:4px 9px}
.se-tools button:hover:not(:disabled){background:var(--active-bg);color:var(--fg)}
.se-tools button:disabled{opacity:.4;cursor:default}
.se-tools .se-state{margin-left:auto;color:var(--text-muted);font-size:var(--fs-xs)}
.se-canvas{position:relative;flex:1;overflow:hidden;border:1px solid var(--border2);border-radius:8px;
  background-color:var(--input-bg);
  background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px}
.se-canvas.pan{cursor:grab}
.se-canvas.panning{cursor:grabbing}
.se-marquee{position:absolute;border:1px solid var(--accent);background:var(--active-bg);opacity:.45;
  pointer-events:none;border-radius:3px;z-index:6}
.se-plane{position:relative;width:2400px;height:1600px;transform-origin:0 0;will-change:transform}
.se-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.se-edges path{fill:none;stroke:var(--text-muted);stroke-width:1.6;pointer-events:stroke;cursor:pointer}
.se-edges path:hover{stroke:var(--warn);stroke-width:2.6}
.se-edges path.temp{stroke:var(--accent);stroke-dasharray:4 3;pointer-events:none}
.se-node{position:absolute;min-width:150px;max-width:230px;background:var(--panel-bg);
  border:1px solid var(--border2);border-radius:8px;font-size:var(--fs-xs);user-select:none;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.se-node.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--active-bg)}
.se-node.bnd{background:var(--active-bg);min-width:96px}
.se-node .nh{padding:5px 8px;border-bottom:1px solid var(--border);cursor:move;font-weight:600;
  color:var(--text-strong);display:flex;gap:5px;align-items:center}
.se-node .nh .rf{font-weight:400;color:var(--text-muted);font-size:.9em}
.se-node.bnd .nh{border-bottom:none}
.se-ports{display:flex;gap:6px;padding:4px 0}
.se-ports > div{flex:1;min-width:0}
.se-prow{display:flex;align-items:center;gap:4px;padding:1px 6px;color:var(--text-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.se-prow.o{justify-content:flex-end}
.se-dot{width:9px;height:9px;border-radius:50%;background:var(--border2);border:1px solid var(--text-muted);
  flex-shrink:0;cursor:crosshair}
.se-dot:hover,.se-dot.hot{background:var(--accent);border-color:var(--accent)}
.se-insp{width:320px;flex-shrink:0;overflow-y:auto;border:1px solid var(--border2);border-radius:8px;
  padding:9px 10px;font-size:var(--fs-sm)}
.se-insp h4{margin:0 0 6px;font-size:var(--fs-sm);color:var(--text-strong)}
.se-insp .sec{margin:10px 0 4px;font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.05em}
.se-insp input,.se-insp textarea,.se-insp select{width:100%;box-sizing:border-box;font-size:var(--fs-xs);
  padding:4px 6px;border-radius:5px;border:1px solid var(--border2);background:var(--input-bg);
  color:var(--text-strong);font-family:inherit}
.se-insp textarea{min-height:76px;font-family:var(--mono);resize:vertical}
.se-prow-e{display:flex;gap:3px;margin-bottom:3px;align-items:center}
.se-prow-e input{flex:1;min-width:0}
.se-prow-e button{flex-shrink:0;background:none;border:1px solid var(--border2);color:var(--text-muted);
  border-radius:5px;cursor:pointer;padding:2px 6px;font-size:var(--fs-xs)}
.se-diag{margin-top:8px;font-size:var(--fs-xs);line-height:1.6}
.se-diag .e{color:var(--danger,#e06c75)}
.se-diag .w{color:var(--warn)}
body.dock-left #sidebarReopenBtn{left:40px;right:auto;border-left:none;border-right:1px solid var(--border2);border-radius:0 6px 6px 0}
#layoutModeBtn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 4px;font-size:var(--fs-base);flex-shrink:0}
#layoutModeBtn:hover{color:var(--fg)}
#rightRail.collapsed #layoutModeBtn{display:none}
#sidePaneTabBar{display:flex;align-items:stretch;background:var(--panel-bg);border-bottom:1px solid var(--border);flex-shrink:0;min-height:33px}
#sideTabsList{display:flex;align-items:stretch;flex:1;overflow-x:auto;min-width:0}
#sideTabsList::-webkit-scrollbar{height:3px}
#sideTabsList::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.stabs-actions{display:flex;align-items:center;padding:0 4px;gap:2px;flex-shrink:0;border-left:1px solid var(--border)}
.stabs-actions button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:3px 7px;border-radius:3px}
.stabs-actions button:hover{background:var(--border);color:var(--fg)}
#sidePaneContent{flex:1;display:flex;flex-direction:column;overflow:hidden}
#sideFileViewerPanel{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
/* §다중에이전트 채팅 내부 반분할(2026-08-25) — 파일 분할(#paneSide)과 분리한다.
   병렬 슬롯은 #drSplitRow 안에서 메인 #chatPane의 형제로 열려 채팅 영역만 정확히 50:50으로 나눈다. */
#mainContent.side-chat-mode #drSplitRow{flex-direction:row;gap:10px}
#mainContent.side-chat-mode #chatPane{flex:1 1 50%;min-width:0}
#sideChatPanel{display:none;flex-direction:column;flex:1 1 50%;min-width:0;overflow:hidden;
  border:1px solid var(--border2);border-radius:8px;background:var(--panel-bg2)}
#mainContent.side-chat-mode #sideChatPanel{display:flex}
#sideChatTabBar{display:flex;align-items:stretch;background:var(--panel-bg);border-bottom:1px solid var(--border);flex-shrink:0;min-height:33px}
#sideChatTabsList{display:flex;align-items:stretch;flex:1;overflow-x:auto;min-width:0}
#sideChatTabsList::-webkit-scrollbar{height:3px}
#sideChatTabsList::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
#sideChatHead{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-muted2);
  border-bottom:1px solid var(--border);padding:7px 10px;flex-shrink:0}
#sideChatHead .sch-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sideChatHead button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;
  padding:2px 6px;border-radius:3px;flex-shrink:0}
#sideChatHead button:hover{background:var(--border);color:var(--fg)}
#sideChatLog{flex:1;overflow-y:auto;white-space:pre-wrap;font-size:var(--fs-base);line-height:1.6;
  padding:10px;margin-bottom:6px;min-height:0}
#sideChatMsg{flex:1;min-height:46px}
@media(max-width:900px){
  #mainContent.side-chat-mode #drSplitRow{flex-direction:column;overflow-y:auto}
  #mainContent.side-chat-mode #chatPane,#mainContent.side-chat-mode #sideChatPanel{flex:none;min-height:420px}
}
#sideFileViewerToolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--border2);flex-shrink:0;min-width:0}
#sideFileViewerToolbar input{min-width:0}
#sideFileViewerToolbar button{flex-shrink:0;white-space:nowrap}
#fileViewerPanel > .row button{flex-shrink:0;white-space:nowrap}
#fileViewerPanel > .row input{min-width:0}
#sideFileViewer{flex:1;overflow:auto;font-family:var(--mono);font-size:13px;min-height:0;background:var(--panel-bg2)}
#sideFileViewer .cm-editor{height:100%}
#sideFileViewer .cm-scroller{font-family:var(--mono) !important;font-size:13px;line-height:1.5}
#fileViewer{font-family:var(--mono)}
#fileViewer .cm-scroller{font-family:var(--mono) !important;font-size:13px;line-height:1.5}
.fs-media-wrap{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:0;overflow:auto;background:var(--panel-bg);box-sizing:border-box}
.fs-media-meta{font-size:11px;color:var(--text-muted);padding:6px 10px;font-family:var(--mono);border-bottom:1px solid var(--border2);flex-shrink:0}
.fs-media-body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:auto;padding:8px}
.fs-media-body.fs-md-preview{display:block;padding:0;background:var(--panel-bg2)}
/* §렌더 편집(2026-08-14) — 렌더 상태에서 바로 고칠 수 있게 좌:코드 / 우:실시간 렌더 분할 */
.fs-preview-split{display:flex;height:100%;min-height:0;overflow:hidden}
.fs-preview-split>.fs-preview-edit{flex:1 1 46%;min-width:0;overflow:auto;border-right:1px solid var(--border2);background:var(--panel-bg2)}
.fs-preview-split>.fs-preview-view{flex:1 1 54%;min-width:0;min-height:0;overflow:hidden}
.fs-preview-split>.fs-preview-edit .cm-editor{height:100%}
/* §렌더 직접편집(2026-08-14, 유저 "옵시디언처럼 렌더된 화면에서 수정") — 블록 클릭 → 그 블록만 원문 textarea */
.md-live .mdlb{border-radius:5px;padding:1px 6px;margin:0 -6px;cursor:text}
.md-live .mdlb:hover{background:rgba(127,160,255,.10)}
.md-live .mdlb.editing{background:transparent}
.md-live .mdlb:empty{min-height:1.2em}
.md-live .mdlb-ta{display:block;width:100%;box-sizing:border-box;margin:2px 0;
  font-family:var(--mono);font-size:13px;line-height:1.6;
  background:var(--panel-bg2);color:var(--text-strong);border:1px solid var(--accent,#5b8cff);border-radius:5px;
  padding:6px 8px;resize:none;outline:none;overflow:hidden;white-space:pre-wrap}
.md-live-tail{min-height:56px;cursor:text}
.md.md-doc{width:min(900px,100%);min-height:100%;box-sizing:border-box;margin:0 auto;padding:28px clamp(22px,5vw,64px) 48px;
  background:var(--panel-bg);color:var(--text-strong);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:1.75}
.md.md-doc p{margin:10px 0}
.md.md-doc h1,.md.md-doc h2,.md.md-doc h3,.md.md-doc h4{color:var(--text-strong);font-weight:700;letter-spacing:-.015em}
.md.md-doc h1{font-size:28px;margin:4px 0 22px;padding-bottom:10px;border-bottom:1px solid var(--border2)}
.md.md-doc h2{font-size:21px;margin:30px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.md.md-doc h3{font-size:17px;margin:24px 0 9px}.md.md-doc h4{font-size:15px;margin:20px 0 7px}
.md.md-doc ul,.md.md-doc ol{margin:10px 0;padding-left:28px}.md.md-doc li{margin:5px 0}
.md.md-doc blockquote{margin:16px 0;padding:10px 16px;border-left-color:var(--accent);background:var(--panel-bg2)}
.md.md-doc code{font-size:12.5px;border:1px solid var(--code-bd);padding:1px 5px}
.md.md-doc .codeblock-wrap{margin:16px 0}.md.md-doc .codeblock{padding:14px 16px;line-height:1.6;background:var(--panel-bg2)}
.md.md-doc table{width:100%;margin:16px 0;font-size:13px}.md.md-doc th,.md.md-doc td{padding:8px 12px}
.md.md-doc hr{margin:26px 0}
/* §프로즈 읽기 모드(PROP-319 item3, 2026-09-17) — 원고를 원고처럼 읽게 한다.
   md-doc 기본값만 덮어쓰므로 채팅 렌더(.md)에는 영향이 없다. 설정은 localStorage에 남는다. */
.md.md-doc.prose-serif{font-family:'Noto Serif KR','Nanum Myeongjo',Georgia,'Times New Roman',serif}
.md.md-doc.prose-serif code,.md.md-doc.prose-serif pre{font-family:var(--mono)}
.md.md-doc.prose-narrow{width:min(72ch,100%)}
.prose-ctl{display:inline-flex;gap:4px;margin-left:10px;vertical-align:middle}
.prose-ctl button{background:var(--panel-bg2);color:var(--fg);border:1px solid var(--border2);
  border-radius:4px;font-size:11px;line-height:1.5;padding:0 6px;cursor:pointer;font-family:var(--mono)}
.prose-ctl button.on{border-color:var(--accent);color:var(--accent)}
.fs-media-img{max-width:100%;max-height:100%;object-fit:contain;background:repeating-conic-gradient(var(--hover-bg) 0% 25%,var(--panel-bg) 0% 50%) 50%/16px 16px}
/* §PCD 3D 뷰어(2026-08-14) */
.pcd-bar{display:flex;align-items:center;gap:8px;padding:4px 8px;border-bottom:1px solid var(--border2);flex-shrink:0;flex-wrap:wrap}
.pcd-ctl{background:var(--panel-bg2);color:var(--fg);border:1px solid var(--border2);border-radius:4px;font-size:11px;padding:2px 6px;cursor:pointer}
.pcd-range{width:90px}
.pcd-hint{font-size:11px;color:var(--text-muted);white-space:nowrap}
.pcd-body{padding:0!important;align-items:stretch!important;overflow:hidden!important;min-height:240px}
.pcd-canvas{width:100%;height:100%;display:block;cursor:grab;background:#0f1216}
.pcd-canvas:active{cursor:grabbing}
/* §PCD_FPS — WASD가 먹는 상태(캔버스 포커스)를 테두리로 보여 준다 */
.pcd-canvas:focus{outline:1px solid var(--accent);outline-offset:-1px}
.pcd-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);min-height:0;flex:1}
.pcd-layers{overflow:auto;border-right:1px solid var(--border2);background:var(--panel-bg);padding:6px;min-width:0}
.pcd-layer{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:6px;padding:5px 4px;border-radius:5px}
.pcd-align{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.pcd-layer-ref{margin:0;cursor:pointer}
.pcd-layer-ref:disabled{opacity:.35;cursor:default}
.pcd-layer:hover{background:var(--hover-bg)}
.pcd-layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
.pcd-layer-meta{flex:1 1 120px;min-width:0;color:var(--text-muted);font-size:var(--fs-xs);word-break:break-all}
/* 레이어별 색상 모드 줄 — 이름줄 아래에 모드 선택 + 메타를 같이 둔다(2026-08-31) */
.pcd-layer-sub{grid-column:1 / -1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.pcd-layer-mode{font-size:var(--fs-xs);padding:1px 4px;max-width:130px}
.pcd-layer input[type=color]{width:27px;height:23px;padding:1px;border:1px solid var(--border2);background:none;border-radius:4px}
.pcd-layer input[type=color]:disabled{opacity:.35}
.pcd-layer-remove{padding:1px 5px!important;line-height:18px}
.pcd-empty{padding:12px 6px;color:var(--text-muted);font-size:var(--fs-sm)}
@media(max-width:760px){.pcd-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.pcd-layers{max-height:130px;border-right:0;border-bottom:1px solid var(--border2)}}
.fs-media-frame{width:100%;height:100%;min-height:480px;border:0;background:#fff}
/* §PDF 자체렌더(2026-08-20) — pdf.js canvas 뷰어 */
.pdfv{display:flex;flex-direction:column;height:100%;min-height:360px;background:var(--panel-bg2)}
.pdfv-bar{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--border2);flex-shrink:0;background:var(--panel-bg)}
.pdfv-info{font-size:11px;color:var(--text-muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-btn{background:var(--input-bg);color:var(--text);border:1px solid var(--border2);border-radius:5px;padding:2px 9px;font-size:12px;line-height:1.7;cursor:pointer}
.pdfv-btn:hover{background:var(--panel-bg2)}
.pdfv-pages{flex:1;min-height:0;overflow:auto;padding:10px 0 24px;display:flex;flex-direction:column;align-items:center;gap:12px;-webkit-overflow-scrolling:touch}
.pdfv-page{position:relative;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35);max-width:100%}
.pdfv-canvas{display:block;max-width:100%}
.pdfv-num{position:absolute;right:6px;bottom:4px;font-size:10px;color:#555;background:rgba(255,255,255,.78);border-radius:3px;padding:0 4px;pointer-events:none}
.fs-media-video{max-width:100%;max-height:100%;background:#000}
.fs-media-audio{width:min(520px,90%);margin:40px auto}
h1{font-size:var(--fs-xl);font-weight:600;color:var(--h1-fg);margin:0 0 12px}
.row{display:flex;gap:8px;margin-bottom:10px;align-items:center}
select,button,textarea,input{font-size:var(--fs-md);border-radius:6px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text-strong);padding:8px}
button{cursor:pointer;background:var(--active-bg);color:var(--fg)}
button:hover{background:var(--active-hover-bg)}
/* §P6(2026-07-23) 비주얼 폴리시 — 버튼 위계. 그동안 "중요한 액션"(전송/저장/만들기)과 "덜 중요한 액션"
   (닫기/토글/취소)이 전부 같은 회색조 기본 button 스타일이라 화면에서 뭘 먼저 눌러야 할지 구분이 안 됐음.
   기본 button = secondary(중립), .btn-primary = 진행/확정, .btn-danger = 파괴적 액션(기존에 이미 있던
   빨간 삭제버튼 인라인스타일을 클래스로 승격). */
.btn-primary{background:var(--accent);color:var(--accent-fg);font-weight:600;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{background:var(--err);color:var(--danger-fg);border-color:var(--err)}
.btn-danger:hover{opacity:.85}
textarea{width:100%;min-height:70px;font-family:inherit}
#log{flex:1;white-space:pre-wrap;border:1px solid var(--border2);border-radius:8px;padding:12px;overflow-y:auto;background:var(--panel-bg2);font-size:var(--fs-base);line-height:1.6}
#drSplitRow{display:flex;flex-direction:column;flex:1;min-height:0}
#chatPane{display:flex;flex-direction:column;flex:1;min-height:0}
/* §맨아래버튼(2026-07-30) — position:fixed 로 띄워 #log 의 flex 레이아웃을 건드리지 않는다.
   위치는 _updateScrollBtn()이 log.getBoundingClientRect()로 매번 계산해 붙인다. */
#scrollBottomBtn{display:none;position:fixed;z-index:50;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;padding:0;font-size:15px;line-height:1;cursor:pointer;border:1px solid var(--border2);background:var(--panel-bg2);color:var(--text-strong);box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:.88}
#scrollBottomBtn:hover{opacity:1}
.tool{color:var(--tool)}
.thinking{color:var(--thinking);font-style:italic}
.compact{color:var(--compact)}
/* §압축전열람(2026-08-01) — 압축 요약 줄에 붙는 펼치기 버튼과, 펼쳐진 원본 구간 */
.archived-btn{margin-left:8px;background:transparent;border:1px solid var(--compact);color:var(--compact);
  border-radius:4px;padding:1px 6px;font-size:var(--fs-xs);cursor:pointer}
.archived-btn:disabled{opacity:.5;cursor:default}
.archived-block{border-left:2px solid var(--compact);padding-left:8px;margin:4px 0;opacity:.82}
.archived-hdr{color:var(--compact);font-size:var(--fs-xs);margin-bottom:4px}
.err{color:var(--err);font-weight:600}
small{color:var(--text-dim)}
.convmeta{font-size:var(--fs-xs);color:var(--text-muted);margin-top:1px}
#slotbadge{font-size:var(--fs-sm);padding:2px 8px;border-radius:10px;font-weight:600}
#slotbadge.lab{background:var(--lab-bg);color:var(--lab-fg)}
#slotbadge.personal{background:var(--personal-bg);color:var(--personal-fg)}
#slotbadge.vendor{background:var(--vendor-bg);color:var(--vendor-fg)}
.msgline{margin:2px 0}
/* §유저메시지구분(2026-07-26, 유저 요청 "보낸 글이랑 응답이 구분이 안 됨") — 배경+좌측 강조선으로
   내가 보낸 턴의 시작점이 스크롤 중에도 한눈에 잡히게. 색은 테마변수만 써서 라이트/다크 모두 대응. */
.msgline.usermsg{background:var(--user-msg-bg);border-left:3px solid var(--user-msg-bar);
  border-radius:0 6px 6px 0;padding:6px 10px;margin:10px 0 6px;white-space:pre-wrap;
  color:var(--text-strong);font-weight:500}
.digbtn{font-size:var(--fs-sm);padding:1px 7px;border-radius:8px;margin-left:8px;background:var(--link-bg);color:var(--link-fg);border:1px solid var(--link-border);cursor:pointer;opacity:.7}
.digbtn:hover{opacity:1}
/* §P3(2026-07-22) 채팅로그 현대화 — 마크다운/코드하이라이트/접이식블록/diff */
.md{white-space:normal;line-height:1.62}
.md p{margin:6px 0;max-width:84ch}
/* §CHAT_BULLET(2026-08-19, 유저 요청 "줄글보다 불릿으로 수준별 정리한 게 읽기 편해") —
   불릿이 '계층'으로 읽히게: 항목 간 여백 확보 + 레벨별 마커 구분 + 중첩 구간 좌측 가이드선.
   기존 1px 여백은 2단 불릿이 한 덩어리로 뭉쳐 보여 수준 구분이 안 됐다. */
.md ul,.md ol{margin:6px 0;padding-left:20px}
.md li{margin:3px 0;max-width:84ch}
.md li::marker{color:var(--text-muted)}
.md ul{list-style:disc}
.md ul ul{list-style:circle}
.md ul ul ul{list-style:square}
.md li>ul,.md li>ol{margin:3px 0;padding-left:17px;border-left:1px solid var(--border)}
.md li>p{margin:2px 0}
.md li>strong:first-child{color:var(--text-strong)}
.md .mermaid-wrap{margin:10px 0;padding:6px 10px 10px;background:var(--panel-bg2);border:1px solid var(--border);border-radius:8px;text-align:center}
.md .mmd-bar{display:flex;gap:4px;justify-content:flex-end;align-items:center;margin:0 0 4px;opacity:.4;transition:opacity .15s}
.md .mermaid-wrap:hover .mmd-bar{opacity:1}
.md .mmd-bar button{background:var(--input-bg);color:var(--text-muted);border:1px solid var(--border);border-radius:5px;font-size:11px;line-height:1;padding:3px 6px;cursor:pointer}
.md .mmd-bar button:hover{color:var(--text-strong);border-color:var(--text-muted)}
.md .mmd-bar .mmd-pct{font-size:11px;color:var(--text-muted);min-width:40px;text-align:center}
.md .mmd-box{overflow:auto;text-align:center}
.md .mmd-box svg{height:auto;display:block;margin:0 auto}
.md .mermaid-fail{margin:8px 0}
/* §ARCH(2026-08-20) — 구성도 진단 목록. 심각도별 색만 다르고 배치는 동일 */
.arch-diag{font-size:12px;line-height:1.65;padding:1px 2px;white-space:pre-wrap;word-break:break-word}
.arch-diag-box{margin:10px 0 4px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-bg2);text-align:left}
.arch-sev-error{color:#e06c75}
.arch-sev-warning{color:#e5c07b}
.arch-sev-info{color:var(--muted)}
/* §ARCH 그래픽 캔버스(2026-08-20) — React Flow는 컨테이너 높이가 0이면 아무것도 안 그린다.
   그래서 높이를 명시하고, 문서 길이에 따라 사용자가 늘릴 수 있게 resize:vertical을 준다. */
.arch-tb{display:flex;align-items:center;gap:5px;margin:0 0 6px;text-align:left}
.arch-tb-btn{background:var(--input-bg);color:var(--text-muted);border:1px solid var(--border2);
  border-radius:5px;padding:2px 8px;font-size:11px;cursor:pointer;line-height:1.6}
.arch-tb-btn:hover{color:var(--text-strong);border-color:var(--text-muted)}
.arch-tb-btn.on{color:var(--text-strong);border-color:var(--accent);background:var(--panel-bg2)}
.arch-tb-gap{width:8px}
.arch-tb-sel{font-size:11px;color:var(--text-muted);margin-left:auto;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.arch-canvas{height:520px;min-height:200px;resize:vertical;overflow:hidden;width:100%;
  border:1px solid var(--border);border-radius:8px;background:var(--panel-bg);position:relative}
/* mermaid 임시 컨테이너(#d<id>)는 숨기지 마라 — display:none이면 getBBox가 0을 돌려줘 다이어그램이 뭉개진다.
   화면 밖으로만 밀어낸다. 폭탄 SVG는 suppressErrorRendering + 아래 error 셀렉터로 막는다. (2026-09-06 렌더깨짐 수정) */
body > div[id^="dmmd"],body > svg[id^="dmmd"]{position:absolute!important;left:-99999px!important;top:0!important;pointer-events:none!important}
.md svg[aria-roledescription="error"],body svg[aria-roledescription="error"]{display:none!important}
.md .mermaid-err{color:#e06c75;font-size:12px;text-align:left;margin:2px 0 4px}
.md h1,.md h2,.md h3{margin:8px 0 4px;font-weight:600;line-height:1.3}
.md h1{font-size:var(--fs-md)}.md h2{font-size:var(--fs-base)}.md h3{font-size:var(--fs-base)}
.md code{background:var(--code-bg);color:var(--code-fg);border:1px solid var(--code-bd);padding:0 4px;border-radius:4px;font-family:var(--mono);font-size:0.92em;line-height:inherit}
/* 코드스팬 안의 경로링크는 0.95em 이 또 곱해져 두 번 작아지므로 여기서 되돌린다. */
.md code .fs-path-link{font-size:1em}
.md a{color:var(--link-fg)}
.md h4,.md h5,.md h6{margin:6px 0 3px;font-weight:600;line-height:1.3;font-size:var(--fs-sm)}
.md blockquote{margin:6px 0;padding:4px 12px;border-left:3px solid var(--border2);color:var(--text-muted);background:var(--panel-bg2);border-radius:0 4px 4px 0}
/* §이미지렌더(2026-07-27) — 채팅 폭을 넘지 않게 축소, 클릭하면 원본 크기로 토글 */
.md-img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--border2);margin:6px 0;
  display:block;cursor:zoom-in;background:var(--panel-bg2)}
.md-img.zoomed{max-width:none;cursor:zoom-out}
.md-img-err{display:inline-block;color:var(--warn);font-size:var(--fs-sm);font-family:var(--mono);
  border:1px dashed var(--border2);border-radius:4px;padding:3px 8px;margin:4px 0}
/* §ARTIFACT — 모델 출력은 JSON으로만 받고 DOM은 textContent/createElement로 조립한다. */
.artifact{margin:8px 0;border:1px solid var(--border2);border-radius:8px;background:var(--panel-bg2);overflow:hidden}
.artifact-title{padding:7px 10px;border-bottom:1px solid var(--border2);font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.artifact-body{min-height:80px;background:var(--panel-bg)}
.artifact-image{display:block;max-width:100%;height:auto;margin:0 auto;cursor:zoom-in}
.artifact-plot{width:100%;height:420px;min-height:260px}
.artifact-status,.artifact-error{padding:12px;color:var(--text-muted);font-size:var(--fs-sm)}
.artifact-error{color:var(--err);font-family:var(--mono);white-space:pre-wrap}
@media(max-width:700px){.artifact-plot{height:340px;min-height:240px}}
/* §수식렌더(2026-07-26) — 블록수식은 가운데, 긴 수식은 잘리지 말고 가로 스크롤 */
.math-block{margin:10px 0;overflow-x:auto;overflow-y:hidden;text-align:center;padding:2px 0}
.katex{font-size:1.05em}
.math-err{color:var(--err);font-family:var(--mono);font-size:.92em;border-bottom:1px dotted var(--err)}
.md blockquote p{margin:2px 0}
.md hr{border:none;border-top:1px solid var(--border2);margin:10px 0}
.md table{border-collapse:collapse;margin:6px 0;font-size:var(--fs-sm);display:block;overflow-x:auto;max-width:100%}
.md th{background:var(--panel-bg2);font-weight:600;padding:5px 10px;border:1px solid var(--border2);text-align:left;white-space:nowrap}
.md td{padding:4px 10px;border:1px solid var(--border2)}
.md tr:nth-child(even) td{background:var(--panel-bg2)}
.codeblock-wrap{position:relative;margin:6px 0}
.codeblock{background:var(--code-blk-bg);border:1px solid var(--border2);border-radius:6px;padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:var(--fs-sm);white-space:pre-wrap;word-break:break-word;line-height:1.5}
.codeblock.nowrap{white-space:pre;word-break:normal}
.codeblock-lang{position:absolute;top:4px;left:10px;font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.copybtn{position:absolute;top:4px;right:4px;font-size:var(--fs-xs);padding:2px 8px;opacity:.65;border-radius:4px}
.copybtn:hover{opacity:1}
.wrapbtn{position:absolute;top:4px;right:60px;font-size:var(--fs-xs);padding:2px 8px;opacity:.65;border-radius:4px}
.wrapbtn:hover{opacity:1}
.tok-comment{color:var(--text-muted);font-style:italic}
.tok-string{color:var(--success)}
.tok-number{color:var(--warn)}
.tok-keyword{color:var(--compact);font-weight:600}
.tok-preproc{color:var(--tool)}
.tok-key{color:var(--tok-key)}
.tok-var{color:var(--tok-var)}
.tok-bool{color:var(--warn);font-weight:600}
.tok-tag{color:var(--compact);font-weight:600}
.tok-meta{color:var(--tool);font-weight:600}
.tok-add{color:var(--success)}
.tok-del{color:var(--err)}
.tok-md-header{color:var(--accent);font-weight:700}
.tok-md-bold{font-weight:700}
.tok-md-italic{font-style:italic}
.tok-md-code{color:var(--success);font-family:var(--mono)}
.tok-md-link{color:var(--accent);text-decoration:underline}
.tok-md-quote{color:var(--text-muted);font-style:italic}
.tok-md-list{color:var(--compact);font-weight:600}
details.collapsible{margin:3px 0;border:1px solid var(--border);border-radius:6px;background:var(--panel-bg2)}
details.collapsible>summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text-muted);padding:5px 9px;list-style:none;user-select:none}
details.collapsible>summary::-webkit-details-marker{display:none}
details.collapsible>summary::before{content:'▸ ';display:inline-block}
details.collapsible[open]>summary::before{content:'▾ '}
details.collapsible .collapsible-body{padding:0 9px 8px;font-size:var(--fs-sm);white-space:pre-wrap}
details.collapsible.thinkingblk>summary{color:var(--thinking);font-style:italic}
/* §행동가시화(2026-08-20) — 툴 블록의 접힌 summary 한 줄이 곧 활동 타임라인 항목이 된다.
   좌측 레일(border-left)로 연속된 툴콜이 세로 흐름으로 읽히게 하고, 의도문은 ellipsis 처리. */
details.collapsible.toolblk{border-left:2px solid var(--tool)}
details.collapsible.toolblk>summary{display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}
details.collapsible.toolblk>summary .tool-name{color:var(--tool);flex-shrink:0}
details.collapsible.toolblk>summary .tool-intent{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
details.collapsible.toolblk>summary .tool-meta{color:var(--text-dim);font-size:var(--fs-xs);flex-shrink:0;margin-left:auto;padding-left:6px}
details.collapsible.workgrp{border-left:2px solid var(--tool);opacity:.85}
details.collapsible.workgrp>.workgrp-body{padding:0 0 4px 8px}
.toolimgs{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 6px 10px}
.toolimgs .md-img{max-height:320px;max-width:100%;object-fit:contain;cursor:zoom-in;margin:0}
.toolimgs .md-img.zoomed{max-height:none;max-width:none;cursor:zoom-out}
.diffblock{font-family:var(--mono);font-size:var(--fs-sm);white-space:pre-wrap;word-break:break-word;overflow-x:auto;line-height:1.5}
.diff-add{color:var(--success);background:color-mix(in srgb, var(--success) 12%, transparent)}
.diff-del{color:var(--err);background:color-mix(in srgb, var(--err) 12%, transparent)}
.diff-hunk{color:var(--compact);font-weight:600}
.diff-meta{color:var(--text-muted)}
/* UX 2차리뷰 발견 반영 — 풀스크린 암전이 "메인은 안 건드림" 취지와 시각적으로 반대로 읽혔음. 톤 완화. */
#subOverlay{display:none;position:fixed;inset:0;background:var(--overlay-soft);z-index:50;pointer-events:none}
#subPanel{pointer-events:auto}
#subPanel{position:absolute;right:0;top:0;bottom:0;width:440px;background:var(--panel-bg);border-left:1px solid var(--border2);display:flex;flex-direction:column;padding:14px}
#subSeed{font-size:var(--fs-sm);color:var(--text-muted2);white-space:pre-wrap;max-height:130px;overflow-y:auto;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:8px}
#subLog{flex:1;overflow-y:auto;white-space:pre-wrap;font-size:var(--fs-base);line-height:1.6;margin-bottom:8px}
/* §선택영역 서브채팅(2026-08-19) — 같은 subPanel을 모달 사이드패널이 아니라 떠다니는 미니창으로도
   쓴다. 미니창은 포커스트랩·backdrop 없이 메인과 동시에 조작 가능해야 한다(독립 구동이 요구사항). */
#subOverlay.floatmode{background:none}
#subPanel.floatwin{position:fixed;right:auto;bottom:auto;width:420px;height:520px;padding:10px;
  border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.45);
  opacity:var(--subop,1);resize:both;overflow:hidden;min-width:280px;min-height:120px;transition:opacity .15s}
#subPanel.floatwin:hover{opacity:1}
#subPanel.floatwin.collapsed{height:auto !important;min-height:0;resize:none}
#subPanel.floatwin.collapsed #subSeed,#subPanel.floatwin.collapsed #subLog,
#subPanel.floatwin.collapsed #subMsg,#subPanel.floatwin.collapsed .subfoot,
#subPanel.floatwin.collapsed #subMergeRow,#subPanel.floatwin.collapsed #subCfgRow{display:none !important}
#subDragBar{cursor:move;user-select:none}
#subWinCtl{display:none;align-items:center;gap:4px}
#subPanel.floatwin #subWinCtl{display:flex}
#subOpacity{width:56px;vertical-align:middle}
#subRestoreBtn{position:fixed;right:16px;bottom:16px;z-index:55;display:none;padding:5px 11px;border-radius:16px;
  background:var(--link-bg);color:var(--link-fg);border:1px solid var(--border2);cursor:pointer;
  font-size:var(--fs-sm);box-shadow:0 2px 10px rgba(0,0,0,.4);max-width:280px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* §선택 버블(PROP-319 item2, 2026-09-17) — 드래그하면 뜨는 액션 묶음.
   단축키를 몰라도 보이게 하는 것이 목적이라 버튼을 컨테이너로 감싸 늘렸다. */
#selBubble{position:fixed;z-index:70;display:none;white-space:nowrap;border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
#selBubble button{padding:3px 9px;border-radius:14px;margin-right:4px;
  background:var(--link-bg);color:var(--link-fg);border:1px solid var(--border2);cursor:pointer;
  font-size:var(--fs-sm);white-space:nowrap}
#selBubble button:last-child{margin-right:0}
#selEditBtn{display:none}
/* §인라인 AI 편집(PROP-115, 2026-09-06) — 에디터 선택영역에서 Cmd/Ctrl+K.
   에디터 위에 떠서 선택 줄범위·지시문·제안 diff를 한 자리에 보여준다. */
#cmkPop{position:fixed;z-index:120;display:none;width:460px;max-width:calc(100vw - 24px);
  background:var(--panel-bg);border:1px solid var(--border2);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);padding:8px;font-size:var(--fs-sm)}
#cmkPop .cmk-head{display:flex;align-items:center;gap:6px;margin-bottom:5px;
  color:var(--text-muted);font-size:var(--fs-xs)}
#cmkPop .cmk-range{color:var(--accent);white-space:nowrap}
#cmkPop .cmk-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cmkInput{width:100%;box-sizing:border-box;resize:vertical;min-height:50px;
  background:var(--input-bg);color:var(--text-strong);border:1px solid var(--border);
  border-radius:6px;padding:6px 8px;font-family:inherit;font-size:var(--fs-sm)}
#cmkPop .cmk-row{display:flex;align-items:center;gap:6px;margin-top:6px}
#cmkPop .cmk-hint{flex:1;min-width:0;color:var(--text-muted);font-size:var(--fs-xs);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#cmkPop button{padding:3px 10px;border-radius:6px;border:1px solid var(--border2);
  background:var(--panel-bg2);color:var(--text-strong);cursor:pointer;font-size:var(--fs-xs)}
#cmkPop button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
#cmkPop button:disabled{opacity:.45;cursor:default}
#cmkDiff{display:none;margin-top:6px;max-height:240px;overflow:auto;border:1px solid var(--border);
  border-radius:6px;background:var(--panel-bg2);padding:4px 0}
#cmkDiff .dl{display:block;white-space:pre-wrap;word-break:break-all;padding:0 8px;
  font-family:monospace;font-size:12px;line-height:1.45;color:var(--text-strong)}
#cmkDiff .dl.add{background:rgba(70,170,110,.20);color:#7fd6a2}
#cmkDiff .dl.del{background:rgba(224,82,82,.18);color:#f09a9a}
#cmkDiff .dl.hdr{color:var(--text-muted);font-size:11px}
#cmkStatus{display:none;margin-top:6px;font-size:var(--fs-xs);color:var(--text-muted);
  white-space:pre-wrap;word-break:break-word}
#cmkStatus.err{color:var(--rec)}
#overviewTable th{text-align:left;color:var(--text-muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
#overviewTable td{padding:6px 10px;border-bottom:1px solid var(--row-border);white-space:nowrap}
#overviewTable tr:hover td{background:var(--panel-bg2)}
.badge-sm{font-size:var(--fs-xs);padding:1px 6px;border-radius:8px;background:var(--link-bg);color:var(--link-fg)}
.agentitem{margin-bottom:2px}
.agentitem-btn{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:none;margin:0;
  padding:8px;padding-right:22px;border-radius:6px;cursor:pointer;font-size:var(--fs-base);color:var(--agentitem-fg);font-family:inherit}
.agentitem-btn:hover{background:var(--hover-bg)}
.agentitem.active .agentitem-btn{background:var(--active-bg);color:var(--text-max)}
.agentitem .aname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#settingsOverlay,#edSetupOverlay,#projectSettingsOverlay,#globalSettingsOverlay,#createAgentOverlay,#createProjectOverlay,#trashOverlay,#gpOverlay,#autoOverlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:60;align-items:center;justify-content:center;overflow-y:auto;padding:20px 0}
/* §자동운행 설정 UI(2026-08-04) — 프로필 우선순위표는 행이 넓어서 settingsPanel(480px)보다 넓게 잡는다 */
#autoPanel{background:var(--panel-bg);border:1px solid var(--border2);border-radius:10px;padding:18px;width:820px;max-width:94vw;max-height:88vh;overflow-y:auto}
#autoPanel label{display:block;font-size:var(--fs-sm);color:var(--text-muted2);margin:10px 0 4px}
.auto-sec{border-top:1px solid var(--border);margin-top:14px;padding-top:10px}
.prof-row{display:flex;align-items:center;gap:4px;margin:3px 0;font-size:var(--fs-sm)}
.prof-row select,.prof-row input{margin:0;font-size:var(--fs-sm);padding:3px 5px}
.prof-row .rank{width:22px;text-align:center;color:var(--text-muted);font-family:var(--mono)}
.prof-row button{padding:2px 6px;font-size:var(--fs-xs)}
.prof-badge{font-size:var(--fs-xs);padding:1px 5px;border-radius:4px;white-space:nowrap}
.prof-badge.active{background:var(--link-bg);color:var(--success)}
.prof-badge.cool{background:var(--link-bg);color:var(--warn)}
.vh-row{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);padding:3px 0;border-bottom:1px solid var(--border)}
/* §자동실행 검수(2026-08-05) — 턴 1개 = 1행. 자동발사와 사람이 끼워넣은 메시지를 배지로 구분. */
.rev-row{padding:6px 4px;font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
.rev-row:last-child{border-bottom:none}
.rev-hdr{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:var(--fs-xs)}
.rev-tag{font-size:var(--fs-xs);padding:0 5px;border-radius:4px;white-space:nowrap}
.rev-tag.auto{background:var(--link-bg);color:var(--success)}
.rev-tag.queued{background:var(--link-bg);color:var(--text-strong)}
.rev-body{margin-top:3px;color:var(--text)}
.rev-body b{color:var(--text-muted2);font-weight:500}
/* §UI재구성 1단계(2026-08-04) — 사이드바 위계 재구성.
   §UI_REDESSIGN_P3(2026-08-27) — 대화 로그에서 반복 사용된 상태·호스트만 상시 노출하고,
   값이 있는 운영 경보는 조건부 노출, 설정·전문 도구는 ⋯ 더보기로 내린다.
   버튼은 절대 삭제하지 않고 reparent만 한다 — newConvBtn id를 _restoreChatState/selectAgent/openConv 3곳이
   null-guard 없이 참조하므로 지우면 에이전트 전환·대화 열기가 즉시 예외로 깨진다. */
.side-act{text-align:left;font-size:var(--fs-sm);padding:5px 8px;width:100%;box-sizing:border-box}
.sidebar-primary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px;margin-top:6px}
.sidebar-primary .side-act{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-alerts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px;margin-top:4px}
.sidebar-alert-btn{display:none;width:100%;min-width:0;padding:4px 6px;font-size:var(--fs-xs);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-color:color-mix(in srgb,var(--warn) 46%,var(--border2))}
.sidebar-alert-btn.is-active{display:block}
#sideMore{display:flex;flex-direction:column;gap:3px;margin-top:3px}
#sideMore .side-more-label{padding:6px 4px 1px;color:var(--text-muted);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--border)}
#sideMore .side-more-label:first-child{border-top:0;padding-top:2px}
/* id 선택자가 .at-grp-body--collapsed(클래스)를 이기므로 접힘 규칙을 id 단위로 한 번 더 못박는다 */
#sideMore.at-grp-body--collapsed{display:none}
#sideMoreBtn{width:100%;box-sizing:border-box;text-align:left;font-size:var(--fs-xs);padding:4px 8px;
  color:var(--text-muted);background:none;border:1px dashed var(--border2)}
#sideMoreBtn:hover{color:var(--text-strong)}
/* 자동운행 상태카드 — 모달을 열어야만 보이던 것(남은 턴·예산·게이트 사유)을 상시 노출로 승격 */
#autoCard{border:1px solid var(--border2);border-radius:8px;background:var(--input-bg);padding:6px 8px;
  font-size:var(--fs-xs);cursor:pointer;margin-bottom:3px}
#autoCard:hover{border-color:var(--proj-fg)}
#autoCard .ac-hdr{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:3px}
#autoCard .ac-state{font-size:var(--fs-xs);padding:1px 5px;border-radius:4px;background:var(--link-bg);white-space:nowrap}
#autoCard .ac-row{display:flex;justify-content:space-between;gap:6px;color:var(--text-muted);margin-top:4px}
#autoCard .ac-note{color:var(--text-muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#autoCard .ac-glob{color:var(--text-muted);margin-top:5px;padding-top:4px;border-top:1px dashed var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* §전역 상한(2026-08-04) — 사이드바 트리에서 자동운행 중인 에이전트를 초록점 옆 아이콘으로 표시 */
.at-auto{font-size:10px;line-height:1;flex-shrink:0;filter:saturate(1.2)}
.at-auto.stopped{opacity:.45;filter:grayscale(1)}
/* §사이드바 예약 아이콘(2026-08-05) — 이 에이전트에 대기 중인 예약실행이 하나라도 있으면 표시 */
.at-sched{font-size:10px;line-height:1;flex-shrink:0}
.abar{height:4px;border-radius:2px;background:var(--border);overflow:hidden;margin-top:2px}
.abar > i{display:block;height:100%;background:var(--proj-fg);transition:width .2s}
.abar.warn > i{background:var(--warn)}
/* §D1(2026-08-04) — 자동운행이 상한에 걸려 멈춰도 통지가 서버 로그 1줄뿐이라 사람이 모르고 지나갔다.
   해당 대화 탭을 안 보고 있어도 보이도록 화면 우하단 토스트로 띄운다. */
#toastWrap{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{pointer-events:auto;background:var(--panel-bg);border:1px solid var(--border2);border-left:3px solid var(--proj-fg);
  border-radius:8px;padding:9px 12px;font-size:var(--fs-sm);color:var(--text-strong);max-width:340px;
  box-shadow:0 4px 16px rgba(0,0,0,.28);line-height:1.5}
.toast.stop{border-left-color:var(--warn)}
.toast.wait{border-left-color:var(--link-fg)}   /* 대기·재개 = 사람 개입 불필요, 정지(주황)와 구분 */
.toast.err{border-left-color:var(--err)}
.toast b{display:block;margin-bottom:2px;color:var(--text-max)}
.toast .tclose{float:right;background:none;border:none;color:var(--text-muted);cursor:pointer;font-family:inherit;padding:0 0 0 8px}
.toast .tact{background:none;border:1px solid var(--border2);border-radius:5px;color:var(--link-fg);
  cursor:pointer;font-family:inherit;font-size:var(--fs-xs);padding:2px 7px;margin-top:6px}
#settingsPanel{background:var(--panel-bg);border:1px solid var(--border2);border-radius:10px;padding:18px;width:480px;max-width:90vw}
#settingsPanel label{display:block;font-size:var(--fs-sm);color:var(--text-muted2);margin:10px 0 4px}
/* §P6(2026-07-23) — createAgent/createProject/projectSettings 모달의 반복 인라인 라벨스타일을
   하나로 통일(전엔 13곳에 똑같은 style="..." 문자열이 복붙돼있었음 — 타입스케일도 그참에 적용). */
.modal-label{display:block;font-size:var(--fs-sm);color:var(--text-muted2);margin:10px 0 4px}
#settingsPanel input,#settingsPanel select,#settingsPanel textarea{width:100%}
#settingsPanel textarea{min-height:80px;font-family:inherit}
#themeToggle{font-size:var(--fs-lg);padding:6px 10px}
/* §Phase1(2026-07-22, IA 10에이전트 리뷰 핵심진단 — 다:다 관계를 1:다 트리에 욱여넣어 같은 에이전트가
   여러 프로젝트그룹에 중복노드로 뜨던 문제) — 평면목록 + 프로젝트 필터칩으로 재설계. */
#projectChips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
/* §P4(2026-07-22) 접근성 — chip 자체가 버튼인 경우(orphan/미분류)와, chip이 비인터랙티브 래퍼이고
   실제 클릭대상은 안의 .chip-btn+.gear 버튼 2개인 경우(톱니 있는 일반 프로젝트칩) 둘 다 지원. */
.chip{font-size:var(--fs-sm);border-radius:10px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text-muted);white-space:nowrap;max-width:160px;display:inline-flex;align-items:center;overflow:hidden}
button.chip{padding:3px 8px;cursor:pointer;font-family:inherit}
button.chip:hover{background:var(--hover-bg)}
.chip.active{background:var(--active-bg);color:var(--text-max);border-color:var(--active-bg)}
.chip.empty{opacity:.45}
.chip.orphan{border-color:var(--warn);color:var(--warn)}
.chip-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:3px 4px 3px 8px;display:inline-flex;align-items:center;min-width:0;color:inherit;font-size:inherit;font-family:inherit}
.chip-btn:hover{background:var(--hover-bg)}
.chip .clabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .gear{opacity:.6;margin-right:6px;flex-shrink:0;background:none;border:none;color:inherit;padding:2px;cursor:pointer;font-size:inherit;font-family:inherit}
.chip .gear:hover{opacity:1}
.agentitem .atags{font-size:var(--fs-xs);color:var(--proj-fg);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* §P8(2026-07-25) v3 스타일 에이전트 트리 */
.at-grp-hdr{display:flex;align-items:center;gap:5px;padding:5px 8px 3px;cursor:pointer;font-size:11px;font-weight:700;color:var(--text-strong);user-select:none;border-radius:4px;margin-top:8px;letter-spacing:.02em}
.at-grp-hdr:hover{background:var(--hover-bg)}
.at-grp-body{overflow:hidden}
.at-grp-body--collapsed{display:none}
.at-cat{display:flex;align-items:center;gap:5px;padding:4px 8px;cursor:pointer;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;user-select:none;border-radius:4px;margin-top:4px}
.at-cat:hover{background:var(--hover-bg)}
.at-arrow{font-size:9px;width:10px;text-align:center;flex-shrink:0}
.at-agents{overflow:hidden}
.at-agents.collapsed{display:none}
.at-agent{display:flex;align-items:flex-start;gap:7px;padding:4px 8px 4px 20px;cursor:pointer;font-size:var(--fs-sm);border-radius:4px;user-select:none}
.at-agent:hover{background:var(--hover-bg)}
.at-agent.active-agent{background:var(--active-bg);color:var(--text-max)}
.at-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.at-agent.unread .at-dot{box-shadow:0 0 0 2px color-mix(in srgb, var(--err) 35%, transparent)}
.at-agent-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.at-agent-line{display:flex;align-items:center;gap:4px;min-width:0}
.at-agent-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.at-agent-status{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.at-agent-status.live{color:var(--success, #1a7f37)}
.at-agent-status.human{color:var(--warn, #9a6700)}
.at-agent-work{display:flex;flex-direction:column;gap:1px;margin-top:1px;min-width:0}
.at-work-item{font-size:var(--fs-xs);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted)}
.at-work-item::before{content:'•';display:inline-block;width:10px;font-weight:700}
.at-work-item.current{color:var(--accent);font-weight:600}
.at-work-item.current::before{content:'▶'}
.at-work-item.subprocess{color:#8250df;font-weight:600}
.at-work-item.subprocess::before{content:'◆'}
.at-work-item.user-wait{color:var(--warn, #9a6700)}
.at-work-item.user-wait::before{content:'◷'}
.at-work-item.scheduled-wait{color:var(--warn, #9a6700)}
.at-work-item.scheduled-wait::before{content:'◴'}
.at-work-item.waiting{color:var(--warn, #9a6700)}
.at-work-item.waiting::before{content:'◷'}
.at-work-more{font-size:9px;color:var(--text-muted);line-height:1.2;padding-left:10px}
.agent-work-toggle{font-size:9px;padding:2px 6px;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:4px}
.agent-work-toggle.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.at-badge{flex-shrink:0;font-size:9px;line-height:1;padding:1px 4px;border-radius:3px;border:1px solid var(--border);color:var(--text-muted)}
.at-badge.run{border-color:#1a7f37;color:#1a7f37}
.at-badge.human{border-color:#9a6700;color:#9a6700}
.at-badge.wait{border-color:#9a6700;color:#9a6700}
.at-badge.sub{border-color:#8250df;color:#8250df}
.at-badge.idle{opacity:.7}
.at-agent-gear{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:1px 4px;font-size:11px;opacity:0;flex-shrink:0;font-family:inherit;margin-top:2px}
/* §MEETING_REC 사이드바 진입(2026-08-21) — 프로젝트 헤더에서 그 프로젝트 회의록으로 바로 간다.
   at-agent-gear 와 달리 hover 없이도 보여야 해서 별도 클래스로 둔다(0건이면 흐리게). */
.at-mtg-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:1px 4px;font-size:10px;
  opacity:.45;flex-shrink:0;font-family:inherit;line-height:1.2;border-radius:4px;letter-spacing:0}
.at-mtg-btn:hover{opacity:1;background:var(--hover-bg,rgba(255,255,255,.08))}
.at-mtg-btn.has{opacity:.95;color:var(--proj-fg,#4a9);font-weight:700}
.at-agent:hover .at-agent-gear{opacity:.7}
.at-agent-gear:hover{opacity:1!important}
/* §P9(2026-07-26) 실행상태 표시 + context 모달 */
#chatStatusBar{display:none;align-items:center;gap:6px;padding:4px 8px;margin:8px 0 0;background:var(--panel-bg2);border-radius:6px;font-size:var(--fs-sm);border:1px solid var(--border)}
#chatStatusBar.running{display:flex;flex-wrap:wrap}
/* §행동가시화 — 상태바 둘째 줄: 지금 도는 툴의 의도 한 줄 + 툴 단위 경과초 */
#chatStatusSub{flex-basis:100%;font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chatStatusSub:empty{display:none}
/* §USAGE_BAR(2026-08-13) — 입력창 위 잔여한도 칩. 값은 남은 % */
#usageStatusRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:2px 0 4px;min-height:18px}
#usageBar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#currentDateTime{margin-left:auto;color:var(--text-muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;
  white-space:nowrap;user-select:none}
.usage-chip{position:relative;font-size:var(--fs-xs);line-height:1.4;padding:2px 8px;border-radius:999px;border:1px solid var(--border2);
  background:var(--panel-bg2);color:var(--text-muted);cursor:pointer;user-select:none;white-space:nowrap}
.usage-chip.usage-ok{color:var(--success);border-color:color-mix(in srgb, var(--success) 45%, var(--border2))}
.usage-chip.usage-low{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 55%, var(--border2))}
.usage-chip.usage-empty,.usage-chip.usage-err{color:var(--err);border-color:color-mix(in srgb, var(--err) 55%, var(--border2))}
.usage-tip{display:none;position:absolute;left:0;bottom:calc(100% + 6px);z-index:50;min-width:168px;padding:6px 8px;
  border-radius:6px;border:1px solid var(--border);background:var(--panel-bg2);color:var(--text);font-size:var(--fs-xs);
  line-height:1.55;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.28);pointer-events:none}
.usage-chip:last-child .usage-tip{left:auto;right:0}
/* §USAGE_TIP_PORTAL(2026-09-18) — 칩 안의 .usage-tip은 내용 보관용(항상 숨김).
   #usageStatusRow가 overflow-x:auto 스크롤 컨테이너라 칩 안에서는 위쪽이 잘린다.
   실제 표시는 body 직속 #usageTipFloat를 position:fixed로 띄워 클리핑을 벗어난다. */
#usageTipFloat{position:fixed;display:none;left:0;top:0;bottom:auto;z-index:6000;max-width:min(360px,92vw);white-space:normal}
.usage-chip.usage-busy{color:var(--text-muted);border-style:dashed;cursor:default}
.usage-chip.usage-busy::before{content:'';display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:-1px;
  border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:usage-spin .8s linear infinite}
@keyframes usage-spin{to{transform:rotate(360deg)}}
#usageBar.busy .usage-chip:not(.usage-busy){opacity:.5}
.usage-tip .u-k{color:var(--text-muted);margin-right:6px}
.usage-tip .u-sub{color:var(--text-muted);padding-left:10px}
#chatStatusDot{width:8px;height:8px;border-radius:50%;background:#1a7f37;flex-shrink:0;animation:pulse-dot 1.2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
/* §메시지큐(2026-08-04) — 턴 실행 중 다음 메시지를 미리 쌓고, 실행 전 취소·합치기·순서변경 가능 */
#msgQueue{display:none;flex-direction:column;gap:4px;margin:6px 0 0;padding:6px 8px;background:var(--panel-bg2);border:1px dashed var(--border2);border-radius:6px;font-size:var(--fs-sm)}
#msgQueue.has-items{display:flex}
.msgq-head{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:var(--fs-xs)}
.msgq-head b{color:var(--text);font-weight:600}
.msgq-clear{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:var(--fs-xs);padding:2px 6px;font-family:inherit}
.msgq-clear:hover{color:var(--err)}
.msgq-item{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;background:var(--input-bg);border:1px solid var(--border);border-radius:5px}
.msgq-idx{flex-shrink:0;color:var(--text-muted);font-size:var(--fs-xs);min-width:1.2em;padding-top:2px}
.msgq-text{flex:1;white-space:pre-wrap;word-break:break-word;line-height:1.4;max-height:4.2em;overflow:hidden}
.msgq-actions{flex-shrink:0;display:flex;align-items:center;gap:1px}
.msgq-actions button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 5px;font-size:12px;line-height:1.2;font-family:inherit;border-radius:3px}
.msgq-actions button:hover:not(:disabled){color:var(--text);background:var(--panel-bg2)}
.msgq-actions button:disabled{opacity:.35;cursor:default}
.msgq-actions .msgq-cancel:hover:not(:disabled){color:var(--err)}
.msgq-actions .msgq-merge{font-size:11px;padding:2px 6px}
/* §채팅 하단 작업 대장(2026-08-26) — 에이전트가 분리 실행한 활성 작업을 대화 중 바로 확인 */
#chatBackgroundJobs{display:flex;flex-direction:column;margin:6px 0 0;border:1px solid var(--border2);border-radius:6px;background:var(--panel-bg2);font-size:var(--fs-xs);overflow:hidden;flex-shrink:0}
.cbj-head{display:flex;align-items:center;gap:7px;padding:5px 8px;background:var(--input-bg);cursor:pointer;user-select:none}
.cbj-head:hover{background:var(--hover-bg)}
.cbj-head b{font-size:var(--fs-sm);color:var(--text-strong)}
.cbj-count{padding:0 6px;border-radius:9px;background:var(--link-bg);color:var(--link-fg);font-variant-numeric:tabular-nums}
.cbj-grow{flex:1}
.cbj-open{background:none;border:0;color:var(--text-muted);cursor:pointer;padding:1px 5px;font-size:var(--fs-xs)}
.cbj-open:hover{color:var(--text-strong)}
.cbj-list{display:flex;flex-direction:column;max-height:116px;overflow-y:auto;border-top:1px solid var(--border)}
.cbj-list:empty{display:none}
#chatBackgroundJobs.collapsed .cbj-list{display:none}
.cbj-item{display:grid;grid-template-columns:minmax(86px,.7fr) minmax(120px,1.6fr) auto;gap:8px;align-items:center;padding:4px 8px;border-bottom:1px solid var(--row-border);min-width:0;cursor:pointer}
.cbj-item:hover{background:var(--hover-bg)}
.cbj-item:last-child{border-bottom:0}
.cbj-owner,.cbj-command{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cbj-owner{color:var(--text-strong);font-weight:600}
.cbj-command{color:var(--text-muted)}
.cbj-meta{color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:700px){.cbj-item{grid-template-columns:minmax(72px,.7fr) minmax(80px,1fr)}.cbj-meta{display:none}}
/* §예약실행(2026-08-05) — 대기열과 같은 자리·같은 문법. 다른 점은 '언제'가 붙는다는 것뿐 */
#schedBox{display:none;flex-direction:column;gap:4px;margin:6px 0 0;padding:6px 8px;background:var(--panel-bg2);border:1px dashed var(--border2);border-radius:6px;font-size:var(--fs-sm)}
#schedBox.has-items{display:flex}
  .schd-when{flex-shrink:0;color:var(--accent);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;padding-top:2px;min-width:8.5em}
  .schd-left{flex-shrink:0;color:var(--text-muted);font-size:var(--fs-xs);padding-top:2px}
  #agentSummaryOverlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:70;align-items:center;justify-content:center;padding:20px}
  #agentSummaryOverlay.open{display:flex}
  #agentSummaryPanel{width:900px;max-width:96vw;max-height:88vh;overflow:auto;background:var(--panel-bg);border:1px solid var(--border2);border-radius:10px;padding:16px}
  /* §상태요약 가독성(2026-08-05, 유저 요청 "1칼럼으로 쭉 나열, 글자 잘보이게") — 3칼럼 그리드/줄임표 제거 */
  #agentSummaryBody{display:flex;flex-direction:column;gap:12px;margin-top:12px}
  .agent-summary-card{border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;padding:12px 14px;background:var(--panel-bg2);cursor:pointer}
  .agent-summary-card:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--hover-bg)}
  .agent-summary-card.is-running{border-left-color:var(--accent)}
  .agent-summary-card.is-attn{border-left-color:var(--err)}
  .agent-summary-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--border)}
  .agent-summary-head b{flex:1;min-width:12em;font-size:1.06em}
  .agent-summary-pill{font-size:var(--fs-xs);padding:1px 6px;border-radius:8px;background:var(--link-bg);color:var(--link-fg);white-space:nowrap}
  .agent-summary-pill.warn{color:var(--warn)} .agent-summary-pill.err{color:var(--err)}
  .agent-summary-line{display:grid;grid-template-columns:6.2em 1fr;gap:10px;align-items:baseline;font-size:var(--fs-sm);line-height:1.55;margin-top:5px}
  .agent-summary-line > .k{color:var(--text-muted);font-size:var(--fs-xs);letter-spacing:.02em;text-align:right}
  .agent-summary-line > .v{white-space:pre-wrap;overflow-wrap:anywhere}
  .agent-summary-line.goal > .v{font-weight:600}
  .agent-summary-line.attn > .v{color:var(--err)}
  .agent-summary-line.warn > .v{color:var(--warn);font-variant-numeric:tabular-nums}
  .agent-summary-line.muted > .v{color:var(--text-muted)}
  /* §프로그레스보드 탭화(2026-08-05) — 팝업 오버레이 대신 #mainContent 전체 창(탭 타입 progress) */
  #mainContent.progress-mode{padding:0;overflow:hidden}
  /* Full-panel tabs are siblings of #viewStack. Hiding only the chat children leaves an
     empty flex:1 wrapper occupying the upper half and pushes the panel downward — so every
     workspace wrapper (viewStack > fileView/chatView > drSplitRow) must go, not just the inner one. */
  #mainContent.progress-mode #viewStack,
  #mainContent.progress-mode #drSplitRow,
  /* §TRACK_MODEL(PROP-270 item5) — 응답 꼬리 델타 3줄. 모델이 쓰는 문장이 아니라 서버 값이다. */
  .tk-delta{display:none;flex-direction:column;gap:2px;margin:6px 0 0;padding:6px 9px;border:1px solid var(--border2);
            border-radius:8px;background:var(--bg2);font-size:var(--fs-sm);color:var(--text-muted)}
  .tk-delta.on{display:flex}
  .tk-delta b{color:var(--text-strong);font-weight:600}
  .tk-delta .tk-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .tk-delta select,.tk-delta button{font-size:var(--fs-sm);padding:2px 6px}
  .tk-branch{color:var(--warn,#c98b2e)}
  .tk-delta.tk-flash{border-color:var(--accent,#4a8cff);background:var(--bg3,rgba(120,160,255,.12))}
  .tb-track{display:flex;gap:6px;align-items:center;padding:3px 6px;border-radius:6px}
  .tb-track+.tb-track{margin-top:2px}
  .tb-track .tk-id{font-family:var(--mono);color:var(--text-muted);min-width:34px}
  .tb-track.tk-active{background:var(--bg3,rgba(120,160,255,.12))}
  .tb-track .tk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tk-notes{font-size:var(--fs-sm);color:var(--text-muted);padding:0 6px 3px 46px;line-height:1.35}
  .tk-notes div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 트랙 행 클릭 = 그 트랙으로 전환(2026-09-12). 활성 행은 누를 것이 없으니 포인터를 주지 않는다. */
  .tb-track.tk-return{background:var(--bg3,rgba(120,160,255,.14));flex-wrap:wrap;font-size:var(--fs-sm)}
  /* §ASK_NEXT_BOARD(p567) — 루트 종료 후 되묻는 선택지 줄 */
  .tb-track.tk-ask{background:var(--bg3,rgba(224,179,65,.14));flex-wrap:wrap;gap:4px;font-size:var(--fs-sm)}
  .tb-track .tk-root{opacity:.7}
  .tb-track .tk-closable{color:var(--ok,#7bd88f);font-weight:600}
  .tb-track .tk-nodw{opacity:.75;color:var(--warn,#e0b341)}
  .tb-state.tk-over{color:var(--warn,#e0b341);font-weight:600}
  .tk-lineage{padding:4px 6px;max-height:42vh;overflow:auto}
  .tb-track.tk-switch{cursor:pointer}
  .tb-track.tk-switch:hover{background:var(--bg2,rgba(127,127,127,.12))}
  .tb-panel.tk-flash{border-color:var(--accent,#4a8cff)}
  #progressBoardPanel{display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg);padding:12px 16px 16px}
  #progressBoardPanel.open{display:flex}
  #progressBoardHead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--border);flex-shrink:0}
  #progressBoardHead b{font-size:1.05em}
  #progressBody{flex:1;overflow:auto;min-height:0;padding-top:12px}
  /* §인박스·실행검수(2026-08-06) — 프로그레스 보드와 같은 전체창(#progressBoardPanel)을 공유한다.
     탭 타입만 다르고 크롬(제목·새로고침·닫기)은 한 벌이라, 화면 규칙이 갈라지지 않는다. */
  .inbox-badge{display:inline-block;min-width:1.5em;padding:0 5px;border-radius:9px;background:var(--err);color:#fff;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;text-align:center}
  .fp-list{display:flex;flex-direction:column;gap:10px;max-width:1100px}
  .fp-card{border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;padding:11px 13px;background:var(--panel-bg2)}
  .fp-card.sev-needs_human{border-left-color:var(--err)}
  .fp-card.sev-auto_stopped{border-left-color:var(--warn)}
  .fp-card.sev-llm_quota,.fp-card.sev-vendor_cooldown{border-left-color:var(--accent)}
  .fp-card.sev-sched_deferred{border-left-color:var(--border2)}
  .fp-card.acked{opacity:.55}
  .fp-head{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
  .fp-head b{font-size:1.02em}
  .fp-head .grow{flex:1;min-width:2em}
  .fp-detail{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-sm);line-height:1.55}
  .fp-meta{color:var(--text-muted);font-size:var(--fs-xs);margin-top:5px;font-variant-numeric:tabular-nums}
  .fp-kind{font-size:var(--fs-xs);padding:1px 6px;border-radius:8px;background:var(--link-bg);color:var(--link-fg);white-space:nowrap}
  .fp-kind.err{color:var(--err)} .fp-kind.warn{color:var(--warn)}
  .fp-card button{font-size:var(--fs-xs);padding:2px 7px}
  .rv-tools{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .rv-tool{font-size:var(--fs-xs);padding:1px 6px;border-radius:5px;background:var(--panel-bg);border:1px solid var(--border);white-space:nowrap;max-width:38em;overflow:hidden;text-overflow:ellipsis}
  .rv-tool.err{border-color:var(--err);color:var(--err)}
  .rv-sect{margin-top:6px;font-size:var(--fs-sm);display:grid;grid-template-columns:5.4em 1fr;gap:8px;align-items:baseline}
  .rv-sect > .k{color:var(--text-muted);font-size:var(--fs-xs);text-align:right}
  .rv-sect > .v{white-space:pre-wrap;overflow-wrap:anywhere}
  .fp-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:var(--fs-sm)}
  .chr-answer{max-width:1100px;border:1px solid var(--accent);border-radius:8px;padding:10px 12px;margin-bottom:10px;background:var(--active-bg);font-size:var(--fs-sm)}
  .chr-summary{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;max-width:1100px}
  .chr-stat{border:1px solid var(--border);border-radius:7px;padding:7px 10px;background:var(--panel-bg2);min-width:115px}
  .chr-stat b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
  .chr-day{display:flex;align-items:center;gap:8px;margin:14px 0 5px;max-width:1100px;border-bottom:1px solid var(--border);padding-bottom:5px}
  .chr-day b{font-size:var(--fs-base)}
  .chr-time{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-muted);min-width:88px}
  .chr-mode{font-size:var(--fs-xs);border:1px solid var(--border2);border-radius:10px;padding:1px 6px;color:var(--text-muted)}
  .chr-project{font-size:var(--fs-xs);color:var(--proj-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
  .chr-card-auto{border-left-color:var(--warn)}
  .chr-card details{margin-top:7px;font-size:var(--fs-sm)}
  .chr-card summary{cursor:pointer;color:var(--text-muted)}
  .chr-lines{margin:6px 0 0;padding-left:20px;white-space:pre-wrap}
  @media (max-width:768px){.chr-time{min-width:0}.chr-project{max-width:180px}.chr-stat{min-width:95px;flex:1}}
  /* §호스트 모니터(2026-08-06) — 1칼럼 카드 + 1시간 스파크라인 */
  .hm-list{display:flex;flex-direction:column;gap:12px;max-width:920px}
  .hm-card{border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;padding:12px 14px;background:var(--panel-bg2)}
  .hm-card.ok{border-left-color:var(--success)} .hm-card.bad{border-left-color:var(--err)}
  .hm-card.warn{border-left-color:var(--warn)}
  .hm-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
  .hm-head b{font-size:1.08em} .hm-role{color:var(--text-muted);font-size:var(--fs-xs)}
  .hm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 14px;margin-bottom:8px}
  .hm-metric .k{color:var(--text-muted);font-size:var(--fs-xs)} .hm-metric .v{font-variant-numeric:tabular-nums;font-size:1.05em}
  .hm-metric .v.hi{color:var(--err)} .hm-metric .v.mid{color:var(--warn)}
  .hm-spark{display:grid;grid-template-columns:4.2em 1fr;gap:6px;align-items:center;margin-top:4px}
  .hm-spark .k{color:var(--text-muted);font-size:var(--fs-xs);text-align:right}
  .hm-spark svg{width:100%;height:36px;background:var(--panel-bg);border-radius:4px;border:1px solid var(--border)}
  .hm-disk{font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;font-variant-numeric:tabular-nums}
  .hm-err{color:var(--err);font-size:var(--fs-sm);margin-top:6px;white-space:pre-wrap}
  .progress-subtitle{color:var(--text-muted);font-size:var(--fs-xs);margin:4px 0 0;flex:1;min-width:12em}
  .progress-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(420px,1.35fr);gap:16px;align-items:start}
  .progress-section{border:1px solid var(--border);border-radius:8px;background:var(--panel-bg2);padding:11px}
  .progress-section h3{font-size:var(--fs-sm);margin:0 0 9px;color:var(--text-strong)}
  .progress-tree{display:flex;flex-direction:column;gap:4px}
  .progress-node{display:flex;align-items:flex-start;gap:7px;padding:6px 7px;border-radius:5px;border-left:3px solid var(--border2);font-size:var(--fs-sm)}
  .progress-node.ready{border-left-color:var(--accent)} .progress-node.blocked{border-left-color:var(--warn)} .progress-node.done{border-left-color:var(--success);opacity:.72}
  .progress-node input{margin:3px 0 0}.progress-node-title{flex:1;overflow-wrap:anywhere}.progress-node-meta{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap}
  .progress-gantt{overflow:auto;padding-bottom:3px}.gantt-head,.gantt-row{display:grid;grid-template-columns:minmax(138px,1fr) minmax(250px,2.1fr);gap:8px;min-width:550px}
  .gantt-head{font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:5px}.gantt-row{align-items:center;min-height:30px;font-size:var(--fs-xs)}
  .gantt-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gantt-track{height:21px;display:grid;gap:2px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),var(--border) calc(12.5% - 1px),var(--border) 12.5%);border-radius:4px;min-width:250px}
  .gantt-bar{grid-row:1;border-radius:4px;padding:3px 5px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--accent)}.gantt-bar.done{background:var(--success)}.gantt-bar.blocked{background:var(--warn);color:#222}
  .progress-planner{border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--panel-bg2)}
  .progress-planner-head{display:grid;grid-template-columns:minmax(330px,1.7fr) minmax(150px,.7fr) minmax(190px,.9fr) 106px;gap:8px;padding:8px 10px;background:var(--panel-bg);border-bottom:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted);font-weight:600}
  .progress-edit-row{display:grid;grid-template-columns:minmax(330px,1.7fr) minmax(150px,.7fr) minmax(190px,.9fr) 106px;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--border);background:var(--panel-bg2)}
  .progress-edit-row:last-child{border-bottom:0}.progress-edit-row:hover{background:var(--hover-bg)}.progress-edit-row.dragging{opacity:.45}.progress-edit-row.drop-target{box-shadow:inset 0 2px 0 var(--accent)}
  .progress-task-cell{display:flex;align-items:center;gap:6px;min-width:0}.progress-grip{cursor:grab;color:var(--text-muted);font-size:15px;line-height:1;padding:2px}.progress-task-cell input[type=text]{min-width:0;flex:1;width:100%;font-weight:600}.progress-edit-row input[type=text]{min-width:0;width:100%}.progress-edit-row select{min-width:0;width:100%}
  .progress-kind{font-size:var(--fs-xs);padding:3px 6px;border-radius:10px;border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}.progress-kind.done{color:var(--success)}.progress-kind.blocked{color:var(--warn)}.progress-kind.ready{color:var(--accent)}
  .progress-row-actions{display:flex;gap:3px;justify-content:flex-end}.progress-row-actions button{padding:3px 6px;min-width:25px}.progress-deps{margin:-2px 0 1px;padding:7px 8px;border-radius:6px;background:var(--panel-bg);font-size:var(--fs-xs)}
  .progress-deps summary{cursor:pointer;color:var(--text-muted)}.progress-dep-options{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.progress-dep-option{display:flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid var(--border);border-radius:5px;max-width:260px;overflow:hidden}.progress-dep-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-parent-select{font-size:var(--fs-xs)}
  .progress-addbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.progress-empty{color:var(--text-muted);font-size:var(--fs-sm);padding:10px 2px}
  .progress-help{font-size:var(--fs-xs);line-height:1.5;color:var(--text-muted);margin:6px 0}.progress-empty{color:var(--text-muted);font-size:var(--fs-sm);padding:10px 2px}
  @media (max-width:800px){.progress-grid{grid-template-columns:1fr}.progress-planner-head{display:none}.progress-edit-row{grid-template-columns:1fr 1fr}.progress-edit-row .progress-task-cell,.progress-edit-row .progress-deps{grid-column:1/-1}.progress-row-actions{justify-content:start}}
  #contextOverlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:70;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
#contextOverlay.open{display:flex}
#contextPanel{background:var(--panel-bg);border:1px solid var(--border2);border-radius:10px;width:900px;max-width:96vw;height:82vh;max-height:82vh;display:flex;flex-direction:column}
/* §컨텍스트편집 — 항목 카드(체크박스 + 메타 + 내용) */
.ctxrow{border:1px solid var(--border2);border-radius:6px;margin-bottom:8px;overflow:hidden}
.ctxrow.sel{border-color:var(--err);background:var(--panel-bg2)}
.ctxrow-head{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel-bg2);font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer}
.ctxrow-head input{margin:0;width:auto}
.ctxrow-role{font-weight:600;color:var(--text)}
.ctxrow-body{padding:8px 10px;font-size:var(--fs-sm);font-family:var(--mono);white-space:pre-wrap;word-break:break-word;line-height:1.55;max-height:220px;overflow-y:auto}
#contextPanel pre{flex:1;overflow-y:auto;margin:0;padding:14px 16px;font-size:var(--fs-sm);font-family:var(--mono);white-space:pre-wrap;word-break:break-word;line-height:1.6}
.turn-time{color:var(--text-muted);font-size:var(--fs-xs);margin-left:6px}
/* §P4(2026-07-22) 접근성+반응형 — 모바일에서 사이드바 오프캔버스, 서브패널 풀스크린, 입력창 sticky */
#sidebarToggle{display:none}
#sidebarBackdrop{display:none}
#inputRow{position:sticky;bottom:0;background:var(--bg);z-index:5;padding-bottom:2px}
/* §채팅 이미지 첨부 트레이(2026-09-01) — 입력창 바로 위 썸네일 스트립 */
.attach-tray{display:none;gap:8px;flex-wrap:wrap;align-items:flex-start;padding:6px 2px 2px}
.attach-tray.on{display:flex}
.attach-item{position:relative;width:78px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--panel)}
.attach-item img{display:block;width:100%;height:56px;object-fit:cover}
.attach-item .att-name{font-size:10px;line-height:14px;padding:1px 4px;color:var(--compact);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-item .att-x{position:absolute;top:2px;right:2px;width:18px;height:18px;line-height:14px;text-align:center;border:none;border-radius:9px;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;font-size:12px;padding:0}
.attach-item .att-bar{position:absolute;left:0;right:0;bottom:16px;height:3px;background:rgba(0,0,0,.4)}
.attach-item .att-bar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.attach-item.uploading img{filter:brightness(.5)}
.attach-item .att-spin{position:absolute;left:0;right:0;top:0;bottom:16px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.attach-item.err{border-color:var(--err)}
.attach-item.err img{filter:grayscale(1) brightness(.5)}
.attach-item.err .att-spin{color:var(--err)}
.attach-item .att-doc{display:flex;align-items:center;justify-content:center;height:56px;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--compact);background:var(--bg)}
/* PROP-133 item2: 코드 참조 칩 — 파일 첨부와 눈으로 구분되게 강조색 테두리 */
.attach-item .att-doc.att-ref{font-size:11px;letter-spacing:0;color:var(--accent);background:var(--panel-bg2)}
/* PROP-133 item3: 이번 턴이 바꾼 파일 칩 + 인라인 diff 뷰 */
.chg-bar{display:none;flex-wrap:wrap;align-content:flex-start;gap:6px;margin:6px 0 0;max-height:74px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-width:768px){.chg-bar{max-height:56px}}
.chg-bar.on{display:flex}
.chg-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border:1px solid var(--border);border-radius:11px;background:var(--panel);color:var(--text-strong);font-family:var(--mono);font-size:11px;cursor:pointer}
.chg-chip:hover{border-color:var(--accent);color:var(--accent)}
.chg-chip .chg-tool{color:var(--text-muted)}
.dv-head{display:flex;align-items:center;gap:8px;padding:4px 8px;border-bottom:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-muted)}
.dv-wrap{font-family:var(--mono);font-size:12px;line-height:1.45;overflow:auto;height:calc(100% - 28px)}
.dv-row{display:flex;gap:8px;white-space:pre-wrap;word-break:break-all;padding:0 6px}
.dv-row .dv-ln{flex:0 0 46px;text-align:right;color:var(--text-muted);user-select:none}
.dv-add{background:rgba(46,160,67,.18)}
.dv-del{background:rgba(248,81,73,.18)}
.attach-item.uploading .att-doc{opacity:.4}
.attach-item.err .att-doc{color:var(--err)}
/* §모바일 1칼럼(2026-08-16, 유저요청) — 좁은 화면 전용 뷰 전환 바. 데스크톱에선 존재하지 않는다. */
#mobBar{display:none;position:fixed;top:8px;right:8px;z-index:45;gap:3px;align-items:center;
  background:var(--panel-bg);border:1px solid var(--border2);border-radius:6px;padding:2px}
#mobBar button{background:none;border:none;color:var(--text-muted);font-size:var(--fs-base);padding:5px 9px;border-radius:4px;line-height:1}
#mobBar button.on{background:var(--active-bg);color:var(--text-max)}
/* §MOBBAR_INLINE(2026-09-19, p537) — 데스크톱 재정의는 반드시 위 기본규칙
   **뒤**에 와야 한다. 구체성이 같아(id 1개) 앞에 두면 position:fixed · top · right ·
   border 가 되살아나 데스크톱에서도 우상단 상자가 떠고 #tabBarActions 와 겹친다. */
@media (min-width:769px){
  #mobBar{display:flex !important;position:static;top:auto;right:auto;z-index:auto;
    background:none;border:none;border-right:1px solid var(--border);border-radius:0;
    padding:0 4px 0 0;margin-right:2px}
  #mobBar button{font-size:13px;padding:3px 7px;cursor:pointer}
  #mobBar button:hover{background:var(--border);color:var(--fg)}
}
#railBackdrop{display:none}
@media (max-width: 768px){
  #sidebarToggle{display:block;position:fixed;top:8px;left:8px;z-index:45;font-size:var(--fs-lg);padding:6px 10px;
    background:var(--panel-bg);border:1px solid var(--border2);border-radius:6px}
  /* 모바일은 오프캔버스(햄버거) 방식이라 데스크톱용 접기/펼치기 버튼은 숨긴다 — 둘이 겹치면 혼란 */
  #sidebarReopenBtn{display:none !important}
  #sidebar.collapsed{width:80vw;padding:10px;border-right:1px solid var(--border)}
  #sidebar.collapsed > *{display:revert !important}
  /* width는 !important — 데스크톱에서 드래그로 붙은 인라인 폭이 모바일까지 따라오지 않게 */
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:40;width:80vw !important;max-width:300px;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:2px 0 12px rgba(0,0,0,.3)}
  #sidebar.open{transform:translateX(0)}
  #sidebarBackdrop.open{display:block;position:fixed;inset:0;background:var(--overlay-soft);z-index:39}
  #sidebarResize{display:none}
  #main{width:100%;padding-top:52px}
  #subPanel{width:100vw !important}
  .row{flex-wrap:wrap}
  /* §모바일 1칼럼(2026-08-16, 유저요청) — 파일을 열어도 좌우로 쪼개지 않는다.
     채팅(#paneMain)과 에디터(#paneSide)가 같은 자리를 번갈아 쓰고(body.mob-file로 전환),
     파일트리(#rightRail)는 우측 오프캔버스 드로어로 뺀다. 폭 조절 핸들은 전부 무의미하므로 숨김. */
  #paneSplitHandle{display:none !important}
  #railResizeHandle{display:none !important}
  #paneSide{width:100% !important;max-width:none;min-width:0}
  #paneSide.open{display:none}
  body.mob-file #paneSide.open{display:flex}
  body.mob-file #paneMain{display:none}
  #rightRail{position:fixed;top:0;right:0;bottom:0;z-index:41;width:86vw !important;max-width:340px;
    background:var(--panel-bg);border-left:1px solid var(--border);
    transform:translateX(100%);transition:transform .2s ease;box-shadow:-2px 0 12px rgba(0,0,0,.3)}
  #rightRail.mob-open{transform:translateX(0)}
  #railBackdrop.open{display:block;position:fixed;inset:0;background:var(--overlay-soft);z-index:40}
  /* 파일중심 프리셋(order 반전)은 1칼럼에서 의미가 없다 — 순서를 원복해 둔다 */
  body.layout-file #main,body.layout-file #sidebar,body.layout-file #rightRail{order:0}
  /* 도킹 모드도 1칼럼에선 의미가 없다 — 활동바를 숨기고 두 패널을 각자의 오프캔버스로 되돌린다 */
  #dockTabBar{display:none !important}
  body.dock-left #main,body.dock-left #sidebar,body.dock-left #rightRail{order:0}
  body.dock-left.dock-agents #rightRail,body.dock-left.dock-files #sidebar{display:flex}
  #designRail{display:none !important}
  body.dock-left #sidebarReopenBtn{display:none !important}
  #mobBar{display:flex}
}
/* §UI_REDESIGN_P1(2026-08-26) — 노트북 공간 효율 + 채팅/파일 동급 캔버스.
   기능 DOM과 id는 유지하고, 중복 프레임·여백·상태 스트립만 평탄화한다. */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --read-col:48em;--ui-radius:6px
}
#mainContent{padding:var(--sp-2);overflow:hidden}
#drSplitRow{min-height:0}
#chatPane{min-height:0;container-type:inline-size}
#log{
  border:0;border-radius:0;padding:var(--sp-2) var(--sp-3);background:transparent;
  line-height:1.62;scrollbar-gutter:stable
}
.msgline{margin:0;padding:1px 0}
.msgline.usermsg{
  margin:var(--sp-3) 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-left-width:2px;border-radius:0 var(--ui-radius) var(--ui-radius) 0;
  font-weight:500
}
.msgline > .md > p,.msgline > .md > ul,.msgline > .md > ol,
.msgline > .md > blockquote,.msgline > .md > h1,.msgline > .md > h2,.msgline > .md > h3,
.msgline > .md > h4,.msgline > .md > h5,.msgline > .md > h6{max-width:var(--read-col)}
.md p{margin:.42em 0}
.md li{margin:.24em 0}
.md pre,.md table,.md .mermaid-wrap,.md .artifact-wrap{max-width:none}
.digbtn{opacity:0;transition:opacity .12s}
.msgline:hover .digbtn,.digbtn:focus-visible{opacity:.72}

/* §UI_REDESSIGN_P2(2026-08-27) — 답변 단위 읽음/안읽음.
   첫 미확인 답변만 경계 라벨을 갖고, 나머지는 얇은 좌측 레일로 연속 구간을 표시한다. */
.assistant-turn{position:relative;padding-left:var(--sp-2);border-left:2px solid transparent}
.assistant-turn.unread{border-left-color:var(--proj-fg);background:color-mix(in srgb,var(--proj-fg) 4%,transparent)}
.assistant-turn.first-unread{margin-top:var(--sp-4);padding-top:var(--sp-3)}
.assistant-turn.first-unread::before{
  content:'여기까지 읽음';position:absolute;left:0;right:0;top:0;height:1px;background:var(--border2)
}
.assistant-turn.first-unread::after{
  content:'새 답변';position:absolute;right:var(--sp-2);top:-.62em;padding:0 var(--sp-2);
  background:var(--bg);color:var(--proj-fg);font-size:var(--fs-xs);line-height:1.25
}
#scrollBottomBtn[data-unread]:not([data-unread="0"]){width:auto;min-width:36px;padding:0 9px;font-weight:700}

/* 파일 탭도 채팅과 같은 전체 높이·바깥 여백·표면을 사용한다. */
#fileViewerPanel{
  display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;
  margin:0 !important;background:transparent
}
#fileViewerPanel[style*="display: block"]{display:flex !important}
#fileViewerPanel > .row{
  flex:0 0 36px;min-height:36px;align-items:center;gap:var(--sp-1) !important;
  margin:0;padding:0 0 var(--sp-2);border-bottom:1px solid var(--border)
}

/* §P3_WORKSPACE_SURFACES(2026-08-27) — 채팅과 파일을 같은 탭 스트립 아래의 동급 작업면으로 둔다.
   활성 탭의 작업면만 paneMain 전체 높이를 차지하며, 보조 블록처럼 위아래로 쌓이지 않는다. */
#viewStack{display:flex;flex:1;min-height:0;overflow:hidden}
.workspace-view{flex:1;min-width:0;min-height:0;overflow:hidden}
#chatView{display:flex;flex-direction:column}
#fileView{display:none;flex-direction:column;container-type:inline-size}
#mainContent.view-file #chatView{display:none}
#mainContent.view-file #fileView{display:flex}
#mainContent.view-chat #chatView{display:flex}
#mainContent.view-chat #fileView{display:none}
#mainContent.view-other #chatView,#mainContent.view-other #fileView{display:none}
#focusModeBtn.active{color:var(--accent);background:var(--active-bg)}
body.workspace-focus #sidebar,body.workspace-focus #sidebarResize,
body.workspace-focus #sidebarReopenBtn,body.workspace-focus #dockTabBar,
body.workspace-focus #rightRail,body.workspace-focus #railResizeHandle,
body.workspace-focus #designRail{display:none !important}
body.workspace-focus #main{flex:1 1 auto;max-width:none}
@container (max-width:520px){
  #fileViewerPanel > .row{flex-wrap:wrap;height:auto;min-height:36px}
  #fileViewerPanel > .row input{flex-basis:calc(100% - 24px)}
}
#fileViewer{flex:1;min-height:0;overflow:auto;border:0 !important;border-radius:0 !important}

/* §TASK_BOARD(2026-09-04) — 채팅 상단 작업 보드. 좌측 사이드바(폭 240px)에 있던 승인 핸들을
   본문 폭 전체로 옮긴 것이라, 항목 텍스트가 잘리지 않게 격자(마크·본문·단계·액션) 4열로 편다. */
.tb-panel{
  margin-bottom:10px;font-size:var(--fs-sm);border:1px solid var(--border2);
  border-radius:8px;padding:6px 10px 8px;background:var(--input-bg)
}
.tb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-title{font-weight:600;cursor:pointer;flex:0 0 auto}
.tb-counts{flex:0 0 auto;color:var(--text-muted);font-size:var(--fs-xs)}
.tb-counts b{color:var(--text-strong);font-weight:600}
.tb-meta{color:var(--text-muted);flex:1;min-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-btn{font-size:var(--fs-sm);padding:2px 6px}
/* 보드가 채팅을 다 가리지 않게 — 본문은 화면 높이의 34%까지만 쓰고 넘치면 스크롤한다.
   접힘(tb-collapsed)이면 머리줄(제목·집계·버튼)만 남고 본문·상태원문이 전부 사라진다. */
.tb-body{margin-top:6px;display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto}
.tb-body:empty{display:none}
.tb-panel.tb-collapsed .tb-body{display:none}
.tb-fold{cursor:pointer;flex:0 0 auto;color:var(--text-muted);user-select:none}
/* §TB_FOLD_INTENT(2026-09-19) — 접어둔 보드에 새 결재대기·정지가 생기면 펼치지 않고 점만 켠다. */
.tb-panel.tb-attn .tb-title::after{content:'●';color:var(--warn,#b6743b);margin-left:6px;font-size:var(--fs-xs)}
.tb-task{border:1px solid var(--border);border-radius:6px;background:var(--panel2);padding:5px 8px 6px}
.tb-task.tb-pending{border-color:var(--warn,#b6743b)}
.tb-task-head{display:flex;align-items:center;gap:7px;font-weight:700;min-width:0}
.tb-task-head .tb-tt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-pid{flex:0 0 auto;color:var(--text-muted);font-weight:500;font-size:var(--fs-xs);font-family:var(--mono)}
.tb-state{flex:0 0 auto;font-size:var(--fs-xs);padding:0 6px;border-radius:999px;
  background:var(--border2);color:var(--text-strong);font-weight:600}
.tb-state.tb-s-pending{background:#b6743b;color:#fff}
.tb-bar{height:3px;border-radius:2px;background:var(--border2);margin:4px 0 2px;overflow:hidden}
.tb-bar > i{display:block;height:100%;background:var(--success);border-radius:2px}
.tb-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;align-items:start;
  gap:6px;padding:2px 0;border-top:1px solid transparent}
.tb-row:hover{background:rgba(127,127,127,.07)}
.tb-row.tb-halt{background:rgba(182,65,59,.12)}
.tb-mark{flex:0 0 auto;line-height:1.5}
.tb-txt{min-width:0;line-height:1.5;white-space:normal;word-break:break-word}
.tb-txt .tb-note{color:var(--text-muted)}
.tb-phase{flex:0 0 auto;padding:0 5px;border-radius:3px;font-size:var(--fs-xxs,10px);color:#fff;line-height:1.6}
.tb-acts{display:flex;gap:3px;flex:0 0 auto}
.tb-acts button{padding:0 6px;font-size:var(--fs-xs);line-height:1.6}
.tb-foot{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center}
.tb-foot .tb-hint{color:var(--text-muted);font-size:var(--fs-xs);margin-left:auto}
@media (max-width:820px){
  .tb-row{grid-template-columns:16px minmax(0,1fr);grid-auto-flow:row}
  .tb-phase,.tb-acts{grid-column:2}
}

/* PROP-302 — 상태 정보는 의미별 3행으로 분리한다.
   1행 작업 상태, 2행 예약·스티어링·대기열·작업·트랙, 3행 벤더 사용량. */
#chatAuxRail{display:flex;flex-direction:column;flex:0 0 auto;margin-top:var(--sp-1);min-height:0}
#activityBar{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;padding:2px 0}
#activityBar > #chatStatusBar{margin:0;padding:2px 7px;border-radius:6px;background:transparent;min-width:0;width:100%}
#activityBar > #chatStatusBar.running{flex-wrap:nowrap}
#activityBar #chatStatusSub{flex-basis:auto;min-width:0;max-width:260px}
#activityChips{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.activity-chip{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 7px;border:1px solid var(--border);border-radius:999px;background:var(--panel-bg2);color:var(--text-muted);font-size:var(--fs-xs);cursor:pointer}
.activity-chip:hover,.activity-chip.on{border-color:var(--accent);color:var(--text-strong);background:var(--active-bg)}
.activity-chip.alert{border-color:var(--warn);color:var(--warn)}
.activity-chip b{font-variant-numeric:tabular-nums;color:inherit}
#activityDrawer{display:none;max-height:35vh;overflow-y:auto;margin-top:4px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--panel-bg2)}
#activityDrawer.open{display:block}
.activity-panel{display:none}
.activity-panel.on{display:block}
.activity-empty{padding:8px;color:var(--text-muted);font-size:var(--fs-xs)}
#activityDrawer #schedBox,#activityDrawer #steeringStatus,#activityDrawer #msgQueue,
#activityDrawer #chatBackgroundJobs{margin:0;padding:4px 7px;display:flex}
#activityDrawer #schedBox:not(.has-items),#activityDrawer #msgQueue:not(.has-items),
#activityDrawer #chatBackgroundJobs:not(.has-items){display:none}
#activityDrawer #steeringStatus:empty{display:none}
#schedBox.has-items + .activity-empty,#msgQueue.has-items + .activity-empty,
#steeringStatus:not(:empty) + .activity-empty,#chatBackgroundJobs.has-items + .activity-empty,
#activityTrackList:not(:empty) + .activity-empty{display:none}
#activityTrackList .tb-task{margin:0}
#activityTrackList .tb-track{grid-template-columns:34px minmax(0,1fr) auto auto auto}
#activityBar > #usageStatusRow{margin:0;padding:0;min-height:20px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
#activityBar #usageBar{flex-wrap:nowrap;min-width:max-content}
#activityBar #currentDateTime{display:none}
#inputRow{margin-top:var(--sp-1) !important;gap:var(--sp-1)}
#inputRow textarea{min-height:52px;max-height:28vh;line-height:1.5;padding:8px 10px}
#inputRow > button{min-height:34px;padding:5px 8px}
@media(max-width:900px){#activityBar #chatStatusSub{max-width:180px}}

@container (max-width:520px){
  #log{padding-inline:var(--sp-2)}
  .msgline > .md > p,.msgline > .md > ul,.msgline > .md > ol,
  .msgline > .md > blockquote{max-width:none}
  #fileViewerPanel > .row{flex-wrap:wrap;height:auto;min-height:36px}
}
@media (max-height:900px){
  #mainContent{padding:var(--sp-1) var(--sp-2)}
  #log{font-size:13px;line-height:1.55}
  #inputRow textarea{min-height:44px}
}
@media (max-width:768px){
  #mainContent{padding:var(--sp-1)}
  #log{padding:var(--sp-2)}
}
/* §MOBILE_PICK(2026-09-17) - 모바일에서 대화(에이전트) 목록과 채팅 탭을 손가락으로 고르기.
   행 높이를 44px(터치 최소 권장)로 올리고, hover로만 뜨던 기어를 터치기기에서 상시 노출한다.
   전부 좁은 화면 전용 - 데스크톱 레이아웃은 건드리지 않는다. */
@media (max-width:768px){
  #sidebar{width:88vw !important;max-width:360px}
  .at-grp-hdr{min-height:38px;padding:9px 8px;font-size:12px}
  .at-cat{min-height:36px;padding:8px;font-size:11px}
  .at-agent{min-height:44px;padding:9px 6px 9px 14px;font-size:var(--fs-base);gap:9px}
  .at-agent + .at-agent{border-top:1px solid var(--row-border)}
  .at-dot{width:10px;height:10px;margin-top:6px}
  .at-agent-gear{opacity:.6;padding:7px 6px;font-size:14px;margin-top:0}
  .agentitem-btn{min-height:44px;padding:11px 24px 11px 10px}
  #tabBar{min-height:44px}
  #tabsList{scroll-snap-type:x proximity}
  .v4tab{min-height:44px;min-width:116px;max-width:62vw;padding:0 6px 0 12px;font-size:13px;scroll-snap-align:start}
  .v4tab .tab-lbl{font-size:13px}
  .v4tab-close{padding:9px 7px;font-size:14px;opacity:.75}
  #tabBarActions button{padding:8px 9px;font-size:15px}
}
/* §MOBILE_LIST_FIRST(2026-09-17) — 좁은 화면에서 목록이 상단 도구 더미(메모지·알림·자동운행·더보기)에
   밀려 스크롤 끝에 있었고, 남은 가로폭도 들여쓰기·배지·기어에 먹혀 이름이 잘렸다.
   사이드바는 flex column이므로 order만으로 목록을 계정줄 바로 아래로 끌어올린다(DOM 순서는 그대로). */
.agent-filter-row{display:flex;gap:4px;margin-bottom:6px}
.agent-filter{flex:1;min-width:0;font-size:var(--fs-sm);padding:5px 8px;box-sizing:border-box}
#agentFilterClear{padding:4px 8px;font-size:var(--fs-sm);background:none;border:1px solid var(--border);
  border-radius:4px;color:var(--text-muted);cursor:pointer;flex-shrink:0}
#agentlist.filtering .at-grp-hdr,#agentlist.filtering .at-cat{opacity:.75}
@media (max-width:900px){
  #sideAccountBlock{order:-2}
  #agentListBlock{order:-1;border-top:none;padding-top:0}
  /* 목록이 위로 올라가면 아래 도구 더미와 경계가 없어지므로 목록 쪽에 밑줄을 준다 */
  #agentListBlock{border-bottom:1px solid var(--border);padding-bottom:8px}
  .agent-filter{min-height:38px}
  #agentFilterClear{min-height:38px}
}
@media (max-width:768px){
  /* 이름 표시폭 회수 — 3단 들여쓰기와 좌우 여백을 줄이고 배지를 축약한다 */
  #sidebar{width:92vw !important;max-width:380px}
  .at-agent{padding-left:10px;padding-right:2px;gap:7px}
  .at-cat{padding-left:6px}
  .at-grp-hdr{padding-left:6px}
  .at-badge{font-size:8px;padding:1px 3px}
  .at-agent-gear{padding:7px 4px}
}
/* 터치 전용 기기는 hover가 없어 기어가 영영 안 보인다 - 폭과 무관하게 드러낸다 */
@media (hover:none){
  .at-agent-gear,.at-cat .at-agent-gear{opacity:.55}
}


/* §STICKY_LEDE(2026-09-19 PROP-425 → p534 → 2026-09-21 p580 무레이아웃 재작성)
   "유저 입력 채팅말"을 채팅창 위에 고정한다. 대상은 #log 직계 .msgline.usermsg 전부.
   p580: 메시지 자체에 클래스를 걸어 접던 구 방식을 버렸다 — 접히면 문서 높이가 줄어
   로그 끝 근처의 긴 메시지에서는 스크롤 보정이 최대값에 막혀 진동했다(아래로 못 내려감).
   지금은 높이 0 인 sticky 바를 메시지 앞에 두고 그 안의 absolute 자식만 켜고 끈다 —
   흐름 높이 기여가 항상 0 이라 스크롤이 절대 튀지 않는다. */
#log .lede-bar{position:sticky;top:0;height:0;z-index:3;overflow:visible}
#log .lede-bar-in{
  display:none;
  position:absolute;left:0;right:0;top:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--user-msg-bg);color:var(--text-strong);font-weight:500;
  border-left:2px solid var(--user-msg-bar);
  border-bottom:1px solid var(--user-msg-bar);
  border-radius:0 var(--ui-radius) 0 0;
  padding:var(--sp-2) var(--sp-3);
  cursor:pointer;
  /* 포트 안쪽 padding 틈으로 본문이 비쳐 보이지 않게 위쪽을 같은 색으로 덮는다 */
  box-shadow:0 -14px 0 0 var(--user-msg-bg);
}
#log .lede-bar.on .lede-bar-in{display:block}
#log .lede-sentinel{height:1px;margin:0;padding:0;pointer-events:none}
/* 토글이 꺼지면 JS 가 바를 아예 만들지 않는다. 아래는 잔재 방어용. */
#log.no-pin-lede .lede-bar-in{display:none}
/* §TOPIC_BOARD (PROP-578 item3) — 채팅 로그 왼쪽 위에 겹쳐 뜨는 주제 흐름 서랍. 위치는 JS가 #log 기준으로 잡는다. */
#topicBoard{display:none;position:fixed;z-index:45;width:min(320px,42vw);flex-direction:column;overflow:auto;background:var(--panel-bg2);border:1px solid var(--border2);border-radius:0 8px 8px 0;box-shadow:4px 0 14px rgba(0,0,0,.35);font-size:var(--fs-sm)}
#topicBoard .tbd-head{display:flex;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel-bg2);z-index:1}
#topicBoard .tbd-head span{flex:1;font-weight:600}
#topicBoard .tbd-head button{padding:2px 6px;font-size:var(--fs-xs)}
#topicBoard .tbd-sec{padding:4px 0;border-bottom:1px solid var(--border)}
#topicBoard .tbd-sub{color:var(--text-muted);font-size:var(--fs-xs);padding:2px 8px}
#topicBoard .tbd-seg,#topicBoard .tbd-topic,#topicBoard .tbd-turn{cursor:pointer;padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topicBoard .tbd-seg:hover,#topicBoard .tbd-topic:hover,#topicBoard .tbd-turn:hover{background:rgba(127,127,127,.15)}
#topicBoard .cur{color:var(--link-fg);font-weight:600}
#topicBoard .tbd-turn{color:var(--text-muted);font-size:var(--fs-xs)}
#topicBoard .tbd-empty{padding:10px;color:var(--text-muted)}
.assistant-turn.tbd-flash{outline:2px solid var(--link-fg);outline-offset:2px}
#topicBoardBtn.active{outline:2px solid var(--link-fg)}
#topicBoard .tbd-main{margin:6px 8px;padding:4px 8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topicBoard .tbd-resume{padding:0 4px;margin-right:4px;font-size:var(--fs-xs);line-height:1.2}
#topicBoard>*{flex-shrink:0}  /* 세로 flex 서랍에서 overflow:hidden 항목(복귀 버튼)이 찌그러지던 것 방지 */
/* §WHITEBOARD UI (PROP-687 item3) — 채팅 로그 오른쪽 위에 겹쳐 뜨는 화이트보드 팝업. 위치·폭은 JS가 #log 기준으로 잡는다. */
#wbPanel{display:none;position:fixed;z-index:46;flex-direction:column;background:var(--panel-bg2);border:1px solid var(--border2);border-radius:8px 0 0 8px;box-shadow:-4px 0 14px rgba(0,0,0,.35);font-size:var(--fs-sm)}
#wbPanel .wb-head{display:flex;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--border)}
#wbPanel .wb-title{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wbPanel .wb-head button{padding:2px 6px;font-size:var(--fs-xs)}
#wbPanel .wb-head button:disabled{opacity:.45;cursor:default}
#wbPanel .wb-tabs{display:flex;gap:2px;overflow-x:auto;padding:4px 6px 0;border-bottom:1px solid var(--border);flex-shrink:0}
#wbPanel .wb-tab{display:flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--border);border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer;white-space:nowrap;max-width:200px;color:var(--text-muted)}
#wbPanel .wb-tab.on{background:var(--input-bg);color:var(--text-strong);font-weight:600}
#wbPanel .wb-tab.gone .wb-name{text-decoration:line-through}
#wbPanel .wb-name{overflow:hidden;text-overflow:ellipsis}
#wbPanel .wb-dot{color:var(--warn);font-size:10px}
#wbPanel .wb-x,#wbPanel .wb-mv{opacity:.55;padding:0 2px}
#wbPanel .wb-x:hover,#wbPanel .wb-mv:hover{opacity:1}
#wbPanel .wb-status{min-height:0;padding:0 8px;font-size:var(--fs-xs);color:var(--text-muted)}
#wbPanel .wb-status:not(:empty){padding:3px 8px}
#wbPanel .wb-status.bad{color:var(--warn)}
#wbPanel .wb-body{flex:1;overflow:auto;padding:6px 10px;background:var(--input-bg)}
#wbPanel .wb-empty{white-space:pre-wrap;color:var(--text-muted);padding:10px}
#wbPanel .wb-hunk{border:1px solid var(--border2);border-radius:6px;margin:8px 0;padding:6px}
#wbPanel .wb-hunk-h{font-weight:600;margin-bottom:4px}
#wbPanel .wb-opt{display:block;margin:4px 0;cursor:pointer}
#wbPanel .wb-opt pre{margin:2px 0 0 20px;padding:4px 6px;white-space:pre-wrap;background:rgba(127,127,127,.12);border-radius:4px;font-family:var(--mono);font-size:var(--fs-xs)}
#wbPanel .wb-conflict-bar{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;position:sticky;bottom:0;padding:6px 0;background:var(--input-bg)}
#wbBtn.has-unread{box-shadow:inset 0 -3px 0 var(--warn)}
/* §WHITEBOARD 하이라이트·읽음 (PROP-687 item4) — 다른 쪽이 고친 블록 배경 + 누가 고쳤는지 라벨, 지워진 자리 표식 */
#wbPanel .mdlb.wb-hl{position:relative;background:rgba(255,196,0,.16);box-shadow:inset 3px 0 0 var(--warn);border-radius:3px;transition:background .6s}
#wbPanel .mdlb.wb-hl::after{content:attr(data-wb-who);position:absolute;right:4px;top:2px;font-size:10px;line-height:1;padding:1px 4px;border-radius:3px;background:var(--panel-bg2);color:var(--text-muted);pointer-events:none}
#wbPanel .wb-del{margin:2px 0;padding:0 6px;font-size:var(--fs-xs);line-height:1.6;color:var(--warn);border-top:1px dashed var(--warn);cursor:help;opacity:.85}
#wbPanel .wb-del::after{content:' · ' attr(data-wb-who);color:var(--text-muted)}
#wbPanel.wb-active{border-color:var(--link-fg)}
#wbPanel .wb-plainbtn{font-family:var(--mono);font-weight:700}
#wbPanel .wb-plainbtn.on{background:var(--link-fg);color:var(--panel-bg2)}
#wbPanel .wb-alpha{width:64px;flex-shrink:0;margin:0 2px;cursor:pointer}
#wbPanel .wb-body.wb-plain{display:flex;padding:0;overflow:hidden}
#wbPanel .wb-plain-ta{flex:1;width:100%;box-sizing:border-box;resize:none;border:none;outline:none;padding:8px 10px;background:var(--input-bg);color:var(--text-strong);font-family:var(--mono);font-size:var(--fs-sm);line-height:1.55;tab-size:4;white-space:pre-wrap}
#wbPanel .wb-grip{position:absolute;z-index:2;touch-action:none}
#wbPanel .wb-grip-l{left:-3px;top:0;bottom:10px;width:7px;cursor:ew-resize}
#wbPanel .wb-grip-b{left:10px;right:0;bottom:-3px;height:7px;cursor:ns-resize}
#wbPanel .wb-grip-lb{left:-3px;bottom:-3px;width:14px;height:14px;cursor:nesw-resize;border-left:2px solid var(--border2);border-bottom:2px solid var(--border2);border-radius:0 0 0 6px}
#wbPanel .wb-grip:hover,#wbPanel.wb-resizing .wb-grip{background:rgba(127,127,127,.25)}
#wbPanel.wb-resizing{user-select:none}
/* 호버 중엔 투명도 해제(인라인 opacity를 덮음). 슬라이더를 끌 때는 미리보기를 위해 유지 */
#wbPanel{transition:opacity .12s}
#wbPanel:hover:not(:has(.wb-alpha:active)){opacity:1!important}